Skip to content

Commit 8ba2c6b

Browse files
iliakaniliakan
committed
en
1 parent 48497f7 commit 8ba2c6b

23 files changed

Lines changed: 565 additions & 606 deletions

File tree

‎1-js/1-getting-started/4-devtools/article.md‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ Open the page [bug.html](bug.html).
2424

2525
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.
2626

27-
Press the keys [key Ctrl+Shift+J] or, if you're on Mac, then [key Cmd+Shift+J].
27+
Press the key [key F12] or, if you're on Mac, then [key Cmd+Opt+J].
2828

2929
The developer tools will open on the Console tab by default.
3030

@@ -51,7 +51,7 @@ It is done on the "Advanced" pane of the preferences:
5151

5252
<img src="safari.png">
5353

54-
Now [key Cmd+Alt+C] can toggle on the console. Also the new top menu item has appeared with many useful options.
54+
Now [key Cmd+Opt+C] can toggle the console. Also the new top menu item has appeared with many useful options.
5555

5656
## Other browsers
5757

@@ -62,10 +62,8 @@ The look & feel of them is quite similar, once we know how to use one of them (c
6262
## Summary
6363

6464
<ul>
65-
<li>
66-
Developer tools allow us to see errors (crucial now), run commands, examine variables and much more.</li>
67-
<li>
68-
They can be opened with [key F12] for most browsers, with the exception of Chrome ([key Ctrl+Shift+J] / [key Cmd+Shift+J]) and Safari (need to enable, then [key Cmd+Alt+C]).
65+
<li>Developer tools allow us to see errors (crucial now), run commands, examine variables and much more.</li>
66+
<li>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).
6967
</li>
7068
</ul>
7169

‎1-js/2-first-steps/1-hello-world/1-hello-alert/solution.md‎

Lines changed: 0 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +0,0 @@
1-
Код страницы:
2-
3-
```html
4-
<!--+ run -->
5-
<!DOCTYPE html>
6-
<html>
7-
8-
<head>
9-
<meta charset="utf-8">
10-
</head>
11-
12-
<body>
13-
14-
<script>
15-
alert( 'Я - JavaScript!' );
16-
</script>
17-
18-
</body>
19-
20-
</html>
21-
```
22-

‎1-js/2-first-steps/1-hello-world/1-hello-alert/solution.view/index.html‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
11
<!DOCTYPE html>
22
<html>
33

4-
<head>
5-
<meta charset="utf-8">
6-
</head>
7-
84
<body>
95

106
<script>
11-
alert('Я - JavaScript!');
7+
alert( "I'm JavaScript!" );
128
</script>
139

1410
</body>

‎1-js/2-first-steps/1-hello-world/1-hello-alert/task.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
# Выведите alert
1+
# Show an alert
22

33
[importance 5]
44

5-
Сделайте страницу, которая выводит "Я - JavaScript!".
5+
Create a page that shows a message "I'm JavaScript!".
66

7-
Создайте её на диске, откройте в браузере, убедитесь, что всё работает.
7+
Do it in a sandbox, or on your hard drive, doesn't matter, just ensure that it works.
88

99
[demo src="solution"]

‎1-js/2-first-steps/1-hello-world/article.md‎

Lines changed: 30 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -6,89 +6,72 @@ In this chapter we'll create a simple script and see it working.
66
## The "script" tag
77

88
[smart header="What if I want to move faster?"]
9-
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.
9+
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.
1010

1111
If you have enough time and want to learn things in details then read on :)
1212
[/smart]
1313

14-
Программы на языке JavaScript можно вставить в любое место HTML при помощи тега `SCRIPT`. Например:
14+
JavaScript programs can be inserted in any place of HTML with the help of the `<script>` tag.
15+
16+
For instance:
1517

1618
```html
1719
<!--+ run height=100 -->
1820
<!DOCTYPE HTML>
1921
<html>
2022

21-
<head>
22-
<!-- Тег meta для указания кодировки -->
23-
<meta charset="utf-8">
24-
</head>
25-
2623
<body>
2724

28-
<p>Начало документа...</p>
25+
<p>Document start...</p>
26+
2927
*!*
3028
<script>
31-
alert( 'Привет, Мир!' );
29+
alert( 'Hello, world!' );
3230
</script>
3331
*/!*
3432

35-
<p>...Конец документа</p>
33+
<p>...Document end.</p>
3634

3735
</body>
3836

3937
</html>
4038
```
4139

42-
Этот пример использует следующие элементы:
43-
44-
<dl>
45-
<dt><code>&lt;script&gt; ... &lt;/script&gt;</code></dt>
46-
<dd>Тег `script` содержит исполняемый код. Предыдущие стандарты HTML требовали обязательного указания атрибута `type`, но сейчас он уже не нужен. Достаточно просто `<script>`.
40+
You can run the example clicking on a "Play" button in it's right-top corner.
4741

48-
Браузер, когда видит `<script>`:
49-
<ol>
50-
<li>Начинает отображать страницу, показывает часть документа до `script`</li>
51-
<li>Встретив тег `script`, переключается в JavaScript-режим и не показывает, а исполняет его содержимое.</li>
52-
<li>Закончив выполнение, возвращается обратно в HTML-режим и *только тогда* отображает оставшуюся часть документа.</li>
53-
</ol>
42+
The `<script>` tag contains JavaScript code which is automatically executed when the browser meets the tag.
5443

55-
Попробуйте этот пример в действии, и вы сами всё увидите.
56-
</dd>
57-
<dt>`alert(сообщение)`</dt>
58-
<dd>Отображает окно с сообщением и ждёт, пока посетитель не нажмёт "Ок".</dd>
59-
</dl>
60-
61-
[smart header="Кодировка и тег `META`"]
62-
При попытке сделать такой же файл у себя на диске и запустить, вы можете столкнуться с проблемой -- выводятся "кракозяблы", "квадратики" и "вопросики" вместо русского текста.
44+
Please note the sequence:
6345

64-
Чтобы всё было хорошо, нужно:
6546
<ol>
66-
<li>Убедиться, что в `HEAD` есть строка `<meta charset="utf-8">`. Если вы будете открывать файл с диска, то именно он укажет браузеру кодировку.</li>
67-
<li>Убедиться, что редактор сохранил файл именно в кодировке UTF-8, а не, скажем, в `windows-1251`.</li>
47+
<li>Browser starts to parse/show the document, makes it up to the `<script>`.</li>
48+
<li>When the browser meets `<script>`, it switches to the JavaScript execution mode. In this mode it executes the script. In this case `alert` command is used which shows a message.</li>
49+
<li>When the script is finished, it gets back to the HTML-mode, and *only then* it shows the rest of the document.</li>
6850
</ol>
6951
70-
Указание кодировки -- часть обычного HTML, я упоминаю об этом "на всякий случай", чтобы не было сюрпризов при запуске примеров локально.
71-
[/smart]
52+
So, a visitor won't see the content after the script until the script finishes to execute.
7253
54+
People say about that: "a `<script>` tag blocks rendering".
7355
74-
## Современная разметка для SCRIPT
7556
76-
В старых скриптах оформление тега `SCRIPT` было немного сложнее. В устаревших руководствах можно встретить следующие элементы:
57+
## The modern markup
7758
78-
<dl>
79-
<dt>Атрибут <code>&lt;script <u>type</u>=...&gt;</code></dt>
59+
In the past, `<script>` had a few necessary attributes.
60+
61+
We can find the following in the old code:
8062
81-
<dd>В отличие от HTML5, стандарт HTML 4 требовал обязательного указания этого атрибута. Выглядел он так: `type="text/javascript"`. Если указать другое значение `type`, то скрипт выполнен не будет.
63+
<dl>
64+
<dt>The `type` attribute: <code>&lt;script <u>type</u>=...&gt;</code></dt>
8265
83-
В современной разработке атрибут `type` не обязателен.
66+
<dd>The old standard HTML4 required a script to have the type. Usually it was `type="text/javascript"`. The modern HTML standard assumes this `type` by default, no attribute is required.
8467
</dd>
8568
86-
<dt>Атрибут <code>&lt;script <u>language</u>=...&gt;</code></dt>
87-
<dd>Этот атрибут предназначен для указания языка, на котором написан скрипт. По умолчанию, язык -- JavaScript, так что и этот атрибут ставить не обязательно.</dd>
88-
<dt>Комментарии до и после скриптов</dt>
89-
<dd>В совсем старых руководствах и книгах иногда рекомендуют использовать HTML-комментарии внутри `SCRIPT`, чтобы спрятать Javascript от браузеров, которые не поддерживают его.
69+
<dt>The `language` attribute: <code>&lt;script <u>language</u>=...&gt;</code></dt>
70+
<dd>This attribute was meant to show the language of the script. Certain outdated browsers supported other languages at that time. As of now, this attribute makes no sense, the language is JavaScript by default. No need to use it.</dd>
71+
<dt>Comments before and after scripts.</dt>
72+
<dd>In the most pre-historic books and guides, `<script>` may have comments inside.
9073
91-
Выглядит это примерно так:
74+
Like this:
9275
9376
```html
9477
<!--+ no-beautify -->
@@ -97,9 +80,9 @@ If you have enough time and want to learn things in details then read on :)
9780
//--></script>
9881
```
9982
100-
Браузер, для которого предназначались такие трюки, очень старый Netscape, давно умер. Поэтому в этих комментариях нет нужды.
83+
These comments were supposed to hide the code from an old browser that did't understand a `<script>` tag. But all browsers from the past 15 years know about `<script>`, so that's a really ancient theme. Giving this for the sake of completeness only. So if you see such code somewhere you know the guide is really ancient and not worth looking into.
10184
</dd>
10285
</dl>
10386
104-
Итак, для вставки скрипта мы просто пишем `<script>`, без дополнительных атрибутов и комментариев.
87+
In summary, we just use `<script>` to add some code to the page, without additional attributes and comments.
10588

‎1-js/2-first-steps/2-external-script/1-hello-alert-ext/index.html‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
<!DOCTYPE html>
22
<html>
33

4-
<head>
5-
<meta charset="utf-8">
6-
</head>
7-
84
<body>
95

106
<script src="alert.js"></script>

‎1-js/2-first-steps/2-external-script/1-hello-alert-ext/solution.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
Код для HTML-файла:
1+
The HTML code:
22

33
```html
44
<!--+ src="index.html" -->
55
```
66

7-
Для файла `alert.js` из той же директории:
7+
For the file `alert.js` in the same folder:
88

99
```js
1010
//+ src="alert.js"

‎1-js/2-first-steps/2-external-script/1-hello-alert-ext/task.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
# Вывести alert внешним скриптом
1+
# Show an alert with an external script
22

33
[importance 5]
44

5-
Возьмите решение предыдущей задачи [](/task/hello-alert) и вынесите скрипт во внешний файл `alert.js`, который расположите в той же директории.
5+
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.
66

7-
Откройте страницу и проверьте, что вывод сообщения всё ещё работает.
7+
Open the page, ensures that the alert works.

‎1-js/2-first-steps/2-external-script/2-async-defer-first/solution.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
Ответы:
1+
Answers:
22
<ol>
3-
<li>Первым выполнится `big.js`, это нормальная последовательность выполнения подряд идущих скриптов.</li>
4-
<li>Первым выполнится `small.js`, так как скрипты из-за `async` ведут себя совершенно независимо друг от друга, страница тоже от них не зависит.</li>
5-
<li>Первым выполнится `big.js`, так как скрипты, подключённые через `defer`, сохраняют порядок выполнения относительно друг друга.</li>
3+
<li>The first is `big.js`, that's a normal sequence for external `<script>` tags.</li>
4+
<li>The first is `small.js`, because `async` makes script behave independently of each other and the page. The first to loads runs first.</li>
5+
<li>The first is `big.js`, because "deferred" scripts keep relative execution order.</li>
66
</ol>

‎1-js/2-first-steps/2-external-script/2-async-defer-first/task.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
1-
# Какой скрипт выполнится первым?
1+
# Which script executes first?
22

33
[importance 4]
44

5-
В примере ниже подключены два скрипта `small.js` и `big.js`.
5+
In the questions below, there are two scripts: `small.js` and `big.js`.
66

7-
Если предположить, что `small.js` загружается гораздо быстрее, чем `big.js` -- какой выполнится первым?
7+
If we assume that `small.js` loads much faster compared to `big.js` -- which script executes first?
88

99
```html
1010
<script src="big.js"></script>
1111
<script src="small.js"></script>
1212
```
1313

14-
А вот так?
14+
What if we add `async`?
1515

1616
```html
1717
<script async src="big.js"></script>
1818
<script async src="small.js"></script>
1919
```
2020

21-
А так?
21+
What if we switch to `defer`?
2222

2323
```html
2424
<script defer src="big.js"></script>

0 commit comments

Comments
 (0)