Кирупа Чиннатхамби 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. В выходные он, скорее всего, либо дрыхнет, либо бегает вместе с Миной за их крохотной дочуркой Акирой, защищаясь от Пикселя (он же тираннозавр рекс в теле кошки), или пишет о себе от третьего лица.

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

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

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

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

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

Введение

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

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

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

Парле ву JavaScript?

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

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

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

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

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

Связь со мной

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

forum.kirupa.com.

По другим вопросам вы можете писать на электронную почту (kirupa@kirupa.com), в твиттер @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>

После добавления этого HTML сохраните документ для подтверждения изменений. Теперь можно посмотреть, как будет выглядеть ваша страница в браузере.

Проследуйте на рабочий стол в проводнике или поисковике и двойным щелчком откройте файл hello_world.htm. Вы увидите, как появится ваш браузер по умолчанию, который отобразит имя этого файла. На рис. 1.4 показано примерно то, что вы увидите у себя на экране.

Если все сработало, как надо, вы увидите пустую страницу, и это вполне нормально. Несмотря на то что страница имеет содержимое, на ней ничего не отображается. Скоро мы это исправим. Для этого потребуется вернуться в редактор и обратиться к тегу <script>, который находится в нижней части HTML:

<script>

</script>

Тег script выступает в роли контейнера, в который вы можете помещать любой JavaScript-код для запуска. Мы же хотим отобразить слова hello, world! в диалоговом окне, появляющемся при загрузке HTML-страницы. Для этого внутрь сегмента script добавим следующую строку:

<script>

alert("hello, world!");

</script>

Сохраните файл HTML и запустите его в браузере. Обратите внимание на то, что увидите после загрузки страницы. Должно появиться диалоговое окно (рис. 1.5).

Если это была ваша первая попытка написания кода на JavaScript, примите мои поздравления! Теперь давайте разберем, как именно все это у вас получилось.

Рис. 1.4. Проименованная вкладка в Visual Studio Code

Рис. 1.5. Так должно выглядеть диалоговое окно hello, world

Обзор кода: инструкции и функции

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

alert("hello, world!");

Понять, что перед вами инструкция, можно, обратив внимание на ее последний знак. Обычно это точка с запятой (;).

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

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

Вернемся к нашему примеру. Обратите внимание на то, как я определяю отображение текста hello, world!. Я заключаю эти слова в кавычки:

<script>

alert("hello, world!");

</script>

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

Сделаем еще шаг. Вместо hello, world! укажите свои имя и фамилию. Вот пример кода, в котором использовано мое имя:

<script>

alert("Kirupa Chinnathambi!");

</script>

Запустите приложение, и тогда вы увидите свое имя в диалоговом окне (рис. 1.6).

Рис. 1.6. Теперь в диалоговом окне отображается ваше имя

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

КОРОТКО О ГЛАВНОМ

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

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

Если у вас есть какие-либо вопросы относительно этой главы, оставляйте свои сообщения на форуме https://forum.kirupa.com, где вам оперативно ответит кто-то из крутых разработчиков или я.

ЧАСТЬ I. Элементарно, Ватсон

Глава 2. Значения и переменные

Принято считать, что каждый фрагмент данных на JavaScript, предоставляемый или используемый нами, содержит значение. Из уже рассмотренного примера мы узнали, что вместо слов hello, world! могут быть любые слова, с помощью которых мы задаем функцию alert:

alert("hello, world!");

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

Итак, почему это так важно понимать? А все потому, что нам предстоит много работать со значениями. И важно, чтобы эта работа не свела вас с ума. Чтобы облегчить себе жизнь, вам пригодятся умения:

• легко идентифицировать эти значения;

• повторно их использовать в ходе разработки приложения, не прибегая к лишнему дублированию самого значения.

Две вещи, на которые предстоит потратить все наше оставшееся время, — это переменные. Давайте рассмотрим их поподробнее.

Использование переменных

Переменная — это идентификатор значения. Чтобы не набирать hello, world! каждый раз, когда вы хотите использовать этот фрагмент для написания кода приложения, можно присвоить эту фразу переменной и использовать ее тогда, когда нужно. Еще чуть-чуть, и вам станет гораздо понятнее — я обещаю!

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

let myText

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

Давайте исправим это через инициализацию переменной значением. К примеру, hello, world!.

let myText = "hello, world!";

С этого момента при выполнении кода значение hello, world! будет ассоциироваться с нашей переменной myText. Теперь соберем все части в единое выражение. Если у вас все еще открыт файл hello_world.htm, замените содержимое тега script следующим (или создайте новый файл, добавив в него следующий код):

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

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

<style>

</style>

</head>

<body>

<script>

let myText = "hello, world!";

alert(myText);

</script>

</body>

</html>

Обратите внимание, что мы больше не передаем текст hello, world! в функцию alert напрямую. Вместо этого мы передаем в нее имя переменной myText. Конечный результат такой же, то есть при выполнении этой строчки отобразится функция alert с надписью hello, world!. Благодаря этому изменению нам достаточно определить hello, world! в одном месте кода. И если мы в дальнейшем захотим изменить hello, world! к примеру, на The dog ate my homework! (Собака съела мою домашку!), то все, что нам понадобится, — это просто изменить фразу, определенную в переменной myText:

let myText = "The dog ate my homework!";

alert(myText);

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

Еще кое-что о переменных

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

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

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

Однако эта гибкость не безгранична, поэтому при именовании следует помнить о следующем:

• Имя переменной может содержать один символ или столько, сколько вы хотите, — только представьте, тысячи тысяч символов!

• Переменные могут начинаться с буквы, нижнего подчеркивания или символа $, но не могут начинаться с числа.

• Следом за первым символом переменные могут состоять из любого сочетания букв, подчеркиваний, чисел и $. Мы также можем смешивать и комбинировать нижний и верхний регистры, пока не надоест.

• Пробелы не допускаются.

Ниже приведены некоторые примеры имен переменных:

let myText;

let $;

let r8;

let _counter;

let $field;

let thisIsALongVariableName_butItCouldBeLonger;

let $abc;

let OldSchoolNamingScheme;

Чтобы определить, является ли имя переменной допустимым, воспользуйтесь прекрасным сервисом по проверке имен переменных JavaScript https://mothereff.in/js-variables.

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

Что еще нужно знать об объявлении и инициализации переменных

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

Объявление переменной не обязательно

Например, нам не обязательно использовать ключевое слово let, чтобы объявить переменную. Можно просто написать так:

myText = "hello, world!";

alert(myText);

Обратите внимание, что переменная myText использована, не будучи формально объявленной с помощью ключевого слова let. И хотя так делать и не рекомендуется, это считается вполне допустимым. В конечном счете мы получаем переменную с именем myText. Единственный нюанс состоит в том, что при объявлении переменной подобным образом мы делаем это глобально. Не беспокойтесь, если последнее предложение вам не понятно. Мы поговорим о значении слова «глобально» позже, когда рассмотрим область видимость переменных.

Объявлять и инициализировать переменные в отдельных строках — это круто!

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

let myText;

myText = "hello, world!";

alert(myText);

На практике мы будем разделять их постоянно.

Изменение значений переменных и ключевое слово const

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

let myText;

myText = "hello, world!";

myText = 99;

myText = 4 * 10;

myText = true;

myText = undefined;

alert(myText);

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

const siteURL = "https://www.google.com";

alert(siteURL);

Используя const, мы не можем изменить значение siteURL на что-то иное, чем https://www.google.com. При такой попытке JavaScript начнет ругаться. Несмотря на то что в использовании этого ключевого слова есть свои подводные камни, в целом оно может оказаться очень полезным для предотвращения случайного изменения переменной. Когда придет время, мы рассмотрим подобные подводные камни более подробно.

Почитайте «Область видимости переменных»

Теперь, когда вы знаете, как объявлять и инициализировать переменные, очень важно разобраться с их видимостью. Нужно понимать, при каких условиях можно использовать объявленную переменную. Иначе это зовется областью видимости переменной. Интересно? Тогда прочитайте главу 8 «Область видимости переменных».

КОРОТКО О ГЛАВНОМ

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

Вы объявляете переменные, чтобы значения стали более запоминающимися и годными для многократного использования. Это делается с помощью ключевого слова let и имени переменной. Если вы хотите инициализировать переменную со значением по умолчанию, поставьте после имени переменной знак равенства (=) и укажите значение, с которым хотите инициализировать эту переменную.

Глава 3. Функции

До сих пор весь написанный нами код не имел никакой структуры и был простым до безобразия:

alert("hello, world!");

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

Предположим, что нужно отобразить расстояние, пройденное объектом (рис. 3.1).

Рис. 3.1. Пройденное расстояние

Как вы помните еще со школы, чтобы вычислить расстояние, нужно скорость объекта умножить на время его движения (рис. 3.2).

расстояние = скорость × время

Рис. 3.2. Вычисление расстояния

Версия этого выражения на JavaScript будет выглядеть примерно так:

let speed = 10;

let time = 5;

alert(speed * time);

У нас есть две переменные, обозначенные как скорость (speed) и время (time), каждая из которых содержит число. Функция alert отображает результат умножения значений, содержащихся в переменных speed и time. Это весьма буквальная интерпретация уравнения для вычисления расстояния, которое мы только что рассмотрели.

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

let speed = 10;

let time = 5;

alert(speed * time);

let speed1 = 85;

let time1 = 1.5;

alert(speed1 * time1);

let speed2 = 12;

let time2 = 9;

alert(speed2 * time2);

let speed3 = 42;

let time3 = 21;

alert(speed3 * time3);

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

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

function showDistance(speed, time) {

alert(speed * time);

}

showDistance(10, 5);

showDistance(85, 1.5);

showDistance(12, 9);

showDistance(42, 21);

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

Поехали!

Что такое функция?

На самом базовом уровне функция — не более чем оболочка для некоего кода.

По сути функция:

• группирует инструкции;

• позволяет использовать код многократно.

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

Простая функция

Лучший способ понять функции — это погрузиться в них и начать использовать. Поэтому создадим для начала самую простую функцию. Это не особо увлекательный процесс. Требуется лишь понимание некоторых особенностей синтаксиса вроде использования причудливых фигурных скобок и их собратьев.

Ниже приведен пример того, как выглядит простая функция:

function sayHello() {

alert("hello!");

}

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

function sayHello() {

alert("hello!");

}

sayHello();

Чтобы попрактиковаться, создайте новый HTML-документ (назовите его functions_sayhello.htm):

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Say Hello!</title>

<style>

</style>

</head>

<body>

<script>

function sayHello() {

alert("hello!");

}

sayHello();

</script>

</body>

</html>

Если вы наберете этот текст полностью и просмотрите страницу в браузере, то увидите, как отобразится hello!. Это нужно сделать, чтобы убедиться, что наш код работает. Далее разберем, почему этот код сработал, а для этого разобьем функцию sayHello на несколько самостоятельных фрагментов и рассмотрим каждый из них подробнее.

Во-первых, мы видим ключевое слово function (рис. 3.3).

function sayHello() {

alert("hello!");

}

Рис. 3.3. Ключевое слово function

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

После ключевого слова function мы указываем актуальное имя функции и ставим после него открывающую и закрывающую скобки (), как показано на рис. 3.4.

function sayHello() {

alert("hello!");

}

Рис. 3.4. Имя функции и скобки

Завершая процесс объявления функции, нужно поставить открывающую и закрывающую фигурные скобки, внутри которых указываются нужные инструкции (рис. 3.5).

function sayHello() {

alert("hello!");

}

Рис. 3.5. Открывающая и закрывающая фигурные скобки

В заключение рассмотрим содержимое функции, а именно те инструкции, которые задают функциональность (рис. 3.6).

function sayHello() {

alert("hello!");

}

Рис. 3.6. Содержимое функции

В нашем примере содержимым является функция alert, отображающая диалоговое окно со словом hello!.

Последнее, что осталось рассмотреть, — это вызов функции (рис. 3.7).

function sayHello() {

alert("hello!");

}

sayHello();

Рис. 3.7. Вызов функции

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

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

Создание функции, принимающей аргументы

Предыдущий пример с sayHello слишком прост:

function sayHello() {

alert("hello!");

}

sayHello();

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

Начнем с простого и знакомого примера:

alert("my argument");

Перед нами функция alert. Вероятно, мы уже видели ее пару-тройку (или несколько десятков) раз. Суть в том, что в эту функцию передается так называемый аргумент, который описывает то, что требуется отобразить при вызове. На рис. 3.8 показано, что отобразится на экране, если вызвать функцию alert с аргументом myargument.

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

В этой главе мы рассматривали еще одну функцию, принимающую аргументы, а именно showDistance:

function showDistance(speed, time) {

alert(speed * time);

}

Рис. 3.8. Отображение аргумента

Понять, что функция принимает аргументы, можно, просто взглянув на ее описание (объявление):

function showDistance(speed, time) {

alert(speed * time);

}

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

В случае с showDistance можно сделать вывод о том, что эта функция принимает два аргумента. Первый из них соответствует speed (скорости), а второй — time (времени).

Мы задаем значения аргументов в рамках вызова функции:

function showDistance (speed, time) {

alert(speed * time);

}

showDistance(10, 5);

В нашем случае мы вызываем функцию showDistance и задаем значения, которые хотим в нее передать, внутри скобок (рис. 3.9).

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

showDistance(10, 5);

Рис. 3.9. Значения, которые мы хотим передать в функцию

Давайте рассмотрим этот процесс подробнее и начнем с диаграммы на рис. 3.10.

Рис. 3.10. Диаграмма вызова функции

Для вызова в функцию showDistance передается 10 как аргумент для speed и 5 — для time. Изображенный на диаграмме перенос полностью основан на последовательности.

Как только передаваемые значения достигают функции, определенные для аргументов имена начинают обрабатываться как имена переменных (рис. 3.11).

Рис. 3.11. Имена аргументов работают как переменные

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

Несоответствие числа аргументов

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

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

Создание функции, возвращающей результат

Последний вид функции, который мы рассмотрим, — это та функция, которая возвращает результат в ответ на вызов. Вот, что нам нужно сделать. У нас есть функция showDistance, которая, как нам прекрасно известно, выглядит так:

function showDistance(speed, time) {

alert(speed * time);

}

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

let myDistance = showDistance(10, 5);

Переменная myDistance будет содержать результат вычисления, которое выполнит функция showDistance.

Ключевое слово return

Возврат данных из функции производится посредством ключевого слова return. Давайте создадим новую функцию с именем getDistance, которая будет выглядеть как showDistance, но отличаться в том, что происходит при выполнении функции до завершения:

function getDistance(speed, time) {

let distance = speed * time;

return distance;

}

Обратите внимание, что мы вычисляем расстояние, умножая speed на time. Вместо отображения уведомления (alert) мы возвращаем значение расстояния (которое содержится в переменной distance).

Мы можем выполнить вызов функции getDistance в рамках инициализации переменной:

let myDistance = getDistance(10, 5);

Когда функция getDistance будет вызвана, она выполнит вычисление и вернет численное значение, которое затем будет присвоено переменной myDistance. И всего делов-то!

Ранний выход из функции

Как только функция доходит до ключевого слова return, она прекращает выполнять обработку, которую делала до этого момента, возвращает значение, заданное в вызывающей функции (caller), и производит выход:

function getDistance(speed, time) {

let distance = speed * time;

return distance;

if (speed < 0) {

distance *= -1;

}

}

Любой код, прописанный после инструкции return, не будет обработан. Эта часть будет проигнорирована, как если бы ее и не было вовсе.

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

function doSomething() {

let foo = "Nothing interesting";

return;

}

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

КОРОТКО О ГЛАВНОМ

Функции относятся к тому небольшому числу компонентов, которые вы будете использовать практически в каждом приложении JavaScript. Они предоставляют востребованную возможность — создавать переиспользуемый код. Не важно, используете ли вы собственные функции или те, что встроены в JavaScript, — вы просто не сможете обойтись без них.

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

Если у вас есть вопросы по пройденной теме — добро пожаловать на форум https://forum.kirupa.com, где я или другие смышленые веб-разработчики поможем вам.

Глава 4. Условные обозначения: if…else и switch

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

Например, если бы на улице было холодно, вам пришлось бы решать, что надеть: худи или куртку. На рис. 4.1 показано, как формируется это решение.

Рис. 4.1. Моделирование решений

На каждой стадии принятия решения вы задаете себе вопрос, на который можно дать ответ true (верно) или false (неверно). Ответ на этот вопрос определяет ваш следующий шаг и то, что в итоге вы наденете: футболку, худи или куртку. В более широком смысле любое наше решение можно смоделировать в виде череды инструкций true и false. От этого может стать слегка не по себе (еще бы!), но в общем и целом именно так мы, наше окружение и большинство живых существ совершаем свой выбор.

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

Поехали!

Инструкция if…else

Самая распространенная условная инструкция, используемая в коде, — это инструкция if…else, или просто инструкция if. Принцип ее работы показан на рис. 4.2.

Рис. 4.2. Как работает инструкция if

Чтобы в этом разобраться, рассмотрим инструкцию if…else в действии. Создайте новый HTML-документ и добавьте в него следующие разметку и код:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>If / Else Statements</title>

</head>

<body>

<script>

let safeToProceed = true;

if (safeToProceed) {

alert("You shall pass!");

} else {

alert("You shall not pass!");

}

</script>

</body>

</html>

Сохраните этот документ под именем if_else.htm и выполните его предпросмотр в браузере. Если все сработает как надо, вы увидите уведомление с текстом You shall pass! (рис. 4.3).

Рис. 4.3. Вы увидите это уведомление

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

let safeToProceed = true;

if (safeToProceed) {

alert("You shall pass!");

} else {

alert("You shall not pass!");

}

Наше выражение (то, что следует за ключевым словом if и в итоге оценивается как true или false) — это переменная safeToProceed. Эта переменная инициализирована как true, следовательно, был задействован вариант true инструкции if.

Теперь замените значение переменной safeToProceed с true на false:

let safeToProceed = true;

if (safeToProceed) {

alert("You shall pass!");

} else {

alert("You shall not pass!");

}

На этот раз при запуске кода вы увидите уведомление с текстом You shall not pass! так как теперь выражение вычисляется как false (рис. 4.4).

Рис. 4.4. Уведомление, получаемое, когда выражение вычисляется как false

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

Встречайте: условные операторы!

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

В общих чертах подобные выражения показаны на рис. 4.5.

if (expression operator expression) {

do_something;

} else {

do_something_different;

}

Рис. 4.5. Общий формат выражений с условными операторами

Оператор (то есть условный оператор) определяет связь между выражениями. Конечная цель — вернуть результат true или false, чтобы наша инструкция if понимала, какой блок кода выполнять. Ключом к выполнению всех этих действий являются сами условные операторы, которые приведены в табл. 4.1.

Табл. 4.1. Операторы

Оператор

Если true

= =

Если первое выражение дает результат, равный второму выражению

>=

Если первое выражение дает результат, который больше или равен второму выражению

>

Если первое выражение дает результат больше, чем второе выражение

<=

Если первое выражение дает результат, меньший или равный второму выражению

<

Если первое выражение дает результат меньше, чем второе выражение

!=

Если первое выражение дает результат, не равный второму выражению

&&

Если и первое, и второе выражения дают результат true

| |

Если либо первое, либо второе выражение дает результат true

Теперь перейдем от обобщенного понимания условных операторов к более конкретному, рассмотрев еще один пример, в котором подсвечен интересующий нас if-сегмент кода:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Are you speeding?</title>

</head>

<body>

<script>

let speedLimit = 55;

function amISpeeding(speed) {

if (speed >= speedLimit) {

alert("Yes. You are speeding.");

} else {

alert("No. You are not speeding. What's wrong with you?");

}

}

amISpeeding(53);

amISpeeding(72);

</script>

</body>

</html>

Разберемся, что же именно здесь происходит. У нас есть переменная speedLimit, инициализированная как 55. Затем есть функция amISpeeding, получающая аргумент speed. Внутри нее инструкция if, чье выражение проверяет, является ли полученное значение speed большим или равным (привет, условный оператор >=) значению, содержащемуся в переменной speedLimit:

function amISpeeding(speed) {

if (speed >= speedLimit) {

alert("Yes. You are speeding.");

} else {

alert("No. You are not speeding. What's wrong with you?");

}

}

Последнее, что делает код, — это вызывает функцию amISpeeding, передавая ей два значения speed:

amISpeeding(53);

amISpeeding(72);

Когда мы называем эту функцию со скоростью 53, выражение speed >= speedLimit вычисляется как false. Так происходит, потому что 53 не больше и не равно значению, сохраненному в speedLimit, а именно 55. В итоге будет выводиться уведомление о том, что вы не превышаете скорость (No. You are not speeding…).

Противоположное происходит, когда мы вызываем amISpeeding со скоростью 72. В этом случае мы превышаем скорость и выражение вычисляется как true с последующим появлением соответствующего уведомления.

Создание более сложных выражений

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

Привожу чуть более сложный пример:

let xPos = 300;

let yPos = 150;

function sendWarning(x, y) {

if ((x < xPos) && (y < yPos)) {

alert("Adjust the position");

} else {

alert("Things are fine!");

}

}

sendWarning(500, 160);

sendWarning(100, 100);

sendWarning(201, 149);

Обратите внимание на то, как выглядит условие внутри инструкции if, принадлежащей функции sendWarning:

function sendWarning(x, y) {

if ((x < xPos) && (y < yPos)) {

alert("Adjust the position");

} else {

alert("Things are fine!");

}

}

В данном случае было выполнено три сравнения. Во-первых, меньше ли x, чем xPos. Во-вторых, меньше ли y, чем yPos. И в-третьих — проверка, не расценивается ли первая и вторая инструкции как true, чтобы оператор && мог также вернуть это значение. Можно соединять в цепочки множество условных инструкций в зависимости от того, что мы делаем. Помимо запоминания действий самих операторов может быть непросто проследить, чтобы все условия и подусловия были правильно изолированы скобками.

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

Варианты инструкций if…else

Мы почти закончили с инструкцией if. Осталось лишь разобраться с ее «родственниками».

Одиночная инструкция if

Первый вариант — это одиночная инструкция if без родственника else:

if (weight > 5000) {

alert("No free shipping for you!");

}

В этом случае если выражение вычисляется как true, то все отлично. Если как false, тогда код просто пропускает уведомление и переходит к выполнению следующих действий. При работе с инструкциями if блок else является опциональным. Чтобы составить контраст одиночной инструкции if, на помощь спешит ее родня. ...