Javascript самоучитель по программированию: Основы JavaScript

Содержание

JavaScript для детей. Самоучитель по программированию читать онлайн бесплатно

1234567…97

Москва

«Манн, Иванов и Фербер»

2016

УДК 087.5:004.43

ББК 76.1,62:32.973.412

М79

Перевод с английского Станислава Ломакина

Издано с разрешения No Starch Press, Inc., a California Corporation

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

Возрастная маркировка в соответствии

с Федеральным законом № 436-ФЗ: 6+

Морган, Ник

М79 JavaScript для детей. Самоучитель по программированию / Ник Морган ;

пер. с англ. Станислава Ломакина ; [науч. ред. Д. Абрамова]. — М. : Манн,

Иванов и Фербер, 2016. — 288 с.

ISBN 978-5-00100-295-6

Эта книга позволит вам погрузиться в программирование и с легкостью

освоить JavaScipt. Вы напишете несколько настоящих игр — поиск сокро-

вищ на карте, «Виселицу» и «Змейку». На каждом шаге вы сможете оценить

результаты своих трудов — в виде работающей программы, а с понятными

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

только приятным. Книга для детей от 10 лет.

УДК 087.5:004.43

ББК 76.1,62:32.973.412

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

без письменного разрешения владельцев авторских прав.

Правовую поддержку издательства обеспечивает юриди-

ческая фирма «Вегас-Лекс».

ISBN 978-5-00100-295-6

Title of English-language original: JavaScript for Kids,

ISBN 978-1-59327-408-5, published by No Starch Press.

оформление. ООО «Манн, Иванов и Фербер», 2016

О ГЛ А В Л Е Н И Е

ВВЕДЕНИЕ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

ЧАСТЬ I. ОСНОВЫ

1. ЧТО ТАКОЕ JAVASCRIPT? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

Знакомьтесь: JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

Зачем изучать JavaScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

Пробуем JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

Строение JavaScript-программы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

Что мы узнали . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

2. ТИПЫ ДАННЫХ И ПЕРЕМЕННЫЕ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

Числа и операторы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

Переменные . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

Строки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

Булевы значения . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

Undefined и null . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

Что мы узнали . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

3. МАССИВЫ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

Зачем нужны массивы? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

Создание массива . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

Доступ к элементам массива . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

Создание и изменение элементов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

Разные типы данных в одном массиве . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

Работаем с массивами . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

Что полезного можно сделать с массивами . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

Что мы узнали . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68

4. ОБЪЕКТЫ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70

Создание объектов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70

Доступ к значениям внутри объектов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72

Добавление элементов объекта . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

Массивы объектов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

Исследование объектов в консоли . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77

Что полезного можно сделать с объектами . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79

Что мы узнали . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

5. ОСНОВЫ HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83

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

1234567…97

Книга «JavaScript для детей. Самоучитель по программированию» Морган Н

Книги
- Художественная литература
- Нехудожественная литература
- Детская литература
- Литература на иностранных языках
- Путешествия. Хобби. Досуг
- Книги по искусству
- Биографии. Мемуары. Публицистика
- Комиксы. Манга. Графические романы
- Журналы
- Печать по требованию
- Книги с автографом
- Книги в подарок
- «Москва» рекомендует
- Авторы • Серии • Издательства • Жанр
Электронные книги
- Русская классика
- Детективы
- Экономика
- Журналы
- Пособия
- История
- Политика
- Биографии и мемуары
- Публицистика
Aудиокниги
- Электронные аудиокниги
- CD – диски
Коллекционные издания
- Зарубежная проза и поэзия
- Русская проза и поэзия
- Детская литература
- История
- Искусство
- Энциклопедии
- Кулинария. Виноделие
- Религия, теология
- Все тематики
Антикварные книги
- Детская литература
- Собрания сочинений
- Искусство
- История России до 1917 года
- Художественная литература. Зарубежная
- Художественная литература. Русская
- Все тематики
- Предварительный заказ
- Прием книг на комиссию
Подарки
- Книги в подарок
- Авторские работы
- Бизнес-подарки
- Литературные подарки
- Миниатюрные издания
- Подарки детям
- Подарочные ручки
- Открытки
- Календари
- Все тематики подарков
- Подарочные сертификаты
- Подарочные наборы
- Идеи подарков
Канцтовары
- Аксессуары делового человека
- Необычная канцелярия
- Бумажно-беловые принадлежности
- Письменные принадлежности
- Мелкоофисный товар
- Для художников
Услуги
- Бонусная программа
- Подарочные сертификаты
- Доставка по всему миру
- Корпоративное обслуживание
- Vip-обслуживание
- Услуги антикварно-букинистического отдела
- Подбор и оформление подарков
- Изготовление эксклюзивных изданий
- Формирование семейной библиотеки

Расширенный поиск

Морган Н.

Отточите свои навыки работы с JavaScript с помощью этих 9 обучающих видеороликов по интересным игровым проектам

Тот факт, что 98,4% всех веб-сайтов используют JavaScript, является причиной того, что вам как разработчику следует знать его. Оглядываясь назад, создание игры с помощью JavaScript не только помогает вам быстро учиться. Он также позволяет вам научиться применять его простые и сложные концепции в различных ситуациях на рабочем месте — независимо от того, являетесь ли вы новичком или переподготовкой.

Если вы лучше учитесь с помощью наглядных демонстраций, эти учебные пособия по играм на основе JavaScript на YouTube стоят вашего времени.

1. Карточная игра с JavaScript

Эта карточная игра с JavaScript с Гэвином Лоном покажет вам, как переворачивать карты, используя более 600 строк кода JavaScript. Хотя основное внимание уделяется обучению JavaScript, вы также научитесь сочетать возможности проектирования CSS со структурированием DOM HTML для достижения скорости отклика с помощью JavaScript.

Конечная цель проекта — перевернуть пару карт, и игрок угадывает туза, когда карты, наконец, меняются местами. Каждая карта представляет собой изображение четырех разных карточных ролей. Таким образом, хотя вы и не будете создавать карты самостоятельно, вы научитесь оперативно манипулировать их положением, увеличивать количество раундов игры, добавлять или удалять очки по мере изменения уровней и сохранять игровые очки в локальном хранилище браузера — и все это с помощью JavaScript.

Учебник состоит из пошаговых инструкций, и ему легко следовать, несмотря на тяжелую работу, которую вам предстоит выполнить за кулисами. Это идеально подходит для начинающих и переподготовки. Хотя речь идет о создании карточной игры, она знакомит вас с большинством методов связывания JavaScript в реальных ситуациях. Кроме того, это распутывает вашу способность мыслить.

2. 2D-игра прорыва с JavaScript

Если вы хотите научиться управлять интервалами действий и динамически перемещать элементы DOM с помощью JavaScript, Аня Кубув покажет, как это весело с этим учебным пособием по игре прорыва с использованием JavaScript. Кроме того, видео также демонстрирует, как разместить и продемонстрировать ваш проект потенциальным работодателям.

Обдумайте каждую возможность в игре прорыва; движущаяся платформа с мячом, ударяющимся о стены по касательной, чтобы разбить кирпичи над ней. И вы также закодируете систему вознаграждения в этом. В целом, это учебное пособие по игре стоит рассмотреть, если вы хотите создать что-то с нуля, не используя сторонних агентов или исходные изображения.

При подключении вашей логики к функциям видео в простых шагах рассказывает больше о концепциях классов и объектов JavaScript, включая передовые практики условных операторов, таких как switch-case.

3. JavaScript Snake Game

Раскройте ностальгию по игре Snake II на Nokia 3310, создав эту игру JavaScript Snake вместе с Кайлом. Вы, вероятно, играли в нее раньше и, вероятно, будете играть еще много раз в жизни, поскольку вы будете кодировать ее с помощью ванильного JavaScript.

В этом видео показано, как создавать и использовать пользовательские модули в JavaScript, а также динамически связывать модели DOM. Таким образом, это открывает для вас возможность научиться разделять проблемы, используя принцип «не повторяйся» (DRY).

За кулисами вы освоите более сложные концепции JavaScript. Задачи, в том числе создание сетки игроков, размещение еды, построение тела змеи, удлинение змеи, кодирование логики навигации, создание схемы вознаграждения и штрафа и управление скоростью змеи, откроют вам доступ к основному JavaScript.

4. Игра в крестики-нолики с JavaScript

Возможно, ваш игровой процесс в крестики-нолики станет отточенным, когда вы создадите его с помощью JavaScript в другом видео с Кайлом. Это простой, но ценный проект для новичков в JavaScript, который можно использовать для решения сложных задач.

Видео не заканчивается только JavaScript. Он также демонстрирует, как реализовать дизайн пользовательского интерфейса с помощью CSS. С последовательностью и приверженностью вы можете изучить почти все методы, необходимые для начала вашего путешествия в веб-разработку, в этом видео.

Манипулируя DOM с помощью JavaScript, видео оборачивает тяжелую работу вокруг кодирования решений о выигрыше и ничьей, определения ходов игроков и выравнивания объектов. Функции, циклы и условия JavaScript — это некоторые из продвинутых понятий, которые вы изучите в этом обучающем видео JavaScript Tic Tac Toe.

5. Игра-головоломка со слайдами и JavaScript

Головоломки могут быть сложными. Но создание одного с помощью ванильного JavaScript звучит как интересный способ исследовать свои творческие способности и изучить базовые и сложные концепции JavaScript.

Вы хотите писать код в этом руководстве, если хотите увидеть, как использовать концепции JavaScript, включая условные переключатели и динамическое управление положением DOM с использованием пользовательских и встроенных функций.

Хотя репетитор помещает JavaScript в тег script в HTML-файле, вы можете поместить свой скрипт в специальный файл JavaScript и связать его с DOM в вашем случае для ясности. В любом случае, для достижения цели лучше сосредоточиться на основной логике и мыслительном процессе, в том числе на том, как применить то, что вы узнаете здесь, к более реальным сценариям.

6. Гоночная игра с JavaScript

Создание гоночной игры с использованием ванильного JavaScript может не дать наилучшего графического результата. Но создание работающей гоночной игры, следуя этому руководству, научит вас использовать функциональные возможности JavaScript в любом приложении.

В этом туториале нужно разместить две машины (красную и синюю) на гоночной трассе. Синий автомобиль появляется случайным образом с любого направления, а красный автомобиль, представляющий игрока, пытается избежать столкновения. Игра заканчивается, когда происходит контакт между обеими машинами.

Хотя это простое описание того, что вы создадите в этой статье, вы изучите продвинутую логику JavaScript для манипулирования DOM и стилей. Вы также получите представление об операторах JavaScript при создании вознаграждений и штрафов для игроков.

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

7. Игра Марио с JavaScript

Это руководство по игре Марио на JavaScript — все, что вам нужно, чтобы погрузиться в азы JavaScript. Хотя создание игры про Марио с помощью JavaScript кажется сложным, Крис, ваш наставник, показывает, что это более чем возможно, в этом видео на YouTube. Таким образом, вы можете захотеть повеселиться и изучить свои способности критического мышления, работая вместе с ними.

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

Помимо изучения манипуляций с элементами, вы будете использовать возможности чистого JavaScript для создания адаптивного шаблона холста для игрового интерфейса с использованием объектно-ориентированного программирования (ООП). Поскольку игрок активно двигается, применение управления клавиатурой JavaScript, обработка событий, циклы, операторы, условия, а также встроенные и пользовательские функции входят в число межпроектных взаимодействий, которые вы получите.

8. Создайте Minesweeper с помощью JavaScript

Хотите изучить возможности рекурсивных функций и методов массива при умножении элементов DOM с помощью JavaScript? Вы можете начать с этого учебника JavaScript Minesweeper от Ania Kubów на Traversy Media.

Это требует большого внимания к деталям. Но это учебник для начинающих и один из лучших, чтобы освоить систему компоновки сетки с использованием JavaScript. Конечная цель — создать шаблон сетки, в котором игроки не наступят на мину.

Как бы просто это ни звучало, вы напишете много программной логики, включающей большинство основных методов JavaScript, чтобы связать функциональность игры за кулисами.

9. Учебное пособие по игре Pokemon JavaScript с HTML Canvas

Pokemon — один из самых сложных игровых проектов, которые можно создать с помощью JavaScript. Однако, если вам предстоит долгие часы напряженного программирования с помощью JavaScript и вы готовы выйти обновленным с большей уверенностью, вам лучше перейти к этому руководству.

В дополнение к сценариям DOM и анимации с помощью JavaScript, видео учит вас, как перемещать и отображать активы, включая аудио и изображения, с помощью JavaScript. В этом руководстве рассказывается многое о JavaScript, что вы найдете ценным в любых реальных проблемах кодирования.

В дополнение к другим основным методам манипулирования JavaScript, в руководстве также активно используются концепции ООП; это полезно, если вы планируете позже углубиться в TypeScript. Одним из факторов, упрощающих этот учебник, является то, как преподаватель описывает задачи.

Легко отказаться, когда представляешь себе сложную систему, которую создашь, чтобы все это работало. Но подумайте о том, что вы получите в итоге.

Изучение приложений JavaScript для решения задач

Игры используют одну из самых отзывчивых и интуитивно понятных логик в программировании. Поэтому стоит изучить JavaScript, создав его. Хотя эти учебные пособия основаны на играх, они знакомят вас с основными концепциями JavaScript, применимыми ко многим другим проблемам кодирования, включая веб-разработку и создание мобильных приложений. Даже если вы планируете позже обратиться к фреймворкам, вы все равно будете применять эти концепции.

Учебники по JavaScript | HTML Собака

Хотя, вообще говоря, HTML предназначен для контент и CSS для презентации , JavaScript для интерактивности .

Первоначально разработанный для добавления небольшого количества интерактивности на страницу (например, зависания и анимация — вы знаете, что это за вещи), сейчас JavaScript используется практически во всем, вплоть до больших приложений и игр, и даже может быть найден на серверах.

Введение в программирование в целом с помощью JavaScript.

Создание вещей: применение JavaScript и использование консоли.
Переменные и данные: как создавать переменные и как их использовать. Струны!
Занятия математикой: использование переменных для хранения и использования чисел.
Логика: правда и ложь.
Условное: Если и но… нет, иначе… о нет, теперь я запутался.
Зацикливание: Пока делай, пока делай, пока делай, пока делай… доводы до тошноты.
Функции: Создание функций, их использование, передача данных внутрь и наружу.
Объекты: свойства, методы. Осмотр объектов.
Массивы: извлечение элементов и вставка их обратно. Какова длина строки?

Новый раздел примеров! Посмотрите весь этот код в действии и поэкспериментируйте с ним.

Еще немного продвинули JavaScript.

DOM: DOM как дерево элементов. Родители и дети. Мамочки и папочки. Как рождаются дети… подождите, не тот сайт.
События и обратные вызовы: программирование, управляемое событиями. Прослушивание событий и обработка их с помощью функций обратного вызова.
AJAX: асинхронный JavaScript и XML? Что? Почему?
JSON: нотация объекта JavaScript. И аргонавты.
Scope: Что такое Scope и как JavaScript, опять же, делает это по-другому.
jQuery: для чего нужна библиотека DOM и почему вы выбрали jQuery?
jQuery: DOM API: $() . Вот и все.
jQuery: AJAX: $.get , $.post и $.ajax .
jQuery: другие хитрости: DOMContentLoaded, загрузка и проверка типов.

Набор статей, посвященных передовым технологиям JS.

Объектно-ориентированный код: классы и экземпляры. Инкапсуляция поведения. Использование конструкторов и нового ключевого слова для создания экземпляров объектов.
Создание элементов: вставка элементов в DOM и связанные с этим ловушки.
Canvas: рисование и анимация на новомодном элементе HTML 5 canvas .
Локальное хранилище: сохранение данных при обновлении.

Штирлиц — Сеть печатных салонов в Перми