split hello-world into 2 chapters
This commit is contained in:
Ilya Kantor
parent
99240a757a
commit
97daf5f54a
117 changed files with 177 additions and 177 deletions
|
|
@ -99,180 +99,3 @@
|
|||
|
||||
Итак, для вставки скрипта мы просто пишем `<script>`, без дополнительных атрибутов и комментариев.
|
||||
|
||||
|
||||
## Внешние скрипты
|
||||
|
||||
Если JavaScript-кода много -- его выносят в отдельный файл, который подключается в HTML:
|
||||
|
||||
```html
|
||||
<script src="/path/to/script.js"></script>
|
||||
```
|
||||
|
||||
Здесь `/path/to/script.js` -- это абсолютный путь к файлу, содержащему скрипт (из корня сайта).
|
||||
|
||||
Браузер сам скачает скрипт и выполнит.
|
||||
|
||||
Можно указать и полный URL, например:
|
||||
|
||||
```html
|
||||
<script src="http://code.jquery.com/jquery.js"></script>
|
||||
```
|
||||
|
||||
Вы также можете использовать путь относительно текущей страницы, например `src="jquery.js"` обозначает файл из текущей директории.
|
||||
|
||||
Чтобы подключить несколько скриптов, используйте несколько тегов:
|
||||
|
||||
```html
|
||||
<script src="/js/script1.js"></script>
|
||||
<script src="/js/script2.js"></script>
|
||||
...
|
||||
```
|
||||
|
||||
[smart]
|
||||
Как правило, в HTML пишут только самые простые скрипты, а сложные выносят в отдельный файл.
|
||||
|
||||
Браузер скачает его только первый раз и в дальнейшем, при правильной настройке сервера, будет брать из своего [кеша](http://ru.wikipedia.org/wiki/%D0%9A%D1%8D%D1%88).
|
||||
|
||||
Благодаря этому один и тот же большой скрипт, содержащий, к примеру, библиотеку функций, может использоваться на разных страницах без полной перезагрузки с сервера.
|
||||
|
||||
[/smart]
|
||||
|
||||
|
||||
[warn header="Если указан атрибут `src`, то содержимое тега игнорируется."]
|
||||
|
||||
В одном теге `SCRIPT` нельзя одновременно подключить внешний скрипт и указать код.
|
||||
|
||||
Вот так не cработает:
|
||||
|
||||
```html
|
||||
<script *!*src*/!*="file.js">
|
||||
alert(1); // так как указан src, то внутренняя часть тега игнорируется
|
||||
</script>
|
||||
```
|
||||
|
||||
Нужно выбрать: либо `SCRIPT` идёт с `src`, либо содержит код. Тег выше следует разбить на два: один -- с `src`, другой -- с кодом, вот так:
|
||||
|
||||
```html
|
||||
<script src="file.js"></script>
|
||||
<script>
|
||||
alert(1);
|
||||
</script>
|
||||
```
|
||||
|
||||
[/warn]
|
||||
|
||||
## Асинхронные скрипты: defer/async
|
||||
|
||||
Обычно тег `<script>` блокирует отображение страницы.
|
||||
|
||||
Например, в примере ниже -- пока все кролики не будут посчитаны -- нижний `<p>` не будет показан:
|
||||
|
||||
```html
|
||||
<!--+ run height=100 -->
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Начинаем считать:</p>
|
||||
|
||||
*!*
|
||||
<script>
|
||||
alert('Первый кролик!');
|
||||
alert('Второй кролик!');
|
||||
alert('Третий кролик!');
|
||||
</script>
|
||||
*/!*
|
||||
|
||||
<p>Кролики посчитаны!</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Такое поведение называют "синхронным". Как правило, оно вполне нормально, но бывает беда.
|
||||
|
||||
Внешние скрипты `<script src="...">` блокируют отображение страницы не только на время выполнения, которое обычно небольшое, но и на время загрузки тоже!
|
||||
|
||||
В ряде случаев это совсем неуместно. Например, мы подключаем внешний скрипт, который показывает рекламу. По-хорошему, он не должен никак задерживать отображение страницы сайта. Реклама -- это дополнение к странице, она не должна как-то тормозить сайт и нарушать его функционал.
|
||||
|
||||
А представим на минуту, что сервер, с которого загружается внешний скрипт, перегружен и долго не отвечает? Тогда вся страница "подвиснет", пока он не загрузится.
|
||||
|
||||
Вот пример, с подобным скриптом (стоит искусственная задержка загрузки):
|
||||
|
||||
```html
|
||||
<!--+ run height=100 -->
|
||||
<p>Начало страницы...</p>
|
||||
|
||||
<script src="http://js.cx/hello/ads.js?speed=0"></script>
|
||||
|
||||
<p>...Важная информация!</p>
|
||||
```
|
||||
|
||||
В примере выше важная информация не покажется, пока не загрузится внешний скрипт. Но действительно ли он так важен, что мы хотим заставить посетителя ждать? Если это реклама или счётчик посещаемости, то вряд ли.
|
||||
|
||||
Можно поставить все подобные скрипты в конец страницы -- это уменьшит проблему, но не избавит от неё полностью, поскольку если какой-то один скрипт тормозит или завис, то последующие будут его ждать.
|
||||
|
||||
Чтобы это обойти, можно использовать для скриптов атрибуты `async` или `defer`:
|
||||
<dl>
|
||||
<dt>Атрибут `async`</dt>
|
||||
<dd>Поддерживается всеми браузерами, кроме IE9-. Скрипт выполняется полностью асинхронно. То есть, при обнаружении `<script async src="...">` браузер не останавливает обработку страницы, а спокойно работает дальше. Когда скрипт будет загружен -- он выполнится.</dd>
|
||||
<dt>Атрибут `defer`</dt>
|
||||
<dd>Поддерживается всеми браузерами, включая самые старые IE. Скрипт выполняется асинхронно, не заставляет ждать страницу, но, в отличие от `async`, браузер гарантирует, что относительный порядок скриптов с `defer` будет сохранён.
|
||||
|
||||
То есть, в таком коде (с `async`) первым сработает тот скрипт, который раньше загрузится:
|
||||
|
||||
```html
|
||||
<script src="1.js" async></script>
|
||||
<script src="2.js" async></script>
|
||||
```
|
||||
|
||||
А в таком коде (с `defer`) первым сработает всегда `1.js`, а скрипт `2.js`, даже если загрузился раньше, будет его ждать.
|
||||
|
||||
```html
|
||||
<script src="1.js" defer></script>
|
||||
<script src="2.js" defer></script>
|
||||
```
|
||||
|
||||
Атрибут `defer` используют в тех случаях, когда второй скрипт `2.js` зависит от первого `1.js`, к примеру -- использует что-то, описанное первым скриптом.
|
||||
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
[warn header="Либо `async` либо `defer`"]
|
||||
Одновременно указывать `async` и `defer` не имеет смысла, в этом случае браузер использует только `async`.
|
||||
[/warn]
|
||||
|
||||
[warn header="Атрибуты `async/defer` -- только для внешних скриптов"]
|
||||
Атрибуты `async/defer` работают только в том случае, если назначены на внешние скрипты, т.е. имеющие `src`.
|
||||
|
||||
При попытке назначить их на обычные скрипты <code><script>...</script></code>, они будут проигнороированы.
|
||||
[/warn]
|
||||
|
||||
Тот же пример с `async`:
|
||||
|
||||
```html
|
||||
<!--+ run height=100 -->
|
||||
<p>Начало страницы...</p>
|
||||
|
||||
<script *!*async*/!* src="http://js.cx/hello/ads.js?speed=0"></script>
|
||||
|
||||
<p>...Важная информация!</p>
|
||||
```
|
||||
|
||||
При запуске вы увидите, что вся страница отобразилась тут же, а `alert` из внешнего скрипта появится позже, когда загрузится скрипт.
|
||||
|
||||
**Большинство современных системы рекламы и счётчиков знают про эти атрибуты и используют их.**
|
||||
|
||||
## Итого
|
||||
|
||||
<ul>
|
||||
<li>Скрипты вставляются на страницу как текст в теге `<script>`, либо как внешний файл через `<script src="путь"></script>`</li>
|
||||
</ul>
|
||||
|
||||
Очень важно не только читать учебник, но делать что-то самостоятельно.
|
||||
|
||||
Решите задачки, чтобы удостовериться, что вы все правильно поняли.
|
||||
|
||||
|
|
|
|||
0
1-js/2-first-steps/11-ifelse/2-check-standard/ifelse_task2.png → 1-js/2-first-steps/12-ifelse/2-check-standard/ifelse_task2.png
Executable file → Normal file
0
1-js/2-first-steps/11-ifelse/2-check-standard/ifelse_task2.png → 1-js/2-first-steps/12-ifelse/2-check-standard/ifelse_task2.png
Executable file → Normal file
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
0
1-js/2-first-steps/11-ifelse/3-sign/if_sign/index.html → 1-js/2-first-steps/12-ifelse/3-sign/if_sign/index.html
Executable file → Normal file
0
1-js/2-first-steps/11-ifelse/3-sign/if_sign/index.html → 1-js/2-first-steps/12-ifelse/3-sign/if_sign/index.html
Executable file → Normal file
0
1-js/2-first-steps/11-ifelse/4-check-login/ifelse_task.png → 1-js/2-first-steps/12-ifelse/4-check-login/ifelse_task.png
Executable file → Normal file
0
1-js/2-first-steps/11-ifelse/4-check-login/ifelse_task.png → 1-js/2-first-steps/12-ifelse/4-check-login/ifelse_task.png
Executable file → Normal file
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
0
1-js/2-first-steps/16-function-basics/style.png → 1-js/2-first-steps/17-function-basics/style.png
Executable file → Normal file
0
1-js/2-first-steps/16-function-basics/style.png → 1-js/2-first-steps/17-function-basics/style.png
Executable file → Normal file
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
0
1-js/2-first-steps/1-hello-world/2-hello-alert-ext/alert.js → 1-js/2-first-steps/2-external-script/1-hello-alert-ext/alert.js
Executable file → Normal file
0
1-js/2-first-steps/1-hello-world/2-hello-alert-ext/alert.js → 1-js/2-first-steps/2-external-script/1-hello-alert-ext/alert.js
Executable file → Normal file
177
1-js/2-first-steps/2-external-script/article.md
Normal file
177
1-js/2-first-steps/2-external-script/article.md
Normal file
|
|
@ -0,0 +1,177 @@
|
|||
# Внешние скрипты, порядок исполнения
|
||||
|
||||
Если JavaScript-кода много -- его выносят в отдельный файл, который подключается в HTML:
|
||||
|
||||
```html
|
||||
<script src="/path/to/script.js"></script>
|
||||
```
|
||||
|
||||
Здесь `/path/to/script.js` -- это абсолютный путь к файлу, содержащему скрипт (из корня сайта).
|
||||
|
||||
Браузер сам скачает скрипт и выполнит.
|
||||
|
||||
Можно указать и полный URL, например:
|
||||
|
||||
```html
|
||||
<script src="http://code.jquery.com/jquery.js"></script>
|
||||
```
|
||||
|
||||
Вы также можете использовать путь относительно текущей страницы, например `src="jquery.js"` обозначает файл из текущей директории.
|
||||
|
||||
Чтобы подключить несколько скриптов, используйте несколько тегов:
|
||||
|
||||
```html
|
||||
<script src="/js/script1.js"></script>
|
||||
<script src="/js/script2.js"></script>
|
||||
...
|
||||
```
|
||||
|
||||
[smart]
|
||||
Как правило, в HTML пишут только самые простые скрипты, а сложные выносят в отдельный файл.
|
||||
|
||||
Браузер скачает его только первый раз и в дальнейшем, при правильной настройке сервера, будет брать из своего [кеша](http://ru.wikipedia.org/wiki/%D0%9A%D1%8D%D1%88).
|
||||
|
||||
Благодаря этому один и тот же большой скрипт, содержащий, к примеру, библиотеку функций, может использоваться на разных страницах без полной перезагрузки с сервера.
|
||||
|
||||
[/smart]
|
||||
|
||||
|
||||
[warn header="Если указан атрибут `src`, то содержимое тега игнорируется."]
|
||||
|
||||
В одном теге `SCRIPT` нельзя одновременно подключить внешний скрипт и указать код.
|
||||
|
||||
Вот так не cработает:
|
||||
|
||||
```html
|
||||
<script *!*src*/!*="file.js">
|
||||
alert(1); // так как указан src, то внутренняя часть тега игнорируется
|
||||
</script>
|
||||
```
|
||||
|
||||
Нужно выбрать: либо `SCRIPT` идёт с `src`, либо содержит код. Тег выше следует разбить на два: один -- с `src`, другой -- с кодом, вот так:
|
||||
|
||||
```html
|
||||
<script src="file.js"></script>
|
||||
<script>
|
||||
alert(1);
|
||||
</script>
|
||||
```
|
||||
|
||||
[/warn]
|
||||
|
||||
## Асинхронные скрипты: defer/async
|
||||
|
||||
Обычно тег `<script>` блокирует отображение страницы.
|
||||
|
||||
Например, в примере ниже -- пока все кролики не будут посчитаны -- нижний `<p>` не будет показан:
|
||||
|
||||
```html
|
||||
<!--+ run height=100 -->
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Начинаем считать:</p>
|
||||
|
||||
*!*
|
||||
<script>
|
||||
alert('Первый кролик!');
|
||||
alert('Второй кролик!');
|
||||
alert('Третий кролик!');
|
||||
</script>
|
||||
*/!*
|
||||
|
||||
<p>Кролики посчитаны!</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Такое поведение называют "синхронным". Как правило, оно вполне нормально, но бывает беда.
|
||||
|
||||
Внешние скрипты `<script src="...">` блокируют отображение страницы не только на время выполнения, которое обычно небольшое, но и на время загрузки тоже!
|
||||
|
||||
В ряде случаев это совсем неуместно. Например, мы подключаем внешний скрипт, который показывает рекламу. По-хорошему, он не должен никак задерживать отображение страницы сайта. Реклама -- это дополнение к странице, она не должна как-то тормозить сайт и нарушать его функционал.
|
||||
|
||||
А представим на минуту, что сервер, с которого загружается внешний скрипт, перегружен и долго не отвечает? Тогда вся страница "подвиснет", пока он не загрузится.
|
||||
|
||||
Вот пример, с подобным скриптом (стоит искусственная задержка загрузки):
|
||||
|
||||
```html
|
||||
<!--+ run height=100 -->
|
||||
<p>Начало страницы...</p>
|
||||
|
||||
<script src="http://js.cx/hello/ads.js?speed=0"></script>
|
||||
|
||||
<p>...Важная информация!</p>
|
||||
```
|
||||
|
||||
В примере выше важная информация не покажется, пока не загрузится внешний скрипт. Но действительно ли он так важен, что мы хотим заставить посетителя ждать? Если это реклама или счётчик посещаемости, то вряд ли.
|
||||
|
||||
Можно поставить все подобные скрипты в конец страницы -- это уменьшит проблему, но не избавит от неё полностью, поскольку если какой-то один скрипт тормозит или завис, то последующие будут его ждать.
|
||||
|
||||
Чтобы это обойти, можно использовать для скриптов атрибуты `async` или `defer`:
|
||||
<dl>
|
||||
<dt>Атрибут `async`</dt>
|
||||
<dd>Поддерживается всеми браузерами, кроме IE9-. Скрипт выполняется полностью асинхронно. То есть, при обнаружении `<script async src="...">` браузер не останавливает обработку страницы, а спокойно работает дальше. Когда скрипт будет загружен -- он выполнится.</dd>
|
||||
<dt>Атрибут `defer`</dt>
|
||||
<dd>Поддерживается всеми браузерами, включая самые старые IE. Скрипт выполняется асинхронно, не заставляет ждать страницу, но, в отличие от `async`, браузер гарантирует, что относительный порядок скриптов с `defer` будет сохранён.
|
||||
|
||||
То есть, в таком коде (с `async`) первым сработает тот скрипт, который раньше загрузится:
|
||||
|
||||
```html
|
||||
<script src="1.js" async></script>
|
||||
<script src="2.js" async></script>
|
||||
```
|
||||
|
||||
А в таком коде (с `defer`) первым сработает всегда `1.js`, а скрипт `2.js`, даже если загрузился раньше, будет его ждать.
|
||||
|
||||
```html
|
||||
<script src="1.js" defer></script>
|
||||
<script src="2.js" defer></script>
|
||||
```
|
||||
|
||||
Атрибут `defer` используют в тех случаях, когда второй скрипт `2.js` зависит от первого `1.js`, к примеру -- использует что-то, описанное первым скриптом.
|
||||
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
[warn header="Либо `async` либо `defer`"]
|
||||
Одновременно указывать `async` и `defer` не имеет смысла, в этом случае браузер использует только `async`.
|
||||
[/warn]
|
||||
|
||||
[warn header="Атрибуты `async/defer` -- только для внешних скриптов"]
|
||||
Атрибуты `async/defer` работают только в том случае, если назначены на внешние скрипты, т.е. имеющие `src`.
|
||||
|
||||
При попытке назначить их на обычные скрипты <code><script>...</script></code>, они будут проигнороированы.
|
||||
[/warn]
|
||||
|
||||
Тот же пример с `async`:
|
||||
|
||||
```html
|
||||
<!--+ run height=100 -->
|
||||
<p>Начало страницы...</p>
|
||||
|
||||
<script *!*async*/!* src="http://js.cx/hello/ads.js?speed=0"></script>
|
||||
|
||||
<p>...Важная информация!</p>
|
||||
```
|
||||
|
||||
При запуске вы увидите, что вся страница отобразилась тут же, а `alert` из внешнего скрипта появится позже, когда загрузится скрипт.
|
||||
|
||||
**Большинство современных системы рекламы и счётчиков знают про эти атрибуты и используют их.**
|
||||
|
||||
## Итого
|
||||
|
||||
<ul>
|
||||
<li>Скрипты вставляются на страницу как текст в теге `<script>`, либо как внешний файл через `<script src="путь"></script>`</li>
|
||||
</ul>
|
||||
|
||||
Очень важно не только читать учебник, но делать что-то самостоятельно.
|
||||
|
||||
Решите задачки, чтобы удостовериться, что вы все правильно поняли.
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue