JavaScript с нуля

Кирупа Чиннатхамби

JavaScript с нуля

2021

Переводчик Д. Акуратер

Литературный редактор Н. Нефидова

Художник В. Мостипан

Корректоры М. Одинокова, Н. Сулейманова

СПб.: Питер, 2021.

ISBN 978-5-4461-1701-7

© ООО Издательство "Питер", 2021

Все права защищены. Никакая часть данной книги не может быть воспроизведена в какой бы то ни было форме без письменного разрешения владельцев авторских прав.

Мине!

(Той, кто до сих пор смеется над шутками из этой книги, перечитывая ее в тысячный раз.)

Благодарности

Теперь-то я знаю, что подготовка книги — дело непростое! К этому процессу подключились многие. Они были на линии фронта и в поте лица перекраивали мои нестройные рассуждения в прекрасные тексты, которые вы вот-вот прочтете. Благодарю всех коллег из издательства «Pearson», которые дали возможность этой книге появиться на свет!

Кроме того, хотел бы выразить отдельную благодарность некоторым людям. Во-первых, большое спасибо Марку Тейберу (Mark Taber) за эту возможность, Киму Спенсли (Kim Spenceley) за помощь в подготовке второго издания книги, Крису Зану (Chris Zahn) за скрупулезную проверку текста на читабельность, а также Лоретте Йейтс (Loretta Yates) за помощь в поиске нужных людей, благодаря которым удалось все это осуществить. Книгу внимательно вычитали мои старые друзья и онлайн-компаньоны — Кайл Мюррей (Kyle Murray, 1-е издание) и Тревор Маккаули (Trevor McCauley, 1-е и 2-е издания). Не устану благодарить их за подробный и полный юмора отзыв.

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

Об авторе

Большую часть своей жизни автор, Кирупа Чиннатхамби, вдохновляет людей полюбить веб-разработку так, как он сам.

В 1999 году, еще до появления слова «блогер», он начал размещать обучающие материалы на форуме kirupa.com. С тех пор он написал сотни статей, несколько книг (конечно, ни одна из них не идет ни в какое сравнение с этой!), а также записал множество видео, которые вы можете найти на YouTube. Свободное от работы над книгой и разработок время он посвящает совершенствованию веб-сервисов в качестве менеджера по продукту в Lightning Design System на SalesForce. В выходные он, скорее всего, либо дрыхнет, либо бегает вместе с Миной за их крохотной дочуркой Акирой, защищаясь от Пикселя (он же тираннозавр рекс в теле кошки), или пишет о себе от третьего лица.

Вы можете найти Кирупу в твиттере и фейсбуке, а также во многих других уголках интернета, просто введя в поисковой строке его имя.

От издательства

Ваши замечания, предложения, вопросы отправляйте по адресу [e-mail] (издательство «Питер», компьютерная редакция).

Мы будем рады узнать ваше мнение!

На веб-сайте издательства ООО Издательство "Питер" вы найдете подробную информацию о наших книгах.

Введение

Вы когда-либо пытались научиться читать, писать или говорить на неродном языке? Если вы были таким же настырным, как и я, скорее всего, эти попытки поначалу выглядели как-то так:

Если вы не Джейсон Борн или Роджер Федерер, вероятно, вам едва удалось выжить после освоения чужого языка. Все потому, что дело это тяжелое. Причем неважно, какой это язык по счету: ваш родной, второй или третий. На освоение языка на том уровне, на котором вы не будете звучать глупо, уходит много времени и усилий.

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

Парле ву JavaScript?

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

А теперь, пусть даже я терпеть не могу плохо отзываться о языке за его спиной, я заявляю, что JavaScript весьма уныл и скучен:

Описать это иначе невозможно. Но несмотря на все это уныние, не стоит думать, что его освоение должно быть таким же (ЧТЗ: вся грамматическая белиберда тщательно разобрана по полочкам — чаще всего!). Надеюсь, что по мере изучения материала обыденные примеры языка и иллюстрации покажутся вам не только информативными, но и уморительными (инфорительными!).

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

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

Связь со мной

Если вы вдруг заcтрянете на каком-нибудь материале или вам просто захочется со мной поболтать, оставляйте свои сообщения на форуме:

forum.kirupa.com.

По другим вопросам вы можете писать на электронную почту ([e-mail]), в твиттер @kirupa или фейсбук (facebook.com/kirupa). Я люблю общаться с читателями и обычно сам отвечаю на каждое сообщение.

А теперь переворачиваем страницу и поехали!

Глава 1. Hello, world!

Суть HTML в отображении, а CSS — в хорошей картинке. С помощью их обоих вы можете создать нечто прекрасное вроде примера с прогнозом погоды, доступного для просмотра здесь: http://bit.ly/kirupaWeather. На рис. 1.1 показано, как это выглядит.

Рис. 1.1. Приложение прогноза погоды — яркий пример дизайна страницы, выполненного с помощью CSS

Несмотря на то как изящно смотрятся сайты, выполненные с помощью CSS и HTML, они до боли статичны. Они не подстроятся и не среагируют на ваши действия. Эффект, созданный этой парочкой, напоминает непрерывный просмотр любимой серии «Друзей», что рано или поздно все равно навеет на вас скуку. Сайты, которые вы используете часто (вроде тех, что изображены на рис. 1.2), обладают некоторой степенью интерактивности и персонализации, что само по себе значительно выходит за пределы возможностей HTML и CSS.

Для оживления контента на вашем сайте вам пригодится сторонний помощник. Им вполне может стать JavaScript!

Рис. 1.2. Примеры сайтов, функциональность которых во многом полагается на JavaScript

Что такое JavaScript?

JavaScript — это современный язык программирования и партнер HTML и CSS. Если коротко, этот язык позволяет привнести в документ интерактивность. Вот краткий перечень возможностей, которые предоставляет JavaScript:

• Прослушивание событий, будь то клик мыши или выполнение команды.

• Изменение HTML- и CSS-страниц после их загрузки.

• Задание незаурядных траекторий перемещения объектов по экрану.

• Создание увлекательнейших браузерных игр вроде Cut the Rope.

• Обмен данными между сервером и браузером.

• Взаимодействие с веб-камерой, микрофоном и другими устройствами.

А также многое другое! Написание же JavaScript кода весьма несложно. Вы комбинируете слова, большинство из которых встречается в английском языке, отдавая таким образом браузеру команды. Следующий пример — некое сочетание классики JavaScript в новой доработке:

let defaultName = "JavaScript";

function sayHello(name) {

if (name == null) {

alert("Hello, " + defaultName +"!");

} else {

alert("Hello, " + name +"!");

}

}

Ничего страшного, если вам пока ничего не понятно. Просто обратите внимание на то, как этот код выглядит. Заметьте, что использовано много английских слов: function, if, else, alert, name. Помимо них есть еще странные символы и знаки из тех областей клавиатуры, куда взгляд обычно не падает. Но скоро, по мере того как их количество начнет расти на ваших глазах, вы постепенно разберетесь, за что отвечает каждый элемент приведенного кода.

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

Hello, world!

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

Важно знать основы веб-программирования

Чтобы начать писать на JavaScript, вам нужно знать основы создания веб-страниц, использования редактора кода и добавления HTML/CSS. Если вы не знакомы с этими вещами, призываю вас для начала прочесть статью «Создание вашей первой веб-страницы» (https://www.kirupa.com/html5/building_your_first_web_page.htm). Это поможет плавно настроиться на восприятие дальнейшей информации.

HTML-документ

Первое, что вам нужно, — это открыть HTML-документ. В этом документе вы будете записывать свой код на JavaScript. Затем запустите свой любимый редактор кода. Если у вас такового пока нет, рекомендую использовать Visual Studio Code. После запуска редактора перейдите к созданию нового файла. В Visual Studio Code вы увидите вкладку Untitled, как на рис. 1.3.

Рис. 1.3. Вкладка Untitled-1 в Visual Studio Code

Сохраните созданный файл через меню File | Save. Вам нужно указать его имя и рабочий стол. После сохранения добавьте в него следующий код HTML:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>An Interesting Title Goes Here</title>

<style>

</style>

</head>

<body>

<script>

</script>

</body>

</html>