Basic JavaScript syntax

Если у вас уже был опыт по программированию на популярном языке вроде C++, Java, C# или PHP, то синтаксис JavaScript покажется вам знакомым. Причина в том, что все эти языки были вдохновлены или являются наследниками языка C. Впрочем, если у вас не было опыта работы с этими языками, или в программировании вообще, то давайте проведём краткий обзор синтаксиса JavaScript.

Начнём с самых базовых правил, которые могут сбивать с толку, если вы совсем новенький в программировании:

JavaScript чувствителен к регистру

Это означает, что a не то же самое, что A - посмотрим на примере:

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.