JavaScript для детей — страница 15 из 48

расположены по числовым индексам. Поэтому массивы отсортированы

по порядку, а объекты нет.

В дальнейших главах, когда мы больше узнаем о возможностях

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

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

4. Объекты 81

УПРА ЖНЕНИЯ

Попрактикуйтесь в использовании объектов, выполнив эти

упражнения.

#1. Подсчет очков

Представьте, что вы играете в какую-нибудь игру со своими друзь-

ями и вам нужно вести счет. Создайте для этого объект и назовите

его scores. Пусть ключами будут имена ваших друзей, а значе-

ниями — набранные ими очки (0 или больше). Счет игроков надо

будет увеличивать по мере того, как они зарабатывают новые

очки. Как вы будете менять счет игрока, хранящийся в объекте

scores?

#2. Вглубь объектов и массивов

Пускай у вас есть такой объект:

var myCrazyObject = {

My crazy

"name": "Нелепый объект",

object —

"some array": [7, 9, { purpose: "путаница", number: 123 }, 3.3],

мой нелепый

"random animal": "Банановая акула"

объект

};

Some array —

какой-то

массив

Как одной строкой JavaScript-кода извлечь из этого объекта

Purpose — цель

число 123? Проверьте свое решение, запустив его в консоли.

Random

animal —

случайное

животное

5

О С Н О В Ы H T M L

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

вались, хороша, когда нужно протестировать небольшой фрагмент кода,

но для создания более масштабных программ понадобится чуть более

гибкое и универсальное средство — вроде веб-страницы со встроенным

JavaScript-кодом. В этой главе мы как раз и научимся создавать неслож-

ные странички на языке HTML.

Гипертекстовый язык разметки HTML предназначен специально

для создания веб-страниц. Слово гипертекстовый означает, что фраг-

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

в документе на другие объекты. А язык разметки — это способ встра-

ивать в текст дополнительную информацию. Разметка указывает про-

граммам (таким как браузер), как отображать текст и что с ним делать.

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

редакторе — программе, предназначенной для работы с простым тек-

стом без форматирования, в отличие от текстовых процессоров вроде

Microsoft Word. Документы текстовых процессоров содержат формати-

рованный текст (с различными типами и размерами шрифтов, цветами

и т. п.), и устроены эти программы так, чтобы форматирование было

легко менять. Кроме того, многие текстовые процессоры позволяют

вставлять в текст картинки и другие графические

элементы.

/\_/\

Простой же текст является только текстом —

=( °w° )=

без цветов, стилей, размеров и т. д. Вставить в такой ) ( //

текст картинку не выйдет, разве только составить ее

из символов — скажем, как этого котика справа.

(__ __)//

83

Текстовые редакторы

Мы будем создавать HTML-документы в кросс-платформенном (совме-

стимом с Windows, Mac OS и Linux) редакторе Sublime Text. Скачать

Sublime Text можно бесплатно, однако спустя некоторое время вас

попросят приобрести лицензию. На случай, если вам такой вариант

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

Хотя в этой главе я буду ориентироваться на Sublime Text, работа с дру-

гими редакторами будет не сильно отличаться — благодаря относитель-

ной простоте текстовых редакторов как таковых.

• Gedit — кросс-платформенный текстовый редактор, часть

проекта GNOME (https://wiki.gnome.org/Apps/Gedit/).

• Для Microsoft Windows хорошей альтернативой будет

Notepad++ (http://notepad-plus-plus.org/).

• В Mac OS вы можете воспользоваться TextWrangler

(http://www.barebones.com/products/textwrangler/).

Чтобы установить Sublime Text, зайдите на сайт http://www.

sublimetext.com/. Инструкции по установке редактора отличаются

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

В случае каких-либо проблем загляните в раздел Support («Поддержка»)

на сайте приложения.

ПОДСВЕ ТК А СИНТАКСИС А

Sublime Text будет отображать ваши программы в цвете — это называется

подсветкой синтаксиса. Смысл в том, что программы легче читать, когда

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

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

var — оранжевым.

Sublime Text позволяет выбрать одну из множества схем подсветки.

В этой книге используется схема IDLE — вы можете включить ее, войдя в меню

Preferences

Color Scheme и выбрав там IDLE, чтобы у вас в редакторе

программы выглядели так же, как примеры кода в этой главе и далее.

Наш первый HTML-документ

Установив Sublime Text, запустите его и создайте новый файл, выбрав

File

New File. Затем выберите File

Save, чтобы сохранить новый,

Page —

пустой файл; назовите его page.html и сохраните на рабочий стол.

страница

Настало время писать HTML-код. Введите в файл page.html следую-

щий текст:

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

Привет, мир!

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

Сохраните обновленный файл page.html, выбрав File

Save. Теперь

посмотрим, на что это будет похоже в веб-браузере. Откройте Chrome

и, удерживая CTRL, нажмите O (в Mac OS вместо CTRL используйте кла-

вишу COMMAND). В появившемся окне выберите файл page.html, нахо-

дящийся на рабочем столе. То, что вы должны после этого увидеть, изо-

бражено на рис. 5.1.

Рис. 5.1. Ваша первая HTML-страница в Chrome

Вы только что создали свой первый HTML-документ! Вы просматри-

ваете его через браузер, однако находится он не в интернете — Chrome

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

нужно отображать текст.

Теги и элементы

HTML-документы состоят из элементов. Каждый элемент начинается

с открывающего тега и оканчивается закрывающим тегом. Например,

в нашем первом документе пока всего два элемента: h1 и p (а также эле-

мент meta, но его мы отдельно здесь рассматривать не будем. Он нужен,

чтобы в браузере отображался русский текст). Элемент h1 начинается

с открывающего тега

и заканчивается закрывающим тегом

,

а элемент p начинается с открывающего тега

и заканчивается

закрывающим тегом

. Все, что находится между открывающим

и закрывающим тегами, называют содержимым элемента.

Открывающие теги представляют собой название элемента в угло-

вых скобках: < и >. Закрывающие теги выглядят так же, но перед именем

элемента в них ставится наклонная черта (/).

5. Основы HTML 85

Элементы заголовков

У каждого элемента есть особое назначение и способ применения.

Например, элемент h1 означает «это заголовок верхнего уровня».

Содержимое, которое вы введете между открывающим и закрывающим

тегами

, браузер отобразит на отдельной строке крупным жирным

шрифтом.

Всего в HTML шесть уровней заголовков: h1, h2, h3, h4, h5 и h6.

Выглядят они так:

Заголовок первого уровня

Заголовок второго уровня

Заголовок третьего уровня

Заголовок четвертого уровня

Заголовок пятого уровня

Заголовок шестого уровня

На рис. 5.2 показано, как эти заголовки выглядят в браузере.

Рис. 5.2. Элементы заголовков разного уровня

Элемент p

Элемент p нужен для разделения текста на параграфы. Любой фрагмент

текста, который вы поместите между тегами

, будет отображен как

отдельный параграф, с отступами сверху и снизу. Давайте посмотрим,

что происходит, если элементов

несколько. Для этого добавьте новую

строку в документ page.html (прежние строки показаны серым цветом).

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

Привет, мир!

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

Добавим-ка еще параграф.

На рис. 5.3 показана страничка с нашим новым параграфом.

Рис. 5.3. Та же страничка с еще одним параграфом

Обратите внимание, что каждый параграф отображен с новой

строки, а между параграфами сделан отступ. Все это благодаря тегу

.

Пробелы в HTML и блочные элементы

А как наша страничка будет выглядеть без тегов? Давайте посмотрим:

Привет, мир!

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

Добавим-ка еще параграф.

На рис. 5.4 показана страничка без тегов.

Рис. 5.4. Та же страничка без HTML-тегов

Мало того что пропало форматирование, теперь весь текст отобра-

жается в одну строку! Дело в том, что в HTML все пробельные символы

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

любые символы, которые отображаются в браузере как пробелы или

5. Основы HTML 87

отступы, — например, это пробел, символ табуляции

и символ перевода строки (тот самый, который вы

вводите, нажимая ENTER или RETURN). Поэтому все

пустые строки, которые вы вставите между фрагмен-

тами текста в HTML-документе, сожмутся до одного

пробела.

Элементы p и h1 — блочные; это значит, что их

содержимое отображается отдельными блоками тек-

ста с новой строки и любое содержимое, идущее после