diff --git a/1-js/1-getting-started/4-devtools/article.md b/1-js/1-getting-started/4-devtools/article.md index bde3ff8e..24d27625 100644 --- a/1-js/1-getting-started/4-devtools/article.md +++ b/1-js/1-getting-started/4-devtools/article.md @@ -24,7 +24,7 @@ Open the page [bug.html](bug.html). There's an error in the JavaScript code on it. An ordinary visitor won't see it, we need t open developer tools for that. -Press the keys [key Ctrl+Shift+J] or, if you're on Mac, then [key Cmd+Shift+J]. +Press the key [key F12] or, if you're on Mac, then [key Cmd+Opt+J]. The developer tools will open on the Console tab by default. @@ -51,7 +51,7 @@ It is done on the "Advanced" pane of the preferences: -Now [key Cmd+Alt+C] can toggle on the console. Also the new top menu item has appeared with many useful options. +Now [key Cmd+Opt+C] can toggle the console. Also the new top menu item has appeared with many useful options. ## Other browsers @@ -62,10 +62,8 @@ The look & feel of them is quite similar, once we know how to use one of them (c ## Summary diff --git a/1-js/2-first-steps/1-hello-world/1-hello-alert/solution.md b/1-js/2-first-steps/1-hello-world/1-hello-alert/solution.md index b27e40d9..e69de29b 100644 --- a/1-js/2-first-steps/1-hello-world/1-hello-alert/solution.md +++ b/1-js/2-first-steps/1-hello-world/1-hello-alert/solution.md @@ -1,22 +0,0 @@ -Код страницы: - -```html - - - - - - - - - - - - - - - -``` - diff --git a/1-js/2-first-steps/1-hello-world/1-hello-alert/solution.view/index.html b/1-js/2-first-steps/1-hello-world/1-hello-alert/solution.view/index.html index 47bb9ca9..45e6744b 100644 --- a/1-js/2-first-steps/1-hello-world/1-hello-alert/solution.view/index.html +++ b/1-js/2-first-steps/1-hello-world/1-hello-alert/solution.view/index.html @@ -1,14 +1,10 @@ - - - - diff --git a/1-js/2-first-steps/1-hello-world/1-hello-alert/task.md b/1-js/2-first-steps/1-hello-world/1-hello-alert/task.md index 0f7f9375..44c8133e 100644 --- a/1-js/2-first-steps/1-hello-world/1-hello-alert/task.md +++ b/1-js/2-first-steps/1-hello-world/1-hello-alert/task.md @@ -1,9 +1,9 @@ -# Выведите alert +# Show an alert [importance 5] -Сделайте страницу, которая выводит "Я - JavaScript!". +Create a page that shows a message "I'm JavaScript!". -Создайте её на диске, откройте в браузере, убедитесь, что всё работает. +Do it in a sandbox, or on your hard drive, doesn't matter, just ensure that it works. [demo src="solution"] diff --git a/1-js/2-first-steps/1-hello-world/article.md b/1-js/2-first-steps/1-hello-world/article.md index 6bb73d6f..ef6554c9 100644 --- a/1-js/2-first-steps/1-hello-world/article.md +++ b/1-js/2-first-steps/1-hello-world/article.md @@ -6,89 +6,72 @@ In this chapter we'll create a simple script and see it working. ## The "script" tag [smart header="What if I want to move faster?"] -In the case if the impatient reader developed with JavaScript already or has a lot of experience in another language, he can skip detailed explanatins and jump to [](/javascript-specials). There he can find a condensed essense of important features. +In the case if an impatient reader has developed with JavaScript already or has a lot of experience in another language, he can skip detailed explanatins and jump to [](/javascript-specials). There he can find an essense of important features. If you have enough time and want to learn things in details then read on :) [/smart] -Программы на языке JavaScript можно вставить в любое место HTML при помощи тега `SCRIPT`. Например: +JavaScript programs can be inserted in any place of HTML with the help of the ` */!* -

...Конец документа

+

...Document end.

``` -Этот пример использует следующие элементы: - -
-
<script> ... </script>
-
Тег `script` содержит исполняемый код. Предыдущие стандарты HTML требовали обязательного указания атрибута `type`, но сейчас он уже не нужен. Достаточно просто ` ``` -Браузер, для которого предназначались такие трюки, очень старый Netscape, давно умер. Поэтому в этих комментариях нет нужды. +These comments were supposed to hide the code from an old browser that did't understand a ` diff --git a/1-js/2-first-steps/2-external-script/1-hello-alert-ext/solution.md b/1-js/2-first-steps/2-external-script/1-hello-alert-ext/solution.md index bef2fc5b..5faf2640 100644 --- a/1-js/2-first-steps/2-external-script/1-hello-alert-ext/solution.md +++ b/1-js/2-first-steps/2-external-script/1-hello-alert-ext/solution.md @@ -1,10 +1,10 @@ -Код для HTML-файла: +The HTML code: ```html ``` -Для файла `alert.js` из той же директории: +For the file `alert.js` in the same folder: ```js //+ src="alert.js" diff --git a/1-js/2-first-steps/2-external-script/1-hello-alert-ext/task.md b/1-js/2-first-steps/2-external-script/1-hello-alert-ext/task.md index 93cf1b4e..959da2fb 100644 --- a/1-js/2-first-steps/2-external-script/1-hello-alert-ext/task.md +++ b/1-js/2-first-steps/2-external-script/1-hello-alert-ext/task.md @@ -1,7 +1,7 @@ -# Вывести alert внешним скриптом +# Show an alert with an external script [importance 5] -Возьмите решение предыдущей задачи [](/task/hello-alert) и вынесите скрипт во внешний файл `alert.js`, который расположите в той же директории. +Take the solution of the previous task [](/task/hello-alert). Modify it by extracting the script content into an external file `alert.js`, residing in the same folder. -Откройте страницу и проверьте, что вывод сообщения всё ещё работает. \ No newline at end of file +Open the page, ensures that the alert works. diff --git a/1-js/2-first-steps/2-external-script/2-async-defer-first/solution.md b/1-js/2-first-steps/2-external-script/2-async-defer-first/solution.md index 089a87e0..bbb86b0b 100644 --- a/1-js/2-first-steps/2-external-script/2-async-defer-first/solution.md +++ b/1-js/2-first-steps/2-external-script/2-async-defer-first/solution.md @@ -1,6 +1,6 @@ -Ответы: +Answers:
    -
  1. Первым выполнится `big.js`, это нормальная последовательность выполнения подряд идущих скриптов.
    2. -
  2. Первым выполнится `small.js`, так как скрипты из-за `async` ведут себя совершенно независимо друг от друга, страница тоже от них не зависит.
    3. -
  3. Первым выполнится `big.js`, так как скрипты, подключённые через `defer`, сохраняют порядок выполнения относительно друг друга.
    4. +
  4. The first is `big.js`, that's a normal sequence for external ` ``` -А вот так? +What if we add `async`? ```html ``` -А так? +What if we switch to `defer`? ```html diff --git a/1-js/2-first-steps/2-external-script/article.md b/1-js/2-first-steps/2-external-script/article.md index 41a9a3b7..f08ba5e2 100644 --- a/1-js/2-first-steps/2-external-script/article.md +++ b/1-js/2-first-steps/2-external-script/article.md @@ -1,104 +1,98 @@ -# Внешние скрипты, порядок исполнения +# External scripts -Если JavaScript-кода много -- его выносят в отдельный файл, который подключается в HTML: +If we have a lot of JavaScript code, it can be put into a separate file. + +The script file is attached to HTML like this: ```html ``` -Здесь `/path/to/script.js` -- это абсолютный путь к файлу, содержащему скрипт (из корня сайта). +Here `/path/to/script.js` is an absolute path to the file with the script (from the site root). -Браузер сам скачает скрипт и выполнит. - -Можно указать и полный URL, например: +We can give a full URL too, for instance: ```html ``` -Вы также можете использовать путь относительно текущей страницы. Например, `src="lodash.js"` обозначает файл из текущей директории. +It is also possible to provide a path relative to the current page. For instance, `src="lodash.js"` means a file from the current folder. -Чтобы подключить несколько скриптов, используйте несколько тегов: +To attach several scripts, use multiple tags: ```html -... +… ``` [smart] -Как правило, в HTML пишут только самые простые скрипты, а сложные выносят в отдельный файл. +As a rule, only simplest scripts are put into HTML. More complex ones reside in separate files. -Браузер скачает его только первый раз и в дальнейшем, при правильной настройке сервера, будет брать из своего [кеша](http://ru.wikipedia.org/wiki/%D0%9A%D1%8D%D1%88). +The benefit is that the browser will download it only once, and then store in its [cache](https://en.wikipedia.org/wiki/Web_cache). -Благодаря этому один и тот же большой скрипт, содержащий, к примеру, библиотеку функций, может использоваться на разных страницах без полной перезагрузки с сервера. +After it, other pages which want the same script will take it from the cache instead of downloading it. So the file is actually downloaded only once. + +That saves traffic and makes the future pages faster. [/smart] -[warn header="Если указан атрибут `src`, то содержимое тега игнорируется."] +[warn header="If `src` is set, the script content is ignored."] +A single ` ``` -Нужно выбрать: либо `SCRIPT` идёт с `src`, либо содержит код. Тег выше следует разбить на два: один -- с `src`, другой -- с кодом, вот так: +One needs to choose: either ` ``` - [/warn] -## Асинхронные скрипты: defer/async +## Asynchronous scripts: defer/async -Браузер загружает и отображает HTML постепенно. Особенно это заметно при медленном интернет-соединении: браузер не ждёт, пока страница загрузится целиком, а показывает ту часть, которую успел загрузить. +Browser loads and shows HTML gradually as it comes. That's clearly noticeable on the slow internet connection. The browser doesn't wait for the page to load fully. It shows the part that has been loaded already, and then adds content to it as it loads. -Если браузер видит тег ` */!* -

    Кролики посчитаны!

    +

    Rabbits counted!

    - ``` -Такое поведение называют "синхронным". Как правило, оно вполне нормально, но есть важное следствие. +The behavior is called "synchronous". Usually it causes no problems, but there's an important consequence. -**Если скрипт -- внешний, то пока браузер не выполнит его, он не покажет часть страницы под ним.** +**If the script is external, then until the browser executes it, it can't show the page below.** -То есть, в таком документе, пока не загрузится и не выполнится `big.js`, содержимое `` будет скрыто: +So, in this document, until `big.js` loads and executes, the `` content is hidden: ```html @@ -108,144 +102,155 @@ */!* - Этот текст не будет показан, пока браузер не выполнит big.js. + This text is not shown until the browser executes big.js. ``` -И здесь вопрос -- действительно ли мы этого хотим? То есть, действительно ли оставшуюся часть страницы нельзя показывать до загрузки скрипта? +The question is -- do we really want that? -Есть ситуации, когда мы не только НЕ хотим такой задержки, но она даже опасна. +Most of time, we don't. -Например, если мы подключаем внешний скрипт, который показывает рекламу или вставляет счётчик посещений, а затем идёт наша страница. Конечно, неправильно, что пока счётчик или реклама не подгрузятся -- оставшаяся часть страницы не показывается. Счётчик посещений не должен никак задерживать отображение страницы сайта. Реклама тоже не должна тормозить сайт и нарушать его функционал. +Sometimes, the script contains a very important code that really must be loaded before the rest of the page is parsed (and the scripts below executed). But most of time we'd like to let the visitor see the content while the script is loading. -А что, если сервер, с которого загружается внешний скрипт, перегружен? Посетитель в этом случае может ждать очень долго! +[warn header="Blocking is dangerous"] +There are situations when such blocking is even dangerous. -Вот пример, с подобным скриптом (стоит искусственная задержка загрузки): +Let's say we attach a script from the banner system, or a 3rd-party integration code. + +It's just wrong that the rest of the page is not shown until the banner system initialized. The banner is not that important. + +And what if their server is overloaded and responds slowly? Our visitors will wait even more. + +Here's an example of such "slow" script (the delay is artificial here): ```html -

    Важная информация не покажется, пока не загрузится скрипт.

    +

    Important information below is not shown until the script loads and executes.

    - + -

    ...Важная информация!

    +

    …Important information!

    ``` +[/warn] -Что делать? +So, how to "fix" the blocking behavior? -Можно поставить все подобные скрипты в конец страницы -- это уменьшит проблему, но не избавит от неё полностью, если скриптов несколько. Допустим, в конце страницы 3 скрипта, и первый из них тормозит -- получается, другие два его будут ждать -- тоже нехорошо. +Our first attempt could be to put all such scripts to the bottom of the ``, after all content. Then the browser will show the content first and then load the script. Problem gone. -Кроме того, браузер дойдёт до скриптов, расположенных в конце страницы, они начнут грузиться только тогда, когда вся страница загрузится. А это не всегда правильно. Например, счётчик посещений наиболее точно сработает, если загрузить его пораньше. +But the solution is not perfect: -Поэтому "расположить скрипты внизу" -- не лучший выход. +
      +
    1. The script won't start loading until the whole page loads. If the page is large, then the delay may be significant. We'd like the browser to start loading a script early.
      2. +
    2. If there is more than one scripts at the bottom of the page, and the first script is slow, then the second one will still has wait for it. Scripts still depend one on another, that's not always welcome. Ads and counter can run independently.
      3. +
    + +And here come the attributes `async` and `defer`. -Кардинально решить эту проблему помогут атрибуты `async` или `defer`:
    -
    Атрибут `async`
    -
    Поддерживается всеми браузерами, кроме IE9-. Скрипт выполняется полностью асинхронно. То есть, при обнаружении ` ``` -А в таком коде (с `defer`) первым сработает всегда `1.js`, а скрипт `2.js`, даже если загрузился раньше, будет его ждать. +With `async` it may happen that `2.js` will run before `1.js`. Scripts are totally independent. + +And in the other code `defer` is used, which forces browser to keeps execution order. Even if `2.js` loads first, it will execute after `1.js`: ```html ``` -Поэтому атрибут `defer` используют в тех случаях, когда второй скрипт `2.js` зависит от первого `1.js`, к примеру -- использует что-то, описанное первым скриптом. +So `defer` is used when the second script `2.js` depends on the first one `1.js`, say uses something described in the first script. -Второе отличие -- скрипт с `defer` сработает, когда весь HTML-документ будет обработан браузером. +The second difference -- script with `defer` always works when the HTML-document is fully processed by the browser. + +For example, when the document is large... -Например, если документ достаточно большой... ```html -Много много много букв +Too long text. Didn't read. Many words. ``` -...То скрипт `async.js` выполнится, как только загрузится -- возможно, до того, как весь документ готов. А `defer.js` подождёт готовности всего документа. +...Then `async.js` executes when it runs -- possibly, before the text is fully loaded. In contrast, `defer.js` always waits for the full document to be ready. -Это бывает удобно, когда мы в скрипте хотим работать с документом, и должны быть уверены, что он полностью получен. +It's great to have the choice here. Sometimes a script doesn't need the document at all (like a counter), then `async` is superb. And if we need the whole document to process it, then `defer` will work nice.
    -[smart header="`async` вместе с `defer`"] -При одновременном указании `async` и `defer` в современных браузерах будет использован только `async`, в IE9- -- только `defer` (не понимает `async`). +[smart header="`async` together with `defer`"] +We can't use both `defer` and `async` on a single script. If we do that, `defer` will be ignored. [/smart] -[warn header="Атрибуты `async/defer` -- только для внешних скриптов"] -Атрибуты `async/defer` работают только в том случае, если назначены на внешние скрипты, т.е. имеющие `src`. +[warn header="Attributes `async/defer` -- only for external scripts"] +Attribute `async/defer` work only when set on a script with `src`. -При попытке назначить их на обычные скрипты <script>...</script>, они будут проигнороированы. +On a script without `src` like <script>...</script>, they will be ignored. [/warn] -Тот же пример с `async`: +Let's modify the "blocking script" example that we've seen before, adding `async`: ```html -

    Важная информация теперь не ждёт, пока загрузится скрипт...

    +

    Important information below is not shown until the script loads and executes.

    - + -

    ...Важная информация!

    +

    …Important information!

    ``` -При запуске вы увидите, что вся страница отобразилась тут же, а `alert` из внешнего скрипта появится позже, когда загрузится скрипт. +Now if we run it, we'll see that the whole document is displayed immediately, and the external script runs when it loads. -[smart header="Эти атрибуты давно \"в ходу\""] -Большинство современных систем рекламы и счётчиков знают про эти атрибуты и используют их. +[smart header="Running ahead..."] +For an advanced reader who knows that new tags can be added on page dynamically, we'd like to note that the ``
    5. -
  5. Специальные атрибуты `async` и `defer` используются для того, чтобы пока грузится внешний скрипт -- браузер показал остальную (следующую за ним) часть страницы. Без них этого не происходит.
    6. -
  6. Разница между `async` и `defer`: атрибут `defer` сохраняет относительную последовательность скриптов, а `async` -- нет. Кроме того, `defer` всегда ждёт, пока весь HTML-документ будет готов, а `async` -- нет.
    7. +
  7. Scripts in an external file can be inserted on the page via ``.
    8. +
  8. Normally, the browser doesn't show the document after the script until it executes. Unless the script has `async` or `defer` attributes.
    9. +
  9. Both `async` and `defer` allow the browser to start script loading and then continue to parse/show the page. They both only work on external scripts.
    10. +
  10. The difference is that `defer` keeps the relative script order and always executes after the document is fully loaded. In contrast, `async` script executes when it loads, without any conditions.
    11. -Очень важно не только читать учебник, но делать что-то самостоятельно. +Most modern systems that provide scripts know about these attributes and use them. -Решите задачки, чтобы удостовериться, что вы всё правильно поняли. +Before inserting an external ` -``` - -Это потому, что переменная `test` не объявлена через `var` и совпадает с `id` элемента `
    `. Даже не спрашивайте почему -- это ошибка в браузере IE до версии 9. - -Самое "забавное" то, что такая ошибка присвоения значений будет только в IE8- и только если на странице присутствует элемент с совпадающим с именем `id`. - -Такие ошибки особенно "весело" исправлять и отлаживать. - -Вывод простой -- всегда объявляем переменные через `var`, и сюрпризов не будет. Даже в старых IE. -[/warn] - -## Константы - -*Константа* -- это переменная, которая никогда не меняется. Как правило, их называют большими буквами, через подчёркивание. Например: +To declare a constant variable, one can use `const`: ```js //+ run -var COLOR_RED = "#F00"; -var COLOR_GREEN = "#0F0"; -var COLOR_BLUE = "#00F"; -var COLOR_ORANGE = "#FF7F00"; +'use strict'; + +const myBirthday = '18.04.1982'; + +color = '01.01.2001'; // error! +``` + +The code below can now calculate other values based on the constant, like the age or the sign of the zodiac. It can be sure that the calculations are always valid, because `myBirthday` never changes. + +Please note that `const` variables actually *can be assigned*, but only once. + +This is not an error: + +```js +//+ run +'use strict'; + +const myBirthday; + +myBirthday = '18.04.1982'; // the first assignment +``` + + +[smart header="CONSTANT_NAMING"] +There is a widespread practice to use constants as aliases for difficult-to-remember values. Such constants are named using capitals and underscores. + +Like this: + +```js +//+ run +const COLOR_RED = "#F00"; +const COLOR_GREEN = "#0F0"; +const COLOR_BLUE = "#00F"; +const COLOR_ORANGE = "#FF7F00"; + +const a; +a = 5; var color = COLOR_ORANGE; alert( color ); // #FF7F00 ``` -Технически, константа является обычной переменной, то есть её *можно* изменить. Но мы *договариваемся* этого не делать. +`COLOR_ORANGE` is easy to understand and remember. It is much easier to grasp what `color = COLOR_ORANGE` means than `color = "#FF7F00"`. -Зачем нужны константы? Почему бы просто не писать `var color = "#FF7F00"`? +Besides, it is much easier to make a typo in `"#FF7F00"` than in `COLOR_ORANGE`. -
      -
    1. Во-первых, константа `COLOR_ORANGE` -- это понятное имя. По присвоению `var color="#FF7F00"` непонятно, что цвет -- оранжевый. Иными словами, константа `COLOR_ORANGE` является "понятным псевдонимом" для значения `#FF7F00`.
      2. -
    2. Во-вторых, опечатка в строке, особенно такой сложной как `#FF7F00`, может быть не замечена, а в имени константы её допустить куда сложнее.
      3. -
    +So, sometimes constants are used as aliases to complex values, to evade errors and make the code more readable. +[/smart] -**Константы используют вместо строк и цифр, чтобы сделать программу понятнее и избежать ошибок.** - -## Итого +## Summary
      -
    • В JavaScript можно объявлять переменные для хранения данных. Это делается при помощи `var`.
      • -
    • Технически, можно просто записать значение и без объявления переменной, однако по ряду причин это не рекомендуется.
      • -
    • Вместе с объявлением можно сразу присвоить значение: `var x = 10`.
      • -
    • Переменные, которые названы `БОЛЬШИМИ_БУКВАМИ`, являются константами, то есть никогда не меняются. Как правило, они используются для удобства, чтобы было меньше ошибок.
      • +
    • We must declare variables to store data. That can be done using `var` or `let`. As of now we can think that `let` is a newer alias of `var`, later we'll cover their differences in detail.
      • +
    • We can assign a value when the variable is declared: `var x = 10`.
      • +
    • If a variable is not going to change after assignment, it is called "a constant". We can use `const` keyword instead of `var` to declare constants.
    +And there's one more thing. The most important one. +Please name the variables sensibly. +Variable naming is one of the most important and complex skills in programming. Just looking at variable names can obviously show which code is written by a beginner and which by an experienced guru. + +In the real project, most of time is spent not on writing of the completely new code, but rather on modifying and improving the existing one. + +It might be not so obvious to the one who didn't write big things. Or to a freelances who writes a "read-only code" (write 5 lines, give to the customer, forget). But for the serious and especially team projects, that's always true. + +It is much easier to find the information if it's well-labelled. Or, in other words, when the variables is named right. + +Please spend some time thinking about the right name for a variable before declaring it. That will repay you a lot. + +[warn header="The name must always correspond to the data"] +There exist lazy programmers who instead of declaring a new variable, tend to reuse the existing one, write other data into it. + +As the result, the variable is like a box where people throw different things without changing the sticker. What is inside it now? Who knows... We need to come closer and check. + +Such a programmer saves a little bit on variable declaration, but looses ten times more on debugging the code. + +An extra variable is good, not evil. +[/warn] diff --git a/1-js/2-first-steps/6-variable-names/1-declare-variables/solution.md b/1-js/2-first-steps/6-variable-names/1-declare-variables/solution.md deleted file mode 100644 index 692a5bc7..00000000 --- a/1-js/2-first-steps/6-variable-names/1-declare-variables/solution.md +++ /dev/null @@ -1,13 +0,0 @@ -Каждая строчка решения соответствует одному шагу задачи: - -```js -//+ run -var ourPlanetName = "Земля"; // буквально "название нашей планеты" - -var userName = "Петя"; // "имя посетителя" -``` - -Названия переменных можно бы сократить, например, до `planet` и `name`, но тогда станет менее понятно, о чем речь. - -Насколько допустимы такие сокращения -- зависит от скрипта, его размера и сложности, от того, есть ли другие планеты и пользователи. В общем, лучше не жалеть букв и называть переменные так, чтобы по имени можно было легко понять, что в ней находится, и нельзя было перепутать переменные. - \ No newline at end of file diff --git a/1-js/2-first-steps/6-variable-names/1-declare-variables/task.md b/1-js/2-first-steps/6-variable-names/1-declare-variables/task.md deleted file mode 100644 index 1f0ef92f..00000000 --- a/1-js/2-first-steps/6-variable-names/1-declare-variables/task.md +++ /dev/null @@ -1,8 +0,0 @@ -# Объявление переменных - -[importance 3] - -
      -
    1. Создайте переменную для названия нашей планеты и присвойте ей значение `"Земля"`. *Правильное* имя выберите сами.
      2. -
    2. Создайте переменную для имени посетителя со значением `"Петя"`. Имя также на ваш вкус.
      3. -
    \ No newline at end of file diff --git a/1-js/2-first-steps/6-variable-names/article.md b/1-js/2-first-steps/6-variable-names/article.md deleted file mode 100644 index 202a4f03..00000000 --- a/1-js/2-first-steps/6-variable-names/article.md +++ /dev/null @@ -1,120 +0,0 @@ -# Правильный выбор имени переменной - -Правильный выбор имени переменной -- одна из самых важных и сложных вещей в программировании, которая отличает начинающего от гуру. - -[cut] - -Дело в том, что большинство времени мы тратим не на изначальное написание кода, а на его развитие. - -Возможно, эти слова не очевидны, если вы пока что ничего большого не писали или пишете код "только для чтения" (написал 5 строк, отдал заказчику и забыл). Но чем более серьёзные проекты вы будете делать, тем более актуальны они будут для вас. - -Что такое это "развитие"? Это когда я вчера написал код, а сегодня (или спустя неделю) прихожу и хочу его поменять. Например, вывести сообщение не так, а эдак... Обработать товары по-другому, добавить функционал.. А где у меня там сообщение хранится? А где товар?... - -Гораздо проще найти нужные данные, если они правильно помечены, то есть когда переменная названа *правильно*. - -## Правила именования - -
      -
    • **Правило 1.** - -**Никакого транслита. Только английский.** - -Неприемлемы: - -```js -var moiTovari; -var cena; -var ssilka; -``` - -Подойдут: - -```js -var myGoods; -var price; -var link; -``` - -Чем плох транслит? - -Во-первых, среди разработчиков всего мира принято использовать английский язык для имён переменных. И если ваш код потом попадёт к кому-то другому, например вы будете в команде больше чем из одного человека, то велик шанс, что транслит ему не понравится. - -Во-вторых, русский транслит хуже читается и длиннее, чем названия на английском. - -В-третьих, в проектах вы наверняка будете применять библиотеки, написанные другими людьми. Многое уже готово, в распоряжении современного разработчика есть масса инструментов, все они используют названия переменных и функций на английском языке, и вы, конечно, будете их использовать. А от кода, где транслит перемешан с английским -- волосы могут встать дыбом, и не только на голове. - -Если вы вдруг не знаете английский -- самое время выучить. -
      • -
    • **Правило 2.** - -**Использовать короткие имена только для переменных "местного значения".** - -Называть переменные именами, не несущими смысловой нагрузки, например `a`, `e`, `p`, `mg` -- можно только в том случае, если они используются в небольшом фрагменте кода и их применение очевидно. - -Вообще же, название переменной должно быть понятным. Иногда для этого нужно использовать несколько слов. -
      • -
    • **Правило 3.** - -**Переменные из нескольких слов пишутся `вместеВотТак`.** - -Например: - -```js -var borderLeftWidth; -``` - -Этот способ записи называется "верблюжьей нотацией" или, по-английски, "camelCase". - -Существует альтернативный стандарт, когда несколько слов пишутся через знак подчеркивания `'_'`: - -```js -var border_left_width; -``` - -Преимущественно в JavaScript используется вариант `borderLeftWidth`, в частности во встроенных языковых и браузерных функциях. Поэтому целесообразно остановиться на нём. - -Ещё одна причина выбрать "верблюжью нотацию" -- запись в ней немного короче, чем c подчеркиванием, т.к. не нужно вставлять `'_'`. -
      • -
    • **Правило последнее, главное.** - -**Имя переменной должно максимально чётко соответствовать хранимым в ней данным.** - -Придумывание таких имен -- одновременно коротких и точных, при которых всегда понятно, что где лежит, приходит с опытом, но только если сознательно стремиться к этому. -
      • -
    - -Позвольте поделиться одним небольшим секретом, который очень прост, но позволит улучшить названия переменных и сэкономит время. - -Бывает так, что, написав код, мы через некоторое время к нему возвращаемся, надо что-то поправить. И мы примерно помним, что переменная, в которой хранится нужное вам значение, называется... Ну, скажем, `borderLeftWidth`. Мы ищем в её в коде, не находим, но, разобравшись, обнаруживаем, что на самом деле переменная называлась вот так: `leftBorderWidth`. - -**Если мы ищем переменную с одним именем, а находим -- с другим, то зачастую самый лучший ход -- это *переименовать* переменную, чтобы имя было тем, которое вы искали.** - -То есть, в коде `leftBorderWidth`, а мы её переименуем на ту, которую искали: `borderLeftWidth`. - -Зачем? Дело в том, что в следующий раз, когда вы захотите что-то поправить, то вы будете искать по тому же самому имени. Соответственно, это сэкономит вам время. - -Есть причина и поважнее. Поскольку именно это имя переменной пришло в голову -- скорее всего, оно больше соответствует хранимым там данным, чем то, которое было мы придумали изначально. Исключения бывают, но в любом случае -- такое несовпадение -- это повод задуматься. - -Чтобы удобно переименовывать переменную, нужно использовать [хороший редактор JavaScript](/editor), тогда этот процесс будет очень простым и быстрым. - -[smart header="Если коротко..."] -Смысл имени переменной -- это "имя на коробке", по которому мы сможем максимально быстро находить нужные нам данные. - -**Не нужно бояться переименовывать переменные, если вы придумали имя получше.** - -Современные редакторы позволяют делать это очень удобно и быстро. Это в конечном счете сэкономит вам время. -[/smart] - - -[warn header="Храните в переменной то, что следует"] -Бывают ленивые программисты, которые, вместо того чтобы объявить новую переменную, используют существующую. - -В результате получается, что такая переменная -- как коробка, в которую кидают то одно, то другое, то третье, при этом не меняя название. Что в ней лежит сейчас? А кто его знает... Нужно подойти, проверить. - -Сэкономит такой программист время на объявлении переменной -- потеряет в два раза больше на отладке кода. - -**"Лишняя" переменная -- добро, а не зло.** -[/warn] - - - diff --git a/1-js/2-first-steps/7-types-intro/article.md b/1-js/2-first-steps/7-types-intro/article.md index 11a98f86..70e31e2f 100644 --- a/1-js/2-first-steps/7-types-intro/article.md +++ b/1-js/2-first-steps/7-types-intro/article.md @@ -1,94 +1,113 @@ -# Шесть типов данных, typeof +# Data types -В JavaScript существует несколько основных типов данных. +There are 7 data types in JavaScript. -В этой главе мы получим о них общее представление, а позже, в соответствующих главах подробно познакомимся с использованием каждого типа в отдельности. +Here we will get the common understanding of them. In the next chapters we'll talk about each type in detail. [cut] -## Число "number" +## A number ```js var n = 123; n = 12.345; ``` -Единый тип *число* используется как для целых, так и для дробных чисел. +There is a single *number* type for both integer and floating point numbers. -Существуют специальные числовые значения `Infinity` (бесконечность) и `NaN` (ошибка вычислений). +Besides numbers it may store so called "numeric values": `Infinity`, `-Infinity` and `NaN`. -Например, бесконечность `Infinity` получается при делении на ноль: +`Infinity` is meant to represent the mathematical [Infinity](https://en.wikipedia.org/wiki/Infinity). + +We can get it dividing by zero: ```js //+ run alert( 1 / 0 ); // Infinity +alert( -1 / 0 ); // -Infinity ``` -Ошибка вычислений `NaN` будет результатом некорректной математической операции, например: +`NaN` represents a computational error. It is the result of an incorrect or undefined mathematical operation, for instance: ```js //+ run -alert( "нечисло" * 2 ); // NaN, ошибка +alert( "not a number" * 2 ); // NaN ``` -Эти значения формально принадлежат типу "число", хотя, конечно, числами в их обычном понимании не являются. +These values formally belong to the "number" type. Of course they are not numbers in a common sense of this word. -Особенности работы с числами в JavaScript разобраны в главе [](/number). +We'll cover working with numbers in the chapter [](/number). -## Строка "string" +## A string ```js -var str = "Мама мыла раму"; -str = 'Одинарные кавычки тоже подойдут'; +var str = "Hello"; +var str2 = 'Single quotes are ok too'; +var prase = `can embed ${str}`; ``` -**В JavaScript одинарные и двойные кавычки равноправны.** Можно использовать или те или другие. +In JavaScript, there are 3 types of quotes. -[smart header="Тип *символ* не существует, есть только *строка*."] -В некоторых языках программирования есть специальный тип данных для одного символа. Например, в языке С это `char`. В JavaScript есть только тип "строка" `string`. Что, надо сказать, вполне удобно. +
      +
    1. Double quotes and single quotes are essentially the same. Can use either.
      2. +
    2. Backtricks are "extended functionality" quotes. They allow to embed other variables or even expressions into the string wrapping them by `${…}`.
      3. +
    + +[smart header="There is no *character* type."] +In some languages, there is a special "character" type for a single character. For example, in the C language it is `char`. + +In JavaScript, there is only one type: `string`. [/smart] -Более подробно со строками мы познакомимся в главе [](/string). +We'll cover strings more thoroughly in the chapter [](/string). -## Булевый (логический) тип "boolean" +## Boolean (logical) type -У него всего два значения: `true` (истина) и `false` (ложь). +The boolean type has only two values in it: `true` and `false`. -Как правило, такой тип используется для хранения значения типа да/нет, например: +This type is commonly used to store the yes/no values. + +For instance: ```js //+ no-beautify -var checked = true; // поле формы помечено галочкой -checked = false; // поле формы не содержит галочки +var checked = true; // the form field is checked +checked = false; // the form field is not checked ``` -О нём мы поговорим более подробно, когда будем обсуждать логические вычисления и условные операторы. +We'll cover booleans while discussing logical operators. -## Специальное значение "null" +## The "null" value -Значение `null` не относится ни к одному из типов выше, а образует свой отдельный тип, состоящий из единственного значения `null`: +The special `null` value does not belong to any type described above. + +It forms a separate type of its own, which contains only the `null` value: ```js var age = null; ``` -В JavaScript `null` не является "ссылкой на несуществующий объект" или "нулевым указателем", как в некоторых других языках. Это просто специальное значение, которое имеет смысл "ничего" или "значение неизвестно". +In JavaScript `null` is not a "reference to a non-existing object" or a "null pointer" like in some other languages. -В частности, код выше говорит о том, что возраст `age` неизвестен. +It's just a special value which has the sense of "nothing" or "value unknown". -## Специальное значение "undefined" +The code above basically says that the `age` is unknown. -Значение `undefined`, как и `null`, образует свой собственный тип, состоящий из одного этого значения. Оно имеет смысл "значение не присвоено". +## The "undefined" value -Если переменная объявлена, но в неё ничего не записано, то её значение как раз и есть `undefined`: +The special value `undefined` stands separately. It makes a type of its own, just like `null`. + +The sense of `undefined` is "value is not assigned". + +If a variable is declared, but not assigned, then its value is exactly `undefined`: ```js //+ run var x; -alert( x ); // выведет "undefined" +alert( x ); // shows "undefined" ``` -Можно присвоить `undefined` и в явном виде, хотя это делается редко: +Technically, it is possible to assign to `undefined`: ```js //+ run @@ -98,37 +117,90 @@ x = undefined; alert( x ); // "undefined" ``` -В явном виде `undefined` обычно не присваивают, так как это противоречит его смыслу. Для записи в переменную "пустого" или "неизвестного" значения используется `null`. +...But it's not recommended to do that, because such assignment contradicts to the sense of `undefined`. -## Объекты "object" +To write an "empty" or an "unknown" value into the variable, use `null`. -Первые 5 типов называют *"примитивными"*. -Особняком стоит шестой тип: *"объекты"*. +## Symbols and objects -Он используется для коллекций данных и для объявления более сложных сущностей. - -Объявляются объекты при помощи фигурных скобок `{...}`, например: +The "symbol" type is used to create unique identifiers. ```js -var user = { name: "Вася" }; +//+ run +var s = Symbol(); ``` -Мы подробно разберём способы объявления объектов и, вообще, работу с объектами, позже, в главе [](/object). +Symbols are mainly used for objects and thus we'll cover -## Оператор typeof [#type-typeof] -Оператор `typeof` возвращает тип аргумента. -У него есть два синтаксиса: со скобками и без: +```js +//+ run +var s = Symbol("id"); + +x = undefined; + +alert( x ); // "undefined" +``` + + +## Object + +The `object` type is special. + +All other types are called "primitive", because their values can contain only a single thing (be it a string or a number or whatever). + +In contrast, objects are used to store collections of various data and more complex entities. + +An object is defined with the figure brackets `{…}`. + +For instance, here we create a `user` object with the name and the age: + +```js +var user = { + name: "John", + age: 30 +}; +``` + +We can access the data form the object via the dot notation: + +```js +alert( user.name ); // John +alert( user.age ); // 30 +``` + +We'll cover working with objects in the chapter [](/object). + +## Symbol + +The `symbol` type is used to create unique identifiers for objects. + +```js +var id = Symbol("id"); +``` + +There are other programming languages with a "symbol" type, namely Ruby. + +Let's just say that JavaScript symbols are not the same. + +We list symbols here for completeness, their in-depth study goes after covering objects. + +## The typeof operator [#type-typeof] + +The `typeof` operator returns the type of the argument. + +It has two syntaxes: with the brackets or without them. +
      -
    1. Синтаксис оператора: `typeof x`.
      2. -
    2. Синтаксис функции: `typeof(x)`.
      3. +
    3. As an operator: `typeof x`.
      4. +
    4. Function style: `typeof(x)`.
    -Работают они одинаково, но первый синтаксис короче. +They work the same. -**Результатом `typeof` является строка, содержащая тип:** +The result of `typeof x` is a string, which has the type name: ```js typeof undefined // "undefined" @@ -139,6 +211,8 @@ typeof true // "boolean" typeof "foo" // "string" +typeof Symbol("id") // "symbol" + typeof {} // "object" *!* @@ -150,19 +224,18 @@ typeof function(){} // "function" (2) */!* ``` -Последние две строки помечены, потому что `typeof` ведет себя в них по-особому. +Please note the last two lines, because `typeof` behaves specially there.
      -
    1. Результат `typeof null == "object"` -- это официально признанная ошибка в языке, которая сохраняется для совместимости. На самом деле `null` -- это не объект, а отдельный тип данных.
      2. -
    2. Функции мы пройдём чуть позже. Пока лишь заметим, что функции не являются отдельным базовым типом в JavaScript, а подвидом объектов. Но `typeof` выделяет функции отдельно, возвращая для них `"function"`. На практике это весьма удобно, так как позволяет легко определить функцию.
      3. +
    3. The result of `typeof null` equals to `"object"`. That is an officially recognized error in the language that is kept for compatibility. In fact, `null` is not an object, but a special value from a data type of its own.
      4. +
    4. Functions are yet to be covered. As of now let's just note that functions is a kind of objects. But `typeof` treats them separately returning `"function"`. That's very convenient in practie.
    -К работе с типами мы также вернёмся более подробно в будущем, после изучения основных структур данных. +## Summary -## Итого +
      +
    • There are 7 basic types in JavaScript. Six "primitive" types: `number`, `string`, `boolean`, `null`, `undefined`, `symbol` and `object`.
      • +
    • Use `typeof x` to see which type is stored in `x`, but note that `typeof null` is mistakingly returned as undefined.
      • +
    -Есть 5 "примитивных" типов: `number`, `string`, `boolean`, `null`, `undefined` и 6-й тип -- объекты `object`. - -Очень скоро мы изучим их во всех деталях. - -Оператор `typeof x` позволяет выяснить, какой тип находится в `x`, возвращая его в виде строки. +Now as we know which types exist, let's move on to operators and compute something using these types. diff --git a/1-js/2-first-steps/8-operators/article.md b/1-js/2-first-steps/8-operators/article.md index b8b28f3c..7f8a884c 100644 --- a/1-js/2-first-steps/8-operators/article.md +++ b/1-js/2-first-steps/8-operators/article.md @@ -1,13 +1,11 @@ -# Основные операторы +# Operators -Для работы с переменными, со значениями, JavaScript поддерживает все стандартные операторы, большинство которых есть и в других языках программирования. +Many operators are known to us from the school program. It is an addition `+`, a multiplication `*`, a subsctraction and so on. -Несколько операторов мы знаем со школы -- это обычные сложение `+`, умножение `*`, вычитание и так далее. - -В этой главе мы сконцентрируемся на операторах, которые в курсе математики не проходят, и на их особенностях в JavaScript. +In this chapter we mainly concentrate on aspects not covered by the arithmetic. [cut] -## Термины: "унарный", "бинарный", "операнд" +## Terms: "unary", "binary", "operand" У операторов есть своя терминология, которая используется во всех языках программирования.