JavaScript на веб-странице

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

Веб-страница пишется на HTML. HTML — не язык программирования: он описывает, что есть на странице, например заголовки, абзацы и кнопки. Каждая такая часть — это элемент, который записывается с помощью тегов:

<h1>Погода</h1>
<p>Сегодня солнечно.</p>

<h1> — открывающий тег, а </h1> — закрывающий (со слешем); между ними находится содержимое элемента. h1 — главный заголовок, p — абзац. Элементы могут содержать другие элементы. Вся страница находится в элементе html, у которого две части: head с информацией о странице, например с её названием, и body со всем, что вы видите на странице. Чтобы страница отображалась правильно, ей нужны также строки <!DOCTYPE html> и <meta charset="utf-8">; пока можете о них не беспокоиться.

В этом уроке в редакторе два файла, и между ними переключаются вкладками над редактором: script.js — ваша программа на JavaScript, а index.html — страница. В окне просмотра показана страница, а под ней находится консоль, где видно, что выводит console.log(), и сообщения об ошибках.

Страница загружает программу с помощью элемента script:

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

src="script.js" — это атрибут: дополнительная информация, которая записывается в открывающем теге в виде имя="значение". Атрибут src (от англ. source — «источник») указывает, какой файл загружать. Между тегами ничего нет, но закрывающий тег </script> всё равно необходим.

Элемент script ставьте в конец body, прямо перед </body>. Почему именно туда? Браузер читает страницу сверху вниз и запускает скрипт, как только до него доходит. Скрипт в начале страницы запустился бы раньше, чем браузер прочитал элементы ниже, и не смог бы их найти.

Скрипт запускается один раз — когда страница загружается. Каждый раз, когда вы нажимаете «Запустить», страница загружается заново и скрипт запускается снова.

В script.js уже есть короткая программа: она выводит сообщение в консоль и меняет главный заголовок. Как она работает, вы узнаете в следующем упражнении. Пока ничего не происходит, потому что страница ещё не загружает скрипт.