Get started in web development with me — Final part: JavaScript, CSS and JS frameworks
Hi there, on part 5 we finished our voting form. We set up a database to store user votes.
Lost in the series? Here are Part 1, Part 2, Part 3, Part 4 and Part 5.
How to start learning
After last post I found myself wondered what the purpose of this series was. Well, the answer I found was that its purpose, first and foremost, is to document my learning process. So I just have to find something I want to learn about and start writing.
The problem is: I didn’t know what else I wanted to learn, or rather, I didn’t know where to start. So what do we do when we don’t know where to start? We start!
You: This is bullshit
Me: You’re kinda right, how in hell would one start when one doesn’t even know where to start? Well, the way I see it, “how do I start?” and “let’s start?” are only one answer appart.
Suppose we both want to build our own cars, but you are a car engineer and I’m not. The difference is that, when we start building our cars, you’ll know which kind of pieces you need, and I won’t. So here’s the question you’ll be asking:
Where do I find these pieces?
And here’s the question I’ll be asking:
Which pieces do I need?
When I figure that out, I’ll find myself asking the exact same question you did when you started.
So what we need to do right now is ask ourselves what do we need to get started, but of course, first we need something we want to learn.
JavaScript: something to learn
I have a ton of questions about javascript:
Where is it stored in a server?
Why JavaScript instead of PHP?
What are those things with.jsin their names (node.js,express.js,…)?
I also know that JavaScript is a programming language and that it’s very popular:
For the sixth year in a row, JavaScript is the most commonly used programming language.
It’s been some time since we don’t actually start something from scratch, but I remember that Wikipedia is always a good place to start from:
JavaScript often abbreviated as JS, is a high-level, interpreted programming language that conforms to the ECMAScript specification. It is a language that is also characterized as dynamic, weakly typed, prototype-based and multi-paradigm.
Wow! Lots of concepts, let’s break them up in Appendix 1.
Okay, now that we have a minimal grasp of what JavaScript is, let’s learn how it works and how to move from PHP to JS.
Moving (?) from PHP to JavaScript
Let’s google this:
from php to javascript
Not useful. How about this?
javascript to substitute php
Nothing. Damn it.
how does javascript work
Booyah! There are two results here I like, reading the first one I found this:
JavaScript is what is called a Client-side Scripting Language
This is some great information, while PHP runs on the server (Server-side scripting), JavaScript runs on the client’s machine! Another thing interesting is in the second paragraph:
The way JavaScript works is interesting. Inside a normal Web page you place some JavaScript code (…). When the browser loads the page, the browser has a built-in interpreter that reads the JavaScript code it finds in the page and runs it.
Interesting! This is identical to what we were doing with PHP: inserting code into HTML pages, the difference now is that this code is sent to the client and then ran on his/her browser.
The second result goes a little deeper about how JavaScript was born and how it works with HTML and CSS (we haven’t talked about CSS yet, but I plan to do it in the future):
JavaScript is used to add a dynamic component to the web page and make most elements on the page programmable.
(…)
The web browser loads a web page, parses the HTML and creates what is known as a Document Object Model (DOM) from the contents. The DOM presents a live view of the web page to your JavaScript code. Your code can then make updates to the DOM and have it presented instantly to the user.
Okay, so there is this DOM thing that JavaScript updates, this allows the page to be dynamic, meaning that it can change according to the users actions (hover the mouse to the top of a button makes it change collors, etc.).
They even added a section on how to insert JS on a web page:
JavaScript can be directly embedded in the HTML. The following causes the web page to popup an alert box when it is loaded.
<script type="text/javascript">
alert("Page is loaded");
</script>
So here’s the thing about JavaScript: the page can change without the server sending another entirely new (or even a part of) page! Now let’s write some dumb examples.
Writing some JS
As always, start small. How about a page which pops up a window saying “Hello World!”?
It works! Sweet. Now let’s make that page hold a variable and print this variable on the pop up window:
Nice. How about make the “Hello World!” window appearing just by clicking a button?
I don’t know how to make the button connect to the JavaScript, let’s look it up:
get html button event javascript
Nice, so we define a function that does what we want and assign it to the button on the HTML tag… But how do we define functions on JavaScript?
function javascript
Okay, good. So we let’s do this:
Sweet. What if we had a text input field and then a submit button so that our alert window shows whatever the user enters on the field? Well, we need to know how to get the data from an input tag using JavaScript:
get input tag data with javascript
Okay, this looks like the way. But I must admit I know something I didn’t explain here before: HTML tag IDs, take a look at Appendix 2 for more on that:
Done! To be honest I found this incredibly easy, I’m not even having fun. I’ll go grab a cup of coffee and think about something more exciting.
I’m back, let’s make a tic-tac-toe game.
Tic-tac-toe
Ooof, when I stop to thing about it this seems a lot harder than what we’ve done so far. So let’s, again, break it into smaller, simpler problems shall we?
Input
First we need a way for the user to tell us which place he’s playing, I’ll use radio buttons for this:
Nice. We have a nice little board for our game. Now what we need to do is add a little bit of functionality to it. How about we make the selected buttons disappear? I have no idea on how to do this, let’s see:
javascript make buttons disappear
I found this (how did Internet exist before Stack Overflow?):
button.style.visibility = "hidden";I’m going to change the values on the buttons for IDs, because we’re not using forms after all so this value isn’t submitted anywhere:
<input type="radio" name="play" id="11">
<input type="radio" name="play" id="12">
<input type="radio" name="play" id="13">
<br>
<input type="radio" name="play" id="21">
<input type="radio" name="play" id="22">
<input type="radio" name="play" id="23">
<br>
<input type="radio" name="play" id="31">
<input type="radio" name="play" id="32">
<input type="radio" name="play" id="33">
<br>But how do we choose the selected button using JavaScript?
javascript choose selected radio button
Hmmm… Looks like we’ll need to use a form after all, I’ll tag it with and ID as well so we can easily look it up:
<form id="board">
...
</form>We can now use a for loop to iterate through the list of buttons to get the one that is checked and hide it:
Great! Except that it doesn’t work, dammit. I’ll solve this on Problem 1.
Shit, now we’ve got another problem: the button disappears and comes back shortly after, take a look at Problem 2 for the solution.
Now we need to replace a clicked button with either an X or an O:
replace html tags with javascript
This is interesting:
You can’t change the type of an element like that, instead you have to create a new element and move the contents into it. Example:
var e = document.getElementsByTagName('span')[0];var d = document.createElement('div');
d.innerHTML = e.innerHTML;e.parentNode.replaceChild(d, e);
But I’m not satisfied with that. Let’s see:
javascript replace button with text
This is more interesting, here’s what I’ve changed:
This makes the buttons be replaced by Xes, but now they’re not in the correct places. It seems like the div tags make HTML to break lines.
Ah, okay. I’ve been running away from this for long enough.
Let’s use CSS. Check out Appendix 3 for the solution of the current problem as well as a brief explanation on CSS.
Turn chooser
Now we need to be able to tell who’s playing at a given time (if it’s player X or O) so that we know what symbol is going where. I’ll use two boolean (True or False) variables: ex and oh and change their values at every play, here’s what I did with computePlay:
If you’re wondering what are those exclamation marks doing on ex = !ex; and oh = !oh; I recommend quickly looking over bitwise operations.
Question for you: why did I declare ex and oh outside of the function? Would it work otherwise? Why? Why not? Hint: take a look at variable scopes.
Winner checker
Finally, we need to know when a player has won and, if so, which player won. To do that we’re going to write a function gameFinished that checks if there’s a winner. gameFinished should be called every time someone plays and it returns ‘X’ or ‘O’ if any of the players won, and null if there’s no winner yet.
Here are the adjustments we need to do in the rest of the code:
I’ll put the code for gameFinished in Appendix 4.
And we’re done! Go play some tic-tac-toe, you’ve earned it.
You: Now that we made a bunch of stuff with JavaScript, what about those
node.js,vue.js,react.jseverybody talks so much about?
JavaScript Frameworks: those things everybody talks so much about
I know this things are called frameworks, but I have no idea about what frameworks do or how to use them.
Me: So what do we do when we know nothing about something?
You: We google it?
Me: They grow so fast… *sheds tears*
Let’s try this:
javascript frameworks
This seems like a good place to start, it has definitions of ‘framework’, ‘library’ and ‘tool’ as well as an overview of the most popular JS frameworks, let’s see what it has to say about frameworks:
A framework is an application skeleton. It requires you to approach software design in a specific way and insert your own logic at certain points. Functionality such as events, storage, and data binding are normally provided for you. Using the car analogy, a framework provides a working chassis, body, and engine. You can add, remove or tinker with some components presuming the vehicle remains operational.
So I’m thinking most frameworks would provide us a web server as well as take care of those configuration files we had a lot of trouble with when first installing Nginx, cool. Then we could just add our code and things should work.
C ya!
The purpose of this series was to give you a basic understanding of how things work not just in web development, but in general computing stuff. Being lost is not that huge of a problem — you just have to break it into smaller, simpler, stupider ones.
As always, thanks for reading :)
Where to?
I’d suggest start practicing programming if you haven’t yet. Programming is not a language-specific skill: once you know how to program (be it in Python, Java, JavaScript, C, etc.) it’ll be much easier to learn new programming languages — because the only thing you’ll actually need to learn is syntax. Although different languages may use different programming paradigms, general programming knowledge still makes things much easier.
Python
Python is a very good language to begin with, it can be used to do basically anything: from machine learning, data science and web crawlers to games and full applications.
Here’s a beginners’ tutorial on Python.
JavaScript/HTML/CSS
You already know what these guys are used for. FreeCodeCamp is by far the best resource to learn JavaScript: it’s completely free, open source and hands-on oriented.
Linux
If you don’t use Linux, that’s okay, nobody is perfect.
lol
Seriously now, most of the machines in the world run Linux (I didn’t say most PCs): Modems, routers, servers, smartphones (Android), etc. Even if you don’t plan in using Linux daily on your PC, it’s crucial to understand how to operate a Linux terminal as well as how processes, permissions, users and services work on Linux.
I found this tutorial that seems to cover some important things so that you can survive in the terminal world without a mouse.
Appendix 1: Definitions
High-level programming languages
There are tons of programming languages out there. The level of a language often means how far from actual computer, binary code the language code, and thus how far from human language.
Let’s tell the computer to print “Hello World!” in a couple different languages:
EnglishHey computer, would you print "Hello World!" please?Pythonprint('Hello World')C#include <stdio.h>int main(int argc, char *argv[]) {printf("Hello World!\n");}Assemblysection .text
global _start ;must be declared for linker (ld)_start: ;tell linker entry point mov edx,len ;message length
mov ecx,msg ;message to write
mov ebx,1 ;file descriptor (stdout)
mov eax,4 ;system call number (sys_write)
int 0x80 ;call kernel mov eax,1 ;system call number (sys_exit)
int 0x80 ;call kernelsection .datamsg db 'Hello, world!',0xa ;our dear string
len equ $ - msg ;length of our dear string
I confess I copied the assembly code. The main idea here is that the lower the language level, the more distant it is from human language (English is the highest-level language there is, because it’s a human language!).
This means that, given the fact that JavaScript is a high-level language, we won’t have much trouble with the syntax (the commands) :)
Interpreted vs compiled programming languages
Our CPUs don’t understand code the way we write it (with English words and stuff). That’s why we have compilers and interpreters.
Compilers process our code and produce binary files, files with only zeroes and ones, which can be understood by the CPU.
Interpreters work more or less like this: each line of code is, at execution time (runtime), translated into machine code and then ran. Code interpretation has much more variations and, although not all code interpretation works exactly like explained here, that’s more or less the concept behind it.
Dynamic vs static programming languages
Dynamic programming language, in computer science, is a class of high-level programming languages which, at runtime, execute many common programming behaviors that static programming languages perform during compilation. These behaviors could include extension of the program, by adding new code, by extending objects and definitions, or by modifying the type system.
So let’s go back to the Python “Hello World” example for a moment:
#include <stdio.h>
...
printf ("Hello World!\n");
...That’s it. You don’t have to include code for correctly placing the letters at the right positions of the screen, nor load the string into memory, etc. That’s because the function printf does all that for you! This function is in the stdio library, which we have included in the code. When the code is compiled, the compiler includes the code for the printf function into the binary file.
On dynamic languages this doesn’t happen, it’s the program that executes the code that’s responsible for including any external code the program requires at runtime.
Weakly vs strongly-typed programming languages
Programming languages often have variable types like integer and char. This explains well what strongly and weakly-typed languages are:
Generally, a strongly typed language has stricter typing rules at compile time, which implies that errors and exceptions are more likely to happen during compilation. (…) On the other hand, a weakly typed language has looser typing rules and may produce unpredictable results or may perform implicit type conversion at runtime.
This Stack Overflow question is actually very relevant as well:
“Strongly typed” and “weakly typed” are terms that have no widely agreed-upon technical meaning. Terms that do have a well-defined meaning are
Dynamically typed means that types are attached to values at run time, and an attempt to mix values of different types may cause a “run-time type error”. (…)
Statically typed means that types are checked at compile time, and a program that does not have a static type is rejected by the compiler. (…)
Programming paradigms
Here’s what the Wikipedia page tells us:
Programming paradigms are a way to classify programming languages based on their features. Languages can be classified into multiple paradigms.
I won’t go into detail about this, our scope is getting too broad too fast.
Appendix 2: HTML Tag IDs
Some HTML pages have lots of tags, several buttons, input fields, etc. So imagine that you’re working in a page with dozens of text input fields inside various forms. How do you identify each of these fields?
Well, one thing you can do is use HTML Tag IDs. IDs can be used to identify not only input fields, but any HTML tag. Here’s an example of HTML Tag ID usage.
Appendix 3: CSS (Cascading Style Sheets)
The problem we stumbled upon seems to be fairly recurrent in web development: how to style and place stuff easily and accurately on our pages? CSS is the answer to these types of problems… kind of.
That’s it. My knowledge of CSS ends here. On to the research now:
how to place buttons on a grid web
How can I style this using CSS to be able to have those buttons listed as a grid with 4 columns max? I tried with
display:inline-blockandfloat:leftbut without success.
What if we tried this, maybe it works for us.
You: But wait, where the hell do we write this things on our HTML?
Great question. I have absolutely no idea, but hey:
where to put css on html
This looks like a nice tutorial. I’ll embed my CSS inline (using section 3 of the tutorial), but feel free to do as you please. I changed all my div tags to include display: inline-block;:
<div style="display:inline-block;" id="div_11"><input type="radio" name="play" onclick="computePlay(11)" id="11"></div>IT
WORKS
To be honest I didn’t expect this to work at all, so imagine how happy I am right now :D
Appendix 4: ‘gameFinished’ function code
Problem 1: Can’t select checked button
Let’s take a look at the code again:
I guess the problem is that the execution flow never enters if(button.checked), that is probably because button.checked is always false. Let’s take a look at what’s in button.checked, just before the if statement I’ll insert: alert(button.checked); so that will cause the page to pop up a window with the content of button.checked.
It says undefined! Hmmm interesting, this property is probably old or doesn’t exist for radio buttons. But looking at this example of for/in usage I noticed something useful: the for/in in JavaScript is not like in Python (as I was assuming it was). Let’s change it for this:
for (button in radios) {
if (radios[button].checked) {
return radios[button];
}
}Sweet! It works!
Problem 2: Radio button comes back shortly after disappearing
Let’s google something shall we?
button.style.visibility = “hidden”; doesnt stay hidden
Found this Stack Overflow question, look at this bit of his original code:
document.getElementById("save").hidden = "";
Hmm he’s changing this hidden property, while we change style.visibility. Let’s try changing that:
selected.hidden = "hidden";Same problem. I’m thinking problem isn’t hiding the button, but it shouldn’t come back. My guess is that the page reloads somehow after we press Play. Back to google then:
radio button doesnt stay hidden javascript
You can get the individual radio buttons using something like
var rbtn = document.getElementById('radioButton1');Then set the display or visibility style to hide or show.
rbtn.style.display = 'none'; // 'block' or 'inline' if you want to show.
Nope. Well, I guess we can always not use the ‘Play’ button. What we’d do is call computePlay() after a player clicks a radio button:
Great! Now our buttons disappear nicely. Well… Not so nicely. Now the buttons disappear, but not every button we click is the one to disappear. My guess is that our getSelectedButton function doesn’t work that well. What if we change computePlay to receive the button’s id as an argument and then we change the function callings in the HTML:
Same problem, dammit. But I have an idea of what’s happening now: the buttons are literally hiding!
You: Okay now you’re on drugs man.
The thing I didn’t realize was that hiding a button doesn’t just make it invisible (meaning that the buttons continues to be in the same place), it also hides it in the page as it never existed in the first place. So we are indeed hiding the right buttons, but if we click on the button 11 (top-left corner), for example, it will disappear, making 12 and 13 be shifted to the left, as if 11 had never been there!
So what we actually need is a way to make the button invisible, without removing it from the page.
Wait, no! We’ll need to put an X or an O in the place of the button anyways, so getting rid of the radio button after clicking it is actually a good thing!
So…. Problem kinda solved I guess?
