вая ссылка

значения атрибута href.

92 Часть I. Основы

Этот текст

Веб-адрес

отобразится

в кавычках

как ссылка

Нажмите сюда

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

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

Рис. 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 принимает любое значение и печа-

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

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

Привет, мир!

Вызов console.log(message) в строке  привел к появлению в кон-

соли строки "Привет, мир!".

Теперь, когда вы знаете, как с удобством писать длинные JavaScript-

программы, можно перейти к изучению условных конструкций.

96 Часть I. Основы

Условные конструкции

В JavaScript есть два вида условных конструкций — это if и if...

else. Оператор if выполняет фрагмент кода, если какое-то условие

If — если

истинно (true). Например: если вы хорошо себя вели, то получите кон-

If… else —

фетку. А оператор if... else выполняет один фрагмент кода, если усло-

если… иначе

вие дает true, и другой фрагмент в противном случае. Например: если

вы хорошо себя вели, получите конфетку, иначе вас не отпустят гулять.

Конструкция if

Cамая простая из управляющих конструкций JavaScript — это if. Она

используется, чтобы запускать код, если некое условие истинно (true).

Вернитесь к нашему HTML-файлу и замените содержимое элемента

script следующими строками:

 var name = "Николай";

 console.log("Привет, " + name);

 if (name.length > 6) {

 console.log("Ну и длиннющее же у вас имя!");

}

Сначала в строке  мы создали переменную name и присвоили

ей значение — строку "Николай". Затем, в строке , мы с помощью

console.log напечатали строку "Привет, Николай".

В строке  мы использовали конструкцию if ,чтобы проверить:

длина name больше, чем шесть символов? Если это так, в строке  мы

посредством console.log выводим: "Ну и длиннющее же у вас имя!".

Как показано на рис. 6.1, конструкция if состоит из двух частей:

условия и тела. Условие должно давать булево значение. А тело — одна

или несколько строк JavaScript-кода, которые будут выполнены, если

условие истинно (true).

Конструкция if проверяет, истинно ли условие

if (condition) {

console.log("Делаем что-то");

}

Код, который выполняется, если условие дает true,

называется телом if

Рис. 6.1. Общая структура конструкции if

6. Условия и циклы 97

После загрузки нашей HTML-странички со встроенным JavaScript-

кодом в консоли должно появиться:

Привет, Николай

Ну и длиннющее же у вас имя!

В имени Николай 7 букв, поэтому name.length вернет значение 7,