Разработка клиентских сценариев

с использованием JavaScript
и библиотеки jQuery
 Unit 1
Введение
в JavaScript

Contents
Сценарии, выполняемые на стороне клиента...................... 4
Что такое JavaScript?................................................................ 10
История создания JavaScript.................................................. 12
Различия между JavaScript и Java, JScript, ECMAScript..... 15
Версии JavaScript...................................................................... 17
Понятие Document Object Model.......................................... 20
Понятие Browser Object Model.............................................. 24
Внедрение в HTML документы.
Редакторы кода JavaScript.................................................. 28
Тег <noscript>............................................................................ 32
Основы синтаксиса................................................................. 38
Регистрозависимость...............................................................39
Комментарии..............................................................................41
Ключевые и зарезервированные слова................................42
Переменные. Правила именования переменных............... 45

2
 Contents

Типы данных............................................................................ 52
Операторы................................................................................ 57
Арифметические операторы...................................................59
Операторы отношений............................................................62
Логические операторы.............................................................69
Оператор присваивания..........................................................74
Битовые операторы...................................................................80
Приоритет операторов.............................................................85
Оператор typeof.........................................................................88
Задание для самостоятельной работы.................................90

Материалы урока прикреплены к данному PDF-файлу. Для досту-

па к материалам, урок необходимо открыть в программе Adobe
Acrobat Reader.

3
 Unit 1. Введение в JavaScript

Сценарии, выполняемые
на стороне клиента
Развитие языка разметки гипертекста HTML при-
вело к совсем иному взгляду на понятие «текст» и его
эволюцию — «гипертекст». Первоначально в структуру
теста были введены дополнительные сущности (entities),
отделяемые от основного текста так называемыми тега-
ми. Текст начал разделяться на, собственно, сам текст
(пассивный текст) и гипертекст — текстовые элементы,
которые несут в себе некие управляющие инструкции.
Для выполнения этих инструкций пришлось моди-
фицировать средства просмотра документов, точнее, уже
гипер-документов. Выражаясь современным языком, по-
явились браузеры — программы, способные отделить
обычный текст от гипертекста и обеспечить функцио-
нальность последнего.
Задачами первых тегов служили простейшее оформ-
ление текста (<b>, <i> и т.п.), а также обеспечение ссылок
на различные части документа или на другие документы
(<a>). Закон возрастающих потребностей никто не отме-
нял и от гипер-составляющей стали хотеть все большего
и большего.
На сегодня мы имеем сложнейшую структуру HTML
документов, позволяющих бесконечное вложения объек-
тов в другие объекты, каскадное применение (и отмена)
стилей отображения с собственным языком CSS, под-
держку событий наведения мыши (::hover) и пользова-
тельской активности (::visited).

4
 Сценарии, выполняемые на стороне клиента

Однако большего хочется всегда. Пришло время вспом-

нить, что компьютерные программы — это тоже тексты.
И задать вопрос: можно ли еще масштабнее расширить
понятие гипертекста, введя в него элементы программи-
рования — средств практически неограниченного влия-
ния на отображение страницы, ее поведение и реакцию
на различные условия? Очевидно, что реализация такой
возможности не могла быть обойдена стороной, и разра-
ботчики вполне серьезно задались этой перспективой.
Если в гипертекст будет включен код программы, то
кто-то должен эту программу выполнять. Поскольку об-
работкой гипертекста и отображением страницы зани-
мается браузер, логично, что и выполнять программы
придется именно ему. Для того чтобы понять появление
«сценариев» давайте рассмотрим особенности, которые
связаны с самим процессом выполнением программ.
Исторически сложилось так, что процесс создания
и исполнения программ осуществлялся двумя принци-
пиально разными путями. Первый путь предусматривал
преобразование исходного кода (текста программы) в ис-
полняемый код, понятный операционной системе или
даже сразу процессору вычислительной машины. Испол-
няемый код также называют нативным (от англ. native —
родной). Этот код получается в результате процесса ком-
пиляции программы и представляет собой исполняемый
(запускаемый) файл, чаще всего с расширением EXE (от
англ. executable — исполняемый).
Нативный код сильно зависит от технического соста-
ва вычислительной машины, операционной системы, ее
версии и т.п. Вспомните, как старые программы прихо-

5
 Unit 1. Введение в JavaScript

дится запускать «в режиме совместимости» с устаревши-

ми системами. Для того чтобы использовать программу
на разных устройствах ее перекомпилируют из исходного
кода для каждого конкретного случая (рис. 1). Типичны-
ми представителями компилирующих технологий явля-
ются языки C/C++, Delphi, Assembler, Fortran и др.

Рисунок 1

Рисунок 2
Для лучшей совместимости программ с различными
устройствами параллельно развивалась технология, ус-
ловно называемая транслирующей. Исходный код при

6
 Сценарии, выполняемые на стороне клиента

помощи транслятора преобразовывался в промежуточ-

ный байт-код. Этот байт-код исполнялся специальным
согласующим звеном с операционной системой — вир-
туальной машиной или платформой (рис. 2).
Задача обеспечения совместимости перекладывает-
ся на плечи разработчиков платформы. После того, как
платформа будет создана для данного устройства, на нем
будет возможен запуск программы без повторного ее пе-
рекомпилирования (транслирования). Это же является
и недостатком данной технологии — для запуска байт-ко-
да необходимо предварительно установить или запустить
эту самую платформу. Среди транслирующих технологий
можно назвать Java, C#, Python, Visual Basic и др.
Возвращаясь к вопросу внедрения программного
кода в структуру HTML документов отметим, что исполь-
зовать компиляцию с созданием для HTML исполнимого
кода в случае Интернета является плохой идеей. Разные
посетители страницы используют различные операци-
онные системы, их компьютеры (планшеты, смартфоны)
оснащены разными процессорами и т.п. Для каждой но-
вой ситуации пришлось бы создавать различный испол-
нимый код из одной и той же исходной программы.
Идея трансляции в данном случае выглядит гораздо
более перспективной, т.к. браузер, по сути, является про-
межуточной платформой и исполнителем программы.
Однако программа в HTML документе предназначена
не для операционной системы, а для самого же браузера.
Точнее, для окна (или вкладки) в котором открыт данный
HTML документ. То есть браузер, конечно, должен «об-
щаться» с операционной системой для отработки команд,

7
 Unit 1. Введение в JavaScript

но он не должен передавать ей управление, направляя

результаты обработки команд обратно себе на активное
окно или вкладку.
Такая схема выполнения программ получила назва-
ние интерпретатора (см. рис. 3). Подобным образом рабо-
тают и другие «диалоговые» средства, например, команд-
ная строка Windows (или DOS) — пользователь вводит
команду, она выполняется при помощи операционной
системы и результат ее выполнение возвращается в ди-
алоговое окно командной строки.

Рисунок 3
В результате, наиболее логичным решением стало
оставить внедряемую в HTML документ программу
в виде ее исходного кода (изначального текста), а в брау-
зер добавить специальное средство (интерпретатор), вы-
полняющее программу для данного конкретного устрой-
ства, на котором браузер установлен.
В отличие от программ, которые компилируются (в ис-
полняемый код) или транслируются (в байт-код) и гото-
вы к исполнению, программа в виде исходного кода (тек-

8
 Сценарии, выполняемые на стороне клиента

ста) для интерпретирующих систем получила название

«скрипт» (от англ. script — запись, надпись). В одном из
вариантов перевода используется термин «сценарий» (не
путайте с литературно-драматическим произведением).
В терминологии Веб-разработки скриптами (или сценари-
ями) называют специальные текстовые вставки в HTML
документе, обрабатываемые браузером как программы.
Благодаря распространению и популяризации про-
граммирования с применением интерпретирующих си-
стем слово «сценарий» прочно вошло в терминологию
программистов и веб-разработчиков. Сами же интер-
претаторы получили альтернативное название — языки
сценариев или сценарные языки (иногда — скриптовые
языки от англ. scripting language).
Следует отметить, что идея интерпретирующих языков
далеко не новая. Первый язык-интерпретатор был разрабо-
тан еще в 1960 году и назывался BASIC (Beginner’s All-purpose
Symbolic Instruction Code — многоцелевой символьный код для
начинающих). Этот язык какое-то время изучался в рамках
школьной и даже университетской информатики в разных
странах. Однако термины «скрипт» и «сценарий» попали
в обиход гораздо позже, с развитием Веб-технологий.
Подводя итоги, дадим определение: сценарии, вы-
полняемые на стороне клиента, или скрипты — это ком-
пьютерные программы, представленные в виде исходного
текста и включенные в состав HTML документа (в т.ч. по
ссылке на другой документ или файл). Эти программы
выполняются браузером по мере загрузки страницы либо
в моменты обращения к этим сценариям (вызова сценари-
ев) в ответ на действия пользователя, отсчет времени и т.п.

9
 Unit 1. Введение в JavaScript

Что такое JavaScript?

Разобравшись с тем, что в состав HTML документа
можно включать программы, которые будут выполне-
ны браузером в момент необходимости, логично задать
следующий вопрос: «А на каком языке пишут эти про-
граммы?». Для этих целей было разработано и стандар-
тизировано специальное средство, известное сегодня
как JavaScript.
Прежде всего, JavaScript — это язык программирова-
ния. Следует отметить, что его современное использова-
ние вышло за рамки скриптового языка браузеров, но об
этом позже. Пока что будем считать, что JavaScript — это
тот самый язык, на котором пишут клиентские сценарии.
Язык JavaScript непосредственно поддерживается все-
ми современными браузерами и не требует никаких допол-
нительных подключенных библиотек или установленных
расширений. Достаточно указать теги <script> </script>,
между которыми можно писать команды сценария.
Как язык программирования, JavaScript имеет почти
неограниченные возможности по обработке данных:
поддерживает арифметические, логические, символь-
ные операции; может управлять содержимым веб-стра-
ницы — расположением, размером, цветом, свойствами
элементов, в т.ч. делать это динамически, чем обеспе-
чивая их создание, удаление или анимацию. С его по-
мощью можно связываться с сервером, отправлять или
получать произвольные данные. Он способен реагиро-
вать на различные события, в частности на действия

10
 Что такое JavaScript?

пользователя, создавая эффект «общения» с посетите-

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

11
 Unit 1. Введение в JavaScript

История создания
JavaScript
Популярность и распространенность JavaScript со-
провождается широким и детальным описанием его
истории и эволюции. Вы можете с легкостью прочитать
в Интернете очерки об авторах этого языка, а также за-
метки самих авторов о процессе его создания, о прежних
названиях языка и о причинах их смены. В рамках наше-
го урока выделим лишь некоторые основные моменты,
связанные с появлением и развитием JavaScript.
В первой половине 90-х годов ХХ века вычислитель-
ная техника и сетевое обеспечение достигли такого уров-
ня, что связь удаленных компьютеров стала доступна
массовому потребителю. Из секретных военных техноло-
гий сети перешли к мирному использованию. Оцененное
пользователями удобство общения по электронной по-
чте и мессенджерам перевело линию развития общества
в информационно-коммуникационную стезю, а перед
разработчиками поставило новые задачи по созданию
средств разработки сетевых ресурсов.
Дело в том, что существовавшие на то время средства
программирования были не очень удобными для разра-
ботки сетевых приложений. Хотя сделать сайт можно
практически на любом языке, но лучше, когда это дела-
ется при помощи специальных средств.
В середине 90-х годов появились несколько таких
средств: РНР, Java, Ruby, ASP (использованы современ-
ные названия), а также были созданы расширения для

12
 История создания JavaScript

существующих языков, упрощающих веб-разработку.

Однако все они были нацелены на работу с серверной
частью сайта, анализирующей запросы, связывающейся
с базами данных и обрабатывающей выборки из них —
на задачи, не возникающие на стороне клиента. Возникла
задача разработать специальный язык для клиентских
сценариев, возможно, адаптировав для этого один из пе-
речисленных выше.
Клиентская часть сайта (то, что мы видим на вкладке
браузера) обычно разрабатывалась дизайнерами, понима-
ющими язык разметки HTML, но не имеющими большого
опыта программирования на других языках. Среди тре-
бований к новому языку сценариев добавилась просто-
та — возможность быстрого освоения веб-дизайнерами.
Один из вариантов простого решения предложила
компания Microsoft в виде языка VBScript (Visual Basic
Scripting Edition). Дело в том, что язык бейсик (Basic) был
ранее очень популярен, входил в состав пакетов операци-
онных систем от Microsoft (MS-DOS) и, как уже отмеча-
лось ранее, изучался многими школьниками и студента-
ми. Программировать на бейсике умели практически все.
Использовать привычный и знакомый язык для новых
задач, действительно, выглядело как хорошая перспекти-
ва. Однако, плохая поддержка языка другими браузерами
(кроме Microsoft Internet Explorer) привела к его слабому
и медленному развитию и, в итоге, проигрышу альтерна-
тивному решению — JavaScript.
Недостатки VBScript дополнительно показали, что
языки, разработанные для других задач, довольно сложно
переделываются под новые задачи Веб-разработки. Ло-

13
 Unit 1. Введение в JavaScript

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

«с нуля». Так и появился язык, известный сегодня как
JavaScript, — относительно простое средство с конкрет-
ным назначением (без претензий на всеобщую универ-
сальность) и рядом ограничений, отмеченных в преды-
дущем разделе.
Детальнее про историю создания и эволюции Java­
Script можно прочитать, например, на сайте.

14
 Различия между JavaScript и Java, JScript, ECMAScript

Различия между JavaScript

и Java, JScript, ECMAScript
Современное название языка JavaScript было выбра-
но в свое время исходя из маркетинговых соображений,
чтобы заимствовать высокую (на то время) популярность
языка программирования Java. Ради справедливости, сле-
дует отметить, что кроме созвучного названия, других
связей между этими языками нет. Java — это язык разра-
ботки приложений, выполняемых специальной платфор-
мой (виртуальной машиной), имеет сильную типизацию
и использует объектно-ориентированную парадигму.
Тогда как JavaScript — язык сценариев, выполняемых
браузером, имеет слабую типизацию и использует про-
тотипное программирование. То есть языки отличаются
целью, структурой и исполнителем — по сути всем, кроме
некоторых синтаксических конструкций, применяющих-
ся также и в других языках.
Стандартизация развивающихся веб-технологий
(HTTP, HTML, CSS и т.п.) потребовала и стандарти-
зации используемого в них языка клиентских сцена-
риев. И тут снова свою роль сыграли маркетинговые
особенности. Оказалось, что, хотя формально языком
JavaScript не владеет какая-либо компания или органи-
зация, но название «JavaScript» является зарегистриро-
ванным товарным знаком компании Oracle Corporation
и не может использоваться другими авторами. Поэ-
тому в стандарте ECMA-262 Европейской ассоциа-
ции производителей компьютеров (European Computer

15
 Unit 1. Введение в JavaScript

Manufacturers Association — Ecma International) язык был

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

16
 Версии JavaScript

Версии JavaScript
Для указания версий языка JavaScript применяется не-
сколько различных обозначений. Одним из них является
внутренняя система нумерации версий. Согласно с этой
системой, для самой первой, оригинальной сборки языка
в далеком 1996 году была введена версия «1.0». Последней из
принятый на данный момент версий является «1.8», а точ-
нее — «1.8.5». Работы над версией «2.0» ведутся, но окон-
чательно версия не утверждена. Версии сменялись в связи
с появлением новых типов браузеров и зачастую кроме
цифры версии указывают название браузера, из-за кото-
рого версия была обновлена. Детально про историю версий
можно почитать, например, на Википедии по ссылке.
Параллельно с внутренними версиями JavaScript раз-
виваются стандарты языка ECMAScript. Они обозначают-
ся сокращением «ES», после которого указывается номер
версии. Версия «ES1» была выпущена в 1997 году, «ES2» —
в 1998 году, «ES3» — в 1999 году, а версия «ES4» — так
и не была принята из-за слишком радикальных измене-
ний, предложенных для внесения. Эти версии мораль-
но устарели и имеют лишь историческое значение, как,
впрочем, и версии 1.0-1.7 JavaScript, соответствующие
этим стандартам.
Прорыв в стандартизации языка произошел спустя
10 лет с принятием в 2009 году версии «ES5». Этот стан-
дарт просуществовал 6 лет, был реализован всеми бра-
узерами и может считаться основой для изучения язы-
ка Java­Script реализовавшего ES5, начиная с версии 1.8,.

17
 Unit 1. Введение в JavaScript

Программы, разработанные с применением «ES5» будут

работать и на более современных версиях ES.
В 2015 вышел обновленный стандарт «ES6», расши-
ривший синтаксические возможности языка. С этого
же 2015 года было принято решение обновлять стан-
дарты ECMA­Script каждый год и вместо номера стан-
дарта указывать год его введения. Так стандарт «ES6»
получил альтернативное обозначение «ES2015», «ES7» —
«ES2016» и так далее.
В большинстве случаев, для указания особенностей
используемого языка JavaScript применяется реализуе-
мый им стандарт ECMAScript, а не внутренняя цифро-
вая версия, так как стандарты ежегодно обновляются,
а внутренняя версия JavaScript замерла на цифре «1.8.5»
в 2010 году. Поддержка стандартов ECMAScript обеспе-
чивается на уровне отдельных браузеров без внесения
изменений в цифровую версию самого JavaScript. В табли-
це приведены основные браузеры и их версии, начиная
с которых включено поддержку стандартов.
ES5 (2009) ES6 (2015) ES7 (2016)
Chrome 23 (2012) 42 (04.2017) 68 (05.2018)
Firefox 21 (2013) 54 (06.2017) —
IE / Edge* 10 (2012) 14 (08.2016) —
Safari 6 (2012) 10 (09.2016) —
Opera 15 (2013) 31 (08.2017) 55 (07.2018)

* Стандарт ES6 (2015) поддерживается только браузером Edge

Как видно из таблицы, на сегодня можно с уверен-

ностью говорить о практически полной поддержке стан-

18
 Версии JavaScript

дарта ES6 (2015) всеми популярными браузерами. В то же

время использовать нововведения стандарта ES7 (2016)
нужно крайне осторожно, т.к. в некоторых браузерах
возможна некорректная работа. Браузер Inter­net Ex­plo­rer
(IE) остановился на поддержке ES5 (2009), после чего ему
на замену пришел Edge.

19
 Unit 1. Введение в JavaScript

Понятие
Document Object Model
Разобравшись с тем, что такое язык JavaScript, обра-
тим наше внимание на то, с чем этот язык работает. Как
уже упоминалось, основным назначением Java­Script явля-
ется работа с веб-страницей на стороне клиента, то есть
с данными, отображаемыми на вкладке браузера. В тер-
минологии JavaScript эти данные, полученные от сервера,
обобщаются термином «документ» (document).
Исторически, разные браузеры по-разному строили
документ и его составные части. Это усложняло разра-
ботку клиентских сценариев программистами и требова-
ло введения некоторой унификации. Организация W3C
(«World Wide Web Consortium»), основанная для поддер-
живания и развития стандартов веб-технологий, раз-
работала и опубликовала стандарт, устанавливающий
единые требования к составу документа.
Стандарт ввел понятие «Объектная модель доку-
мента» DOM (Document Object Model) и обобщил способ
организации документа в виде взаимосвязанной сети
объектов. Для того чтобы понять смысл этой сетевой
организации рассмотрим следующий фрагмент HTML
кода в виде ненумерованного списка:

<ul>
<li>first element</li>
<li> second element
<span>child Node 0</span>
<a>child node 1</a>

20
 ПонятиеDocument Object Model

<p> child node 2 </p>

</li>
<li>third element</li>
</ul>

Список (<ul>) содержит в себе три элемента (<li>),

второй из них имеет в своем составе несколько дополни-
тельных элементов: группу (<span>), ссылку (<a>) и аб-
зац (<p>). На данный момент неважно как этот список
выглядит на странице браузера, важнее, как этот список
организуется в документе.
По правилам объектной модели DOM каждый
HTML блок представляет собой узел (англ. node) об-
щего структурного дерева. Узлы, содержащие в своей
структуре другие узлы, являются для них родитель-
скими (parent node). В примере таковыми являются сам
список (<ul>) и второй элемент списка (<li> second ele­
ment). В свою очередь, вложенные узлы называются
дочерними (child node) по отношению к их родитель-
скому узлу. В соответствии с порядком их создания
выделяется первый (first child) и последний (last child)
дочерние элементы.
Узлы, находящиеся на одном уровне, называются
соседними (sibling). Для перехода между соседними уз-
лами существуют отношения следующего соседа (next
sibling) и предыдущего соседа (previous sibling). В приве-
денном примере соседями являются списочные элементы
(<li>first element</li>, <li> second element</li>, <li>third
element</li>). Отношения между узлами DOM в нашем
примере приведены на рисунке 4.

21
 Unit 1. Введение в JavaScript

Рисунок 4
Понятие и содержание документа в модели DOM яв-
ляется более широким, чем его HTML содержание. Убе-
димся в этом практически. Запустите браузер, откройте
новую вкладку и перейдите на сайт. Когда сайт загру-
зится, откройте консоль разработчика — нажмите на
клавиатуре кнопку «F12» и в появившемся окне выберите
вкладку «Console». Введите в консоли слово document
и нажмите «Enter». Вы увидите ответ «#document» и сим-
вол раскрытия группы в виде треугольника слева от
надписи. Нажмите мышью на этот треугольник, после
чего раскроется детальное описание объекта (см. рис. 5).
Как видно, это знакомый Вам HTML код страницы.
Исследуем состав документ более детально. Введите
еще раз document и сразу после него поставьте точку
(пробел не добавлять). Появится выпадающая подсказ-
ка с огромным перечнем составных частей документа.
Выберите мышью или стрелками клавиатуры, например,
свойство URL и после выбора нажмите «Enter». Появится
ссылка на загруженный сайт (см. рис. 5).

22
 ПонятиеDocument Object Model

Рисунок 5
Анализируя состав объекта «document» можно сде-
лать вывод, что кроме HTML он содержит разнообразную
информацию о веб-странице. Детальнее о различных со-
ставных частях документа мы будет говорить в последу-
ющих уроках.
Отметим, что стандарт DOM — это довольно объ-
емная информация, требующая для своего понимания
навыков программирования и опыта разработки веб-ре-
сурсов. На данном вводном этапе подытожим, что DOM
позволяет представить веб-страницу как программный
объект, собирающий в себе все необходимые данные
в виде дерева объектов-узлов и дополнительных пара-
метрах страницы. Более того, структура и имена неко-
торых узлов устанавливаются стандартами и являются
одинаковыми во всех браузерах.

23
 Unit 1. Введение в JavaScript

Понятие
Browser Object Model
Рассмотренный в предыдущем разделе объект «до-
кумент» группирует и представляет доступ к основным
данным, размещенным на вкладке браузера. Эти данные
должны быть одинаковыми для различных браузеров,
различных пользователей, различных устройств, чтобы
все посетители сайта видели одну и ту же информацию.
Кроме данных, являющихся общими для всех посе-
тителей, конкретная вкладка конкретного браузера имеет
свои данные, уникальные для каждого конкретного поль-
зователя и его браузера, например, свою собственную
«историю» — перечень ранее открытых вкладок. Если
в браузере выполнить команду «вернуться к предыдущей
странице», то ее результат не будет зависеть от свойств
и данных сайта, а только от браузера, а точнее, его вклад-
ки. Более того, эти данные меняются от запуска к запуску,
от закрытия и открытия вкладок.
Для того чтобы не нарушать стандартизованную мо-
дель документа (DOM) и в то же время иметь возможность
хранить локальные (собственные) данные, в браузере со-
здана своя объектная модель ВОМ (Browser Object Model).
Эта модель является некоторой оболочкой над объектом
«document», на ряду с которым появляются объекты, от-
вечающие за параметры, относящиеся только к браузеру,
и напрямую не связанные с загруженной страницей.
Описанные данные собирает в себе объект «window»,
представляющий основу объектной модели браузера. На

24
 Понятие Browser Object Model

рисунке 6 представлены основные элементы этой модели.

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

Рисунок 6
Отметим дополнительно, что ВОМ проявляется еще
и в том, что «window» играет роль глобального объекта —
общего пространства для всех других объектов, причем
как для HTML, так и для JavaScript.
Со стороны JavaScript этому объекту принадлежат пе-
ременные, создаваемые пользователем (детальнее в раз-
деле «Область видимости переменной»).
Также в объект «window» попадают все элементы
HTML, которым присвоены идентификаторы (атрибут
id). Для того чтобы в этом убедиться создайте новый
HTML файл, в котором создайте параграф: (код также
доступен в папке Sources — файл js1_1.html).
<p id=p1>Paragraph with id = p1</p>

После этого откройте файл в браузере, убедитесь,

что набранная нами надпись отображается корректно.
Вызовите консоль разработчика (клавиша F12). Введите
имя идентификатора «р1» и нажмите «Enter». В ответ
консоль выдаст HTML код нашего параграфа.

25
 Unit 1. Введение в JavaScript

Рисунок 7
Введите еще раз «р1» и поставьте точку. Появится
подсказка о составе объекта, соответствующего пара-
графу «р1». Выберите поле innerHTML. Добавьте знак
«=» и в кавычках напишите «New text». В итоге строка
в консоли должна выглядеть как
p1.innerHTML=New text

Нажмите «Enter» и убедитесь, что текст на вкладке

изменился.

Рисунок 8
Как мы смогли убедиться, наличие у HTML элемен-
та идентификатора (атрибута id) приводит к созданию
в объекте «window» нового объекта с именем как иден-
тификатор.
Тот факт, что переменные JavaScript и объекты HTML
с заданным атрибутом «id» попадают в один объект ВОМ

26
 Понятие Browser Object Model

«window», накладывает ограничения на выбор их имен.

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

27
 Unit 1. Введение в JavaScript

Внедрение
в HTML документы.
Редакторы кода JavaScript
Будучи специально разработанными для внедрения
в HTML документы сценарии JavaScript включаются в них
довольно просто. Как уже упоминалось, никаких допол-
нительных действий по настройке браузера совершать
не требуется, не нужно подключать расширения, допол-
нения и т.п.
Внедрить код сценария в HTML документ можно дву-
мя способами. Первый — указать теги <script></script>
в теле документа и между ними поместить код. Второй —
написать код в виде отдельного файла (например, file.js)
и подключить его в документ, указывая файл-источник
<script src="file.js"></script>.
Обычно отдельными файлами создаются большие
по размеру скрипты, прямое указание которых в HTML
документе будет мешать его чтению или редактированию.
Также возможно указывать удаленный файл, используя
ссылку в качестве источника. Чаще всего в отдельных
файлах описываются дополнительные функции и не ис-
пользуются сценарии, которые выполняются сразу при
загрузке файла в документ.
Непосредственно в HTML документе размещают
относительно небольшие сценарии, выполняющиеся
при его загрузке и влияющие на свойства страницы и ее
отображение. В этих сценариях могут использоваться

28
 Внедрение в HTML документы. Редакторы кода JavaScript

функции, описанные в отдельных файлах, если файл был

подключен раньше, чем вызываются его функции.
Поскольку JavaScript коды представляют собой обыч-
ный текст, для работы с ними подойдет любой тексто-
вый редактор. Для создания и редактирования JavaScript
сценариев обычно применяют тот же инструмент, что
и для работы с HTML. На данный момент можно подо-
брать средство на любой вкус — от простейших неболь-
ших блокнот-подобных редакторов (например, Notepad,
AkelPad, Notepad++) до мощнейших интегрированных
средств разработки комбинирующих в себе несколько
языков программирования (в частности, Visual Studio,
NetBeans, Eclipse).
Сказать, что какой-то из перечисленных продуктов
однозначно лучше других, невозможно. Набор основ-
ных инструментов есть практически во всех редакторах,
а вот дополнительные функции, вроде набора цветных
тем оформления, автоматической замены всех подобных
слов, подсказок по тегам и их атрибутам — у каждого
свои. Очевидно, что «на вкус и цвет» всем не угодишь,
и каждый выбирает по себе. Работать с JavaScript кодами
можно в любом редакторе, но насколько это понравится
именно Вам — предсказать сложно.
Если у Вас есть предыдущий опыт работы или пред-
почтения относительно какого-то редактора или среды
разработки, то можно использовать их и для редакти-
рования JavaScript кода. Единственное, что необходимо
отметить, так это неприменимость для работы с Java­Script
сценариями текстовых процессоров на подобие Micro­
soft Word или OpenOffice Writer. Если быть точным, то

29
 Unit 1. Введение в JavaScript

применить эти программы можно, но придется указать

ряд определенных настроек. В любом случае, текстовые
процессоры предназначены совсем для других задач и,
даже если настроить их для работы с кодом, эта работа
будет неудобной.
Давайте создадим HTML документ и внедрим в него
Java­Script сценарий. Создайте новый файл с именем js1_2.
html, откройте его выбранным Вами текстовым редак-
тором и скопируйте или напечатайте в него следующее
содержимое (код также доступен в папке Sources — файл
js1_2.html). Для файла можно задать произвольное назва-
ние, но в дальнейшем описании примера считается, что
выбрано именно это имя.

<!doctype html>
<html>
<head>
</head>

<body>
<script>
console.log("Hello from script");
</script>
</body>
</html>

Сохраните файл и откройте его при помощи браузе-

ра. Должна появиться пустая вкладка без содержимого.
Откройте консоль разработчика (клавиша F12) и убеди-
тесь, что в ней выведена надпись «Hello from script». Ря-
дом с ней указано «js1_2.html:7), это означает, что данная
надпись появилась в результате работы 7-й строки файла

30
 Внедрение в HTML документы. Редакторы кода JavaScript

js1_2.html. Несложно убедиться, что эта строка содержит

команду console.log("Hello from script").

Рисунок 9
Как мы увидели, скрипт внедряется в документ при
помощи тегов <script> </script>. При загрузке страницы
в браузере скрипт автоматически выполняется без допол-
нительного вмешательства с нашей стороны. Также мы
познакомились с командой вывода в консоль «console.
log()», применяемой для вывода технической информа-
ции и используемой для отладки сценариев.

31
 Unit 1. Введение в JavaScript

Тег <noscript>
Если мы внедряем сценарии в нашу страницу, то мы
хотим быть уверенными в том, что они будут выполне-
ны в полном объеме. Иногда от выполнения скриптов
зависит не только красота оформления страницы, а ее
функциональность и взаимодействие с пользователем.
Что же делать, если он (пользователь) все-таки отключит
выполнение скриптов в браузере, не подтвердит их вклю-
чение по сообщению (см. рис. выше) или его устройство
вообще не поддерживает работу JavaScript? Для возмож-
ности решения подобных задач предусмотрен специаль-
ный HTML тег <noscript>.
Этот тег может применяться как в заголовочной части
HTML документа (<head>), так и в его теле (<body>). Всё,
что заключено между открывающим и закрывающим те-
гами <noscript> и </noscript> будет обрабатываться только
в том случае, если выполнение скриптов невозможно по ка-
ким-либо причинам. В обратном случае, содержимое этих
тегов будет проигнорировано и не будет обрабатываться.
Хотя отключение скриптов или отсутствие под-
держки JavaScript крайне маловероятно, тем не менее,
хорошим стилем разработки веб-ресурсов должно быть
предусмотрено и такой вариант настройки конечного
устройства. Давайте рассмотрим простейший пример,
иллюстрирующий проверку работоспособности клиент-
ских сценариев.
Создайте новый HTML файл. Скопируйте или напе-
чатайте в него следующее содержимое (код также досту-
пен в папке Sources — файл js1_3.html).

32
 Тег <noscript>

<!doctype html>
<html>
<head>
<noscript>
<style>
#msg{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background:#bbb;
text-align:center;
padding-top:49vh;
}
</style>
</noscript>
<style>
*{
font-size:30px;
}
</style>
</head>
<body>
<div id="msg">Allow scripts to use this page
</div>
<script>
window.msg.innerHTML =
"JavaScript enabled. All right.";
</script>
</body>
</html>

Основным контентом документа является блок (<div

id="msg">) с изначальным текстовым содержимым «Allow
scripts to use this page». В качестве активной составля-

33
 Unit 1. Введение в JavaScript

ющей (сценария) применена уже использованная нами

ранее технология замены содержимого блока (window.
msg.innerHTML = "JavaScript enabled. All right."). Если вы-
полнение сценариев разрешено, то пользователь увидит
надпись, сформированную этим сценарием. Иначе —
первоначальный текст, предупреждающий о необходи-
мости разрешить выполнение скриптов.
Дополнительно применим стилизацию блока в слу-
чае неработоспособности JavaScript в браузере. Для
этого поместим стилевое определение между тегами
<noscript> и </noscript>. Именно таким образом стиль
будет активирован только при отключенном JavaScript.
В противном случае данное определение будет просто
проигнорировано.
Главная идея — расположить блок во весь экран, за-
крыв собой все содержимое страницы. Его в нашем про-
стом примере нет, но в реальном проекте оно, конечно
же, будет. Для достижения идеи используем абсолютное
позиционирование блока (position:absolute), устанавлива-
ем верхнюю левую точку блока в начало страницы (left:0;
top:0), ширину и высоту блока задаем на 100% размера
(width:100%; height:100%). При таком стиле блок займет
все пространство вкладки браузера.
Задаем блоку серый фон (background:#bbb), выравни-
ваем надпись по центру (text-align:center), а также смеща-
ем ее по вертикали к центру окна, задавая верхний отступ
на уровне 49% от высоты вкладки (padding-top:49vh).
Откройте созданный файл в браузере. Убедитесь, что
при включенном по умолчанию JavaScript страница вы-
глядит так, как показано на рисунке 10.

34
 Тег <noscript>

Рисунок 10
Теперь самое аккуратное — отключаем выполнение
скриптов в браузере. В браузере Chrome наберите в адрес-
ной строке «chrome://settings/content/javascript» и нажми-
те на переключатель «Allowed (recommended)» который
должен поменяться на «Blocked».
В браузере «Opera» настройки очень похожи. Набе-
рите «opera://settings/content/javascript» и увидите такой
же переключатель.
В браузере Mozilla Firefox наберите «about:config», за-
тем в строке поиска введите «javascript.enabled» и сделайте
двойной щелчок на найденном поле, чтобы значение «de-
fault-true» поменялось на «modified-false» (обратное пере-
ключение также совершается двойным щелчком мыши).
В браузере «Edge» настройки меняются через свой-
ства политики безопасности операционной системы.
В браузере «Safari» перейдите в меню «Настройки»
и снимите отметку с поля «Включить JavaScript».

Рисунок 11

35
 Unit 1. Введение в JavaScript

После отключения сценариев обновите страницу.

Должны вступить в силу стилевые определения для ос-
новного блока, размещенные в теге <noscript>. А также
его текстовое содержимое не будет изменено скриптом,
оставшись в первоначальном виде. Внешний вид страни-
цы должен соответствовать следующему рисунку

Рисунок 12
Еще раз отметим, что предусмотренная реакция на-
шего документа на возможное отключение JavaScript
в браузере является хорошим стилем разработки и ре-
комендуется для внедрения в реальных проектах. Ко-
нечно, лучше всего предусмотреть нормальную рабо-
тоспособность сайта и при отключенной поддержки
сценариев, но, если это не удается, то, по крайней мере,
нужно выдать соответствующее предупреждение для
пользователя.
Убедитесь в том, что популярные ресурсы «выдержи-
вают» отключение JavaScript. Пока еще в браузере выклю-
чена поддержка сценариев, перейдите на сайт Академии
Шаг, Фейсбука или Гугла. Обратите внимание на то, что
загрузка сайтов проходит нормально и общая функци-
ональность сохраняется, хоть и с некоторыми ограни-
чениями. Во многом это обеспечивается применением
тега <noscript>.

36
 Тег <noscript>

Восстановите изначальные настройки безопасно-

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

37
 Unit 1. Введение в JavaScript

Основы синтаксиса
Разобравшись с предназначением языка JavaScript
и способами внедрения его в состав HTML документа,
перейдем к более подробному изучению самого языка.
Наверно, это может показаться странным, но языки
программирования во многом похожи на языки обыч-
ного человеческого общения. По формальному определе-
нию, язык — это знаковая система, предназначенная для
передачи смысловой информации. И язык программи-
рования, и язык общения — это средства для подобных
целей — передачи информации путем использования
специальных символов, слов и их комбинаций. То, что
в языке общения называют фразой, в JavaScript называ-
ют скриптом. Аналогом литературного произведения на
компьютерном языке является программа.
Исходя из основного определения, любой язык состо-
ит из двух основных аспектов — синтаксического и се-
мантического. Семантический аспект касается передачи
смысла, а синтаксический — правил использования сим-
волов и слов. Например, мы хотим вывести числа от 1 до
10 на экран — это смысл, семантика программы. То, как
мы это сделаем, как напишем программу — это синтаксис
или синтаксический аспект.
Забегая наперед отметим, что ошибки в програм-
мах также делятся на синтаксические и семантические.
Синтаксические ошибки возникают, если неправильно
использовать языковые знаки — опечататься в выраже-
нии или неправильно расставить «знаки препинания»,

38
 Основы синтаксиса

отделяющие «слова» друг от друга. Скажем, если вме-

сто «document» написать «documemt.», или для доступа
к полю случайно вместо точки «document.URL» поставить
запятую «document,URL». В то же время семантические
ошибки приводят к искажению смысла, передаваемого
программой. Например, вместо вывода чисел от 1 до 10
произойдет вывод чисел от 0 до 9.
Синтаксические ошибки может обнаружить компи-
лятор (транслятор или интерпретатор) и выдать соответ-
ствующее предупреждение на этапе анализа программы.
Семантические ошибки обнаружить гораздо сложнее,
т.к. программа запускается, работает и завершается
успешно. Вот только результат ее работы отклоняется
от желаемого. А заметить это может только тот поль-
зователь, который знает о первоначально заложенном
смысле программы. Или разработчик, если не поленится
провести полное тестирование программы, а не только
факт ее запуска.
Регистрозависимость
Поскольку язык — это знаковая система, на первом
этапе нужно разобраться с этими знаками. По аналогии
с языками общения в языках программирования также
применяются литеральные символы — буквы. Однако,
в отличие от языков общения, большие и маленькие бук-
вы могут иметь (или не иметь) различный смысл.
В письменном языке принято начинать предложе-
ние с большой буквы, но из-за написания слова с боль-
шой буквы его смысл не меняется. То есть выражения
«Принтер печатал» и «Печатал принтер» несут одинако-

39
 Unit 1. Введение в JavaScript

вый смысл, хотя написаны по-разному: с большой или

маленькой буквы. Однако в ряде случаев регистр (размер)
буквы имеет значение. Например, «Надежда» — это имя,
тогда как «надежда» — нет; «ОРТ» — это аббревиатура,
а «орт» — это единичный вектор в алгебре. Зависимость
смысла слова от регистра символов называют «регистро-
зависимость». Обратная ситуация описывается термином
«регистро­неза­виси­мость».
Языки программирования также могут обладать или
не обладать регистрозависимостью. Так язык общения
с базами данных SQL является регистронезависимым.
В нем выражения «FROM», «from» и «From» являются
одинаковыми. Тогда как язык JavaScript относится к ре-
гистрозависимым. То есть для него приведенные выра-
жения отличаются друг от друга и являются тремя раз-
личными словами.
Зависимость языка от регистра символов не является
отрицательным или положительным его качеством и ни-
как не влияет на возможности или сферу применения
языка. Просто при работе с ним следует помнить о пра-
вилах написания выражений и следовать этим правилам.
В случае JavaScript регистрозависимость не позво-
ляет, например, подменить выражение «document» на
«Document» или «DOCUMENT», а разрешает исполь-
зовать только первый вариант (на самом деле, второй
и третий варианты тоже могут быть использованы, но не
доступа к документу, а для других задач, также отличных
друг от друга). Будьте внимательны при чтении даль-
нейших примеров, обращайте внимание на написание
больших и маленьких символов.

40
 Основы синтаксиса

Комментарии
Кроме исполнимого кода в состав программы вклю-
чаются еще и авторские примечания — комментарии. Их
можно сравнить с «заметками на полях» — дополнитель-
ной информацией, никак не относящейся и не влияющей
на содержание основного произведения, но выражающей
мнение автора или читателя о нем.
// this function calculates mean value
function calcMVal(){….}

Как Вы наверняка догадались, строка комментариев

в JavaScript начинается с символов «//».
Комментарии используются для того, чтобы напом-
нить о примененных методиках. Например, указать сайт,
с которого был взят пример или формула для вычисле-
ний. Также комментарии могут служить неким перево-
дом, выражением в «нормальных словах» того, что делает
данный фрагмент кода.
a = b % 2 // % — remainder of division
semesterBegin = '2018-06-04' // from itstep.org site

Пример иллюстрирует, что комментарий может быть

размещен в той же строке, что и код. По окончанию кода
вставляется разделитель «//» и дальнейшая часть строки
не анализируется интерпретатором, оставаясь лишь по-
меткой для уточнения деталей.
Комментарии могут использоваться для внешнего
оформления программы, отделяя блоки один от другого
выразительными средствами.

41
 Unit 1. Введение в JavaScript

/*******************
Computation
*******************/
…
…
/*******************
Displaying
*******************/
…
…

Большие блоки комментариев заключают между

маркерами «/*» и «*/». Первый маркер начинает блок
комментария, второй его завершает. Кроме оформле-
ния, довольно часто подобный прием используют и для
временного отключения какого-либо кода, помещая его
в блок комментариев.
Ключевые и зарезервированные слова
Основу любого языка составляют слова — символь-
ные конструкции, имеющие самостоятельный смысл.
В случае разговорного языка смысл слов можно узнать
из толкового словаря, найдя в нем нужную символьную
последовательность.
В языках программирования также существуют сло-
ва, смысл которых установлен их разработчиками. Такие
слова называют ключевыми.
В отличие от разговорного языка, слов в языке про-
граммирования немного. Согласно последнему на дан-
ный момент стандарту Standard ECMA-262 9th Edition
(известному нам также как ECMAScript 2018 или ES9)
ключевыми являются следующие слова: await, break, case,

42
 Основы синтаксиса

catch, class, const, continue, debugger, default, delete, do, else,

export, extends, finally, for, function, if, import, in, instanceof,
let, new, return, static, super, switch, this, throw, try, typeof,
var, void, while, with, yield.
Эти слова воспринимаются интерпретатором как
команды, выражения, предназначенные для выполне-
ния. Соответственно, такие слова нельзя использовать
для других нужд, например, в качестве имен переменных
или функций. Хоть это и не запрещено, но крайне не
рекомендуется использовать слова, отличающиеся от
ключевых только регистром символов — «FOR», «Var»
или «typeOf».
Для «запаса на развитие» языка некоторые слова яв-
ляются зарезервированными. Они могут не иметь реа-
лизации, то есть не соответствовать реальным командам
транслятора. Тем не менее, их использование для имен
также запрещено, поскольку со временем в новых вер-
сиях Javascript реализация произойдет.
В стандарте ES9 зарезервированными являются сло-
ва: enum, implements, package, protected, interface, private,
public.
Перечень ключевых и зарезервированных слов мож-
но уточнить в описании стандарта по ссылке (с. 208–209).
Некоторые ключевые и зарезервированные слова
старых стандартов (ES1-3) были «освобождены» в более
новых редакциях. Таковыми являются: abstract, boolean,
byte, char, double, final, float, goto, int, long, native, short,
synchronized, throws, transient, volatile.
Хотя применение слов из последнего перечня не за-
прещено в современных программах, в старых браузерах

43
 Unit 1. Введение в JavaScript

из-за этого возможны ошибки. Вероятность такой ошиб-

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

44
 Переменные. Правила именования переменных

Переменные.
Правила именования
переменных
Важнейшей частью программирования, послужив-
шей когда-то причиной перехода от первого ко второму
поколению языков, являются переменные. В формаль-
ном определении переменная — это именованная об-
ласть памяти.
В простом представлении переменная отвечает за
возможность сохранять данные и обеспечивает доступ
к ним во время работы программы. В самом простом
случае переменную можно сравнить с памятью на кальку-
ляторе: нажали кнопку «М» и результат где-то сохранил-
ся. При необходимости этот результат можно из памяти
извлечь и использовать в других расчетах.
При программировании реальных задач довольно
часто приходится иметь дело с промежуточными ре-
зультатами и дополнительными величинами. Для при-
мера рассмотрим процесс сложения чисел «в столбик».
Пусть надо сложить 85 и 77. Складывая последние циф-
ры чисел (5 и 7), мы получаем 12, значит «два пишем,
один в уме».
На втором этапе мы складываем уже три цифры: 8,
7 и единицу, запомненную на предыдущем этапе. По-
лучаем 16 и снова «6 пишем, 1 в уме». На третьем этапе
запомненную единицу мы записываем в первую позицию
конечного результата.

45
 Unit 1. Введение в JavaScript

Рисунок 13
Говоря «в уме» мы подразумеваем, что нам как-то нуж-
но запомнить (а лучше записать) единицу, которую следует
учесть в дальнейших расчетах. Если мы хотим научить
компьютер сложению в столбик, необходимо предусмот-
реть место, где мы будем запоминать (записывать) данные
о переносе (запоминание единицы называется переносом).
Для компьютера «в уме» означает «в оперативной памяти».
Не имея специального свободного места в памяти, данные
просто негде будет хранить. Это место в памяти, с точки
зрения программы, и является переменной.
На каждом последующем этапе сложения, может
быть, снова придется запоминать единицу, а, возможно,
и нет, если сумма цифр будет меньше 10. Выделять для
новых данных отдельное место в памяти необходимости
нет, так как после использования запомненной единицы
один раз ее можно «забывать», то есть заменять следу-
ющим результатом «запоминания». Это еще раз подчер-
кивает смысл слова «переменная» — ее значение может
меняться (переменяться) в процессе работы программы.
Когда значение переменной меняется, оно заменяет
собой предыдущее значение, хранимое в памяти. Старое

46
 Переменные. Правила именования переменных

значение утрачивается навсегда, стирается из памяти.

Если терять старое значение нельзя и в нем будет необ-
ходимость в дальнейшей программе, то следует создать
еще одну переменную, отвечающую за другую область
памяти, не пересекающуюся с остальными переменны-
ми. Количество различных переменных, которые можно
создать в программе, ограничивается только объемом
оперативной памяти конкретного компьютера.
Для того чтобы использовать переменную в программе
необходимо дать ей имя. Имя переменной связывает про-
граммное (текстовое) выражение и реальное (физическое)
место в оперативной памяти, где хранятся данные. Эти хра-
нимые данные также называются «значением переменной».
Имя переменной представляет собой текстовую за-
пись (литерал), уникальную для каждой переменной
и позволяющую однозначно их разделять между собой.
Поскольку в языке программирования некоторые лите-
ралы используются для операторов, операций, их раз-
деления или группирования, имя переменной не может
быть произвольным набором символов.
Принципы и ограничения, накладываемые на воз-
можные имена переменных, называют правилами имено-
вания. Правила можно разделить на строгие и рекомен-
дуемые. Часть правил мы уже приводили выше, повторим
их здесь для обобщения.
Строгие правила обязательны для исполнения, нару-
шение их приведет к ошибкам выполнения программы.
■■ Для имен переменных запрещается использование
ключевых или зарезервированных слов (см. раздел
«Ключевые и зарезервированные слова»).

47
 Unit 1. Введение в JavaScript

■■ В именах переменных не допускаются пробельные

и разделительные символы (табуляция, пробел, за-
пятая, точка с запятой и т.п.).
■■ Имена переменных не могут содержать символы
операций (математических, логических, битовых, —
всех), например «+», «!» или «&». Особое внимание
следует обратить на то, что знак минуса «–», часто
используемый для имен классов в HTML, для имен
переменных в JavaScript не разрешен.
■■ В именах переменных не допускаются специаль-
ные символы операторов, например «.», «{}» или
«?:», а также кавычки всех типов. Чем перечислять
все подобные символы, проще сказать, что из них
в именах переменных допускаются только «_» (ниж-
нее подчеркивание) и «$» (знак доллара).
■■ Имя переменной не может начинаться с цифры (но
может содержать цифры в середине или в конце).
В следующей таблице приведены выражения, кото-
рые недопустимы для имен переменных, а также их до-
пустимые варианты с близким по виду написанием:
Допустимые
Выражение Причина запрета
варианты
the X используется разделительный символ theX
(пробел) the_X
star* используется символ операции умно- Star
жения «*» starS
e}{ile используются символы группирующе- eXile
го оператора «{}» exile
Bill.Gates используется символ оператора до- BillGates
ступа «.» (точка) Bill_Gates

48
 Переменные. Правила именования переменных

Допустимые
Выражение Причина запрета
варианты
last-element используется символ операции вычи- lastElement
тания «-» last_element
[data] используются символы оператора Data
разыменования «[]» _data_
2GB имя начинается с цифры _2GB
GB_2
isOdd? используется символ тернарного опе- isOdd
ратора «?» is_Odd
-=*!*=-, :-) все возможные нарушения -

Рекомендованные правила призваны улучшить чи-

таемость кода, отклонение от них не приводит к ошиб-
кам и программа может выполняться. Очень часто такие
правила устанавливают компании для поддержания соб-
ственного корпоративного стиля. Однако есть и общие
рекомендации, следование которым сделает код значи-
тельно лучше для восприятия. Среди таких рекоменда-
ций можно выделить следующие:
■■ Имена переменных должны отражать смысл храни-
мого в них значения. Например, для хранения сум-
марного значения можно использовать имя «sum»,
для обозначения возраста — «age» и т.п.
■■ Имена не должны совпадать (с точностью до реги-
стра) или быть очень похожими на ключевые и за-
резервированные слова, на стандартные объекты
и функции, а также на имена других переменных.
Например, нежелательно использовать имена на по-
добие «New», «Document» или «Window», перемен-
ные с именами «х1» и «Х1» в одной программе.

49
 Unit 1. Введение в JavaScript

■■ Не рекомендуется использовать символы «l» (L ма-

ленькая) и «О» (буква «о» большая), если они не есть
частью слова, т.к. эти символы похожи на единицу
и ноль соответственно. Плохо будут читаться вы-
ражения «хl» (похоже на «х1») или «n[O]» (похоже
на «n[0]»). При доработке таких программ ошибки
практически гарантированы.
■■ Если имя переменной состоит из нескольких слов,
то следует придерживаться единых правил их выде-
ления. Для имен стандартных функций и объектов
в Javascript применяется стиль «lowerCamelCase»,
согласно которому слова пишутся подряд, первое
слово со строчной (маленькой) буквы, остальные —
с прописной (большой).
■■ Для поддержки возможности править код при по-
мощи простых редакторов (в т.ч. с мобильных
устройств) рекомендуется для имен переменных
использовать только латинские символы и цифры,
ограничив применение спецсимволов Юникода.
■■ Предпочтение следует отдавать английскому пере-
воду слов вместо написания их транслитерацией.
При выводе проекта на международный уровень
это упростит работу в группах программистов.
■■ Для больших проектов нежелательно использовать
короткие имена переменных. С большой вероятно-
стью они могут совпасть с переменными из других
блоков и повлиять на их работу (детали в разделе
«Область видимости переменных»).
Рекомендованные правила не обязательны для испол-
нения и призваны улучшить внешний вид и читаемость

50
 Переменные. Правила именования переменных

кода, его анализ, сопровождение, переработку. Следо-

вание правилам именования создает «почерк програм-
миста», делает программы узнаваемыми в профессио-
нальном кругу. Согласитесь, некрасивый почерк обыч-
ного письма ничего плохого о человеке не говорит, но
гораздо приятнее читать текст, написанный красивым
почерком. А некоторыми записями можно буквально
любоваться, как красиво они выведены. При чтении про-
грамм возникают аналогичные эмоции.
В следующей таблице приведены некоторые имена
переменных, допустимые с точки зрения программного
синтаксиса, но содержащие отклонения от рекомендо-
ванных правил
Имя переменной Замечания
asdf, qwerty, xxxx имя не отражает смысла храни-
мых данных
For, BREAK, klass, ll имя подобно ключевым словам
или операторам
al («L» small), aO, xI («i» capital) используются символы схожего
написания
kilkist, geld, qian используется транслитерация
вместо перевода
sumofarow, date_of_act отклонение от стиля
lowerCamelCase

Хорошими примерами для имен переменных мож-

но считать следующие: «firstLetter», «totalWeight», «day-
OfWeek», «cardNumber», «nikName». Даже без анализа
программного кода вполне понятно, какой смысл несут
сохраненные в них данные.

51
 Unit 1. Введение в JavaScript

Типы данных
Структура памяти компьютеров устроена таким обра-
зом, что в одной ячейке памяти может храниться только
два возможных значения — «0» и «1», образующих один
бит информации. Для удобства работы с памятью, чтобы
не обращаться к каждому биту отдельно, биты группиру-
ются в байты — блоки, обрабатываемые в памяти за одну
операцию чтения или записи. Обычно предполагается,
что байт состоит из восьми бит, хотя бывают и откло-
нения от указанного количества в специализированных
устройствах.
Повторим выводы предыдущего раздела, что пере-
менная — это именованная область памяти, предназна-
ченная для хранения некоторых данных. И объединим это
утверждение с тем фактом, что в памяти могут храниться
только блоки единиц и нулей. Выходит, что любая пере-
менная сопоставляется с некоторой последовательностью
из «0» и «1» в некотором участке памяти, и других данных
содержать в себе просто физически не может.
Однако в задачах прикладного программирования
требуются другие данные — числа, символы, даты и т.п.
Для того чтобы обеспечить работу с понятными нам дан-
ными, нужны определенные правила, которые будут от-
вечать за преобразование битовой последовательности,
сохраненной в памяти (в переменной), к другому пред-
ставлению. Подобные правила нужны и для операций
с разными данными, ведь сложение чисел и сложение
дат — это разные операции.

52
 Типы данных

При этом каждая переменная должна хранить в себе

информацию о том, какое правило преобразования сле-
дует к ней применять, т.к. разные переменные могут от-
вечать за разные величины. Эта хранимая информация
о переменной называется ее «типом данных».
Количество различных типов данных обычно уста-
навливается конкретным языком программирования
и различно в разных языках. В JavaScript их семь. В С++
около 20, в SQL — около 30. В большинстве языков, в т. ч.
и в JavaScript, можно создавать собственные (пользова-
тельские) типы данных, поэтому в самом языке описыва-
ется небольшое количество базовых (фундаментальных)
типов из которых можно сконструировать другие типы.
Рассмотрим, какие фундаментальные типы данных
есть в JavaScript. В стандарте ES9 к ним относятся: Unde-
fined, Null, Boolean, String, Symbol, Number, Object.
1. Тип «Undefined» имеет только одно значение «unde­
fined». Этот тип имеет любая переменная, которой
еще не было присвоено значение.
2. Тип «Null» также имеет единственное значение
«null». Это значение применяется там, где ожидает-
ся получение объекта, но по каким-либо причинам
данный объект не был получен. Другими словами,
переменная была создана, но значение в ней отсут-
ствует. Если «undefined» соотносится с переменной,
которая не участвовала в операции присваивания,
то «null» возникает в результате неудачной операции
присваивания.
3. Тип «Boolean» имеет два значения «true» и «false».
Этот тип используется для проверки условий и от-

53
 Unit 1. Введение в JavaScript

ношений. Детальнее работа с данным типом данных

будет описана в следующем разделе.
4. Тип «String» служит для представления строковых
(символьных) данных — надписей, выводимых для
пользователя или данных, вводимых пользователем
на странице.
5. Тип «Number» предназначен для хранения чисел.
Стандартом установлено, что этот тип имеет ровно
18437736874454810627 различных значений, пред-
ставляющих число двойной точности в формате
64 бит. Кроме самих чисел среди этих значений есть
несколько специальных:
▷▷«NaN» (Not-a-Number) применятся при невозмож-
ности преобразовать результат к числу, по сути,
обозначает ошибку;
▷▷«Infinity» — для представления положительной
бесконечности (+∞);
▷▷«-Infinity» — для представления отрицательной
бесконечности (–∞);
▷▷«-0» — для разделения математического форма-
лизма +0 и –0.
6. Тип «Object» представляет собой набор (коллекцию),
объединяющий переменные других типов данных,
в т.ч. и других объектов. Частично мы уже рассма-
тривали объекты в разделах об объектной модели
документа и браузера.
7. Тип «Symbol» объединяет в себе значения, которые
не относятся к типу «String» но могут быть исполь-
зованы в качестве ключа в типе «Object». Перечень
встроенных «символов» можно посмотреть, набрав

54
 Типы данных

в консоли «Symbol» и поставив в конце точку. Эти

символы используются для специализированых ал-
горитмов и описаны в пункте 6.1.5 стандарта ES9. Для
изучения основ программирования этот тип исполь-
зоваться не будет.
Основными типами, предназначенными для работы
с данными, являются «Number» (для работы с числами),
«String» (для работы с текстами) и «Object» (для группи-
ровки данных). Типы данных «Null» и «Undefined» ис-
пользуются для проверки успешного выполнения опера-
ций и для хранения данных не применяются. Тип данных
«Boolean» обеспечивает сам механизм проверок, хотя
может применяться и в других задачах. Тип «Symbol»
имеет крайне специфическое применение и практически
не применяется для хранения данных.
Говоря о типах данных, к которым относятся опре-
деленные переменные, следует отметить, что языки
программирования разделяются на языки со статиче-
ской и динамической типизацией. В языках со стати-
ческой типизацией переменная может иметь только
один тип данных, который указывается при ее создании
(объявлении) и в течение работы программы этот тип
не меняется.
Языки с динамической типизацией определяют тип
переменной во время каждого обращения к ней. В неко-
торых языках тип устанавливается при записи значения
в переменную и сохраняется до следующей записи (так
работает, в частности, язык Python). В JavaScript тип пере-
менной может меняться и при ее чтении в зависимости от
того, какое выражение обрабатывается в данный момент.

55
 Unit 1. Введение в JavaScript

То есть JavaScript является языком с динамической

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

56
 Операторы

Операторы
В одном из вариантов, компьютерную программу
можно представить себе как набор некоторых действий,
выполнение которых приведет к решению определенного
задания, ради которого программа и создается. Действия,
из которых состоит программа, могут быть разнообраз-
ными, но, конечно же, выполнимыми для того устрой-
ства, на котором будет выполняться программа. С одной
стороны, всё, что может процессор, так это преобразовы-
вать одни последовательности нулей и единиц в другие по
своим сложным внутренним правилам. С другой сторо-
ны, языки программирования для того и создаются, что-
бы скрыть от программиста сложные правила, заменив
их более-менее понятными для человека выражениями.
Путь к упрощению, «очеловечиванию» инструкций
языка может привести к избыточности выражений, ха-
рактерных для языков общения. Разные выражения при
этом становятся близкими по смыслу и несут практиче-
ски одинаковый посыл. Учитывая тот факт, что каждое
из таких выражений должно быть переведено на «язык
процессора», возникает вполне резонный вопрос об оп-
тимальности: можно ли выделить некоторую основу,
базовый набор выражений из которых можно строить
любые другие выражения?
Ответом на этот вопрос послужило появление опе-
раторов. Операторы или программные инструкции
(англ. statements) представляют собой синтаксические
конструкции (выражения) языка, описывающие опре-

57
 Unit 1. Введение в JavaScript

деленные базовые действия. Сами по себе операторы

относительно просты, однако при их помощи, комбини-
руя различные операторы, можно конструировать более
сложные выражения, и, в конце концов, написать всю
программу. Другими словами, любая программа (кроме
пустой, конечно) состоит из набора операторов.
Существует альтернативное определение оператора
как наименьшей самостоятельной (автономной) части
языка программирования. В нем акцент делается на фун-
даментальности операторов — нет инструкций в языке,
которые будут проще (меньше), чем оператор, и при этом
описывать действие (имеется в виду, что меньшее выра-
жение написать можно, но оно будет либо ошибочным,
либо бездейственным).
Составные части операции называются операндами.
Другими словами, операнды — это то, что участвует в опе-
рации. Например, в выражении «2+3» оператор представ-
лен инструкцией «+», операнды — числами 2 и 3, а само
выражение «2+3» является операцией, имеющей результат.
В зависимости от характера описываемых действий,
операторы и операции разделяют на группы. Например,
группа арифметических операторов отвечает за основ-
ные математические действия, группа логических опе-
раторов — за сравнения и отношения, и т.д. Рассмотрим
далее основные группы операторов и операции, которые
к ним относятся.
Арифметические операторы
Одним из основных способов обработки данных яв-
ляется их математическое преобразование. Математи-
ческие (или арифметические) операции представляют

58
 Операторы

собой процесс получения числового результата от неко-

торого выражения. В это выражение могут входить числа,
базовые арифметические операции, а также отдельно
определенные математические функции.
Числа представляют собой обычные константы, при-
меняемые для расчетов. Как и в большинстве языков про-
граммирования, в JavaScript поддерживается несколько
способов записать число:
■■ «с фиксированной точкой» — запись, совпадаю-
щая с обычной математической формой. Например,
123.456, –0.25, или 10. Ведущий ноль в числе можно
опускать, записывая значение 0.1 как «.1». Исполь-
зовать запятую вместо точки нельзя.
■■ «с плавающей точкой» или «экспоненциальная фор-
ма» представляет число в виде М∙10Е. М называ-
ют мантиссой числа, Е — экспонентой. При записи
мантисса отделяется от экспоненты буквой «Е». На-
пример, 1Е2 = 1∙102 = 100; 3.4Е-2 = 3.4∙10-2 = 0.034.
Таким образом удобно задавать большие числа,
вроде 1Е6 = 1000000, или, наоборот, малые: 1Е-6 =
0.000001. К тому же так понятнее, сколько нулей сле-
дует за числом или перед ним. Данная форма часто
применяется в инженерных и научных расчетах.
■■ Числа в позиционных системах разного базиса мож-
но представить, используя префикс «0» (ноль) и сим-
вол базиса. Бинарное (двоичное) число записывается
с префиксом «0b», например, «0b1110» соответствует
десятичному числу «14». Число в системе с базисом
8 (восьмеричной системе) имеет префикс «0о» (от

59
 Unit 1. Введение в JavaScript

англ. octal). Система с базисом 16 (шестнадцатерич-

ная система) использует префикс «0х». Такие формы
делают лучше читаемыми арифметико-логические
(битовые) операции, а также часто применяются для
указания кодов символов.
■■ Специальные константы из типа данных Number.
Кроме приведенных выше (см. раздел «типы дан-
ных») констант +/– Infinity, +/–0 и NaN возможны вы-
ражения Number.MAX_VALUE — максимально воз-
можное число, Number.MIN_VALUE — минимально
возможное число, Number.EPSILON — минимально
возможная разница между числами, Number.MAX_
SAFE_INTEGER и Number.MIN_SAFE_INTEGER —
максимальное и минимальное «безопасное» целое
(некоторые функции и преобразования не могут ра-
ботать с большими значениями).
Основные арифметические операции JavaScript
приведены в следующей таблице:
Запись Математиче-
Название операции
в JavaScript ская запись
Сложение x+y x+y
Вычитание x—y x–y
Умножение x*y x∙y
Деление x/y x:y
Остаток от деления x%y x mod y
Возведение в степень x ** y xy
Инверсия (смена знака) -х -х
Инкремент (увеличение на 1) x++ или ++х х+1
Декремент (уменьшение на 1) х-- или –х х-1

60
 Операторы

Дополнительные математические функции имеют

специфические области применения и имеют имена,
подобные привычным для нас математическим выра-
жениям. Догадаться о назначении функций несложно,
если иметь представление о соответствующем разде-
ле математики. В противном случае маловероятно, что
возникнет необходимость такие функции применять
и использовать.
При составлении математических выражений следует
помнить о приоритете операций. Умножение и деление
имеют высший приоритет перед сложением и вычитани-
ем. То есть выражение «3+2*2» будет равно 7, т.к. сначала
буде выполнено умножение 2*2 и лишь затем сложение.
Если нужно поменять приоритет действий, то следует
применить группирование операций в круглые скобки.
Например, выражение «(3+2)*2» будет равно 10, т.к. сло-
жение 3+2 будет выполнено раньше за счет скобок и за-
тем умножено на 2. Детальнее о приоритете операций
поговорим позже в соответствующем разделе.
В отличие от математических формул, в которых
можно применять разные скобки для группировки выра-
жений, в JavaScript допускаются только круглые. Скобки
можно сколько угодно вкладывать друг в друга, главное,
не забывать, что каждой открытой скобке должна соот-
ветствовать закрытая. Например, допустимым являет-
ся выражение «1+(2*(3/(4%5))+6)», но если пропустить
скобку «1+(2*(3/(4%5)+6)», то возникнет ошибка.
Пример: необходимо составить программу для рас-
чета формулы:

61
 Unit 1. Введение в JavaScript

2
f = x+ ⋅y.
x +1
Программист использовал следующий код, найдите
в нем ошибку: f = x + (2 / x + 1 ) * y.
Ответ: приоритет операции деления выше, чем у опе-
рации сложения. Значит блок (2 / x + 1) эквивалентно
формуле
2
+1
x ,
где двойка делится только на «х» и к результату добавля-
ется единица. В условии задания требовалось рассчитать
блок
2
x +1 ,
то есть выражение «х+1» нужно взять в скобки при деле-
нии. Правильное решение: f = x + 2 / (x + 1 ) * y.

Операторы отношений
После проведения алгебраических расчетов может
возникнуть следующая задача — сравнить полученные
результаты между собой или с их ожидаемым значе-
нием. Например, один банк предлагает 1% на депозит
каждый месяц, а другой повышает ставку с 0.9% до 1.1%
в течение года. Какой из банков окажется выгоднее по
итогам года?
Проведя расчеты, окажется, что при первой схеме
начислений мы получим х1=12.6825% годовых, тогда как
при второй х2=12.6821%. Как определить что выгоднее?
Ответ очевиден: нужно сравнить результаты (х1 и х2)

62
 Операторы

и выбрать больший из них. Для того чтобы автоматизи-

ровать этот процесс, в программировании применяются
операторы отношений.
Операции отношений или, как их еще часто назы-
вают, операции сравнения применяются для провер-
ки предполагаемых алгебраических отношений (боль-
ше-меньше) или равенства между операндами. В одной
операции участвуют только два операнда.
В отличие от понятных человеку заданий — выбрать
из двух чисел большее (или меньше), операции данной
группы только проверяют предполагаемые отношения
или равенства. В качестве результата выполнения опе-
рации получаются значения типа Boolean: «true» или
«false». Результат «true» свидетельствует о том, что про-
верка пройдена, «false» — об обратной ситуации. Други-
ми словами, операция отношения «х1>x2» дает ответ на
вопрос «х1 больше х2 ?». Значение «true» означает ответ
«да», тогда как «false» — «нет».
Операторы отношений применяются для состав-
ления условий и ветвления программы — выполнения
различных действий в зависимости от результата про-
верки, а также для организации циклов — многократного
повторения одного блока. Например, при авторизации
нужно проверить пароль, введенный пользователем, на
равенство с его правильным значением. В зависимости
от результата (равен или не равен) пользователь увидит
различную реакцию программы.
Примером на проверку отношений может быть воз-
растной ценз. В таком случае возраст пользователя дол-
жен быть сравнен с предельным значением выражениями

63
 Unit 1. Введение в JavaScript

«больше» или «меньше» и, в зависимости от результата,

программа будет выполняться по-разному.
Правила составления условий и ветвления програм-
мы будут раскрыты далее (см. раздел «условия»), в дан-
ном разделе рассмотрим сами операторы и их примене-
ние в операциях отношений и сравнений.
Поскольку JavaScript является языком с динамиче-
ским преобразованием типов, операции сравнения де-
лятся на строгие и нестрогие. В нестрогих операциях
проверяются только значения операндов — могут ли эти
значения быть равны, если оба операнда преобразовать
к одному типу. В строгих операциях кроме проверки зна-
чений дополнительно проверяются типы, то есть операн-
ды разных типов не могут быть равны между собой ни
при каких значениях.
Нестрогие операции сравнения имеют запись «==»
(проверка на равенство) или «!=» (проверка на неравен-
ство). Тот факт, что операции являются нестрогими, про-
является в предварительном преобразовании операндов
к примитивным типам (насколько это возможно) и по-
следующим сравнении. Так, например, проверку прой-
дут сравнения «3=='3'» (число 3 сравнивается со строкой
'3'), «1==true» (число 1 сравнивается со значением типа
Boolean), «' '==false» (строка с пробелом сравнивается со
значением типа Boolean).
Во всех этих случаях равны между собой значения,
которые получаются после преобразования операндов
к числовой форме. Откройте консоль браузера, введите
приведенные выражения и убедитесь в сделанных выво-
дах (рис. 14).

64
 Операторы

Рисунок 14
Строгие операции проверяют равенство при помощи
выражения «===», а неравенство — «!==». В этом случае
операнды разного типа в любом случае не могут быть
равными между собой, даже если содержат подобные
значения. Используйте консоль, чтобы убедиться, что
все предыдущие выражения приведут к отрицательному
результату (false) (рис. 15).

Рисунок 15
Понятие строгой и нестрогой операции применяется
только к сравнениям. Операции отношений не имеют
такого деления. Для проверки отношений двух операндов
применяются следующие операторы:

65
 Unit 1. Введение в JavaScript

Запись Название Истина если... Пример

левый операнд меньше 2<3 (true)
< меньше
правого 2<2 (false)
левый операнд больше 3>2 (true)
> больше
правого 2>2 (false)
левый операнд меньше 2<=3 (true)
<= меньше-равно
или равен правому 2<=2 (true)
левый операнд больше или 3>=2 (true)
>= больше-равно
равен правому 2>=2 (true)

примечание — операторы «<=» и «>=» должны быть запи-

саны именно в такой последовательности знаков. Непра-
вильная запись оператора « =< » вызовет ошибку. Однако
выражение « => » в JavaScript допустимо и не приводит
к ошибке, но имеет совершенно иное значение никак не
связанное со сравнениями и отношениями.
Не будучи разделенными на строгие и нестрогие, опе-
рации отношения работаю иначе, чем операции срав-
нения. Если операнды имеют одинаковый тип, то пре-
образование к примитивным типам не проводится. То
есть если сравниваются строки, содержащие числа, то
сравнение будет производиться по правилам сравнения
строк, а оно отличается от сравнения чисел.
Строки сравниваются символ за символом до тех пор,
пока один из них не окажется «бÓльшим» — следующим
далее по алфавиту (по таблице символов).
Например, сравнение строк «'3'>'10'» приведет к по-
ложительному результату, т.к. первый символ левой
строки «3» больше первого символа правой строки «1»
и дальше сравнение не продолжается. Если необходимо
проводить сравнения чисел нужно быть крайне вни-

66
 Операторы

мательным, чтобы они не оказались в строковом пред-

ставлении.
Если один из операндов отношения является числом,
то второй также приводится к числу. То есть сравнение
«3>'10'» будет ложным (false). Также ложным будет срав-
нение «'3'>10».
В обоих случаях один из аргументов является стро-
кой, другой — числом. Из-за этого сравнение происходит
по более простому типу — числовому (рис. 16).

Рисунок 16

Рисунок 17

67
 Unit 1. Введение в JavaScript

Если необходимо проверять отношения для чисел,

но нет уверенности, что переменные хранят их именно
в числовом представлении, то применяется прием до-
бавления символа «+» перед переменной. Операция «+х»
будет пытаться преобразовать переменную «х» к число-
вому типу (рис. 17).
На рисунке иллюстрируется действие описанного при-
ема. В переменную х помещается строковое представление
числа «10», в y — строковую «3». Если сравнивать перемен-
ные между собой, то отношение «y > x» будет истинным
(для строк '3'>'10'), тогда как выражение «+y > +x» будет
ложным, поскольку сравниваются числовые значения пе-
ременных.

Рисунок 18
Однако описанный прием имеет некоторые ограниче-
ния. Если в состав строки в переменной х будут включе-
ны не-цифры, то выражение «+х» приведет к результату
«NaN». Отметим, что при работе с CSS свойствами до-

68
 Операторы

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

ния, например, «рх» (рис. 18).
В таком случае сравнение переменных как строк
возможно, но приводит к некорректному результату
(с точки зрения логики сравнения чисел). Однако срав-
нения как «+y > +x», так и «+x > +y» будут ложными
(что вообще-то странно для разных выражений с точки
зрения математики). Ситуация возникает из-за того,
что преобразования со знаком «+» приводят к ошиб-
кам, а появление ошибки в отношениях автоматически
считает их ложными.
Забегая наперед скажем, что описанная ситуация ре-
шается применением функции «parseInt», которая выде-
ляет число игнорируя единицы измерения. То есть срав-
нение «parseInt(y) > parseInt(x)» (или наоборот) приведет
к вполне ожидаемым результатам.
Логические операторы
В программировании часто возникают ситуации,
когда необходимо проверить сразу несколько условий.
В качестве примера рассмотрим задачу по составлению
программы, которая должна включать сигнал будильника
по рабочим дням в 7:00 утра.
Проведем анализ условий, по которым программа
должна включить сигнал. Во-первых, необходимо прове-
рить текущее время на равенство конкретному значению
(7:00). Во-вторых, нужно проверить день недели на то, что
он рабочий. При этом предполагаем, что день считается
рабочим, если он будет понедельником или вторником,
или средой, или четвергом, или пятницей.

69
 Unit 1. Введение в JavaScript

Сразу обратим внимание на то, что мы применяем для

условий разные соединительные союзы: время должно
быть равно 7:00 И день являться рабочим. При этом день
считается рабочим, если он понедельник ИЛИ вторник,
ИЛИ среда (и т.д.).
Для того чтобы немного сократить перебор условий,
мы можем пойти от обратного — день является рабочим
если он НЕ является выходным. Тогда вместо перечисле-
ния рабочих дней можно сказать, что день НЕ суббота И,
в то же время, день НЕ воскресенье.
В математической логике доказывается, что для со-
ставления сложных условий рассмотренных трех логиче-
ских операций вполне достаточно. Они так и называются:
логическое «И», логическое «ИЛИ» и логическая инверсия
или операция «НЕ».
Задание для самостоятельной работы. Определите,
какие логические операции будут необходимы для состав-
ления условий в следующих задачах:
■■ требуется, чтобы при авторизации совпали (с храни-
мым значением) логин и пароль, введенные пользо-
вателем, но как альтернатива вместо логина может
быть указана электронная почта;
■■ для отбора целевой группы социологического опро-
са нужно выбрать респондентов, возрастом от 30 до
40 лет, имеющих высшее образование и не работаю-
щих в банковской сфере.
Рассмотрим логические операции и их применение
в JavaScript более детально.
Логическая инверсия (операция «НЕ» или «NOT»)
меняет результат операнда на противоположный («true»

70
 Операторы

на «false», «false» на «true»). В языке JavaScript инверсия

записывается при помощи знака восклицания перед пе-
ременной или выражением: «!х» или «!(x > y)». Инверсия
действует на один объект, то есть имеет один операнд.
В приведенной выше задаче, инверсия может быть
использована для проверки условия «не работающих
в банковской сфере». В программе такая запись может
иметь вид «! (profession == ‘banker’)».
Логическое «И» или в английском варианте «AND»
требует два операнда (два условия). Операция записыва-
ется при помощи двойного символа амперсанд «&&». Ре-
зультат операции равен «true» только если все операнды
равны «true». Эту операцию также называют логическим
умножением, поскольку результат «1» («true») достига-
ется, только если два множителя равны «1» (значение
«false» считается равным нулю).
В предложенных выше задачах при помощи логиче-
ского «И», например, будут объединяться условия со-
впадения логина и пароля. То есть логин равен храни-
мому значению И пароль равен хранимому значению.
В программе подобное выражение могло бы иметь вид
«login=="user" && password=="MySecret"».
Логическое «ИЛИ» (в английском варианте «OR»)
также рассчитано на два операнда. Результат операции
равен «false» только если все операнды равны «false». За
это операцию «ИЛИ» сравнивают с логическим сложени-
ем (получить «0» при сложении можно, только если все
слагаемые равны «0»). Программная запись операции
имеет вид двойного «прямого слеша» или так называе-
мого символа «трубы» — «||».

71
 Unit 1. Введение в JavaScript

Операция «ИЛИ» используется для реализации аль-

тернатив. Например, для возможности указать логин
ИЛИ электронную почту. В программном формализ-
ме возможна подобная запись «login=="user" || email==
"[email protected]"».
Логические операции, подобно математическим, мо-
гут состоять из нескольких базовых выражений. Напри-
мер, проверка «логин или почта + пароль» может быть
представлена в виде

(login=="user" || email=="[email protected]") &&

password=="MySecret"

Для логических операций также существует прио-

ритет выполнения. Операция «И» (аналог умножения)
имеет приоритет выше, чем операция «ИЛИ» (аналог сло-
жения). Поэтому в приведенном примере использованы
скобки для правильной композиции условия.
Рассмотрим другие примеры.
Задание: выбрать респондентов, возрастом от 30 до
40 лет.
Решение: уточним, что возраст будет учитываться
включительно (возможно равенство), тогда выражение
будет иметь вид
age>=30 && age<=40

То есть требуется, чтобы возраст был больше 30 И,

в то же время, возраст был меньше 40 (включительно, то
есть с равенством)

72
 Операторы

Задание: выбрать респондентов, возрастом от 30 до

40 лет, имеющих высшее образование и не работающих
в банковской сфере
Решение: к предыдущему выражению нужно доба-
вить условие о высшем образовании при помощи логи-
ческого «И», а также инвертированное условие о работе
в банковской сфере, тоже при помощи «И»
(age>=30 && age<=40) && (education=="higher") && !
(profession == "banker")

В данном выражении некоторые скобки можно убрать,

так как используются операции одного приоритета, одна-
ко расстановка скобок улучшает читаемость выражения,
выделяя его составные части.
Найдите ошибку: мы выводим пользователю сообще-
ние о подтверждение действия: «введите ‘ОК’ для форма-
тирования диска» и принимаем результат ввода в пере-
менную «х». С учетом того, что пользователь мог ввести
«ок», «Ок» или «ОК» пробуем предусмотреть все варианты
ввода (помним — регистр символов имеет значение и все
эти три строки разные). С точки зрения программы, нас
интересует условие для отказа, — если пользователь ввел
что угодно, кроме «ок», «Ок» или «ОК», программа должна
выполнить определенное действие по отмене результата
запроса (форматирование не должно начаться), то есть
условие должно быть истинным, если введенная строка
(х) не совпадает ни с одним из допустимых вариантов.
Правильным ли будет выражение (если нет, то почему?):
(x != 'OK') || (x != 'Ok') || (x != 'ok')

73
 Unit 1. Введение в JavaScript

Анализ. Предположим, пользователь ввел «No». Тог-

да каждое из сравнений даст результат «true», т.к. вве-
денная строка действительно не совпадает ни с одним
из значений. Объединенные логическим «ИЛИ» условия
также приведут к результату «true», что и требуется от
программы.
Предположим, что пользователь ввел «Ок». Тогда пер-
вое сравнение даст «true», второе — «false» (тут совпаде-
ние) и третье — «true». Логическое «ИЛИ» даст в итоге ре-
зультат «true», т.к. хотя бы один из аргументов равен «true».
А это поведение программы неправильное, ввод строки
«Ок» должен привести к итоговому результату «false».
Ошибка заключается в применении логического
«ИЛИ» для соединения условий. Если хотя бы одно из
условий ложно, также ложным должен быть весь резуль-
тат. Таким свойством обладает оператор «И». Правильная
запись условия
(x != 'OK') && (x != 'Ok') && (x != 'ok')

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

74
 Операторы

как-то сохранить и использовать по мере необходимости

в диалогах с пользователем.
Как вы уже знаете из предыдущих разделов, для
хранения данных, которые могут потребоваться во вре-
мя выполнения программы, используются переменные
(англ. — variables). Процесс сохранения результата в пере-
менной называется присваиванием (англ. — assignment).
Оператор присваивания записывается при помощи
знака «=»:
х=7
Слева от оператора указывается переменная, в ко-
торую следует записать данные. Если быть точнее, то
указывается имя переменной. Справа от оператора при-
водятся сами данные.
С обеих сторон от знака «=» можно добавлять пробе-
лы. Для красоты оформления кода это даже рекомендуется
делать. Если идут несколько присваиваний подряд, реко-
мендуется выравнивать их по знаку «=» используя, если
нужно, и по нескольку пробелов: x = 7; x2 = 8; y = 9; y2 = 10.
В правой части инструкции присваивания может на-
ходиться не только конкретное значение, но и выраже-
ние, приводящее к значению в результате вычислений.
Например,
x=1+2*3
В таком случае сначала происходит вычисление вы-
ражения и только после получения его окончательного
результата выполняется присваивание. В выражении
присваивания также допустимо использовать перемен-
ные. Например:
x=1+2*z

75
 Unit 1. Введение в JavaScript

где «z» — некоторая переменная. Более того, в выражении

можно использовать ту же переменную, которая нахо-
дится в левой части инструкции присваивания, если она,
конечно, содержит ранее присвоенное значение. Рассмо-
трим следующий пример кода:
х=1
х = х + 1.
В первой строке переменной «х» присваивается кон-
кретное значение (1). Оно помещается в память, отведен-
ную для переменной «х».
Во второй строке снова указывается операция присва-
ивания, но вместо значения приведено выражение. Значит,
сначала будет произведен расчет этого выражения. На
момент расчета в переменной «х» хранится значение «1»,
присвоенное в предыдущей строке. Оно будет подставлено
в выражение «х + 1», которое приведет к результату «2».
После расчета конечного значения выражения будет
выполнено присваивание, то есть полученный результат
будет перемещен в переменную «х». В результате выпол-
нения второй строки кода значение переменной «х» по-
меняется с «1» на «2».
Следует отметить, что в результате присваивания
новое значение попадает в ту же память, в которой нахо-
дилось старое значение, так как переменная «х» привя-
зывается к одному участку памяти и не меняет его в те-
чение работы всей программы. Вследствие чего новое
значение заменяет собой старое. Из-за этого присваи-
вание часто называют «разрушающим присваиванием»
(англ. — destructive assignment), подчеркивая необрати-

76
 Операторы

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

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

Рисунок 19
Данные, которые нужно сохранить (значение), преоб-
разовываются в двоичный вид с учетом того типа данных,
который имеет операция или значение. Напомним, что
в некоторых случаях указать тип данных можно и для
самого значения, например запись «х=7» задает значение
в виде числа (Number), тогда как запись «x="7"» указывает
на строковое (String) значение результата.
После преобразования двоичное представление ре-
зультата перемещается в ту ячейку памяти, за которую

77
 Unit 1. Введение в JavaScript

отвечает переменная. В приведенном на рисунке примере

число 7 превращается в двоичную запись «0111» и в та-
ком виде записывается в память. Если говорить совсем
точно, то числовой тип данных в JavaScript использует
для хранения 64 бита памяти. То есть число 7 на самом
деле будет содержать 61 ноль в начале битовой записи
и три единицы в конце.
На уровне программы мы не вмешиваемся в описан-
ные процессы и не должны помнить о деталях преобра-
зований, чтобы ими пользоваться. Все эти формальности
скрываются под механизмами оператора присваивания,
упрощая нам основную работу по созданию программы.
Однако следует не забывать, что в JavaScript тип храни-
мых в переменной данных может поменяться в зависи-
мости от полученного результата конкретной операции.
Если после присваивания «х=7» в переменной «х» ока-
жется число 7, то после повторной операции «x="7"» оно
будет заменено на строку «"7"».
Особенности присваивания
Исторически, присваивание было оператором (ин-
струкцией языка), т.к. не имело возвращаемого резуль-
тата, а лишь выполняло описанное выше действие по
сохранению результата в памяти. Однако, с развитием
языков и технологий программирования ситуация из-
менилась. В качестве результата присваивания, уже как
операции, предлагалось два варианта. Первый предпола-
гал возвращать то же значение, которое было присвоено.
Это бы позволило использовать цепную форму запи-
си присваивания «x=y=z=1», т.к. результатом операции

78
 Операторы

«z=1» было бы то же число «1», которое можно поместить

в следующую переменную и так далее по цепочке.
Второй вариант возвращаемого значения предпола-
гался в виде «выталкиваемого» предыдущего значения
переменной, которое перезаписывается. Это позволило
бы сохранить его, если есть такая необходимость. То есть
запись «y=x=1» помещала бы в «х» единицу, а предыду-
щее значение «х» переместила бы в переменную «y».
В конечном итоге предпочтение было отдано перво-
му варианту и запись «x=y=z=1» является допустимой
в JavaScript (попробуйте ввести ее в консоль), как и во
многих других современных языках программирования.
Второй же вариант получил развитие как обменная иди-
ома (англ. copy-and-swap idiom) и нашел широкое приме-
нение в функциях, выполняющих схожее с присваивание
действие — если функция перезаписывает какой-то ре-
зультат, то старое значение возвращается как результат
работы функции.
Наличие возвращаемого значения привело к тому,
что присваивание приобрело статус «операции», оста-
ваясь при этом оператором — инструкцией языка про-
граммирования. Это добавило путаницы к и без того
непростым различиям определений «операции» и «опе-
ратора» — присваивание является и тем, и другим.
Также следует отметить, что в ряде случаев формаль-
но различают два процесса — присваивание и инициа-
лизация. Инициализация — это первичное наделение
переменной значением, обычно, при ее создании. После-
дующие процессы передачи данных на хранение счита-
ются присваиваниями. При внешней схожести процессов

79
 Unit 1. Введение в JavaScript

в некоторых языках программирования для них даже

существуют разные операторы.
Битовые операторы
Напомним, что основным способом хранения ин-
формации в компьютере являются последовательности
бит — единиц и нулей. Также напомним, что основные
операции центрального процессора компьютера могут
лишь преобразовывать одни битовые последовательно-
сти в другие. Для того чтобы использовать такие опера-
ции в собственных программах предусмотрены битовые
операторы.
С одной стороны, эти операции сложны для интуи-
тивного понимания и не имеют простых аналогов в при-
вычной для нас математике. С другой стороны, эти опера-
ции имеют максимальную скорость выполнения, так как
не требуют перевода на «язык процессора» и поддержи-
ваются процессором непосредственно.
Необходимость в битовых операциях возникает край-
не редко. Чаще всего для них существуют более понятные,
хотя и менее эффективные, аналоги. Для языков низкого
уровня, которые общаются с процессором почти напря-
мую, такие операции применяются часто. Для высоко­
уровневых языков, к которым относится Java­Script, об-
ласть применения битовых операций ограничена следу-
ющими моментами:
■■ использование быстродействующих аналогов мате-
матических операций;
■■ желание сэкономить оперативную память;
■■ криптографические преобразования.

80
 Операторы

Рассмотрим особенности битовых операций. Эти опе-

рации рассчитаны на работу с данными, значение которых
может быть либо «0», либо «1». Результат операции так-
же принадлежит этому множеству. Поскольку различных
комбинаций из единиц и нулей не так уж и много, бито-
вые операции пронумерованы и названы собственными
именами. Полный их перечень можно узнать в разделе
математики «дискретная математика», мы же остановимся
на наиболее применимых в программировании случаях.
Пожалуй, одной из самых простых и понятных би-
товых операций является инверсия. Она применяется
к одному операнду и меняет все его биты на противопо-
ложные: ноль на единицу, единицу на ноль. В программе
битовая инверсия записывается символом тильда «~x».
Операция по названию и по смыслу подобна логической
инверсии («!»), рассмотренной в предыдущем разделе,
но, действует не только на логическую переменную, а на
полное ее битовое представление.
Например, выражение «!10» будет вычислено как ло-
гическое, т.к. использован логический оператор инверсии
«!». В результате выражение будет равно «false», т.к. лю-
бое ненулевое число (в данном случае 10) соответствует
значению «true» для типа Boolean.
В случае же использования битового оператора ин-
версии, выражение «~10» приведет к результату «–11»,
получающемуся, если в битовом (двоичном) представ-
лении числа «10» все нули поменять на единицы, а еди-
ницы — на нули (можете проверить это и предыдущее
утверждение, вводя их в консоли браузера). Почему в ре-
зультате инверсии числа «10» получается именно «–11»

81
 Unit 1. Введение в JavaScript

объяснить не так уж и просто, так как придется исполь-

зовать терминологию теории кодирования. Главным
выводом можно сделать то, что смешивать или путать
логические и битовые операции не стоит.
Другие битовые операции принимают два операнда,
то есть работаю с двумя значениями. Одно из них, пусть
«х», может быть «1» либо «0» в второе «у» также. Резуль-
тат выполнения операции «x or y» проще всего предста-
вить в виде «таблицы истинности» этой операции.
y x 0 1
0 0 or 0 0 or 1
1 1 or 0 1 or 1

Таблица позволяет определить результат операции

для всех возможных значений аргументов «х» и «у». По-
скольку эти значения могут быть только «0» или «1»,
основная часть таблицы имеет размер 2×2. В ячейке на
пересечении столбца и строки с нужными значениями
вписывается значение операации (которое тоже ограни-
чено величинами «0» или «1»).
Как несложно убедиться, существует всего 16 различ-
ных способов расставить нули и единицы в таблице разме-
ром 2×2. Это значит, что и функций существует только 16.
Уже упоминалось, что все они имеют собственные назва-
ния и детально изучаются в математике, но для программи-
рования ценность представляют только некоторые из них.
x OR y ( x | y )
y x 0 1
0 0 1
1 1 1

82
 Операторы

x AND y ( x & y )
y x 0 1
0 0 0
1 0 1

x XOR y ( x ^ y )
y x 0 1
0 0 1
1 1 0

Дизъюнкция или битовое «ИЛИ» (англ. — OR) равна

нулю, только если все операнды равны нулю. В соответ-
ствии с синтаксисом JavaScript записывается в виде пря-
мого слеша «x | y».
Конъюнкция или битовое «И» (англ. — AND), нао-
борот, равна единице, только если все операнды равны
единице. Записывается при помощи символа амперсанд:
«x & y».
Операция «исключающее или» (англ. — exclusive or)
более известная как операция «XOR» равна нулю, если
значения операндов одинаковы, и единице — если раз-
личны. Имеет запись «x ^ y».
Приведенные битовые операции подобны по смыслу
логическим операциям, но между ними существует прин-
ципиальная разница. Логические операции применяются
к операндам типа Boolean и имеют такой же результат.

Рисунок 20

83
 Unit 1. Введение в JavaScript

Битовые операции применяются к произвольным

данным и действуют на каждый бит операндов отдельно.
В результате операции также получается новая битовая
последовательность (рис. 20).
К группе битовых операций также относятся опера-
ции битового сдвига. Эти операции применяются уже
не к отдельным битам операндов, а к полной битовой
записи числа. В результате битового сдвига все биты
числа сдвигаются на несколько позиций. Запись «x >>
n» соответствует сдвигу всех бит на n позиций вправо.
При этом сохраняется знак числа (самый левый бит не
сдвигается). Выражение «x >>> n» приводит и к сдвигу
самого левого бита. Сдвиг влево на n позиций записы-
вается как «x << n».
Битовые сдвиги применяются, например, в задачах
последовательной передачи данных, когда возможна пе-
редача только одного бита (например, в радиоканале —
WiFi, или в оптическом кабеле). Для передачи блока дан-
ных последовательно сдвигают его биты и передают их
одним за другим.
Приведем примеры, когда применение битовых опе-
раций может улучшить программный код, увеличивая
скорость выполнения отдельных операций в десятки,
а то и сотни раз:
■■ Умножение на 2 эквивалентно битовому сдвигу
влево на 1 позицию: выражение «x=x*2» приводит
к тому же результату, что и «x=x<<1», умножение на
4, 8, 16 и другие степени двойки также эквивалент-
ны битовым сдвигам на 2, 3 или 4 позиции соответ-
ственно.

84
 Операторы

■■ Полностью аналогично, целочисленное деление на 2

можно заменить на битовый сдвиг вправо.
■■ Проверка на четность числа путем получения остат-
ка от деления (х%2==0) может быть заменена на
проверку последнего бита числа «x&1==0».
Использовать битовые операции следует только тог-
да, когда есть полное понимание их целесообразности.
В остальном же эти операции относятся к программи-
рованию низкого уровня и в программах на JavaScript
вряд ли понадобятся.

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

85
 Unit 1. Введение в JavaScript

Операция / оператор Обозначение

Группировка выражений ()
++
--
Унарные операторы
-
!
Возведение в степень **
Умножение *
деление /
остаток от деления %
Сложение +
вычитание -
<<
Сдвиг битов >>
>>>
<
<=
Отношения
>
>=
==
Равенства, !=
неравенства ===
!==
Битовое «И» &
Битовое исключающее «ИЛИ» ^
Битовое «ИЛИ» |
Логическое «И» &&
Логическое «ИЛИ» ||

В качестве примера в следующей таблицы приведе-

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

86
 Операторы

Выра- Непра- Правиль-

Объяснение
жение вильно но
Приоритет умножения (*) выше, чем
2∙(3+5) 2*3+5 у сложения (+). Будет рассчитано 2*(3+5)
2∙3+5
1
Приоритет деления (/) выше, чем
1/2+3 1
у сложения. Будет рассчитано + 3 1/(2+3)
2+3 2

Операции одного приоритета выпол-

1 няются слева направо. Будет рассчи- 1/2/3 или
1/2*3
2⋅3 1
тано ⋅ 3 1/(2*3)
2

Приоритет степени (**) выше, чем

(2∙3)5 2*3**5 (2*3)**5
у умножения. Будет рассчитано 2∙(3)5
1
Приоритет степени (**) выше, чем
22 2**1/2 у деления. Будет рассчитано
21 2**(1/2)
2

Для иллюстрации роли приоритета в логических

операциях используем рассмотренное ранее выражение
(из раздела «логические операторы»), применяемое для
задачи «выбрать респондентов, возрастом от 30 до 40 лет,
имеющих высшее образование и не работающих в бан-
ковской сфере»
(age>=30 && age<=40) && (education=="higher") && !
(profession == "banker")

и уберем из него скобки, получив

age>=30 && age<=40 && education==

"higher" && !profession == "banker"

Казалось бы, применение одинаковых операций (&&)

не должно влиять на расстановку скобок, однако обратим

87
 Unit 1. Введение в JavaScript

внимание на логическую инверсию «!», приоритет кото-

рой выше, чем у логического «И» (&&). В таком случае,
инверсия будет вычисляться первой, и вместо выражения.
! (profession == "banker")

будет вычислено
(!profession) == "banker"

Что, очевидно, не соответствует условию из постав-

ленной задачи.
Пользуясь приведенной таблицей приоритетов опе-
раций можно оценить результат того или иного выраже-
ния. При наличии сомнений относительно правильности
формулировки выражения всегда можно воспользовать-
ся оператором группировки (скобками), чтобы наверняка
расставить приоритеты операций в выражении.
Оператор typeof
Поскольку типы данных в JavaScript могут менять-
ся в процессе выполнения программы, иногда бывает
необходимо определить текущий тип данных, который
сохранен в некоторой переменной. Как отмечалось
выше, результат операций может существенно меняться
(вплоть до противоположного) если ее операнды будут
того или иного типа.
Чтобы узнать тип данных переменной или результата
выражения применяется оператор «typeof». В качестве
значения оператор возвращает название типа. Например,
выражение «typeof 2» даст результат «number», «typeof
“2”» — «string», «typeof true» — «boolean». И так далее для

88
 Операторы

всех типов данных. Исключением является выражение

«typeof null», результат которого представляет собой «ob-
ject». Это сделано по историческим причинам с целью «об-
ратной совместимости» программ в различных версиях
языка. Проверить, что переменная «х» содержит именно
значение «null» можно строгим сравнением «x===null».
Полученное в результате работы «typeof» название
типа является строковой величиной. Можно убедиться
в этом набрав в консоли «typeof typeof 1», то есть запро-
сить тип данных, возвращаемый выражением «typeof 1».
Для сравнения полученного и ожидаемого типа необхо-
димо название последнего брать в кавычки. То есть для
проверки инициализации переменной «у» вместо «typeof
y == undefined» необходимо использовать выражение
«typeof y == 'undefined'». Последнее условие является од-
ним из самых популярных способов проверки перемен-
ных на предмет наличия в них данных.
Хотя «typeof» является оператором (языковой инструк-
цией), его часто используют в форме функции «typeof(х)».
Это не является ошибкой, т.к. оператор «typeof» восприни-
мает скобки просто как группирующий оператор. Однако,
скобки, во-первых, добавляют лишние символы в код и,
во-вторых, вызывают еще один оператор (группировки).
Поэтому операторная форма записи (без скобок) является
более предпочтительной перед функциональной.

89
 Unit 1. Введение в JavaScript

Задание для самостоятельной работы

1. Предложите имя переменной для хранения данных
о максимальной скорости передачи данных (maxi-
mum data transfer speed).
2. Предложите имя переменной для хранения текущего
дня недели (day of week).
3. Составьте инструкцию, вычисляющую значение
6
выражения 2 + .
1+ 2
4. Составьте выражение, которое истинно при значе-
ниях переменной «х» из диапазона 0–9 и ложно для
других значений (например, х=0 — истина, х=3 —
истина, х=9 — истина, х=–1 — ложь, х=10 — ложь).
5. Составьте выражение, которое истинно при четных
значениях переменной «х» из диапазона 0–10 и ложно
для других значений (например, х=0 — истина, х=3 —
ложь, х=8 — истина, х=–1 — ложь, х=10 — истина,
х=12 — ложь).
6. Составьте инструкции, вычисляющие и определя-
ющие типы данных, следующих выражений: 1+true
(сумма числового и логического значений), '1'+2 (сум-
ма символьного и числового значений), '1'+false (сум-
ма символьного и логического значений).

90
Операторы

91
Unit 1.
Введение в JavaScript

© Денис Самойленко.
© Компьютерная Академия «Шаг», www.itstep.org.

Все права на охраняемые авторским правом фото-, аудио- и видеопро-

изведения, фрагменты которых использованы в материале, принадле-
жат их законным владельцам. Фрагменты произведений используются в
иллюстративных целях в объёме, оправданном поставленной задачей, в
рамках учебного процесса и в учебных целях, в соответствии со ст. 1274
ч. 4 ГК РФ и ст. 21 и 23 Закона Украины «Про авторське право і суміжні
права». Объём и способ цитируемых произведений соответствует
принятым нормам, не наносит ущерба нормальному использованию
объектов авторского права и не ущемляет законные интересы автора
и правообладателей. Цитируемые фрагменты произведений на момент
использования не могут быть заменены альтернативными, не охраня-
емыми авторским правом аналогами, и как таковые соответствуют
критериям добросовестного использования и честного использования.
Все права защищены. Полное или частичное копирование материалов
запрещено. Согласование использования произведений или их фраг-
ментов производится с авторами и правообладателями. Согласованное
использование материалов возможно только при указании источника.
Ответственность за несанкционированное копирование и коммерческое
использование материалов определяется действующим законодатель-
ством Украины.