Майк МакГрат - JavaScript для начинающих

чтобы браузер мог
отобразить веб-страницу до выполнения сценария.
Также в HTML-документ можно добавить JavaScript
код, расположенный во внешнем файле с расширением.js. Это позволяет нескольким различным
веб-страницам вызывать один и тот же сценарий.
Подключение внешнего сценария выполняется с помощью атрибута src тега следующим образом:


Этот код также можно поместить в раздел заголовка
или тела документа, и браузер будет рассматривать
сценарий так, как если бы он был написан непосредственно в этой позиции в HTML-документе.
Если атрибуту src тега присваивается только
имя файла внешнего сценария, необходимо, чтобы
файл сценария находился в одной папке (каталоге)

Не включайте теги
и
во внешний файл
JavaScript. В них
необходимо добавлять только код
сценария.

Введение в JavaScript

с HTML-документом. Если сценарий находится
в другом месте, вы можете указать относительный
путь к файлу, например:


Внешние файлы
сценариев упрощают сопровождение кода. Почти все примеры,
представленные
в этой книге, автономные, поэтому
код сценария можно вставлять между тегами в HTMLдокументе.

Если сценарий расположен в другом месте сайта,
можно указать абсолютный путь к файлу, например:



Кроме того, можно указать содержимое, которое будет отображаться на веб-странице только в том случае, если пользователь в своем веб-браузере отключил JavaScript, включив в HTML-документ элемент
, например:
JavaScript is Not Enabled!

12

Вывод JavaScript
В JavaScript существует несколько вариантов отображения данных. Например:
document.getElementById( 'message' ).innerText = 'Hello World!'

Обратите внимание на использование оператора.
(точка) в описании
свойств или методов объекта с использованием «точечной нотации».

Атрибут id определяет уникальный идентификатор
HTML-элемента. Свойство innerText определяет содержимое HTML-документа.

Также для отображения данных можно использовать
всплывающее окно сообщений.
window.alert( 'Hello World!' )

Метод alert( ) выводит на экран диалоговое окно с сообщением, указанным в коде в круглых скобках ().

В процессе изучения языка JavaScript предпочтительнее выводить данные в консоль браузера, например:
console.log( 'Hello World!' )

Метод log( ) объекта console выводит в окно консоли содержимое, указанное в круглых скобках ( ).
Фактически в любом браузере есть специальная панель веб-разработчика, доступ к которой осуществляется нажатием клавиши F12. Поскольку Google
Chrome — самый популярный браузер на момент
написания книги, я использовал его для демонстрации JavaScript, а консоль этого браузера используется для отображения данных.

1

z
2

z
3

Создайте HTML-документ, содержащий пустой абзац и программный код для отображения данных тремя способами.


document.getElementById( 'message' ).innerText =
'Hello World!'
window.alert( 'Hello World!' )
console.log( 'Hello World!' )


Сохраните HTML-документ, затем откройте
его в браузере, чтобы проанализировать полученный результат, как показано на рисунке
ниже.
Нажмите клавишу F12 или воспользуйтесь
меню браузера, чтобы открыть Developers
Tools (Инструменты разработчика).

При возникновении ошибок в коде
консоль предоставляет полезные сообщения,
что очень удобно
для отладки программы.

output.html

13

z

Существует также метод document.
write( ), который перезаписывает весь
заголовок и тело
веб-страницы. Стоит отметить, что
его использование
считается плохой
практикой.

Введение в JavaScript

z
4

Убедитесь, что
в консоли отображается содержимое, а также имя
HTML-документа и номер строки, где есть соответствующий
JavaScript-код.

z

14

5

Выберите вкладку Console (Консоль), чтобы увидеть содержимое, записанное в консоли.

Нажмите кнопку
Show/Hide (Показать/
Скрыть), чтобы скрыть или показать боковую панель. Нажмите кнопку
Customize
(Настроить), чтобы выбрать способ закрепления консоли в окне
браузера. Затем нажмите кнопку
Clear
(Очистить), чтобы очистить все содержимое
консоли.

Структура кода
JavaScript-код состоит из ряда инструкций, называемых «операторами». Обычно все инструкции на странице выполняются сверху вниз.
Более подробную информацию
о ключевых словах вы можете найти на стр. 17–18,
а об операторах,
значениях и выражениях вы узнаете
позже.

Каждая инструкция может содержать любой из следующих элементов:

z Ключевые слова — слова, имеющие особое
значение в языке JavaScript.

z Операторы — --">