Об авторах

Лоренс Ларс Свекис является экспертом в области инновационных технологий, имеет широкий спектр теоретических знаний и реальный опыт в области веб-разработки. Начиная с 1999 года участвует в различных веб-проектах, как крупных, так и небольших. Преподает с 2015 года и обожает воплощать идеи в онлайн-жизнь. Для Лоренса учить и помогать людям — потрясающая возможность, поскольку ему нравится делиться знаниями с обществом.

Алексис и Себастьян, большое спасибо за вашу поддержку.

Майке ван Путтен известна страстью к обучению и разработке программного обес­печения, стремлением сопровождать людей на их пути к новым высотам в карьере. К числу ее любимых языков относятся JavaScript, Java и Python. Как разработчик участвует в проектах по созданию программного обеспечения и как тренер — в различных сферах, начиная с IT для «чайников» и заканчивая продвинутыми темами для опытных специалистов. Любит создавать образовательный онлайн-контент на различных платформах, предназначенный для широкой аудитории.

Роб Персиваль — уважаемый веб-разработчик и преподаватель Udemy с аудиторией более 1,7 миллиона учеников. Более 500 000 из них приобрели его «Полный курс веб-разработчика 2.0», а также курсы разработчиков Android и iOS.

О научном редакторе

Крис Минник — активный автор, блогер, тренер, спикер и веб-разработчик. Его компания WatzThis? занимается поиском лучших способов обучения новичков навыкам обращения с компьютером и программированию.

Крис более 25 лет трудится full-stack-разработчиком и более десяти лет — преподавателем. Обучает веб-разработке, ReactJS и продвинутому JavaScript во многих крупнейших мировых компаниях, а также в публичных библиотеках, коворкингах и на личных встречах.

Крис Минник — автор и соавтор более десятка технических изданий для взрослых и детей, включая React JS Foundations, HTML and CSS for Dummies («HTML и CSS для чайников»), Coding with JavaScript for Dummies («JavaScript для чайников»), JavaScript for Kids, Adventures in Coding и Writing Computer Code.

Предисловие

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

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

Для кого эта книга

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

Структура издания

Глава 1 «Начало работы с JavaScript» знакомит с базовыми сведениями по JavaScript, которые вы должны знать, чтобы понять оставшуюся часть книги.

Глава 2 «Основы JavaScript» описывает основные элементы кода: переменные, типы данных и операторы.

Глава 3 «Множественные значения JavaScript» затрагивает вопросы хранения множественных величин в одной переменной с использованием массивов и объектов.

В главе 4 «Логические операторы» начнется настоящее веселье: мы будем использовать логические операторы, чтобы они принимали решения за нас!

Глава 5 «Циклы» описывает ситуации, когда необходимо повторить фрагмент кода (для чего циклы и используются). Мы рассмотрим различные типы циклов, в том числе циклы for и while.

Глава 6 «Функции» вводит очень полезные объекты для работы с повторяющимися фрагментами кода: функции! Они позволяют вызывать определенный блок кода в любом месте нашего скрипта для выполнения какой-то задачи, благодаря чему мы не будем дублировать написанное, соблюдая таким образом один из фундаментальных принципов чистого кода.

В главе 7 «Классы» мы продолжим строить блоки JavaScript, которые помогут лучше структурировать приложение. Зная к тому моменту, как создавать объекты, вы научитесь работать с шаблонами объектов, которые, когда понадобится конкретный тип объекта, можно использовать повторно.

Глава 8 «Встроенные методы JavaScript» знакомит с некоторым встроенным функционалом. Конечно, можно писать функции и самостоятельно; но на практике куда чаще используются встроенные функции JavaScript, особенно в таких общих задачах, как проверка, имеем ли мы дело с числом или нет.

Глава 9 «Объектная модель документа» рассматривает такие понятия, как объектная модель браузера и объектная модель документа (DOM). Благодаря им вы сильно обогатите свои методы использования JavaScript. Вы узнаете, что такое DOM, как с ней взаимодействует JavaScript и как благодаря этому можно изменять веб-сайты.

Глава 10 «Управление динамическими элементами с помощью DOM» показывает, как динамически управлять элементами DOM и создавать таким образом современные пользовательские интерфейсы. Вы сможете изменить сайт в ответ на поведение пользователей, например на нажатие кнопки.

Глава 11 «Интерактивный контент и прослушиватели событий» поднимет качество вашего отклика на желания пользователей на новый уровень. Например, вы научитесь реагировать на такие события, как выход курсора за пределы поля ввода и движение мыши.

Глава 12 «Средний уровень JavaScript» касается задач, для решения которых понадобится средний уровень знания JavaScript. Это, например, регулярные выражения, рекурсия и отладка, необходимые для повышения производительности программного кода.

Глава 13 «Параллелизм» познакомит с поточным и асинхронным программированием, которое позволит вашему коду выполнять несколько задач одновременно и действительно быть гибким.

Глава 14 «HTML, Canvas и JavaScript» посвящена HTML5 и JavaScript. Предыдущие главы дают довольно много информации о HTML и JavaScript; здесь же мы сосредоточимся именно на HTML5, в частности на таких его особенностях, как элемент canvas.

Глава 15 «Дальнейшие шаги» расскажет, куда можно двигаться после изучения всех фундаментальных возможностей JavaScript и приобретения навыка создания изящных программ с помощью JavaScript. Мы познакомимся с такими знаменитыми библиотеками и фреймворками для JavaScript, как Angular, React и Vue, а также рассмотрим Node.js и узнаем, как бэкенд может быть реализован в JavaScript.

Как извлечь максимальную пользу
из книги

Предыдущий опыт программирования для вас будет полезен, но он точно не обязателен. Чтобы начать работу с данной книгой, достаточно компьютера с текстовым редактором (Notepad или TextEdit, не Word!) и браузером. Выполняйте упражнения и проекты, постоянно экспериментируйте — так вы будете уверены, что разобрались в теме и сможете идти дальше.

Файлы с примерами программного кода

Файлы с примерами для книги размещены в GitHub по адресу https://github.com/PacktPublishing/JavaScript-from-Beginner-to-Professional. Изучите их!

Цветные изображения

Мы также предоставляем PDF-файл с цветными оригинальными изображениями скриншотов/диаграмм, использованных в книге. Вы можете найти файл по адресу https://static.packt-cdn.com/downloads/9781800562523_ColorImages.pdf.

Условные обозначения

Моноширинным шрифтом написаны фрагменты кода в тексте, имена таблиц баз данных, имена папок и файлов, расширения файлов, имена путей, макеты URL, пользовательский ввод, имена пользователей Twitter. Например: «Нам также необходимо сообщить браузеру, с каким типом документа мы работаем, объявив <!DOCTYPE>».

Фрагмент кода выглядит следующим образом:

<html>

  <script type="text/javascript">

    alert("Hi there!");

  </script>

</html>

Любой ввод или вывод командной строки указывается так:

console.log("Hello world!")

Курсивом выделяется новый термин или важное слово. Рубленым шрифтом выделены слова, отображаемые на экране (выбранные пункты в меню или диалоговых окнах также будут выделены таким шрифтом). Например: «Если вы щелкнете правой кнопкой мыши и выберете пункт Inspect (Проверка) в системах macOS, на экране появится изображение, представленное на одном из следующих снимков экрана».

Предупреждения или важные сообщения выглядят так.

Советы и рекомендации выглядят так.

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

Ваши замечания, предложения, вопросы отправляйте по адресу comp@piter.com (­издательство «Питер», компьютерная редакция).

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

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

Глава 1. Начало работы
с JavaScript

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

Вполне вероятно, что вы уже пользовались функциями, написанными на Java­Script, — особенно если работали в таких браузерах, как Chrome, Firefox, Safari или Edge. JavaScript чрезвычайно распространен. После открытия страницы вам предлагается принять cookie-файлы. Как только вы нажимаете ОК, всплывающее окно исчезает — это результат работы JavaScript. Когда вы перемещаетесь по разделам сайта и открываете подменю, также работает JavaScript. Или когда вы фильтруете товары в каталоге интернет-магазина. А как насчет чатов, которые выскакивают в считаные секунды пребывания на сайте? Что ж, вы правы — это также JavaScript!

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

В этой главе мы затронем следующие темы.

• Почему надо изучать JavaScript.
• Как настроить среду разработки.
• Как браузер понимает JavaScript.
• Как использовать консоль браузера.
• Как добавить JavaScript на веб-страницу.
• Как написать код JavaScript.

Решения упражнений и проектов, а также ответы на вопросы для самопроверки находятся в приложении.

Почему надо знать JavaScript

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

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

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

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

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

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

Настройка среды разработки

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

Встроенная среда разработки

Встроенная среда разработки (IDE) — это специальное приложение для написания, запуска и отладки кода. Вы можете открыть его, как любую другую про­грамму. Например, чтобы создать текстовый документ, необходимо запустить редактор, выбрать файл и начать писать. Так же и в программировании: вы открываете IDE и пишете код. Если нужно запустить код, просто нажмите соответствующую кнопку в IDE. Для JavaScript может потребоваться открыть браузер вручную.

Однако IDE способна на большее. Обычно в ней есть функция подсветки синтаксиса: определенные элементы кода выделяются определенным цветом, что позволяет быстрее находить ошибки. Другая полезная особенность — это автодополнение кода: редактор сам предлагает варианты заполнения, доступные в текущем месте кода. Большинство IDE содержат специальные плагины, которые помогают сделать работу интуитивно понятной и добавить дополнительные функции, например горячую перезагрузку (hot reload) в браузере.

Существует множество IDE, и все они отличаются наборами предлагаемых функций. В книге мы используем Visual Studio Code, но это личное предпочтение. Для своей работы вы можете взять и другие IDE: Atom, Sublime Text и WebStorm. Среды разработки продолжают появляться, поэтому, скорее всего, самой популярной на момент прочтения данной книги в этом списке нет. С актуальными предложениями вы можете познакомиться, запустив быстрый поиск в интернете по запросу JavaScript IDE. При выборе IDE прежде всего уделите внимание следующим моментам: убедитесь, что среда поддерживает подсветку синтаксиса, отладку и автодополнение кода JavaScript.

Браузер

Вам также понадобится браузер. Большинство браузеров отлично подходят для задач JavaScript, но лучше не использовать Internet Explorer, который не поддерживает его обновленные функции. Два хороших варианта: Chrome и Firefox. Они прекрасно работают с актуальным функционалом JavaScript, к тому же располагают полезными плагинами.

Дополнительные инструменты

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

Онлайн-редактор

Это хорошее решение в случае, если у вас нет компьютера (возможно, только планшет) или вы не можете ничего на него устанавливать. В частности, для таких ситуаций есть отличные онлайн-редакторы. Мы не даем конкретных названий: онлайн-редакторы быстро развиваются, и предложенный нами список, вероятно, устареет к моменту выхода книги. Сделайте в интернете запрос online JavaScript IDE — система выдаст вам множество результатов, где вы сможете начать программировать на JavaScript простым нажатием кнопки.

Как браузер понимает JavaScript

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

Веб-страница — это не только JavaScript. Она создается с помощью трех языков: HTML, CSS и JavaScript.

HTML определяет то, что отображается на странице: ее содержимое хранится в нем. Если на странице есть абзац, в HTML-коде это будет прописано. Видим заголовок — значит, в HTML он тоже есть. И так далее. HTML состоит из элементов, которые называются тегами. Они описывают конкретный компонент страницы. Вот небольшой пример кода страницы с текстом Hello world!:

<html>

  <body>

    Hello world!

  </body>

</html>

Не переживайте, если не работали с HTML ранее: в главе 9 есть ускоренный курс этого языка.

CSS — это шаблон веб-страницы. Размер шрифта, семейство шрифтов и расположение текста на странице задаются с его помощью. Так, например, синий цвет текста — результат работы CSS.

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

Работая с JavaScript, вы рано или поздно столкнетесь с термином ECMAScript. Это спецификация, или стандартизация, для языка JavaScript. Текущий стандарт — ECMAScript 6 (также называемый ES6). Браузеры используют его для поддержки JavaScript (в дополнение к таким возможностям, как объектная модель документа (DOM), — ее мы рассмотрим позже). Существует множество незначительно различающихся реализаций JavaScript, и ECMAScript можно считать базовой спецификацией, про которую с уверенностью можно сказать, что в конкретную реализацию она будет включена.

Использование консоли браузера

У браузера есть встроенные возможности для просмотра кода на текущей странице — возможно, вы уже имели с ними дело. Если, находясь в браузере, нажать клавишу F12 на компьютере с Windows или щелкнуть правой кнопкой мыши на пункте Inspect (Проверка) в системе macOS, экран приобретет вид, представленный на одном из следующих снимков экрана.

На вашем компьютере итог может несколько отличаться, но, как правило, на macOS результат нажатия Inspect выглядит так, как показано на рис. 1.1.

На снимке экрана вверху видно несколько вкладок. Рассмотрим элементы, которые содержат в себе HTML и CSS (помните такие?). Если вы щелкнете на вкладке консоли, в нижней части панели найдется место, где можно непосредственно ввести код. Там могут появляться различные предупреждения и сообщения об ошибках — если страница в целом работает, не беспокойтесь о них: подобные уведомления не редкость.

Рис. 1.1. Консоль браузера на сайте Packt

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

console.log("Hello world!");

Щелкните на вкладке консоли и введите этот код. После нажатия Enter на экране отобразится вывод вашего кода. Он должен выглядеть как на рис. 1.2.

В книге мы будем часто использовать console.log(), чтобы проверять фрагменты кода и просматривать результаты. Существуют и другие консольные методы. Например, console.table() представляет введенные данные в виде таблицы. Еще один консольный метод, console.error(), выводит сообщение об ошибке.

Рис. 1.2. JavaScript в консоли браузера

Практическое занятие 1.1

Работа с консолью

1. Откройте консоль браузера, напишите 4 + 10 и нажмите Enter. Что было представлено в качестве ответа?
2. Введите команду console.log(), поместив в круглые скобки какое-нибудь значение. Попробуйте вписать свое имя в кавычках (кавычки нужны для указания факта, что перед нами текстовая строка; мы рассмотрим это подробнее в следующей главе).

Добавление JavaScript на веб-страницу

Существует два способа добавления JavaScript-кода на веб-страницу. Один из них — ввести код прямо в HTML между парными тегами <script>. Первый <script> объявляет, что в рамках скрипта нужно выполнить следующий код. Далее располагается содержимое скрипта. Затем мы закрываем скрипт тем же тегом <script>, только в начале текста между скобками добавляем слеш — </script>. Второй способ — подключить файл JavaScript к HTML-файлу, используя соответствующий тег в заголовке страницы HTML.

Непосредственно в HTML

Перед вами пример простой веб-страницы, на которой всплывает окно с надписью Hi there!:

<html>

  <script type="text/javascript">

    alert("Hi there!");

  </script>

</html>

Если сохранить этот код как файл с расширением .html и открыть его в браузере, результат будет похожим на представленный на рис. 1.3. Сохраним файл как Hi.html.

Рис. 1.3. Код JavaScript реализовал всплывающее окно с текстом Hi there!

Команда alert создает всплывающее окно с сообщением. Текст сообщения оформляется в скобках.

Сейчас наш контент располагается непосредственно между тегами <html>. Это не лучшее решение. Нужно создать еще два элемента — <head> и <body>. В head мы укажем метаданные; также в данном теге внешние файлы подключаются к HTML-файлу. В body поместится содержимое веб-страницы.

Кроме этого, необходимо сообщить браузеру, с каким типом документа мы работаем, объявив <!DOCTYPE>. Поскольку мы начали писать код JavaScript в HTML, наполнение тега будет следующим: <!DOCTYPE html>. Пример:

<!DOCTYPE html>

<html>

<head>

  <title>This goes in the tab of your browser</title>

</head>

<body>

The content of the webpage

  <script>

    console.log("Hi there!");

  </script>

</body>

</html>

В результате веб-страница должна отобразить следующее: The content of the webpage. Если вы посмотрите в консоль браузера, то обнаружите там сюрприз: исполненный код JavaScript и строку Hi there!.

Практическое занятие 1.2

JavaScript на HTML-странице

1. Откройте редактор кода и создайте HTML-файл.
2. Пропишите HTML-теги doctype, html, head и body и добавьте скрипт.
3. Между тегами скрипта напишите какой-нибудь JavaScript-код. Можете использовать console.log("hello world!").

Присоединение стороннего файла к веб-странице

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

Сначала нам понадобится отдельный файл JavaScript (расширение таких файлов — .js). Мы назовем его ch1_alert.js. Содержимое файла следующее:

alert("Saying hi from a different file!");

Теперь создадим отдельный файл HTML (с расширением .html). И наполним его:

<html>

  <script type="text/javascript" src="ch1_alert.js"></script>

</html>

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

Указывая путь к JavaScript-файлу, можно использовать относительный или абсолютный путь. Прежде всего рассмотрим последний, более простой для объяснения. В компьютере есть коренной каталог. Для систем Linux и macOS это обычно /, а для Windows — C:/. Путь к файлу, который начинается в коренном каталоге, называется абсолютным. Прописывать его проще всего, и на вашем компьютере данный способ наверняка сработает. Но есть одна загвоздка: если папка вашего веб-сайта позже будет перемещена с компьютера на сервер, абсолютный путь больше не будет актуальным.

Второй, более безопасный способ — это относительный путь. Вы указываете, как добраться к JavaScript-файлу из файла HTML, в котором вы сейчас находитесь. Если оба файла располагаются в одной папке, просто указывается требуемое название. Допустим, файл JavaScript сохранен в папке example, которая находится внутри папки с HTML-файлом — в таком случае вы пишете example/nameOfTheFile.js. Если JavaScript-файл лежит на одну папку выше, по сути располагаясь рядом с HTML-файлом вид записи будет следующим: ../nameOfTheFile.js.

Когда вы откроете HTML-файл, вы должны увидеть следующее (рис. 1.4).

Рис. 1.4. Всплывающее окно, созданное JavaScript в стороннем файле

Практическое занятие 1.3

Подключение файла JavaScript

1. Создайте отдельный файл app с расширением .js.
2. Введите код JavaScript в файл .js.
3. Создайте подключение к отдельному файлу .js в коде HTML-файла, созданного на практическом занятии 1.2.
4. Откройте HTML-файл в браузере, чтобы удостовериться, что код JavaScript работает корректно.

Написание кода JavaScript

Итак, вы познакомились с контекстом и наверняка задаетесь вопросом: хорошо, но как же писать код JavaScript? Рассмотрим несколько важных моментов, которые необходимо держать в уме: как отформатировать код, как правильно использовать отступы и точки с запятой, а также как добавлять комментарии.

Форматирование кода

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

Отступы и пробелы

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

Без переноса на новую строку:

let status = "new"; let scared = true; if (status === "new") { console.

log("Welcome to JavaScript!"); if (scared) { console.log("Don't worry

you will be fine!"); } else { console.log("You're brave! You are going

to do great!"); } } else { console.log("Welcome back, I knew you'd like

it!"); }

С переносом на новую строку, но без отступов:

let status = "new";

let scared = true;

if (status === "new") {

console.log("Welcome to JavaScript!");

if (scared) {

console.log("Don't worry you will be fine!");

} else {

console.log("You're brave! You are going to do great!");

}

} else {

console.log("Welcome back, I knew you'd like it!");

}

С переносом на новую строку и с отступами:

let status = "new";

let scared = true;

if (status === "new") {

  console.log("Welcome to JavaScript!");

  if (scared) {

    console.log("Don't worry you will be fine!");

  } else {

    console.log("You're brave! You are going to do great!");

  }

} else {

  console.log("Welcome back, I knew you'd like it!");

}

Благодаря отступам легко определить границы конкретного блока, в нашем случае они видны по оператору if, совпадающему по уровню с }. В примере без отступов, чтобы определить, где заканчивается блок оператора if, вам придется считать скобки. На работоспособность кода это не влияет, но все же стоит использовать отступы. Вы позже сами скажете себе спасибо.

Точки с запятой

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

Комментарии к коду

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

а) вы не хотите, чтобы какой-то код исполнялся во время запуска скрипта. Просто вынесите этот код в комментарий — и интерпретатор его не увидит;

б) вам нужно добавить к коду контекст (метаданные): например, имя автора или описание функции;

в) вы хотите пояснить фрагменты кода или обосновать выбор решения — в таких случаях комментарии даже необходимы.

Комментарии бывают однострочными и многострочными. Рассмотрим пример:

// Я однострочный комментарий

// console.log("однострочный комментарий не логируется");

/* Я многострочный комментарий. Все, что находится между символами слеш-звездочка и звездочка-слеш, не будет выполнено.

console.log("Я не логируюсь, потому что я комментарий");

*/

В этом фрагменте кода представлены оба типа комментариев.

Первый — однострочный. Его можно использовать также в строке кода — и он будет действовать до конца строки. Все, что идет после //, будет проигнорировано.

Второй — многострочный. Он начинается с /*, а заканчивается так: */.

Практическое занятие 1.4

Добавление комментариев

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

   let a = 10;

2. В конце оператора добавьте комментарий о том, что 10 — это значение.
3. Выведите значение с помощью console.log(). Добавьте комментарий, поясняющий, что эта команда делает.
4. В конце кода JavaScript используйте многострочный комментарий. В реальном производственном сценарии вы можете использовать это пространство для краткого описания цели файла.

Функция prompt()

Рассмотрим еще одну полезную команду — функцию prompt(). По большей части она работает как команда alert, но имеет окно ввода информации для пользователя. Очень скоро мы узнаем, как хранить переменные, и, как только вы это изучите, вы сможете сохранить результат этой функции и что-то с ним сделать. А пока замените alert() на prompt() в файле Hi.html, например, так:

prompt("Hi! How are you?");

Далее обновите HTML-файл. Вы получите всплывающее окно с полем ввода, в котором сможете ввести текст, как показано на рис. 1.5.

Рис. 1.5. Страница с запросом на применение ввода

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

Случайные числа

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

Math.random();

Можно реализовать ее в консоли, логируя результат:

console.log(Math.random());

Результатом будет десятичная дробь в пределах от 0 до 1. Если вам нужно случайное число в пределах от 0 до 100, умножьте значение на 100 следующим образом:

console.log(Math.random() * 100);

Не переживайте, мы рассмотрим математические операторы в главе 2.

Десятичная дробь вам не подходит, можно использовать функцию Math.floor — она округлит результат до ближайшего целого числа.

console.log(Math.floor(Math.random() * 100));

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

Проект текущей главы

Создание HTML-файла
и привязка JavaScript-файла

Создайте HTML-файл и отдельный JavaScript-файл. Сделайте привязку JavaScript-файла к HTML-файлу.

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

Вопросы для самопроверки

1. Какой HTML-синтаксис присоединяет к веб-странице внешний файл Java­Script?
2. Можно ли запустить файл JavaScript с расширением JS в браузере?
3. Как написать многострочный комментарий в JavaScript?
4. Назовите лучший способ исключить код из процесса запуска, при том условии, что он может вам еще понадобиться после отладки.

Резюме

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

Добавление кода JavaScript на веб-страницу можно реализовать разными способами. Мы разобрались, как сделать его частью скрипта и как подключить внешний файл JavaScript к странице. Закончили главу сведениями о том, как создать правильную и разборчивую структуру кода, дополненную комментариями с необходимой информацией. Вы также увидели, как вывести данные на экран методом console.log() и с помощью prompt() запросить информацию от пользователя. И наконец, изучили возможность генерировать случайные числа благодаря функции Math.random().

Далее мы рассмотрим основные типы данных JavaScript, а также операторы для работы с ними.

Глава 2. Основы JavaScript

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

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

Мы рассмотрим следующие темы:

• переменные;
• примитивы;
• анализ и модификацию типов данных;
• операторы.

Решения упражнений и проектов, а также ответы на вопросы для самопроверки находятся в приложении.

Переменные

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

firstname = "Maaike";

x = 2;

Во время выполнения кода им может быть присвоено новое значение:

firstname = "Edward";

x = 7;

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

Объявление переменных

Когда вы создаете новую переменную, ее необходимо объявить. Для этого требуются специальные операторы: let, var и const. Вкратце рассмотрим их использование. Когда вы вызываете переменную во второй раз, чтобы присвоить ей новое значение, вам необходимо только ее имя:

let firstname = "Maria";

firstname = "Jacky";

В примерах нашим переменным в коде мы будем давать значения вручную. Это называется «хардкодинг» (жесткое программирование), поскольку значение переменной определяется в вашем скрипте, а не динамически поступает с какого-либо ввода. Это то, что редко применяется в реальном коде: чаще всего мы получаем значение из внешнего источника, такого как заполненное пользователем поле на веб-сайте, база данных или другой код, вызывающий ваш код. Использование переменных, поступающих из внешних источников, вместо жестко прописанных позволяет скриптам адаптироваться к новой информации без необходимости переписывать код.

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

let, var и const

Определение переменной состоит из трех частей: определяющего слова (let, var или const), названия и значения. Начнем с изучения разницы между let, var и const. Здесь представлены несколько примеров переменных, использующих различные ключевые слова:

let nr1 = 12;

var nr2 = 8;

const PI = 3.14159;

let и var используются для переменных, которым где-то в программе может быть присвоено новое значение. Различия между let и var не так просты. Они связаны с областью их применения.

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

Переменная var относится к глобальным переменным; let — локальная переменная. Глобальность var означает, что вы можете использовать переменную, ранее определенную как var, в любом месте кода. Область же действия let ограничивается только конкретным блоком кода: вы можете использовать переменные, определенные с помощью let, только там, где они и были определены. Помните, что блок кода всегда будет начинаться с { и заканчиваться } — именно так вы можете распознать его границы.

Оператор const используется для переменных, которым присваивается значение только один раз, например π, которое априори не меняется. Если вы попытаетесь переназначить переменную const, система выдаст сообщение об ошибке:

const someConstant = 3;

someConstant = 4;

В результате вы получите:

Uncaught TypeError: Assignment to constant variable.

Почти во всех примерах мы будем использовать let — просто поверьте, что на практике в большинстве случаев вы будете сталкиваться именно с ним.

Именование переменных

Мы добрались до присвоения имен переменным, и тут действуют свои правила.

• Переменные должны начинаться со строчной, а не с заглавной буквы и быть описательными. Если значение содержит данные о возрасте, не стоит присваивать переменной имя x, лучше использовать age. Так, когда вы позже прочтете свой скрипт, вы сможете легко понять, что вы реализовали.
• Имена переменных не могут содержать пробелы, только нижние подчеркивания. Если вы используете пробел, JavaScript не распознает написанное как одну переменную.

Мы будем использовать «горбатый регистр» — стиль, при котором для описания переменной можно взять несколько слов. Начнем со строчной буквы, а затем каждое новое слово будем писать с заглавной, например: ageOfBuyer.

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

Значение вашей переменной может быть любым. Давайте начнем с самой простой формы, которую могут принимать переменные, — примитива.

Примитивы

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

Существует различие между примитивными типами данных и другими, более сложными. В этом разделе мы рассмотрим примитив — относительно простую структуру данных. В JavaScript есть семь типов примитивов: String, Number, BigInt, Boolean, Symbol, undefined и null. Далее познакомимся с каждым из них более по­дробно.

Тип данных String

Строковый тип данных используется для передачи текстовых значений. Это последовательность символов. Есть несколько способов объявить переменную строкового типа:

• двойные кавычки;
• одинарные кавычки;
• обратные апострофы: специальные шаблонные строки, в которых вы можете напрямую использовать переменные.

Одинарные и двойные кавычки используются так:

let singleString = 'Hi there!';

let doubleString = "How are you?";

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

Основное различие между одинарными и двойными кавычками заключается в следующем. Вы можете использовать одинарную кавычку в качестве апострофа в строках, заключенных в двойные кавычки — и наоборот. Если вы, объявляя строчную переменную, начинаете писать код с одинарной кавычки, то конец строки определится вторым таким же знаком, даже если он будет в середине слова. Так, например, следующее написание приведет к ошибке, потому что строка будет заканчиваться апострофом внутри слова let's:

let funActivity = 'Let's learn JavaScript';

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

let funActivity = "Let's learn JavaScript";

Аналогичная история с двойными кавычками. Следующий код не будет работать:

let question = "Do you want to learn JavaScript? "Yes!"";

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

В строке, использующей обратные апострофы, вы можете ссылаться на переменные — значение переменной будет подставлено в строку. Как во фрагменте кода, представленном ниже:

let language = "JavaScript";

let message = `Let's learn ${language}`;

console.log(message);

Итак, переменные придется указывать с помощью довольно странного синтаксиса. Не пугайтесь! В этих строках они заключены между ${nameOfVariable}. Подобный сложный синтаксис используется для того, чтобы избежать громоздкости, которая бы появилась в коде, оформи мы его привычным образом. В нашем случае вывод на экран будет выглядеть так:

Let's learn JavaScript

Как видите, переменная language заменяется ее значением: JavaScript.

Escape-символы

Допустим, мы хотим использовать в нашей строке двойные кавычки, одинарные кавычки и обратные апострофы. С теми ингредиентами, которые у нас есть сейчас, сделать подобное невозможно. Но для этой проблемы есть элегантное решение — специальный символ, с помощью которого можно сказать JavaScript: «Не читай следующий символ как обычно». Речь об escape-символе, обратном слеше.

Обратный слеш может использоваться для того, чтобы интерпретатор не видел одинарные или двойные кавычки и не заканчивал строку слишком рано:

let str = "Hello, what's your name? Is it \"Mike\"?";

console.log(str);

let str2 = 'Hello, what\'s your name? Is it "Mike"?';

console.log(str2);

В консоли выводится:

Hello, what's your name? Is it "Mike"?

Hello, what's your name? Is it "Mike"?

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

У escape-символа есть много назначений. Вы можете использовать его для создания разрыва строки с помощью \n или для включения символа обратного слеша в текст с помощью \\:

let str3 = "New \nline.";

let str4 = "I'm containing a backslash: \\!";

console.log(str3);

console.log(str4);

Вывод будет таким:

New

line.

I'm containing a backslash: \!

Есть еще несколько вариантов использования escape-символов, но мы пока их оставим. Вернемся к примитивам в целом, обратив внимание на числовой тип данных.

Тип данных Number

Во многих языках существует очень четкая разница между различными типами чисел. Разработчики JavaScript решили использовать один тип данных для них всех: Number (если точнее, это 64-битное число с плавающей точкой). Этот тип может хранить довольно большие числа (как со знаком, так и без), десятичные дроби и многое другое.

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

let intNr = 1;

let decNr = 1.5;

let expNr = 1.4e15;

let octNr = 0o10; //в десятичной системе будет 8

let hexNr = 0x3E8; //в десятичной системе будет 1000

let binNr = 0b101; //в десятичной системе будет 5

Вам не стоит переживать насчет последних трех позиций, если вы с ними не знакомы, это просто разные способы представления чисел, с которыми вы можете столкнуться в более продвинутых задачах информационных технологий. Главное здесь то, что все вышеперечисленные числа относятся к типу данных Number. Итак, целые числа — это числа, подобные этим:

let intNr2 = 3434;

let intNr3 = -111;

Числа с плавающей точкой тоже относятся к типу Number:

let decNr2 = 45.78;

И двоичные числа:

let binNr2 = 0b100; // десятичная версия будет 4

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

Тип данных BigInt

Диапазон значений типа данных Number находится между 253–1 и –(253–1). BigInt вступает в дело, когда вам требуются числа больше (или меньше) этого интервала. Тип данных BigInt можно узнать по окончанию n:

let bigNr = 90071992547409920n;

Рассмотрим, что происходит, когда мы начинаем вычисления между ранее заданным целым числом типа Number, intNr, и значением типа BigInt, bigNr:

let result = bigNr + intNr;

Результат будет таким:

Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions

Ошибка типов данных — TypeError! Совершенно ясно: что-то пошло не так. Для выполнения операций нельзя смешивать тип данных BigInt с типом данных Number. Это то, что следует запомнить на будущее, когда вы будете работать с BigInt, — вы можете использовать BigInt только с другими BigInt.

Тип данных Boolean

Логический тип данных Boolean может принимать два значения: true (истина) и false (ложь). И ничего больше. Этот тип данных часто используется в коде, особенно в логических выражениях:

let bool1 = false;

let bool2 = true;

В этом примере представлены возможные параметры логического типа Boolean. Он используется в ситуациях, когда вы хотите определить значение true или false (которое может означать «вкл./выкл.» или «да/нет») для какой-то ситуации. Например, вы хотите обозначить, будет ли элемент удален:

let objectIsDeleted = false;

Или подсветка индикатора будет включена или выключена:

let lightIsOn = true;

Соответственно, в этих записях переменные указывают на то, что объект не удален и что горит соответствующий индикатор.

Тип данных Symbol

Символьный тип Symbol совершенно новый и представлен в ES6 (мы упоминали стандарт ECMAScript 6 в главе 1 «Начало работы с JavaScript»). Он может устанавливаться в случаях, когда важно подчеркнуть, что переменные не равны, даже если их значение и тип одинаковы (в этом случае они обе примут тип символа). Сравните следующие объявления строк с объявлениями символов (и те и другие имеют одинаковое значение):

let str1 = "JavaScript is fun!";

let str2 = "JavaScript is fun!";

console.log("These two strings are the same:", str1 === str2);

let sym1 = Symbol("JavaScript is fun!");

let sym2 = Symbol("JavaScript is fun!");

console.log("These two Symbols are the same:", sym1 === sym2);

Результат будет следующим:

These two strings are the same: true

These two Symbols are the same: false

В первой части кода JavaScript приходит к выводу, что строки одинаковые, у них один тип и значение. Однако во второй части кода каждый символ определяется как уникальный. Поэтому, хотя содержимое символов одинаковое, они не совпадают и при сравнении выводится значение false. Эти символьные типы данных могут быть очень удобны в качестве свойств объектов, которые мы рассмотрим в главе 3.

Значение undefined

JavaScript крайне специфичный язык. В нем есть специальный тип данных для переменной, которой не было присвоено значение. И он называется undefined:

let unassigned;

console.log(unassigned);

Результат будет таким:

Undefined

Мы также можем целенаправленно назначать undefined — важно знать, что такое возможно. Но еще важнее знать, что присвоение типа undefined вручную — плохая практика:

let terribleThingToDo = undefined;

Да, так можно, но лучше так не делайте. По целому ряду причин — например, в случаях, когда требуется проверить, совпадают ли две переменные. Если одна переменная не определена (undefined), а вашей собственной переменной вы вручную присвоили значение undefined, переменные будут считаться равными. Но вы же хотите знать, действительно ли значения равны, а не только то, что они не определены. Так, кличка чьего-то домашнего животного и фамилия хозяина могут считаться равными, тогда как на самом деле они являются просто пустыми значениями.

Значение null

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

let empty = null;

Чтобы решить проблему, с которой мы столкнулись при объявлении переменной как неопределенной, следует установить для нее значение null — и проблем не возникнет. Это одна из причин, по которой лучше присваивать переменной значение null, если вы хотите указать, что она изначально пуста и неизвестна:

let terribleThingToDo = undefined;

let lastName;

console.log("Same undefined:", lastName === terribleThingToDo);

let betterOption = null;

console.log("Same null:", lastName === betterOption);

Результат будет следующим:

Same undefined: true

Same null: false

Как видим, автоматически не определенная переменная, lastName, и намеренно не определенная переменная, terribleThingToDo, считаются равными — это проблематично. С другой стороны, lastName и betterOption, которой было присвоено значение null, не равны.

Анализ и модификация типов данных

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

Мы уже встречали один из встроенных методов: console.log().

Существует множество встроенных методов. В этой главе вы познакомитесь лишь с некоторыми из них — теми, с которыми вы в своей практике столкнетесь прежде всего.

Определение типа переменной

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

testVariable = 1;

variableTypeTest1 = typeof testVariable;

variableTypeTest2 = typeof(testVariable);

console.log(variableTypeTest1);

console.log(variableTypeTest2);

Как вы могли предположить, оба метода выведут number. Скобки не требуются, потому что технически typeof является оператором, а не методом, в отличие от console.log. Хотя на практике вы наверняка заметите, что использование скобок облегчает чтение вашего кода. Рассмотрим следующий пример:

let str = "Hello";

let nr = 7;

let bigNr = 12345678901234n;

let bool = true;

let sym = Symbol("unique");

let undef = undefined;

let unknown = null;

console.log("str", typeof str);

console.log("nr", typeof nr);

console.log("bigNr", typeof bigNr);

console.log("bool", typeof bool);

console.log("sym", typeof sym);

console.log("undef", typeof undef);

console.log("unknown", typeof unknown);

Здесь, в той же команде вывода console.log(), мы вводим имя каждой переменной (в виде строки, объявленной в двойных кавычках), затем ее тип (используя typeof). В результате получим:

str string

nr number

bigNr bigint

bool boolean

sym symbol

undef undefined

unknown object