Тестирование javascript кода с jest для чайников. часть 1

Языки «над» JavaScript

Синтаксис JavaScript подходит не под все нужды. Разные люди хотят иметь разные возможности.

Это естественно, потому что проекты разные и требования к ним тоже разные.

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

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

Примеры таких языков:

• CoffeeScript добавляет «синтаксический сахар» для JavaScript. Он вводит более короткий синтаксис, который позволяет писать чистый и лаконичный код. Обычно такое нравится Ruby-программистам.
• TypeScript концентрируется на добавлении «строгой типизации» для упрощения разработки и поддержки больших и сложных систем. Разработан Microsoft.
• Flow тоже добавляет типизацию, но иначе. Разработан Facebook.
• Dart стоит особняком, потому что имеет собственный движок, работающий вне браузера (например, в мобильных приложениях). Первоначально был предложен Google, как замена JavaScript, но на данный момент необходима его транспиляция для запуска так же, как для вышеперечисленных языков.
• Brython транспилирует Python в JavaScript, что позволяет писать приложения на чистом Python без JavaScript.

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

Конструкции

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

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

Эти две строки полностью эквивалентны:

a = 5
a = 5;

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

Вот так не будет работать:

var a = "длинная 
  строка "

Так как перевод строки подразумевает точку с запятой, и javascript поймет это как

var a = "длинная;
  строка ";

То есть, сообщит о незавершенной строке (unterminated literal) в первой строчке этого примера.

Или, например, следующие два примера кода эквивалентны:

return
  result;

то же самое, что и

return;
result;

и совсем не то же, что

return result

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

Чтобы многострочные операторы работали как надо — перенос строки можно указывать обратным слешем «\», вот так:

var a = "длинная \
  строка "

return \
   result;

Полный список синтаксических конструкций и операторов приведен в справочнике. Они похожи на PHP/C/Java, но многие имеют особенности, знание которых поможет грамотно программировать на javascript.

Блоки задаются фигурными скобками.

Локальные переменные объявляются при помощи var. Причем, в отличие от C/Java, сам по себе блок не задает отдельную область видимости.

var i = 0
{
  var i=5
  alert(i) // 5 
}
alert(i) // тоже 5

Комментарии возможны в двух вариантах и

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

/* 
   многострочные
   комментарии
*/

Основные типы

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

a = 'моя'
b = "строка"

Для конкатенации строк используется оператор .

a = "моя"
b = "строка"
alert(a + ' ' + b)

Более подробно строки и другие базовые типы рассмотрены в статье Базовые типы: Строки, Числа, Boolean.

Javascript — объектный язык. В нем все является объектами. Строки, числа, функции и массивы — все это объекты со своими методами и свойствами. Это надо знать и иметь в виду с самого начала.

Методы объектов вызываются через точку. Например, у строки String есть метод toUpperCase, возвращающий строку в верхнем регистре:

name = "Vasya"

alert( name.toUpperCase() )

Или даже так:

alert( "Vasya".toUpperCase() )

Практически всё в javascript делается при помощи вызова методов различных объектов.

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

В javascript есть два основных способа объявить массив.

Для массива с числовыми индексами обычно используется объект типа Array.

arr = new Array("my", "array")
alert(arr.length)  // 2

Свойство length содержит длину массива, которая всегда равна последнему индексу (в примере выше — это 1) плюс один.

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

arr = 
alert(arr) // "my" <- нумерация от нуля

Новые элементы можно добавить в конец методом push.
Для перебора значений используется цикл .

arr = 
arr.push("третий")

for(var i=0; i<arr.length; i++) {
  alert(arr) 
}

Более подробно массивы с числовыми индексами рассмотрены в статье Массивы .

Для массивов, ключи которых являются строками, используется Object.
Следующая запись задает ассоциативный массив с ключами и :

obj = { 
  n: 1,
  str: "Вася"
}

Для получения свойства объекта используется оператор-аксессор: точка либо квадратные скобки.

obj = {   n: 1,  str: "Вася" }

alert(obj.n) // точка 
alert(obj)

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

var key = "str"
alert(obj)

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

При обращении к отсутствующему свойству возвращается специальное значение undefined.

a = { }  // пустой объект
alert(a.something)  // undefined
alert(a.blabla === undefined)

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

Более подробно о том, как перебирать ключи массива, и о самих объектах — вы можете узнать из статьи Объекты Javascript в примерах.

Javascript и jQuery. Джон Дакетт

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

Преимущества: 

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

Недостатки: 

• довольно дорогое издание (1 600 руб.);
• не подходит для углубленного изучения.

Основы

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

• объектно-ориентированный JS — конструкторы и фабрики, наследование;
• функциональный JS — функции высшего порядка, замыкания, рекурсия;
• спецификации тестов Jasmine;
• основы HTML, CSS и jQuery.

Git

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

• создание и перемещение файлов в каталогах;
• инициализация и коммиты в Git;
• настройка репозиториев в GitHub.

Алгоритмы и структуры данных

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

Изучаем программирование на JavaScript

Эрик Фримен, Элизабет Робсон

«Изучаем программирование на JavaScript»

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

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

Советы по эфективному изучению JavaScript

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

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

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

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

Наихудшее время для обучения – когда вы чувствуете усталость. В такие моменты, главное не заставлять себя – вы не получите ожидаемого результата. Человеческий мозг не может учить что-то бесконечно долго – ему нужно давать перерывы. Занимайтесь по принципу 25\5. Попробуйте на себе практику учить 25 минут и отдыхать 5 минут. Ваш мозг привыкнет к таким равномерным нагрузкам и будет работать максимально продуктивно.

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

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

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

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

← предыдущая
следующая →

Чистый код. Создание, анализ и рефакторинг

Роберт Мартин

«Чистый код. Создание, анализ и рефакторинг»

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

Эта книга — классика и настоящая находка для разработчиков любого уровня

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

Примеры в книге приведены на языке Java, но существует репозиторий c адаптацией кода под JavaScript.

Цикл while()

Цикл while() называют еще циклом с предусловием. Это значит, что вы записываете в скобках после ключевого слова while некое условие, которое возвращает либо , либо . Если возвращается , цикл выполняется, если же , то нет. Синтаксис этого цикла таков:

Цикл while()

JavaScript

while( условие ){
//код цикла
операция 1;
…
операция n;
}

1 2 3 4 5 6

while(условие){ //код цикла операция1; … операцияn; }

Если переводить JavaScript-код на русский язык, то смысл цикла while можно выразить такой фразой: пока (while) выполняется условие, мы будем делать некоторые операции.

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

Использование цикла while для подсчете чисел в заданном диапазоне

JavaScript

<form name=»numbers»>
<p>
<label for=»from»>От числа</label> <input type=»number» min=»1″ max=»50″ value=»1″ id=»from»>
</p>
<p>
<label for=»to»>До числа</label> <input type=»number» min=»1″ max=»50″ value=»5″ id=»to»>
</p>
<p><input type=»button» value=»Подсчитать» id=»countBtn»></p>
</form>
<script>
document.numbers.countBtn.onclick = countNumbers;
function countNumbers () {
let from = +document.numbers.from.value,
to = +document.numbers.to.value;
if(from > to) {
let temp = from;
from = to;
to = temp;
}
let sum = from;
while(to>from){
from++;
sum += from;
}
alert(sum);
}
</script>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<form name=»numbers»> <p> <label for=»from»>Отчисла<label><input type=»number»min=»1″max=»50″value=»1″id=»from»> <p> <p> <label for=»to»>Дочисла<label><input type=»number»min=»1″max=»50″value=»5″id=»to»> <p> <p><input type=»button»value=»Подсчитать»id=»countBtn»><p> <form> <script> document.numbers.countBtn.onclick=countNumbers; functioncountNumbers(){ let from=+document.numbers.from.value, to=+document.numbers.to.value; if(from>to){ let temp=from; from=to; to=temp; } let sum=from; while(to>from){ from++; sum+=from; } alert(sum); } </script>

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

Попробуйте сами:

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

Использование диалогового окна confirm() в цикле while()

JavaScript

const prediction = ;
while (confirm(«Хотите получить предсказание»)) {
let rand = Math.floor(Math.random() * prediction.length);
alert(prediction);
}

1 2 3 4 5 6 7 8

constprediction=»У вас сегодня удачный день»,»Вам нужно задуматься о вашем выборе», «Сегодня вас ждет сюрприз»,»Вы — любимчик удачи»,»Попробуйте еще раз»,»Азартные игры не для вас», «Учите JavaScript — и вас ждет успех»,»Пора сделать зарядку»,»Перерыв на кофе-чай-печеньки сейчас будет кстати», «Пора выбросить мусор из квартиры»,»У вас отличный вкус»,»Нечего заглядываться на чужих жен»,»Пора поработать»; while(confirm(«Хотите получить предсказание»)){ let rand=Math.floor(Math.random()*prediction.length); alert(predictionrand); }

Давайте немножко погадаем:

Получить предсказание

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

Другие технологии. Альтернативы javascript.

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

Java — по сравнению с javascript, java-applet’ы тяжелые, долго загружаются, но могут все. Они, как правило, используются там, где требуется почти-десктоп приложение. Очень сильно java’у потеснила технология Flash.

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

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

• Мощные средства для создания сетевых соединений(сокеты)
• Объекты для работы с мультимедиа: изображениями, аудио, видео
• Внутреннее хранилище объектов, которые не посылаются на сервер при каждом запросе, как куки.
• Удобные графические средства разработки для Flash

Ну и для баланса — недостатки, по сравнению с javascript.

• Отдельный контейнер. Например, нельзя выделить участок текста, частично находящегося в контейнере Flash.
• Плохо индексируется поисковиками. Поисковики ходят по HTML-ссылкам, но(пока?) не кликают по ссылкам внутри Flash-приложения.

Из Flash можно легко вызвать javascript. Наоборот — сложнее, но тоже возможно, поэтому целесообразно знать обе технологии и применять их вместе.

Эти технологии призваны дополнять javascript в области коммуникации и построения интерфейсов.

Пока они все далеки по распространенности от javascript и flash.

• JavaFX — «легкая» надстройка над Java, будет работать только с Java на компьютере клиента.
• XUL — язык описания интерфейсов, удобен если писать планируете только под Mozilla. Также используется для написания десктоп-приложений.
• Silverlight — конкурент Flash от Microsoft на основе .NET. Другими OS, кроме Windows, поддерживается слабо. Не имеет широкого распространения.
• vbscript — попытка Microsoft сделать подобие javascript на основе Visual Basic. Не развивается, сильно уступает по возможностям, и, как следствие — практически не используется в современном веб-программировании.

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

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

Преимущества:

• рассматриваются почти все аспекты JS;
• информация описана четко и по делу;
• много упражнений и примеров.

Недостатки:

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

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

Для создания функций мы можем использовать объявление функции.

Пример объявления функции:

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

Наша новая функция может быть вызвана по её имени: .

Например:

Вызов выполняет код функции. Здесь мы увидим сообщение дважды.

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

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

Расширение типов

Часто может возникнуть необходимость присвоить переменной одного числового типа значение переменной другого числового типа. Как же это сделать?

В Java есть 4 целочисленных типа:

Тип	Размер

Переменной большего размера всегда можно присваивать переменные меньшего размера.

Переменной типа спокойно можно присваивать переменные типа , и . Переменной типа можно присваивать переменные типа и . Ну и переменной типа можно присваивать переменные типа .

Примеры:

Код	Описание
	Этот код отлично скомпилируется.

Такое преобразование, от типа меньшего размера к большему, называется расширением типа.

А что насчет вещественных чисел?

С ними все аналогично — размер имеет значение:

Тип	Размер

Переменной типа можно без проблем присвоить переменную типа . А вот с целочисленными типами интереснее.

Переменной типа можно присвоить переменную любого целочисленного типа. Даже типа , длина которого 8 байт. А переменной типа можно присвоить вообще что угодно: переменную любого целочисленного типа и переменную типа :

Код	Примечание

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

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

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

ИЛИ «||» находит первое истинное значение

Описанная выше логика соответствует традиционной. Теперь давайте поработаем с «дополнительными» возможностями JavaScript.

Расширенный алгоритм работает следующим образом.

При выполнении ИЛИ || с несколькими значениями:

Оператор выполняет следующие действия:

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

Значение возвращается в исходном виде, без преобразования.

Другими словами, цепочка ИЛИ возвращает первое истинное значение или последнее, если такое значение не найдено.

Например:

Это делает возможным более интересное применение оператора по сравнению с «чистым, традиционным, только булевым ИЛИ».

1. Получение первого истинного значения из списка переменных или выражений.

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

   С помощью :

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

2. Сокращённое вычисление.

   Операндами могут быть как отдельные значения, так и произвольные выражения. ИЛИ вычисляет их слева направо. Вычисление останавливается при достижении первого истинного значения. Этот процесс называется «сокращённым вычислением», поскольку второй операнд вычисляется только в том случае, если первого недостаточно для вычисления всего выражения.

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

   В приведённом ниже примере не изменяется:

   Если бы первый аргумент имел значение , то приступил бы к вычислению второго и выполнил операцию присваивания:

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

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

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

Серия «Вы не знаете JavaScript»

Кайл Симпсон

«Типы и грамматические конструкции JS»

В одной из предыдущих книжных подборок мы рассказывали о книге Кайла Симпсона «ES6 и не только», которая отлично подходит для быстрого введения в новые возможности языка JavaScript и является продолжением серии «Вы не знаете JavaScript» (You don’t know JS).

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

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

Книги доступны для изучения в репозитории автора или в русском переводе.

Спецификация

Спецификация ECMA-262 содержит самую глубокую, детальную и формализованную информацию о JavaScript. Она определяет сам язык.

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

Новая версия спецификации появляется каждый год. А пока она не вышла официально, все желающие могут ознакомиться с текущим черновиком на https://tc39.es/ecma262/.

Чтобы почитать о самых последних возможностях, включая те, которые «почти в стандарте» (так называемые «stage 3 proposals»), посетите https://github.com/tc39/proposals.

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

Что такое JavaScript?

Изначально JavaScript был создан, чтобы «сделать веб-страницы живыми».

Программы на этом языке называются скриптами. Они могут встраиваться в HTML и выполняться автоматически при загрузке веб-страницы.

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

Это отличает JavaScript от другого языка – Java.

Почему JavaScript?

Когда JavaScript создавался, у него было другое имя – «LiveScript». Однако, язык Java был очень популярен в то время, и было решено, что позиционирование JavaScript как «младшего брата» Java будет полезно.

Со временем JavaScript стал полностью независимым языком со своей собственной спецификацией, называющейся ECMAScript, и сейчас не имеет никакого отношения к Java.

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

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

Разные движки имеют разные «кодовые имена». Например:

• V8 – в Chrome и Opera.
• SpiderMonkey – в Firefox.
• …Ещё есть «Trident» и «Chakra» для разных версий IE, «ChakraCore» для Microsoft Edge, «Nitro» и «SquirrelFish» для Safari и т.д.

Эти названия полезно знать, так как они часто используются в статьях для разработчиков. Мы тоже будем их использовать. Например, если «функциональность X поддерживается V8», тогда «Х», скорее всего, работает в Chrome и Opera.

Как работают движки?

Движки сложны. Но основы понять легко.

1. Движок (встроенный, если это браузер) читает («парсит») текст скрипта.
2. Затем он преобразует («компилирует») скрипт в машинный язык.
3. После этого машинный код запускается и работает достаточно быстро.

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

Побитовые операторы

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

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

Поддерживаются следующие побитовые операторы:

• AND(и) ( )
• OR(или) ( )
• XOR(побитовое исключающее или) ( )
• NOT(не) ( )
• LEFT SHIFT(левый сдвиг) ( )
• RIGHT SHIFT(правый сдвиг) ( )
• ZERO-FILL RIGHT SHIFT(правый сдвиг с заполнением нулями) ( )

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

Итого

Объявление функции имеет вид:

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

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

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

Именование функций:

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

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