jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

minor fixes

Browse source
This commit is contained in:
Ilya Kantor 2021-01-19 14:09:58 +03:00
parent 06cdd5b84a
commit 51edbb1236
3 changed files with 73 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

38
1-js/01-getting-started/01-hello-javascript/article.md
View file

@ -1,33 +1,43 @@
# Hello, JavaScript! # Hello, JavaScript!
The programs in JavaScript are called *scripts*. They can be embedded right into HTML using `<script>` tag and run automatically as the page loads. JavaScript has a rich history.
For example, this HTML-page shows the "Hello" message: It was created in 1995 as a simple language exclusively for web browsers, to “make web pages alive”. Since then it has greatly evolved.
```html run Today we can use JavaScript on many platforms:
- In a web-browser, by embedding it into a web page.
- On a general purpose computer or a server, using [Node.js](https://nodejs.org) and other means.
- ...Or actually on any device that has a special piece of software, called "JavaScript engine".
Technically, even a coffee machine can include its own JavaScript engine to allow programming of coffee recipes.
![](javascript-engine.svg)
There's a formal language description called [ECMAScript Language Specification](https://tc39.es/ecma262/), it describes how a JavaScript engine works. Sometimes we'll give references to it, but, though technically strict, it's hard to read for humans. At least at first.
Programs in JavaScript are called *scripts*.
Browsers have built-in JavaScript engines, so they can run scripts. They can be embedded right into HTML using the `<script>` tag and run automatically as the page loads.
For example, this HTML-page shows the "Hello, world!" message:
```html run height=0
<!doctype html> <!doctype html>
<script> <script>
alert("Hello, world!"); alert("Hello, world!");
</script> </script>
``` ```
JavaScript can execute not only in a browser, but also on a server, or actually on any device that has a special program called [the JavaScript engine](https://en.wikipedia.org/wiki/JavaScript_engine). To see it in action, you can click the "run" button in the upper-right corner. Also you can create a new file, e.g. `my.html` with this text and open it locally in a browser.
Browsers have built-in JavaScript engines, so they can run scripts.
We can also run scripts using [Node.js](https://nodejs.org), it's commonly used to build server-side applications.
Depending on the environment, JavaScript may provide platform-specific functionality. Depending on the environment, JavaScript may provide platform-specific functionality.
- In a web browser, JavaScript can manipulate the web-page, send network requests, show messages and so on. - In a browser, JavaScript can manipulate the web-page, send network requests, show messages and so on.
- In node.js we can use JavaScript to run a web-server, read and write arbitrary files. - In node.js we can use JavaScript to run a web-server, read and write arbitrary files.
- ...And so on. - ...And so on.
Technically, even a coffee machine can include its own JavaScript engine, to allow programming of coffee recipes. **In this course we concentrate on the core JavaScript, that's the same everywhere.**
![](javascript-engine.svg)
**In this tutorial we concentrate on the "core JavaScript", that's the same everywhere.**
We'll try to keep browser-specific notes at minimum. After you learn the core, you can go in any direction: browsers, frameworks, servers and so on. We'll try to keep browser-specific notes at minimum. After you learn the core, you can go in any direction: browsers, frameworks, servers and so on.

56
1-js/01-getting-started/02-basics/article.md
View file

@ -3,7 +3,9 @@
## Statements ## Statements
Statements are syntax constructs and commands that perform actions, make JavaScript "do" something. Just like a human speech consists of sentences, JavaScript code consists of *statements*.
Statements are commands and syntax constructs that perform actions, "do" something.
Here's an example of a statement: Here's an example of a statement:
@ -17,7 +19,7 @@ We can have as many statements in our code as we want.
Statements can be separated with a semicolon. Statements can be separated with a semicolon.
For example, here we split "Hello World" into two alerts: For example, we can split "Hello World" into two messages, one after the other:
```js run no-beautify ```js run no-beautify
alert("Hello"); alert("World"); alert("Hello"); alert("World");
@ -30,33 +32,35 @@ alert("Hello");
alert("World"); alert("World");
``` ```
## Semicolons..or not? ### Semicolons..or not?
A semicolon may be omitted in most cases when a line break exists. A semicolon may be omitted in most cases when a line break exists beween statements.
This would also work: This code is the same as above, just without semicolons:
```js run no-beautify ```js run no-beautify
alert("Hello") alert("Hello")
alert("World") alert("World")
``` ```
Usually, JavaScript interprets the line break as an "implicit" semicolon. This is called an [automatic semicolon insertion](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion). It also works, because usually JavaScript interprets a line break as an "implicit" semicolon. This is called an "automatic semicolon insertion".
But there are exceptions, like this: There are exceptions for that rule, for example:
```js run no-beautify ```js run no-beautify
alert(1 + alert(1 +
2); 2);
``` ```
The code outputs `3` because JavaScript does not insert semicolons after the plus `+`. It is intuitively obvious that if the line ends with a plus `"+"`, then it is an incomplete expression, that's continued on the next line. And in this case that works as intended. This code outputs `3`, same as a single-line `alert(1 + 2)`. Here JavaScript does not treat the line-break after `+` as the end of the statement.
Why so? It's intuitively obvious that if the line ends with a plus `+`, then the expression is incomplete and will be continued on the next line. JavaScript "understands" that too. And in this case that works as intended.
**But there are situations where our intuition differs from JavaScript auto-insertion rules.** **But there are situations where our intuition differs from JavaScript auto-insertion rules.**
That may lead to subtle errors. That may lead to subtle errors.
````spoiler header="Read more about it" ````spoiler header="See an example of such error"
If you're curious to see a concrete example of such an error, check this code out: If you're curious to see a concrete example of such an error, check this code out:
@ -96,9 +100,9 @@ alert("There will be an error")[1, 2].forEach(alert)
But such a merge in this case is just wrong, hence the error. This can happen in other situations as well. But such a merge in this case is just wrong, hence the error. This can happen in other situations as well.
```` ````
To prevent such errors, we recommend putting semicolons between statements even if they are separated by newlines. This rule is widely adopted by the community. To prevent such errors, we recommend putting semicolons between statements, even if they are separated by newlines.
Let's note once again -- *it is possible* to leave out semicolons most of the time. But it's safer -- especially for a beginner -- to use them. Let's note once again -- *it is possible* to leave out semicolons most of the time. But it's safer, especially for a beginner, to use them.
## Comments ## Comments
@ -106,9 +110,9 @@ As time goes on, programs become more and more complex. It becomes necessary to
Comments can be put into any place of a script. They don't affect its execution because the engine simply ignores them. Comments can be put into any place of a script. They don't affect its execution because the engine simply ignores them.
**One-line comments start with two forward slash characters `//`.** **One-line comments start with two forward slash characters `//`. The rest of the line is a comment.**
The rest of the line is a comment. It may occupy a full line of its own or follow a statement. Such comment may occupy a full line of its own or follow a statement.
Like here: Like here:
```js run ```js run
@ -118,6 +122,8 @@ alert("Hello");
alert("World"); // This comment follows the statement alert("World"); // This comment follows the statement
``` ```
For longer, descriptive comments that span multiple lines, we can use the `/* ... */` syntax.
**Multiline comments start with a forward slash and an asterisk <code>/&#42;</code> and end with an asterisk and a forward slash <code>&#42;/</code>.** **Multiline comments start with a forward slash and an asterisk <code>/&#42;</code> and end with an asterisk and a forward slash <code>&#42;/</code>.**
Like this: Like this:
@ -130,9 +136,9 @@ alert("Hello");
alert("World"); alert("World");
``` ```
The content of comments is ignored, so if we put code inside <code>/&#42; ... &#42;/</code>, it won't execute. The content of comments is ignored, so if we wrap a piece of code into `/* ... */`, it won't execute.
Sometimes it can be handy to temporarily disable a part of code: It can be handy to temporarily disable a part of code:
```js run ```js run
/* Commenting out the code /* Commenting out the code
@ -142,7 +148,9 @@ alert("World");
``` ```
```smart header="Use hotkeys!" ```smart header="Use hotkeys!"
In most editors, a line of code can be commented out by pressing the `key:Ctrl+/` hotkey for a single-line comment and something like `key:Ctrl+Shift+/` -- for multiline comments (select a piece of code and press the hotkey). For Mac, try `key:Cmd` instead of `key:Ctrl` and `key:Option` instead of `key:Shift`. In most editors, a line of code can be commented out by pressing the `key:Ctrl+/` hotkey for a single-line comment and something like `key:Ctrl+Shift+/` -- for multiline comments (select a piece of code and press the hotkey).
For Mac, try `key:Cmd` instead of `key:Ctrl` and `key:Option` instead of `key:Shift`.
``` ```
````warn header="Nested comments are not supported!" ````warn header="Nested comments are not supported!"
@ -152,7 +160,7 @@ Such code will die with an error:
```js run no-beautify ```js run no-beautify
/* /*
/* nested comment ?!? */ /* nested comment leads to an error! */
*/ */
alert( "World" ); alert( "World" );
``` ```
@ -164,19 +172,21 @@ Comments increase the overall code footprint, but that's not a problem at all. T
## Strict mode ## Strict mode
JavaScript appeared many years ago, in 1995. Then ,for a long time, it evolved without compatibility issues. New features were added to the language while old functionality didn't change. JavaScript appeared in 1995 as a simple, browser-only language. Then, for a long time, it evolved without compatibility issues. New features were added to the language while old functionality didn't change.
That had the benefit of never breaking existing code. But the downside was that any mistake or an imperfect decision made by JavaScript's creators got stuck in the language forever. That had the benefit of never breaking existing code. But the downside was that any mistake or an imperfect decision made by JavaScript creators got stuck in the language forever.
This was the case until 2009, when the 5th version of the standard appeared. It added new features to the language and modified some of the existing ones. This was the case until 2009, when the 5th version of the standard appeared. It added new features to the language and modified some of the existing ones.
Now the important part. Now the important part about it.
**To keep the old code working, these newer modifications are off by default.** **To keep the old code working, the newer 2009+ modifications are off by default.**
Yes, a lot of time has passed, but still it's so.
We need to explicitly enable them with a special directive: `"use strict"` We need to explicitly enable them with a special directive: `"use strict"`
With that directive on top the script runs in so-called "strict mode". Or, we'd better say "modern mode", because that's what it essentially is. A script with the `"use strict"` directive on top runs in so-called "strict mode". Or we'd better say "modern mode", because that's what it essentially is.
![](use-strict.svg) ![](use-strict.svg)
@ -184,4 +194,4 @@ Some JavaScript features enable strict mode automatically, e.g. classes and modu
**Here, in the tutorial, we'll always use strict mode, unless explicitly stated otherwise.** **Here, in the tutorial, we'll always use strict mode, unless explicitly stated otherwise.**
We're studying modern JavaScript after all. But you'll also see notes about how things work without `use strict`, just in case you come across an old script. We're studying modern JavaScript after all. But you'll also see notes about how things work without `use strict`, just in case you forget to put that directive or meet a script without it.

26
1-js/01-getting-started/03-variables/article.md
View file

@ -1,30 +1,35 @@
# Variables # Variables
Most of the time, a JavaScript application needs to work with information. Here are two examples: To do its job, our code needs needs to store and process information.
1. An online shop -- the information might include goods being sold and a shopping cart.
2. A chat application -- the information might include users, messages, and much more. The exact kind of information depends on the application.
For example:
- An online shop -- the information includes goods being sold and a shopping cart.
- A chat application -- the information includes users, messages, etc.
Variables are used to store this information. Variables are used to store this information.
## A variable ## A variable
A [variable](https://en.wikipedia.org/wiki/Variable_(computer_science)) is a "named storage" for data. We can use variables to store goodies, visitors, and other data. A [variable](https://en.wikipedia.org/wiki/Variable_(computer_science)) is a "named storage" for data. We can use variables to store goods, visitors and so on.
To create a variable in JavaScript, use the `let` keyword. To create a variable in JavaScript, use the `let` keyword.
The statement below creates (in other words: *declares*) a variable with the name "message": The statement below creates (in formal terms: *declares*) a variable with the name "message":
```js ```js
let message; let message;
``` ```
Now, we can put some data into it by using the assignment `=`: Now we can put some data into it by using the assignment `=`:
```js ```js
let message; let message;
*!* *!*
message = "Hello"; // store the string message = "Hello"; // store the string "Hello"
*/!* */!*
``` ```
@ -42,7 +47,7 @@ alert(message); // shows the variable content
To be concise, we can combine the variable declaration and assignment into a single line: To be concise, we can combine the variable declaration and assignment into a single line:
```js run ```js run
let message = "Hello!"; // define the variable and assign the value let message = "Hello!"; // define the variable and assign the value to it
alert(message); // Hello! alert(message); // Hello!
``` ```
@ -153,7 +158,7 @@ let message = "Two"; // SyntaxError: 'message' has already been declared
So, we should declare a variable once and then refer to it without `let`. So, we should declare a variable once and then refer to it without `let`.
```` ````
````warn header="Without `use strict` it's possible to assign to an undeclared variable" ````warn header="Without `use strict`: it's possible to assign to an undeclared variable"
Normally, we need to define a variable before using it. But in the old times, it was technically possible to create a variable by a mere assignment of the value without using `let`. Normally, we need to define a variable before using it. But in the old times, it was technically possible to create a variable by a mere assignment of the value without using `let`.
This still works now, without strict mode: This still works now, without strict mode:
@ -175,8 +180,9 @@ This is a bad practice and would cause an error in strict mode:
num = 5; // error: num is not defined num = 5; // error: num is not defined
*/!* */!*
``` ```
````
We provide details about how things work without `use strict` just to make sure you won't be surprised by such scripts. Luckily, there aren't many differences. As said before, we should always be in the strict mode.
````
### Variable naming ### Variable naming