JavaScript для детей. Самоучитель по программированию. Ник Морга. Москва Манн, Иванов и Фербер 2016

277
Веб-программирование
Чтобы создавать сайты, вам помимо JavaScript понадобятся знания
HTML и CSS.
HTML
HTML — это язык разметки, предназначенный для создания веб-страниц.
Мы изучили основы HTML в пятой главе, однако это лишь капля в море.
Вот некоторые источники, из которых вы можете узнать об HTML больше:
•
• https://www.codecademy.com/• Mozilla Webmaker: https://webmaker.org/.
CSS
CSS, или «каскадные таблицы стилей», — это язык для управления внешним видом веб-страниц. Узнать о CSS больше можно здесь:
•
•
Серверное программирование на Node.js
Веб-страницы располагаются на веб-серверах. Сервер хранит весь HTML,
CSS и JavaScript-код страницы, предоставляя к ней доступ из интернета.
Также вы можете писать программы для серверов (так называемый сервер-
ный код), позволяющие серверу генерировать различный HTML-код при каждой загрузке страницы. Например, когда вы заходите в Twitter, серверная программа ищет самые свежие посты для вашей ленты, генерирует HTMLфайл с этими постами и передает его вашему браузеру.
Node.js позволяет писать серверные программы на JavaScript. Ознакомьтесь с информацией о Node.js по этим ссылкам:
• Больше о Node можно узнать здесь: https://nodejs.org/ (на английском).
• Руководство Node Beginner Book: https://www.nodebeginner.ru
(на русском).

278
Послесловие: куда двигаться дальше
Графическое программирование
Если вы хотите создавать интерактивную графику на JavaScript, у вас есть два основных пути: это элемент canvas и SVG.
canvas
Мы изучили основы работы с элементом canvas в книге, однако его возможности гораздо шире. Вот некоторые обучающие статьи и игры, которые помогут вам ближе познакомиться с «холстом»:
• Обучающая статья по canvas на Mozilla Developer Network:
•
SVG с помощью Raphael
SVG — это графический формат, позволяющий рисовать разные фигуры и анимировать их без необходимости перерисовывать каждый шаг анимации с нуля.
Программирование SVG — дело не из простых, но вам будет куда легче, если вы воспользуетесь JavaScript-библиотекой Raphael:
•
(на английском).
3D-программирование
Помните, как в главе 13 мы запрашивали у «холста» canvas двухмерный контекст рисования вызовом canvas.getContext("2d")? Кроме этого, на «холсте» можно создавать и трехмерные изображения. Это еще одна из тех областей, где проще всего воспользоваться библиотекой, и я рекомендую вам библиотеку three.js. Вот некоторые ресурсы для ее изучения:
• Руководство по three.js: https://threejs.org/docs/index.html#Manual
(на английском).
• three.js для начинающих: https://blog.teamtreehouse.com/thebeginners-guide-to-three-js/ (на английском).

Послесловие: куда двигаться дальше
279
Программирование роботов
При помощи JavaScript можно даже управлять роботами! Например,
Parrot AR.Drone. Это маленький вертолет, которым можно управлять с помощью Node.js. Также вы можете обратить внимание на Johnny-Five,
JavaScript-библиотеку для управления устройствами наподобие Arduino
(это популярный микроконтроллер, который используется во многих любительских устройствах и роботах). Вот некоторые ресурсы о том, как управлять роботами и другими устройствами из JavaScript-кода:
• node-ar-drone: https://github.com/felixge/node-ar-drone/ (на английском).
• NodeBots: https://nodebots.io/ (на английском).
• Johnny-Five:
лийском).
Программирование звука
JavaScript также позволяет программировать звук в веб-браузере с помощью интерфейса Web Audio API. Используя этот программный интерфейс, вы можете создавать звуковые эффекты и даже писать музыку! Вот некоторые ресурсы по Web Audio API:
• Web Audio API на Mozilla Developer Network: https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/
(на английском).
• Статья «HTML5 Rocks: Getting Started with Web Audio API»: https://w w w.html5rocks.com/en/tutorials/webaudio/intro/
(на английском).
Программирование игр
Если вы хотите продолжить заниматься программированием JavaScriptигр, вам стоит попробовать какой-нибудь игровой движок. Игровой движок — это библиотека кода, который обеспечивает низкоуровневые детали реализации игры (такие как ввод с клавиатуры и мышки), позволяя вам сосредоточиться на том, что делает вашу игру особенной, то есть на дизайне. Вот ресурсы, где вы можете больше узнать о программировании игр и игровых движках:
• Игровой движок Crafty: https://craftyjs.com/ (на английском).

• Pixi Renderer: https://github.com/GoodBoyDigital/pixi.js (на английском).
• Игровые движки для HTML5: https://html5gameengine.com/
(на английском).
•
• Книга: 3D Game Programming for Kids, Chris Strom (Pragmatic
Programmers, 2013) (на английском).
Обмен кодом с помощью JSFiddle
Что если вам захочется поделиться своим замечательным JavaScriptкодом со всем миром? Есть немало способов это сделать. Один из самых простых — воспользоваться JSFiddle (https://jsfi ddle.net/). Просто введите ваш код в поле для JavaScript, добавьте любой необходимый HTML-код в поле для HTML и нажмите Run для запуска своей программы. Чтобы поделиться кодом с другими, нажмите Save, и вы получите URL (вебадрес), который сможете передать друзьям.

281
ГЛ О СС А Р И Й
В мире программирования немало специальных терминов и обозначений. Чтобы привыкнуть к ним, может понадобиться некоторое время.
Здесь вы найдете определения терминов, использованных в книге. Если, читая книгу, вы встретите термин, значение которого вам не вполне ясно, загляните сюда за его кратким определением.
Аргумент — значение, которое передается в функцию.
Атрибут — пара «ключ-значение» в составе HTML-элемента. Атрибуты можно использовать для управления различными свойствами элемента, например адресом, на который он ссылается, или размерами элемента.
Бесконечный цикл — цикл, который никогда не прекращается сам по себе (что нередко приводит к сбою интерпретатора). Может быть следствием неверно заданных условий цикла.
Библиотека — содержащий функции и методы пакет JavaScript-кода, который можно подгрузить к веб-странице и использовать в своей программе. В этой книге мы пользуемся библиотекой jQuery, предоставляющей функции и методы для удобной работы с DOM.
Булево значение — значение, которое может быть либо истинным
(true), либо ложным (false).
Верблюжья запись —общепринятый способ наименования переменных, когда отдельные слова, из которых состоит имя переменной

282
Глоссарий
(кроме самого первого слова), пишутся с заглавной буквы; например: myCamelCaseVariable.
Возврат —выход из функции и возвращение в точку программы, откуда она была вызвана. Возврат происходит при достижении конца тела функции либо при выполнении оператора return (с помощью которого можно выйти из функции досрочно). При этом функция возвращает назад значение (если конкретное возвращаемое значение в функции не указано, будет возвращено пустое значение undefi ned).
Вызов —выполнение функции. Чтобы вызвать функцию в JavaScript, нужно ввести ее имя, а затем пару круглых скобок (внутри которых указываются аргументы, если они есть).
Выполнение —запуск некоторого кода, например программы или функции.
Данные —хранимая в компьютерных программах информация, с которой выполняются некие действия.
Декремент —уменьшение значения переменной (обычно на 1).
Диалог —небольшое всплывающее окошко. Из JavaScript-кода можно открывать в браузере различные диалоги, такие как alert (отображение текстового сообщения) или prompt (запрос и получение ввода от пользователя).
Индекс —число, соответствующее позиции значения в массиве. С помощью индекса можно получить доступ к определенному значению.
Инкремент —увеличение значения переменной (обычно на 1).
Интерпретатор —компьютерная программа, считывающая и исполняющая код. В составе веб-браузеров есть интерпретатор JavaScript, который используется в этой книге для запуска программ.
Ключевое слово —слово, которое имеет специальное значение в JavaScript (например, for, return или function). Ключевые слова нельзя использовать в качестве имен переменных.
Комментарий —фрагмент текста программы, который игнорируется интерпретатором JavaScript. Комментарии нужны лишь для того, чтобы пояснять работу программы тем, кто читает ее код.
Конструктор —разновидность функции, используемой для создания объектов с одинаковыми встроенными свойствами.

Глоссарий
283
Массив —список значений в JavaScript. Каждому значению соответствует индекс, то есть порядковый номер этого значения в массиве.
Индекс первого элемента равен 0, второго — 1 и т. д.
Метод —функция, являющаяся свойством объекта.
Обработчик события —функция, которая вызывается, когда определенное событие происходит с определенным HTML-элементом.
Например, в игре «Найди клад!» из главы 11 мы создаем функцию — обработчик событий для кликов мышкой по изображению карты.
Объект —набор пар «ключ-значение». Каждый ключ — это строка, которую можно связать с любым JavaScript-значением. Зная ключ, можно получить из объекта связанное с ним значение.
Объектно-ориентированное программирование —стиль программирования, подразумевающий использование объектов и методов для структурирования кода и реализации основных возможностей программы.
Пара «ключ-значение» —пара, состоящая из строки (называемой ключом) и связанного с ней значения (любого типа). Пары «ключ-значение» содержатся в JavaScript-объектах и позволяют задавать их свойства и методы.
Переменная —способ связывания имени со значением. После того как переменной присвоено значение, к нему можно обращаться через имя переменной.
Пробельный символ —неотображаемый на экране символ, например пробел, перенос строки, табуляция.
Свойство —имя пары «ключ-значение», принадлежащей объекту.
Синтаксис —правила объединения ключевых слов, знаков пунктуации и других символов в работающую JavaScript-программу.
Событие —действие в браузере, например клик мышкой или нажатие клавиши. События можно как отслеживать, так и реагировать на них — при помощи обработчиков событий.
Строка —последовательность символов, окруженная кавычками; представление текста в компьютерных программах.
Строка селектора —строка, обозначающая один или несколько HTMLэлементов, которую можно передать jQuery-функции для поиска этих элементов.

284
Глоссарий
Тег —сетка, используемая для создания HTML-элементов. Все элементы начинаются с открывающего тега, и большинство из них заканчиваются закрывающим тегом. Теги определяют тип создаваемого элемента. Кроме того, в открывающем теге можно задать атрибуты элемента.
Текстовый редактор —компьютерная программа для написания и редактирования простого текста без специального форматирования
(например, выбора различных шрифтов и цветов). Для создания программ (которые пишутся простым текстом) желателен хороший текстовый редактор.
Управляющая конструкция —способ контроля за тем, когда и сколько раз выполняется фрагмент кода. Например, условные конструкции (по заданному условию определяющие, когда выполнять код) и циклы (выполняющие фрагмент кода повторно определенное количество раз).
Условная конструкция —конструкция языка, которая выполняет код в зависимости от проверки условия. Если условие истинно
(true), выполняется один фрагмент кода, а если условие ложно
(false) — либо другой фрагмент, либо не делается ничего. Примеры условных конструкций: операторы if и if... else.
Функция —состоящий из одной или более команд фрагмент кода, который можно вызывать (выполнять). С помощью функции можно повторять один и тот же набор действий в разных частях программы. Функция может принимать аргументы и возвращать обратно значение.
Цикл —способ многократного выполнения фрагмента кода.
Элемент —часть HTML-документа; например, заголовок, параграф или тело
(body). Элемент обозначается открывающим и закрывающим тегами (которые определяют тип элемента) и включает в себя все, что находится между этими тегами. Дерево DOM состоит из элементов.
Язык программирования —язык, с помощью которого программист может объяснить компьютеру, как нужно выполнить некую задачу.
JavaScript — один из множества языков программирования.
DOM (объектная модель документа) —способ, которым веб-браузеры упорядочивают HTML-элементы на веб-странице. Элементы организованы в виде древовидной структуры, которую называют деревом DOM.
В JavaScript и jQuery есть методы для работы с DOM, то есть поиска, создания и изменения элементов.

jQuery —JavaScript-библиотека, предоставляющая множество методов для работы с элементами DOM на веб-странице.
Null —специальное значение, благодаря которому мы видим, что переменная намеренно оставлена пустой.
Prototype —свойство конструктора. Методы, добавленные к свойству prototype, становятся доступны всем объектам, созданным через этот конструктор.
Undefi ned —специальное значение, которое JavaScript использует, чтобы показать, что некоему свойству или переменной не было присвоено конкретное значение.

286
О Б А В Т О Р Е
Ник Морган — фронтенд-разработчик в компании Twitter. Он любит все языки программирования, но к JavaScript питает особую нежность. Ник живет в Сан-Франциско (в его туманной части) со своей невестой и их пушистой собакой Оладушком. Ник ведет блог по адресу skilldrick.co.uk.
О художнике
Миран Липовача — автор книги «Изучай Haskell во имя добра!» (издательство «ДМК-Пресс», 2012). Он обожает боксировать, играть на басгитаре и, разумеется, рисовать. Он неравнодушен к танцующим скелетам и числу 71, а проходя через автоматические двери, делает вид, будто открывает их силой разума.
О техническом редакторе
Ангус Кролл — автор статьи «Если бы Хемингуэй писал на JavaScript», и он в равной мере одержим языком JavaScript и литературой. Ангус работает в Twitter, в команде UI-фреймворков, и является одним из авторов фреймворка Flight. Он ведет авторитетный блог JavaScript, JavaScript и выступает на конференциях по всему миру.
Перевод статьи можно почитать

287
Б Л А Г О Д А Р Н О С Т И
Тысяча благодарностей моей невесте Филли за помощь и поддержку в течение последних 18 месяцев. Без нее я бы действительно не справился. И спасибо Оладушку, нашему песику, за великодушное разрешение использовать его имя в примерах кода.
Спасибо Ангусу — если бы не он, я не сидел бы здесь, в СанФранциско, работая над этой книгой. Ангус порекомендовал меня компании Twitter в 2011 году, а в 2013 году сказал Биллу Поллоку, что идея написать книгу, которую вы держите сейчас в руках, может меня заинтересовать. И в довершение он согласился быть техническим редактором, выловив из текста немалое количество JavaScript-ляпсусов.
Спасибо Биллу Поллоку, Сефу Крамеру, Рили Хоффман, Тайлеру
Ортману и остальным сотрудникам издательства No Starch Press, которые терпеливо помогали мне писать эту книгу. Особая благодарность
Биллу и Сефу за помощь в приведении первоначального текста к его нынешнему виду.
Спасибо юным рецензентам Ривер Брэдли, Дэмиену Чемпу и Алексу
Чу, от которых я получил ценный отклик по ранним версиям книги.
И наконец, спасибо Мирану Липоваче. Я давний его поклонник: книга Мирана «Изучай Haskell во имя добра!» — одна из моих любимых книг по программированию, а его иллюстрации к ней просто великолепны. Когда я узнал, что он будет иллюстратором моей книги, я был на седьмом небе от радости. Картинки, которые Миран нарисовал для этой книги, лучше, чем я даже мог себе вообразить, и я счастлив, что мне выпала удача с ним работать.

Издание для досуга
Для широкого круга читателей
Морган Ник
JavaScript для детей
Самоучитель по программированию
Главный редактор Артем Степанов
Руководитель направления Анастасия Троян
Ответственный редактор Анна Дружинец
Литературный редактор Лев Эйделькинд
Научный редактор Дарья Абрамова
Дизайн обложки Сергей Хозин
Верстка Надежда Кудрякова, Елена Бреге
Корректоры Юлия Молокова, Надежда Болотина

перейти в каталог файлов