Skip to content

Latest commit

 

History

History
143 lines (98 loc) · 9.08 KB

article.md

File metadata and controls

143 lines (98 loc) · 9.08 KB

Привет, мир!

В этой части учебника мы изучаем собственно JavaScript, сам язык.

Но нам нужна рабочая среда для запуска наших скриптов, и, поскольку это онлайн-книга, то браузер будет хорошим выбором. В этой главе мы сократим количество специфичных для браузера команд (например, alert) до минимума, чтобы вы не тратили на них время, если планируете сосредоточиться на другой среде (например, Node.js). А на использовании JavaScript в браузере мы сосредоточимся в следующей части учебника.

Итак, сначала давайте посмотрим, как выполнить скрипт на странице. Для серверных сред (например, Node.js), вы можете выполнить скрипт с помощью команды типа "node my.js". Для браузера всё немного иначе.

Тег "script"

Программы на JavaScript могут быть вставлены в любое место HTML-документа с помощью тега <script>.

<<<<<<< HEAD Для примера:

JavaScript programs can be inserted almost anywhere into an HTML document using the <script> tag.

For instance:

540d753e90789205fc6e75c502f68382c87dea9b

<!DOCTYPE HTML>
<html>

<body>

  <p>Перед скриптом...</p>

*!*
  <script>
    alert( 'Привет, мир!' );
  </script>
*/!*

  <p>...После скрипта.</p>

</body>

</html>
Вы можете запустить пример, нажав на кнопку "Play" в правом верхнем углу блока с кодом выше.

Тег <script> содержит JavaScript-код, который автоматически выполнится, когда браузер его обработает.

Современная разметка

Тег <script> имеет несколько атрибутов, которые редко используются, но всё ещё могут встретиться в старом коде:

Атрибут type: <script type=...> : Старый стандарт HTML, HTML4, требовал наличия этого атрибута в теге <script>. Обычно он имел значение type="text/javascript". На текущий момент этого больше не требуется. Более того, в современном стандарте HTML смысл этого атрибута полностью изменился. Теперь он может использоваться для JavaScript-модулей. Но это тема не для начального уровня, и о ней мы поговорим в другой части учебника.

<<<<<<< HEAD Атрибут language: <script language=...> : Этот атрибут должен был задавать язык, на котором написан скрипт. Но так как JavaScript является языком по умолчанию, в этом атрибуте уже нет необходимости.

The type attribute: <script type=...> : The old HTML standard, HTML4, required a script to have a type. Usually it was type="text/javascript". It's not required anymore. Also, the modern HTML standard totally changed the meaning of this attribute. Now, it can be used for JavaScript modules. But that's an advanced topic, we'll talk about modules in another part of the tutorial.

540d753e90789205fc6e75c502f68382c87dea9b

Обёртывание скрипта в HTML-комментарии. : В очень древних книгах и руководствах вы сможете найти комментарии внутри тега <script>, например, такие:

```html no-beautify
<script type="text/javascript"><!--
    ...
//--></script>
```

Этот комментарий скрывал код JavaScript в старых браузерах, которые не знали, как обрабатывать тег `<script>`. Поскольку все браузеры, выпущенные за последние 15 лет, не содержат данной проблемы, такие комментарии уже не нужны. Если они есть, то это признак, что перед нами очень древний код.

Внешние скрипты

Если у вас много JavaScript-кода, вы можете поместить его в отдельный файл.

Файл скрипта можно подключить к HTML с помощью атрибута src:

<script src="/path/to/script.js"></script>

<<<<<<< HEAD Здесь /path/to/script.js - это абсолютный путь от корневой папки до необходимого файла. Корневой папкой может быть корень диска или корень сайта, в зависимости от условий работы сайта. Также можно указать относительный путь от текущей страницы. Например, src="script.js" или src="./script.js" будет означать, что файл "script.js" находится в текущей папке.

Here, /path/to/script.js is an absolute path to the script from the site root. One can also provide a relative path from the current page. For instance, src="script.js", just like src="./script.js", would mean a file "script.js" in the current folder.

540d753e90789205fc6e75c502f68382c87dea9b

Можно указать и полный URL-адрес. Например:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

Для подключения нескольких скриптов используйте несколько тегов:

<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
…
Как правило, только простейшие скрипты помещаются в HTML. Более сложные выделяются в отдельные файлы.

Польза отдельных файлов в том, что браузер загрузит скрипт отдельно и сможет хранить его в [кеше](https://en.wikipedia.org/wiki/Web_cache).

Другие страницы, которые подключают тот же скрипт, смогут брать его из кеша вместо повторной загрузки из сети. И таким образом файл будет загружаться с сервера только один раз.

Это сокращает расход трафика и ускоряет загрузку страниц.

````warn header="Если атрибут src установлен, содержимое тега `script` будет игнорироваться." В одном теге `<script>` нельзя использовать одновременно атрибут `src` и код внутри.

Нижеприведённый пример не работает:

<script *!*src*/!*="file.js">
  alert(1); // содержимое игнорируется, так как есть атрибут src
</script>

Нужно выбрать: либо внешний скрипт <script src="…">, либо обычный код внутри тега <script>.

Вышеприведённый пример можно разделить на два скрипта:

<script src="file.js"></script>
<script>
  alert(1);
</script>

## Итого

- Для добавления кода JavaScript на страницу используется тег `<script>`
- Атрибуты `type` и `language` необязательны.
- Скрипт во внешнем файле можно вставить с помощью `<script src="path/to/script.js"></script>`.

Нам ещё многое предстоит изучить про браузерные скрипты и их взаимодействие со страницей. Но, как уже было сказано, эта часть учебника посвящена именно языку JavaScript, поэтому здесь мы постараемся не отвлекаться на детали реализации в браузере. Мы воспользуемся браузером для запуска JavaScript, это удобно для онлайн-демонстраций, но это только одна из платформ, на которых работает этот язык.