TOC

The community is working on translating this tutorial into Chinese, but it seems that no one has started the translation process for this article yet. If you can help us, then please click "More info".

The Basics:

Basic JavaScript syntax

如果你以前有过像c++、Java、c#或PHP这样的流行编程语言的经验,你可能会认识javascript的语法。原因在于,所有这些语言要么源自C编程语言,要么深受C编程语言的启发。但是,如果您以前没有这些语言的经验,甚至根本没有编程经验,请允许我向您快速介绍JavaScript的语法。

让我们从一个非常基本的规则开始,如果你对编程完全陌生,这可能会让你感到困惑:

JavaScript编程语言是区分大小写的

这意味着小写字母a 和大写字母A是不同的--让我们看一个例子:

var a = 42;
alert(A);

在这里,我声明了一个变量(稍后将详细介绍),名称为a(小写字母),但在下一行中,我尝试通过引用A(大写字母)来使用它。这将因为我没有使用相同的字母而导致失败。

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.


This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!