Дэвид Уитни
УЧИМСЯ *
СОЗДАВАТЬ САЙТЫ,
ПРИЛОЖЕНИЯ и ИГРЫ
Программирование для детей
Дэвид Уитни
УЧИМСЯ
СОЗДАВАТЬ САЙТЫ,
ПРИЛОЖЕНИЯ и ИГРЫ
* * / ' •' /’ •
Программирование Для детей
[^ППТ№'
* * '
* * Санкт-Петербург • Москва • Екатеринбург «Воронеж
Нижний Новгород • Ростов-на-Дону
Самара «* Минск
2018
СОДЕРЖАНИЕ
•  * •
»  ’ *
-	’	.	• I •	•»	,
•	’	*	.	♦ ’	’	•	к
’	’	'	.•?	• г . .
о книге..................................... „.4-5
, V» *.	.	*.	’*	<	‘	.
к	»•. t	•	♦	* к
ВВЕДЕНИЕ. РАЗРАБОТКА КОДА.........4.....;.... €-11
к’	'	• •• •
•	• > ’.	.	• V
КАК РАБОТАТЬ С КНИГОЙ..................  .......12
"’  •	'	’	• ‘	 V
БАЗОВЫЕ НАВЫКИ...............................13-15
♦ . - ’ 1 •
• • - - ,
- ЗАДАНИЕ 1. Делаем &e£-ctnpanuuty...........16-57
ЗАДАНИЕ 2. Защищаем страницу паролем....53--93
ЗАДАНИЕ 3. Создаем приложение............... 54—133
ЗАДАНИЕ 4-. Планируем маршрут............ 134—151
. ‘ • , • * •	•
ЗАДАНИЕ 5J Создаём игру......................152-187
ЗАДАНИЕ 6. ДеугЗеМ ^еХ-сЭйт ...................188-203
ЧТО ДАЛЬШЕ?..................................204-205
*
Алра&итпнЫи указатель........................206-207
О КНИГЕ
Привет! Мы Young Rewired State — международное сообще-
ство разработчиков-тинейджеров. Эта книга поможет тебе стать
мастером программирования. Ты не только научишься писать
код, но и увидишь, какое это увлекательное занятие. Это один
из важнейших навыков, который ты можешь приобрести,
и сейчас для этого самое лучшее время!
Чему тебя научит эта книга?
Эта книга учит программированию
на трех основных языках: HTML, CSS
и JavaScript Компьютер можно заставить
сделать практически что угодно, но
сначала кто-то должен написать
программу его действий. Причем на
понятном компьютеру языке. Именно
этому тебе предстоит научиться.
HTML, CSS и JavaScript — три
важнейших языка программирования
в мире. Именно их используют при
создании сайтов, веб-приложений
и игр. Наша книга научит тебя
писать программы на этих языках.
Ты получишь навыки создания кода,
которые пригодятся для всех видов
программирования.
. Young
. UsI Rewired
State_
Узнай больше о Young Rewired State:
www.yrs.io;www.getcodingkids.com
Помощь
и поддержка здесь:
www.getcodingkids.com
Как это работает?
Книга состоит из 6 разделов. Каждый
раздел содержит задание, обучающее
программированию на HTML, CSS
и JavaScript Ты будешь решать
различные задачи, чтобы помочь
профессору Бейрстоуну, доктору Дэй
и Эрнесту сохранить ценный алмаз.
Что тебе потребуется?
Всего лишь компьютер (PC или Мас)
с подключением к Интернету.
Надеемся, эта книга тебе понравится и вдохновит на написание программ!
Пиши нам: ©youngrewired #GetCoding
Также ищи нас на YouTube, в Facebook и Instagram
5
ВВЕДЕНИЕ:
РАЗРАБОТКА КОДА
1
Компьютеры стали важной частью нашей жизтни.
Они окружают нас повсюду. Наверняка йы уже
пользовались ноутбуком, ПК или планшетом.
Но знаете ли вы, что смартфон —
это тоже компьютер? А компьютеры
внутри банкоматов, игровых приставок и автомобилей?
Они выглядят и работают по-раЗному, но все Они для '
выполнения поставленных задач должны следовать
набору инструкций, называемых программами.


1
Идеальное программирование
Компьютером называют электронное устройство,
умеющее обрабатывать информацию. Он может
занять целую комнату или поместиться внутри
маленького гаджета и состоит из аппаратного
(то, что можно потрогать руками) и программ-
ного обеспечения. Программы нужны, потому
что сам компьютер не умеет думать. Он следует
подробной серии команд внутри программы.
Программы пишутся на понятных компьютерам
языках. Процесс их написания называется про-
граммированием. Можно написать программу
для решения любой задачи. Вот программы,
которыми ты, возможно, уже пользовался:
* Facebook
> Google
* iTunes
ф Microsoft Word
* Minecraft
* YouTube
►
►
Заходя к другу в социальной сети Facebook,
отправляя сообщение, разогревая еду в
микроволновке или проигрывая DVD, ты полЬ’
зуешь£я компьютерными программами. Можно
и самостоятельно написать программу и за-
ставить компьютер сделать что угодно. Те, кто
это делает, называются программистами. Они
пишут код на разных языках, в зависимости
от типа программы, которую нужно создать.
Языки программирования
Существует множество языков программиро-
вания. Компьютер может понять более одно-
го язмка за раз, поэтому программы порой
пишутся на несколькик языках. Программисту
нужно выбрать тот, который лучше etero под-
ходит для решения прставленной задачи, так
как каждый язык программирования оптима-
лен для реализации одних вещей и не оче^ь
хорошо подходит для других? Вот список часто
используемых языков.
> С и C++ применяются для создания
операционных систем.
* С#, Java, PHP и Ruby применяются
для создания веб-сайтов.
«На С#, Java и Objective-C пишут
приложения для ПК и смартфонов.
V С помощью SQL извлекают сведения
из баз данных.
Возможно, в школе ты уже писал код на
таких языках, как Scratch или Python.- Язык
Scratch состоит из цветных блоков кода, их
наложением друг на друга и создается про-
грамма. Он подходит для создания небольших
игр и анимации. Язык Python — текстовый,
то есть все инструкции для компьютера нужно
печатать как фрагмент кода. На нем написаны
такие приложения, как, например, Instagram.
Эта книга научит тебя писать код на трех
языках программирования: HTML, CSS и
JavaScript. С их помощью ты будешь создавать
программы, которые запускаются в Интерне-
те. Ты напишешь веб-сайт, приложение, игру
и много других программ, которые будут рабо-
тать в браузере.
Приложение (application) —
тип компьютерной программы.
» Обычно предназначены для
решения конкретных задач, на-
пример обработки текстов или отправки
сообщений электронной почты.

I НАПИСАНИЕ КОДА И ВЕБ
Гигантская сеть соединяет множество компьютеров по всему миру. Она
называется Интернетом и позволяет за секунды получать информацию
и делиться ею. Ты пользуешься Интернетом для посещения сайтов, про-
смотра видео, отправки сообщений, прослушивания музыки или для игр.
Но знаешь ли ты, что даже при обычном посещений сайта i>i исполь-
зуешь целую цепочку программ? Программы, называемые браузерами,
соединяются через сеть с программами на веб-серверах,-позволяя нам
легко и быстро делиться информацией. -	.	'?
Всемирная паутина^^^^ИиВеб-браузеры
Интернет состоит из множества более мелких
сетей. Всемирная Паутина — это сеть,
соединяющая наши компьютеры, которой
ежедневно пользуются миллионы людей. Она
состоит из индивидуальных веб-страниц.
Веб-страница —; это файл, написанный
программистом. Практически все веб-
страницы написаны на одном языке, который
называется HTML. Он содержит информацию,
с помощью которой компьютер отображает
веб-страницы на мониторе. Соединенная друг
с другом группа веб-страниц называется веб-
сайтом. Доступ к страницам дает программа, |
называемая веб-браузером.	'
Веб-браузерами называются программы,
позволяющие смотреть веб-страницы. Скорее
всего, ты уже пользовался такими браузерами,
как Google Chrome, Microsoft Internet Explorer,
Safari и /Vtozilla Firefox. Браузер берет
введенный тобой адрес и ищет нужную тебе
страницу в сети. Затем он получает доступ
. ’ к информации страницы с помощью другой
Программы, называемой веб-сервером.
Профессор
ТейрСтсуи всегда
& сета, си отпрао
, дзет почту!
Веб-серверы
Веб-страницы
Сервером называется компьютер, предоставля-
юЩий*информацию другим компьютерам. Это
машина или программа, помогающая браузе-
ру получить веб-страницу. Для доступа к ней
твой браузер должен связаться с содержащим
эту страницу веб-сервером. Затем специальная
программа находит запрошенную страницу
и отправляет ее на твой компьютер в виде
HTML-кода.
Веб-сервер
Веб-браузе0
з опрашивает
врб-стрднИЦу
Веб-север
отправляет
веб-странццу
Веб-браузер

Веб-адреса
Веб-адреса или, как их называют, URL — это
удобный способ, которым браузер ищет в
сети нужный тебе веб-сервер и HTML-файл.
В Интернете миллионы сайтов, и без адре-
сов URL браузер просто не знал бы, где что
искать. Каждая часть адреса URL сообщает
веб-браузеру свою информацию:
'<• »* <
http://www.qetcodinqkids.com/hello.html
Указывает браузеру, с каким
сервером нужно связаться
Страницу веб-сервер отправляет браузеру
в виде HTML-документа. Эти документы
сострят из таких HTML-элементов, как текст
и картинки, к которым добавлены инструкции
для браузера, как отображать и располагать
все на экране.
Когда браузер читает инструкции в коде
HTML, говорят, что он «анализирует» HTML-
документ. После анализа и расшифровки
инструкций браузер рисует на экране
все элементы документа. HTML-документ
может состоять всего из нескольких слов.
В простейшей форме он представляет собой
всего несколько строчек кода, например:
<!DOCTYPE html>
h 1 HTML element
< h e a d >
<title>Ha4HeM писать KOfl!</title>
</head>
<body>
Готов начать писать код?
</body>
</html>
Документ /ложет быть и более сложным,
содержащим даже другие языки
программирования, например CSS
и JavaScript
На следующей
Странице ты
узнаешь с HTML
и других языках,
на кстсрых
пишутся
L &еб-Страницы!
•  1
ПРОГРАММИРОВАНИЕ ВЕБ-СТРАНИЦ
Три самых распространенных языка программирования в мире —
это HTML, CSS и JavaScript. На них пишутся веб-страницы и веб-
приложения. С их помощью ты сможешь создавать не только красивые,
но и интерактивные веб-страницы. Мы’научим тебя писать код
на каждом из этих языков.
V-»


Сейчас почти все
веб-страницы написаны на
языке HTML (языке гипертексто-
вой разметки). Его изобрел в
начале 1990-х Тим Бернерс-Ли.
Это замечательный способ
создать базовую структуру
веб-страницы. Документы HTML
состоят из отдельных элементов,
которые создаются с помощью от-
крывающихся и закрывающихся
тегов. Тег — это имя элемента в
угловых скобках (< >). Содержи-
мое помещается между тегами.
Каждый HTML-тег — это инструк-
ция, сообщающая браузеру, как
отображать содержимое. Теги по-
зволяют добавлять на страницы
текст, картинки и видео и делить
информацию на разделы, напри-
мер строчки или абзацы.
5 .
Язык CSS (каскадные листы стилей) вместе
с HTML дает нам красивые страницы. Сам по себе
HTML выглядит скучно, поэтому мы прибегаем к CSS,
чтобы выбрать цвета, шрифты и положение текста
и картинок. Язык CSS позволит тебе менять размер
текста и цвет фона, а также поместить картинку
в центр экрана.
^aScript
JavaScript — очень важный язык програм-
мирования, так как именно он обеспечивает
интерактивность веб-страниц (это когда страница
меняется в ответ на действия пользователя). Если
ты хочешь разместить на странице нажимае-
мую кнопку или всплывающее окно, используй
JavaScript. Средствами только HTML и CSS без
JavaScript ты получишь красивую, но статичную
страницу.
ЗНАМЕНИТЫЕ ПРОГРАММИСТЫ
Ада Лавлейс (1815-1852)
В 1843 году написала первую
Грейс Хоппер (1906-1992)
создала первый компилятор —
программу, преобразующую
в мире компьютерную программу.
Тим Бернерс-Ли (р. 1955)
ученый, который изобрел
Всемирную Паутину и язык
программирования HTML
написанные человеком строки
кода в машинный код.
Алан Тьюринг (1912-1954)
математик, заложивший
основы современной
информатики.
Пол Аллен (р. 1953)
и Билл Гейтс (р. 1955)
основали компанию Microsoft
и создали операционную систему
Microsoft Windows.
Брендан Эйх (р. 1961)
создал язык
программирования
JavaScript.
Все эта люди
очень умны!

Маркус Перссон (р. 1979)
создатель компьютерной
игры Minecraft.
Сергеи Брин (р. 1973)
и Ларри Пейдж (р. 1973)
разработчики и основатели
поисковой системы Google.
Марк Цукерберг (р. 1984)
один из основателей социальной
сети Facebook.
11
К
!
 КАК РАБОТАТЬ С КНИГОЙ
Для тебя приготовлены шесть интересных заданий! Работая над ними,
ты научишься писать код на HTML/CSS И JavaScript. Затем ты сможешь
применить новые навыки и помочь бесстрашному исследователю про-
фессору Бейрстоуну и ученому доктору Дэй, которые в своей экспеди?
ции обнаружили ценный алмаз Монах й теперь пытаются его уберечь.
V
Описание задания
Каждый раздел начинается с задания от
профессора Бейрстоуна и доктора Дэй.
Тебё придется применить навыки написания
кода и самостоятельно создать веб-страницу,
добавить к ней пароль, написать приложение,
спланировать маршрут, создать игру
' и получить готовый сайт.
Пишем
код
к
Энциклопедия исследователя
Дополнительные сведения о профессоре
Бейрстоуне, докторе Дэй и алмазе Монах
ты найдешь в выдержках из «Энциклопедии
исследователя». Эта информация поможет
при выполнении заданий.
Учиться писать код лучше всего на практике!
Сначала это может быть страшновато,
ведь нужно использовать специальные
слова и символы. Но скоро ты научишься
программировать на разных языках.
Упражнения «Пишем код» помогут понять,
как работают различные фрагменты
кода, Следуй пошаговым инструкциям
и приобретай новые знания.
4	*
Сделай сам
Монах
Завершает каждый раздел задача «Сделай
сам»/ Для решения этих задач используй
код, изученный в упражнениях «Пишем
код». В твоих руках будущее алмаза Монах!
Г »
А
,1 ‘

I

А
БАЗОВЫЕ НАВЫКИ
Перед тем как приступить к Заданию 1, опишем несколько базовых
операций. В процессе чтения тебе то и дело придется их выполнять,
поэтому важно хорошо освоить их прямо сейчас. Процесс создания
и сохранения HTML-файлов будет разным для компьютеров PC и Мас.
БАЗОВЫЙ НАВЫК 1!
► СОЗДАНИЕ ПАПКИ
Тебе понадобится место на диске компьютера, куда будут сохраняться все HTML-файлы. Соз-
дай на рабочем столе папку с именем Coding. Все HTML-файлы должны находиться в одном
месте, поэтому сохраняй их только в эту папку.
Мас
Щелкни на рабочем столе правой кноп-
кой мыши и выбери в меню New, а затем
Folder. Назови новую папку Coding.
Нажми клавишу Control и щелкни на ра-
бочем столе. Выбери в меню New Folder.
Назови новую папку Coding.
Научись это делать,
и ты псЭгото&ишься
к перону заданию!
БАЗОВЫЙ НАВЫК 2
СОЗДАНИЕ ФАЙЛА HTML
Ты должен уметь создавать HTML-файлы, в которые будет писаться код. Обычно для написа-
ния кода применяются специальные программы, но код HTML можно писать в любом тексто-
вом редакторе. В случае PC используй Notepad, если же у тебя Мас, открывай TextEdit.
PC Чтобы открыть Notepad, напечатай Notepad в строке поиска меню Пуск (Start).
Чтобы открыть TextEdit, напечатай TextEdit в поле поиска Spotlight в правом верхнем
углу экрана. Когда редактор откроется, нужно сделать следующее:
•	Укажи, что файл содержит обычный текст (без форматирования). Для этого вы-
бери в строке меню Format команду Make Plain Text.
•	Найди в строке меню TextEdit и выбери Preferences. Убедись, что на вкладке New
Document в разделе Format стоит флажок Plain text, а в разделе Options отсут-
ствует флажок Smart quotes.
•	Убедись, что на вкладке Open and Save окна Preferences снят флажок Display
HTML files as HTML code instead of formatted text.
БАЗОВЫЙ НАВЫК 3!
► СОХРАНЕНИЕ ФАЙЛА HTML
При первом сохранении HTML-файла нужно убедиться, что имя файла заканчивается расши-
рением .htmL Именно благодаря расширениям компьютер понимает, как открывать различ-
ные файлы. Расширение .html сообщает компьютеру, что файл следует открывать с помощью
веб-браузера.
В случае PC нужно:
•	Выбрать в меню File команду Save As.
•	Выбрать папку Coding как место сохранения файла.
•	Выбрать имя файла, например Mission 1, и ввести его в строку File пате.
•	После имени файла напечатать .html, чтобы получилось Missionl.html. Щелкнуть
на кнопке Save.
В случае Мас нужно:
• Выбрать в меню File команду Save.
Мас
Выбрать папку Coding как место сохранения файла.
Выбрать имя файла, например Mission 1, и ввести его в строку Save As.
После имени файла напечатать .html, чтобы получилось Missionl.html.
Убедиться в отсутствии флажка If по extension is provided, use ".txt". Щелкнуть Save.
БАЗОВЫЙ НАВЫК 4'
ОТКРЫТИЕ HTML-ФАЙЛА
Чтобы увидеть свой код на экране, следует открыть HTML-файл в веб-браузере. Возможно,
после этого ты захочешь вернуться в редактор и внести в код какие-то правки.
PC
Mac
В случае PC нужно:
•	Сохранить файл, как описано в Базовом навыке 3.
•	Открыть папку Coding на рабочем столе. Дважды щелкнуть на файле HTML.
Он откроется в веб-браузере.
•	Для возвращения к редактированию щелкни правой кнопкой на имени файла
в папке Coding, выбери Open with, а затем Notepad.
В случае Мас нужно:
•	Сохранить файл, как описано в Базовом навыке 3.
•	Открыть папку Coding на рабочем столе.
Дважды щелкнуть на файле HTML.
Он откроется в веб-браузере.
•	Для возвращения к редактированию щелкни правой кнопкой
на HTML-файле в папке Coding, выбери Open with, а затем TextEdit.
В качеСт&е
браузера используй
Mozilla Firefox или
Google Chrome.
БАЗОВЫЙ НАВЫК 5!
РАБОТА С САЙТОМ GET CODING!
Не забывай, что получить помощь с заданиями можно на сайте Get Coding!. Там ты найдешь
записи из «Энциклопедии исследователя» и картинки. Если написание кода зашло в тупик,
на сайте можно посмотреть, как должен выглядеть нужный тебе блок кода. Более того, ты мо-
жешь его просто скопировать и вставить в свою программу для редактирования.
Адрес сайта Get Coding! www.getcodingkids.com
На сайте ты найдешь:
•	записи профессора Бейрстоуна
в «Энциклопедии исследователя»;
•	изображения профессора Бейрстоуна,
Эрнеста, доктора Дэй и алмаза Монах;
•	блоки кода для всех упражнений и заданий.
Некоторые шага могут
отличаться & разных опера-
ционных системах. Если ты
Столкнулся с трудностями,
ищи информацию, как писать
HTML & т&оей версии
программы.
ДЕЛАЕМ
ВЕБ-СТРАНИЦУ
* что ТАКОЕ ЯЗЫК HTML
И КАК ОН РАБОТАЕТ
♦	СОЗДАЕМ ПРОСТУЮ ВЕБ-СТРАНИЦУ
на Языке html
♦	ДОБАВЛЯЕМ НА СТРАНИЦУ ТБКСТ И КАРТИНКИ
Т ОфОрМЛЯЕМ ВЕБ-СТРАНИЦУ С ПОМОЩЬЮ Q5J
САНИЕ ЗАДАНИЯ
Дорогой программист!
профессор Гарри Бейрстоун
Я сейчас нахожусь в горах Сибири с ведущим ученым доктором Руби
Дэй и моим псом Эрнестом. Целью нашей экспедиции был поиск до-
исторических окаменелостей, но мы совершили более сенсационное
открытие
Наш доступ в Интернет ограничен, так как запасная батарея всего
одна Мы с доктором Дэй надеемся, что ты поможешь нам создать
веб-страницу о нашем восхитительном открытии
Спасибо за помощь с нашим делом. Оно будет полезным!
С теплыми пожеланиям из холодной Сибири,
Присоединяю к письму запись из «Энциклопедии исследователя»,
посвященную примечательной истории алмаза Монах. Используй
ее при создании веб-страницы. Пусть страница расскажет
о нашем открытии еще до нашего возвращения в Москву.
Лично мы пока не встречались, но уверен, что мое имя тебе знакомо.
Я известный исследователь, профессор Гарри Бейрстоун. И я обращаюсь
к тебе, так как мне отчаянно нужна помощь.
Мы исследовали пещеру, когда Эрнест внезапно стал лаять на большой
валун. Мы подошли ближе и увидели, что в скале есть трещина и там
что-то спрятано. Доктор Дэй извлекла оттуда маленький сундучок,
завернутый в клеенку. Открыв его, я не поверил своим глазам.
Это был легендарный алмаз Монах! Тот самый, что три года назад был
похищен из Москвы. Уверен, ты слышал об этом дерзком ограблении.
Так что наше открытие имеет огромное международное значение

Энциклопедия
ИССЛЕДОВАТЕЛЯ
Справочник
по приключениям
Домашняя страница
Содержание
Известные открытия
Известные исследователи
Предыдущие экспедиции
Алмаз Монах________________________________________________
Из «Энциклопедии исследователя», справочника по приключениям
Алмаз Монах — один из самых редких и ценных камней в мире, примечатель-
ный своим особенным зеленым цветом. Был обнаружен в 1880 году и приоб-
ретен русским аристократом в подарок жене в 1889 году.
Во время русской революции алмаз Монах был украден из дворца аристократа
в Петербурге. Следующие 30 лет его местонахождение неизвестно. В 1947 году
обнаружен полицией при задержании банды мелких преступников в Москве.
Возвращен семье владельца.
Возраст:
Более I миллиарда j\q^
Цвет:
зеленый
Огранка:
овал
Карат:
300
Чистота:
Зез дефектов
Цена:
Более £fo миллионов
факты от профессора Бейрсто^на
Алмаз Алонах
Сын аристократа решил, что алмаз приносит несчастье, и продал его старейшему ювелирному
дому Москвы — Дому Волковых. Сумма сделки осталась неизвестной, но ходили слухи, что столько
еще не платили ни за один камень.
Алмаз Монах выставлялся в частной коллекции Дома Волковых, пока три года назад не был по-
хищен во время дерзкого налета. Несмотря на обещанное крупное вознаграждение, полиции не
удалось найти виновных, и дело осталось нераскрытым.
В качестве предполагаемых виновников называли братьев Бонд — интернациональную банду,
ответственную за ряд краж статусных драгоценностей. Исследователь профессор Бейрстоун
выдвинул гипотезу, согласно которой алмаз спрятан где-то в России. С его точки зрения, «воры
выжидают, пока не утихнет шумиха, чтобы продать алмаз на черном рынке, не вызывая подозрений».

КОД НА ЯЗЫКЕ HTML
Итак, задание получено, время заняться про-
граммированием. Чтобы сделать страницу
для профессора Бейрстоуна, первым делом
нужно изучить HTML (язык гипертекстовой
разметки). Именно им программисты поль-
зуются для создания сайтов. На нем даются
инструкции браузеру. С его помощью на
страницу добавляют текст и картинки, а также
делят информацию на строки, параграфы
и разделы.
HTML-страница называется документом.
Документ состоит из HTML-элементов. Эле-
менты создаются из маленьких кусков кода,
называемых тегами. Почти все теги парные
и окружают любой фрагмент информации
(например, текст или картинку). Каждый
тег сообщает браузеру, как отображать
на экране заключенный внутри него элемент.
Именно поэтому HTML называют языком
разметки.
HTML-теги
Тег состоит из фрагмента кода, заклю-
ченного в угловые скобки (< >). На кла-
виатуре эти скобки находятся на тех же
клавишах, что и знаки точки и запятой.
Рассмотрим пример тега:
Все просто: <р> - кос)
для абзаца. Этот тег еще
не раз тебе встретится.
<р>Профессор Бейрстоун и доктор Дэй обнаружили алмаз Монах.</р>
Открывающий тег
Закрывающий тег
Это тег абзаца <р>. В случае парных тегов первый называется открывающим, а второй —
закрывающим. Закрывающий тег содержит косую черту (/). Увидев такой код, браузер пони-
мает, что ты просишь его сгруппировать текст между открывающим и закрывающим тегами <р>
в абзац.
Для получения веб-страницы нужно создать HTML-файл в текстовом редакторе. Браузер
ожидает появления тегов в определенном порядке. Первыми должны идти теги с инструкциями
по поводу страницы в целом, а затем теги, касающиеся отдельных фрагментов. Теги можно
вкладывать друг в друга. Завершив работу с тегом, не забывай его закрыть.
Посмотрим, какие теги тебе понадобятся для получения простой веб-страницы, состоящей
из заголовка и небольшого текста. Каждьй тег сообщает браузеру свой фрагмент информации:
<!DOCTYPE html>
Это объявление <!DOCTYPE>, с которого начинается
любой HTML-файл. Оно сообщает браузеру, на какой
версии языка HTML написана страница. Это не HTML-
тег, поэтому мы видим прописные буквы и отсутствие
закрывающего тега.
<html>
Это тег <html>, сообщающий бра-
узеру, что страница написана на
языке HTML.
<!DOCTYPE html>
<html>
<head>
<title>
Обнаружение алмаза Монах
<head>
Это тег <head>.
Он содержит ин-
формацию, которая
не отображается
в теле <body> стра-
ницы, например,
заголовок. Сюда
помещают инструк-
ции, которые бра-
узер должен при-
менять к странице
в целом.
</head>
<body>
<р>Профессор Бейрстоун и доктор
нашли алмаз Монах.</р>
</body>
</html>
Дэй
<title>
Тег <title> поме-
щается внутрь тега
<head>. Содер-
жимое этих тегов
не отображается
в теле страницы.
Ты увидишь его,
как заголовок
окна браузера,
открыв страницу
<body>
Все, что ты хочешь увидеть но стра-
нице, помещается внутрь тега <body>.
Соответственно, после открытия
файла в браузере на странице поя-
вится текст про алмаз Монах.
чтобы посмотреть, как
этот кос) выглядит
& браузере!

Это тег абзаца. Текст
между открывающим
и закрывающим тегами
будет сгруппирован
в абзац.
После сохранения написанного в тек-
Алмаз Монах
X
стовом редакторе кода и его открытия
браузер расшифровывает наш HTML-
файл и выводит на экран следующую
страницу:
Видишь, как текст менду
открывающим и закры-
вающим тегами <title>
Стал заголовком е> окне
браузера?
Профессор Бейрстоун и доктор Дэй
обнаружили алмаз Монах.
Смотра, еесь текст менду
открывающим и закры-
вающим тегами <р> Стал
соЭернимым теоей
ееб-Страницы!
У
Пишем код HTML
Теперь ты знаешь, что такое HTML-теги и как
они работают, пришло время ими воспользо-
ваться. Изучать новые фрагменты кода лучше
всего на практике. Следуй инструкциям
в разделах «Пишем код» и совершенствуй
свои навыки.
Важно убедиться в точности кода. Пере-
путанные или отсутствующие символы могут
помешать выполнению кода, потому что бра-
узер просто не поймет инструкцию. Если твоя
программа не работает, проверь следующие
вещи:
Что ты не пропустил никаких тегов и не перепутал их порядок.
Что в коде нет опечаток или орфографических ошибок.
Что в коде правильно расставлены прописные и строчные буквы.
Что ты добавил все нужные символы в правильном порядке.
Что ты используешь прямые кавычки (" ”), а не фигурные (" ")•
Что ты закрыл все теги, добавив косую черту (/).
Что текстовый редактор сохранил твой файл как HTML (.html).
Оснс&ные
советы
пс написанию
ксЭа!
Если ты не знаешь, что делать, на сайте Get Coding! (www.getcodingkids.com) можно скопи-
ровать нужный тебе блок кода.
ПИШЕМ КОД
► ТЕГИ HTML
Воспользуемся тегами HTML и построим простую веб-страницу. Следуй
данной инструкции, чтобы научиться структурировать отображаемую
на странице информацию.
1. Открой текстовый редактор. (Как это
делать, описано в разделе «Базовый
навык 2» на с. 14.)
2. Напечатай этот код:
<!DOCTYPE html>
<html>
<head>
<title>AnMa3 MoHax</title>
</head>
<body>
<р>Алмаз Монах - редкая драгоценность. </р>
</body>
</html>
4. Открой свой файл в браузере. (Как это
делать, описано в «Базовом навыке 4»
на с. 15.) Код отобразится на экране
примерно вот так:
Монах м	*
I I
._______________________________________
—-------- , «... ---------------------------------
Алмаз Монах — редкая драгоценность.
Убедись, что код напечатан корректно.
При наличии ошибок браузер не сможет
его прочитать. Объявление <!DOCTYPE>
нужно писать прописными буквами, а по-
следним должен быть тег </html>. Убе-
дись, что у тебя есть все закрывающие
теги с косой чертой (/).
3.
Сохрани файл в папку Coding
с расширением (.html). Назови его
webpagetemplate.html. (Как это
делать, описано в «Базовых навыках»
1 и 3 на с. 13 и 14.)
Затем снова открой файл в текстовом
редакторе. Введи другой текст между
открывающим и закрывающим те-
гами <title> и <р>. Сохрани файл. *«01
5. Щелкни на кнопке Refresh браузера.
На PC нажми F5, а на Мас — Command+R.
На экране появится измененный текст.
Троя пер&ая
е>еб-Страница гстс&а!
СТРОИМ СТРАНИЦУ С ПОМОЩЬЮ HTML-ТЕГОВ
Теперь, когда ты научился писать HTML-теги, попробуем создать более сложную страницу.
В разделе «Пишем код» на предыдущей странице ты видел, что на экран выводится поме-
щенный между открывающим и закрывающим тегами <р> текст. Но страница из единственной
строчки текста не очень интересна. Для добавления новых строк или абзацев потребуются
новые теги.
Эти новые теги нужно поместить между открывающим и закрывающим тегами <body>. Это
называется вложением. Вложенные теги дают нам более интересную компоновку страниц.
Рассмотрим вложение на примере тегов <body> и <р>:
Отступ
<body>
<р>Алмаз Монах стоит более £10 миллионов.</р>
</body>
Тег < р > вложен
внутрь тега <body>
Пространство вокруг кода HTML не имеет значе-
ния. Но программисты, открыв новый тег, любят де-
лать отступ. Это помогает следить за открывающими
и закрывающими тегами и упрощает чтение блоков
кода. Для отступа, открывая новые теги, нажимай
Tab. Давай посмотрим на теги, отвечающие за аб-
зацы и перенос строк. Они получены сокращением
слов «paragraph» (абзац) и «break» (перенос).
заметил?
Все теги пишутся строчными
буквами, а между тегами
и текстом отсутствуют пробелы.
Тег абзаца: <р> и </р>
Тег <р> создает новые абзацы. Открывающий тег <р>, а закрывающий </р>. Все, что попадает
между ними, превращается в одну группу. Используй новый тег <р> каждый раз, когда тебе
требуется новый абзац. Вот пример создания двух абзацев:
Открыва-
ющий тег
абзаца
н <body>
<р>Профессор Бейрстоун и доктор Дэй сделали сенсационное открытие.</р>
<р>В далекой сибирской пещере они обнаружили алмаз Монах.</р>
</body>	л
Закрывающий
тег абзаца
Atvaqj Монах
Профессор Бейрстоун и докюр Дэй сделали сенсационное открытие
В далекой сибирской пещере они обнаружили алмаз Монах.
Вот как будет выглядеть
этот ксх) & браузере!
Тег переноса строки: <Ьг/>
Тег переноса строки <Ьг/> позволяет начать
текст с новой строчки, не создавая нового
абзаца. Это непарный HTML-тег. Так как в
этом случае нет содержимого для отображе-
ния на экране, тег переноса один. В нашем
примере способ отображения текста меня-
ется с помощью тегов <р> и <Ьг/>:
<body>
<р> Профессор Бейрстоун и доктор Дэй
мировой исследователь.<br/>
окаменелости. </р>	Тег переноса строки
обнаружили алмаз Монах.</р>
сделали сенсационное открытие. <br/>
Профессор Бейрстоун - ведущий
Доктор Дэй - ученыйизучающая
<р>В далекой сибирской пещере они
</body>
непарный тег совме-
щает в себе открыва-
ющий и закрывающий
теги. Это особый слу-
чай. Такие теги можно
узнать по тому, что косая черта
(/) стоит в конце, а не в начале,
как в случае обычного, закрыва-
ющего тега.
о
I 1рофессор Бейрстоун и докюр Дэй сделали сенсационное открытие.
Профессор Бейрстоун — ведущий мировой исследователь.
Доктор Дэй — ученый, щупающая окаменелости.
В далекой сибирской пещере они обнаружили алмаз Монах.
Теперь тооя очередь
использовать ио&ые
теги!
ПИШЕМ КОД
► РАЗБИЕНИЕ НА АБЗАЦЫ
И ПЕРЕНОС СТРОК
Добавим на страницу абзацы и переносы строк с помощью тегов <р>
и <br/>.
1. Открой текстовый редактор. Создай
новый файл breaks.html. (Как это де-
лать, описано в «Базовых навыках»
на с. 13-15.) Скопируй код из файла
webpagetemplate.html и вставь его
в новый файл. Отредактируй код, чтобы
он принял вот такой вид:
<!DOCTYPE html>
<html>
<head>
<title>Anwa3 MoHax</title>
</head>
3. Добавь текста в первый абзац. Добавь тег
переноса строки <Ьг/> в конец строки тек
ста, вот так:
<body>
<р>Алмаз Монах был обнаружен
в Сибири.<br/>
Профессор Бейрстоун
и доктор Дэй были в экспедиции
по поиску окаменелостей.</р>
<р>Драгоценность нашел Эрнест,
собака профессора Бейрстоуна.</р>
</body>
<body>
</body>
</html>
2. Открой тег абзаца <р>, напечатай
какой-то текст, добавь закрывающий тег
</р>. Повтори нужное число раз. Должен
получиться примерно вот такой код:
<body>
<р>Алмаз Монах был обнаружен
в Сибири.</р>
<р>Драгоценность нашел Эрнест
собака
</body>
Прекрасная работа!
Но как выглядит алмаз
Нонах?
Сохрани HTML-файл в папку
Coding.
Открой страницу в браузере.
Она будет выглядеть примерно так:
Драгоценность нашел Эрнест, собака профессора Бейрстоуна.
профессора Бейрстоуна.</р>
Алмаз Монах был обнаружен в Сибири.
Профессор Бейрстоун и доктор Дэй были в экспедиции по поиску
окаменелостей.
Думаю, пришло
еремя познако-
миться с тегом
image!
Тег изображений: <img/>
Теперь, когда ты умеешь формировать абзацы
и выполнять переносы строк, добавим на
страницу картинки с помощью еще одного не-
парного тега <img/>. Внутрь этого тега добав-
ляется информация, называемая атрибутом
пути. (src). Вот как это выглядит:
<img src="image.jpg"/>
Знак равенства (=) и двойные кавычки (**")
задают значение атрибута пути.
Атрибут пути добавляется к тегу <img/>,
чтобы браузер знал, где взять картинку. Без
этого он просто не поймет, что ему отобра-
жать на экране. Значением атрибута пути
может быть или имя файла с сохраненной
картинкой, или адрес URL этой картинки.
атрибут — это способ предо-
» ставить браузеру дополнитель-
ные сведения об HTML-элементе.
Существует множество разных
атрибутов.
Атрибут состоит из двух частей: имени
и значения. Значение атрибута задается
с помощью знака равенства (=) и помеща-
ется в двойные кавычки (" "). То есть атри-
бут всегда выглядит так: имя="значение".
Атрибуты всегда добавляются в открываю-
щий тег или в единственный тег (в случае
непарного тега).
Берем сохраненную картинку
АлмаМмк V
Если в папке Coding есть изображение,
сохраненное в виде файла JPEG (.jpg),
добавить его на страницу очень легко.
Нужно всего лишь присвоить атрибуту
пути значение в виде имени этого файла,
воспользовавшись знаком равенства (=)
и двойными кавычками (" ”). Для файла
diamond.jpg получится вот такой код:
11рофессор Бейрстоун послал нам это секретное фото алмаза Монах.
Тег кар-
тинки
<body>
<р>Профессор Бейрстоун послал нам это секретное фото алмаза Монах:</р>
► <img src="diamond.jpg"/>
</body>
Атрибут
пути
Имя файла
Используем адрес URL
Если ты хочешь использовать для своей страницы картинку из Интернета, тогда атрибуту пути
тега <img/> нужно присвоить адрес URL этой картинки. Чтобы узнать адрес URL, щелкни на
картинке правой кнопкой мыши и на PC выбери команду Copy image URL, а на Мас Сору —
image address. После этого вставь URL в тег <img/>, как значение атрибута пути. Не забудь
поместить его в двойные кавычки (" "):
<body>
<р>Первая совместная экспедиция профессора Бейрстоуна и доктора Дэй.</р>
<р>Вот фото группы:</р>
<img src="https://getcodingkids.com/team_photo.jpg'7>
</body> К
Адрес URL всегда начина-
ется c http:// или https://
Имя картинки
Добавляемой на страницу картинке всегда
нужно присваивать имя. Это помогает поис-
ковым сайтам, таким как Google, находить
твою страницу и удобно для пользователей,
которые не могут загружать картинки. Имя
присваивается через атрибут альтернатив-
ного текста (alt). Вот так:
Полный код страницы с текстом и картинками
теперь выглядит так:
Первая совместная экспедиция профессора Бснрстоуна и доктора
Дэй.
Ват фото группы:
<img src="diamond. jpg" alt=,,Diamond"/>
Атрибут альтернативного текста
<body>
<р>Первая совместная экспедиция профессора Бейрстоуна и доктора Дэй.</р>
<р>Вот фото группы:</р>
<img src="https://getcodingkids.com/team_photo.jpg" alt="The Team"/>
</body>
। заметил?
Кавычки в коде всегда прямые (" "), а не фигурные (" ").
Инструкции в фигурных кавычках браузер просто не поймет.
В некоторых браузерах при
наведении на картинку
указателя мыши всплы-
вает текст, содержащийся
в атрибуте alt.
ПИШЕМ КОД
► ДОБАВЛЕНИЕ КАРТИНОК
Добавим на страницу изображения алмаза Монах, профессора Бейр-
стоуна, доктора Дэй и Эрнеста, чтобы сделать ее интереснее.
1. На сайте Get Coding! найди раздел карти-
нок, а в нем изображение алмаза Монах.
Щелкни на нем правой кнопкой мыши и
выбери команду Save Image As. Сохрани
картинку как файл JPEG (.jpg) в папку
Coding. Назови ее diamond.jpg.
2. Открой текстовый редактор и создай
новый HTML-файл с именем images,
html. Скопируй в него код из файла
webpagetemplate.html. Отредактируй
код, придав ему вот такой вид:
<’DOCTYPE html>
<html>
<head>
<title>Anwa3 MOHax</title>
</head>
<body>
<р>Алмаз Монах редкого
зеленого цвета.</р>
</body>
</html>
4. Теперь добавь значение атрибута пути.
Укажи имя файла, сохраненного в папку
Coding. Вот так:
<р>Алмаз Монах редкого зеленого
цвета.</р>
<img src="diamond.jpg"/>
Сохрани HTML-файл и открой его
в браузере. На экране появится
изображение.
5. Теперь добавим изображения профессора
Бейрстоуна, доктора Дэй и Эрнеста, ис-
пользуя их адреса URL. Добавь еще один
абзац и тег <img/> с пустым атрибутом
пути:
<р>Алмаз Монах редкого зеленого
цвета.</р>
<img src="diamond.jpg'7>
<р>Группа была в восторге от своей
находки.</р>
<img src=" "/>
3. Теперь поместим на страницу изображение
алмаза Монах. Добавь тег <img/> с пустым
атрибутом пути после закрывающего тега
</р>. Вот так:
<р>Алмаз Монах редкого зеленого
цвета.</р>
<img src=" "/>
Продолжение
ПИШЕМ КОД
► ПРОДОЛЖЕНИЕ
6. В разделе с картинками на сайте Get Coding! найди фото группы. Щелкни на нем правой
кнопкой мыши и выбери команду Copy image URL для PC или Copy image address для Мас.
Вставь адрес URL в атрибут пути. Вот так:
<р>Группа была в восторге от своей находки.</р>
<img src="https://getcodingkids.com/team_photo.jpg"/>
Сохрани файл и обнови стра-
j ницу в браузере. На экране
появится второе изображение.
Алмаз Монах редкого зеленого цвета.
7. Осталось добавить к двум тегам
<img/> атрибуты alt. Выбери имя
для каждого изображения. Код
примет вот такой вид:
c'.DOCTYPE html>
<html>
<head>
<title>AnM33 MoHax</title>
Группа была в восторге от своей находки.
</head>
<body>
<р>Алмаз Монах редкого зеленого цвета.</р>
<img src="diamond.jpg" aIt=”Алмаз Монах"/>
<р>Группа была в восторге от своей находки.</р>
<img src="https://getcodingkids.com/team_photo.jpg’* alt="Группа"/>
</body>
</html>
Раз&е ЭриеСт
ие горд собой?
Сохрани файл и обнови страницу. В неко-
торых браузерах при наведении указателя
мыши на картинку будет всплывать текст,
указанный в атрибуте alt.
Контролу список
КОД НА ЯЗЫКЕ HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Вот что
иунно помнить
при работе
с HTML-тегами!
Базовая структура HTML-документа всегда
выглядит одинаково:
Документы HTML состоят из HTML-элемен-
тов — фрагментов информации, окру-
женных HTML-тегами. Это сообщения для
браузера, как отображать заключенную
между открывающим и закрывающим те-
гами информацию.
HTML-теги пишутся внутри угловых скобок (< >). Открывающий и закрывающий
тег показывают браузеру начало и конец инструкции. Закрывающий тег легко
узнать по косой черте (/). Если между тегами нет никакого содержимого, при-
меняется непарный тег, объединяющий в себе открывающую и закрывающую
части.
Теги всегда пишутся строчными буквами.
Теги можно вкладывать друг в друга. Но не забывай при этом их закрывать.
Открывая новый тег, всегда делай отступ, нажимая клавишу Tab. Это упростит
чтение готового кода.
Чтобы дать браузеру дополнитель-
ные инструкции или информацию
об HTML-элементе, пользуйся HTML-
атрибутами. Атрибуты помещаются
в открывающий тег. У них всегда
есть имя и значение, задаваемое
знаком равенства (=) и двойными
кавычками (” 11).
Обычно ееб-Страницы
соб-оят не только из слое
и картинок. Пришло еремя
узнать, как поменять ком-
поновку и Структуру т&оей
Страницы.
КОМПОНОВКА И СТРУКТУРА ВЕБ-СТРАНИЦЫ
Теперь, когда ты знаешь, что такое HTML-теги
и как они работают, пришло время заняться
компоновкой и структурой твоей страницы.
До сих пор все добавляемые HTML-элементы
располагались в одном и том же месте. Для
их перемещения и изменения вида страницы
тебе потребуются новые HTML-теги и атри-
буты.
Тег группировки: <div> и </div>
Тег группировки <div> позволяет менять компоновку страницы, разбивая ее на блоки. Откры-
вающий тег <div>, а закрывающий — </div>. Он объединяет HTML-элементы друг с другом,
работая как невидимый контейнер.
Поместив группы HTML-элементов между открывающим и закрывающим тегами <div>, ты
можешь попросить браузер поменять их одинаковым способом. При этом элементов вне тега
<div> изменения не коснутся. Давай на практике посмотрим, как это работает:
Открывающий
<div>
< body >	Атрибут стиля
<div style="color: green;’’>
<р>Алмазу Монах более миллиарда лет.</р>
<р>Это редкий зеленый алмаз.</р>
Закрывающий
</div>
</div>
<р>Его вес 300 карат, а
</body>
цена превышает £10 миллионов.</р>
Алиш Мемах *
Мы поместили внутрь тега <div> два
абзаца текста. Цвет этого текста был
изменен на зеленый с помощью нового
HTML-атрибута — атрибута стиля. Абзац,
не попавший внутрь тега <div>, остался
без изменений. Тег <div> сгруппировал
HTML-элементы и позволил
легко их отредактировать.
Алмазу Монах более миллиарда лет.
Эк> редкий зеленый алмаз.
Его вес 300 карат, а цена превышает £10 миллионов.
С атрибутом Стиля
ты познакомишься
сразу после раз-
дела «Пишем кос)»!

ПИШЕМ КОД
► СОЗДАЕМ РАЗДЕЛЫ
Теперь твоя очередь использовать тег <div>. Научись с ним работать,
и ты сможешь сделать компоновку веб-страницы интересной.
1. В текстовом редакторе создай новый HTML-файл с именем divs.html. Скопируй в него код
из файла webpagetemplate.html. Внеси в него изменения, чтобы он приобрел такой вид:
c’DOCTYPE html>
<html>
<head>
<1111е>Алмаз MoHax</title>
</head>
<body>
<р>Профессор Бейрстоун - известный исследователь.</p>
<р>Доктор Дэй - ведущий ученый. Она обожает кости динозавров.</р>
</body>
</html>
2. Теперь добавь два тега <div> между открывающим
и закрывающим тегами <body>. Помести каждый
абзац внутрь своего тега <div>:
<body>
<div>
<р>Профессор Бейрстоун - известный
исследователь.</р>
</div>
<div>
<р>Доктор Дэй - ведущий ученый. Она
обожает кости динозавров.</р>
</div>
</body>
3. Сохрани HTML-файл и открой
его в браузере. Теги <div>
никак не повлияли на вид
экрана, но произошла группировка
элементов, и теперь они готовы
к перемещению и компоновке.
Профессор Бейрстоун — известный исследователь.
Доктор Дэй — ведущий ученый. Она обожает кости
динозавров.
КОД НА ЯЗЫКЕ CSS
До этого момента мы писали код на языке
HTML Как ты уже знаешь, теги <div> ис-
пользуются для группировки HTML-элементов,
чтобы их легко было редактировать. Для изме-
нения их вида и положения нам потребуется
CSS.
CSS — это язык программирования, часто
используемый вместе с HTML. Он позво-
ляет менять вид отображаемых в браузере
HTML-элементов. CSS — сокращение для
каскадных таблиц стилей, иногда его назы-
вают «таблицами стилей» или «стилями».
С помощью CSS ты сможешь менять размер
и форму HTML-элементов и делать их цвет-
ными. А также двигать их по экрану. Более
того, язык CSS позволяет вносить и другие
изменения в вид веб-страницы.
Атрибут стиля
Для изменения HTML-элемента с помощью CSS нужно добавить в открывающий тег атрибут
style. Его можно добавлять во все теги. Он работает так же, как уже известные тебе атрибуты
стиля и альтернативного текста. Добавим этот атрибут в наш код:
<р style="CSS-property: value;”>Алмаз Монах был спрятан в пещере.</р>
Атрибут стиля	CSS
Значение атрибута стиля задается с помощью знака равенства (=) и заключается в двойные
кавычки (" "). Применим CSS к нашему HTML-тегу, присвоив атрибуту style значение CSS.
CSS — очень простой язык. Всё в нем разбивается на две части: свойство и значение.
Свойства и значения в CSS
При написании кода на языке
CSS всегда используются
свойство и значение. Свой-
ство сообщает браузеру, ка-
кую часть HTML-элемента ты
хочешь поменять. А значение
сообщает, какие изменения
требуются. Это работает так:
CSS	Что это значит?	Примеры значений^
свойство	То, что ты хочешь изменить	background-color; height;
значение	Как ты хочешь это изменить	red; 200рх; 	/
В CSS свойство отделяется от значения двоеточием (:). После значения ставится точка
с запятой (;). Если в CSS нужно указать более одного слова, между ними ставится дефис (-).
В случае неправильного синтаксиса браузер не сможет понять инструкцию. Атрибут стиля
всегда следует писать вот так:
style="CSS-property: value;
Дефис
Двоеточие
Точка с запятой
</body>
Атрибут
стиля
Свойство
CSS
Заметил?
В браузер встроены сотни различных CSS-
свойств и значений, которые ты можешь
вставлять в HTML-теги, меняя вид страниц.
Посмотрим, как можно добавить CSS
в теги <div>. Чтобы поменять цвет фона
для одного раздела, потребуется вот такой
код CSS и HTML:
Л СИНТАКСИСОМ
» называется набор правил,
определяющих способ структу
рирования и написания кода.
Смотра, как мы изменам
Страницу со&меСтныма
средСт&ама HTML а CSS!
Значение CSS
<body>
<div style="background-color: green;">
<р>Алмаз Монах был спрятан в пещере.</р>
<р>Он был в скальной трещине.</р>
Все слова в CSS взяты из
американского английского.
Только так браузер пони-
мает, чего ты от него хочешь.
Например, при каждом на-
писании слова colour нужно
использовать американский
вариант color.
А/ШШМДООХ
CSS-свойство background-color
Теперь, когда ты получил представление о CSS, добавим на страницу цвет с помощью CSS-
свойств. Открытие профессора Бейрстоуна и доктора Дэй без сомнения станет международ-
ной сенсацией, поэтому наша страница должна привлекать взгляды.
Менять цвет различных областей страницы можно с помощью тегов <div>. Первым делом
добавим ко всем открывающим тегам <div> атрибуты стиля. А внутри этих атрибутов установим
свойство CSS background-color и укажем цвет для CSS-значения. В итоге получится вот такой код:
<body>
<р>ОБНАРУЖЕН ПОХИЩЕННЫЙ АЛМАЗ МОНАХ! </р>
<div styles"background-color: green;’’>	Свойство background-color^
<р>Профессор Бейрстоун, доктор Дэй и Эрнест были в экспедиции.<br/>
В горах они сделали потрясающее открытие.</р>
</div>
<div style="background-color: cyan;">
спрятанным алмаз Монах.</р>
стал обнюхивать камень в пещере и залаял на него.<Ьг/>
камня оказался
</body>
Алмаз Монах
<р>Эрнест
Внутри
ОБНАРУЖЕН ПОХИЩЕННЫЙ АЛМАЗ МОНАХ!
Это крайне
полезный
пример коЭа.
Профессор Бейрстоун. доктор Дэй и Эрнест были в экспедиции.
В юрах они сделали потрясающее оэкрьпие.
Эрнест стал обнюхивать камень в пещере и залаял на него.
Внутри камня оказался спрятанным алмаз Монах.
Заметил?
Существуют тысячи цветов, которые могут использоваться как значения
в CSS. Узнай о них на странице https://www.w3schools.com/colors/
colors_names.asp.
ПИШЕМ КОД
► ПИШЕМ КОД CSS
Теперь ты можешь писать код CSS наряду с HTML. Добавляй атрибут
стиля к HTML-тегу и указывай его CSS-свойство и значение.
1. Открой текстовый ре-
дактор и создай HTML-
файл с именем CSS.
html. Скопируй и вставь
в него код из файла
divs.html и отредак-
тируй его следующим
образом:
2. Добавь пустой атрибут
style ко всем открыва-
ющим тегам <div>, вот
так:
<div style=" ">
<!DOCTYPE html>
<html>
<head>
<title>Anwa3 MoHax</title>
</head>
<body>
<div>
<р>Драгоценность была похищена из Москвы.</р>
<р>Кража произошла три года назад.</р>
</div>
<div>
<р>Основные подозреваемые - братья Бонд.</р>
</div>
</body>
</html>
3. Добавь в атрибут стиля CSS-свойство
background-color. Помни, что имя и
значение свойства нужно разделить
двоеточием (:). Не забудь точку с за-
пятой (;) после значения. Открываю-
щий тег <div> примет такой вид:
4. Сохрани HTML-файл и открой
его в браузере. Попробуй ме- 45
нять значения CSS-свойства
background-color. Сохраняй файл
и обновляй страницу, чтобы посмо-
треть, как меняется ее вид.
<div style="background-color: pink;">
Аллчи Монах
Драгоценность была похищена из Москвы.
Кража произошла три года назад.
Основные подозреваемые — братья Бонд.
ДРУГИЕ CSS-СВОИСТВА
Посмотрим, какие еще CSS-свойства можно добавить к нашим HTML-элементам, чтобы улуч-
шить страницу профессора Бейрстоуна. Как ты уже знаешь, CSS всегда состоит из свойства
и значения. Существуют сотни CSS-свойств и значений, вот наиболее распространенные
из них:
Имя CSS-свойства	Что оно делает?	Примеры значений
background-color	Задает цвет фона	red; black; white; yellow;
color	Задает цвет текста	red; black; white; yellow;
text-align	Выравнивает текст на странице	left; right; center;
font-size	Меняет размер текста	12px; 20pt;
float	Располагает элемент слева или справа от другого элемента	left; right; none;
height	Задает высоту элемента	lOOpx; 100%;
width	Задает ширину элемента	lOOpx; 100%;
border	Помещает элемент в рамку	Ipx solid black;
margin	Добавляет поля вокруг элемента	lOpx;
padding	Добавляет пространство внутрь элемента	lOpx;
Графика на экране твоего компьютера состоит из крошечных цветных точек,
называемых пикселями (рх). Можно указать браузеру, сколько пикселей дол-
жен содержать HTML-элемент.
CSS-свойство color
Чтобы поменять цвет
текста, укажи зна-
чение CSS-свойства
color аналогично
тому, как мы делали
это со свойством
background-color.
Напоминаю, что его
нужно писать вот так:
color.
Свойство color
<body>	f
<div style="color: gray;’^Обнаружение алмаза Монах!</div>
</body>
Обнаружение алмаза Монах?
CSS-свойства для выравнивания
До этого момента все наши
HTML-элементы располага-
лись в одном и том же месте.
CSS-свойства text-align и
float позволяют выравнивать
(то есть перемещать) текст
и другие HTML-элементы на
странице. Свойство text-align
дает возможность распо-
ложить текст слева (left),
справа (right) или в центре
(center) страницы.
Свойство text-align
< body >	я
<div style=’’text-align: center;">
Обнаружение алмаза Монах!
</div>
<р>Похищенный камень найден в Сибири.</р>
</body>

Обнаружение ачм< а Монах!
Похищенный камень найден в Сибири.
CSS также позволяет выравни-
вать HTML-элементы, например,
теги <div> или картинки по левому
или правому краю страницы. До-
статочно присвоить свойству float
значение left или right.
Свойство float
CSS-сьсйСтьа text-align
u float позволяют легко
получить интересную
компсно&ку Страницы.
<body>	f
<div style="float: right;">
Рабочая группа:<br/>
<img src="team.jpg" alt="The Team"/>
</div>
</body>
ArWOJ МсхЖ
Рабочая группа*
Несколько CSS-свойств одновременно
В атрибут стиля
можно поместить не-
сколько CSS-свойств
<body>
<div style="background-color: lightblue; float: right;">
и значений. Они	Эрнест вынюхивает алмаз,
перечисляются через	< / d iv >
точку с запятой (;).	</body>
Браузер прочитает
все CSS-свойства
 |Ti 1|	АлмаэМонах
и применит их к п I ML элементу, поэтому
их может быть произвольное количество.
Здесь мы используем
два CSS-свойства
Смотри, теперь ты монеиь
й)нсьременно менять ц&ет
срона и полонение
элемента <div>!
Эрнест вынюхивает алмаз.
Меняем размер элементов средствами C5S
Теперь ты умеешь выбирать цвет текста, до-
бавлять цветной фон к HTML элементам и
менять их положение на странице. Но если
ты хочешь получить по-настоящему инте-
ресную страницу, нужно научиться менять
размер HTML-элементов. Для этого потребу-
ются CSS-свойства width (ширина) и height
(высота), которым присваиваются нужные
размеры. Воспользуемся ими, чтобы сделать
элемент <div> квадратным:
Единица
Свойство height измерения Свойство width
<body>	f
<div style="bacl<ground-color: plum; height: 200px; width: 200px;">
<р>Считалось, что алмаз Монах исчез навсегда.</р>
<р>Дом Волковых был потрясен похищением.</р>
</div>
</body>	*	«
J	Алмаз Монах '	W
1
 Пометил? i
Считалось, что алмаз Монах
исчез навсегда.
Дом Волковых был потря-
сен похищением.
На этот раз значения CSS-свойств
указаны не словами, а числами.
В таких случаях следует указывать
единицы измерения.
Измерения в CS5
Есть много различных единиц измерения, кото-
рые можно использовать в CSS. Обязательно
указывай их после численных значений. Вот
наиболее распространенные варианты:
Типы единиц:
ф Пиксели (рх)
ф Проценты (%)
ф Точки (pt)
Посмотрим, как с помощью процентов поменять высоту и ширину CSS-свойств элемента <div>:
<body>
<div style="background-color: palegreen; height: 75%; width: 50%;">
<р>Полиция по-прежнему не знает, что делать.</р>	у
<р>Все усилия ни к чему не привели.</р>
</div>
</body>
Значение в процентах
Алмаз Монах
'Ь1 заметил?
Проценты указывают, какую часть
экрана должен заполнять элемент.
В результате, если ты меняешь размер
окна браузера, меняется и размер
элемента.
Полиция по-прежнему
не знает, что делать.
Все усилия ни к чему
не привели.
Пиксели и точки используются тем же спосо-
бом, что и проценты, но в их случае размер
элемента не меняется даже при изменении размеров окна браузера. В примере мы задаем
CSS-свойства height и width в пикселях и меняем размер текста, указывая значение свойства
font-size в точках.	. ., - •	....	
Значение Значение	Значение
в пикселях в пикселях	в точках
<body>
<div style="background-color: gold; height: 200px; width: 350px; font-size: 20pt;">
<р>Братья Бонд ни разу не были пойманы.</р>
Границы и пространство средствами С55
Еще CSS-свойства позволяют создавать рамки и отступы вокруг HTML элементов. Для созда-
ния рамки используется свойство border, для которого указываются значения ширины, стиля
и цвета. Рассмотрим пример:
<body>
Свойство
border
Ширина
Стиль Цвет
<div style="border: 4рх solid green; width: 50%; height: 100px;">
Профессор Бейрстоун и доктор Дэй радуются своей находке.
</div>
</body>
АлмохМонсЫ	Л
Можно поменять поля внутри HTML-элемента
с помощью свойств padding и margin. Им при-
сваиваются такие значения, как fop (сверху),
bottom (снизу), left (слева) и right (справа)
от HTML-элемента. Рассмотрим пример:
Профессор Бейрстоун
и доктор Д й радуются
своей находке.
Свойство padding	Свойство margin
<body>
<div style="padding: 25px; margin: 50px; border: 4px solid blue;
width: 50%; height: 100px;">
Эрнест также был счастлив.<br/>
Профессор Бейрстоун дал ему дополнительную порцию еды.
</div>
</body>
Здесь CSS-свойство padding создает
пространство в 25 пикселей между гра-
ницей элемента <div> и текстом об Эрнесте.
Свойство margin создает 50 пикселей пространства
между границей элемента <div> и краем страницы.
'Ь1 заметил?
Стилю рамки присвоено значение solid (сплошной).
Возможны также значения dotted (точечный), dashed
(пунктирный) или double (двойной).
Эрнест также быт счастлив.
Профессор Бейрстоун дал
ему дополнительную пор-
цию еды.
Моя награда
была очень
ькусной!
АпмиЛкм^г	М
◄
НЕСКОЛЬКО CSS-СВОЙСТВ
ОДНОВРЕМЕННО
Существует множество CSS-свойств, с помощью которых можно создать
впечатляющую страницу для профессора Бейрстоуна и доктора Дэй.
Давай добавим в код сразу несколько свойств, чтобы поменять компо-
новку и структуру страницы.
1.	Открой текстовый редактор и создай новый HTML-файл с именем CSSproperties.html. Ско-
пируй туда код из файла CSS.htm и отредактируй, чтобы получить три вот таких тега <div>:
<!DOCTYPE html>
<html>
<head>
<±111е>Алмаз MoHax</title>
</head>
<body>
<div>
Почему алмаз был спрятан в пещере?<Ьг/>
Кто его туда принес?
</div>
<div>
Были ли это братья Бонд?<Ьг/>
Могут ли они следить за пещерой?
</div>
<div>	х
В безопасности ли рабочая группа?<Ьг/> / я очень надеюа
Их лагерь удален от цивилизации. ( что опасности
</div>	\ Нет!
</body>
</html>
Мы долины
охранять
алмаз!

2.	Поменяй цвет, размер шрифта и положение текста в первом элементе <div>. Используй
свойства color, font-size и text-align. Получится вот такой код:
<div style="color: green; font-size: 18pt; text-align: center;">
Почему алмаз был спрятан в пещере?<Ьг/>
Кто его туда принес?
</div>
3.	Поменяй ширину и высоту второго элемента <div> с помощью свойств width и height.
Его ширина должна составить 75% ширины страницы, а высота — 100 пикселей.
Добавь к элементу <div> фоновый цвет и отступ. Получится вот такой код:
<div style="width: 75%; height: 100рх; background-color: lightblue; margin: 20px;">
Были ли это братья Бонд?<Ьг/>
Могут ли они следить за пещерой?
</div>
4.	Поменяем положение третьего элемента <div>. С помощью свойства float сдвинем
его вправо. Добавим элементу рамку и поля, воспользовавшись свойствами border
и padding. Получится вот такой код:
<div style="float: right; border: 6px dotted red; padding: 20px;">
В безопасности ли рабочая rpynna?<br/>
Их лагерь удален от цивилизации.
</div>
Алмаз Монах м

Начни по своему выбору
менять значения всех CSS-
свойств и смотри, как меняется
вид веб-страницы.
Почему алмаз был спрятан в пещере?
Кто его туда принес?
Были ли это орэтья Бонд?
Могут ли они следить за пещерой?
В безопасности ли рабочая группа?
Их лагерь удален от цивилизации.

CSS-КЛАССЫ
Возможно, ты уже заметил, что добавление
нескольких CSS-свойств в HTML-теги удлиняет
код и усложняет его чтение. Кроме того, тра-
тится время на повторный ввод одних и тех же
свойств. Здесь нам на помощь приходят CSS-
классы, позволяющие группировать CSS-код
в теле веб-страницы.
Классы CSS — удобный способ, позволяю-
щий применить группу CSS-свойств к любому
HTML-элементу страницы. Программисты
пользуются ими для упрощения кода. Кроме
того, уменьшается вероятность ошибок. На-
пример, если ты знаешь, что весь текст внутри
тегов <div> на странице должен быть опре-
деленного цвета с определенным размером
шрифта, то вместо того, чтобы добавлять
CSS-свойства к каждому тегу <div>, можно
взять CSS-класс и одновременно отредактиро-
вать все теги <div> на странице.
Тег <head>
До этого момента мы писали код в основном внутри тега <body>. Пришло время посмотреть,
как мы можем использовать тег <head>. Вернемся к самой первой странице, построенной
в начале раздела:
<!DOCTYPE html>_______
< html >	Тег head
<head>
<Т1Т1е>06наружение алмаза MoHax</title>
</head>
<body>
<р>Профессор Бейрстоун и доктор Дэй нашли алмаз Монах.</р>
</body>	«
</html>
У всех ранее созданных нами страниц тег	м
<title> находился внутри тега <head>. Ин-
формация, помещенная между открывающим
и закрывающим тегами <title>, не отобра-
Профессор Бейрстоун и доктор Дэи нашли алмаз Монах
жается в теле страницы при просмотре в бра-
узере.
Добавим CSS-классы в тег <head>. Именно
сюда лучше всего поместить информацию для
браузера, которую мы не хотим отображать
в основном теле страницы.
Тег стиля: <style> и </style>
Создавая CSS-класс, ты сообщаешь браузеру о переходе от HTML к CSS. Это делается с помо-
щью тега < style>, вкладываемого внутрь тега <head>. Ter <style> такой же, как и все остальные,
уже знакомые тебе HTML-теги, просто в нем содержится код CSS.
После открытия тега < style> можно создать CSS-класс. Каждому классу требуется имя. Имеет
смысл связать его с элементом, который ты собираешься менять. Рассмотрим пример CSS-класса,
меняющего вид нашего текста:
Тег style
<head>
<1111е>0бнаружение алмаза MoHax</title>
Имя CSS-класса text {
text-align: center;
г font-size: 18pt;
CSS-свойства	background-color: aqua;
Открывающая фигурная скобка
Точка
</head>
Закрывающая
фигурная скобка
Это новый способ написания и структуриро-
вания кода. CSS-классы всегда начинаются
с имени класса. Имя ты выбираешь сам, но
начинаться оно должно с точки (.). Затем сле-
дует пара фигурных скобок ({}). Эти скобки
сообщают браузеру, где начинаются и закан-
чиваются предназначенные для него инструк-
ции. Именно сюда помещаются CSS-свойства,
которые нужно применить к HTML-элементу.
Как и раньше, свойство и значение разделя-
ются двоеточием (:), а после значения должна
стоять точка с запятой (;).
В примере создается CSS-класс с именем
«text». При каждом его использовании такие
свойства, как text-align, font-size и background-
color, будут принимать указанные нами значения.
_ Пометил?
Фигурные скобки ({}) находятся рядом
I с клавишей Р на тех же самых клавишах,
I что и квадратные скобки. Для их набора
I удерживай клавишу Shift.
Пере&ерни Страницу,
чтобы узнать, как доба-
вить CSS-класты е> тело
ч с&оего кода.
Атрибут class
Применить CSS-класс к HTML-элементу внутри тега <body> очень просто. Достаточно добавить
имя класса в открывающий HTML-тег элемента, который мы хотим отредактировать. Вместо»
атрибута style появится новый атрибут class. Этот атрибут функционирует аналогично уже
знакомым тебе атрибутам, которыми мы пользовались ранее. Рассмотрим пример применения
CSS-класса к HTML-элементам страницы:
<!DOCTYPE html>
<html>
<head>
<title>06HapyxeHMe алмаза MoHax</title>
CSS-класс
.text {
text-align: center;
font-size: 18pt;
background-color: aqua;
Атрибут class
</head>
<body>
<p class="text"Обнаружение алмаза Монах</р>
<p>B горах Сибири обнаружен алмаз Монах.</р>
<р class="text">HaxoAKa имеет большое международное значение.</р>
<р>Рабочая группа искала окаменелости.</р>
<р class="text">А не один из самых известных камней в мире.</р>
</body>
</html>
В качестве значения атри- к
бута class фигурирует имя
нашего CSS-класса. Точку вна-
чале мы не добавляли (.). Как и при
работе с другими атрибутами, мы
задали значение с помощью знака
равенства (=) и двойных кавычек (" ").
Видишь, как CSS-класс и атрибут class
легко поменяли компоновку страницы!
Алмаз Монах
Обнаружение алмаза Монах
В горах Сибири обнаружен алмаз Монах.
Находка имеет большое меж. ^народное значение.
Рабочая групп искала окаменелости.
А не один из самых известных камней в мире.
КОД НА ЯЗЫКЕ CSS
Ф CSS всегда состоит из свойства и значения. Сначала указывается имя ре-
дактируемого элемента, а потом желаемое значение. Существуют сотни CSS-
свойств и значений.
♦	Свойства и значения всегда разделяются двоеточием (:), а после значения
стоит точка с запятой (;). Между словами ставится дефис (-).
Ф CSS-свойства и значения всегда пишутся в американской версии английского
языка.
♦	Значения можно указывать словами или численно. Численные значения вы-
ражаются в таких единицах, как пиксели (рх), точки (pt) и проценты (%).
ф HTML-элементу можно назначить сразу несколько CSS-свойств. Лучше всего
это делается с помощью CSS-класса и атрибута class.
Ф Ты сообщаешь браузеру о переходе от HTML к CSS с помощью тега <style>.
CSS-классы вкладываются внутрь тега <head>.
ф Имя CSS-класса должно начинаться с точки (.). Все CSS-свойства и значения
перечисляются внутри фигурных скобок.
ф CSS-класс можно применить к любому HTML-элементу через атрибут class.
Это то. что ты
дслнек помнить
при написании
кода на языке CSS!
<
ИСПОЛЬЗУЕМ CSS-КЛАССЫ
И АТРИБУТ CLASS
CSS-классы — это простой и эффективный способ редактировать HTML-
элементы через CSS. Напишем несколько CSS-классов и воспользуемся ими
вместе с атрибутом attribute, чтобы поменять структуру нашей веб-страницы.
1.	Открой текстовый редактор и создай новый
HTML-файл с именем CSSclasses.html. Скопи- ~~~	—\
руй в него код из файла CSSproperties.html f 3afiygb Пр0 мсия.А
и отредактируй три тега <div> следующим п тонр был в этен	а
Я тоне был & этой
экспедиции!
образом:
<!DOCTYPE html>
<html>
<head>
<title>AnM33 MoHax</title>
</head>
<body>
<div>
Алмаз Монах<Ьг/>
Невероятная находка
</div>
<br/>
<div>
Похищенный алмаз обнаружен экспедицией в Сибири!
</div>
<br/>
<div>
Профессор Бейрстоун и доктор Дэй искали в Сибири окаменелости.<Ьг/>
В далекой пещере они обнаружили похищенный алмаз.
</div>
</body>
</html>
2.	Теперь добавь внутрь тега
<head> тег <style>. Код при-
мет вот такой вид:
<head>
<title>AnM33 MoHax</title>
<style>
</style>
</head>
3.	Между открывающим и за-
крывающим тегами <style>
создай CSS-класс с именем
header. Задай CSS-свойства
backgroundcolor, padding, text-
align и fontsize. Добавь также
CSS-свойства width и height CSS.
Код примет вот такой вид:
4.	Добавь CSS-класс header в пер-
вый тег <div> внутри тега <body>
с помощью атрибута class. Ты по-
лучишь вот такой код:
<style>
.header {
background-color: blue;
padding: 25px;
text-align: center;
font-size: 18pt;
width: 100%;
height: 25%;
}
<div class="header">
Алмаз Монах<Ьг/>
Невероятная находка
</div>
Создай второй CSS-класс в теге <style>
и назови его title. Этот новый CSS-класс
будет располагаться после CSS-класса
header. Задай свойства font-size, text-
align и color. Должен получиться вот
такой код:
.title {
font-size: 14pt;
text-align: center;
color: gray;
}
Почему бы
ие попробовать
другие цеета?
Продолжение
ПИШЕМ КОД
► ПРОДОЛЖЕНИЕ
6. Добавь CSS-класс title
во второй тег <div>.
Код примет вот такой
вид:	^^69
<div class="title">
Похищенный алмаз обнаружен экспедицией в Сибири!
</div>
7. Создай внутри тега <style> третий CSS-
класс с именем body. Помести его после
класса title. Задай CSS-свойство margin.
Ты получишь вот такой код:
.body {
margin: 20рх;
8. Добавь CSS-класс body в третий тег <div>.
Получится вот такой код:
<div class="body">
Профессор Бейрстоун и доктор Дэй искали в Сибири окаменелости.<Ьг/>
В далекой пещере они обнаружили похищенный алмаз.
</div>
9.
Сохрани HTML-
файл и открой
его в браузере.
Алмаз Монах
Ты увидишь, каким образом
каждый CSS-класс повлиял
на вид элемента <div>.
Отличная работа!
Но помни, что это
именно я унюхал
алмаз!
Алмаз Монах
Невероятная находка
Похищенный алмаз обнаружен экспедицией
в Сибири!
Профессор Бейрстоун и доктор Дэй искали в Сибири
окаменелости.
В далекой пещере они обнаружили похищенный
алмаз.
Несколько CSS-классов
Чтобы получить по-настоящему эффективный CSS-код, имеет смысл разбить CSS-классы по труп
пам CSS-свойств. В этом случае при компоновке страницы можно будет применять к любому
HTML-элементу несколько CSS-классов. Это очень легко. Достаточно добавить в атрибут class
имена различных классов. Рассмотрим пример:
<style>
.header {
background-color: lightgreen;
width: 70%;
height: 50%;
.text {
text-align: center;
font-size: 18pt;
}
.padding {
padding: 25px;
</style>
</head>
<body>
Ват ток мы добавили
имена нескольких
CSS-классов
в атрибут class.
<div class="header text padding">
Алмаз Монах<Ьг/>
Невероятная находка
</div>
</body>
</html>
Передерии ^границу,
чтобы больше узнать
об элементе selector.
Алмаз Монах
Невероятная находка
Использование CSS-
классов для выбора
HTML-элементов
Еще с помощью CSS-классов удобно ме-
нять CSS-свойства типа HTML-элемента.
Для этой цели служит так называемый
элемент selector. Достаточно указать в ка-
честве имени CSS-класса имя элемента,
который ты хочешь отредактировать. Ста-
вить точку перед именем CSS-класса в этом
случае не нужно. Кроме того, внутрь тега
<body> не добавляется атрибут class.

Если ты хочешь, чтобы весь текст абзацев был выровнен по центру и написан шрифтом
определенного размера, создай CSS-класс с именем «р», который будет находить и выбирать
теги <р>. Посмотрим на практике, что дает нам элемент selector:
Элемент
selector
<!DOCTYPE html>
<html>
<head>
<±111е>06наружение алмаза MoHax</title>
<style>
► P {
font-size: 16pt;
text-align: center;
background-color: lightblue;
}
</style>
</head>
<body>
<р>Алмаз Монах обнаружен профессором Бейрстоуном и доктором Дэй.</р>
<р>0 месте его нахождения сообщил Эрнест
<р>Он был спрятан в скальной трещине.</р
</body>
</html>
Алмо Мемах М -
— I
Алмаз Монах обнаружен профессором
Бейрстоуном и доктором Дэй.
О месте его нахождения сообщил Эрнест.
Он был спрятан в скальной трещине.
Элемент selector отредактировал все абзацы без
добавления атрибута class внутрь тегов <р>.
< СДЕЛАЙ САМ
СОЗДАЙ ВЕБ-СТРАНИЦУ

Ты много узнал о написании кода на языках HTML и CSS. Используй
эти знания, чтобы создать страницу для профессора Бейрстоуна.
Краткое описание задания
Создай веб-страницу, посвященную обнаружению алмаза Монах. Используй
HTML и CSS, чтобы добавить текст и картинки и получить интересную компо-
новку. На странице должны быть:
баннер заголовка;
баннер с названием;
текст про аламаз Монах;
изображение группы;
изображение алмаза;
факты об алмазе Монах.
Сохрани файл в папку Coding под именем
Пере&ерии Стра-
ницу. и ты найдешь
гото&ый KC0.
Если не знаешь, что
делать, ищи помощь
на сайте Get Ceding!
Агичп Момак Ж |	М
Обнаружение алмаза Монах
Почищенный алмаз найден в Сибири!
Бейрстоу и доктор ДЛ схлалм есисашмитос открытие
В ддлскоЯ сийнрсков пшсрс ими обнлруямлн алый Метки
Алии >шохдл Э]»т. собакк ipo$cxwpe ЬсЛрсп^им.
Квмснк бы I псткмикм трм пхи наяд ui Лема Во i ков их
Основными itaxotpceKMMMH а «рижс с 13,1м бранив Ьонл
1*»б<хам >рч низ счнгаст. что ломншели спрмтали адмзг
Они нрвклмн lh«0hnc И) oxi v лагера
Фдъзи ов адпмк
КфП ЗГИ)
Нэет хленыЙ
Пе*ы более i 10 miu*
ааомо»
Вот какая Страница
получится, если
использо&ать
этот кох)!
<!DOCTYPE html>
<html>
<head>
<title>AnM33 MoHax</title>
<style>
body {
margin: 0px;
}
.pad {
padding: 25px;
}
.header {
background-color: lightblue;
color: black;
height: 100px;
font-size: 36pt;
text-align: center;
}
.welcome {
background-color: gray;
color: white;
font-size: 16pt;
text-align: center;
height: 40px;
margin: 0px;
}
.main-text {
width: 60%;
float: left;
background-color: beige;
}
.divs {
margin: 5px;
width: 25%;
float: left;
border: 4px solid lightblue;
}
</style>
</head>
<body>
<div class="header pad">
Обнаружение алмаза Монах
</div>
<div>
<p class="welcome">
Похищенный алмаз найден в Сибири!
</р>
</div>
<div class="main-text pad">
<P>
Профессор Бейрстоун и доктор Дэй сделали сенсационное открытие.<br/>
В далекой сибирской пещере они обнаружили алмаз Монах. <br/>
Алмаз унюхал Эрнест, собака профессора Бейрстоуна.
</р>
<Р>
Камень был похищен три года назад из Дома Волковых.<br/>
Основными подозреваемыми в краже стали братья Бонд.<Ьг/>
Рабочая группа считает, что похитители спрятали алмаз.<br/>
Они прислали снимок из своего лагеря:
</р>
<img src="team.jpg" alt="The Team" style="height: 150px;"/>
</div>
<div class="divs pad">
<img src="diamond.jpg" alt="Diamond" style="width: 150px;"/>
<p style="text-align: center;">Алмаз Монах</р>
</div>
<div class="divs pad" style="text-align: center;">
Факты об алмазе<Ьг/>
Карат: 300<br/>
Цвет: зеленый<Ьг/>
Цена: более £10 миллионов
</div>
</body>
</html>
В ЗАКЛЮЧЕНИЕ
HTML и CSS — основные языки программирования
в Интернете. Теперь ты умеешь ими пользоваться и мо-
жешь создавать веб-страницы. Знание HTML и CSS —
первый большой шаг к карьере в области веб-дизайна
Вместо применения шаблонов ты можешь создать соб-
ственный уникальный дизайн. Задание выполнено!
К ЗАЩИЩАЕМ
СТРАНИЦУ ПАРОЛЕМ
СОЕДИНЕНИЕ ВЕБ-СТРАНИЦ С ПОМОЩЬЮ
ГИПЕРССЫЛОК
ЧТО ТАКОЕ JAVASCRIPT И КАК ОН РАБОТАЕТ
ПРОГРАММЫ НА ЯЗЫКЕ JAVASCRIPT,
ЗАПУСКАЕМЫЕ В БРАУЗЕРЕ
ЗАЩИЩАЕМ СТРАНИЦУ ПАРОЛЕМ
С ПОМОЩЬЮ JAVASCRIPT
САНИ€ ЗАДАНИЯ
Дорогой программист!
Я доктор Руби Дэй, ученый из экспедиции профессора Бейрстоуна. Мы
надеялись найти скелеты динозавров, но обнаружили похищенный алмаз
Монах!
Хочу рассказать тебе о странном событии. Вчера мы исследовали пещеру,
в которой нашли алмаз. Я услышала грохот, а Эрнест начал отчаянно лаять
Мы посмотрели вверх и увидели, что на нас катится огромный валун! Мы
успели отскочить, и камень упал ровно на то место, где мы были секунду
назад. В суматохе профессор Бейрстоун споткнулся и вывихнул лодыжку.
Мы с профессором сочли это происшествие очень подозрительным. Вряд
ли валун, упавший сразу после обнаружения украденной драгоценности,
это просто совпадение Профессор Бейрстоун считает, что воры узнали об
экспедиции и пытаются отпугнуть нас. Произошедшее очень напоминает
грязные штучки, к которым могли бы прибегнуть главные подозреваемые
в краже, братья Бонд.
Мы немедленно покинули бы горы, чтобы передать алмаз в надежные
руки, но из-за вывихнутой лодыжки профессора просто не сможем спу-
ститься по горным тропам. Так как мы тут пока застряли, сведения об
обнаружении алмаза следует хранить в секрете. Я боюсь, что если доступ
к странице, которую ты сделал для профессора Бейрстоуна, получат бра-
тья Бонд, наша жизнь окажется под угрозой Ты не мог бы добавить на
страницу пароль Ernest300, чтобы доступ к ней был только у меня и у про-
фессора?
Спасибо за твою помощь и усердную работу.
С наилучшими пожеланиями из опасных гор,
доктор Руби Дэй
Р. S. Проф Б. попросил послать тебе эту запись из «Энциклопедии иссле-
дователя».
Братья Бонд
Из «Энциклопедии исследователя», справочника по приключениям
Энциклопедия
ИССЛЕДОВАТЕЛЯ
Справочник
по приключениям
Домашняя страница
Содержание
Известные открытия
Известные исследователи
Предыдущие экспедиции
Братья Бонд — интернациональная банда, ворующая драгоценности. По данным
Интерпола, украденное ими за последние пятнадцать лет оценивается в сумму
более £500 миллионов.
Используют ту же тактику, что и знаменитая банда Розовых Пантер. Как правило,
мишенью братьев Бонд оказываются ювелирные дома и бутики по всему миру.
Их налеты тщательно планируются в течение многих недель.
РОЗЫСК
и II
;.2
похищение алмаза Монах
БРАТЬЯ БОНД

Ловкие пальцы Джемма Бриллиант Неуловимый Тони
вознаграждение £1 МИЛЛИОН

ЗА ИНФОРМАЦИЮ, КОТОРАЯ ПОЗВОЛИТ НАЙТИ АЛМАЗ
ИЛИ АРЕСТОВАТЬ БАНДУ
В числе приемов, которыми пользуются братья Бонд, — заезд на джипе в окно ювелирного дома и сверление
пола бутика для доступа в хранилище. Иногда члены банды маскировались под рабочих, чтобы обмануть
продавцов, а потом разбивали витрины.
Хотя полиция не нашла доказательств, похищение алмаза Монах из Дома Волковых в Москве многие при-
писывают именно братьям Бонд. Два члена банды (мужчина и женщина) делали вид, что выбирают обру-
чальные кольца. Женщина отвлекла продавцов и охрану, а мужчина маленьким топориком разбил витрину
с алмазом Монах. С места преступления они скрылись на машине, которая стояла у магазина как такси.
Система видеонаблюдения Дома Волковых была отключена за час до преступления. Интерпол полагает,
что банда в числе прочего обладает навыками в области киберпреступлений.
ГИПЕРССЫЛКИ
В кратком описании задачи доктор Дэй по-
просила тебя добавить на страницу пароль,
который не даст братьям Бонд прочитать об
обнаружении алмаза Монах. В этом разделе
ты научишься это делать.
Для этого нам потребуется новый язык про-
граммирования JavaScript. Но перед тем, как
приступить к решению задачи, мы поговорим
о том, как связать вместе две веб-страницы.
Ведь нам нужно будет связать страницу
с просьбой ввести пароль со страницей, кото-
рую ты создал для профессора Бейрстоуна.
Гиперссылки (или просто ссылки) есть на
большинстве веб-страниц, и именно они объ-
единяют группы страниц в сайты. Это может
быть слово, число, фраза или картинка, на
которой ты можешь щелкнуть, после чего бра-
узер переместит тебя в другую часть страницы
или на другую страницу.
Тег привязки:<а> и </а>
Гиперссылки создаются с помощью тега привязки <а>. Открывающий тег <а>, а закрыва-
ющий — </а>. В открывающий тег <а> помещается атрибут href. Он содержит URL (или
веб-адрес), который нужен браузеру для перехода на новую страницу. Рассмотрим пример:
Тег привязки Атрибут href	URL	Текст гиперссылки
<а href="https://www.monkdiamonddiscovery.com"Обнаружение алмаза</а>
Обнаружение алмаз;
Обнаружение алмаза Монах

href URL страницы, посвященной находке алмаза.
В качестве значения присвоим атрибуту
При выполнении Задания 1 ты уже не раз это делал: поэтому просто напиши знак равен-
ства (=) и следом адрес URL в двойных кавычках (" "). Текст между открывающим и закрываю-
щим тегами <а> превратится в ссылку. Щелчок на этом тексте приведет к переходу на страницу
алмаза Монах.
: пишем код
СОЗДАНИЕ ГИПЕРССЫЛКИ

Очень важно уметь создавать гиперссылки, так как именно они дают
доступ к различным фрагментам информации. Давай создадим стра-
ницу с гиперссылкой.
1. Открой текстовый редактор и создай но-
вый HTML-файл с именем links.hfml. До-
бавь в него следующий код:
Выбери адрес URL страницы, на которую
должна вести ссылка. Добавь его как зна-
чение атрибута href. Это выглядит так:
2.
3.
<!DOCTYPE html>
<html>
<head>
<title>CcwnKH</title>
</head>
<body>
</body>
Добавим ссылку. Вставь тег <а> с пустым
атрибутом href внутрь тега <body> нашей
страницы. Получится вот такой код:
<body>
</body>
Выбери слово или фразу, которые станут
текстом ссылки на твою веб-страницу. На-
печатай их между открывающим и закры-
вающим тегами <а>. Вот так:
<body>
<a href=" ">Жми сюда</а>
</body>
<body>
<a href="https://www.google.co.uk">
Жми сюда</а>
</body>
Сохрани HTML-файл и открой его
в браузере. На экране появится
текст, находящийся между те-
гами <а>. При щелчке на этом тексте бра-
узер перейдет по указанному адресу URL.
Жми сюда
Испробуй на ней
щелкнуть!
Связь между страницами
Для защиты сведений об алмазе Монах нам первым делом потребуется новая страница.
Именно на нее попадут все посетители. При корректном вводе пароля посетитель перейдет
на страницу со сведениями про алмаз. Если пароль неправильный, ничего не произойдет.
Связав эти страницы одну с другой, мы получим веб-сайт.
Для связи страниц нам потребуется гиперссылка. Если страницы сохранены в одном и том
же месте, предоставлять браузеру полный адрес URL не нужно — достаточно будет имени
файла. Так как оба наших HTML-файла помещены в папку Coding, мы можем написать вот
такой код:
Имя файла
<a href=,,filename.html,,>Ha3BaHne страницы<а/>
Создав страницу для ввода пароля и сохранив
ее в папку Coding, мы можем легко связать ее
с веб-страницей, построенной для профессора
Бейрстоуна в предыдущем разделе. Все, что
требуется сделать, это добавить тег <а> и атри-
бут href на обе страницы. Вот так:
Страница 2: monkdiamonddiscovery.html
<!DOCTYPE html>
<html>
<head>
Страница 1: password.html
<!DOCTYPE html>
<html>
<head>
<Т1Т1е>Алмаз MoHax</title>
</head>	ЖНММ
<body>	имя файла
<а href="password.html">
Жми здесь, чтобы выйти</а>
</body>
</head>
<body>
<a href=,,monkdiamonddiscovery.html" >
Жми здесь для перехода на
страницу алмаза Монах</а>
</body>
</html>
Пароль
Имя файла
Жми здесь, чюбы выши
Жми здесь для перехода на страницу алмаза Монах
Ссылка на странице с паролем ведет
нас на страницу со сведениями об
алмазе Монах. А ссылка на странице
алмаза возвращает нас на страницу
ввода пароля.
ПИШЕМ КОД
► СВЯЗЫВАНИЕ СТРАНИЦ
Давай посмотрим, как с помощью гиперссылок связать две страницы
и получить простой веб-сайт.
1.	Открой текстовый редактор и создай
новый HTML-файл с именем pagel.html.
Сохрани его в папку Coding. Вот код для
этого файла:
<!DOCTYPE html>
<html>
<head>
<1111е>Страница l</title>
</head>
<body>
</body>
</html>
2.	Создай второй HTML-файл с именем
page2.html. Сохрани его в папку Coding.
Скопируй и вставь в него код из файла
pagel.html. Отредактируй этот код следу-
ющим образом:
3.	Теперь создай гиперссылку. Добавь в код
первой страницы тег <а> с атрибутом href.
Значением этого атрибута сделай имя второй
страницы. Добавь текст между открываю-
щим и закрывающим тегами <а>, чтобы
получить ссылку. Вот так:
<body>
<а href="page2.html">Страница 2</а>
</body>
4.	Открой вторую страницу и создай гипер-
ссылку, ведущую на первую страницу.
Получится вот такой код:
<body>
<a href="pagel.html">Вернуться на
страницу 1</а>
</body>
<1 DOCTYPE html>
<html>
<head>
CrpcM«el*
</head>
<body>
</body>
</html>
C i раница:
Сохрани оба файла и открой их
в браузере. Ты связал две страницы!
ЯЗЫК JAVASCRIPT
Гиперссылки — это только первый шаг к отве-
чающей на действия пользователя веб-стра-
нице. Для создания по-настоящему интерак-
тивного сайта не обойтись без еще одного
языка программирования, который называ-
ется JavaScript.
Это самый популярный язык в мире. Он
преобразует написанные на HTML и CSS
веб-страницы, делая их интерактивными.
Именно JavaScript позволяет создавать кнопки
и всплывающие окна и даже сохранять
информацию. В этом разделе ты воспользу-
ешься языком JavaScript вместе с HTML, чтобы
создать пароль для страницы, информация
с которой не должна попасть в руки кибер-
преступников братьев Бонд.
В разделе «Задание 1» ты видел, как
HTML-документы составляются из набора эле-
ментов, которые редактируются с помощью
атрибутов. У языка JavaScript свой синтаксис,
или набор правил написания кода. Он со-
стоит из фрагментов, называемых инструкци-
ями, переменными, операторами и функци-
ями. Давай познакомимся с ними поближе.
Добавление JavaScript на HTML-страницу
Первым делом ты должен сообщить брау-
зеру о намерении перейти от языка HTML
к языку JavaScript. Это реализуется с помощью
тега <script>. Код JavaScript должен распо-
лагаться между открывающим и закрывающим
тегами <script>, иначе он не будет работать.
Документ HTML может содержать произ-
вольное число тегов <script>, вложенных
в тег <head> или в тег <body>.
<!DOCTYPE html>
<html>
<head>
<title>naponb</title>
</head>
<body>
<script> Ter script
</script>
</body>
</html>
внутри тега <body>
нашей Страницы. Его
еще называют бло-
ком <script>.
Инструкции
Указания браузеру, что ему де-
лать, в языке JavaScript называются
инструкциями. Программы на этом
языке, как правило, содержат мно-
жество инструкций.
Обычно инструкция начинается
с ключевого слова, сообщающего,
что будет сделано. В конце всегда
стоит точка с запятой (;). Браузер за-
пускает инструкции в порядке следо-
вания. Посмотрим, как это выглядит.
Вот что произойдет, когда мы сохра-
ним код и запустим его в браузере:
Порог* М . . К
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Точка с запятой
alert("Нам срочно нужен пароль!");
alert("Используй пароль Ernest300")
</body>
</html>
x
Пам срочно нужен пароль!
Используй пароль Гmest300
Две инструкции, заключенные между
открывающим и закрывающим тегами
<script>, запускаются друг за другом, вы-
зывая два окна с сообщениями. Окно — это
фрагмент кода JavaScript, называемый функ-
цией. Он встроен в браузер. Подробно мы
поговорим о нем чуть позже.
Код JavaScript чувствителен к регистру,
поэтому важно корректно пользоваться боль-
шими буквами. В именах фрагментов кода
JavaScript не должно быть пробелов. Имена
из двух слов имеет смысл писать в стилеВер-
блюда.
стильВерблюда — способ
соединения двух слов
в одно. Первое слово
начинается с маленькой буквы,
а второе — с большой, пробел между
ними отсутствует, и слово напоминает
верблюда с горбом. Пример применения
стиля: sayHello.
ПЕРЕМЕННЫЕ
Переменные — важная часть языка JavaScript.
Они позволяют на короткое время сохранять
информацию в браузере. Затем сохраненные
данные используются в программах, которые
делают страницу интерактивной. Без пере-
менных браузер просто ничего не запомнит.
В проверяющей пароль программе нам
потребуется переменная для хранения кор-
ректного пароля. Именно с ней браузер будет
сравнивать вариант, введенный посетителем.
Переменные хранят данные в виде слов
или чисел. Они записываются определенным
способом. Браузеру нужно сообщать о созда-
нии переменной. Это называется определе-
нием. Давай создадим переменную с именем
Эрнеста:
ЭриеСг - очень
хорошее имя1
var dogName = "Ernest";
Ключевое слово Имя переменной	Значение
Variable
Переменные всегда записываются одинаково. Каждая часть сообщает браузеру свою инфор-
мацию и понадобится для будущей программы.
Переменная состоит из:
ф Ключевого слова
Для определения переменной используется ключевое слово variable (var).
Оно сообщает браузеру, что ты создаешь переменную.
Ф Имени
Переменным можно давать любые имена, главное, чтобы они не содер-
жали пробелов (вместо этого пользуйтесь стилемВерблюда). Кроме того,
имя не может начинаться с цифры.
т Значения
Значение присваивается с помощью знака равенства (=). Если присваи-
вается текст, его нужно поместить в двойные кавычки (" "). Значения могут
содержать пробелы. После значения ставится точка с запятой (;).
Операторы
Операторы — еще один ключевой компонент языка JavaScript. Они дают способ менять значе-
ния переменных.
Операторы присваивания
teamMembers = 3;
Видищь, где здесь
СтильВерблюда?
Операторы присваивания позволяют задавать значения переменных.
Знак равенства (=): с его помощью переменная
получает значение. Это может быть как число,
так и слово или фраза. В первом случае двой-
ные кавычки (" ") не нужны. Вот пример присва- г
ивания числа:
А вот пример, в котором при-
сваивается фраза и нужны
двойные кавычки (" "): g
van
Оператор присваивания
van expeditionLeader = "Профессор Бейрстоун";
Арифметические операторы
Арифметические операторы — это способ математическим путем менять значения перемен-
ных. Они позволяют создавать численные значения.
Сложение (+): оператор сложения
создает значение, складывая числа.
Здесь мы присваиваем 3 переменной
campRations.
van campRations =2+1;
Оператор сложения
Оператор вычитания
Вычитание (-): этот оператор
создает значение, вычитая числа.
Давай присвоим 1 перемен-
ной dogBiscuits.
van dogBiscuits = 5
Всегда проверяй наличие
точки с запятой после
< переменной. >
Помни, что текстовые
значения долины быть
& двойных кавычках.
- 4;
; пишем код
ПЕРЕМЕННЫЕ И ОПЕРАТОРЫ
Переменные и операторы — важная часть языка JavaScript. Напишем
простую программу, в которой они будут использоваться.
1. Первым делом нужно создать HTML-файл
с тегом <script>, вложенным в тег <body>.
Открой текстовый редактор и создай
файл с именем variables.html. Введи
в него следующий код:
2. Пришло время JavaScript. Создай пере-
менную между открывающим и закрыва-
ющим тегами <script>. Придумай ей имя
и присвой значение с помощью знака
равенства (=). Пусть это будет число:
<!DOCTYPE html>
<html>
<head>
<title>nepeMeHHbie</title>
</head>
<body>
<script>
</script>
</body>
</html>
<script>
var diamondcarats = 300;
</script>
3.
Напоминаем, что код JavaScript чувствителен к регистру букв, поэтому регистр везде дол-
жен совпадать. Не забывай и про точку с запятой (;) в конце. Если сохранить HTML-файл
и открыть его в браузере, ничего не произойдет. Пока ты просто сохранил число 300
в переменную diamonaCarats.
<script>
Давай проверим, сохранена ли перемен-	Var diamondcarats = 300;
ная в браузере с помощью функции-	alert (diamondcarats);
оповещения. Добавь этот код	? </script>
после переменной:
Мы только что попросили
браузер запустить встроенную
в него функцию. Она вызывает
окно со значением переменной
diamondCarats.
Проверь, разрешены ли всплы-
вающие окна & теоем браузере.
Найди & Интернете информацию,
как отключить блокировку
таких окон. у
Сохрани HTML-файл и обнови стра-
ну ницу. Появится окно со значением
переменной diamondCarats. Нажми
ОК, и окно пропадет. Обнови страницу,
и окно загрузится снова.	<
4. Создадим новую переменную с помощью
оператора сложения (+), чтобы узнать
общее число людей и собак в группе про-
фессора Бейрстоуна. Назовем переменную
teamMembers и добавим окно, показыва-
ющее ее значение. Отредактируй блок
<script> вот так:
<script>
van teamMembers =2+1;
alert(teamMembers);
Сохрани файл и обнови страницу.
Окно покажет значение переменной
teamMembers. Нажми ОК.
5. Наконец, создадим переменную для хра-
нения текста с помощью оператора при-
сваивания (=). Не забудь поместить текст
в двойные кавычки (" "). Добавим всплыва-
ющее окно, показывающее значение пере-
менной. Получится вот такой код:
Братья Бонд
ок

х
X
var jewelThieves = "Братья Бонд
alert(jewelThieves);
</script>
После сохранения файла и обновления
J страницы в окне появится наш текст.
' Отличная работа!
Ты только что написал
первую программу
на языке JavaScript!
ОПЕРАТОРЫ СРАВНЕНИЯ
Операторы дают возможность не только
присваивать значения и выполнять матема-
тические действия, но и сравнивать значе-
ния переменных. Это позволяет создавать
более интерактивные страницы благодаря
коду, который делает различные вещи
в зависимости от значений переменных.
Вот список операторов сравнения:
В инструкциях JavaScript они задают вопросы
по поводу переменных. Можно написать код,
действия которого зависят от ответа на такой
вопрос. Инструкции, в которых фигурируют
операторы сравнения, называются операто-
рам if и else. Это так называемые условные
операторы, потому что они зависят от состоя-
ния переменных.
Оператор	Значение
— —	Равно
1 —	Не равно
>	Больше чем
<	Меньше чем
>=	Больше или равно
<=	Меньше или равно
УСЛОВНЫЕ ОПЕРАТОРЫ
Условные операторы — это инструкция браузеру выполнить действие только при соблюдении
некоего условия. В противном случае браузер игнорирует код с инструкциями.
Операторы if имеют определенную структуру. Они начинаются с ключевого слова (if).
Затем мы открываем скобки и пишем внутри условие. Далее открываем пару фигурных ско-
бок ({}) и внутри пишем инструкции, которые будут выполняться при соблюдении условия.
Рассмотрим пример применения
оператора равно (==). С помощью
оператора присваивания (=) создадим
переменную со значением Dr Day. За-
тем внутри оператора if попросим бра-
узер проверить, равно ли (==) значе-
ние нашей переменной тексту Dr Day.
При соблюдении условия попросим
браузер открыть окно с сообщением.
Оператор равенства
van personу= "Dr Day";
if(person == "Dr Day") {
Опера- alert("Привет, Dr Day!");
тор if }
</script>
Всплывающее окно
Фигурная
скобка
Усломш ол<р’ J
I IpuHei, Dr Day!
OK
[ Мы использовали \
I оператор if & программе. |
-1 приеетбг&ующей у
доктора Дэй! У
Если теперь мы поменяем значение нашей
переменной, окно перестанет появляться.
Ведь условие больше не выполняется. Поэтому
браузер игнорирует код в фигурных скобках
и не отображает окно.
Conditwoals *	*
< script >	...____________
var person = "Ernest";
if(person == "Dr Day") {
а1егГ("Привет, Dr Day!");
Можно воспользоваться другим опе-
ратором из таблицы и проверить
что-нибудь еще. Например, взять операторы больше чем (>) и меньше чем (<)
и сравнить два числа. Рассмотрим пример оператора больше чем (>) внутри
условного оператора.
Оператор	y<™««<w	*
больше чем
< s с г 1 pt >	. х ,4,.. -----
var diamondCaratsj= 300;
if(diamondcarats > 299) {
alert("У нас ценный алмаз!");
}
</script>
Здесь переменной присвоено
значение 300. Мы создаем опера-
тор if и просим браузер проверить,
превышает ли это значение (>) 299.
При соблюдении условия должно появиться
всплывающее окно. Так как алмаз весит
300 карат, окно появится.
Смотри. закрыва-
ющая сригуриая
скобка находится
ерсеень с ключе&ым
словом
ПИШЕМ КОД
► УСЛОВНЫЕ ОПЕРАТОРЫ
Условные операторы позволяют создавать более сложные программы,
действия которых зависят от значения переменной. Рассмотрим пример
такой программы.
1. Открой текстовый редактор
и создай HTML-файл с именем
ifstatements.htm . Добавь туда
следующий код:
<!DOCTYPE html>
<html>
<head>
<title>ycnoBMfl</title>
</head>
<body>
<script>
</script>
</body>
2. Создай условие с оператором равенства (==). При
его соблюдении должно появляться окно. Первым
делом создай переменную dogName между те-
гами <script>. Затем создай оператор if и всплы-
вающее окно. Не забудь поместить инструкции для
оператора if в скобки, а инструкции вызова окна
в фигурные скобки ({}). В результате получится вот
такой код:
<script>
van dogName = "Ernest";
if(dogName == "Ernest") {
alert("Ты нашел алмаз Монах!");
Сохрани HTML-файл Л
и открой его в браузере.
Появится окно.
Ты нашел алмаз Монах!
ОК
Да. имение я нашел алмаз!
Поналуй. это был ие самый
наденный тайник.
4. Если поменять значение перемен-
ной на твое имя, условие переста-
нет соблюдаться. Сохрани
файл и обнови страницу.
Всплывающее окно больше не появится.
ОПЕРАТОРЫ ELSE
Оператор else позволяет получать еще более интерактивные веб-страницы. Его добавляют
после оператора if, чтобы в случае, когда условие не выполняется, браузер запускал альтер-
нативный код.
Оператор else структурирован аналогично оператору if, просто мы используем другое клю-
чевое слово. Код, который должен в этом случае запустить браузер, снова помещается в фи-
гурные скобки ({}). Рассмотрим пример совместного использования операторов if и else:
Оператор
else
var name = "Tony Twinkles";
if(name == "Dr Day") {
alert("Доступ разрешен");
Удем
alert("Доступ запрещен!");
х
Доступ запрещен!
ОК
Если запустить в браузере этот код, появится
всплывающее окно. Ведь переменной при-
своено имя одного из братьев Бонд, то есть
ее значение не равно (==) Dr Day. Так как
условие оператора if не выполнено, браузер
переходит к оператору else. А вот если бы
значение переменной равнялось (==) Dr Day
и условие было соблюдено, до оператора else
дело бы просто не дошло. Соответственно,
появилось бы окно с надписью «Доступ
разрешен».
Хм! И как я теперь
узнаю, у них ли алмаз?
Отличный способ
оСгаисеить братьев-
ПИШЕМ КОД
► ДОБАВЛЯЕМ ОПЕРАТОР ELSE
Потренируемся использовать в блоке кода JavaScript одновременно
операторы if и else. Рассмотрим программу, в которой присутствуют
условия обоих типов.
1. Открой текстовый редактор и создай
HTML-файл с именем elsestatements.
html. Скопируй в него код из файла
ifstatements.html.
Внеси в этот код следующие изменения:
<!DOCTYPE html>
<html>
<head>
<title>ycnoBMfl</title>
</head>
<body>
3. Теперь добавь оператор else после опера-
тора if. Он будет запускаться при несоблю
дении условия. Получится вот такой код:
<script>
van diamondvalue = 10;
if(diamondvalue <= 9.9) {
alert("Цена: до £10 миллионов!");
</body>
alert("Цена: более £10 миллионов!")
2. Создай в блоке <script> оператор if, ис-
пользуя оператор меньше или равно (<=).
Добавь в оператор if условие, которое не
выполняется. Вот так:
var diamondvalue = 10;
if(diamondvalue <= 9.9) {
alert("Цена: до £10 миллионов!");
}
</script>
Сохрани HTML-файл и открой его
в браузере. Сработает опера-
тор else, и появится вот такое окно.
KOHTpOJ76okr-
СПИСОК
КОД НА ЯЗЫКЕ JAVASCRIPT
*	Код JavaScript помещается внутрь тегов <script>, чтобы браузер знал о пе-
реходе от HTML к другому языку программирования. Теги <script> вкладыва-
ются в тег <head> или тег <body>.
*	Как HTML и CSS, язык JavaScript обладает собственным синтаксисом. Код
чувствителен к регистру букв. Чтобы код лучше читался, оставляй простран-
ство между его фрагментами.
>	Инструкции для браузера на языке JavaScript называются операторами. Все
операторы заканчиваются точкой с запятой (;). Фигурные скобки ({}) объе-
диняют операторы в блоки кода, который запускается браузером.
>	Операторы начинаются с ключевого слова, сообщающего, какое действие
будет ими выполнено.
Переменные позволяют хранить информацию в браузере. У них есть имена
и значения. Значение может быть как текстовым, так и численным. Текстовые
значения заключаются в двойные кавычки (" "). Имена переменных из
двух слов пишутся стилемВерблюда.
Менять или задавать значение переменной можно с помо-
щью оператора присваивания, арифметических опера-
торов и операторов срав-
нения.
Условные операторы if
и else позволяют запускать
разные блоки кода в зави-
симости от значения пере-
менной.
Язык JavaScript позво-
ляет создавать Страницы,
отвечающие на дейСт&ия
ч посетителя. у
ФУНКЦИИ
Еще для написания кода на языке JavaScript важно уметь создавать функции и пользоваться
ими. Функция создается группировкой инструкций JavaScript. Сформированная группа выпол-
няет определенное действие. Функция не запустится, пока ты не попросишь об этом браузер.
Эта операция называется вызовом функции. Давай создадим функцию для вызова всплываю-
щего окна и вызовем ее:
ИМЯ фуНКЦИИ	«унхций ' ь» *
< s с г i pt >
„	function sayPassword() {	.
слово	alert("Пароль!");
function	}
sayPassword();
</script>
Вызов функции
Функции должны быть написаны одинаково. Каждая часть функции — важная инструкция
для твоего браузера.
Функция состоит из:______________________________________________________
* Ключевого слова function
Чтобы определить и создать функцию, требуется ключевое слово function.
> Имени фунуции
Затем указывается имя функции. Оно должно быть коротким и описывать
действие функции. За именем всегда следует пара скобок.
ф Фигурных скобок
За именем функции следует пара фигурных скобок ({}). В них записываются
все входящие в функцию инструкции.
Т Инструкций
Инструкции формируют тело функции. Их количество ничем не ограничено,
и запускаются они при каждом вызове функции.
* Вызова
Для вызова функции и запуска содержащегося в ней кода нужно указать ее
имя (вместе со скобками), добавив в конце точку с запятой. Функции можно
вызывать в любом месте блока <script>.
Встроенные функции
Ты можешь самостоятельно создавать функ-
ции или пользоваться функциями, встроен-
ными в браузер. Во втором случае вся работа
по написанию кода уже сделана за тебя,
и браузер знает, что делать при вызове такой
функции. Достаточно указать ее имя и инфор-
мацию, которую она должна использовать.
В языке JavaScript много встроенных функ-
ций. Например, уже знакомое тебе всплыва-
ющее окно. Это функция alert. Для ее вызова
нужно написать «alert», остальное браузер
сделает сам. Таким образом экономится время
при написании кода.
Функции и аргументы
Иногда, чтобы функция выполнила свою задачу, ей требуется предоставить какие-то данные.
В этом случае мы говорим, что передаем в функцию аргумент. Вызывая всплывающее окно
с помощью функции alert, мы каждый раз передавали в нее аргумент. Рассмотрим подробно,
как именно все это выглядит:
Аргумент
Функция
alert ("Доступ запрещен!");
Наш аргумент — это данные в скобках после имени
функции. Именно из него браузер узнает, какую ин-
формацию следует показывать во всплывающем окне.
Без аргумента функция работала бы некорректно.
В роли аргумента может выступать текст, число или
переменная. Текстовый аргумент следует заключать
в двойные кавычки (" 11). А имя переменной передается
без кавычек, вот так:
van bondBrothers = "Опасные похитители драгоценностей!";
alert(bondBrothers);
Переменная, переданная как аргумент
Передавать аргументы можно в любые функции. Имена функций и их вызовы всегда
заканчиваются парой скобок именно для того, чтобы можно было передавать в них
аргументы. Давай посмотрим, как это делается.
Добавленный
к функции аргумент
<script>	г
function sayHello(name) {
alert("Привет " + name);
}
sayHello("доктор Дэй!");
</script>
Вызов функции
Функции
11ривег. доктор Дэй!
X
В этом фрагменте кода мы создали функцию, вызывающую окно. Для этого мы добавили к ней
аргумент. Аргументы такого типа называются параметрами. Затем мы добавили код, застав-
ляющий браузер показать в окне текст вместе с нашим аргументом. И сообщили имя, которое
нужно вставить в вызов функции.
Инструкция return
До сих пор мы только передавали в функцию данные в виде аргументов. А можно сделать так,
чтобы функция возвращала нам информацию в виде значений. За это отвечает инструкция
return, которая вставляется в тело функции. Она может вернуть нам текст, число или перемен-
ную, причем эти данные становятся значением функции. Давай на примере посмотрим, как
заставить инструкцию return вернуть нам текстовый фрагмент:
Имя функции
<script>
_________function getName() {
Инструкция return "Доктор Дэй";
Return }	Возвращаемое значение
var scientist = getName();
alert(scientist);
</script>
Ча£то срункцаи выпол-
няют некое дей£т&ие
и есз&рашают результат
ч & программу.
В этом примере была создана функция getName. Мы хо-
тели, чтобы она давала нам имя помощницы профессора,
поэтому мы воспользовались инструкцией return и указали
ее имя в качестве значения. После чего сохранили имя
функции как значение переменной. Теперь во всплываю-
щем окне появляется нужное нам имя.
\ ПИШЕМ КОД
► ФУНКЦИИ И АРГУМЕНТЫ
I
Давай сгруппируем инструкции и создадим функцию. Заодно восполь-
зуемся инструкцией return, так как она пригодится нам при создании
пароля для доктора Дэй.
1.	Открой текстовый редактор и создай
HTML-файл с именем functions.html. Введи
в него следующий код:
2.	Внутри блока <script> создай функцию
с именем checkAccess, которая будет визы
вать всплывающее окно. Вот так:
clDOCTYPE html>
<html>
<head>
<Т1Т1е>Функции</Т1Т1е>
</head>
<body>
<script>
</script>
</body>
</html>
function checkAccess() {
alert("Ограниченный доступ!");
checkAccess();
3.	Сохрани HTML-файл и открой
его в браузере. Появится окно.
4.	Теперь добавь в функцию checkAccess
инструкцию return. Сохрани имя функции
в переменную. Сделай так, чтобы в окне
появлялось значение этой переменной:
Функции	*
<script>
function checkAccess() {
return "Только для членов
группы!
}
var webPage = checkAccess();
alert(webPage);
</script>
X
Только для членов группы!
ок |
Сохрани файл и обнови стра-
Лру ницу. Появится новая версия
окна.
СОВМЕСТНОЕ ПРИМЕНЕНИЕ
JAVASCRIPT И HTML
Ты уже умеешь добавлять JavaScript на
HTML-страницу, помещая код между тегами
<script>. Теперь нужно узнать, как заставить
код JavaScript работать при взаимодействии
пользователя с HTML-элементом. Чтобы что-то
случилось после щелчка на фрагменте текста
или картинке, нужно добавить код JavaScript
к HTML-тегам. Для этого существует специаль-
ный атрибут.
< Атрибуты!
Ты уне встречался
с ними & разделе
< «Задание I».
Атрибут onclick
Запустить код JavaScript при щелчке пользователя на HTML-элементе страницы очень легко.
Достаточно добавить атрибут onclick в HTML-тег, который хочется сделать интерактивным.
Атрибут onclick похож на все остальные, уже знакомые тебе атрибуты. Он добавляется
в открывающий тег предназначенного для взаимодействия HTML-элемента. В качестве зна-
чения этому атрибуту присваивается фрагмент кода JavaScript. Как ты помнишь, это делается
с помощью знака равенства (=) и двойных кавычек (” "). Не забудь про точку с запятой (;)
в конце. В атрибут onclick можно добавить любой код JavaScript. Рассмотрим пример:
<!DOCTYPE html>
<html>
<head>
<title>UBeT алмаза</1111е>
< / h e a d >	Значение, которому
<body>	Атрибут onclick	присвоен код JavaScript
<p onclick="alert('Зеленый');">
Нажми здесь, чтобы узнать цвет алмаза Монах
</р>
</body>
</html>
При щелчке на тексте между открывающим
и закрывающим тегами <р> запустится
функция JavaScript из атрибута onclick.
_ заметил?
Аргумент, переданный в функцию
alert, заключен в одинарные ка-
вычки (' ')• Ведь мы уже воспользова-
лись двойными кавычками, задавая
значение атрибута onclick. Всегда
используй одинарные кавычки внутри
двойных, иначе код не запустится.
Значения true и false с инструкцией return
С помощью атрибута onclick можно остановить
выполнение браузером инструкций в фрагменте
кода. Для этого в атрибут помещается инструкция
return и присваивается значение false.
Return — служебное слово языка JavaScript.
Если присвоить этой инструкции значение true,
браузер продолжит выполнение кода. А вот зна-
чение false приводит к немедленной остановке.
служебными называются
§•/	* слова, которые нельзя исполь-
зовать как имена функций или
переменных, потому что они яв-
ляются специальными командами,
понятными браузеру. Служебным словам '
не нужны двойные кавычки (" ").
Роюсь, эти настырные
братья Ронд где-то
рядом... ПсналуйСта.
поспеши с паролем!
Атрибут onclick и гиперссылки
Атрибут onclick и значение false позволяют написать очень полезный код JavaScript. Добавив
в атрибут инструкцию return, мы предотвратим переход по ссылке при щелчке пользователя.
Это пригодится при создании пароля для нашей страницы. Ведь человек, который вводит
некорректный пароль, не должен попасть на страницу алмаза Монах.
Для этого первым делом создай гиперссылку тем же способом, что и в начале раздела,
используя тег <а> и атрибут href. Вот так:
<body>
<а href="monkdiamonddiscovery.html">
Нажми здесь для перехода на страницу алмаза Монах
</а>
</body>
Теперь добавим атрибут onclick и инструкцию return. А инструкции return присвоим значе-
ние false. Получится вот такой код:
Инструкция return Значение false
W	<body>	г	f
<а href="monkdiamonddiscovery.html" onclick="return false;">
Нажми здесь для перехода на страницу алмаза Монах
</а>
</body>
Значение false в атрибуте onclick означает, что щел-
чок на ссылке не даст никакого результата.
Эти помонет скрыть
нашу Страницу!
ПИШЕМ КОД
HTML ЗАПУСКАЮЩИЙ
КОД JAVASCRIPT
Сделаем так, чтобы HTML-атрибут onclick запустил код JavaScript. На-
учимся создавать html-элементы, реагирующие на действия пользователя.
1. Открой текстовый редактор и создай
HTML-файл с именем onclick.html.
Введи в него следующий код:
<!DOCTYPE html>
<html>
<head>
<title>Onclick</title>
</head>
<body>
</body>
</html>
2. Создай внутри тега <body> гиперссылку,
отправляющую на поисковый сайт Google.
Используй тег <а> и атрибут href. В ка-
честве значения возьми адрес URL сайта
Google. Получится вот такой код:
<body>
<a href="https://www.google.com">
Google
</a>
</body>
3. Теперь добавь в открывающий тег <a> атрибут onclick и присвой ему JavaScript-значение
alert. Помни, что аргумент у alert нужно заключить в одинарные кавычки (' ')• Вот так:
<а href="https://www.google.com" onclick="alert('Переход на сайт Google');">
Google
</a>
Сохрани HTML-файл и открой его в браузере. Щелчок на ссылке будет вызы-
вать всплывающее окно. При нажатии ОК произойдет переход на сайт Google.
5. Теперь остановим
работу ссылки.
Вставь в атрибут
onclick инструкцию
return. Вот так:
<a href="https://www.google.com" onclick="return false;">
Google
</a>
fjk Сохрани файл и обнови страницу. Теперь после
щелчка на ссылке перехода на сайт Google не будет.
СОЗДАНИЕ СТРАНИЦЫ С ПАРОЛЕМ
Ты уже знаешь, как с помощью атрибута onclick получить интерактивные HTML-элементы,
поэтому можно начать создание страницы для доктора Дэй.
Начнем с базовой HTML-структуры:
<!DOCTYPE html>
<html>
<head>
<1111е>Пароль</1111е>
<style>
body {
~	. background-color: lightblue:
CSS-класс
.21 *	padding: 30px;
}
</style>
</head>
<body>
<p style="font-size: 30pt;"ЖАЙДЕН АЛМАЗ MOHAX</p>
<р>Для входа на сайт введите, пожалуйста, пароль.</р>
<р>Пароль:</р>
<а href =,,monkdiamonddiscovery.html">
Жми здесь, чтобы отправить пароль и посмотреть сайт
</а>
</body>	---- - -
Пароль
</html>	_
He забудь, что иащ
секретный пароль
Ernest3OO
Гиперссылка
Мы только что написали простую
веб-страницу на языках HTML и CSS.
Ссылка с нее ведет на страницу, посвя-
щенную находке алмаза Монах. Но нам
пока некуда вводить пароль. Нужно со-
здать специальное поле для его ввода.
НАЙДЕН АЛМАЗ МОНАХ
Для входа на сайт введите, пожалуйста, пароль.
Пароль:
Жми зпесь- чт<-Ч>ы отправить пзрддь и досмотреть сайт
Ter <input/>
Сайты часто требуют от пользователя ввода информации. Например, при авторизации в своей
учетной записи, заказе билетов в кино или формировании запроса на поисковом сайте. Поэтому
требование пользовательского ввода — распространенная практика программирования.
Для реализации пользовательского ввода используются разные теги, но чаще всего это
тег <input/>. Он позволяет создавать поля для ввода данных. Это непарный тег с двумя атрибу
тами: id и type. Как ты уже знаешь, их значения задаются с помощью знака равенства (=) и двой-
ных кавычек (” "). Рассмотрим пример применения тега <input/> на нашей странице:
<body>
<	р style=”font-size: 30pt;”>НАЙДЕН АЛМАЗ МОНАХ</р>
<	р>Для входа на сайт введите, пожалуйста, пароль.</р>
<р>Пароль:<input id="passwordBox” type="text"/x/p>
<	а href ="monkdiamonddiscover^. html" >	Атрибут type
Жми здесь, чтобы отправить «пароль и посмотреть сайт
</а>
</body>	Атрибут id
Тег <input/> с указанными атри-
бутами создает поле для ввода
пароля.
Атрибут id позволяет дать
тегу <input/> уникальное имя.
Ты придумываешь его сам.
Лучше, если оно легко запоми-
нается. Мы присвоим атрибуту id
значение password Box.
Это позволяет использовать
значение внутри тега <input/>
в нашем коде JavaScript. Атри-
бут id точно укажет браузеру,
какой фрагмент данных мы хотим
использовать. Без него браузер
не сможет найти пароль и про-
верить его правильность.
Пароль	*	I
НАЙДЕН АЛМАЗ МОНАХ
Для входа на сайт введите, пожалуйста, пароль.
Пароль:	Emcst300
Жми здесь, чтобы отправить пароль и посмотреть сайт
Смотри, сюда\
ионно ppefru
пароль! Г
Атрибут type
Существуют различные виды тегов <input/>, поэтому, чтобы сообщить браузеру, какой именно
тег <input/> нам нужен, требуется атрибут type. У него есть множество предопределенных зна-
чений. Вот распространенные варианты атрибута type, которые могут нам пригодиться:
Значение атрибута	Что он делает?		
text	Создает поле для ввода текста		
password	Создает поле для ввода пароля		
button		Создает нажимаемую кнопку с помощью JavaScript)	
checkbox <		———	Создает флажок, который можно установить или снять		
Возможно, ты заметил, что по-
сле присвоения атрибуту type
значения text в поле появился
текст пароля. Это небезопасно!
Только представь, что братья
Бонд окажутся рядом в момент,
когда доктор Дэй будет вводить
пароль.
Чтобы сохранить пароль
в тайне, нужно поменять значе-
ние атрибута type на password.
Теперь при вводе пароля сим-
волы будут заменяться точками.
Рассмотрим пример:
<body>
<р style="font-size: 30pt;">НАЙДЕН АЛМАЗ МОНАХ</р>
<р>Для входа на сайт введите, пожалуйста, пароль.</р>
<р>Пароль:<input id="passwordBox" type="password"/></p>
<а href="monkdiamonddiscovery.html">	Значение password
Жми здесь, чтобы отправить пароль и посмотреть сайт
</а>
</body>
Пароль X ИЙЬЫВак.
НАЙДЕН АЛМАЗ МОНАХ
Для входа на сайт введите, пожалуйста, пароль.
Пароль:	......
Жми здесь, чтобы от равить пароль и посмотреть саи
<script>
function checkPassword() {
Проверка пароля средствами JavaScript
Теперь, когда базовая HTML-структура страницы готова, пришла пора добавить JavaScript для
проверки корректности вводимого пароля. Те, кто введет Ernest3OO, попадут на страницу,
посвященную находке алмаза Монах. Все остальные увидят окно с сообщением о вводе
неверного пароля.
Первым делом нам нужно создать функцию с ко-
дом, который будет проверять корректность пароля.
Добавим ее внутрь тега <head>. Код JavaScript
можно поместить в любое место HTML-страницы,
а в нашем примере его нахождение внутри тега
<head> увеличивает читаемость кода. Не забудьте
поместить его в теги <script>, вот так:	•/"
Еще нам нужны переменные, в которых будет храниться значение пароля,
чтобы функция могла проверять правильность его ввода. Давай их добавим:
Функция
Переменная 1
Переменная 2
getElementByld
function checkPassword() {
van password = document.getElementByld("passwordBox");
van passwordEntered = password.value; 
Атрибут id
</script>
В первой переменной мы используем встроенную функцию getElementByld. Подробно ты
познакомишься с ней в разделе «Задание 3». Эта функция ищет HTML элемент по его атри-
буту id. В рассматриваемом примере мы выбрали id тега <input/>. Поэтому значением нашей
переменной станут данные, которые пользователь введет в поле в качестве пароля.
Затем мы создаем вторую переменную для сохранения введенных пользова-
телем данных. Для этого мы набираем имя первой переменной, затем ставим
точку (.) и добавляем ключевое слово value. Мы делаем так, чтобы можно
было написать оператор if, используя значение этой переменной.
Пришла очередь оператора if. Если для
второй переменной верно утверждение, что
введенный в качестве пароля текст равен (==)
Ernest3OO, гиперссылка сработает. Если же
в поле для пароля введен какой-то другой текст,
появится всплывающее окно. Оператор else тут
не нужен, так как инструкция return останавливает работу
Переверни Стра-
ницу, чтобы у&идеть
этот код!
Вот такой вид блок < sc nipt > для проверки пароля примет после добавления оператора if:
function checkPassword()
Оператор if
var password = document.getElementByldC'passwordBox");
var passwordText = password.value;
if(passwordText == "Ernest300") {
return true;
Всплывающее
окно
}
alert("Доступ запрещен!
return false;
Неверный пароль!");
</script>
Теперь нужно сделать так, чтобы код JavaScript начал работать с нашими HTML-элементами.
Рассмотрим код в теге <body> страницы. Мы хотим, чтобы щелчок на гиперссылке приводил
к вызову функции checkPassword. Значит, нужно добавить в открывающий тег <а> атрибут
onclick. Вот так:
<body>
<р style="font-size: 30pt;">НАЙДЕН АЛМАЗ МОНАХ</р>
<р>Для входа на сайт введите, пожалуйста, пароль.</р>
<р>Пароль:<input id="passwordBox" type="password,,/></p>
<а href="monkdiamonddiscovery.html" onclick="return checkPassword();">
Жми здесь, чтобы отправить пароль и посмотреть сайт
Вызов функции
</body>
НАЙ
НАЙДЕН АЛМАЗ МОНАХ
Для входа на сайт введите, пожалуйста, тароль.
11ароль:
Неверный
пароль
Для вх
Пароль
X
Доступ запрошен! Неверный
пароль
<ж
Пс1Роль
Обнаружение алмаза Монах
Нод» •инмыЦ ммя* обнаружен * С ипяра*
СДЕЛАЙ САМ
' ДОБАВЛЕНИЕ ПАРОЛЯ
Пришло время воспользоваться приобретенными навыками написания кода на
языке JavaScript и создать страницу, на которой посетителя просят ввести пароль.
Она защитит страницу, созданную в предыдущем разделе. Тот, кто знает пароль,
сможет получить доступ к сведениям о находке алмаза Монах. При неправиль-
ном вводе пароля появится окно с сообщением о запрете доступа.
Краткое описание задания
Работая над страницей, убедись, что ты запрограммировал на языках HTML
и JavaScript следующее:
>	Функцию, проверяющую введенный пароль.
>	Переменные для хранения данных, которые пользователь введет
в поле для пароля.
>	Оператор if, проверяющий корректность введенного пароля.
>	Окно, которое будет появляться при вводе некорректного пароля.
>	Текстовое поле для ввода данных.
>	Гиперссылку на страницу, посвященную обнаружению	4
алмаза Монах.	___________ w
Сохрани файл в папку Coding под
именем password.html.
Пере&ерни Страницу,
и ты найдешь
гото&ый кос).
<!DOCTYPE html>
<html>
<head>
братья Fong нас
не опередят!
body {
background-color: lightblue;
padding: 30px;
function checkPassword() {
var password = document.getElementById("passwordBox");
var passwordText = password.value;
if(passwordText == "Ernest300") {
return true;
alert("Доступ запрещен! Неверный пароль!");
return false;
</head>
<body>
<p style="font-size: 30pt;">НАЙДЕН АЛМАЗ MOHAX</p>
<р>Для входа на сайт введите, пожалуйста, пароль.</р>
<р>Пароль:<1приТ id="passwordBox" type="password"/x/p>
<а href="monkdiamonddiscovery.html" onclick="return
checkPassword();">
Жми здесь, чтобы отправить пароль и посмотреть сайт
</body>
</html>
Пароль
НАЙДЕН АЛМАЗ МОНАХ
Для входа на сайт введите, пожалуйста, пароль.
Пароль:
Жми здесь, чтобы отправить пароль и посмотреть сайт
блестящая работа! Эта Страница
с паролем сохранит алмаз Ионах.
Напоминаю, что ты монешь поме-
нять ее внешний &ид с помощью
С$$-с&сйСт&.	.
В ЗАКЛЮЧЕНИЕ
JavaScript — мощный и динамичный язык програм-
мирования, понятный всем современным браузерам.
Зная его, ты сможешь создавать интерактивные стра-
ницы, позволяющие пользователям вводить данные.
Подходит он и для написания веб-приложений.
СОЗДАЕМ
ПРИЛОЖЕНИЕ
< СОЗДАЕМ КНОПКУ СРЕДСТВАМИ jAVAJCRlPT
> ПРОГРАММИРУЕМ БРАУЗЕР С ПОМОЩЬЮ API DOM
(ОБЪЕКТНАЯ МОДЕЛЬ ДОКУМЕНТА)
Т ЗАСТАВЛЯЕМ СТРАНИЦУ ЗАПОМИНАТЬ ДАННЫЕ
С ПОМОЩЬЮ API LOCAUSTORAGE
ПРИЛОЖЕНИЕ ДЛЯ СПИСКА ЗАДАЧ
СДНИ€ ЗАДАЧИ
Дорогой программист!
Думаю, тебе приятно будет узнать, что больше подозрительных происше-
ствий не было Ты успешно справился с заданием, которое послала доктор
Дэй, и лишенные доступа к странице братья Бонд оставили нас в покое.
Твоя работа меня очень впечатлила!
Моя лодыжка уже в порядке Вчера мы спустились с гор и сейчас по Транс-
сибирской магистрали едем в Москву в купе первого класса. Я переписы-
ваюсь по электронной почте с моим старым другом, господином Волковым
из Дома Волковых. Как ты уже знаешь, именно оттуда три года назад был
дерзко похищен алмаз Монах. Это один из самых старых и уважаемых юве-
лирных домов, и господин Волков был в отчаянии от произошедшего.
Я рассказал господину Волкову о нашей находке. Сначала он не мог в это
поверить! Но я убедил его, и теперь он хочет, чтобы мы как можно быстрее
вернулись в Москву с алмазом Он уже планирует выставку, куда пригласит
самых авторитетных коллекционеров и объявит о нашем открытии.
Господину Волкову нужна помощь с планированием выставки Пока мы
в пути, я надеюсь на твое содействие. Можешь ли ты построить приложе-
ние для отслеживания списка задач? До открытия выставки нужно сделать
очень многое и ничего не забыть. Иногда я бываю крайне рассеян, так что
такое приложение было бы очень кстати.
Если не спланировать выставку со всеми мерами предосторожности, боюсь,
братья Бонд предпримут попытку вернуть алмаз себе. Посылаю тебе список
того, что нужно сделать до открытия выставки, а также посвященную Дому
Волковых запись из «Энциклопедии исследователя», которая поможет тебе
в работе над приложением
С теплыми пожеланиями из комфортабельного купе,
профессор Гарри Бейрстоун
Эн ЦИКЛОПЕЛия
ИССЛЕДОВАТЕЛЯ
Справочник
по приключениям
Домашняя страница
Содержание
Известные открытия
Известные исследователи
Предыдущие экспедиции
Дом Волковых
Из «Энциклопедии исследователя», справочника по приключениям
Дом Волковых — один из старейших в мире ювелирных домов, известный украше-
ниями с алмазами. Также знаменит своей частной коллекцией драгоценных камней.
Основан в Санкт-Петербурге в 1790-х годах. Основатель — Владимир Волков, за
свою любовь к редким и ценным камням прозванный Бриллиантовым принцем.
Дом Волковых был назначен официальным поставщиком царского двора и снабжал
русскую знать прекрасными, до крайности вычурными украшениями.
Нанять охрану
Пригласить гостей
Купить закуски & срорме алмаза и лимонад
Купить собачьи галеты уля Эрнеста
Специальная Ьыстпабка алмазэ /1<жах
Заказать ультрасовременную витрину
из небьющегося стекла
Приобрести новую бархатную подушку у/1Я алмаза
Нанять телохранителя уля защиты
господина Волкова
В наши дни Дом Волковых находится в Москве, рядом с собором
Василия Блаженного. Их алмазы славятся своим качеством и являются
одними из самых дорогих в мире.
Алмаз Монах куплен нынешним владельцем Виктором Волковым на
аукционе за неизвестную сумму и стал жемчужиной частной коллекции
Дома Волковых. Он выставлялся в антиквартной витрине, пока не был
похищен грабителями. Похищение алмаза Монах осталось нераскрытым.
После этого начались сообщения о резком падении продаж в Доме Вол-
ковых и слухи о возможном закрытии бизнеса. В последнем интервью
господин Волков сказал: «Я буду раздавлен, если придется продать
предприятие, которым владели многие поколения нашей семьи».
Дом Волковых
Деятельность: ювелиры
Основан:	1794
Основатель: Владимир Волков
Главный офис: Москва
Обслуживает: весь мир
СОЗДАНИЕ ВЕБ-ПРИЛОЖЕНИЯ
Планирование специальной выставки алмаза Монах в Доме Волковых — сложная работа для
профессора Бейрстоуна, доктора Дэй и господина Волкова. И ты поможешь им, построив при-
ложение, которое будет запускаться в браузере. С его помощью профессор составит список
задач. Выполненные задачи будут удаляться из списка.
Нам потребуются новые функции JavaScript. Сейчас страница не меняется после того, как
браузер вывел ее на экран. А профессору Бейрстоуну хотелось бы, чтобы можно было добав-
лять пункты в список и удалять их оттуда. Для этого потребуется вот такое приложение:
To-DoLfcl М
Дом Волкова
Текстовое поле
Кнопка добавле-
ния элементов
в список
Элементы удаля-
ются из списка
по щелчку
Задачи для специальной выставки
ЗН°е4/Ь ли ты?
Собачьи галеты
Добавить элемент |
Стеклянная витрина
Бархатная подушка
Нанять охрану
Нанять телохранителя
Пригласить гостей
Закуски и лимонад
В этом разделе лучше всего поль-
зоваться браузерами Mozilla Firefox
и Google Chrome. Не все браузеры
поддерживают функции, необходимые
для выполнения задания.
Нам нужно текстовое поле для ввода задач. Элемент добавляется в список кнопкой. На завер-
шенной задаче можно щелкнуть, и она пропадет из списка. Все это реализуется уже знако-
мыми тебе средствами JavaScript с помощью некоторых новых инструментов.
Текстовое поле и кнопка
Перед тем как начать знакомство с новым
кодом JavaScript, напишем базовую структуру
нашего приложения. Нам нужны текстовое
поле и кнопка. В «Задании 2» ты узнал про
тег <input/> и атрибут type. Воспользуемся
ими еще раз.
Тег <input/> позволяет создавать на стра-
нице HTML-элементы, предназначенные для
ввода данных. А атрибут type дает возмож-
ность выбирать тип такого элемента. Соот-
ветственно, для создания текстового поля
и кнопки нам потребуется вот такой код:
-I
Организация специальной выставки
Еще поместим внутрь поля и кнопки	I ।-----------
текст, чтобы пользователь знал, зачем
нужны эти элементы. Для этого добавим
в теги <input/> атрибут value:
<input type="text"/>
<input type="button"/>
Список мЛн **
<input type="text" value=" Введи задачу сюда"/>
<input type="button" уа1ие="Добавить элемент"/:»
Организация специальной выставки
Теперь поменяем CSS-свойства тегов <input/>,
чтобы придать им более интересный вид. Вос-
пользуемся CSS-классом, как в «Задании 1».
Но на этот раз вместо присвоения имени CSS-
классу задействуем для поиска и форматирова-
ния кнопки атрибут type. Получится вот такой код:
| Введи задачу сюда
Добавить элемент |
<!DOCTYPE html>
<html>
<head>
<1111е>Приложение Список задач</±1±1е>
Организация специальной выставки
бведи задачу сюда
Добавить элемент
П
input[type="button"] {
background-color:kpink;
Это селектор по типу. Он находит выбранный
нами тип атрибута и форматирует его в со-
ответствии с заданными CSS-свойствами.
</head>
<body>
<р>Организация специальной выставки</р>
type="text" уа1ие="Введи задачу сюда"/>
<br/>

Но пока мы не
сможем ввести
текст в поле или
щелкнуть на
кнопке. Активными
<input type="button" уа1ие="Добавить элемент"/:»
<br/>
< / body >	Атрибут type
</html>
поле и кнопку сде-
лает код JavaScript,
который мы сейчас
добавим.
ПИШЕМ КОД
► КАК СОЗДАТЬ КНОПКУ
Работу над приложением для профессора мы начнем с создания кнопки.
Для этого воспользуемся тегами <input/>.
1. Открой текстовый редактор
и создай HTML-файл с именем
app.html. Введи в него следую-
щий код:
2. Теперь с помощью тега <input/>
создай текстовое поле и кнопку
в теле страницы. Не забудь про
атрибуты тегов <input/>: type
и value. Атрибуту value присвой
текст, который должен появляться
в поле и на кнопке. Получится вот
такой код:
<!DOCTYPE html>
<html>
<head>
<title>CnncoK 3afla4</title>
</head>
<body>
<р>Организация специальной выставки</р>
<br/>
<br/>
<br/>
</body>
</html>
<body>
<р>0рганизация специальной выставки</р>
<br/>
<input type="text" уа1ие="Введи задачу сюда"/>
<br/>
<input type="button" уа1ие="До6авить элемент"/»
<br/>
</bOdy>	*
3.
Сохрани HTML-файл и открой
его в браузере. На экране поя-
вятся поле и кнопка.
Теперь создай CSS-класс и восполь-
зуйся селектором типа, чтобы поменять
цвет кнопки.
Организация специальной выставки
Введи задачу сюда
Добавить элемент I
Привязка кода к кнопке
Пора сделать кнопку в нашем приложении
интерактивной. Чтобы в результате щелчка
запускался код JavaScript, нужно добавить
в тег <input/> этой кнопки атрибут onclick,
как мы это делали в «Задании 2». Щелчок
должен вызывать функцию JavaScript. Для
этого сделаем значением атрибута onclick
имя этой функции.
Давай напишем код кнопки, которая при
щелчке на ней будет вызывать всплывающее
окно. Начни с создания нужной нам функ-
ции JavaScript. Затем добавь атрибут onclick
в тег <input/> кнопки. Наконец, укажи в каче-
стве значения атрибута onclick имя функции,
используя знак равенства (=) и двойные ка-
вычки (" "). Получится вот такой код:
<!DOCTYPE html>
<html>
<head>
Ter input
<1111е>Приложение Список 3afla4</title>
< script >	тв
function addltem() {
alert("He забыть собачьи галеты!");
}
</script>
</head>
Всплывающее
окно
<body>
<р>0рганизация специальной выставки</р>
<br/>
Функция
JavaScript
Пожалуйста.
не забудь про
мою еду!
<input type="text" value="BBeAH задачу сюда"/>
<br/>
Имя функции
<input type="button" value="flo6aBHTb элемент" onclick="addltem();"/>
<br/>
</body>
</html>
Атрибут
onclick
Теперь при щелчке на кнопке атрибут
onclick вызовет функцию JavaScript
и появится окно с сообщением.
Список ладан
ПИШЕМ КОД
► КНОПКИ, ЗАПУСКАЮЩИЕ КОД
Попрактикуемся в создании кнопок, вызывающих всплывающие окна.
1. Открой текстовый редактор и создай HTML-файл с именем button.html. Скопируй в него
код из файла app.html. Внутрь тега <body> добавь атрибут onclick, который будет вызывать
для кнопки функцию JavaScript. Вот так:
<!DOCTYPE html>
<html>
<head>
<1111е>Приложение Список 3afla4</title>
</head>
<body>
<р>0рганизация специальной выставки</р>
<br/>
einput type="text" уа!ие="Введи задачу сюда"/>
ebr/>
einput type="button" 7а1ие="Добавить элемент" onclick="addltem();"/>
ebr/>
</body>
</html>
Добавь внутрь
тега <head> тег <script>.
Создай функцию
JavaScript, вызывающую
окно. Вот таким образом:
3.
Сохрани HTML-файл и открой
его в браузере. Щелчок на
кнопке будет вызывать окно
с сообщением.
<head>
<title>npnnoxeHne Список задаче/
title>
</head>
function addltem() {
alert("Нанять охрану!");
ОБЪЕКТНАЯ МОДЕЛЬ ДОКУМЕНТА (DOM)
Кнопка и текстовое поле в нашем приложе-
нии заработали. Но как профессору Бейр-
стоуну добавить элементы в список? Для этого
нам потребуется объектная модель документа
(или коротко DOM).
В разделе «Задание 1» ты узнал, что
файл HTML-страницы называется документом
и что он состоит из множества более мелких
фрагментов HTML-кода, называемых HTML-
элементами. Когда мы сохраняем HTML-файл
и запускаем код в браузере, он отображает
элементы на экране. Для нашего приложе-
ния требуется возможность редактировать,
удалять или добавлять HTML-элементы после
отображения страницы браузером.
Выполняя Задание 2, ты познакомился
со встроенным функциями. DOM — это
набор таких функций, работающий с брау-
зером. Он позволяет легко строить динамиче-
ские, меняющиеся от действий пользователя
страницы.
Интерфейсы программирования
DOM — это интерфейс прикладного про-
граммирования (или API). API упрощают
написание кода. Это наборы встроенных
функций, которые легко
добавить в код HTML
и JavaScript.
РОМ псмонет
сделать наше
прылонение
интерактивным.
Функция alert, которой мы пользовались
в разделе «Задание 2», — встроенная.
Поэтому нам не пришлось писать код для
всплывающего окна, мы написали ключевое
слово alert, остальное сделал браузер. Ана-
логичным способом работает DOM. Встроен-
ные в эту модель функции позволяют менять
HTML-документы, уже показанные на экране.
DOM позволяет создавать веб-страницы,
реагирующие на действия пользователя. По-
этому для реализации интерактивного списка
нам потребуются методы и свойства DOM.
>дноу7о Интерфейсы прикладного программирования (API) экономят твое время
',1 ПРИ написании кода, предоставляя доступ к своим встроенным функциям.
Тебе не нужно будет писать эти функции с нуля, достаточно воспользоваться
возможностями API. API позволяют делать множество вещей, от сохранения
информации до добавления содержимого на страницу.
Применение DOM
DOM API структурирован особым образом,
который называется иерархией и напоминает
генеалогическое дерево. Это так называемый
объект документа. Отдельные HTML-элементы
структуры соединены друг с другом, как члены
одной семьи. Такое структурирование позво-
ляет использовать другой язык программи-
рования, например JavaScript, для доступа,
изменения, добавления или удаления любого
HTML-элемента внутри документа.
DOM позволяет менять отдельные
HTML-элементы после их отображения на
экране. Посредством методов и свойств DOM
находится HTML-элемент, а затем редактиру-
ется с помощью JavaScript.
Тебе нужно научиться использовать эти
свойства и методы вместе с JavaScript, ведь
профессору Бейрстоуну требуется возмож-
ность видеть список задач, а также добавлять
и удалять его элементы.
Методы и свойства DOAA
Ключевое слово DOM
Прежде чем пользоваться встроенными функциями	document. точка
DOM, нужно сообщить браузеру, что тебе нужен
доступ к этому API. Для этого в начале инструкций
DOM всегда добавляется вот такой фрагмент кода:
Затем нужно сообщить браузеру, какими функциями DOM ты собираешься пользоваться.
В DOM существуют встроенные функции, называемые методами и свойствами, позволяющие
редактировать HTML-элементы. Методом называется доступное действие, например добавление
или удаление HTML-элемента. Свойство же — это значение, которое можно отредактировать,
например, присвоить HTML-элементу фрагмент текста.
Ключевое слово DOM отделяется от имени метода или свойства DOM точкой (.). Так как
DOM дает доступ к HTML-элементам страницы, названия многих методов DOM содержат слово
«element». В разделе «Задание 2» ты использовал метод DOM в этом фрагменте кода:
document.getElementById("password");
Ключевое Точка Метод DOM Атрибут id
слово DOM
Здесь мы сообщаем браузеру о намерении
воспользоваться DOM и просим с помощью
метода DOM getElementByld найти HTML-элемент.
В конце мы заставляем браузер искать
HTML-элемент именно с этим атрибутом id.
'bI заметил?
Разделение фрагментов кода точ-
кой (.). Это так называемая уточ-
няющая запись. Точка сообщает
браузеру, что мы будем работать
с методами и свойствами DOM.
Редактирование приложения средствами ЬОМ
Используем метод DOM, чтобы найти в приложении HTML-элемент по его атрибуту id. После
этого отредактируем его с помощью свойства DOM. Вот как это выглядит.
Метод getElementByld
Метод getElementByld — удобный
способ поиска нужного HTML-
DOM
Ключевое слово
method
Атрибут id, кото-
рый нужно найти
элемента в блоке кода. Чтобы им вос-
пользоваться, добавь после ключевого
document.getElementById("list");
слова атрибут id нужного элемента,
заключенный в скобки. Вот так:
Мы попросили браузер найти на нашей странице
HTML-элемент с атрибутом id, имеющим значе-
ние «list».
Свойство innerHTML
DOM-свойство innerHTML дает доступ к редактированию HTML-элементов нашего приложения.
Содержимое HTML-элемента затем можно использовать в качестве значения в коде JavaScript.
Переменная
HTML-элемент
Всплывающее
окно
var showList = document.getElementById("list");
alert(showList.innerHTML);
Мы создали переменную,
которой присвоили содер-
жимое HTML-элемента «list»,
воспользовавшись атрибу-
том id. Затем было добавлено
всплывающее окно, в котором
отображается значение этой
переменной. Браузеру эта
информация доступна, по-
тому что мы задали свойство
innerHTML переменной.
Атрибут id
РОМ чувствительна
к регистру. Прове-
ряй местополонение
прописных буке.
Мы хотим задать
innerHTML
Ha следующей
Странице ты узнаешь,
как испсльзо&ать
метсх) и с&сйСт&о.
Воспользуемся методом getElementByld и свойством innerHTML для вызова окна.
<!DOCTYPE html>
<html>
<head>
<title>0KHO co cnncKOM</title>
</head>
Атрибут id
<body>
<div id="list">KynMTb Эрнесту новый oujetiHMK</div>
var showList = document.getElementById("list");
alert(showList.innerHTML);
</script>
</body>
</html>
Свойство
innerHTML
Метод
getElementByld
Итак, с помощью ме-
тода getElementByld мы нашли
тег <div>, атрибут id которого
имеет значение «list». С тегами <div> ты имел
дело, выполняя Задание 1. Это контейнеры
для фрагментов содержимого, и мы пользу-
емся ими для деления страницы на разделы.
Содержимое тега <div> было сохранено
в переменную. Затем с помощью свой-
ства innerHTML мы показали значение этой
переменной во всплывающем окне. Поменяв
текст тега <div>, мы автоматически изменим
текст в окне.
ОююсосгмзАм
Купить Эрнесту новый ошейник
х
Купить Эрнесту новый ошейник
ок
Суперсписск!
ПИШЕМ КОД
► МЕТОДЫ И СВОЙСТВА
Давай посмотрим, как с помощью метода getElementByld и свой-
ства innerHTML найти и отредактировать HTML-элемент.
1. Открой текстовый редактор и создай
HTML-файл с именем methods.hfml.
В теге <body> используй тег <input/>
для создания кнопки. Еще добавь *
пустой тег <div>. Вот так:
2. Создай внутри тега <head> функцию
JavaScript с методом getElementByld
для поиска пустого тега <div>.
Через свойство innerHTML присвой
тегу <div> какой-то текст. Вот так:
<!DOCTYPE html>
<html>
<head>
<title>MeTOAbi</title>
</head>
<body>
<input type="button" value="Добавить
элемент"/>
<div id="container"x/div>
</body>
</html>
<script>
function addltem() {
document.getElementById("container").innerHTML = "Элемент для запоминания
}
</script>
3.	Сделай так, чтобы щелчок на кнопке вызывал нашу функцию JavaScript. Добавь в тег
<input/> атрибут onclick, а в качестве значения присвой ему имя нашей функции. Вот так:
<input type="button" уа1ие="Добавить элемент" onclick="addltem();"/>
<div id="container"x/div>
Методы -t * . М
Сохрани HTML-файл
и открой его в браузере.
Ты увидишь кнопку.
При ее нажатии текст из свой-
ства innerHTML будет добавлен
в тег <div>.
Добавить элемент
Элемент дтя запоминания
Добавление элементов в приложение
Итак, ты знаешь, как методами и свойствами
DOM менять HTML-элементы в приложении.
Теперь нужно научиться с помощью DOM до-
бавлять в приложение HTML-элементы. Ведь
профессор Бейрстоун хочет сам составить
список. В DOM существует два метода,
которые вместе с JavaScript позволяют
решить такую задачу.
Метод createElement
Метод createElement создает новые
HTML-элементы, например тег <div>,
кнопку или абзац. Имя типа создаваемого
HTML-элемента заключается в двойные ка-
вычки (" ") и скобки после ключевого слова.
Вот так:
DOM
Ключевое
слово method
HTML-элемент,
который мы хотим
создать
document.createElement("div");
Мы сохраним новый элемент в переменную с помощью оператора присваивания (=),
с которым ты познакомился в разделе «Задание 2». Теперь можно воспользоваться свойством
innerHTML и задавать содержимое нового элемента перед отображением его на экране.
Метод appendChild
Метод appendChild позволяет до-
бавлять новые HTML-элементы к
Создаем <div>
<script>
var newDiv = document.createElement("div");
существующим. Новый элемент ото-
бражается на экране под уже имею-
щимися. Добавляемый HTML-элемент
нужно заключить в скобки после
ключевого слова. Вот так:
newDiv.innerHTML = "Professor Bairstone";
document.body.appendChild(newDiv);
</script>
Местополо- appendChild
жение
Задаем
innerHTML
Методы appendChild
u createElement позво-
ляют добавлять
элементы e> список
e> приложении.
Заметил?
Все методы и свойства DOM
записываются стилемВерблюда.
Рассмотрим пример создания нового HTML-элемента с помощью методов createElement
и appendChild. Это будет тег <div> с фрагментом текста внутри. Этот тег формирует
раздел или контейнер для других HTML-элементов.
<!DOCTYPE html>
<html>
<head>
<1И1е>Приложение Список 3afla4</title>
< / h ea d >
,	,	Атрибут id
<body>
<div id="list">CnMCOK задач</Ь1у>
< sc nipt >
Переменная var newltem = document.createElement("div");
newltem.innerHTML = "Элемент добавлен в список";
document.getElementByld("list").appendChild(newltem);
</script>	Л
</body>	appendChild
</html>
Создание
тега <div>
Добавление
HTML-элемента
Первым делом мы создали тег <div>
и присвоили его атрибуту id значение list
Именно к нему мы будем добавлять новый
HTML-элемент методом appendChild.
Затем мы открыли тег <script> и со-
здали блок кода JavaScript В первой строчке
блока методом createElement был создан
элемент <div>. Мы сохранили его в перемен-
ную newltem. Если хочешь, можешь дать ей
другое имя.
В следующей строчке кода JavaScript
переменной присваивается текст из свой-
ства innerHTML. Сохраненный в этой перемен-
ной наш новый тег <div> теперь содержит
текст.
Ты не псьерышь.
насколько рассеян-
ным бывает профессор
РейрСтсун!
Списсжхиим
Список задач
Элемент добавлен в список
В последней строчке методом getElementByld
по атрибуту id ищется первый создан-
ный нами тег <div>. После этого методом
appendChild сохраненный в переменной тег
<div> добавляется в первый тег <div> стра-
ницы.
При запуске кода в браузере мы увидим,
что к первому тегу <div> добавился еще один.
ПИШЕМ КОД
► ДОБАВЛЯЕМ НОВЫЕ HTML-
ЭЛЕМЕНТЫ
Теперь твоя очередь применить методы creoteElement и oppendChild.
Используй DOM и JavaScript, чтобы щелчок на существующем
HTML-элементе приводил к созданию нового. Такие API, как DOM,
упрощают построение приложений.
1.	Открой текстовый редак-
тор и создай HTML-файл
с именем newelements.html.
Добавь тег <div> (с атрибу-
том id)z который содержит
текст.	Ш
2.	Создай функцию внутри
тега <head>. Ее код выглядит так:
3.	Заставь функцию создавать
новые теги <div> с помощью
метода creoteElement. Со-
храни новый элемент <div>
в переменную и присвой ему
какой-то текст с помощью
свойства innerHTML. Полу-
чится вот такой код:
<!DOCTYPE html>
<html>
<head>
<title>HoBbie элементы</Т1Т1е>
</head>
<body>
<div id="list">Щелкни, чтобы добавить
элемент</д!у>
</body>
</html>
<head>
<title>HoBbie элементьк/
title>
<script>
function addltem() {
}
</script>
</head>
function addltem() {
var newltem = document.createElement("div");
newltem.innerHTML = "Новый элемент";
}
</script>
4.	Используй метод getElementByld для поиска тега <div> внутри тега <body>. Методом
appendChild добавь новый тег <div> в тег <div> внутри тега <body>. Вот таким образом:
<script>
function addltem() {
var newltem = document.createElement("div");
newltem.innerHTML = "Новый элемент";
document.getElementByld("list").appendChild(newltem);
}
</script>
5.	Теперь нам не хватает только вызова функции внутри тега <body>. Добавь к тегу <div>
внутри тега <body> атрибут onclick, чтобы щелчок на тексте из этого тега вызывал функ-
цию additem. Получится вот такой код:
<body>
<div id="list" onclick="addltem();">Щелкни, чтобы добавить элемент<^^>
</body>
6. Сохрани HTML-файл и открой его в брау- зере. Каждый щелчок на тексте «Щелкни здесь» будет добавлять новый элемент <div>. f А как добавить \ 1 & прилонение	Нмиемеме ~	ж Щелкни, чтобы добавить элемент Новый элемент Новый элемент Новый элемент Новый элемент Новый элемент		 Новый элемент ✓ •	*""*4* ••Гу • / у /Итере&ерии\ ML Страницу 1 к и узнаешь! gF
ПРИЛОЖЕНИЕ ДЛЯ СПИСКА ЗАДАЧ
Теперь, когда ты знаешь, что такое DOM и как она работает, пришло время создать приложе-
ние для списка задач. В начале раздела «Задание 3» ты научился добавлять текстовые поля
и кнопки с помощью тега <input/>. Вспомним, как это делается:
<!DOCTYPE html>
<html>
<head>
<1111е>Приложение Список задач</11Ие>
</head>
<body>
<р>Организация специальной выставки</р>
< b г / >
<input type="text" уа1ие="Введи задачу сюда"/>
<Ьг/>
<input type="button" уа1ие="Добавить элемент"/»	Кнопка
<br/>
</body>
</html>
Список юж
Организация специальной выставки
Введи задачу сюда
Добавить элемент
Профессор Бейрстоун уже может вве-
сти в текстовое поле задачу, но щелчок на
кнопке пока не дает никакого результата.
Чтобы при щелчке элемент добавлялся в спи-
сок, потребуются методы и свойства DOM.
Чтобы кнопка заработала, нужно до-
бавить атрибут onclick в тег <input/>. Этот
атрибут должен вызывать функцию. Также
нам понадобится пустой тег <div>, который
будет играть роль списка задач. Добавляе-
мый в список элемент будет вставляться в этот
пустой тег <div> с помощью методов DOM.
Получится вот такой код:
<body>
<р>Организация специальной выставки</р>
<br/>
<input type="text" value="BBefln задачу сюда"/>
<br/>
<input type="button" уа1ие="Добавить элемент" onclick="addltem();,7>
<br/>
<div id="list,,x/div>
</body>
<div>
Атрибут onclick
Добавим в тег <head> функцию, которая будет
запускаться щелчком на элементе. Она должна
методом creoteElement создавать тег <div>z
который будет сохраняться в переменную
newltem. Текст внутри нее зададим через свой-
ство innerHTML. Методом getElementByld найдем
в теле страницы тег <div>z атрибут id которого
имеет значение «list». Методом appendChild
добавим в список элемент newltem. Внутри
тега <head> появится вот такой блок <script>:
Создание нового
тега <div>
Присвоение
innerHTML
нового тега
<div>
function additem() {
van newltem = document.createElement("div");
newltem.innerHTML = "Новый элемент";
document.getElementByld("list").appendChild(newltem);
Добавление нового
тега <div> в тег
<div> внутри тега
<body>
Поиск атрибута id
Организация специальной выставки
Запустив этот код в браузере, мы
увидим, что теперь кнопка работает.
При каждом ее нажатии в списке появля-
ется текст «Новый элемент». —
Введи задачу сюда
Добавить элемент
Новый элемент
Новый элемент
Новый элемент
Новый элемент
Добавление задач
Приложение постепенно начинает приоб-
ретать нужную форму. Теперь при каждом
нажатии кнопки в списке появляется новый
элемент. Но профессор Бейстоун пока не мо-
жет ввести в поле текст задачи и добавить его
в список.
Чтобы исправить эту досадную недора-
ботку, внесем коррективы в две строчки кода.
Прежде всего следует добавить в тег <input/>
нашего текстового поля атрибут id. Получится
вот такой код:
Атрибут id
<input type="text" id="box" value="Введи задачу сюда"/>
Теперь нужно сделать так, чтобы свойству innerHTML нового тега <div> присваивалось значе-
ние из текстового поля. Для этого найдем текстовое поле по его атрибуту id, воспользовавшись
методом getElementByld. После этого получим доступ к значению, внеся в блок <script > следу-
ющие изменения:
function addltem() {
var newltem = document.createElement("div");
newltem.innerHTML = document.getElementById("box").value;
document.getElementByld("list").appendChild(newltem);
Ссылочное значение
Атрибут id
Слисок пион V
Организация специальной выставки
‘ Собачьи галеты
Добавить элемент |
Стеклянная витрина
Бархатная подушка
Нанять охрану
Нанять телохранителя
Пригласить гостей
Закуски и лимонад
Теперь профессор Бейрстоун может
заменить текст в поле элементом,
который нужно добавить в список.
Любой введенный текст функция additem
превратит в содержимое нового тега <div>.
И можно добавлять свои варианты в список
задач.
L KOHTpOJ76L,.T-
I	НЬ1И СПИСОК
РАБОТА С ЬОМ API
Объектная модель документа (DOM) — это интерфейс прикладного про-
граммирования (API — Application Program Interface). Запущенный в брау-
зере HTML-документ становится частью DOM, которая называется объектом
документа. Структура этого объекта позволяет редактировать индивидуаль-
ные HTML-элементы.
♦	Встроенные функции DOM позволяют редактировать уже отображенные на
экране HTML-элементы. Это важно при создании интерактивных страниц или
отвечающих на действия пользователя веб-приложений.
*	Для доступа к DOM применяются ключевое слово document и уточняющая
запись через точку (.). После точки идут новые инструкции.
Методы и свойства DOM применяются для редактирования HTML-элементов.
♦	Метод getElementByld ищет на странице HTML-элемент по атрибуту id.
*	Свойству innerHTML можно присвоить любой
HTML-элемент, чтобы потом задавать или редактировать
его содержимое.
♦	Метод createElement создает HTML-элементы. Нужно только
указать браузеру, элемент какого типа тебе нужен.
♦	Метод appendChild позволяет
добавлять новые HTML-элементы
к уже существующему.
РОИ экономит еремя
и упрощает созда-
ние динамических
&еб-Страниц!
ПИШЕМ КОД
► БАЗОВОЕ ПРИЛОЖЕНИЕ
Построим базовое приложение с текстовым полем и кнопкой для
добавления задач в список. Используй DOM и JavaScript, чтобы
добиться добавления задачи в список после щелчка на кнопке.
1. Открой текстовый редактор и создай HTML-файл с именем basicapp.html. Скопируй туда
код из файла app.html. Отредактируй код, добавив в текстовое поле атрибут id по твоему
выбору. Вот так:
<!DOCTYPE html>
<html>
<head>
<Т111е>Приложение Список 3afla4</title>
</head>
<body>
<р>0рганизация специальной выставки</р>
<br/>
<input type="text" id="box" уа1ие="Введи задачу сюда"/>
<br/>
<input type="button" уа1ие="Добавить элемент"/>
<br/>
</body>
</html>
Добавь пустой тег
<div> в тег <body>. До-
бавь в тег <div> атри-
бут id. Получится вот
такой код:
<input type="button" уа1ие="Добавить элемент"/>
<br/>
<div id=,,list,,x/div>
3. Теперь добавь атрибут onclick в тег <input/> кнопки. Заставь его вызывать функцию
JavaScript. Это делается вот так:
<input type="button" уа1ие="Добавить элемент" onclick="addltem();,7>
4. Добавь пустую функ-
цию JavaScript в тег
<head>. Вот вид блока
<script>:
<head>
<Т1Т1е>Приложение Список задач</Т1Т1е>
<script>
function addltem() {
}
</script>
</head
5. Теперь воспользуйся DOM и напиши функцию additem, создающую новые теги <div> при
нажатии кнопки. Функция будет присваивать тегу <div> значение из текстового поля через
свойство innerHTML. В конце она добавит новый HTML-элемент в тег <div>z вложенный в тег
<body> методом appendChild. Вот как выглядит такой код:
function addltem() {
var newltem = document.createElement("div");
newltem.innerHTML = document.getElementByld("box").value;
document.getElementByld("list").appendChild(newltem);
Сгмсокма» X __
Сохрани HTML-файл
и открой его в браузере.
Теперь ты можешь вводить
в поле свой текст. После щелчка
на кнопке этот текст будет добавлен
в список задач.
ицЬ09°Э
Прекрасная работа!
Теперь я могу
добавлять задачи
е> список!
Организация специально» выставки
Бархатная подушка
Добавить элемент |
Стеклянная витрина

Удаление из приложения средствами ЬОМ
Ты уже умеешь применять DOM для
поиска и добавления HTML-элементов
на страницу. Но что если профессор
Бейрстоун ошибется и добавит в список
неверный пункт? Или требуется удалить
из списка завершенную задачу? Нужно
научиться удалять HTML-элементы
из приложения средствами DOM.
Предбтаеь. что я по
ошибке добавил
& список пару шер-
стяных ноское.
Метод removeChild
Действие метода removeChild противоположно методу appendChild. Вместо добавления одного
HTML-элемента к другому он убирает один HTML-элемент из другого. Чтобы им воспользо-
ваться, выбери подлежащий удалению HTML-элемент с помощью атрибута id и скажи брау-
зеру, что хочешь его убрать. Вот так:
Ищет родительский
HTML-элемент
Удаляет дочерний
HTML-элемент
document.getElementById("list").removeChild(this);
Ты уже знаешь, что HTML-теги можно вклады-
вать друг в друга. Метод removeChild удаляет
HTML-элемент из указанного
тобой HTML-элемента
по атрибуту id.
Все элементы в объекте
документа связаны, как
в генеалогическом дереве, вает на HTML-элемент, через который была
вызвана функция. Рассмотрим пример:
Нс&ые сррагменты
к<х)а еще больше
у&еличи&ают интер-
акгиенобть нашего
приложения.
HTML-элемент, вложенный в другой, называ-
ется дочерним. А тот HTML-элемент, в который
вкладывают, называется родительским. Метод
removeChild удаляет дочерний HTML-элемент
из родительского.
Вместе с методом removeChild применяется
ключевое слово this из JavaScript. Оно указы-
<!DOCTYPE html>
<html>
<head>
Аргумент
function removeltem(item) {
document.getElementByld("list").removechild(item);
</head>
Родительский
<div>
Дочерний
<div>
<div id="list">	Ключевое слово this
Бархатная подушка для алмаза
<div onclick="removeltem(this);">
Шерстяные носки
</div>
</div>
</body>
</html>
В этом примере родительским элементом
является первый тег <div> с атрибутом id,
равным «list». Вложенный в него тег <div>
с текстом про шерстяные носки — дочерний.
При щелчке на этом тексте мы ищем <div>
с именем list методом getElementByld.
Затем мы используем метод removeChild
и ключевое слово this для удаления этого
текста. Ты уже видел в «Задании 2», что для
работы функции ей нужно передать аргу-
мент. Аргумент item и ключевое слово this
фиксируют HTML-элемент, который мы хотим
удалить. Теперь профессор может удалять
пункты списка, просто щелкая на них мышью.
Чтокутьпь W 
4
Бархатная подушка для алмаза
Шерстяные носки
Что купить *
Бархатная подушка для алмаза
Рассеянный
просрессср
£ейр£тоун!
ПИШЕМ КОД
► УДАЛЕНИЕ HTML-ЭЛЕМЕНТА
Потренируемся в удалении HTML-элементов с помощью метода
removeChild и ключевого слова this.
1. Открой текстовый редактор и создай
HTML-файл с именем remove.html. Добавь
дочерний и родительский теги <div>. За-
дай атрибут id родительского тега <div>:
2. Добавь в тег <head> функцию JavaScript,
удаляющую со страницы дочерний
тег <div>, которая сначала методом
getElementByld находит родительский тег
<div>, а затем методом removeChild уда-
ляет дочерний тег <div>. Вот так: _________
<!DOCTYPE html>
<html>
<head>
<Т1Т1е>Удаление элементов*:/title>
</head>
<body>
<div id="list">
Охрана для господина Волкова
<div>
Шерстяные носки
</div>
</div>
</body>
</html>
<script>	\
function removeltem(item) {
document.getElementByld("list").removeChild(item);
}
</script>
3. В конце добавь атрибут onclick в дочерний 4.
тег <div>, чтобы щелчок на тексте этого
тега приводил к удалению его из списка.
Атрибут onclick должен вызывать функцию
и использовать ключевое слово this:	<
<div onclick="removeltem(this);"> В
Шерстяные носки	£
</div>
Сохрани HTML-файл и открой
его в браузере. Щелкни на
второй строчке, и она исчезнет
из списка.
Удаление нескольких HTML-элементов
Ты здорово преуспел! Теперь ты умеешь удалять HTML-элемент методом removeChild. Но как
быть, если профессору Бейрстоуну захочется удалить несколько пунктов списка? В этом случае
нам снова потребуются DOM и JavaScript. Нужно сделать так, чтобы при каждом применении
метода creoteElement добавлялся атрибут onclick. Мы возьмем метод DOM и зададим атрибут
с помощью ключевого слова onclick:
**"”'•* .onclick
Затем мы заставим атрибут onclick вызывать функцию,
по щелчку удаляющую элемент. Вот так:
<!DOCTYPE html>
<html>
<head>
<Т1Т1е>Приложение Список 3afla4</title>
function addltem() {
Все эти задачи нумно
удалить из списка!
Задание атри-
бута onclick
van newltem = document.createElement("div");
newltem.innerHTML = document.getElementBy!d("box").value;
newltem.onclick = removeitem;
document.getElementByld("list").appendChild(newltem);
}
function removeltem() {
document.getElementByld("list").removeChild(this);
}
</script>
</head>
<body>
Вызов функции
removeitem
<р>0рганизация специальной выставки</р>
<input type="text" id="box" value="BBefln задачу сюда"/>
<br/>
<input type="button" уа1ие="Добавить элемент"
onclick="addltem();"/>
<div id="list"x/div>
</body>
</html>
В этом примере мы создали тег <div> методом creoteElement и сохранили его в переменную,
что позволило присваивать его свойству innerHTML вводимый в поле текст. Затем средствами
DOM новый элемент был присвоен атрибуту onclick. И теперь щелчок на элементе вызывает
функцию removeitem, которая удаляет элемент из списка.
ПИШЕМ КОД
► УДАЛЕНИЕ НЕСКОЛЬКИХ
HTML-ЭЛЕМЕНТОВ
Воспользуйся новыми знаниями и построй приложение, в котором из
списка можно удалять более одного элемента. Каждый освоенный то-
бой навык позволяет сделать наше приложение более совершенным.
1.	Открой текстовый редактор и создай HTML-
файл с именем removemore.html. Скопи-
руй в него код из файла basicapp.html.
Он будет иметь вот такой вид:
( За эту историю с братьями
1 £онд я получил кс£ть!
\ Vce по плану!
<!DOCTYPE html>
<html>
<head>
<11Ие>Приложение Список задач</ТдЛ:1е>
<script>
function addIten() {
var newltem = document.createElement("div");
newltem.innerHTML = document.getElementByld("box").value;
document.getElementByld("list").appendChild(newltem);
}
</head>
<body>
<р>Организация специальной выставки</р>
<br/>
<input type="text" id="box" value="BBefln задачу сюда"/>
<br/>
<input type="button" value="Добавить элемент" onclick="addItem();"/>
<br/>
<div id="list"x/div>
</body>
</html>
2.	Отредактируй функцию additem, вложенную в тег <head>, задав атрибут onclick. Он дол-
жен добавляться ко всем новым HTML-элементам. Сделай так, чтобы щелчок вызывал новую
функцию. Добавь в блок <script> новую строчку кода:
function addltem() {
var newltem = document.createElement("div");
newltem.innerHTML = document.getElementBy!d("box").value;
newltem.onclick = removeitem;
document.getElementByld("list").appendChild(newltem);
3.	Добавь в блок <script> функцию removeitem, которая с помощью метода getElementByld
будет искать теги <div> в теле страницы. Затем с помощью метода removeChild и ключевого
слова this она удалит вызвавший ее элемент. Вот вид блока <script> после добавления
этой функции:
function addltem() {
var newltem = document.createElement("div");
newltem.innerHTML = document.getElementByld("box").value;
newltem.onclick = removeitem;
document.getElementById("list").appendChild(newltem);
}
function removeltem() {
document.getElementById("list").removeChild(this);
}
</script>
Я Виктор Волков Рад с тобой
познакомиться! Я так благо-
дарен, тебе за помощь! Меня
очень впечатлило т&ое уме-
ние писать кос). у
▼	▼ ▼	▼ Т ▼
ПИШЕМ КОД
► ПРОДОЛЖЕНИЕ
4.	Окончательный вариант кода нашего приложения может выглядеть так:
<	!doctype html>	Z Эта &ыСта&ка \
<	html>	I Станет сенсацией!
<	head>	х	\
<1дЛ1е>Приложение Список задач</1111е>
<script>
function addltem() {
var newltem = document.createElement("div");
newltem.innerHTML = document.getElementByld("box").value;
newltem.onclick = removeitem;
document.getElementByld("list").appendChild(newltem);
}
function removeltem() {
document.getElementByld("list").removeChild(this);
}
</head>
<body>
<р>3адачи для специальной выставки</р>
<br/>
<input type="text" id="box" value="BBefln задачу сюда"/>
<br/>
<input type="button" value="flo6aBHTb элемент" onclick="addltem();"/>
<br/>
<div id="list"x/div>
</body>
</html>
Сгмсок MX fac <
----------------------------------------------1
Задачи для специальной выставки
Слисок эаМ *
-	—................I
Задачи для специальной выставки
Сохрани HTML-
файл и открой его
в браузере. Теперь
можно добавлять элементы
в список и удалять их оттуда.
Добавить элемент
Стеклянная витрнна
Бархатная подушка
Нанят!, охрану
Шерстяные носки
Закуски и лимонад
Добавить элемент |
Стеклянная витрина
Бархатная подушка
11анять телохранителя
Закуски и лимонад
СОХРАНЕНИЕ СПИСКА ЗАДАЧ
Теперь профессор Бейрстоун может добавлять и удалять элементы в нужном количестве.
Но, возможно, ты заметил, что после обновления страницы список исчезает. Дело в том, что
HTML-элементы добавлялись и удалялись только на экране. Мы не сохраняли список и не
вносили изменений в HTML-файл. Чтобы браузер запомнил наш список, потребуется API
localStorage, доступный в HTML5 (пятой версии языка HTML).
Этот API позволяет сохранять информацию в браузере, что дает доступ к данным даже
после обновления или закрытия страницы. Как и DOM, localStorage представляет собой набор
легких в применении функций.
Чтобы воспользоваться localStorage, достаточно ключевого слова localStorage (написанного
стилемВерблюда) и имени сохраняемой информации. Ее значение задается с помощью знака
равенства (=) и двойных кавычек (" "). Вот так:
Ключевое слово
localstorage
Информация
сохранена
Имя localStorage
localstorage. storageName = "информация";
удалена
Для удаления данных из localStorage	г
достаточно присвоить пустое значение.	 ' localstorage.storageName =
Вот так:
Для просмотра сохраненной с помощью
localStorage информации используется клю-
чевое слово и имя переменной. Вот так:
<!DOCTYPE html>
<html>
<head>
<title>Anna3 MoHax</title>
</head>
<body>
localstorage.valuableDiamond = "Алмаз
alert(localstorage.valuableDiamond);
</script>
</body>
</html>
A
Ключевое слово

ПРИМЕНЕНИЕ API LOCALSTORAGE
Давай сохраним информацию в браузере с помощью localStorage. Это
позволит сохранить список в приложении профессора Бейрстоуна.
1.	Открой текстовый редактор и создай HTML-файл с именем storage.html. Внутрь тега <body>
нового файла введи следующий код:
<!DOCTYPE html>
<html>
<head>
<title>XpaHeHwe</title>
</head>
<body>
<input type="text" id="box" уа1ие="Введи задачу сюда"/хЬг/>
<input type="button" id="save" уа1ие="Сохранить" onclick="save();"/><br/>
«input type="button" id="load" уа1ие="3агрузить" onclick="load();,7>«br/>
Сохраненный элемент: <div id="savedList"></div>
</body>
</html>
2.	Теперь добавим в тег <head> функцию, которая использует localStorage для сохранения
введенного в текстовое поле значения. Не забудь про стильВерблюда, когда будешь писать
ключевое слово localStorage. Должен получиться вот такой код:
function save() {
var newltem = document.getElementByld("box").value
localstorage.box = newltem;	__________
}
</script>
Для этого у пран нения
лучше есего поЭхоЭит
браузер Google Chrome
или Mozilla Firefox.
I
3.	Теперь добавим в блок <script> функцию, которая методом getElementByld ищет пустой
тег <div>. Через свойство innerHTML присвоим этому тегу информацию, сохраненную
с помощью localStorage. Должен получиться вот такой код:
function save() {
van newltem = document.getElementByld("box").value;
localstorage.box = newltem;
}
function load() {
var savedDiv = document.getElementByld("savedList");
savedDiv.innerHTML = localstorage.box;
}
</script>
4.	Сохрани HTML-файл и открой его в браузере.
Введи текст в поле и нажми кнопку Сохранить.
5.	Нажми кнопку Загрузить. На экране появится значение, введенное в поле. Обнови стра-
ницу. Элемент исчезнет с экрана. Но при щелчке на кнопке Загрузить сохраненный с по-
мощью localStorage текст будет загружен в браузер.
Пригласить гостей
Сохранить |
Загрузить |
Сохраненный элемент:
| Введи задачу сюда
Сохранить I
'Ь1 заметил?
Ключевое слово localStorage написано
в стилеВерблюда. Перая буква строчная,
а второе слово начинается с прописной
буквы.
Загрузить |
Сохраненный элемент:
Пригласить гостей
Хрмем X
Сохранение и загрузка средствами localstorage
Теперь, когда ты познакомился с localStorage, посмотрим, как с его помощью можно сохра-
нять и загружать приложение профессора Бейрстоуна. Все результаты редактирования спи-
ска задач следует сохранить в localStorage. Также нужно написать код, загружающий список
из localStorage, когда профессор открывает приложение в браузере. Рассмотрим изменения,
которые требуется внести в блок <script>:
<!DOCTYPE html>
<html>
<head>
<11±1е>Приложение Список задач</1111е>
<script>
function addltem() {
var newltem = document.createElement("div");
newltem.innerHTML = document.getElementBy!d("box").value;
newltem.onclick = removeitem;
document.getElementByld("list").appendChild(newltem);
Вызов функции сохранения списка
function removeItem() {
Функция
сохране-
ния списка
Функция
загрузки
списка
Сохраненный
в localStorage
список
document.getElementByld("list").removechild(this);
saveList ( );
Вызов функции сохранения списка
function saveList() {
localStorage.storedList = document.getElementByld("list").innerHTML;
}
function loadList() {
document.getElementByld("list").innerHTML = localstorage.storedList;
</head>
<body>
<р>0рганизация специальной выставки</р>
<input type="text" id="box" value="BBeAH задачу сюда"/>
<br/>
<input type="button" value="flo6aBHTb элемент" onclick="addltem();"/>
<div id="list"x/div>
</body>
</html>
Сохранение списка
Для сохранения списка нужно создать функ-
цию savelist, использующую localStorage.
Для этого нужно выбрать имя переменной,
которой будет присваиваться сохраняемая
в localStorage информация. После этого
методом getElementByld мы найдем нужный
тег <div> в теле страницы. Напоследок через
свойство innerHTML мы получим содержимое
этого тега и сохраним его.
Список нужно сохранять при каждом
добавлении и удалении элемента, поэтому
функции additem и removeitem после запуска
должны запускать функцию savelist.
Загрузка списка
Для загрузки списка нужна еще одна функция loadlist. При ее вызове свойству innerHTML
тега <div> будет присваиваться атрибут id со значением «list» с тем, что было сохранено
в localStorage.
Функцию loadList следует вызывать так, чтобы при завершении загрузки браузера она
загружала наш список. Чтобы избежать попыток загрузки списка, который не был сохранен,
перед работой с localStorage используем оператор if. Вот так:
<div id="list"x/div>
<script>
if(localstorage.storedList) {
load List(); 
}	Вызов функции,
</script>	загружающей
список
£ез оператора if наш
сохраненный список
не загрузится!
!---------
Оператор if проверяет перед загрузкой, есть
ли в localStorage сохраненный список. После
сохранения полного блока кода и запуске
приложения добавляемые в список элементы
будут находиться в хранилище, даже если
закрыть файл и открыть его заново.
и ' ' ' I
[ Пригласить гостей
Добавить элемент |
Стеклянная витрина
Бархатная подушка
Нанять охрану
Удаление из localStorage
До корректной работы функции loadList остался всего один шаг. Сейчас при работе с приложе-
нием добавлять и удалять элементы можно щелчками мыши. Но после загрузки сохраненного
списка из localStorage ты уже не сможешь удалять элементы таким способом.
Дело в том, что в localStorage сохраняются только HTML-элементы, а не добавляемый в мо-
мент их создания атрибут onclick. Нужно вернуть этот атрибут в каждый пункт списка, чтобы
функция removeitem могла работать и после загрузки списка из localStorage. Нужно добавить
в функцию loadList еще один фрагмент кода, чтобы она приняла вот такой вид:
Код,
начина-
ющий
цикл
function loadList() {
document.getElementBy!d("list").innerHTML = localstorage.storedList;
^"for(var i = 0; i < list.children.length; i++) {
list.children[i].onclick = removeitem; 
Коя запу< каемый
в цикле
Условие для
цикла for
Мы вставили цикл в функцию loadList. Он до-
бавляет в функцию removeitem атрибут onclick
для каждого загружаемого из localStorage
элемента. При этом с каждым добавленным
в список задач HTML-элементом увеличива-
ются показания счетчика.
Более подробно ты познакомишься с цик-
лами в «Задании 5», а сейчас достаточно
знать, что цикл состоит из трех частей.
\Циклом называется
а специальный код JavaScript,
^•9 снова и снова запускающий
один и тот же фрагмента кода.
Программисты используют циклы, чтобы
не вводить один и тот же код много раз.
Для цикла требуются
*	Код начала цикла
*	Условие, проверяющее, можно
ли запустить цикл
*	Код, запускаемый на каждой
итерации цикла
СДЕЛАЙ САМ
ПРИЛОЖЕНИЕ «СПИСОК ЗАДАЧ»
Примени новые навыки и построй приложение, которое требуется про-
фессору Бейрстоуну для организации специальной выставки алмаза
Монах. Используй JavaScript с API DOM и localStorage, чтобы создать
список, который профессор сможет формировать самостоятельно.
Убедись, что щелчок на задаче приводит к ее удалению из списка.
Краткое описание задания
Для написания кода нашего приложения используй языки HTML и JavaScript,
а также новые API.
Убедись, что ты добавил все эти элементы.
*	Функцию, средствами DOM добавляющую элемент в список.
* Функцию, средствами DOM убирающую элемент из списка.
*	Функцию, которая сохраняет список с помощью localStorage.
*	Функцию, которая загружает список с помощью localStorage.
* Текстовое поле для пользовательского ввода задач.
*	Кнопку, щелчок на которой добавляет элемент в список.
Сохрани файл в папку Coding под именем listapp.html.
Готовый коЭ
приложения -
на следующей
Не забудь,
что помощь монио
получить иа сайте
Get Coding!
<!DOCTYPE html>
<html>
<head>
<11Ие>Приложение Список задач</11Ие>
function addltem() {
var newltem = document.createElement("div");
newltem.innerHTML = document.getElementById("box").value;
newltem.onclick = removeitem;
document.getElementByld("list”).appendChild(newltem);
saveList();
}
function removeltem() {
document.getElementById("list").removeChild(this);
saveList();
}
function saveList() {
localstorage.storedList = document.getElementByld("list").innerHTML;
}
function loadList() {
document.getElementById("list").innerHTML = localstorage.storedList;
for(var i = 0; i < list.children.length; i++) {
<body>
<р>Дом Волковых</р>
<р>3адачи для специальной выставки</р>
<Ьг/>
<input type="text" id="box" value="BBefln задачу сюда"/>
<br/>
<input type="button" уа1ие="Добавить элемент" onclick="addltem();"/>
<br/>
CiMcatt эодач w
</body>
</html>
Дом Волковых
Задачи для специальной выставки
Собачьи галеты
Добавить элемент |
Стеклянная витрина
Бархатная подушка
Нанять охрану
Нанять телохранителя
Пригласить гостей
Закуски и лимонад
В ЗАКЛЮЧЕНИЕ
Теперь с помощью CSS
придай приложению
&от такой &ид!
Применение таких API, как DOM и localStorage, при на-
писании кода на языках HTML, CSS и JavaScript позволяет
создавать более сложные и интерактивные страницы и при-
ложения. API DOM дал тебе доступ к мощным функциям
браузера, позволяющим динамически редактировать HTML
при взаимодействии пользователя со страницей или прило-
жением. Отличная работа!
ПЛАНИРУЕМ МАРШРУТ
♦ ДОБАВЛЯЕМ МАТЕРИАЛ С ДРУГОЙ СТРАНИЦЫ
* ВСТРАИВАЕМ КАРТУ В СТРАНИЦУ
С ПОМОЩЬЮ ВЕБ-АР1
♦ ПРИМЕНЯЕМ API КЕУ
* ИЗУЧАЕМ ПРИНЦИП РАБОТЫ ТЕГА <IfRAME>
♦ ПЛАНИРУЕМ МАРШРУТ
С ПОМОЩЬЮ КАРТ GOOGLE
сАНИ€ задания
Дорогой программист!
Думаю, тебе будет приятно узнать, что после долгого путешествия мы, нако-
нец, оказались в Москве. Сейчас мы находимся в тайном месте, так как не
хотим, чтобы кто-либо кроме, господина Волкова, знал о привезенном нами
алмазе Монах Господин Волков пришел к нам с визитом — он очарователь-
ный человек. Я счастлива, что мы нашли его потерянную драгоценность
Вместе с профессором Бейрстоуном они спешно занимаются подготовкой
выставки. Твое приложение нам очень помогло, и пока все идет по плану.
Но есть одна вещь, о которой господин Волков и профессор Бейрстоун пока
не подумали как безопасно перевезти алмаз с нашей тайной квартиры
в Дом Волковых?
Известно, что братья Бонд подстерегали в засаде и дерзко грабили машины
курьеров, перевозящие дорогостоящие ювелирные украшения Посылаю
тебе запись из «Энциклопедии исследователя», чтобы ты понял, что я имею
в виду. Мы можем доставить алмаз в магазин своими силами, но профессор
Бейрстоун настолько известен, что мы боимся привлечь к себе внимание.
Мы решили, что лучше я привезу алмаз к парку Горького. Там меня будет
ждать начальник службы безопасности господина Волкова, и вместе мы
доставим алмаз в Дом Волковых, расположенный рядом с собором Васи-
лия Блаженного Не поможешь ли ты в планировании маршрута по городу?
Нам бы очень пригодилась веб-страница со встроенной в нее картой. Будет
ужасно, если мы заблудимся или братья Бонд направят нас по ложному
пути. Только представь, что мы можем снова потерять алмаз Монах1
Спасибо, что снова помогаешь нам Все уже практически готово. Мы только
что напечатали приглашения на выставку и собираемся разослать их гостям
С наилучшими пожеланиями из нашего убежища,
доктор Руби Дэй
Э Н к И К Л О П ЕД и я
ИССЛЕДОВАТЕЛЯ
Справочник
по приключения м
Домашняя страница
Содержание
Известные открытия
Известные исследователи
Предыдущие экспедиции
Преступления братьев Бонд
Из «Энциклопедии исследователя», справочника по приключениям
Грабежи братьев Бонд — дерзкие похищения драгоценностей бандой, из-
вестной как братья Бонд. Большая часть похищенного ими пропадала бесследно.
Обычно украденные драгоценности вскоре продаются на черном рь!нке, но счита-
ется, что у братьев Бонд существует тайное место для хранения награбленного.
Интерполу известны прозвища трех главарей банды: Ловкие Пальцы, Джемма
Бриллиант и Неуловимый Тони. Они руководят другими мелкими бандитами,
которые работают наводчиками, обеспечивают транспорт и помогают укрывать
краденое.
-44
Жд у твоего от еет а
и ос под ин Волков
будет очень рад видеть тебя
на специальной выставке,
устраиваемой П)омом Волковых,
21 июня в 7 часов вечера
в И) оме Волковых рядом с собором
Василия Вложенного в Москве.
сЛ1ы приглашен на встречу
с почетными гостями
профессором Вейрстоуном,
доктором В)эй и Эрнестом
послушать о сенсационном открытии,
сделанное в их последней экспедиции.
Один из бандитов является квалифицированным киберпреступником с доступом к правительственным
базам данных. Во всех случаях во время совершения преступлений система видеонаблюдения оказывалась
выведенной из строя.
Кроме разбойных нападений на ювелирные бутики братья Бонд знимаются грабежами курьерских автомо-
билей, доставляющих драгоценности. Они маскируются под дорожных рабочих и используют фальшивые
дорожные знаки, чтобы заманить водителей в тупик и там ограбить.
Возможно, неуловимость банды обусловлена постоянным изменением тактики. Ни одно преступление
не повторяется, что затрудняет попытки предсказать их дальнейшие действия.
ДОБАВЛЕНИЕ СОДЕРЖИМОГО ЧЕРЕЗ ВЕБ-АР1
Ты познакомился с зданием и знаешь, что нужно сделать для доктора Дэй, поэтому пришла
пора писать код! Это задание будет отличаться от трех предыдущих, но волноваться не стоит.
При построении веб-страниц и веб-приложений зачастую можно избежать рутинной черновой
работы.
Задача по созданию страницы со встроен-
ной картой может показаться очень сложной,
но нам не нужно делать все с нуля. Доста-
точно написать код, вызывающий адрес URL
с нужной картой из Интернета. Программисты
называют это интеграцией одной страницы
в другую.
Нам следует написать код, соединяющий
нашу страницу с сервером, на котором хра-
нится другой сайт. Так мы получим доступ
к данным с этого сервера.
При вставке на страницу
нового фрагмента
данных говорят, что
данные встраиваются
в нее. Встроенное содержимое
становится частью страницы.
Веб-АР1
Ты уже знаешь, что такое API, и даже поль-
зовался двумя из них (DOM и localStorage)
в разделе «Задание 3». Эти API дали тебе
доступ к полезным встроенным функциям.
API бывают разными, и тот, с которым мы
будем сейчас работать, немного отличается
от уже знакомых тебе инструментов.
Предназначенные для интерграции с дру-
гими сайтами API иногда называют «веб-
API» или «веб-службами». Они дают доступ
к встроенным функциям сайта, что позволяет
легко добавлять на страницу дополнительное
содержимое.
Через веб-API на сайт можно вставить мно-
жество вещей. Возможно, ты уже сталкивался
с веб-службами, которые давали возмож-
ность:
добавлять карты;
добавлять кнопки Like и Share для
социальной сети Facebook;
делиться видео с YouTube и Twitch.

Благодаря веб-API можно легко и быстро
создавать сложные сайты. Для встраивания
карты и планирования маршрута мы исполь-
зуем веб-API Maps.
В Интернете есть несколько сайтов, позво-
ляющих встраивать свои карты в веб-стра-
ницы. Большинство из них бесплатны. Самыми
популярными являются Google Maps и Bing
Maps от Google и Microsoft.
Для поиска оптимального маршрута для
доктора Дэй и начальника службы безопас-
ности Дома Волковых мы используем сервис
Google Maps. Возможно, ты уже прибегал
к нему для поиска адресов, но на этот раз
ты узнаешь, как создать собственную карту
и встроить ее в веб-страницу.
Веб-A PI с картами
Для работы с веб-API Maps следует зарегистрироваться на сайте Google и получить специаль-
ный код, который называется ключом API. Это пароль для доступа твоей веб-страницы к кар-
там на сервере Google. Без него встроить карту не получится. Получить ключ API ты сможешь
на странице:
https://developers.google.com/maps/documentation/embed/
Ключ API представляет собой длинный код
из букв и цифр. Каждый ключ индивидуален
и выглядит примерно вот так:
3н°еЦ/ь ли ты?
Для получения ключа API службы Google
Maps нужна учетная запись Google. Для
ее получения ты должен быть старше
13 лет. Если тебе еще нет тринадцати,
спроси у родителей, нельзя ли воспользо-
ваться их учетной записью, или попроси
у них помощи в регистрации. Дополнитель-
ную информацию ты найдешь на странице
support.google.com/?hl=ru.
API key
Пере&ерни Страницу,
чтобы получить
с&ой ключ API.
Google и логотип Google — зарегистрированные товарные знаки Google Inc., используются с их разрешения.
ПИШЕМ КОД
► ПОЛУЧАЕМ КЛЮЧ API
ДЛЯ GOOGLE MAPS
Давай посмотрим, как получить ключ API для Google Maps. Он нам
потребуется при создании маршрута для доктора Дэй.
1. Зайди на сайт API Google Maps, воспользовавшись следующей ссылкой:
https://developers.google.com/maps/documentation/embed/
2.
Google Mops
Найди и нажми кнопку GET A KEY.
Появится окно, в котором нужно
нажать CONTINUE.
4. Теперь авторизуйся в учетной записи
Google. Если тебе еще нет 13 лет, по-
проси помощи у взрослых. Окроется «Кон-
соль разработчика». Прочитай условия
использования сервиса. Для продолжения
работы ты должен с ними согласиться.
После этого из выпадающего списка
нужно будет выбрать вариант Create
a new project и нажать Continue.
Google Mops Я
кии»

Скопируй полученный ключ
API в свой текстовый редак-
тор. Сохрани файл в папку
Coding с расширением .txt.
Назови его APIkey.txt.
Затем тебя попросят создать
ключ API. Просто нажми
кнопку Create.
Google и логотип Google — зарегистрированные товарные знаки Google Inc, используются с их разрешения.
Ключ API появится на экране.
Это длинный код, состоящий
из букв и цифр. Все коды уни-
кальны, но выглядят аналогично.
Например:

Сохрани ключ ДР],
оедь он тебе еце
понадобится!
Имей о е»иду, что
описанная процедура
монет измениться, если
Google обно&ит программ-
ное обеспечение.
ВСТРАИВАНИЕ СОДЕРЖИМОГО
Теперь, когда ты узнал, что такое встраивание и получил ключ API для Google Maps, можно
приступить к работе над страницей для доктора Дэй. Чтобы встроить содержимое другого
сайта на свою страницу, тебе потребуются новые HTML-теги и атрибуты.
Тег <if rame>
Для добавления на страницу карты Google
нам нужен новый тег HTML— <iframe>. От-
крывающий тег <iframe>, а закрывающий —
</iframe>. Он создает плавающий фрейм,
позволяющий встраивать внутрь содержимое
с другого сайта. У тега есть несколько атрибу-
тов, позволяющих менять способ отображения
встроенного фрагмента.
Прежде всего это атрибут пути (src), уже
знакомый тебе по разделу «Задание 1». Он
сообщает браузеру, какой фрагмент данных
ты хочешь встроить, и выглядит как адрес URL.
При интеграции твоего сайта эта информация
крайне важна для браузера. Рассмотрим всю
процедуру на примере страницы, посвящен-
ной обнаружению алмаза Монах:
<!DOCTYPE html>
<html>
<head>
Атрибут source
</head>
<body>
<iframe src="https://www.monkdiamonddiscovery.com">
</iframe>
</body>
</html>
Обнаружение алмаза V
I

Небольшой фрагмент страницы, посвященной находке
алмаза, который мы предоставили как адрес URL, будет
встроен в твою страницу. Но увидеть эту встроенную
страницу непросто из-за ее маленького размера. По-
этому в открывающий тег < if name > нужно добавить
атрибуты, меняющие размер, форму и вид встроенного
фрагмента. Вот список всех доступных тебе атрибутов:
Имя атрибута	Что он делает?		""	"""""	11 Примеры значений
src	Предоставляет адрес URL для встраи- ваемого фрагмента данных	http://www.bing.com
width	Задает максимальную ширину тега <iframe>	600рх; 20%
height	Задает максимальную высоту тега <iframe>	бООрх; 20%
frameborder	Задает ширину границы вокруг тега <iframe>	Орх; 4рх
style k		Задает стиль тега <if rame> через CSS-свойство и значение	border: Орх
Посмотрим, как с помощью этих атрибутов поменять вид тега <iframe> и встроенного содержи-
мого. Напоминаем, что атрибуты всегда добавляются в открывающий тег. Вот так:
<!DOCTYPE html>
<html>
<head>
<title>HaxoflKa алмаза</1111е>
</head>
<body>
<iframe
width="350px"
Атрибут	heights"350px
frameborder="0px"
style="border: 0px
s rc=" https: //vjvm . monkdiamonddiscovery. com" >
Атрибут width
Атрибут
frameborder
Атрибут style
Нмолю ow
Обнаружен™ алмаза Мон
Мы присвоили атрибутам width
и height одинаковые значения,
превратив тег < if name > в ква-
драт. Атрибут frameborder и
CSS-свойство border получили
значение 0 пикселей. Поэтому
тег <iframe> плавно перехо-
дит в страницу. Обычно такие
значения присваивают, когда
хотят, чтобы встроенное со-
держимое выглядело как часть
страницы.
ПИШЕМ КОД
► ИСПОЛЬЗОВАНИЕ ТЕГА < IFRAME >
Теперь, когда ты знаешь, что такое тег <iframe> и как он работает,
давай используем его и его атрибуты и поменяем способ отображения
встроенного в нашу страницу содержимого.
1. Открой текстовый редактор и создай
HTML-файл с именем iframe.html. Добавь
внутрь тега <body> открывающий и закры-
вающий тег <iframe>, чтобы получился вот
такой код:
<!DOCTYPE html>	й
<html>
<head>
<title>iFrames</title>
</head>
3. Добавь атрибут пути, присвоив ему в
качестве значения адрес URL. Вот так:
ciframe
width="350px"	М
height="350px"
frameborder="0px"
style="border: 0px"
src="https://www.bing.com">
</iframe>
2.
<body>
<ifname>
</iframe>
</body>
</html>
4. Сохрани HTML-файл и открой его
в браузере. Выбранный сайт будет
встроен в страницу.
Попробуй поменять атрибуты
height и width тега < if name > и посмотри,
Задай внутри открывающего тега <if rame>
атрибуты width, height, frameborder и style.
Вот так:
В
<body>	Jf
< if name
width="350px"
height="350px"
frameborden=,,0px"
style="border: 0px">
</iframe>
</body>
как изменится встроенный фрагмент.
Мне очень нра-
вится этот но&ый
способ добавления
материалов на
нашу Страницу.
ВСТАВКА КАРТЫ GOOGLE
Надеюсь, ты убедился в пользе тега <iframe>.
Посмотрим, как он поможет нам добавить
на страницу карту Google. Простейший вид
такой карты называется встроенным поиском.
Мы воспользуемся API Google Maps Embed.
Получив от пользователя ключевое слово, на-
пример название страны, города или улицы,
этот API создает на его базе карту.
Адреса URL
Для работы с API Google Maps Embed нужно добавить в атрибут source тега <iframe>
адрес URL. Для корректного встраивания карты он должен содержать несколько важных
фрагментов информации. Посмотрим, какую информацию следует включить в адрес URL,
чтобы добавить на нашу страницу карту Москвы:
Ключ API
https://www.google.com/maps/embed/vl/search?q=Moscow&key=API-KEY
Путь
Функция поиска API
Параметры строки запроса
Первая часть адреса URL — путь к API
Google Maps Embed. Затем нужно сооб-
щить API, какими встроенными функциями ты
хочешь воспользоваться. Нам нужна функция
поиска на сервере Google, поэтому добавим
ее в адрес URL. За ней идут так называемые
параметры строки запроса.
^^^о. Строкой называется фрагмент
o'	данных в виде последовательное^
символов. Строки могут состоять
как из букв, так и из цифр.
Параметр — это альтернативное
название аргумента, передаваемого
в функцию, чтобы она смогла выполнить
действие.
Параметры строки
Параметрами строки называются части
адреса URL, которые содержат перемен-
ные — это фрагменты информации, завися-
щие от пользователя. В нашем примере два
параметра: карта для поиска (Москва)
и наш уникальный ключ API.
Параметры строки запроса структуриру-
ются определенным образом, чтобы предо-
ставить серверу Google доступ к хранящимся
в переменных данным. Они состоят из ключа
и значения. Адрес URL для карты Москвы ты
увидишь на следующей странице.
https://www.google.com/maps/embed/vl/search?q=Moscow&key=API-KEY
l__ JI______________________________________________И____I I____1
Кл»4 Значение Ключ Значение
Этот адрес URL содержит два параметра, разделенных знаком &. Во-первых, ключ запроса,
во-вторых, ключ API. Они оба содержат важную информацию для браузера:
Ключ параметра	Что он делает?	Пример значения
q	Предоставляет адрес для поиска	Moscow; London
key L		Предоставляет ключ API для доступа на сервер Google	API-KEY
Эти два параметра нужны API Google Maps
Embed, чтобы найти нужную нам карту и за-
тем интегрировать ее в нашу страницу. Давай
используем их в нашем адресе URL, присвоив
атрибуту source тега <iframe>. Сохранив файл
и открыв его в браузере, мы увидим, что в стра-
ницу теперь встроена карта Москвы.
<!DOCTYPE html>
<html>
<head>
<title>MocKBa</title>
</head>
<body>
<ifname
width=,,450px"
height="450px"
fnameborder=,,0px"
iiuill
style="border: 0px"
s rc="https://vmw.google.com/maps/embed/vl/search ?q=Moscow&key=API-KEY”>
</iframe>
</body>
</html>
к
ПИШЕМ КОД
ВСТРАИВАНИЕ КАРТЫ GOOGLE
Давай встроим в страницу карту Google для Москвы. Это позволит
тебе запланировать маршрут для доктора Дэй и начальника охраны.
1. Открой текстовый редактор и создай
HTML-файл с именем citymap.html. Скопи-
руй в него код из файла iframe.html
и отредактируй следующим образом:
<!DOCTYPE html>
<html>
<head>
<title>KapTa ropofla</title>
</head>
<body>
<iframe>
</iframe>
</body>
</html>
2. Добавь в открывающий тег <iframe> атри-
буты width, height, frameborder и присвой
им следующие значения:
<body>
<iframe
width="450px"
height="450px"
frameborder="0px"
style="border: 0px">
</iframe>
</body>

3. Добавь в открывающий тег <iframe> атрибут source. В качестве адреса URL укажи API
Google Maps Embed с двумя параметрами. Параметру q присвой место, которое тебе
нужно на карте, а параметру key — твой уникальный ключ API. Атрибут source примет вот
такой вид:
<iframe
width=,,450px"
height=,,450px"
frameborder=,,0px”
style="border: 0px"
src="https://www.google.com/maps/embed/
vl/search?q=Moscow&key=API-KEY”>
</iframe>
4. Сохрани HTML-файл и открой его в браузере.
Ты увидишь встроенную в страницу карту.
ПЛАНИРОВАНИЕ МАРШРУТА
Теперь можно приступить к планированию
маршрута для доктора Дэй и начальника
службы безопасности. Для этого нам потребу-
ется новый адрес URL, построенный немного
другим способом, и новая функция из API
Google Maps Embed.
Вместо функции search возьмем функцию
directions, формирующую переход из одной
указанной нами точки в другую. Доктору Дэй
нужно перевезти алмаз от парка Горького
к собору Василия Блаженного, поэтому наш
новый адрес URL будет выглядеть так:
Функция directions
Пуп.
https://www.google.com/maps/embed/vl/directions?
Параметры строки
origin=GorkyParkJMoscow&destination=StBasilJMoscow&key=API-KEY
Как и раньше, первая часть адреса URL состоит из пути к API Google Maps Embed. После
этого мы добавляем функцию API, которая называется directions. Затем следуют три параме-
тра: начальная и конечная точки и ключ API. Первые два параметра могут иметь много зна-
чений, но проще всего присвоить им название нужного места, за которым следует название
города. Эти два новых ключа дают браузеру следующую информацию:
г Ключ параметра	Что он делает?	Пример значения
origin	Указывает точку начала маршрута	Gorky Ра г k, Moscow
destination	Указывает точку конца маршрута	StBasil, Moscow
Заметил?
Между названиями объекта
и города стоит запятая (,), после
которой отсутствует пробел.
Я так хочу у&идеть
собор Василия
Еланениого!
Добавим этот новый адрес URL в наш атрибут source и сразу увидим, каким маршрутом
доктору Дэй и начальнику службы безопасности следует перемещаться по Москве:
<!DOCTYPE html>
<html>
<head>
<title>CeKpeTHbiM маршрутс/title>
</head>
<body>
ciframe
width="650px"
height="650px"
f rameborder=',0px”
style="border: 0px"
src="https://www.google.com/maps/embed/vl/directions ?
origin=GorkyPark,Moscow&destination=StBasilJMoscow&key=
API-KEY">
</iframe>
</body>
</html>
Секретный
маршрут
Это именно то,
что нам нунно
для безопасной
достатки алмаза
Монах & Вол-
ковых!

СДЕЛАЙ САМ
’ ПЛАНИРОВАНИЕ МАРШРУТА
Прекрасная работа! Ты научился встраивать в сайт сторонние матери-
алы с помощью веб-API и сервиса Google Maps. Теперь самостоятельно
спланируй маршрут от парка Горького к собору Василия Блаженного,
обеспечив безопасное перемещение алмаза Монах по Москве.
Краткое описание задания
Воспользуйся своими новыми навыками и сделай следующее:
ф С помощью API Google Maps Embed получи ключ API.
>	Создай тег < if name > и встрой на нашу страницу карту.
Ф Измени высоту, ширину и рамку тега <if rame>, отредактировав его
атрибуты height, width и frameborder.
>	Добавь в атрибут source адрес URL, который соединит нас с нужным
веб-API.
Ф Используй API Google Maps Embed: создай карту Google с помощью
соответствующего API.
>	Используй встроенную функцию direction: именно она отобразит наш
маршрут.
>	Задай параметры строки запроса: укажи функцию destination, а также
начальную и конечную точки маршрута.
Сохрани файл в папку Coding под именем route.html.
<!DOCTYPE html>
<html>
<head>
<Ш1е>Секретный маршрут</Ш1е>
</head>
<body>
<ifname
He забудь
есспсльзоеаться
сохраненным
ключей API.
width="1000px"
height="1000px"
frameborder="0px"
style="border: 0px"
src="https://www.google.com/maps/embed/vl/directions?
origin=GorkyParkJMoscow&destination=StBasilJMoscow&key=API-KEY">
</iframe>
</body>
</html>
В ЗАКЛЮЧЕНИЕ
1?ст как делнея
выглядеть гото&ый
кос)!
Умение работать с веб-API означает, что ты можешь
добавлять в свой код функции из других приложений
или с других сайтов. С их помощью ты легко построишь
страницы и приложения, на которых используются такие
крупные веб-сервисы, как Facebook, Instagram, Google
Maps или Dropbox. Это сэкономит время, так как тебе
не придется писать код с нуля.
Этот маршрут собьет
с толку братьев бонд
и сохранит нам алмаз!
СОЗДАЕМ ИГРУ
*	ТАЙМЕРЫ JAVASCRIPT
*	ЧТО такое игровые ЦИКЛЫ
И КАК ОНИ РАБОТАЮТ
*	АНИМИРУЕМ HTML-ЭЛЕМЕНТЫ
СРЕДСТВАМИ JAVASCRIPT
*	ИГРА, ПРОВЕРЯЮЩАЯ ВРЕМЯ РЕАКЦИИ
Дорогой программист!
Вчера алмаз Монах привезли в Дом Волковых Мы с доктором Дэй благо-
дарим тебя за планирование маршрута Все прошло гладко, хотя доктору
Дэй показалось, что за нами следовал бородатый человек в большой
шляпе Он быстро исчез, но она все равно встревожилась. Слава богу, ал-
маз прибыл на место без проблем
В новой витрине, на новой подушке он выглядит ослепительно! Мы
только что разложили закуски по серебряным тарелкам, выполнив по-
следнюю в списке задачу Все готово к торжественному открытию вы-
ставки.
Но должен тебе признаться, что с момента происшествия с булыжником
я волнуюсь о нашей безопасности Мы очень старались сохранить обна-
ружение алмаза Монах в тайне, и ты прекрасно справился с созданием
пароля для нашей страницы. Но я беспокоюсь, что на нашем пути снова
могут появиться братья Бонд (возможно, один из них — опытный ки-
берпреступник). Больше всего я боюсь, что они сорвут выставку, снова
похитив алмаз.
Моя подруга, работающая в одном из самых известных музеев Лондона,
недавно рассказала, что подготовила превосходную группу охраны с по-
мощью компьютерной игры. Я не мог в это поверить, пока не увидел дан-
ные. Игра значительно улучшила время реакции, и группа стала реагиро-
вать на подозрительные обстоятельства с невиданной ранее скоростью
Не поможешь ли ты создать игру для тестирования времени реакции
охранников Дома Волковых? Я страшно занят сегодня, потому что нужно
купить Эрнесту новый ошейник, и надеюсь на твою помощь. Посылаю
одну из моих закрытых записей в «Энциклопедии исследователя».
Еще раз спасибо за твою квалифицированную помощь.
С самыми теплыми пожеланиями из суматошной Москвы,
профессор Гарри Бейрстоун
РЕЗУЛЬТАТЫ ИГРЫ
ИССЛЕДОВАТЕЛЯ
Справочник
по приключениям
Известные исследователи
ДЛЯ ТРЕНИРОВКИ ОХРАНЫ
Охрана Дома Волковых
Из «Энциклопедии исследователя», справочника по приключениям
Энциклопедия
Домашняя страница
Содержание
Известные открытия
Предыдущие экспедиции
Это частная запись с ограниченным доступом. Для просмотра открытых данных
о Доме Волковых жми здесь.
Охрана Дома Волковых отвечает за защиту выставки ценных украшении
из частной коллекции Дома Волковых.
После похищения алмаза Монах витрины с украшениями в мазине стали запирать.
Армированное стекло в 200 раз прочнее обычного.
5
Правила тренировочной
игры для охраны
Каждую секунду на экране
появляются 6 человек
5 гостей и 1 вор
Щелчок на воре дает 1
очко
Щелчок на госте приводит
к потере 2 очков
происходит 6 раз
игры — поймать 6 воров
и заработать 6 очков
После похищения владелец Виктор Волков обучил охрану внимательно следить за любыми подозритель-
ными клиентами. За последний год поймано несколько мелких мошенников, пытающихся открыть витрины
с помощью отмычек.
Специальная выставка аламаза Монах, которую устраивает господин Волков, станет самым громким
событием, когда-либо проводившимся в Доме Волковых, (осподин Волков решил проконсультироваться
с профессором Бейрстоуном по поводу стратегии безопасности в день открытия выставки.
Ранее при ограблениях братья Бонд прибегали к маскировке, (осподин Волков и профессор Бейрстоун
обеспокоены тем, что члены банды или их помощники могут проникнуть на выставку под видом гостей.
Было решено воспользоваться методом, разработанным для музеев профессором Ли из Лондона. Компью-
терная игра с простыми правилами показала свою эффективность в ускорении времени реакции охранников.
Срочно требуется создать такую игру, чтобы охранники получили возможность пройти курс тренировок
до открытия специальной выставки.
СОЗДАНИЕ ИГРЫ
Итак, ты ознакомился с кратким описанием
задания, и пора приступать к работе. Поря-
док действий на этот раз немного изменится.
Построение игры будет происходить по мере
объяснения нового материала. Следуй поша-
говым инструкциям, копируй код и вовремя
сделай игру для профессора Бейрстоуна.
Чтобы игра была
гото&а ео&ремя. при-
дется поторопиться,
поэтому приступай
прямо сейчас!
1.	Создание HTML-файла
Как и раньше, все начинается с соз-
дания HTML-файла. Присвоим ему имя
securitygame.html. Скопируй этот код
в свой текстовый редактор:
Сохрани HTML-файл в папку Coding
на рабочем столе.
<!DOCTYPE html>
<html>
<head>
<title>klrpa для oxpaHN</title>
</head>
<body>
</body>
</html>
2.	Построение игрового поля
Начнем с построения базовой структуры игры. На веб-странице должно располагаться игро
вое поле. Именно в этой области будет происходить игра. Когда охрана приступит к своим
тренировкам, на игровом поле начнут появляться гости и воры.
Для создания игрового поля добавь
внутрь тега <body> пустой тег <div>,
снабдив его атрибутом id. Получится вот
такой код:
<body>
<div id="board">
</div> v
</body>
Атрибут id
Добавь внутрь тега <head> CSS-класс, меняю-
щий вид тега <div>. Используй CSS-селектор
id для поиска тега <div> по его атрибуту id.
CSS-селекторы — способ выбирать различ-
ные группы элементов и менять их стиль. Они
просты в применении. Достаточно создать имя
класса с решеткой (#) и указать id редактиру-
емого HTML-элемента.
Создай CSS-класс, задающий следующие
CSS-свойства и значения нашего тега <div>:
Вид игрового поля:
> черная рамка толщиной
1 пиксель;
Ф серый фон;
Ф высота 350 пикселей;
Ф ширина 650 пикселей.
[ Это как селектор
<head>	CSS-элемента из За-
<title>Mrpa для oxpaHbi</title>
CSS-селек-
тор id
даиия I или селектор
CSS-атрибута type
из Задания 3.
</head>
Сохрани HTML-файл
и открой его в браузере.
На экране появится пустое
игровое поле.
Пре&сшх)ная
работа!
#board {
border: Ipx solid black;
background-color: gray;
height: 350px;
width: 650px;
Игра для охремь
3.	Добавление кнопки
Итак, игровое поле у нас есть, теперь на страницу нужно добавить кнопку, нажатие которой
запускает код игры и начинает игровой процесс.
Добавь кнопку над тегом <div>, вложенным в тег <body>. В разделе «Задание 3» ты уже соз-
давал кнопки с помощью тега <input/> и атрибутов type и value. Атрибут onclick тега <input/>
должен вызывать функцию JavaScript с именем startGame, которая будет запускать игру. Вот код
нашей кнопки:
<input type="button" value="klrpaTb" onclick="startGame()";/>
Пришло время создать функцию startGame. По-
мести ее под тегом <div> внутри тега <body>.
После этого блок <script> примет вот такой вид:
<script>
function startGame() {
}
</script>
А это полный код
блока в твоем
текстовое редак-
торе:
<!DOCTYPE html>
<html>
<head>
<title>Mrpa для oxpaHbi</title>
#board {
border: lpx solid black;
background-color: gray;
height: 350px;
width:
}
</style>
</head>
<body>
<input type="button" value="MrpaTb" onclick="startGame()";/>
650px;
Кнопка
Вызов функции
<div id="board">
</div>
<script>
Функция JavaScript
function startGame() {
</script>
</body>
</html>
Сохрани код и открой его в браузере.
Появится кнопка, но пока она не
активна. Ведь у нас
пока нет функции
ип» х	М
для схроны
Играть,
4.	Создаем JavaScript-таймер
Наша игра будет тестировать время реакции охранников из Дома Волковых. Чтобы заставить
ее работать, нужно научиться снова и снова запускать фрагмент кода через определенное
время средствами JavaScript. Такой элемент называется таймером.
В JavaScript существует встроенная функция-таймер setTimeout, позволяющая вызывать дру-
гую функцию через определенные промежутки времени. Достаточно указать в виде аргумен-
тов имя вызываемой функции и желаемый временной промежуток. Из раздела «Задание 2» ты
уже знаешь, что передаваемый в функцию аргумент указывается в скобках. На этот раз у нас
два аргумента. Давай посмотрим, как заставить функцию setTimeout вызвать другую функцию
через заданное время.
В примере функция gameTimer
вызывается через 1 секунду,
или 1000 миллисекунд.
Функция
setTimeout
Вызываемая
функция
Промежуток
между вызовами
setTimeout(gameTimerj 1000);
Заметил?
В функции setTimeout используются миллисекунды.
В одной секунде 1000 миллисекунд. Чтобы вычислить
количество миллисекунд, нужно умножить секунды
на 1000. Например, если функцию требуется вызвать
через 3 секунды, умножим 3 на 1000.
Ha следующей
Странице прак-
тическое приме-
нение (рункции
setTimeout!
ПИШЕМ КОД
► ФУНКЦИЯ SETTIMEOUT
В играх часто используются таймеры JavaScript, такие как функция
seffimeout. Изучим эту функцию, чтобы ты понял, как она работает,
и позднее смог самостоятельно добавлять ее в свои программы.
Напишем программу, отсчитывающую секунды.
1. Открой текстовый редактор
и создай HTML-файл с именем
timers.html. Вот ее код:
clDOCTYPE html>
2. Теперь добавь внутрь тега <head>
тег <script>. В блоке <script> создай
переменную со значением 0, используя
оператор присваивания (=). Вот так:
<html>
<head>
<title>TatfMepbi</title>
</head>
<body>
<div id="number">
</div>
</body>
</html>
3. Создай функцию updateCount, которая
с помощью оператора сложения (+) бу-
дет увеличивать значение переменной
на 1. С помощью метода getElementByld
и свойства innerHTML найди пустой тег
<div> и присвой ему
значение перемен-
ной. Получится вот
такой код:
<script>
van count =
<head>
<title>TaMMepbK/title>
<script>
van count = 0;
</script>
</head>
function updateCount() {
count = count + 1;
Добавляет 1
Обновляет экран
0;
document.getElementByld("number").innerHTML = count;
Ищет <div>
4. Теперь нужно добавить в тег
<body> вызов функции. Это
делается так:
<body>
<div id="number">
</div>
<script>
updateCount();
</script>
</body>
0
5. Осталось добавить в блок <script> таймер, который каждую секунду будет вызывать
нашу функцию. Передадим в качестве аргументов в функцию setTimeout имя вызываемой
функции и количество миллисекунд. Блок <script> примет вот такой вид:
<script>
var count = 0;
function updateCount() {
count = count + 1;
document.getElementById("number").innerHTML = count;
setTimeout(updateCount, 1000);
</script>	Вызов функции updateCount
через 1 секунду
Сохрани HTML-файл и открой его в браузере. Ты увидишь таймер в действи!
секунду функция setTimeout вызывает функцию updateCount, увеличивающук
переменной на 1. Поэтому отображаемое число автоматически обновляется.
Это очень продуман-
ный код. Я впечатлен!
20
А как ты собира-
ешься использо&ать
это для создания
5.	Создаем игровой цикл
Игры — одна из самых сложных для програм-
мирования вещей. Существуют различные спо-
собы их создания. Например, игровой цикл.
Игровым циклом называется функция
JavaScript, снова и снова вызываемая в
процессе игры. Цикл позволяет проверять,
выполнил ли игрок действие, рисовать на
экране HTML-элементы и запускать код игры.
Создать цикл можно с помощью встроенной
функции setTimeout. Нужно добавить в блок
<script> функцию, которая каждые 3 се-
кунды вызывает окно. Назовем ее gameLoop.
Вызовы функции начинаются после щелчка
на кнопке. Вот код нашего блока:
<!DOCTYPE html> 
<head>	( Интересно, смогу ли я
<title>Mrpa для oxpaHbi</title> I унюхать братьев £онд?
<style>	\ У меня отличный нюх.
#board {
border: Ipx solid black;
background-color: gray;
height: 350px;
width: 650px;
}
</style>
</head>
<body>
<input type="button" value="MrpaTb" onclick="startGame()";/>
<div id="board">
</div>
function startGame() {
 gameLoop();
Функция }
function gameLoop() {
alert("Игра окончена!");
setTimeout(gameLoopл 3000);
Таймер
Вызов функции
Окно
</body>
</html>
Количество
миллисекунд
Теперь сохрани код и открой файл
в браузере. После щелчка на кнопке
и вызова функции startGame за-
пускается игровой цикл. Функция
gameLoop будет вызываться
каждые 3 секунды, и каж-
дый раз будет появляться
окно. Нажимай ОК,
чтобы его убрать.
Игра
алл охрены
Прекрасное начало
дела! Но где не &ор?
6.	Добавляем гостей и вора
Итак, у нас есть игровое поле, кнопка и игро-
вой цикл, но пока отсутствуют персонажи. Нам
нужны шесть персонажей, которые каждую
секунду будут появляться в различных местах
на экране. Пять гостей и вор. Охрана будет
проверять свою реакцию, пытаясь щелкнуть
именно на фигуре вора.
Приступим к созданию персонажей. Ка-
ждому из них нужен собственный тег <div>.
Создай шесть тегов <div>, вложенных в тег
Напишем кос) для
этих персонаней!
<div id="board">
<div>l</div>
<div>2</div>
<div> игрового поля, и присвой им номера
от 1 до 6. Вот так:
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
Сохрани код и обнови страницу.
На игровом поле появятся шесть
тегов <div>. Это будет выглядеть
вот так:	Ш
Игра дгиохрАЛ
Поменяем вид и положение тегов <div>
с помощью CSS. Создадим CSS-класс с име-
нем character, который превратит наши теги
<div> в синие квадраты. В текстовом редак-
торе добавь новый CSS-класс в тег <style>
внутри тега <head>. Вот как выглядит гото-
вый блок < style>:
<!DOCTYPE html>
<html>
<head>
<title>Mrpa для oxpaHbi</title>
<style>
#board {
border: lpx solid black;
background-color: gray;
height: 350px;
width: 650px;
}
eg- .character {
background-color: lightblue;
width: 120px;
height: 120px;
padding: 10px;
margin: 10px;
float: left;
}
</style>
</head>
Заметил?
Для выравнивания тегов
<div> мы воспользовались
CSS-свойством float.
Применим новый CSS-класс character к каждому из шести тегов <div>z воспользовавшись
атрибутом class, как мы это делали в разделе «Задание 1». Получится вот такой код:
<body>
<input type="button" value="MrpaTb" onclick="startGame()";
<div id="board">
<div
<div
<div
<div
<div
<div
</div>
class="character">l</div>
class="character">2</div>
class="character">3</div>
class="character">4</div>
class="character">5</div>
class="character">6</div>
function startGame() {
gameLoop();
function gameLoop() {
alert("Игра окончена!");
setTimeout(gameLoop, 3000);
</body>
</html>
Игролг WJXH
Это уне
более-менее
похоне иа игру!
Сохрани код
и обнови страницу.
Ты увидишь результат
применения CSS-свойств
к тегам <div>.
~-----1
Играть

7.	Остановка игры
Теперь, когда на игровом поле уже есть пер-
сонажи, внесем изменения в игровой цикл.
Сейчас он вызывает окно каждые 3 секунды.
Нужно, чтобы через какое-то время этот
процесс прекратился. Реализуем это через
подсчет количества прогонов цикла. Когда
оно достигнет определенной величины, игра
остановится.
Для подсчета создадим переменную, зна-
чение которой будет увеличиваться при ка-
ждом прогоне. Назовем ее loops и присвоим
значение 0. Поместим эту переменную в блок
<script> перед функцией gameLoop.
<script>
function startGame() {
gameLoop();
}	Переменная
van loops = 0; ~
function gameLoop() {
alert("Игра окончена!");
setTimeout(gameLoop, 3000);
}
</script>
Переменная будет использоваться в функ-
ции gameLoop. Ее значение будет увеличиваться
на 1 при каждом вызове функции. Вот так:
loops = loops + 1;
Но эту инструкцию можно написать проще
и короче, воспользовавшись операто-
ром JavaScript. Он называется оператором
инкремента (++) и ничем не отличается от
операторов, с которыми ты познакомился в раз-
деле «Задание 2». Он добавляет 1 к значению
нашей переменной. Достаточно написать:
Оператор
инкремента
loops++;
Добавим оператор инкремента (++) в функ-
цию gameLoop, чтобы подсчитать количество
ее вызовов. Удали из функции оператор alert
и вместо него вставь новый фрагмент кода.
Вот такой:
function gameLoop() {
loops++;
setTimeout(gameLoop, 3000);
}

Мы хотим сделать так, чтобы игровой
цикл воспроизводился определенное
число раз, а потом игра завершалась.
Для этого добавим в функцию gameLoop,
проверяющую количество вызовов
цикла, операторы if и else.
Нужно сделать так, чтобы после
определенного числа прогонов цикла
вызывающая его функция setTimeout
остановилась и появилось всплывающее
окно. Мы хотим, чтобы цикл выполнялся
12 раз каждые 3 секунды, а потом игра
прекратилась. Всего она будет продол-
жаться 33 секунды (11 умножить на 3).
Вот как выглядит блок <script> с новой
переменной и операторами if и else:
function startGame() {
gameLoop();
}
var loops = 0;
function gameLoop() {
____ loops++;	таймер
Оператор rf if (loops < 12) {
setTimeout(gameLoop, 3000);
Оператор
else
}
else {
alert("Игра окончена!");
}
Оператор if проверяет, сколько раз был
запущен цикл. Если меньше (<) 12 раз,
функция setTimeout вызывается снова.
Если же число превышает 12, запуска-
ется оператор else и вызывается окно.
Игра Ч
ДЛЛОХр®**
Напоминаю, что это окис
поя&ится только через
33 секунды!
Сохрани код и обнови стра-
ницу. Нажми кнопку Играть
и дождись появления окна.
Теперь игра заканчивается через
указанное время
8.	Отображаем и скрываем персонажей средствами CSS
В процессе игры на экране на короткое время будут появляться персонажи. Охранникам
Дома Волковых нужно щелкнуть на воре, пока он не исчез. Сделать персонажей, появ-
ляющихся и исчезающих в каждом игровом цикле, нам поможет CSS. Потребуется новое
CSS-свойство, заставляющее HTML-элемент появляться на экране и пропадать с него.
С помощью JavaScript мы применим его к нашим персонажам.
Имя CSS-свойства	Что оно делает?	Примеры значений
display	Меняет способ отображения HTML-элемента на экране	block; none;
У CSS-свойства display множество
значений. Для игры нам понадобятся
два: block и попе. Если свойству
display HTML-элемента присвоить
значение попе, элемент не будет
показываться на экране. А в случае
значения block он будет отображен
в виде квадрата.
Создай два CSS-класса с име-
нами hidden (скрытый) и visible
(видимый). Воспользуйся свой-
ством display, чтобы придать блоку
<style> вот такой вид:
Сохрани код.
<style>
#board {
border: Ipx solid black;
background-color: gray;
height: 350px;
width: 650px;
}
.character {
background-color: lightblue;
width: 120px;
height: 120px;
padding: 10px;
margin: 10px;
float: left;
CSS-свойство
.hidden {	display
display: none;
}
.visible {
display: block;
ПИШЕМ КОД
► ИСПОЛЬЗУЕМ CSS-СВОЙСТВО DISPLAY
С помощью CSS-свойство display заставь HTML-элемент появляться
на экране и исчезать с него. Это нужно для корректного отображения
персонажей в процессе игры.
1.	Открой текстовый редактор и создай HTML-файл с именем display.html. Введи в него
показанный ниже код, сохрани HTML-файл и открой его в браузере. Страница будет
выглядеть вот так:
<!DOCTYPE html>
<html>
<head>
<title>0To6paxeHMe</title>
</head>
<body>
<div>OxpaHHMK</div>
<div>Bop</div>
<div>r ocTb</div>
</body>
</html>
Охранник
Bop
Гость
2. Открой файл в текстовом ре-
дакторе и добавь во второй
тег <div> CSS-свойство display,
чтобы получить вот такой код:
<body>
<div>OxpaHHHK</div>
<div style="display: none;">Bop</div>
<div>TocTb</div>
</body>
3.
Сохрани файл
и обнови стра-
ницу. CSS-свой-
ство display
со значением попе убе-
рет с экрана содержи-
мое второго тега <div>.
Отображ -	•
Охранник
Гость
KL/ga предал
этот элемент?
9.	Анимируем персонажей
Теперь нужно применить новые CSS-классы (hidden и visible) к игровому циклу, чтобы анимиро-
вать теги <div> наших персонажей. Требуется, чтобы цикл добавлял в теги <div> персонажей
новые CSS-классы и убирал их оттуда.
Предполагается, что после запуска игры персонажи то появляются, то исчезают. Так как
у нас 12 циклов, тег <div> каждого персонажа в шести циклах должен быть видимым, а в ше-
сти — невидимым. Для хранения этой информации создадим новую переменную peopleVisible.
Ей нужно присвоить значение false, вот таким образом:
van peopleVisible = false
Переменной изначально присваи-
вается значение false, чтобы скрыть
тег <div> персонажа. Как только она
получит значение true, персонаж по-
явится на экране.
Мы хотим, чтобы в процессе ра-
боты цикла значение переменной
менялось с true на false и обратно.
Для этого потребуется еще один опе-
ратор JavaScript, называемый опера-
тором отрицания (!).
Рассмотрим пример приме-
нения оператора отрицания (!)
в блоке <script>.
Введи эти новые фраг-
менты кода в текстовый ре-
доктор и сохрани файл.
<script>
function startGame() {
gameLoop();
Переменная
van loops = 0; ‘	'
var peopleVisible = false;
function gameLoop() {
peopleVisible = 'peopleVisible;
loops++;	.
r	Оператор отрицания
if (loops < 12) {
setTimeout(gameLoop, 3000);
}
else {
alert("Игра окончена!");
}
}
</script>
Оператором отрицания (!) мы меняем зна-
чение переменной на противоположное.
Значение false после прогона через функцию
gameLoop оператор отрицания (!) поменяет
на значение true. Если же значение перемен-
ной true, после оператора отрицания (!) оно
сменится на false.
На каждой итерации переменная цикла
будет увеличиваться на 1, а значение пере-
менной peopleVisible будет меняться с true
на false и обратно, как показано в таблице:
Теперь нужно добавить в блок < sc nipt >
новую функцию flashcharacters, которая
отобразит теги <div> персонажа на экране,
если переменная имеет значение true. Для
этого мы используем два новых CSS-класса.
При значении true мы применим CSS-класс
visible, а для значения false задействуем
CSS-класс hidden. Как написать функцию
flashcharacters, ты узнаешь, перевернув
страницу.
Номер цикла	Значение переменной	
1	true	
2	false	
3	true	
4	false	
5	true	
6	false	
7	true	
8	false	
9	true	
10	false	
11	true	
12	false	
Игра окончена		
10.	Применяем C5S, используя JavaScript
Нам нужна функция, применяющая CSS-
класс к тегам <div> персонажа в зависи-
мости от значения переменной. Назовем
ее flashcharacters. Она будет искать игровое
поле методом getElementByld и сохранять
его в переменную board, а затем выбирать
CSS-класс, который нужно применить к тегам
<div> персонажа. Выбор зависит от значения
переменной peopleVisible.
Для реализации процесса выбора CSS-
класса создадим переменную classToSet,
в которой будут храниться имена обоих
CSS-классов. Для выбора воспользуемся
операторами if и else. Сначала мы присвоим
переменной classToSet пустую строку. Она
заполнится после перехода к операторам if
и else. Если переменная peopleVisible имеет
значение true, переменной classToSet будет
присвоен CSS-класс visible. В случае значения
false оператор else изменит значение пере-
менной classToSet на CSS-класс hidden.
Еще нужно написать цикл, подсчитываю-
щий теги <div> 6 персонажей. В процессе
счета он присваивает каждому тегу <div>
значение переменной classToSet. Это реа-
лизуется методом className, который умеет
сопоставлять CSS-класс HTML-элементу в коде
JavaScript. В итоге получится такая функция:
function flashCharactersO {
var board = document.getElementById("board");
Оператор
else
Переминая var classToSet =
_ ...	. r Пустая строка
if(peopleVisible) {
classToSet = "character visible";
Атрибут id
board.children[index].className = classToSet;
Метод className
_bI Заметил?
В переменную index внутри цикла мы сохранили бо-
лее одного фрагмента информации. Такие перемен-
ные называются коллекциями. Чтобы использовать
значение из коллекции в коде, его указывают в ква-
дратных скобках ([ ]).
Пустой строкой
называется фраг-
мент данных в форме
последовательности
символов, имеющий зна-
чение 0. В языке JavaScript
пустая строка выглядит так:
11.	Упрощаем условные операторы
Функция выглядит очень сложной, поэтому давай попробуем ее упростить. В языке JavaScript
существует еще один условный оператор (?), позволяющий упростить операторы if и else.
Вот как это выглядит:
Условный оператор
van variableName = condition ? valuel : value2
Браузеру говорится, что если переменная имеет значение true, следует использовать valuel,
в случае же значения false — value2. Поэтому наш код можно переписать так:
Имя CSS класса
Условный оператор
Имя CSS-класса
van classToSet = peopleVisible ? "character visible" : "character hidden";
Добавим в блок <script> функцию flashcharacters с упрощенными операторами if £
и else. Убедись, что функция gameLoop вызывает нашу новую функцию. Сохрани код LQ
и открой его в браузере. Каждые 3 секунды на экране будут появляться и исчезать голу-
бые квадраты.
Не забудь, что
готовый код монио
найти и на сайте
Get Ceding!
£ik Проверь свою версию кода в текстовом редакторе. Код для
проверки приведен ниже. После каждой игры нужно обновлять
страницу. Внеси необходимые изменения и сохрани файл.

<!DOCTYPE html>
<html>
<head>
<title>Hrpa для oxpaHbi</title>
#board {
border: lpx solid black;
background-color: gray;
height: 350px;
width: 650px;
}
.character {
background-color: lightblue;
width: 120px;
height: 120px;
padding: 10px;
margin: 10px;
float: left;
}
.hidden {
display: none;
}
.visible {
display: block;
}
</style>
</head>
<body>
cinput type="button" value="HrpaTb" onclick="startGame()";/>
<div id="board">
<div class=,,character">l</div>
<div class="character">2</div>
<div class="character">3</div>
<div class=,,character">4</div>
<div class="character">5</div>
<div class="character">6</div>
</div>	___________
<script>	'x
function startGame() {
gameLoop();
Но кто из персонажей
гоСть. а кто hop?
}
var loops = 0;
var peopleVisible = false;
function gameLoop() {
peopleVisible = ’peopleVisible;
flashCharacters();
loops++;
if(loops < 12) {
Вызов функции
setTimeout(gameLoop, 3000);

}
else {
alert("Игра окончена’");
}
function flashCharacters() {
Упрощенный
оператор if
var board = document.getElementById("board");
var classToSet = peopleVisible ? "character visible" : "character hidden";
for(var index = 0; index < 6; index++) {
board.childrenfindex] .className = classToSet;
}
</script>
</body>
</html>
На следующей
Странице мы
создадим
персонажей!
12.	Создаем вора
Сейчас в нашей игре каждые 3 секунды
на экране появляются квадраты. Нужно сде-
лать так, чтобы на каждом прогоне цикла их
положение менялось. Каждые 3 секунды пер-
сонаж должен смещаться в другую точку игро-
вого поля. Кроме того, одного из персонажей
следует превратить в вора.
Добавим функцию createCharacters, ко-
торая на каждой итерации цикла будет соз-
давать новый набор персонажей в разных
точках. Первым делом добавим ее вызов
в функцию gameLoop. Вот так:
function gameLoopO {
peopleVisible = !peopleVisible;
createCharacters();
flashCharacters();
,	Вызов функции
1oops++;
if(loops < 12) {
setTimeout(gameLoop, 3000);
}
else {
alert("Игра окончена!");
}
}
Добавим код новой функции createCharacters перед функцией flashcharacters:
function createCharacters() {
var board = document.getElementById("board");
for(var index = 0; index < 6; index ++) {
board.children[index].innerHTML = "Гость";
Игре для ox Ч J
Пришло время добавить в функцию createCharacters код, который будет на каждой итерации
игрового цикла выбирать теги <div> одного из 6 персонажей и превращать его в вора. Для
этого нужен код, выбирающий число случайным образом. Простой реализации такого пове-
дения в языке JavaScript не существует, поэтому следующий фрагмент кода будет сложным.
Добавь его в конец функции createCharacters. Вот так:
function createCharacters() {
var board = document.getElementByld("board");
for(var index = 0; index < 6; index ++) {
board.children[index].innerHTML = "Гость";
}	Moth API
var randomNumber = Math.floor(Math.random() * 6) + 1;
board.children[randomNumber-1].innerHTML = "Bop";
}
Здесь мы использовали новый API, который называется Math. Этот API функционирует анало-
гично уже знакомым тебе API DOM и localStorage (раздел «Задание 3»). Он даст нам доступ
к удобным математическим функциям, встроенным в веб-браузер. Выбор случайного числа
делается так:
Math.floor(Math.random() * НАИБОЛЬШЕЕ_ЧИСЛО) + НАИМЕНЬШЕЕ_ЧИСЛО;
В игре 6 персонажей, поэтому самое большое число равно 6
а самое маленькое — 1. Получится вот такой код:	/ Мы долины
I еериуть себе
Math.floor(Math.random() ♦ 6) + 1;	к алмаз!
Полученный результат сохраним в переменную, которая будет использоваться в следующей
строчке кода, где свойство innerHTML задает значение тега <div>, совпадающего с нашим
случайным числом:
board.children[randomNumber-1].innerHTML = "Вор"
Так как в языке JavaScript отсчет
начинается с 0, вычтем из нашего
случайного числа 1, чтобы полу-
чить последовательность 0, 1, 2, 3,
4 и 5.
И^одлвсмЭ*
ГоСПг
Гость
Гость

Сохрани код. Теперь новая
функция createCharacter
добавляет в игру вора. После нажатия кнопки Играть
при каждом прогоне цикла случайный персонаж будет
назаначаться вором.
13. Добавляем подсчет очков
Сейчас на игровом поле каждые 3 секунды
появляется новый набор персонажей. Один
из них — вор, которого нужно поймать
охранникам Дома Волковых. Значит, нужно
обеспечить возможность щелкнуть на нем
мышью. Щелчком пользователь ловит вора
и зарабатывает очко.
Добавим в нижнюю часть функции startGame
переменную gameScore, отслеживающую коли-
чество набранных очков:
van loops = 0;
van peopleVisible = false;
van gameScore = 0;
Каждый щелчок на воре добавляет к счету 1 очко. А чтобы при игре приходилось концен-
трировать внимание, щелчок на госте будет убирать 2 очка. Для создания системы оценок на
каждой итерации цикла к каждому персонажу должен добавляться атрибут onclick. Добавь
в функцию createCharacter вот этот код:
van board = document.getElementById("board");
for(var index = 0; index < 6; index ++) {
board.children[index].innerHTML = "Гость";
board.children[index].onclick = function()
gameScore
Переменная
6) + 1;
"Вор";
var randomNumber = Math.floor(Math.random() *
__________ board.children[randomNumber-1].innerHTML =
Переменная board.children[randomNumber-1].onclick = function() {
gameScore++;	A
Onclick
Оператор
Аналогичным способом мы использовали атрибут onclick в разделе «Задание 3». Атрибут
добавляется ко всем гостям и к вору. Для изменения значения переменной gameScore при-
меним два новых арифметических оператора. Оператор += добавляет следующее за ним
значение к значению переменной. Так как при щелчке на госте у игрока отбирают 2 очка,
за оператором следует значение -2. То есть из переменной gameScore вычитается 2. При
щелчке на воре значение переменной увеличивает оператор инкремента (++).
Еще нужно сделать так, чтобы всплывающее в конце игры окно показывало счет игрока.
Отредактируй оператор else в функции gameLoop, добавив туда переменную gameScore:
function gameLoopO {
peopleVisible = 'peopleVisible;
createCharacters();
flashCharacters();
loops++;
if(loops < 12) {
setTimeout(gameLoop, 3000);
}	Переменная
else {
alert("Твой счет " + gameScore);
}
}
_ Заметил?
Пробел в конце текста для
всплывающего окна нужен,
чтобы текст корректно ото-
бражался вместе со значе-
нием gameScore.
Игра
для охраны
Сохрани HTML-файл и обнови
страницу. Попробуй набрать
очки, щелкая на воре при каждом его
появлении. Напоминаю, что после каждой игры
нужно обновлять страницу.
Ура! Теперь алмаз
гарангарс&аинс
е> безопасности!
14.	Упрощаем код
Игра работает, и охранники Дома Вол-
ковых скоро приступят к тренировкам.
Но, возможно, ты заметил, что функ-
ции createCharacters и flashcharacters
во многом похожи. Одна создает персона-
жей, а вторая добавляет к ним CSS-класс.
Их можно скомбинировать, упростив тем са-
мым программу. В процессе написания кода
часто прибегают к упрощениям, чтобы сделать
его более читабельным и понятным.
Отредактируем функцию createCharacters, заставив ее не только создавать персонажей,
но и добавлять к ним CSS-класс. Вот какой код мы в итоге получим:
Добавленные
CSS-классы
function createCharacters() {
var board = document.getElementById("board");
var classToSet = peopleVisible ? "character visible" : "character hidden";
for(var index = 0; index < 6; index ++) {
board.children[index].className = classToSet;
board.children[index].innerHTML = "Гость";
board.children[index].onclick = function() {
gameScore += -2;
}
}
var randomNumber = Math.floor(Math.random() * 6) + 1;
board.children[randomNumber-1].innerHTML = "Bop";
board.children[randomNumber-l].onclick = function() {
gameScore++;
}
}
Теперь эта функция на каждой итерации цикла выбирает нужный CSS-класс, создает персона-
жей и снабжает их атрибутом onclick. Функция flashcharacters больше не нужна, и ее можно
удалить. Удалим и ее вызов функцией gameLoop. В итоге получится вот такой код:
function gameLoop() {
peopleVisible = ’peopleVisible;
createCharacters( ) , удален вызов функции
loops++;	flashcharacters
if(loops < 12) {	4*,
setTimeout(gameLoop, 3000);	|
}	\	T
Сохрани код.
В игре ничего
не изменится.
Отличное
программи-
рование. мой
9РУг!
15.	Меняем вид игры с помощью С55
Работающая базовая структура игры у нас
написана, но на экране она выглядит не очень
интересно. Вспомним навыки работы с CSS
из раздела «Задание 1» и исправим ситуа-
цию. Например, поменяем внешний вид вора.
Для этого добавим в блок < style> новый CSS-
класс с именем thief. Вот так:
Этот CSS-класс следует применить к нашему
коду JavaScript. Он должен добавляться при
каждом добавлении вора. Поэтому отредакти-
руем наш код так:
.character {
background-color: lightblue;
width: 120px;
height: 120px;
padding: 10px;
margin: 10px;
float: left;
}
.thief {
background-color: red;
}
var randomNumber = Math.floor(Math.random() * 6) + 1;
board.children[randomNumber-l].innerHTML = "Bop";
board.children[randomNumber-l].onclick = function() {
gameScore++;
}
board.children[randomNumber-1].className = classToSet + " thief";
На каждой итерации цикла этот код
будет применять наш CSS-класс thief
к тегу <div> вора, выделяя его крас-
ным цветом. Сохрани HTML-файл. Теперь
вор выделяется среди гостей.
дометил?
Перед именем класса стоит пробел:
" thief ". Он нужен потому, что мы
используем имена двух CSS-классов:
того, который выбирается через пере-
менную classToSet (hidden или visible),
и класса thief. Без пробела мы полу-
чим вариант "hiddenthief".
Играть
16.	Добавляем изображения персонажей
Чтобы придать тегам <div> персонажей бо-
лее привлекательный вид, потребуются новые
CSS-свойства. Они очень просты и функцио-
нируют аналогично свойствам, уже знакомым
тебе по работе над «Заданием 1».
Первым делом найди на сайте Get
Coding! эти изображения:
Гость
Вор
Сохрани их в папку Coding на рабочем
столе. Ты уже учился сохранять картинки
в разделе «Задание 1» (с. 28-30).
Теперь отредактируем CSS-классы в блоке <style>.
Добавим два новых CSS-свойства: background и background-size.
CSS-свойство	Что оно делает?	Примеры значений
background	Присваивает фону HTML-эле- мента изображение	url('image.jpg'); none;
background-size	Задает размер фонового изображения в HTML-элементе	cover; 650рх;
Добавим новые CSS-свойства в CSS-
классы гостей и вора. Получится вот
такой код:
.character {
background: url('guest.jpg');
background-size: cover;
width: 120px;
height: 120px;
padding: 10px;
margin: 10px;
float: left;
}
.thief {
background: url('thief.jpg
background-size: cover;
}
Свойство
background
Свойство
background-size
С помощью CSS-свойство background попро-
сим браузер использовать в качестве фона
тегов <div> сохраненные изображения.
А через CSS-свойство background-size сде-
лаем так, чтобы изображения закрывали весь
фон каждого тега <div>.
Сохрани HTML-файл и увидишь,
как изменилась игра.
Теперь, когда в качестве фона
тегов <div> наших персонажей использу-
ются картинки, удалим метки гостей и вора,
чтобы не упрощать тренировки охранников 
из Дома Волковых. Для этого изменим две у Теперь игра
строчки в блоке <script>:	I выглядит классно!
board.childrenfindex].innerHTML = "Гость";
board.children[randomNumber-1].innerHTML = "Bop";
Присвой им пустые строки. Вот так:
board.children[index].innerHTML =
board.children[randomNumber-1].innerHTML =
Сохрани HTML-файл.
Теперь в игре появятся
изображения.
ИградпвохрЖ	М
17.	Меняем игровое поле
Теперь ты умеешь пользоваться CSS-свой-
ствами background и background-size CSS, и можно легко поменять фон игрового поля. Найди на сайте Get Coding! изображение background и сохрани его в папку Coding. Осталось добавить в CSS-класс board свойства background и background-size. Не забудь удалить CSS-класс background-color, который больше не требуется.	.  Получится вот такой код: Еще нужно, чтобы при загрузке игры в бра- узере отображалось только игровое поле. Персонажи должны появляться только после нажатия кнопки Играть. Поэтому добавим CSS-свойство display к CSS-классу пер-	. сонажа в блоке < sty lex Вот так: Сохрани HTML-файл. В моментза- грузки игры ты увидишь новый фон игрового поля. После нажатия кнопки Играть на экране появятся персонажи и нач- нется игра. Начальный экран >*у ау»г м	® Г 	 1 Играть	#board { background: url(* background.jpg'); background-size: cover; border: Ipx solid black; height: 350px; width: 650px; } .character { background: url('guest.jpg'); background-size: cover; width: 120px; height: 120px; padding: 10px; margin: 10px; float: left; display: none; } Игровой экран ! j Играть) 11C v Uf
18.	Усложняем игру
Возможно, ты уже заметил, что при задержке в 3 секунды щелкнуть на фигуре вора очень
легко. Поэтому игру имеет смысл усложнить. Пусть персонажи появляются на экране на более
короткий период времени. Для этого нужно внести изменения в вызов функции setTimeout:
setTimeout(gameLoop, peopleVisible ? 1000 : 3000);
Мы используем уже знакомый тебе упрощенный оператор if. Теперь, если перемен-
ная peopleVisible имеет значение true, функция gameLoop будет вызвана через 1 секунду.
В случае значения false она вызывается через 3 секунды. Поэтому наши персонажи по-
являются на 1 секунду, а потом 3 секунды отсутствуют. Сохрани код и попробуй сыграть
в игру. Сможешь набрать 6 очков?
СДЕЛАЙ САМ
ГОТОВАЯ ИГРА
Программировать игры сложно, но ты уже получил все необходимые
для этого навыки. Профессор Бейрстоун будет в восторге. Игра проте-
стирует время реакции охранников.
Краткое описание задания
Проверь в фхзйле securitygame.html корректность кода для всех перечиненных
ниже вещей и сохрани файл в папку Coding. Не забудь о возможности менять
скорость игры, сделав ее быстрее и усложнив задачу игрока.
Игровое поле
5 гостей
1 вор
Кнопка Играть
Окно
с результатом
На следующей
Странице полный
код игры.
<!DOCTYPE html>
<html>
<head>
#board {
background: url('background.jpg');
background-size: cover;
border: lpx solid black;
height: 350px;
width: 650px;
.character {
background: url('guest.jpg');
background-size: cover;
width: 120px;
height: 120px;
padding: 10px;
margin: 10px;
float: left;
display: none;
.thief {
background: url('thief.jpg');
background-size: cover;
.hidden {
display: none;
.visible {
display: block;
Задание 5 завершено!
Изумительная работа!
</head>
<body>
<input type="button" value="MrpaTt>" onclick="startGame()";
<div id="board">
<div
<div
<div
<div
class="character">l</div>
class="character">3</div>
<div class="character">5</div>
<div class="character">6</div>
</div>
<script>
function startGame() {
gameLoop();
}
var loops = 0;
var peopleVisible = false;
var gameScore = 0;
function gameLoop() {
peopleVisible = 'peopleVisible;
createCharacters();
loops++;
if(loops < 12) {
В ЗАКЛЮЧЕНИЕ
Выполняя это задание, ты сделал важный
шаг к созданию игр на языке JavaScript.
Ты использовал игровой цикл — существен-
ную часть практически всех компьютерных
игр, — чтобы сформировать для пользова-
теля интерактивной материал. Ты отлично
справился с этой нелегкой задачей! Теперь
можно попробовать силы в создании более
сложных игр, различными способами реа-
гирующих на действия пользователя.
setTimeout(gameLoop, peopleVisible ? 1000 : 3000);
}
else {
alert("Твой счет " + gameScore);
}
}
function createCharacters() {
var board = document.getElementById("board");
var classToSet = peopleVisible ? "character visible" : "character hidden";
for(var index = 0; index < 6; index ++) {
board.children[index].className = classToSet;
board.children[index].innerHTML = "";
board.children[index].onclick = function() {
gameScore += -2;
}
}
var randomNumber = Math .floor(Math. random() * 6) + 1;
board.children[randomNumber-1].innerHTML = "";
board.children[randomNumber-l].onclick = function() {
gameScore++;
}
board.children[randomNumber-l].className = classToSet + " thief";
</script>
</body>
</html>
ДЕЛАЕМ ВЕБ-САЙТ
*	применяем млкеты
*	создлем сайт средствлми нтмь и C5S
♦	связывлем страницы
т оьеспечивлем доступ к сайту
у^лние ЗАДАНИЯ
Дорогой программист!
Уверены, что тебе будет приятно узнать о громком успехе выставки
в Доме Волковых1 Хотим поблагодарить тебя за помощь и упорную
работу. Гости ахнули, когда господин Волков предъявил им алмаз.
Это был лик нашего торжества.
Впрочем, без происшествий не обошлось. Как мы и боялись, братья Бонд
прознали про алмаз. Они замаскировались под гостей и изготовили фаль-
шивые приглашения, чтобы получить доступ на выставку. К счастью, один
из охранников заметил их подозрительное поведение рядом с витриной,
в которой демонстрировался алмаз. Господин Волков немедленно позво-
нил в полицию. Благодаря тебе братья Бонд теперь за решеткой.
Новости про алмаз мгновенно распространились по всему миру и вы-
звали большую шумиху. Господин Волков безмерно счастлив, что алмаз
вернулся на свое законное место, и теперь хочет организовать выставку
для широкой публики. А так как мы уверены в квалификации наших
охранников, мы готовы пойти на этот шаг. И если москвичам понравится
выставка, возможно, господин Волков устроит международный тур. Дом
Волковых ожидает большое будущее.
Но осталось дело, в котором ты, возможно, захочешь нам помочь. Госпо-
дин Волков хотел бы сделать веб-сайт (вместо единственной страницы),
посвященный будущим выставкам. Надеемся, что ты поможешь нам еще
раз! Может быть, однажды и ты придешь посмотреть на алмаз Монах?
Мы хотели бы встретиться с тобой и поблагодарить тебя лично.
С самыми теплыми пожеланиями из Дома Волковых,
профессор Гарри Бейрстоун, доктор Руби Дэй и Эрнест.
Р. S. Посылаю тебе последнюю запись профессора из «Энциклопедии
исследователя» и примечания от господина Волкова.

Эн ЦИКЛ О II ЕД и я
ИССЛЕДОВАТЕЛЯ
Справочник
по приключениям
Домашняя страница
Содержание
Известные открытия
Известные исследователи
Предыдущие экспедиции
Находка алмаза Монах________________________________________
Из «Энциклопедии исследователя», справочника по приключениям
Находка алмаза Монах — открытие, сделанное в Сибири профессором Бейр-
стоуном и доктором Дэй. Профессор Бейрстоун полагал, что кражу совершили
братья Бонд и что камень спрятан далеко от Дома Волковых в Москве, откуда
его похитили.
Профессор Бейрстоун — исследователь, известный открытием древних арте-
фактов по всему миру. В экспедициях его всегда сопровождает собака Эрнест.
До находки алмаза Монах прославился обнаружением корабля Хой с сокровищами
викингов у побережья Оркнейских островов в Шотландии.
_____________________________________________________________


жкмор ъолосоъ
Фол! ^Волковых, СМмсива


Ъорогои программист!
Л югпсл бы поблагодаршнь meh уа те усилия,
которые гпы предпринял, Чгпоб)ы вернуть алма^
Монах Ъому Белковых Когда ею похитили, я был
рЬит горем и б отчаянии думал, что мне придется
продать сбое дело. Ъомом Волковых моя семья
управляла в течение многих поколении, и продажа
стала бы для нас рауорегшем. Но благодаря тебе,
проору оеирстоуну, доктору Ъэи и Эрнеста алмая
Ьоубращен. Я был беумерно рад организовать выставку
н продемонстрировать ею б’ нашелг магауинс.
Как ты унаешь, уа воуврагцение аллшуа или уа арест
братьев Бонг была объявлена награда. Профессор
Бейрстоуни доктор Ъэи уже получили свою
долго и собираются на эти деньги устроигТгь новую,
экспедицию. твое воунаграждснис ~ждегп тебя в Москве,
куда ты, надеюсь, приедешь, Чгйовм лично врляш/ть
на алмау Монах.	L J
С самыми тенлылш и серделнылш пожеланиями,
Доктор Дэй изучает окаменелости. В настоящее время она исследует новый вид пернатого динозавра
Она участвовала в нескольких экспедициях с целью обнаружить окаменелости, доказывающие наличие
перьев у этого вида
Известие о находке в Сибири алмаза Монах и о его возвращении Дому Волковых не сходило с первых
страниц газет Рабочая группа давала многочисленные интервью. Профессора Бейрстоуна пригласили
читать лекции, а в следующем году будет опубликована его биография. Доктор Дэи стала старшим на-.
учным сотрудником университета
Специальная выставка алмаза Монах имела большой успех Господин Волков сообщил репортерам что он
«в восторге от возвращения алмаза и популярности выставки». В очереди в Дом Волковых приходилось
стоять до двух часов, а продажи драгоценностей возросли более чем в два раза
СОЗДАНИЕ ВЕБ-САИТА
Ты уже справился с пятью заданиями и те-
перь умеешь писать код на языках HTML,
CSS и JavaScript, а также с помощью различ-
ных API создавать более сложные программы.
Ты сделал веб-страницу, добавил на нее па-
роль, создал веб-приложение, запланировал
маршрут и построил игру. Остался последний
этап: построение веб-сайта.
До этого момента все создаваемые стра-
ницы и программы хранились в твоем брау-
зере и предназначались только для профес-
сора Бейрстоуна и доктора Дэй. Но теперь
нужно построить сайт, доступный для людей
из любой точки земного шара.
Задание не сильно отличается от уже зна-
комого тебе построения веб-страницы. Ведь
сайт — это всего лишь группа соединенных
друг с другом страниц. Но сейчас мы будем
действовать немного по-другому. Для постро-
ения страниц мы воспользуемся макетами.
Всего будет пять макетов, и каждый из них
послужит основой страницы.
Макеты
Макеты — полезный способ планиро-
вания содержимого и вида сайта перед
началом работы над кодом. Это простой
рисунок, демонстрирующий элементы
страницы. Пример макета показан
справа. Макет помогает запланировать
компоновку каждой страницы и принять
решение по поводу ее будущей струк
туры.
Еще макеты помогают решить, как
пользователь будет взаимодействовать
со страницей и переходить на другие
страницы сайта. Нарисовав хороший
макет, ты сможешь приступить к написа-
нию кода, используя его как план буду-
щей работы.
В этом задании ты создашь веб-сайт,
состоящий из пяти страниц. Связанные
друг с другом страницы содержат раз-
личные части увлекательной истории
алмаза. Мы разработаем варианты
макетов для каждой из них.
Строка
Большое
НиЖний
колонтитул
Вот список страниц, из которых будет состоять наш, посвященный алмазу Монах, сайт:
Страница	Содержимое
index.html	Главная страница, рассказывающая об открытии и экспедиции
diamond.html	История алмаза Монах и его похищения
discovery.html	История открытия, сделанного профессором Бейрстоуном и доктором Дэй
exhibition.html	Информация о выставке и о времени ее работы
volkov.html	Как найти Дом Волковых в Москве
При работе над поставленной задачей мы будем сверяться с макетами для каждой страницы.
Затем в текстовом редакторе ты самостоятельно напишешь их код, используя языки HTML, CSS
и JavaScript и навыки, полученные при решении предыдущих заданий.
НОВЫЕ CSS-СВОЙСТВА
Выполняя «Задание 1», ты узнал, что язык CSS позволяет менять вид HTML-страницы. Здесь тебе
потребуются дополнительные CSS-свойства и значения.
Изображения
Поменять размер добавленного на страницу изображения можно разными способами. Лучше
всего добавить атрибут style к тегу <img/> и задать CSS-свойство width, указав значение в пик-
селях (рх) или в процентах (%). Вот так:
Атрибут style Пиксели
<img src="diamond. jpg" а11="Алмаз" style="width: 150рх"/>
<img src="ernest.jpg" alt="Co6aKa" style="height: 50%"/>
Проценты
После этого браузер автоматически рассчитает высоту изображения. Если хочется растянуть
изображение, исказив его пропорции, в атрибуте style указываются оба CSS-свойства — width
и height. Вот так.	Свойство width Свойство height
<img src="profB.jpg" а11="Исследователь" style="width: 50рх; height: 50рх"/>
Заполняем картинкой тег <div>
Получить интересную компоновку страницы можно, поделив ее на разделы с помощью
тегов <div>. Чтобы сделать изображение фоном для тега <div> и создать баннер, приме-
няются уже знакомые тебе по «Заданию 5» CSS-свойства background и background-size.
Существуют различные способы масштабирования изображений с помощью CSS-свойств.
CSS-свойство	Что оно делает?	Примеры значений
background	Задает фоновое изображение HTML-элемента	url(filename.jpg);
background-size	Задает размер фона HTML-элемента	contain; cover; auto;
В предыдущем задании ты видел, что про-
исходит после присвоения CSS-свойству
background-size значения cover. Фоновое
изображение растягивается на все заданное
тегом пространство. Некоторые картинки при
этом обрезаются.
Кроме значения cover можно использовать
значение contain, которое вставляет в блок
картинку целиком с сохранением ее пропор-
ций. При этом она может заполнить не весь
блок. В этом случае браузер ее повторяет.
При значении по умолчанию auto кар-
тинка также повторяется нужное число раз,
чтобы заполнить весь блок <div>.
<style>
.team {
width: 600рх;
height: 600рх;
background: url(team.jpg);
background-size: contain;
} </ -
При масштабировании мы
делаем изображение больше, I
меньше или искажаем его
пропорции. При ОБРЕЗКЕ мы
< / style>	Значение contain
отрезаем края, делая изображение
меньше.
Выравнивание текста и картинок
В разделе «Задание 1» ты узнал, что картинки и текст можно выровнять двумя простыми спосо-
бами: с помощью CSS-свойства text-align в теге <div>, содержащем текст и изображение, или
с помощью CSS-свойства float в атрибуте style тега <img/>. Вот так:
Свойство floor
<img src="team.jpg" а11="Рабочая группа" style="float: right;"/>
Больше значений цвета
Раньше в качестве значений для CSS-свойства
colour ты использовал названия цветов. По
умолчанию браузер поддерживает 140 на-
званий. Но ты можешь создавать собственные
цвета с помощью НЕХ-кода. Этот код применя-
ется таким же способом, что и названия цве-
тов. Рассмотрим пример:
НЕХ-код
<body>	Г
<div style="background-color: #0BFF54;">
Профессор Бейрстоун, доктор Дэй и
</div>
Эрнест были в экспедиции.
</body>
Запоминать НЕХ-коды тебе
не нужно. Существует множество сай-
тов, позволяющих найти нужный код. Ты мо-
жешь сам смешивать цвета и изобретать НЕХ-
коды, используя инструмент Colour Wheel на
сайте www.color.adobe.com. Оста-
ется скопировать НЕХ-значение
в свой код, не забыв поставить
перед ним решетку (#).
ПрофессорЬгйрсгоун.локти/ Дэ|и Э.мхл были n nu.iic ншки
Не мегу дондаться
окончательной
версии сайта!
1. Главная страница: index.html
Главная страница (index.html) — это самая
важная страница сайта, ведь именно ее посе-
титель видит первой. Именно она дает пред-
ставление о назначении сайта и пробуждает
интерес. Посетитель должен увидеть, что это
только начало и у сайта еще много страниц
с информацией.
На нашей главной странице используем
изображение алмаза Монах для баннера
заголовка. Заголовок тоже добавим в бан-
нер. Ниже будет строка меню со ссылками
на остальные страницы сайта. Еще нужен
небольшой текст о том, как был обнаружен
алмаз Монах. Под ним поместим кнопку со
ссылкой на страницу Дома Волковых. Нако-
нец, добавим нижний колонтитул с контакт-
ными данными профессора Бейрстоуна.
Получится вот такой макет:
Баннер
заголовка
Строка
Меню
Главная
страница
Текст
Посетить Дом Волковых
Для связи с профессором Бейрстоуном: profbairstone@intrepidexplorer.com
Нижний
колонтитул
Алмаз Монад — един из самых ресяих и демныд алмаюв в вроле с крайне интересной историей Им алсюелс русское
знать, его похищала бода преступников, а юте»* его обнаружили в далеких сибирских горах, совершив одно из
самых смадооюгых открытий нашего веко Узнай историо алмаза на модем сайте или приходи посмотреть на него
в Дом Волковых в Москве
Заголовок
Кнопка
Мей электронный адрес
prcfbairstone^intrepide^plorer.com
Напиши код этой страницы, используя
свои знания языков HTML и CSS,
приобретенные ранее.
Изобранснае алмаза
Исках возьми с сайта
Get Ceding!
Баннер заголовка
В блоке < style > создай CSS-класс
со свойством width, равным 100%,
и свойством height, равным 400рх.
Свойству padding присвой значение Орх.
Добавь изображение через CSS-свойства
background и background-size.
+ Примени этот CSS-класс к тегу <div>
в теле страницы.
Добавь в тег текст заголовка <div>. По-
меняй CSS-свойства font-size и color через
атрибут style.
Строка меню
Т Создай тег <div> с атрибутом style и за-
дай для него CSS-свойства width, padding
и background-color.
Добавь четыре ссылки, используя тег <а>
и атрибут href.
Т Еще можно добавить тег <div> к каждой
Текст
Создай третий тег <div> и с помощью
атрибута style присвой свойству width
значение 100%, а свойству padding —
значение 50рх.
Добавь текст, деля его на разделы тегами
<р> и <Ьг/>.
Кнопка
Ф Помести ссылку в тег <div>. Придай
ей вид кнопки через атрибут style с
CSS-свойствами width, height, padding
и background-color.
Нижний колонтитул
Создай последний тег <div> и через
атрибут style сделай параметр width
равным 100%.
Добавь в тег <div> контактные данные
профессора Бейрстоуна.
ссылке и сдвинуть их вправо.
Кй) этого и остальных макетов
ионно найти на сайте Get Coding!
Завершив работу над кодом,
А сохрани HTML-файл в папку
J Coding под именем index.html.
2. Страница алмаза: diamond.html
Вторая страница нашего сайта — страница алмаза (diamond.html) — познакомит пользовате-
лей с удивительной историей этого камня. Рассмотрим пример макета для этой страницы:
Строка меню
Ф Создай тег <div> внутри тега <body>
страницы, добавь к нему атрибут style
и задай CSS-свойства width, padding
и background-color. С помощью тега <а>
и атрибута href сделай четыре ссылки.
Ф Еще можно добавить тег <div> к каждой
ссылке и сдвинуть их вправо.
Большая картинка
Ф В блоке < style> создай CSS-класс
со свойством width, равным 100%,
со свойством height, равным 200рх,
и со свойством padding, равным Орх.
Используй CSS-свойства background
и background-size, чтобы добавить кар-
тинку. Примени этот CSS-класс ко вто-
рому тегу <div> внутри тега <body>.
Текст
Ф Создай третий тег <div> и через атри-
бут style задай ширину (width) как
100%, а поле (padding) как 50рх.
Добавь текст, деля его на разделы
тегами <р> и <Ьг/>.
Изображение
Добавь картинку в тег <div> с текстом.
В атрибуте style укажи такие CSS-свой-
ства, как width, height и text-align, чтобы
картинка оказалась по центру.
Нижний колонтитул
Такой же, как на главной странице.
Большая
Меню
Длим!
Текст
Изображение
НиЖний
колонтитул
Домой / Открытие
Завершив работу над кодом стра-
ницы, сохрани HTML-файл в папку
Coding под именем diamond.html.
3. Страница открытия: discovery.html
Третья страница сайта, посвященная обнаружению похищенной драгоценности (discovery,
html), расскажет посетителю о том, как профессор Бейрстоун и доктор Дэй нашли алмаз
Монах. Создадим макет, компоновка которого будет слегка отличаться от предыдущего:
Строка меню
Такая же, как меню на странице алмаза.
Просто не забудь обновить ссылки.
Большая картинка
В блоке < style> создай CSS-класс
со свойством width, равным 100%, свой-
ством height, равным 200рх, и свой-
ством padding, равным Орх. Используй
CSS-свойства background и background-
size, чтобы добавить изображение. При-
мени этот CSS-класс ко второму тегу <div>
внутри тега <body>.
Столбец с текстом
Ф Создай тег <div> с атрибутом style, в кото-
ром width равно 80%, a padding — 50рх.
Добавь текст, деля его на разделы
тегами <р> и <Ьг/>.
Столбец с изображением
Т Создай еще один тег <div> с атрибутом
style, в котором width равно 20%. Сдвинь
этот тег <div> вправо от тега <div>
с текстом.
Ф Добавь картинку в тег <div>. В атрибуте
style укажи такие CSS-свойства, как width,
height и text-align, чтобы картинка оказа-
Профессор бейрстоун и доктор Дэй с собакой профессора
Эрнесто** быт в мсладнимн в Сибири когда они обнаружит
агиюз Монах. Он был предан в эагеркнноА пещере Брсгь» Бонд
пытались сорвал экспедицию и вернуть но потерпеть* ноу-
дсгчу 1Ъбо^ фупла вместе а алыакм вернулась в Москву и До*.
Волковых орго+ивовал спвцмагыную выставку в честь э*оо событии
рофессором Бейрстоуном: profbairslone@intrepidexplorei com
Столбец
НиЖнии
KoyioHtnutnyyi
лась по центру.
Нижний колонтитул
Сделай таким же, как
на главной странице.
Завершив работу над страницей,
сохрани HTML-файл в папку Coding
под именем discovery.html.
4. Страница выставки: exhibition.html
На странице выставки (exhibition.html) можно будет найти всю информацию об этом меропри
ятии в Доме Волковых. Так как это очень важные сведения, компоновка должна быть простой,
чтобы все можно было без проблем найти и понять. Вот вариант макета:
Строка Менк»
Такая же, как меню на странице алмаза. Просто не забудь обновить ссылки. Большая картинка Такая же, как на страницах, посвящен- ных алмазу и его обнаружению. Текст *	Создай теги <div> для каждого раздела информации. *	Для создания отступов используй атри- бут style, присвоив CSS-свойству margin значение Юрх. НиЖниы колонтитул *	Сделай его таким же, как на главной странице. г* • Г \	1 к [Теш <div> легко > 1 позволяют создавать различные варианты \.	KCMПCИO&OK.,	/	мвн>о	Большая картинка •^4—-!- Главная страница / Алмаз / Открытие / Дом Волковых / Специальная выставка Дом Волковых Время работы С понедельника по пятницу 9 30-6 00 Вход посетителей до 5.30 Суббота и воскресенье 11.00-4.00 Вход посетите ей до 3.30 Вход: бесплатно t	Имейте в виду, что фотосъемка в Доме Волковых запрещена | / 1 Для связи с профессором Бейрстоуном: profbairsione@intrepidexplorer.com Г	г Текст	1 НиЖнии колонтитул Завершив работу над кодом стра- ницы, сохрани HTML-файл в папку Coding под именем exhibition.html.
5. Страница Долла Волковых: volkov.html
На последней, пятой странице нашего сайта (volkov.html) мы расскажем, как найти Дом
Волковых. Кроме адреса мы опубликуем Google-карту, воспользовавшись API Google Maps
Embed, как в Задании 4. Вот как выглядит наш макет:
Строка меню
+ Такая же, как меню на странице алмаза.
Просто не забудь обновить ссылки.
Большая картинка
* Такая же, как на страницах алмаза, его
обнаружения и выставки.
Столбец с текстом
+ Создай тег <div> с атрибутом style
и свойством width, равным 80%, и свой-
ством padding, равным 50рх. Добавь
текст, деля его на разделы тегами <р>
и <Ьг/>.
Столбец с картой
< Создай еще один тег <div> с атрибутом
style и присвой CSS-свойству width зна-
чение 20%. Смести тег вправо от тега
<div> с текстом.
+ Добавь тег < if name > и задай его атри-
буты width, height и border. Добавь
атрибут пути с адресом URL, ведущим
на Google Maps Embed API. Используй
функцию search API и добавь карту,
показывающую собор Василия Блажен-
ного в Москве.
Нижний колонтитул
* Сделай его таким же, как на главной
странице.
НиЖний.
KoyiOHKiuriyy]
Завершив работу над кодом стра-
ницы, сохрани HTML-файл в папку
**** Coding под именем volkov.html.
ГОТОВЫЙ ВЕБ-САЙТ
Итак, мы создали пять страниц, и теперь осталось удостовериться в том, что все ссылки кор-
ректны, а страницы соединены именно так, как было запланировано. Проверь строку меню
на каждой из страниц. Во всех ссылках должны фигурировать корректные имена. В противном
случае сайт работать не будет, так как пользователи не смогут перемещаться с одной стра-
ницы на другую. Вот коды всех наших ссылок:
<a href="index.html">Главная страница</а>
<а href="diamond.html">Алмаз</а>
<а href="discovery.html">OTKpbrrne</a>
<а href="exhibition.html">Выставка</а>
<a href="volkov.html">Дом Волковых</а>
Создание собственных макетов
Создать макет очень легко. Многие пользу-
ются для этого только карандашом, бумагой
и стикерами, рисуя, как будет выглядеть сайт,
перед тем как приступить к написанию его
кода. Иногда это называют созданием прото-
типов на бумаге. Это быстрый способ для экс-
периментов с возможными вариантами.
Для таких макетов, как в нашей книге,
Прототипом называют
первую версию объекта.
Он показывает, что
следует исправить
и улушить в следующих версиях
и в окончательной модели.
существуют различные инструменты. На
PC — это Microsoft Visio, в браузере — сер-
висы Gliffy и Balsamiq mock-up, на Мас —
OmniGraffle. Все эти программы содержат
предустановленную графику и дают возмож-
ность легко и просто создавать варианты
макетов.
Вот и послед
нее задание
ьыполиено!
Предоставление доступа к сайту
Чтобы готовый сайт увидели другие люди, его
нужно загрузить на сервер. В начале книги
мы немного говорили о веб-серверах. Они
бывают аппаратными или программными
и хранят сайты, давая к ним доступ с помо-
щью браузера. Чтобы люди смогли увидеть
твой сайт, его нужно разместить на сервере
в Интернете. Настроить собственный сервер
очень сложно, но, к счастью, существует мно-
жество компаний, предоставляющих услуги
по размещению.
Ь1 заметил?
Для размещения твоих файлов в Сети
попроси помощи у взрослых. Ведь
зарегистрироваться в таких службах,
как Google, невозможно до достиже-
ния определенного возраста.
Когда веб-сервер, сохраняет
сайт, предоставляя к нему
доступ, мы говорим, что сайт
размещается на сервере.
У размещенных на сервере файлов
есть адрес URL, как у всех сайтов
в Интернете.
Найти бесплатный сервер для размещения
своего сайта ты сможешь с помощью поис-
ковых запросов «free web hosting» или «бес-
платный хостинг». Иногда пространство под
сайты предоставляют провайдеры домаш-
него Интернета. Когда ты найдешь хостинг,
останется аккуратно скопировать туда все
файлы. Только внимательно читай инструк-
ции и условия использования.
Прекрасная работа!
Мы победили братьев бонд
и вернули алмаз
господину Волко&у!
* з * • *	* • - • ” • *» . » '	v‘ ’
ЧТО ДАЛЬШЕ?
I ТВОЕ БУДУЩЕЕ ПРОГРАММИСТА
Переходя от задания к заданию, ты не только помог, спасти алмаз
Монах от братьев Бонд, но и познакомился :с языками программиро- .
вания HTML, CSS и JavaScript.' Ты создал; веб-страницу, защитил ее
паролем, построил веб-приложенйе, Запланировал маршрут и даже,
написал очень сложный код для тренировочной игры.; Теперь к твоим
достижениям добавилось создание сайта? Наши поздравления! .>
Надеемся, книга показала тебе, насколько
увлекательным и интересным может быть
программирование. Ты приобрел множество
полезных навыков й самостоятельно выполнил
несколько проектов. И ведь это только
небольшая чйсть. Если тебе понравилось
писать код на языках HTML и CSS, существует
множество других HTML-тегов и CSS-
.атрибутов, о которых ты можешь узнать
в Интернете.
*	V	•
Посвященный HTML сайт ww\*J.w3schodls.
com/html продемонстрирует тебе множество V-
примеров, позволив расшйрить свои Знания
и научиться делать еще более впечатляющие
сайты.
Если тебе понравилось писать код на языке
JavaScript, почему бы не отточить Сбои навыки
на упражнениях с сайта www.codecademy.
com/learn/javascript2
Возможно, ты захочешь изучить другие
языки программирования и писать программы,
работающие вне браузера. Почему бы не
заняться С#, Java или Ruby? Или даже не
попробовать написать собственный веб?.- •«
сервер? Новые идеи мо^но получить на сайте
wWw.code.org/learn.- • ?
И, конечно, не забудь присоединиться .
к нашему сообществу Young Rewired State.
Мы поможем тебе развить свои способности
и стать настоящей звездой программирования!
Задания из нашей книги решены успешно.
Теперь все в твоих собственных руках!

Присоединяйся к Young Rewired State
Ha сайте Young Rewired State ты сможешь познакомиться с единомышленни-
ками и опытными наставниками и поучаствовать в бесплатных мероприятиях,
таких как наш Фестиваль кода. Мы научим тебя создавать приложения,
сайты и алгоритмы и вдохновим на решение реальных задач.
Young
Rewired Получить более подробную информацию:
State_ www.yrs.io;www.getcodingkids.com
АЛФАВИТНЫМ УКАЗАТЕЛЬ
С
CSS (каскадные листы стилей) 10
CSS-классы 46-48, 50-54
значения 34, 193-195
измерения 41-42
код на языке CSS 34-54
свойства 34-45, 168-169, 182-183, 193-195
с использованием JavaScript 172
G
Google Maps 139-141, 145-149
н
НЕХ-код 195
HTML (язык гипертекстовой разметки) 10
документ 9
код на языке HTML 20-33
с использованием JavaScript 82-90
теги 10, 20-30, 142-144
элементы 9, 10, 103, 104-111, 118-124
HTML5 localStorage 125-130
J
JavaScript 10
инструкции 67, ITr-lb
использование с CSS 172
использование с HTML 82-90
код 66-93
операторы 69-72, 166
переменные 68, 70-1
функции 78-81, 101-102, 159-161
JPEG 27
U
URL 9
URL картинки 28
А
атрибут class 48
атрибут href 62-63
атрибут id 87
атрибут onclick 82-85, 101-102
атрибут type 88
атрибут альтернативного текста (alt) 28
атрибут пути (src) 27
атрибут стиля 32, 34
атрибуты 27-28, 32, 34, 48, 82-85, 88, 101-102
142-144
В
веб-адрес - см. URL
веб-браузер 8-9
веб-сайт 8, 64-65, 192-203
веб-сервер 9, 203
веб-страница 8, 9, 23, 55-57
связь-между 64-65
Всемирная Паутина 8
встроенное содержимое 138, 142-147
Г
гиперссылки 62-65, 84
главная страница 196-197
3
задания «Сделай сам» 55, 91, 131, 150, 185
И
Интернет 8-9
Интерфейсы прикладного программирования
(API) 103
math API 177
веб-API 138-141
ключ API 139-141
к
кнопка 98-100, 112-113
код 56-57, 92, 132-133, 151, 174-175, 186-187
компьютеры 6
м
макеты 192, 202
масштабирование 194
метод appendChild 108-111
метод creoteElement 108-111
метод getElementByld 105-107
метод removeChild 118-120
н
непарный тег 25
О
обрезка 194
объектная модель документа (DOM) 103-124
методы и свойства 104-111, 118-120
объявление <!DOCTYPE> 21
операторы else 75-76
операторы if 72-74
п
параметры строки 145-146
пароль 86-93
пиксели 38, 41
Пишем код 23, 26, 29-30, 33, 37, 44-45, 50-52,
63, 65, 70-71, 74, 76, 81, 85, 100, 102, 107,
110-111, 116-117, 120, 122-124, 126-127,
140-141, 144, 147, 160-161, 169
приложения 7
веб-приложения 98-133
программное обеспечение 6
программы 6
прототип 202
проценты 42
пустая строка 172
Р
размещение на сервере 203
С
свойство background 182-183, 194
свойство background-color 36-37
свойство background-size 182-183, 194
свойство border 43
свойство color 39, 195
свойство display 168-169
свойство float 40
свойство height 41-42
свойство innerHTML 105-107
свойство margin 43
свойство padding 43
свойство text-align 39
свойство width 41-42
селектор id 157
селектор атрибута type 99
синтаксис 35
служебные слова 83
создание игры 156-187
стильВерблюда 67
тег <body> 21
тег <Ьг/> 25, 26
тег <iframe> 142-144
тег <img/> 27-30, 193-194
тег <input/> 87-88, 98-102
тег <head> 21, 46
тег <р> 24, 26
тег <script> 66
тег < Style > 47
тег <title> 21
тег группировки <div> 32-33
тег привязки < a > 62-63
текстовое поле 98-100, 112-114
текстовые редакторы 14
точки 41
ц
цикл 130, 162-163, 166-167,
170-171, 176
Э
элемент selector 53-54
Я
языки программирования 7, 10
С благодарностью к Дэвиду Уитни, Руфи Николс, Эмме Малквини
и представителям сайта Young Rewired State: Александру Крэггу,
Майклу Каламу, Хлое Гаттеридж, Россу Келсо, Стивену Маунту,
Джеймсу Томпсону, Хугу Веллу
ББК 32.973.2-018
УДК 004.42
Уитни Д.
У39 Программирование для детей. Учимся созда-
вать сайты, приложения и игры. HTML, CSS
и JavaScript. — СПб.: Питер, 2018. — 208 с.:
ил. — (Серия «Вы и ваш ребенок»).
ISBN 978-5-4461-0650-9
Думаешь, программировать это сложно? Вовсе нет!
Профессор Бейрстоун и доктор Дэй (и, конечно, Эрнест)
играючи научат этому всего за шесть увлекательных приклю-
чений! Создавать собственные сайты, игры или приложения
с помощью HTML, CSS и JavaScript — это весело и увлека-
тельно.
12+ (В соответствии с Федеральным законом от 29 декабря
2010 г. № 436-ФЗ.)
Серия «Вы и ваш ребенок»
Перевела с английского
И. Рузмайкина
Заведующая редакцией
Ю. Сергиенко
Ведущий редактор
Н. Римицан
Художественный редактор
С. Заматевская
Корректор
С. Беляева
Издание опубликовало по согласованию с Walker Books Limited, London SE11
5HJ. Все права защищен я Никакая часть данной книги не может быть вос-
произведена в какой бы то ни было форме без письменного разрешения
владельцев авторских прав.
ISBN 978-1406366846 англ.
ISBN 978-5-4461-0650-9
Text © 2016 Young Rewired State
lllustratons © 2016 Duncan Beedie
© Перевод на русский язык ООО Издательство «Питер», 2018
© Издание на русском языке, оформление ООО Издательство «Питер»,
2018
© Серия «Вы и ваш ребенок», 2018
Изготовлено в России. Изготовитель
ООО «Прогресс книга».
Место нахождения и фактический адрес:
191123, Россия, город Санкт-Петербург,
улица Радищева, дом 39, корпус Д офис 415
Тел : +78127037373.
Дата изготовления. 09.2017.
Наименование: детская литература
Срок годности, не ограничен.
Налоговая льгота — общероссийский классификатор
продукции ОК 034-2014, 58.11.12 —
Книги печотные профессиональные,
технические и научные.
Подписано в печать 20.09.17. Формат 84x108/16
Бумага офсетная Усл. п. л. 21,840
Тираж 3000. Заказ № ВЗК-05015-17.
Отпечатано в АО «Первая Образцовая типография»,
филиал «Дом печати — ВЯТКА».
610033, г. Киров, ул. Московская, 122
УЧИМСЯ
СОЗДАВАТЬ САЙТЫ,
ПРИЛОЖЕНИЯ и ИГРЫ
Дэвид Уитни
Думаешь, программировать — эго сложно? Вовсе нет!
Профессор Бейрстоун и доктор Дэй (и, конечно,
Эрнест) играючи научат этому всего ja шесть
увлекательных приключений/
Создавать собственные сайты, игры или
приложения с помощью НТП1_, CSS и JavaScript -
это весело и увлекательно.
Учитесь вместе с юными программистами П
wap из Young Rewired State, создающими технологии '
•д* будущего (Guardian).
Изготовлено в России. Изготовитель: ООО «Прогресс книга».
Место нахождения и фактический адрес: 191123, Россия, город Санкт-Петербург,
улица Радищева, дом 39, корпус Д, офис 415. Тел.: +78127037373.
Дата изготовления: 10.2017.
Наименование: детская литература.
Срок годности: не ограничен.
С^ППТЕР
Закзэкнот
тел.: (812J 703-73-74
books; ‘pittr.com
WWW.PITER.COM
каталог книг
и инк-рнет-магазин
в) vk com/piterdetstvo
@ inJ„,gram om/piterdetstvo
f) facebc ‘ kcom/piterbooks
(►) youtube. .m/ThePiterBooks