Этот текст

Веб-адрес

отобразится

в кавычках

как ссылка

Нажмите сюда

Открывающий тег

Закрывающий тег

Рис. 5.10. Базовый синтаксис для создания гиперссылки

Атрибут title

Также к ссылкам можно добавлять атрибут title — он задает текст,

который появляется при наведении курсора на ссылку. Например,

давайте изменим открывающий тег , чтобы он выглядел так:

title="xkcd: Комиксы для гиков!">Нажмите сюда

Теперь перезагрузите страничку. При наведении мышки на ссылку

должна появиться надпись: «xkcd: Комиксы для гиков!», как на рис. 5.11.

Рис. 5.11. Веб-страничка, содержащая ссылку на адрес

http://comicsia.ru/collections/xkcd/ с атрибутом title

ПОПР ОБУ ЙТЕ !

Создайте новый файл под названием links.html . Пусть его HTML-структура

Links — ссылки

будет такой же, как у странички page.html , однако название и заголовок

поменяйте на другие, а также добавьте три элемента p («параграф»).

В каждом параграфе создайте ссылку на один из своих любимых сайтов.

Убедитесь, что для всех элементов a заданы атрибуты href и title.

5. Основы HTML 93

Что мы узнали

В этой главе мы познакомились с основами HTML — языка для созда-

ния веб-страниц. Также мы создали простой HTML-документ со ссылкой

на другую страницу.

В следующей главе мы разберемся, как встраивать в нашу страничку

JavaScript-код. Это облегчит создание более объемных программ по мере

изучения новых возможностей JavaScript.

Эта книга посвящена JavaScript, а не HTML, поэтому я рассмотрел

лишь самые азы создания HTML-документов. Вот некоторые ресурсы,

где можно узнать о HTML больше:

На английском языке:

• Курс HTML и CSS от Codeacademy: http://www.codecademy.com/

tracks/web/

• Mozilla Webmaker: https://webmaker.org/

На русском языке:

• Введение в HTML от Mozilla Developer Network: https://developer.

mozilla.org/ru/docs/Web/Guide/HTML/Introduction

• https://htmlacademy.ru/

6

УС Л О В И Я И Ц И К Л Ы

Условные конструкции и циклы — одни из самых важных понятий

в JavaScript. Условная конструкция представляет собой команду: «если

что-то истинно (true), сделай это, иначе сделай то». Пример: выпол-

нив домашнее задание, вы можете съесть мороженое, но, если домашнее

задание не готово, мороженое вам не светит. А цикл — это инструкция:

«до тех пор, пока что-то истинно (true), продолжай делать это». Пример:

пока вы испытываете жажду, продолжайте пить воду.

Условные конструкции и циклы — понятия, лежащие в основе любой

мало-мальски серьезной программы. Их называют управляющими кон-

струкциями , поскольку они позволяют решать, какие части кода и когда

выполнять, а также насколько часто это нужно делать, исходя из задан-

ных вами условий.

Для начала давайте разберемся, как встраивать JavaScript в HTML-

файл. Это позволит писать программы более сложные, чем те, с кото-

рыми мы имели дело до сих пор.

Внедрение JavaScript-кода в HTML

Вот HTML-файл, который мы создали в пятой главе, с некоторыми

дополнениями — они показаны в цвете, тогда как прежний текст

набран серым (чтобы упростить этот пример, я убрал из него ссылку

на http://comicsia.ru/collections/xkcd/).

95

Привет, мир!

Моя первая веб-страничка.

Script —

скрипт,

var message = "Привет, мир!";

сценарий

console.log(message);

Message —

сообщение

Как видите, мы добавили новый элемент под названием script. Этот

элемент особенный: содержимое большинства элементов HTML отобража-

ется на страничке, однако то, что находится внутри тегов script, считается

JavaScript-кодом и передается для выполнения интерпретатору JavaScript.

Теперь рассмотрим код внутри элемента script:

var message = "Привет, мир!";

 console.log(message);

Выполнение JavaScript, встроенного в HTML, заметно

отличается от запуска кода в консоли. Введенный в консоли

код выполнится при первом же нажатии ENTER, после чего вы

увидите результат сработавшей команды. Однако код, встро-

енный в веб-страницу, выполняется сразу и целиком, от верх-

них строк к нижним, причем в консоль ничего автоматически

не выводится — если мы не попросим браузер об этом отдельно.

Для вывода в консоль можно воспользоваться командой

console.log — это поможет следить за ходом выполнения про-

граммы. Метод console.log принимает любое значение и печа-

тает (логирует) это значение в консоли. Например, загрузив в браузер наш

последний пример, вы увидите в консоли вот что (разумеется, если она открыта):