В этой части учебника мы изучаем собственно JavaScript, сам язык. Давайте посмотрим, как выполнить скрипт на странице.
Тег “SCRIPT”
Программы на JavaScript могут быть вставлены в любое место HTML-документа с помощью тега <script>.
Для примера:
<!DOCTYPE HTML>
<html>
<body>
<p>Перед скриптом...</p>
<script>
alert( 'Привет, мир!' );
</script>
<p>...После скрипта.</p>
</body>
</html>Тег <script> содержит JavaScript-код, который автоматически выполнится, когда браузер его обработает.
Внешние скрипты
Если у вас много JavaScript-кода, вы можете поместить его в отдельный файл.
Файл скрипта можно подключить к HTML с помощью атрибута src:
<script src="/path/to/script.js"></script>Здесь /path/to/script.js – это абсолютный путь до скрипта от корня сайта. Также можно указать относительный путь от текущей страницы. Например, src="script.js" будет означать, что файл "script.js" находится в текущей папке.
Можно указать и полный URL-адрес. Например:
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>Для подключения нескольких скриптов используйте несколько тегов:
<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
…На заметку: Как правило, только простейшие скрипты помещаются в HTML. Более сложные выделяются в отдельные файлы. Польза от отдельных файлов в том, что браузер загрузит скрипт отдельно и сможет хранить его в кеше. Другие страницы, которые подключают тот же скрипт, смогут брать его из кеша вместо повторной загрузки из сети. И таким образом файл будет загружаться с сервера только один раз. Это сокращает расход трафика и ускоряет загрузку страниц.
Если атрибут src установлен, содержимое тега script будет игнорироваться.
В одном теге <script> нельзя использовать одновременно атрибут src и код внутри.
Нижеприведённый пример не работает:
<script src="file.js">
alert(1); // содержимое игнорируется, так как есть атрибут src
</script>Нужно выбрать: либо внешний скрипт <script src="…">, либо обычный код внутри тега <script>.
Вышеприведённый пример можно разделить на два скрипта:
<script src="file.js"></script>
<script>
alert(1);
</script>