# Привет, мир! В этой статье мы создадим простой скрипт и посмотрим, как он работает. [cut] ## Тег SCRIPT [smart header="А побыстрее?"] В том (и только в том!) случае, если читатель нетерпелив и уже разрабатывал на JavaScript или имеет достаточно опыта в другом программировании, он может не читать каждую статью этого раздела, а прыгнуть сразу на главу [](/javascript-specials). Там будет кратко самое основное. Если же у вас есть достаточно времени и желание начать с азов, то читайте дальше :) [/smart] Программы на языке JavaScript можно вставить в любое место HTML при помощи тега `SCRIPT`. Например: ```html

Начало документа...

*!* */!*

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

``` Этот пример использует следующие элементы:
<script> ... </script>
Тег `script` содержит исполняемый код. Предыдущие стандарты HTML требовали обязательного указания атрибута `type`, но сейчас он уже не нужен. Достаточно просто ` ``` Браузер, для которого предназначались такие трюки, очень старый Netscape, давно умер. Поэтому в этих комментариях нет нужды.
Итак, для вставки скрипта мы просто пишем ` ``` Здесь `/path/to/script.js` -- это абсолютный путь к файлу, содержащему скрипт (из корня сайта). Браузер сам скачает скрипт и выполнит. Можно указать и полный URL, например: ```html ``` Вы также можете использовать путь относительно текущей страницы, в частности `src="jquery.js"` обозначает файл из текущей директории. Чтобы подключить несколько скриптов, используйте несколько тегов: ```html ... ``` [smart] Как правило, в HTML пишут только самые простые скрипты, а сложные выносят в отдельный файл. Браузер скачает его только первый раз и в дальнейшем, при правильной настройке сервера, будет брать из своего [кеша](http://ru.wikipedia.org/wiki/%D0%9A%D1%8D%D1%88). Благодаря этому один и тот же большой скрипт, например, меню или библиотека функций, может использоваться на разных страницах без полной перезагрузки с сервера. [/smart] [warn header="Если указан атрибут `src`, то содержимое тега игнорируется."] В одном теге `SCRIPT` нельзя одновременно подключить внешний скрипт и указать код. Вот так не cработает: ```html ``` Нужно выбрать: либо `SCRIPT` идёт с `src`, либо содержит код. Тег выше следует разбить на два: один -- с `src`, другой -- с кодом, вот так: ```html ``` [/warn] ## Асинхронные скрипты: defer/async Обычно тег ` */!*

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

``` Такое поведение называют "синхронным". Как правило, оно вполне нормально, но бывает беда. Внешние скрипты `

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

``` В примере выше важная информация не покажется, пока не загрузится внешний скрипт. Но действительно ли он так важен, что мы хотим заставить посетителя ждать? Если это реклама или счётчик посещаемости, то вряд ли. Можно поставить все подобные скрипты в конец страницы -- это уменьшит проблему, но не избавит от неё полностью, поскольку если какой-то один скрипт тормозит или завис, то последующие будут его ждать. Чтобы это обойти, можно использовать для скриптов атрибуты `async` или `defer`:
Атрибут `async`
Поддерживается всеми браузерами, кроме IE9-. Скрипт выполняется полностью асинхронно. То есть, при обнаружении ` ``` А в таком коде (с `defer`) первым сработает всегда `1.js`, а скрипт `2.js`, даже если загрузился раньше, будет его ждать. ```html ``` Атрибут `defer` используют в тех случаях, когда второй скрипт `2.js` зависит от первого `1.js`, к примеру -- использует что-то, описанное первым скриптом.
[warn header="Либо `async` либо `defer`"] Одновременно указывать `async` и `defer` не имеет смысла. В этом случае браузер использует только `async`. [/warn] [warn header="Атрибуты `async/defer` -- только для внешних скриптов"] Атрибуты `async/defer` работают только в том случае, если назначены на внешние скрипты, т.е. имеющие `src`. При попытке назначить их на обычные скрипты <script>...</script>, они будут проигнороированы. [/warn] Тот же пример с `async`: ```html

Начало страницы...

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

``` При запуске вы увидите, что вся страница отобразилась тут же, а реклама будет показана позже, когда загрузится скрипт. ### Разные типы скриптов На странице могут одновременно быть: Если на странице используются разные виды подключения скриптов, то: То есть, такие скрипты: ```html ``` Выполнятся строго в порядке `1.js` -> `3.js` -> `2.js` -> `4.js`. А вот такие: ```html ``` Выполнятся в неопределённом порядке, смотря какой загрузится первым. Единственно, атрибут `defer` гарантирует, что `4.js` запустится после `2.js`. **Большинство современных системы рекламы и счётчиков знают про эти атрибуты и используют их.** Конечно, система рекламы должна корректно обрабатывать асинхронную загрузку скрипта, но никаких принципиальных проблем с этим нет, в частности, системы от Google и Яндекс используют такой подход по умолчанию. ## Задачи Очень важно не только читать учебник, но делать что-то самостоятельно. Решите задачки, чтобы удостовериться, что вы все правильно поняли.