JavaScript для детей

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.