Skip to content

Commit

Permalink
fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
iliakan committed Mar 24, 2017
1 parent c9401b3 commit 0fcf9f8
Show file tree
Hide file tree
Showing 58 changed files with 672 additions and 642 deletions.
4 changes: 2 additions & 2 deletions 1-js/01-getting-started/2-code-editors/article.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Code editors

The code editor is the place where a programmer spends most his time.
A code editor is the place where a programmer spends most of his time.

There are two archetypes: IDE and lightweight editors. Many people feel comfortable choosing one tool of each type.

Expand Down Expand Up @@ -32,7 +32,7 @@ They are mainly used to instantly open and edit a file.

The main difference between a "lightweight editor" and an "IDE" is that IDE works on a project-level, so it loads much more data on start, analyzes the project structure if needed and so on. A lightweight editor is much faster if we need only one file.

In practice, lightweight editors may have a lot of plugins including directory-level syntax analyzers and autocompleters, so there's no strict border between a lightweight editor and an IDE.
In practice, lightweight editors may have a lot of plugins including directory-level syntax analyzers and autocompleters, so there's no strict border between a lightweight editor and an IDE.

The following options deserve your attention:

Expand Down
24 changes: 9 additions & 15 deletions 1-js/01-getting-started/3-devtools/article.md
Original file line number Diff line number Diff line change
@@ -1,18 +1,12 @@
# Developer console

And the one more thing before we get down to coding.

A code is error-prone. You are quite likely to have errors... Oh what I'm talking? You are *absolutely* going to make errors, at least if you're a human, not a [robot](https://en.wikipedia.org/wiki/Bender_(Futurama)).

But in the browser, a user doesn't see the errors by default. So, if something goes wrong in the script, we won't see what's broken and can't fix it.

To see errors and get a lot of other useful information about scripts, browsers have embedded "developer tools".

**Most often developers lean towards Chrome or Firefox for the development.**

Other browsers also provide developer tools, but are usually in a "catching-up" position, compared to Chrome/Firefox which are the best.

Sometimes, it may be required to switch to another browser, if a problem is browser-specific, but that's rare.
Most often developers lean towards Chrome or Firefox for the development, because developer tools are best there. Other browsers also provide developer tools, sometimes with special features, but usually are in "catching-up" position. So most people have a "favorite" browser and switch to others if a problem is browser-specific.

Developer tools are really powerful, there are many features. Here, for the start, we'll learn how to open them, look at errors and run JavaScript commands.

Expand All @@ -34,10 +28,10 @@ It looks somewhat like this:

The exact look depends on your Chrome version. It changes from time to time, but should be similar.

- Here we can see the red-colored error message. In this case the script contains a "lalala" command, which was put there just because it is unknown.
- Here we can see the red-colored error message. In this case the script contains an unknown "lalala" command.
- On the right, there is a clickable link to the source `bug.html:12` with the line number where the error has occured.

Below the error message there is a blue `>` symbol. It marks a "command line" where we can type JavaScript commands and press enter to run them (`key:Shift+Enter` to input multiline commands).
Below the error message there is a blue `>` symbol. It marks a "command line" where we can type JavaScript commands and press `key:Enter` to run them (`key:Shift+Enter` to input multiline commands).

Now we can see errors and that's enough for the start. We'll be back to developer tools later and cover debugging more in-depth in the chapter <info:debugging-chrome>.

Expand All @@ -46,21 +40,21 @@ Now we can see errors and that's enough for the start. We'll be back to develope

Most other browsers use `key:F12` to open developer tools.

The look & feel of them is quite similar, once we know how to use one of them (can start with Chrome), can easily switch to another.
The look & feel of them is quite similar. Once you know how to use one of them (can start with Chrome), you can easily switch to another.

## Safari

Safari (if you use Mac, not Windows/Linux) is a little bit special here. We need to enable the "Develop menu" first.
Safari (Mac browser, not supported for Windows/Linux) is a little bit special here. We need to enable the "Develop menu" first.

There's a checkbox for that at the bottom of the "Advanced" pane of the preferences:
Open Preferences and go to "Advanced" pane. There's a checkbox at the bottom of it:

![safari](safari.png)

Now `key:Cmd+Opt+C` can toggle the console. Also note that the new top menu item has appeared with many useful options.
Now `key:Cmd+Opt+C` can toggle the console. Also note that the new top menu item named "Develop" has appeared. It has many commands and options.

## Summary

- Developer tools allow us to see errors, run commands, examine variables and much more.
- Developer tools allow us to see errors, run commands, examine variables and much more.
- They can be opened with `key:F12` for most browsers under Windows. Chrome for Mac needs `key:Cmd+Opt+J`, Safari: `key:Cmd+Opt+C` (need to enable first).

Now we have the environment ready. In the next section we get down to JavaScript.
Now we have the environment ready. In the next section we get down to JavaScript.
40 changes: 19 additions & 21 deletions 1-js/02-first-steps/02-structure/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,14 @@ We can have as many statements in the code as we want. Another statement can be
For example, here we split the message into two:

```js run no-beautify
alert( 'Hello' ); alert( 'World' );
alert('Hello'); alert('World');
```

Usually each statement is written on a separate line -- thus the code becomes more readable:

```js run no-beautify
alert( 'Hello' );
alert( 'World' );
alert('Hello');
alert('World');
```

## Semicolons [#semicolon]
Expand All @@ -32,8 +32,8 @@ A semicolon may be omitted in most cases when a line break exists.
This would also work:

```js run no-beautify
alert( 'Hello' )
alert( 'World' )
alert('Hello')
alert('World')
```

Here JavaScript interprets the line break as an "implicit" semicolon. That's also called an [automatic semicolon insertion](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion).
Expand Down Expand Up @@ -61,36 +61,34 @@ If you're curious to see a concrete example of such an error, check this code ou
[1, 2].forEach(alert)
```
It shows `1` then `2`.
No need to think about the meaning of the brackets `[]` and `forEach` yet. We'll study them, for now -- it does not matter. Let's just remember the result.
No need to think about the meaning of the brackets `[]` and `forEach` yet. We'll study them later, for now -- it does not matter. Let's just remember the result: it shows `1`, then `2`.
Now let's add an `alert` before the code. And *not* finish it with a semicolon:
```js run no-beautify
alert( "There will be an error" )
alert("There will be an error")
[1, 2].forEach(alert)
[1, 2].forEach(alert)
```
Now if we run it, only the first `alert` is shown, and then an error.
Now if we run it, only the first `alert` is shown, and then we have an error!
But everything is fine again if we add a semicolon after `alert`:
```js run
alert( "All fine now" );
alert("All fine now");
[1, 2].forEach(alert)
```
Now we have the "All fine now" message and then `1` and `2`.
The error in the no-semicolon variant occurs because automatic semicolon insertion rules are complex, and in particular, JavaScript does not imply a semicolon before square brackets `[...]`.
The error in the no-semicolon variant occurs because JavaScript does not imply a semicolon before square brackets `[...]`.
And, because the semicolon is not auto-inserted, the code in the first example is treated as a single statement, like this:
So, because the semicolon is not auto-inserted, the code in the first example is treated as a single statement, that's how the engine sees it:
```js run no-beautify
alert( "There will be an error" )[1, 2].forEach(alert)
alert("There will be an error")[1, 2].forEach(alert)
```
But it should be two separate statements, not a single one. Such a merging in this case is just wrong, hence the error. There are other situations when such thing happens.
Expand All @@ -111,9 +109,9 @@ The rest of the line is a comment. It may occupy a full line of its own or follo
Like here:
```js run
// This comment occupies a line of its own
alert( 'Hello' );
alert('Hello');

alert( 'World' ); // This comment follows the statement
alert('World'); // This comment follows the statement
```

**Multiline comments start with a slash and a star <code>"/&#42;"</code> and end with a star and a slash <code>"&#42;/"</code>.**
Expand All @@ -124,8 +122,8 @@ Like this:
/* An example with two messages.
This is a multiline comment.
*/
alert( 'Hello' );
alert( 'World' );
alert('Hello');
alert('World');
```

The content of comments is ignored, so if we put a code inside <code>/&#42; ... &#42;/</code> it won't execute.
Expand All @@ -134,9 +132,9 @@ Sometimes it comes handy to temporarily disable a part of the code:

```js run
/* Commenting out the code
alert( 'Hello' );
alert('Hello');
*/
alert( 'World' );
alert('World');
```

```smart header="Use hotkeys!"
Expand Down
5 changes: 2 additions & 3 deletions 1-js/02-first-steps/03-strict-mode/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,8 @@ For a long time JavaScript was evolving without compatibility issues. New featur

That had the benefit of never breaking the existing code. But the back side is that any mistake or an imprefect decision made by JavaScript creators got stuck in the language forever.

It had been so before ECMAScript 5 (ES5) appeared which added new features to the language and modified some of the existing ones.
It had been so before 2009 when ECMAScript 5 (ES5) appeared. It added new features to the language and modified some of the existing ones. To keep the old code working, most modifications are off by default. One needs to enable them explicitly with a special directive `"use strict"`.

To keep the old code working, most modifications are off by default. One needs to enable them explicitly with a special directive `"use strict"`.

[cut]

Expand Down Expand Up @@ -61,7 +60,7 @@ It is recommended to always start a script with `"use strict"`, for the followin
1. First, all modern browsers support it. Only outdated ones like Internet Explorer 9 and below do not.
2. Second, the modern JavaScript actually forces us into the strict mode. There are several modern language features like "classes" and "modules" that enable strict mode automatically. So, it's hard to evade it.
Here in the tutorial all code (except where said otherwise) works in `"use strict"`. but we'll still note the subtle differences of what happens if you forget it or if the visitor has an outdated browser. So you will also be able to write a code that also works for old IE if you'd like that.
Here in the tutorial all code (where not explicitly noted otherwise) works in `"use strict"`. We concentrate on modern JavaScript. But there will be notes about what happens without `"use strict"`, so that you can understand what's going on if you forget it or if you're working with an outdated script that doesn't have it.
## Summary
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ Second, the name of the current visitor:
let currentUserName = "John";
```

Again, we could shorten that to `userName` if we know beyound the reasonable doubt that the user is current.
Again, we could shorten that to `userName` if we know for sure that the user is current.

Modern editors and autocomplete make long variable names easy to write. Don't save on them. Say, a name with 3 words in it is fine.
Modern editors and autocomplete make long variable names easy to write. Don't save on them. A name with 3 words in it is fine.

And if your editor does not have proper autocompletion, get [a new one](/editor).
And if your editor does not have proper autocompletion, get [a new one](/editors).
4 changes: 2 additions & 2 deletions 1-js/02-first-steps/04-variables/2-declare-variables/task.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,5 @@ importance: 3

# Giving the right name

1. Create the variable to store the name of our planet. Assign the value `"Earth"` to it. What should be its name?
2. Create the variable to store the name of the current visitor. What about its name?
1. Create the variable with the name of our planet. How would you name such a variable?
2. Create the variable to store the name of the current visitor. How would you name that variable?
Loading

0 comments on commit 0fcf9f8

Please sign in to comment.