Все права на текст принадлежат автору: Марейн Хавербек.
Это короткий фрагмент для ознакомления с книгой.
Выразительный JavaScriptМарейн Хавербек

Марейн Хавербеке Выразительный JavaScript

Введение

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



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

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

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

За последние 20 лет работа с компьютером стала очень распространённым явлением, и интерфейсы, построенные на языке (а когда-то это был единственный способ общения с компьютером) почти вытеснены графическими. Но они всё ещё есть – если вы знаете, где их искать. Один из таких языков, JavaScript, встроен почти в любой веб-браузер, и потому доступен почти на каждом вычислительном устройстве.

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

О программировании

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

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

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

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

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

Джозеф Вайзенбаум, «Сила компьютеров и Разум людей»
Программа – сложное понятие. Это кусок текста, набранный программистом, это направляющая сила, заставляющая компьютер что-то делать, это данные в памяти компьютера, и при этом она контролирует работу с этой же самой памятью. Аналогии, которые пытаются сравнивать программы со знакомыми нам объектами обычно не справляются с этим. Одна более-менее подходящая – аналогия с машиной. Множество отдельных частей составляют одно целое, и чтобы заставить её работать, нам нужно представлять себе способы, которыми эти части взаимодействуют и что они привносят в работу целой машины.

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

Для некоторых из нас программирование – это увлекательная игра. Программа – это мысленная конструкция. Ничего не стоит её построить, она ничего не весит, и она легко вырастает под нашими пальцами.

Если не быть осторожным, размер и сложность выходят из-под контроля, запутывая даже того, кто её пишет. Это основная проблема программирования: сохранять контроль над программами. Когда программа работает – это прекрасно. Искусство программирования – это умение контролировать сложность. Большая программа находится под контролем, и выполнена просто в своей сложности.

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

Что за враждебность по отношению к богатству программирования – попытки принизить его до чего-то прямолинейного и предсказуемого, наложить табу на всякие странные и прекрасные программы! Ландшафт техник программирования огромен, увлекателен своим разнообразием, и до сих пор изучен мало. Это опасное путешествие, заманивающее и запутывающее неопытного программиста, но это всего лишь означает, что вы должны следовать этим путём осторожно и думать головой. По мере обучения вам всегда будут встречаться новые задачи и новые неизведанные территории. Программисты, не изучающие новое, стагнируют, забывают свою радость, их работа наскучивает им.

Почему язык имеет значение

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

00110001 00000000 00000000

00110001 00000001 00000001

00110011 00000001 00000010

01010001 00001011 00000010

00100010 00000010 00001000

01000011 00000001 00000000

01000001 00000001 00000001

00010000 00000010 00000000

01100010 00000000 00000000

Это программа, складывающая числа от 1 до 10, и выводящая результат (1 + 2 + … + 10 = 55). Она может выполняться на очень простой гипотетической машине. Для программирования первых компьютеров было необходимо устанавливать большие массивы переключателей в нужные позиции, или пробивать дырки в перфокартах и скармливать их компьютеру. Можете представить, какая это была утомительная, подверженная ошибкам процедура. Написание даже простых программ требовало большого ума и дисциплины. Сложные программы были практически немыслимы.

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

Каждая строка указанной программы содержит одну инструкцию. На обычном языке их можно описать так:

1. записать 0 в ячейку памяти 0

2. записать 1 в ячейку памяти 1

3. записать значение ячейки 1 в ячейку 2

4. вычесть 11 из значения ячейки 2

5. если у ячейки 2 значение 0, тогда продолжить с пункта 9.

6. добавить значение ячейки 1 к ячейке 0

7. добавить 1 к ячейке 1

8. продолжить с пункта 3.

9. вывести значение ячейки 0

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

  установить ‘total’ в 0

  установить ‘count’ в 1

[loop]

  установить ‘compare’ в ‘count’

  вычесть 11 из ‘compare’

  если ‘compare’ равно нулю, перейти на [end]

  добавить ‘count’ к ‘total’

  добавить 1 к ‘count’

  перейти на [loop]

[end]

  вывести ‘total’

Вот теперь уже не так сложно понять, как работает программа. Справитесь? Первые две строки назначают двум областям памяти начальные значения. total будет использоваться для подсчёта результата вычисления, а count будет следить за числом, с которым мы работаем в данный момент. Строчки, использующие ‘compare’, наверно, самые странные. Программе нужно понять, не равно ли count 11, чтобы прекратить подсчёт. Так как наша воображаемая машина довольно примитивна, она может только выполнить проверку на равенство переменной нулю, и принять решение о том, надо ли перепрыгнуть на другую строку. Поэтому она использует область памяти под названием ‘compare’, чтобы подсчитать значение count – 11 и принять решение на основании этого значения. Следующие две строки добавляют значение count в счетчик результата и увеличивают count на 1 каждый раз, когда программа решает, что ещё не достигла значения 11.

Вот та же программа на JavaScript:

var total = 0, count = 1;

while (count <= 10) {

  total += count;

  count += 1;

}

console.log(total);

// → 55

Еще несколько улучшений. Главное – нет необходимости вручную обозначать переходы между строками. Конструкция языка while делает это сама. Она продолжает вычислять блок, заключённый в фигурные скобки, пока условие выполняется (count <= 10), то есть значение count меньше или равно 10. Уже не нужно создавать временное значение и сравнивать его с нулём. Это было скучно, и сила языков программирования в том, что они помогают избавиться от скучных деталей.

В конце программы по завершению while к результату применяется операция console.log с целью вывода.

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

console.log(sum(range(1, 10)));

// → 55

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

Хороший язык программирования помогает программисту сообщать компьютеру о необходимых операциях на высоком уровне. Позволяет опускать скучные детали, даёт удобные строительные блоки (while и console.log), позволяет создавать свои собственные блоки (sum и range), и делает простым комбинирование блоков.

Что такое JavaScript?

JavaScript был представлен в 1995 году как способ добавлять программы на веб-страницы в браузере Netscape Navigator. С тех пор язык прижился во всех основных графических браузерах. Он дал возможность появиться современным веб-приложениям – браузерные е-мейл-клиенты, карты, социальные сети. А ещё он используется на более традиционных сайтах для обеспечения интерактивности и всяких наворотов.

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

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

Многие ругают JavaScript и говорят о нём много плохого. И многое из этого – правда. Когда мне первый раз пришлось писать программу на JavaScript, я быстро почувствовал отвращение – язык принимал практически всё, что я писал, при этом интерпретировал это вовсе не так, как я подразумевал. В основном это было из-за того, что я не имел понятия о том, что делаю, но тут есть и проблема: JavaScript слишком либерален. Задумывалось это как облегчение программирования для начинающих. В реальности, это затрудняет розыск проблем в программе, потому что система о них не сообщает.

Гибкость имеет свои преимущества. Она оставляет место для разных техник, невозможных в более строгих языках. Иногда, как мы увидим в главе «модули», её можно использовать для преодоления некоторых недостатков языка. После того, как я по-настоящему изучил и поработал с ним, я научился любить JavaScript.

Вышло уже несколько версий языка JavaScript. ECMAScript 3 была доминирующей, распространённой версией во время подъёма языка, примерно с 2000 до 2010. В это время готовилась амбициозная 4-я версия, в которой было запланировано несколько радикальных улучшений и расширений языка. Однако политические причины сделали изменение живого популярного языка очень сложным, и работа над 4-й версией была прекращена в 2008. Вместо неё вышла менее амбициозная 5-я версия в 2009. Сейчас большинство браузеров поддерживает 5-ю версию, которую мы и будем использовать в книге.

JavaScript поддерживают не только браузеры. Базы данных типа MongoDB and CouchDB используют его в качестве скриптового языка и языка запросов. Есть несколько платформ для десктопов и серверов, наиболее известная из которых Node.js, предоставляющие мощное окружение для программирования вне браузера.

Код, и что с ним делать

Код – это текст, из которого состоят программы. В большинстве глав книги есть код. Чтение и написание кода – это неотъемлемая часть обучения программированию. Старайтесь не просто пробегать глазами примеры – читайте их внимательно и разбирайтесь. Сначала это будет происходить медленно и непонятно, но вы быстро овладеете навыками. То же – насчёт упражнений. Не подразумевайте, что вы в них разобрались, пока не напишете работающий вариант.

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

Вы можете установить Node.js и выполнять программы с его помощью. Также вы можете делать это в консоли браузера. В 12 главе будет объяснено, как встраивать программы в HTML-страницы. Также есть сайты типа jsbin.com, позволяющие просто запускать программы в браузере. На сайте книги есть песочница для кода.

1. Величины, типы и операторы

Под поверхностью машины движется программа. Без усилий, она расширяется и сжимается. Находясь в великой гармонии, электроны рассеиваются и собираются. Формы на мониторе – лишь рябь на воде. Суть остаётся скрытой внутри…

Мастер Юан-Ма, «Книга программирования»
В компьютерном мире есть только данные. Можно читать данные, изменять данные, создавать новые – но кроме данных ничего нет. Все данные хранятся как длинные последовательности бит, этим они сходны между собой.

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

К примеру, номер 13. Вместо десятичной системы, состоящей из 10 цифр, у вас есть двоичная система с двумя цифрами. Значение каждой позиции числа удваивается при движении справа налево. Биты, составляющие число 13, вместе с их весами:

0   0   0   0 1 1 0 1

128 64 32  16 8 4 2 1

Получается двоичное число 00001101, или 8 + 4 + 1, что равно 13.

Величины

Представьте океан бит. Типичный современный компьютер хранит более 30 миллиардов бит в оперативной памяти. Постоянная память (жёсткий диск) обычно ещё на пару порядков объёмнее.



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

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

В этой главе мы знакомимся с атомами программ JavaScript – простые типы величин и операторы, которые к ним применимы.

Числа

Величины числовых типов, это – сюрприз – числа. В программе JavaScript они записываются как

13

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

JavaScript использует фиксированное число бит (64) для хранения численных величин. Число величин, которые можно выразить при помощи 64 бит, ограниченно – то есть и сами числа тоже ограниченны. Для N десятичных цифр количество чисел, которые ими можно записать, равно 10 в степени N. Аналогично, 64 битами можно выразить 2 в 64 степени чисел. Это довольно много.

Раньше у компьютеров памяти было меньше, и тогда для хранения чисел использовали группы из 8 или 16 бит. Было легко случайно превысить максимальное число для таких небольших чисел – то есть, использовать число, которое не помещалось в этот набор бит. Сегодня у компьютеров памяти много, можно использовать куски по 64 бит, и значит, вам надо беспокоиться об этом только, если вы работаете с астрономическими числами.

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

Дроби записываются с помощью точки.

9.81

Очень большие или маленькие числа записываются научной записью с буквой “e” (exponent), за которой следует степень:

2.998e8

Это 2,998 × 108 = 299800000.

Вычисления с целыми числами (которые также называются integer), меньшими, чем 1015, гарантированно будут точными. Вычисления с дробями обычно нет. Так же, как число π (пи) нельзя представить точно при помощи конечного числа цифр, так и многие дроби нельзя представить в случае, когда у нас есть только 64 бита. Плохо, но это мешает в очень специфических случаях. Важно помнить об этом и относиться к дробям как к приближённым значениям.

Арифметика

Главное, что можно делать с числами – это арифметические вычисления. Сложения и умножения используют два числа и выдают третье. Как это записывается в JavaScript:

100 + 4 * 11

Символы + и * называются операторами. Первый – сложение, второй – умножение. Помещаем оператор между двумя величинами и получаем значение выражения.

А в примере получается «сложить 4 и 100 и затем умножить результат на 11», или умножение выполняется сначала? Как вы могли догадаться, умножение выполняется первым. Но как и в математике, это можно изменить при помощи скобок:

(100 + 4) * 11

Для вычитания используется оператор -, а для деления - /.

Когда операторы используются без скобок, порядок их выполнения определяется их приоритетом. У операторов * и / приоритет одинаковый, выше, чем у + и -, которые между собой равны по приоритету. При вычислении операторов с равным приоритетом они вычисляются слева направо:

1 - 2 + 1

вычисляется как (1 - 2) + 1.

Пока беспокоиться о приоритетах не надо. Если сомневаетесь, используйте скобки.

Есть ещё один оператор, который вы не сразу узнаете. Символ % используется для получения остатка. X % Y – остаток от деления X на Y. 314 % 100 даёт 14, и 144 % 12 даёт 0. Приоритет у оператора такой же, как у умножения и деления. Математики для операции нахождения остатка от деления % могут использовать термин сравнение по модулю.

Специальные числа

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

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

Третье число: NaN. Обозначает «not a number» (не число), хотя это величина числового типа. Вы можете получить её после вычислений типа 0 / 0, Infinity – Infinity, или других операций, которые не ведут к точным осмысленным результатам.

Строки

Следующий базовый тип данных – строки. Они используются для хранения текста. Записываются они в кавычках:

"Что посеешь, то из пруда"

'Баба с возу, потехе час'

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

Для заключения специальных символов используется обратный слэш (\). Он обозначает, что символ, идущий за ним, имеет специальное значение – это называется «экранирование символов» (escape character). \” можно заключать в двойные кавычки. \n обозначает перевод строки, \t – табуляцию.

Строка “Между первой и второй\nсимвол будет небольшой” на самом деле будет выглядеть так:

Между первой и второй

символ будет небольшой

Если вам нужно включить в строку обратный слэш, его тоже нужно экранировать: \\. Инструкцию “Символ новой строки — это “\n”” нужно будет написать так:

"Символ новой строки – это \"\\n\""

Строки нельзя делить, умножать и складывать. Однако с ними можно использовать оператор +, который будет соединять их друг с другом. Следующее выражение выдаст слово «соединение»:

"сое" + "ди" + "н" + "ение"

Есть много способов манипуляций со строками, которые мы обсудим в главе 4.

Унарные операторы

Не все операторы записываются символами – некоторые словами. Один из таких операторов – typeof, который выдаёт название типа величины, к которой он применяется.

console.log(typeof 4.5)

// → number

console.log(typeof "x")

// → string

Будем использовать вызов console.log в примерах, когда захотим увидеть результат на экране. Как именно будет выдан результат – зависит от окружения, в котором вы запускаете скрипт.

Предыдущие операторы работали с двумя величинами, однако typeof использует только одну. Операторы, работающие с двумя величинами, называются бинарными, а с одной – унарными. Минус (вычитание) можно использовать и как унарный, и как бинарный.

console.log(- (10 - 2))

// → -8

Булевские величины

Часто вам нужна величина, которая просто показывает одну из двух возможностей – типа «да» и «нет», или «вкл» и «выкл». Для этого в JavaScript есть тип Boolean, у которого есть всего два значения – true и false (правда и ложь).

Сравнения

Один из способов получить булевские величины:

console.log(3 > 2)

// → true

console.log(3 < 2)

// → false

Знаки < и > традиционно обозначают «меньше» и «больше». Это бинарные операторы. В результате их использования мы получаем булеву величину, которая показывает, является ли неравенство верным.

Строки можно сравнивать так же:

console.log("Арбуз" < "Яблоко")

// → true

Строки сравниваются по алфавиту: буквы в верхнем регистре всегда «меньше» букв в нижнем регистре. Сравнение основано на стандарте Unicode. Этот стандарт присваивает номер практически любому символу из любого языка. Во время сравнения строк JavaScript проходит по их символам слева направо, сравнивая номерные коды этих символов.

Другие сходные операторы – это >= (больше или равно), <= (меньше или равно), == (равно), != (не равно).

console.log("Хочется" != "Колется")

// → true

В JavaScript есть только одна величина, которая не равна самой себе – NaN («не число»).

console.log(NaN == NaN)

// → false

NaN – это результат любого бессмысленного вычисления, поэтому он не равен результату какого-то другого бессмысленного вычисления.

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

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

console.log(true && false)

// → false

console.log(true && true)

// → true

Оператор || — логическое «или». Выдаёт true, если одна из величин true.

console.log(false || true)

// → true

console.log(false || false)

// → false

«Нет» записывается при помощи восклицательного знака “!”. Это унарный оператор, который обращает данную величину на обратную. !true получается false, !false получается true.

При использовании логических и арифметических операторов не всегда ясно, когда нужны скобки. На практике вы можете справиться с этим, зная, что у || приоритет ниже всех, потом идёт &&, потом операторы сравнения, потом все остальные. Такой порядок был выбран для того, чтобы в выражениях типа следующего можно было использовать минимальное количество скобок:

1 + 1 == 2 && 10 * 10 > 50

Последний логический оператор не унарный и не бинарный – он тройной. Записывается при помощи вопросительного знака и двоеточия:

console.log(true ? 1 : 2);

// → 1

console.log(false ? 1 : 2);

// → 2

Это условный оператор, у которого величина слева от вопросительного знака выбирает одну из двух величин, разделённых двоеточием. Когда величина слева true, выбираем первое значение. Когда false, второе.

Неопределённые значения

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

Много операторов, которые не выдают значения, возвращают undefined просто для того, чтобы что-то вернуть. Разница между undefined и null появилась в языке случайно, и обычно не имеет значения.

Автоматическое преобразование типов

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

console.log(8 * null)

// → 0

console.log("5" - 1)

// → 4

console.log("5" + 1)

// → 51

console.log("пять" * 2)

// → NaN

console.log(false == 0)

// → true

Когда оператор применяется «не к тому» типу величин, JavaScript втихую преобразовывает величину к нужному типу, используя набор правил, которые не всегда соответствуют вашим ожиданиям. Это называется приведением типов (coercion). В первом выражении null превращается в 0, а “5” становится 5 (из строки – в число). Однако в третьем выражении + выполняет конкатенацию (объединение) строк, из-за чего 1 преобразовывается в “1” (из числа в строку).

Когда что-то неочевидное превращается в число (к примеру, “пять” или undefined), возвращается значение NaN. Последующие арифметические операции с NaN опять получают NaN. Если вы получили такое значение, поищите, где произошло случайное преобразование типов.

При сравнении величин одного типа через ==, легко предсказать, что вы должны получить true, если они одинаковые (исключая случай с NaN). Но когда типы различаются, JavaScript использует сложный и запутанный набор правил для сравнений. Обычно он пытается преобразовать тип одной из величин в тип другой. Когда с одной из сторон оператора возникает null или undefined, он выдаёт true только если обе стороны имеют значение null или undefined.

console.log(null == undefined);

// → true

console.log(null == 0);

// → false

Последний пример демонстрирует полезный приём. Когда вам надо проверить, имеет ли величина реальное значение вместо null или undefined, вы просто сравниваете её с null при помощи == или !=.

Но что, если вам надо сравнить нечто с точной величиной? Правила преобразования типов в булевские значения говорят, что 0, NaN и пустая строка “” считаются false, а все остальные – true. Поэтому 0 == false и “” == false. В случаях, когда вам не нужно автоматическое преобразование типов, можно использовать ещё два оператора: === и !==. Первый проверяет, что две величины абсолютно идентичны, второй – наоборот. И тогда сравнение “” === false возвращает false.

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

Короткое вычисление логических операторов

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

К примеру, || вернёт значение с левой части, когда его можно преобразовать в true – а иначе вернёт правую часть.

console.log(null || "user")

// → user

console.log("Karl" || "user")

// → Karl

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

Оператор && работает сходным образом, но наоборот. Если величина слева преобразовывается в false, он возвращает эту величину, а иначе – величину справа.

Ещё одно важное их свойство – выражение в правой части вычисляется только при необходимости. В случае true || X не важно, чему равно X. Даже если это какое-то ужасное выражение. Результат всегда true и X не вычисляется. Так же работает false && XX просто игнорируется. Это называется коротким вычислением.

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

Итог

Мы рассмотрели четыре типа величин JavaScript: числа, строки, булевские и неопределённые.

Эти величины получаются, когда мы пишем их имена (true, null) или значения (13, “ёпрст”). Их можно комбинировать и изменять при помощи операторов. Для арифметики есть бинарные операторы (+, -, *, / и %), объединение строк (+), сравнение (==, !=, ===, !==, <, >, <=, >=) и логические операторы (&&, ||), а также несколько унарных операторов (- для отрицательного значения, ! для логического отрицания и typeof для определения типа величины).

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

2. Структура программ

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

_why, Why's (Poignant) Guide to Ruby
В этой главе мы начнём заниматься тем, что уже можно назвать программированием. Мы расширим использование языка JavaScript за пределы существительных и фрагментов предложений к более-менее осмысленной прозе.

Выражения и инструкции

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

Фрагмент кода, результатом работы которого является некая величина, называется выражением. Каждая величина, записанная буквально (например, 22 или “психоанализ”) тоже является выражением. Выражение, записанное в скобках, также является выражением, как и бинарный оператор, применяемый к двум выражениям или унарный – к одному.

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

Если выражение – это фрагмент предложения, то инструкция – это предложение полностью. Программа – это просто список инструкций.

Простейшая инструкция – это выражение с точкой с запятой после него. Это — программа:

1;

!false;

Правда, это бесполезная программа. Выражение можно использовать только для получения величины, которая может быть использована в другом выражении, охватывающем это. Инструкция стоит сама по себе и её применение изменяет что-то в мире программы. Она может выводить что-то на экран (изменение в мире), или менять внутреннее состояние машины таким образом, что это повлияет на следующие за ним инструкции. Эти изменения называются побочными эффектами. Инструкции в предыдущем примере просто выдают величины 1 и true, и сразу их выбрасывают. Они не оказывают никакого влияния на мир программы. При выполнении программы ничего заметного не происходит.

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

Переменные

Как же программа хранит внутреннее состояние? Как она его запоминает? Мы получали новые величины из старых, но старые величины это не меняло, а новые нужно было использовать сразу, или же они исчезали. Чтобы захватить и хранить их, JavaScript предлагает нечто под названием «переменная».

var caught = 5 * 5;

И это даёт нам второй вид инструкций. Специальное ключевое слово (keyword) var показывает, что в этой инструкции мы объявляем переменную. За ним идёт имя переменной, и, если мы сразу хотим назначить ей значение – оператор = и выражение.

Пример создаёт переменную под именем caught и использует её для захвата числа, которое получается в результате перемножения 5 и 5.

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

var ten = 10;

console.log(ten * ten);

// → 100

Переменные можно называть любым словом, которое не является ключевым (типа var). Нельзя использовать пробелы. Цифры тоже можно использовать, но не первым символом в названии. Нельзя использовать знаки пунктуации, кроме символов $ и _.

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

var mood = "лёгкое";

console.log(mood);

// → лёгкое

mood = "тяжёлое";

console.log(mood);

// → тяжёлое

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


Переменные как щупальца

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

var vasyaDebt = 140;

vasyaDebt = vasyaDebt - 35;

console.log(vasyaDebt);

// → 105

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

Одна инструкция var может содержать несколько переменных. Определения нужно разделять запятыми.

var one = 1, two = 2;

console.log(one + two);

// → 3

Ключевые и зарезервированные слова

Слова со специальным смыслом, типа var – ключевые. Их нельзя использовать как имена переменных. Также есть несколько слов, «зарезервированных для использования» в будущих версиях JavaScript. Их тоже нельзя использовать, хотя в некоторых средах исполнения это возможно. Полный их список достаточно большой.

break case catch continue debugger default delete do else false finally

for function if implements in instanceof interface let new null package

private protected public return static switch throw true try typeof var

void while with yield this

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

Окружение

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

Функции

Многие величины из стандартного окружения имеют тип function (функция). Функция – отдельный кусочек программы, который можно использовать вместе с другими величинами. К примеру, в браузере переменная alert содержит функцию, которая показывает небольшое окно с сообщением. Используют его так:

alert("С добрым утром!");


Диалог alert

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

Функция console.log

Функция alert может использоваться как средство вывода при экспериментах, но закрывать каждый раз это окно вам скоро надоест. В прошлых примерах мы использовали функцию console.log для вывода значений. Большинство систем JavaScript (включая все современные браузеры и Node.js) предоставляют функцию console.log, которая выводит величины на какое-либо устройство вывода. В браузерах это консоль JavaScript. Эта часть браузера обычно скрыта – большинство браузеров показывают её по нажатию F12, или Command-Option-I на Маке. Если это не сработало, поищите в меню “web console” или “developer tools”.

В примерах этой книги результаты вывода показаны в комментариях:

var x = 30;

console.log("the value of x is", x);

// → the value of x is 30

Хотя в именах переменных нельзя использовать точку – она, очевидно, содержится в названии console.log. Это оттого, что console.log – не простая переменная. Это выражение, возвращающее свойство log переменной console. Мы поговорим об этом в главе 4.

Возвращаемые значения

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

console.log(Math.max(2, 4));

// → 4

Когда функция производит значение, говорят, что она возвращает значение. Всё, что производит значение – это выражение, то есть вызовы функций можно использовать внутри сложных выражений. К примеру, возвращаемое функцией Math.min (противоположность Math.max) значение используется как один из аргументов оператора сложения:

console.log(Math.min(2, 4) + 100);

// → 102

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

prompt и confirm

Окружение браузера содержит другие функции, кроме alert, которые показывают всплывающие окна. Можно вызвать окно с вопросом и кнопками OK/Cancel при помощи функции confirm. Она возвращает булевское значение – true, если нажато OK, и false, если нажато Cancel.

confirm("Ну что, поехали?");



Функцию prompt можно использовать, чтобы задать открытый вопрос. Первый аргумент – вопрос, второй – текст, с которого пользователь начинает. В диалоговое окно можно вписать строку текста, и функция вернёт его в виде строки.

prompt("Расскажи мне всё, что знаешь.", "...");



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

Управление порядком выполнения программы

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

var theNumber = Number(prompt("Выбери число", ""));

alert("Твоё число – квадратный корень из " + theNumber * theNumber);

Функция Number преобразовывает величину в число. Нам это нужно, потому что prompt возвращает строку. Есть сходные функции String и Boolean, преобразующие величины в соответствующие типы.

Простая схема прямого порядка исполнения программы:


Условное выполнение

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



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

var theNumber = prompt("Выбери число ", "");

if (!isNaN(theNumber))

  alert("Твоё число – квадратный корень из " +  theNumber * theNumber);

Теперь, введя «сыр», вы не получите вывод.

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

Функция isNaN – стандартная функция JavaScript, которая возвращает true, только если её аргумент – NaN (не число). Функция Number возвращает NaN, если задать ей строку, которая не представляет собой допустимое число. В результате, условие звучит так: «выполнить, если только theNumber не является не-числом».

Часто нужно написать код не только для случая, когда выражение истинно, но и для случая, когда оно ложно. Путь с вариантами – это вторая стрелочка диаграммы. Ключевое слово else используется вместе с if для создания двух раздельных путей выполнения.

var theNumber = Number(prompt("Выбери число", ""));

if (!isNaN(theNumber))

  alert("Твоё число – квадратный корень из " + theNumber * theNumber);

else

  alert("Ну ты что число-то не ввёл?");

Если вам нужно больше разных путей, можно использовать несколько пар if/else по цепочке.

var num = Number(prompt("Выбери число", "0"));


if (num < 10)

  alert("Маловато");

else if (num < 100)

  alert("Нормально");

else

  alert("Многовато");

Программа проверяет, действительно ли num меньше 10. Если да – выбирает эту ветку, и показывает «Маловато». Если нет, выбирает другую – на которой ещё один if. Если следующее условие выполняется, значит номер будет между 10 и 100, и выводится «Нормально». Если нет – значит, выполняется последняя ветка.

Последовательность выполнения примерно такая:


Циклы while и do

Представьте программу, выводящую все чётные числа от 0 до 12. Можно записать её так:

console.log(0);

console.log(2);

console.log(4);

console.log(6);

console.log(8);

console.log(10);

console.log(12);

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



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

var number = 0;

while (number <= 12) {

  console.log(number);

  number = number + 2;

}

// → 0

// → 2

//   … и т.д.

Инструкция, начинающаяся с ключевого слова while – это цикл. За while следует выражение в скобках, и затем инструкция (тело цикла) – так же, как у if. Цикл выполняет инструкцию, пока выражение выдаёт истинный результат.

В цикле нам нужно выводить значение и прибавлять к нему. Если нам нужно выполнять в цикле несколько инструкций, мы заключаем его в фигурные скобки { }. Фигурные скобки для инструкций – как круглые скобки для выражений. Они группируют их и превращают в единое. Последовательность инструкций, заключённая в фигурные скобки, называется блоком.

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

Переменная number показывает, как переменная может отслеживать прогресс программы. При каждом повторении цикла number увеличивается на 2. Перед каждым повторением оно сравнивается с 12, чтобы понять, сделала ли программа всё, что требовалось.

Для примера более полезной работы мы можем написать программу вычисления 2 в 10 степени. Мы используем две переменные: одну для слежения за результатом, а вторую – для подсчёта количества умножений. Цикл проверяет, достигла ли вторая переменная 10, и затем обновляет обе.

var result = 1;

var counter = 0;

while (counter < 10) {

  result = result * 2;

  counter = counter + 1;

}

console.log(result);

// → 1024

Можно начинать counter с 1 и проверять его на <=10, но по причинам, которые станут ясны далее, всегда лучше начинать счётчики с 0.

Цикл do похож на цикл while. Отличается только в одном: цикл do всегда выполняет тело хотя бы один раз, а проверяет условие после первого выполнения. Поэтому и тестируемое выражение записывают после тела цикла:

do {

  var name = prompt("Who are you?");

} while (!name);

console.log(name);

Эта программа заставляет ввести имя. Она спрашивает его снова и снова, пока не получит что-то кроме пустой строки. Добавление ! превращает значение в булевское и затем применяет логическое отрицание, а все строки, кроме пустой, преобразуются в булевское true.

Отступы в коде

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

Циклы for

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

Поскольку это такой частый случай, в JavaScript есть вариант покороче, цикл for.

for (var number = 0; number <= 12; number = number + 2)

  console.log(number);

// → 0

// → 2

//   … и т.д.

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

Скобки после for содержат две точки с запятой, разделяя инструкцию на три части. Первая инициализирует цикл, обычно задавая начальное значение переменной. Вторая – выражение проверки необходимости продолжения цикла. Третья – обновляет состояние после каждого прохода. В большинстве случаев такая запись более короткая и понятная, чем while.

Вычисляем 210 при помощи for:

var result = 1;

for (var counter = 0; counter < 10; counter = counter + 1)

  result = result * 2;

console.log(result);

// → 1024

Хотя я не писал фигурных скобок, я отделяю тело цикла пробелами.

Выход из цикла

Дождаться, пока условие цикла не станет ложным – не единственный способ закончить цикл. Специальная инструкция break приводит к немедленному выходу из цикла.

В следующем примере мы покидаем цикл, когда находим число, большее 20 и делящееся на 7 без остатка.

for (var current = 20; ; current++) {

  if (current % 7 == 0)

    break;

}

console.log(current);

// → 21

Конструкция for не имеет проверочной части – поэтому цикл не остановится, пока не сработает инструкция break.

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

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

Ключевое слово continue также влияет на исполнение цикла. Когда это слово встречается в цикле, он немедленно переходит на следующую итерацию.

Короткое обновление переменных

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

counter = counter + 1;

В JavaScript есть для этого короткая запись:

counter += 1;

Подобные записи работают для многих других операторов, к примеру result *= 2 для удвоения, или counter -= 1 для обратного отсчёта.

Это позволяет нам сократить программу вывода чётных чисел:

for (var number = 0; number <= 12; number += 2)

  console.log(number);

Для counter += 1 и counter -= 1 есть ещё более короткие записи: counter++ и counter--.

Работаем с переменными при помощи switch

Часто код выглядит так:

if (variable == "value1") action1();

else if (variable == "value2") action2();

else if (variable == "value3") action3();

else defaultAction();

Существует конструкция под названием switch, которая упрощает подобную запись. К сожалению, синтаксис JavaScript (заимствованный из языков C и Java)в этом случае довольно странный – часто цепочка if/else выглядит лучше. Пример:

switch (prompt("Как погодка?")) {

  case "дождь":

    console.log("Не забудь зонт.");

    break;

  case "снег":

    console.log("Блин, мы в России!");

    break;

  case "солнечно":

    console.log("Оденься полегче.");

  case "облачно":

    console.log("Иди гуляй.");

    break;

  default:

    console.log("Непонятная погода!");

    break;

}

В блок switch можно поместить любое количество меток case. Программа перепрыгивает на метку, соответствующую значению переменной в switch, или на метку default, если подходящих меток не найдено. После этого инструкции исполняются до первой инструкции break – даже если мы уже прошли другую метку. Иногда это можно использовать для исполнения одного и того же кода в разных случаях (в обоих случаях «солнечно» и «облачно» программа порекомендует пойти погулять). Однако, очень легко забыть запись break, что приведёт к выполнению нежелательного участка кода.

Регистр имён

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

fuzzylittleturtle

fuzzy_little_turtle

FuzzyLittleTurtle

fuzzyLittleTurtle

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

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

Комментарии

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

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

var accountBalance = calculateBalance(account);

// Издалека долго

accountBalance.adjust();

// Течёт река Волга

var report = new Report();

// Течёт река Волга

addToReport(accountBalance, report);

// Конца и края нет

Комментарий продолжается только до конца строки. Код между символами /* и */ будет игнорироваться вместе с возможными переводами строки. Это подходит для включения целых информационных блоков в программу:

/*

Этот город – самый лучший

Город на Земле.

Он как будто нарисован

Мелом на стене.

*/

var myCity = 'Челябинск';

Итог

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

Записывая инструкции подряд, мы получаем программу, которая выполняется сверху вниз. Вы можете изменять этот поток выполнения, используя условные (if, else и switch) операторы и операторы цикла (while, do и for).

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

Функции – особые переменные, включающие части программы. Их можно вызвать командой functionName(argument1, argument2). Такой вызов – это выражение и может выдавать значение.

Упражнения

Каждое упражнение начинается с описания задачи. Прочтите и постарайтесь выполнить. В сложных ситуациях обращайтесь к подсказкам. Готовые решения задач можно найти на сайте книги eloquentjavascript.net/code/. Чтобы обучение было эффективным, не заглядывайте в ответы, пока не решите задачу сами, или хотя бы не попытаетесь её решить достаточно долго для того, чтобы у вас слегка заболела голова. Там же можно писать код прямо в браузере и выполнять его.

Треугольник в цикле

Напишите цикл, который за 7 вызовов console.log выводит такой треугольник:

#

##

###

####

#####

######

#######

Будет полезно знать, что длину строки можно узнать, приписав к переменной .length.

var abc = "abc";

console.log(abc.length);

// → 3

FizzBuzz

Напишите программу, которая выводит через console.log все числа от 1 до 100, с двумя исключениями. Для чисел, нацело делящихся на 3, она должна выводить "Fizz", а для чисел, делящихся на 5 (но не на 3) – "Buzz".

Когда сумеете, исправьте её так, чтобы она выводила "FizzBuzz" для всех чисел, которые делятся и на 3, и на 5.

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

Шахматная доска

Напишите программу, создающую строку, содержащую решётку 8×8, в которой линии разделяются символами новой строки. На каждой позиции либо пробел, либо #. В результате должна получиться шахматная доска.

# # # #

 # # # #

# # # #

 # # # #

# # # #

 # # # #

# # # #

 # # # #

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

3. Функции

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

Дональд Кнут
Вы уже видели вызовы функций, таких как alert. Функции – это хлеб с маслом программирования на JavaScript. Идея оборачивания куска программы и вызова её как переменной очень востребована. Это инструмент для структурирования больших программ, уменьшения повторений, назначения имён подпрограммам, и изолирование подпрограмм друг от друга.

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

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

Определение функции

Определение функции – обычное определение переменной, где значение, которое получает переменная, является функцией. Например, следующий код определяет переменную square, которая ссылается на функцию, подсчитывающую квадрат заданного числа:

var square = function(x) {

  return x * x;

};


console.log(square(12));

// → 144

Функция создаётся выражением, начинающимся с ключевого слова function. У функций есть набор параметров (в данном случае, только x), и тело, содержащее инструкции, которые необходимо выполнить при вызове функции. Тело функции всегда заключают в фигурные скобки, даже если оно состоит из одной инструкции.

У функции может быть несколько параметров, или вообще их не быть. В следующем примере makeNoise не имеет списка параметров, а у power их целых два:

var makeNoise = function() {

  console.log("Хрясь!");

};


makeNoise();

// → Хрясь!


var power = function(base, exponent) {

  var result = 1;

  for (var count = 0; count < exponent; count++)

    result *= base;

  return result;

};


console.log(power(2, 10));

// → 1024

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

Параметры и область видимости

Параметры функции – такие же переменные, но их начальные значения задаются при вызове функции, а не в её коде.

Важное свойство функций в том, что переменные, созданные внутри функции (включая параметры), локальны внутри этой функции. Это означает, что в примере с power переменная result будет создаваться каждый раз при вызове функции, и эти отдельные её инкарнации никак друг с другом не связаны.

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

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

var x = "outside";


var f1 = function() {

  var x = "inside f1";

};

f1();

console.log(x);

// → outside


var f2 = function() {

  x = "inside f2";

};

f2();

console.log(x);

// → inside f2

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

Вложенные области видимости

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

К примеру, следующая довольно бессмысленная функция содержит внутри ещё две:

var landscape = function() {

  var result = "";

  var flat = function(size) {

    for (var count = 0; count < size; count++)

      result += "_";

  };

  var mountain = function(size) {

    result += "/";

    for (var count = 0; count < size; count++)

      result += "'";

    result += "\\";

  };


  flat(3);

  mountain(4);

  flat(6);

  mountain(1);

  flat(1);

  return result;

};


console.log(landscape());

// → ___/''''\______/'\_

Функции flat и mountain видят переменную result, потому что они находятся внутри функции, в которой она определена. Но они не могут видеть переменные count друг друга, потому что переменные одной функции находятся вне области видимости другой. А окружение снаружи функции landscape не видит ни одной из переменных, определённых внутри этой функции.

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

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

var something = 1;

{

  var something = 2;

  // Делаем что-либо с переменной something...

}

// Вышли из блока...

Но something внутри блока – это та же переменная, что и снаружи. Хотя такие блоки и разрешены, имеет смысл использовать их только для команды if и циклов.

Если это кажется вам странным – так кажется не только вам. В версии JavaScript 1.7 появилось ключевое слово let, которое работает как var, но создаёт переменные, локальные для любого данного блока, а не только для функции.

Функции как значения

Имена функций обычно используют как имя для кусочка программы. Такая переменная однажды задаётся и не меняется. Так что легко перепутать функцию и её имя.

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

var launchMissiles = function(value) {

  missileSystem.launch("пли!");

};

if (safeMode)

  launchMissiles = function(value) {/* отбой */};

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

Объявление функций

Есть более короткая версия выражения “var square = function…”. Ключевое слово function можно использовать в начале инструкции:

function square(x) {

  return x * x;

}

Это объявление функции. Инструкция определяет переменную square и присваивает ей заданную функцию. Пока всё ок. Есть только один подводный камень в таком определении.

console.log("The future says:", future());


function future() {

  return "We STILL have no flying cars.";

} ...



Все права на текст принадлежат автору: Марейн Хавербек.
Это короткий фрагмент для ознакомления с книгой.
Выразительный JavaScriptМарейн Хавербек