Эта часть руководства посвящена ядру JavaScript, самому языку.
Но для запуска наших сценариев нам нужна рабочая среда, и, поскольку эта книга доступна в Интернете, браузер — хороший выбор. Мы сведем к минимуму количество специфичных для браузера команд (например, alert ), чтобы вы не тратили на них время, если планируете сосредоточиться на другой среде (например, Node.js). В следующей части руководства мы сосредоточимся на JavaScript в браузере.
Итак, сначала давайте посмотрим, как прикрепить скрипт к веб-странице. Для серверных сред (например, Node.js) вы можете выполнить сценарий с помощью такой команды, как "node my.js" .
Программы JavaScript можно вставлять практически в любое место HTML-документа с помощью тега <script> .
Например:
<!DOCTYPE HTML>
<html>
<тело>
<p>Перед сценарием...</p>
<скрипт>
alert('Привет, мир!');
</скрипт>
<p>...После сценария.</p>
</тело>
</html>Вы можете запустить пример, нажав кнопку «Воспроизвести» в правом верхнем углу поля выше.
Тег <script> содержит код JavaScript, который автоматически выполняется, когда браузер обрабатывает тег.
Тег <script> имеет несколько атрибутов, которые в настоящее время используются редко, но их все еще можно найти в старом коде:
Атрибут type : <script type =…>
Старый стандарт HTML, HTML4, требовал, чтобы сценарий имел type . Обычно это было type="text/javascript" . Это больше не требуется. Кроме того, современный стандарт HTML полностью изменил значение этого атрибута. Теперь его можно использовать для модулей JavaScript. Но это сложная тема, о модулях мы поговорим в другой части руководства.
Атрибут language : <script language =…>
Этот атрибут предназначен для отображения языка сценария. Этот атрибут больше не имеет смысла, поскольку JavaScript является языком по умолчанию. Нет необходимости использовать его.
Комментарии до и после скриптов.
В действительно древних книгах и руководствах вы можете найти комментарии внутри тегов <script> , например:
<script type="text/javascript"><!--
...
//--></script> Этот трюк не используется в современном JavaScript. Эти комментарии скрывают код JavaScript от старых браузеров, которые не знали, как обрабатывать тег <script> . Поскольку в браузерах, выпущенных за последние 15 лет, этой проблемы нет, такого рода комментарии могут помочь вам определить действительно старый код.
Если у нас много кода JavaScript, мы можем поместить его в отдельный файл.
Файлы сценариев прикрепляются к HTML с помощью атрибута src :
<script src="/path/to/script.js"></script>
Здесь /path/to/script.js — это абсолютный путь к скрипту от корня сайта. Также можно указать относительный путь от текущей страницы. Например, src="script.js" , как и src="./script.js" , будет означать файл "script.js" в текущей папке.
Мы также можем предоставить полный 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 помещаются только самые простые скрипты. Более сложные находятся в отдельных файлах.
Преимущество отдельного файла в том, что браузер загрузит его и сохранит в своем кеше.
Другие страницы, ссылающиеся на тот же сценарий, будут брать его из кеша, а не загружать, поэтому файл фактически загружается только один раз.
Это снижает трафик и ускоряет работу страниц.
Если установлен src , содержимое сценария игнорируется.
Один тег <script> не может содержать одновременно атрибут src и код.
Это не сработает:
<script src="file.js"> предупреждение(1); // содержимое игнорируется, поскольку установлен src </скрипт>
Мы должны выбрать либо внешний <script src="…"> либо обычный <script> с кодом.
Приведенный выше пример можно разделить на два сценария для работы:
<script src="file.js"></script> <скрипт> предупреждение(1); </скрипт>
Мы можем использовать тег <script> для добавления кода JavaScript на страницу.
Атрибуты type и language не являются обязательными.
Сценарий во внешнем файле можно вставить с помощью <script src="path/to/script.js"></script> .
Можно узнать гораздо больше о скриптах браузера и их взаимодействии с веб-страницей. Но давайте иметь в виду, что эта часть руководства посвящена языку JavaScript, поэтому нам не следует отвлекаться на его реализации для конкретных браузеров. Мы будем использовать браузер как способ запуска JavaScript, который очень удобен для онлайн-чтения, но только один из многих.
важность: 5
Создайте страницу, на которой будет отображаться сообщение «Я JavaScript!».
Делайте это в песочнице или на жестком диске, не имеет значения, просто убедитесь, что все работает.
Демо в новом окне
<!DOCTYPE html>
<html>
<тело>
<скрипт>
alert("Я JavaScript!");
</скрипт>
</тело>
</html>Откройте решение в песочнице.
важность: 5
Возьмите решение предыдущей задачи. Показать оповещение. Измените его, извлекая содержимое скрипта во внешний файл alert.js , расположенный в той же папке.
Откройте страницу, убедитесь, что оповещение работает.
HTML-код:
<!DOCTYPE html> <html> <тело> <script src="alert.js"></script> </тело> </html>
Для файла alert.js в той же папке:
alert("Я JavaScript!");