Basic JavaScript syntax

If you have previous experience with any of the highly popular programming languages like C++, Java, C# or PHP, you will likely recognize the JavaSript syntax. The reason is that all of these languages either descends from, or are heavily inspired by, the C programming language. However, if you have no previous experience with these languages, or even programming at all, allow me to give you a quick introduction to the syntax of JavaScript.

Let's start with a very basic rule, which can be confusing if you're completely new to programming:

JavaScript is case-sensitive

This means that a is not the same as A - let me show you an example:

var a = 42;
alert(A);

Here I declare a variable (more on those later) with the name a (lowercase), but in the next line, I try to use it by referring to A (uppercase). This will fail because I don't use the same case.

Statements

A statement is basically a line of code:

alert("Hello, world!");

Notice how I end it with a semicolon - this informs the interpreter that the statement is finished. This also means that while a statement is usually one line of code, it doesn't physically have to be contained on one line. Feel free to use several lines, as long as you end with a semicolon:

var s = "Hello world and welcome to this very long
		piece of text, which uses multiple lines!";

Please notice that while some C-style programming languages are very strict about requiring the ending semicolon, JavaScript is in fact not - it will try to guess if your statement ends when a linebreak is reached, and this will work in many cases. Here's an example:

var s = "Hello, world"
var n = 42

However, sometimes the interpreter won't understand your intentions, if the line of code is more complex, and then you will have to add the semicolon anyway. For this reason, JavaScript code guidelines generally recommends that you always use the ending semicolon - that way you won't forget it when it actually matters. It also allows you to later switch to a more strict programming language without having to learn new habits.

Blocks

When using control structures like IF statements and loops, you need to control which line(s) of code are included. By default, JavaScript assumes that only the next line is part of your control structure. Example:

var b = false;
if(b == true)
	alert("This will not happen...");

alert("This WILL happen!");

If you run it, you will notice that only the second alert() is fired. The reason is that the if() statement will never be true (we made sure of that), so the following line is never hit. However, if you need to contain more than one line of code within the if statement, you will need to create a block. We use curly brackets to encapsulate the lines of code we want to be affected by this particular if statement:

var b = false;
if(b == true)
{
	alert("This will not happen...");
	alert("This won't happen either...");	
}

alert("This WILL happen!");

Notice how in this example, as well as in the above, I indent the next line after the if statement (first example), as well as inside the block (second example). This is not required, but most programmers will do it, because it makes the code more readable. You can indent a line, or even several lines, by using the Tab key on your keyboard. And if you have a block inside a block (and so on), you should indent it appropriately - one indent per block, like this:

let a = 1, b = 2, c = 3;
if(a == 1)
{
	if(b == 2)	
	{
		if(c == 3)	
			document.write("ok!");
	}
}

Blocks are used a lot in JavaScript, e.g. for control structures like in the example above, but also when defining functions. More about that later on.

Comments

By default, everything you write in your JavaScript code, except for whitespace, will be interpreted and therefore has to be valid JavaScript code. However, sometimes you need to leave a comment, either for your self or for your team. Fortunately, JavaScript allows you to do this very easily. If the interpreter meets two forward slashes, the rest of the line is ignored:

// This line is a comment

You can also do this on the same line as a statement, as long as you remember that after the two forward slashes, the rest is ignored by the interpreter:

alert("Hello!"); // The rest of this line is a comment

You can have several lines of comments after eachother:

// This line is a comment
// ...so is this one

But if you need many lines of comments, and you don't want to prefix each one with the two forward slashes, you can use the multiline comment syntax. It starts with a forward slash, immediately followed by an asterisk (*). After that, everything is considered as comments, until you snap out of the comment mode by using the same notation, but in reverse (so asterisk first, then forward slash). Here's an example:

/*
	All of these lines are comments 
	and you can write whatever you want,
	formatted however you want it!
*/

Simply switch between these two types of comments as you like.

Summary

This was a quick introduction to the syntax of JavaScript, which will hopefully aid you in the understanding of the examples of the rest of this tutorial. Of course, there are more syntax to learn, but we will dig into these parts along the way, when we introduce the various aspects of the language.