В этой части учебника мы изучаем сам язык программирования JavaScript. Но нам нужна рабочая среда для запуска наших скриптов, и, поскольку это онлайн-книга, то браузер будет хорошим выбором. В этой главе мы сократим количество специфичных для браузера команд (например, alert ) до минимума, чтобы вы не тратили на них время, если планируете сосредоточиться на другой среде (например, Node.js). А на использовании JavaScript в браузере мы сосредоточимся в следующей части учебника. Итак, сначала давайте посмотрим, как выполнить скрипт на странице. Для серверных сред (например, Node.js), вы можете выполнить скрипт с помощью команды типа node my.js . Для браузера всё немного иначе.
Тег
Программы на JavaScript могут быть вставлены в любое место HTML-документа с помощью тега
Вы можете запустить пример, нажав на кнопку Попробуйте сами внизу блока с кодом. Тег содержит JavaScript-код, который автоматически выполнится, когда браузер его обработает.
Современная разметка
Тег
Этот комментарий скрывал код JavaScript в старых браузерах, которые не знали, как обрабатывать тег
Внешние скрипты
Если у вас много JavaScript-кода, вы можете поместить его в отдельный файл. Файл скрипта можно подключить к HTML с помощью атрибута src:
Здесь /path/to/script.js – это абсолютный путь до скрипта от корня сайта. Также можно указать относительный путь от текущей страницы. Например, src='script.js' будет означать, что файл 'script.js' находится в текущей папке. Можно указать и полный URL-адрес. Например:
ℹ На заметку: Как правило, только простейшие скрипты помещаются в HTML. Более сложные выделяются в отдельные файлы. Польза от отдельных файлов в том, что браузер загрузит скрипт отдельно и сможет хранить его в кеше. Другие страницы, которые подключают тот же скрипт, смогут брать его из кеша вместо повторной загрузки из сети. И таким образом файл будет загружаться с сервера только один раз. Это сокращает расход трафика и ускоряет загрузку страниц.
⚠ Если атрибут src установлен, содержимое тега будет игнорироваться. В одном теге нельзя использовать одновременно атрибут src и код внутри. Нижеприведённый пример не работает:
Нужно выбрать: либо внешний скрипт
Резюме
Для добавления кода JavaScript на страницу используется тег
Атрибуты type и language необязательны.
Скрипт во внешнем файле можно вставить с помощью .
Вам ещё многое предстоит изучить про браузерные скрипты и их взаимодействие со страницей. Но, как уже было сказано, эта часть учебника посвящена именно языку JavaScript, поэтому здесь мы постараемся не отвлекаться на детали реализации в браузере. Мы воспользуемся браузером для запуска JavaScript, это удобно для онлайн-демонстраций, но это только одна из платформ, на которых работает этот язык.
✅ Задачи
1. Вызвать alert
Создайте страницу, которая отобразит сообщение «Я JavaScript!».
Выполните это задание в песочнице, либо у себя на компьютере, где – неважно, главное – проверьте, что она работает.
2. Покажите сообщение с помощью внешнего скрипта
Возьмите решение предыдущей задачи Вызвать alert, и измените его. Извлеките содержимое скрипта во внешний файл alert.js , лежащий в той же папке.
Откройте страницу, убедитесь, что оповещение работает.
Создадим первую программу на javascript. Для написания и тестирования программ на JavaScript нам потребуются две вещи: текстовый редактор и веб-браузер.
В качестве текстового редактора можно взять любой, который нравится - Atom, Sublime Text, Visual Studio Code, Notepad++ и другие. В данном руководстве я буду ориентироваться на текстовый редактор Visual Studio Code, поскольку он является наиболее популярным.
В качестве браузера также можно взять последние версии любого предпочтительного веб-браузера. В настоящем руководстве я буду преимущественно ориентироваться на Google Chrome.
Для начала определим для нашего приложения какой-нибудь каталог. Например, создадим на диске C папку app . В этой папке создадим файл под названием index.html . То есть данный файл будет представлять веб-страницу с кодом HTML.
Откроем этот файл в текстовом редакторе и определим в файле следующий код:
Здесь мы определяем стандартные элементы html. В элементе head определяется кодировка utf-8 и заголовок (элемент title ). В элементе body определяется тело веб-страницы, которое в данном случае состоит только из одного элемента
Подключение кода javascript на html-страницу осуществляется с помощью тега . Данный тег следует размещать либо в заголовке (между тегами
и ), либо в теле веб-странице (между тегами и ). Нередко подключение скриптов происходит перед закрывающим тегом
для оптимизации загрузки веб-страницы.
Раньше надо было в теге указывать тип скрипта, так как данный тег может использоваться не только для подключения инструкций javascript, но и для других целей. Так, даже сейчас вы можете встретить на некоторых веб-страницах такое определение элемента script:
Но в настоящее время предпочтительнее опускать атрибут type, так как браузеры по умолчанию считают, что элемент script содержит инструкции javascript.
Используемый нами код javascript содержит одно выражение:
document.write("
Первая программа на JavaScript
");
Код javascript может содержать множество инструкций и каждая инструкция завершается точкой с запятой. Наша инструкция вызывает метод document.write() , который выводит на веб-страницу некоторое содержимое, в данном случае это заголовок
Первая программа на JavaScript
.
Вид файла в текстовом редакторе Visual Studio Code:
Теперь, когда веб-страница готова, откроем ее в веб-браузере:
И веб-браузер отобразит заголовок, который мы передали в метод document.write() в коде javascript.
Осваивайте профессию, начните зарабатывать, а платите через год!
Курсы Python Акция! Бесплатно!
Станьте хакером на Python за 3 дня
Веб-вёрстка. CSS, HTML и JavaScript
Станьте веб-разработчиком с нуля
В этой главе мы займемся размещением сценариев в HTML-документе, чтобы иметь возможность использовать их для оперативной модификации HTML-документа. Для вставки JavaScript-кoдa в НТМL-страницу обычно используют элемент .
Первая программа
Чтобы ваша первая пpoгpaммa (или сценарий) JavaScript запустилась, ее нужно внедрить в НТМL-документ. Сценарии внедряются в HTML-документ различными стандартными способами:
поместить код непосредственно в атрибут события HTML-элемента;
поместить код между открывающим и закрывающим тегами ;
поместить все ваши скрипты во внешний файл (с расширением .js), а затем связать его с документом HTML.
JavaScript в элементе script
Самый простой способ внедрения JavaScript в HTML-документ – использование тега . Теги часто помещают в элемент , и ранее этот способ считался чуть ли не обязательным. Однако в наши дни теги используются как в элементе , так и в теле веб-страниц.
Таким образом, на одной веб-странице могут располагаться сразу несколько сценариев. В какой последовательности браузер будет выполнять эти сценарии? Как правило, выполнение сценариев браузерами происходит по мере их загрузки. Браузер читает HTML-документ сверху вниз и, когда он встречает тег , рассматривает текст программы как сценарий и выполняет его. Остальной контент страницы не загружается и не отображается, пока не будет выполнен весь код в элементе .
Обратите внимание: мы указали атрибут language тега , указывающий язык программирования, на котором написан сценарий. Значение атрибута language по умолчанию – JavaScript, поэтому, если вы используете скрипты на языке JavaScript, то вы можете не указывать атрибут language .
JavaScript в атрибутах событий HTML-элементов
Вышеприведенный сценарий был выполнен при открытии страницы и вывел строку: «Привет, мир!». Однако не всегда нужно, чтобы выполнение сценария начиналось сразу при открытии страницы. Чаще всего требуется, чтобы программа запускалась при определенном событии, например при нажатии какой-то кнопки.
В следующем примере функция JavaScript помещается в раздел HTML-документа. Вот пример HTML-элемента с атрибутом события, обеспечивающим реакцию на щелчки мышью. При нажатии кнопки генерируется событие onclick.
Внешний JavaScript
Если JavaScript-кода много – его выносят в отдельный файл, который, как правило, имеет расширение .js .
Чтобы включить в HTML-документ JavaScript-кoд из внешнего файла, нужно использовать атрибут src (source) тега . Его значением должен быть URL-aдpec файла, в котором содержится JS-код:
В этом примере указан абсолютный путь к файлу с именем script.js, содержащему скрипт (из корня сайта). Сам файл должен содержать только JavaScript-кoд, который иначе располагался бы между тегами .
По аналогии с элементом атрибуту src элемента можно назначить полный URL-aдpec, не относящийся к домену текущей НТМL-страницы:
На заметку: Подробнее о путях файлов читайте в разделе «Абсолютные и относительные ссылки».
Чтобы подключить несколько скриптов, используйте несколько тегов:
Примечание: Элемент , хотя внешний сценарий выполняется, встроенный код игнорируется.
Независимо от того, как JS-код включается в НТМL-документ, элементы интерпретируются браузером в том порядке, в котором они расположены в HTML-документе. Сначала интерпретируется код первого элемента , затем браузер приступает ко второму элементу и т. д.
Внешние скрипты практичны, когда один и тот же код используется во многих разных веб-страницах. Браузер скачает js-файл один раз и в дальнейшем будет брать его из своего кеша, благодаря чему один и тот же скрипт, содержащий, к примеру, библиотеку функций, может использоваться на разных страницах без полной перезагрузки с сервера. Кроме этого, благодаря внешним скриптам, упрощается сопровождение кода, поскольку вносить изменения или исправлять ошибки приходится только в одном месте.
Примечание: Во внешние файлы копируется только JavaScript-код без указания открывающего и закрывающего тегов .
Расположение тегов
Вы уже знаете, что браузер читает HTML-документ сверху вниз и, начинает отображать страницу, показывая часть документа до тега . Встретив тег , переключается в JavaScript-режим и выполняет сценарий. Закончив выполнение, возвращается обратно в HTML-режим и отображает оставшуюся часть документа.
Это наглядно демонстрирует следующий пример. Метод alert() выводит на экран модальное окно с сообщением и приостанавливает выполнение скрипта, пока пользователь не нажмёт «ОК»:
