Зачем учить javascript и где он пригодится

Операторы

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

Арифметические

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

Бинарный плюс объединяет строки. А если одним из операндов является строка, то второй тоже будет конвертирован в строку:

Операторы присваивания

Простые и составные .

Битовые операции

Битовые операторы работают с 32-битными целыми числами на самом низком, побитовом уровне. Подробнее об их использовании можно прочитать на ресурсе MDN и в разделе Побитовые операторы.

Условный оператор

Единственный оператор с тремя параметрами: . Если условие истинно, возвращается , иначе – .

Логические операторы

Логические И , ИЛИ используют так называемое «ленивое вычисление» и возвращают значение, на котором оно остановилось (не обязательно или ). Логическое НЕ конвертирует операнд в логический тип и возвращает инвертированное значение.

Сравнение

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

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

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

Значения и особенные: они равны только друг другу, но не равны ничему ещё.

Операторы сравнения больше/меньше сравнивают строки посимвольно, остальные типы конвертируются в число.

Другие операторы

Существуют и другие операторы, такие как запятая.

Подробности: Базовые операторы, математика, Операторы сравнения, Логические операторы.

Google документы станут полновесными с 1 июня. Пишем скрипт для обхода этого ограничения

Из песочницы

Google изменяет политику хранения данных с 1 июня 2021 года. Вкратце: документы и фото теперь станут полновесными и будут учитываться в общей квоте 15Гб. К тому же, при неактивности аккаунта более двух лет, Google может удалить ваши данные.

Я часто работаю с Google документами, и при активном использовании дисковая квота закончится довольно быстро. Но есть и хорошая новость: документы, созданные до 1 июня 2021 года так и останутся невесомыми, поэтому вы не получите превышение квоты в одночасье.

У меня сразу возникла мысль сделать документов «в запас». Ниже я расскажу, как это можно осуществить, не тратя много времени и сил.

Основы бэкенд

Как уже упоминалось, еще 10 лет назад JS использовался только для фронтенд-разработки. Теперь, благодаря Node.js, JavaScript работает и на серверной стороне.

SSR, CSR, изоморфные приложения

SSR — Server-Side Rendering – формирование страницы на стороне сервера.

CSR — Client Side Rendering – формирование страницы на стороне клиента (в браузере).

Какие проблемы имеются у этих способов?

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

CSR – избавился от проблем скорости SSR (быстрый рендеринг, кеширование), появились одностраничные Single Page Application (SPA).  Но для таких одностраничных приложений CSR SEO оптимизация не годилась, так как весь контент передается клиенту и формируется в браузере (после инициализации начинается загрузка контента), а поисковый робот при запросе на сервер получает лишь пустую страницу.

Node.js

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

Теперь с помощью NodeJS стало возможным написать логику на серверной стороне, и она будет работать и на сервере (при первом обращении посетителя или поискового робота генерировался HTML с контентом страницы) и в браузере (последующие переходы посетителя). Это и называется изоморфное, универсальное приложение.

Схема функционирования простая: при первом заходе посетитель отправляет запрос на сервер NodeJS, который обращается к API-серверу, берёт данные в виде JSON и формирует страницу HTML, возвращая её клиенту. Теперь приложение работает на клиентской стороне, в браузере: при переходе на другие страницы приложение обращается за данными к API-серверу, и отрисовывает страницу уже в браузере.

В React (см. дальше) реализация этой схемы осуществляется разными и сложными путями. В качестве готовых решений есть для этого, например, фреймворк Next.js. В документации Vue (см. дальше) есть целый раздел, посвященный SSR. Там указан фреймворк Nuxt — Vue + SSR, при помощи которого можно быстро создавать универсальные приложения.

Серверы, HTTP, Express.js

Изучив Node, можно более глубже изучить бэкенд-разработку и разобраться в серверах и маршрутизации. Акцент делать на портах, протоколах HTTP. Затем можно просмотреть  Express-Node-библиотеку для обработки запросов.

Асинхронный JavaScript

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

Базы данных, СУБД, схемы, модели и ORM

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

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

Веб-сокеты

Не стоит пренебрегать этой темой. Веб-сокеты очень полезны. В отличие от протокола HTTP WebSocket позволяет работать с двунаправленным потоком данных. Самой распространённой реализацией является библиотека socket.io .

Также нужно разобраться в механизме взаимодействия приложения с пользователем, обработки им входа в учетную запись, отслеживания личности при помощи cookies — небольших текстовых файлов, которые передаются от сервера браузеру по HTTP-запросу. Связь между БД и страницей авторизации использует библиотеку express-session.

Области применения JavaScript

Овладеть основами JavaScript полезно всем, кто касается сферы разработки и продвижения сайтов. В составе любого ресурса есть хотя бы 3-4 скрипта – от счетчика Яндекс.Метрики до формы захвата контактов, виджетов социальных сетей или регистрации аккаунта. Популярность платформы имеет объяснение: язык безопасен, он не предоставляет низкоуровневый доступ к процессам сервера.

Скрипты JS используются в следующих направлениях:

1. клиентская часть любых веб-приложений,
2. интерактивные элементы интерфейсов на AJAX,
3. механизм выдачи Push-уведомлений по модели Comet,
4. программы, совместимые с Android, iOS, Windows Mobile,
5. браузерные операционные системы типа WebOS,
6. макросы для автоматизации рутинных офисных операций,
7. приложения, запускаемые на серверах C, C++, Java, Go.

Отдельно стоит упомянуть пользовательские скрипты в браузерах. Ими реализуются такие фишки, как автоматическое заполнение форм, форматирование контента на странице, скрытие и отражение содержимого в зависимости от региона. Аналогичным образом пишутся расширения, плагины (виджеты) для популярных CMS вроде WordPress, MODX, 1С-Битрикс.

Функции-«колбэки»

Рассмотрим ещё примеры функциональных выражений и передачи функции как значения.

Давайте напишем функцию с тремя параметрами:

Текст вопроса

Функция, которая будет вызываться, если ответ будет «Yes»

Функция, которая будет вызываться, если ответ будет «No»

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

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

Аргументы функции ещё называют функциями-колбэками или просто колбэками.

Ключевая идея в том, что мы передаём функцию и ожидаем, что она вызовется обратно (от англ. «call back» – обратный вызов) когда-нибудь позже, если это будет необходимо. В нашем случае, становится колбэком’ для ответа «yes», а – для ответа «no».

Мы можем переписать этот пример значительно короче, используя Function Expression:

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

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

Функция – это значение, представляющее «действие»

Обычные значения, такие как строки или числа представляют собой данные.

Функции, с другой стороны, можно воспринимать как «действия».

Мы можем передавать их из переменной в переменную и запускать, когда захотим.

Подбери подходящий онлайн курс для изучения JavaScript с нуля

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

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

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

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

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

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

Чего НЕ может JavaScript в браузере?

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

Примеры таких ограничений включают в себя:

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

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

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

• Различные окна/вкладки не знают друг о друге. Иногда одно окно, используя JavaScript, открывает другое окно. Но даже в этом случае JavaScript с одной страницы не имеет доступа к другой, если они пришли с разных сайтов (с другого домена, протокола или порта).

  Это называется «Политика одинакового источника» (Same Origin Policy). Чтобы обойти это ограничение, обе страницы должны согласиться с этим и содержать JavaScript-код, который специальным образом обменивается данными.

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

• JavaScript может легко взаимодействовать с сервером, с которого пришла текущая страница. Но его способность получать данные с других сайтов/доменов ограничена. Хотя это возможно в принципе, для чего требуется явное согласие (выраженное в заголовках HTTP) с удалённой стороной. Опять же, это ограничение безопасности.

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

Переменные

Можно объявить при помощи:

• (константа, т.е. изменению не подлежит)
• (устаревший способ, подробности позже)

Имя переменной может включать:

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

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

Всего существует 8 типов данных:

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

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

Подробности: Переменные, Типы данных.

Численное преобразование

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

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

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

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

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

Правила численного преобразования:

Значение	Преобразуется в…
	Пробельные символы по краям обрезаются. Далее, если остаётся пустая строка, то получаем , иначе из непустой строки «считывается» число. При ошибке результат .

Примеры:

Учтите, что и ведут себя по-разному. Так, становится нулём, тогда как приводится к .

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

Имена переменных

В JavaScript есть два ограничения, касающиеся имён переменных:

1. Имя переменной должно содержать только буквы, цифры или символы и .
2. Первый символ не должен быть цифрой.

Примеры допустимых имён:

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

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

Эти имена являются допустимыми:

Примеры неправильных имён переменных:

Регистр имеет значение

Переменные с именами и – это две разные переменные.

Нелатинские буквы разрешены, но не рекомендуются

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

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

Зарезервированные имена

Существует , которые нельзя использовать в качестве имён переменных, потому что они используются самим языком.

Например: , , и зарезервированы.

Приведённый ниже код даёт синтаксическую ошибку:

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

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

Это плохая практика, которая приводит к ошибке в строгом режиме:

alert()

Метод alert() отображает окошко с кнопкой «OK». В окне выводится сообщение, которое указано в скобках. Например, «Привет, Skillbox!». То есть в данном случае браузер делает ровно то же самое, что перед этим делал сервер сценариев Windows.

Эти примеры тоже можно писать в «Блокноте», только сохранять в файлах с расширением HTML. Например, skillbox.htm.

<html>    <script>       alert(«Привет, Skillbox»)   </script> </html>

Результат:

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

Примеры в каждом разделе

С онлайн редактором «Попробуйте сами» на нашем сайте W3Schools на русском вы можете редактировать исходящий код и просматривать результат.

Пример

Рекомендуется использовать меню уроков

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

Если у вас большой экран (например, монитор компьютера), меню всегда будет слева.

Если у вас маленький экран (например, если вы пользуетесь смартфоном или планшетом), откройте меню, кликнув иконку верхнего меню ☰.

Учитесь на примерах!

Примеры — лучше 1000 слов. Примеры часто легче понять, чем текстовые пояснения.

Этот учебник дополняет все объяснения поясняющими примерами «Попробуйте сами».

Если вы испытаете, как работают все примеры, вы узнаете много нового о JavaScript за очень короткое время!

JavaScript Примеры »

Зачем изучать JavaScript?

JavaScript — это одна из 3 технологий, которые должны выучить и знать все веб-разработчики:

   1. HTML для определения содержания веб-страниц

   2. CSS для создания макета веб-страниц

   3. JavaScript для программирования поведения веб-страниц

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

Необходимо знать, что…

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

Язык JavaScript был создан Бренданом Айхом в 1995 году, который стал стандартом ECMA в 1997 году.
ECMA-262 является официальным названием стандарта. ECMAScript — это официальное название языка.

Вы можете прочитать больше о разных версиях JavaScript в разделе JS Версии.

Скорость обучения

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

Все зависит от ваших целей, желаний и возможностей.

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

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

Единственный способ стать профессиональным программистом — это: Практика. Практика. И ещё практика. Код. Код. И ещё много кода!

Распространённые вопросы

• Как получить JavaScript?
• Где я могу скачать JavaScript?
• Является ли JavaScript бесплатным?

Вам не нужно где-то искать или скачивать JavaScript.

JavaScript уже запущен в вашем браузере на компьютере, планшете или смартфоне.

JavaScript можно использовать бесплатно. Он доступен для всех пользователей.

JavaScript Справочники

W3Schools содержит полный справочник по JavaScript, включая все объекты HTML и браузера.

Справочник содержит примеры всех свойств, методов и событий и постоянно обновляется в соответствии с последними веб-стандартов.

Полный справочник JavaScript »

Онлайн Сертификация W3Schools

Идеальное решение для профессионалов, которым необходимо сбалансировать работу, семью и карьеру.

Больше 25 000 сертификатов уже выдано!

HTML Сертификат
CSS Сертификат
JavaScript Сертификат
Front End Сертификат
Python Сертификат
Наука о данных Сертификат
jQuery Сертификат
SQL Сертификат
PHP Сертификат
Java Сертификат
Bootstrap Сертификат
XML Сертификат
IT-карьера
IT-резюме

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

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

Так тоже будет работать:

В этом случае JavaScript интерпретирует перенос строки как «неявную» точку с запятой. Это называется .

В большинстве случаев новая строка подразумевает точку с запятой. Но «в большинстве случаев» не значит «всегда»!

В некоторых ситуациях новая строка всё же не означает точку с запятой. Например:

Код выведет , потому что JavaScript не вставляет здесь точку с запятой. Интуитивно очевидно, что, если строка заканчивается знаком , значит, это «незавершённое выражение», поэтому точка с запятой не требуется. И в этом случае всё работает, как задумано.

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

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

Пример ошибки

Если вы хотите увидеть конкретный пример такой ошибки, обратите внимание на этот код:

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

А теперь добавим перед кодом и не поставим в конце точку с запятой:

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

Всё исправится, если мы поставим точку с запятой после :

Теперь мы получим сообщение «Теперь всё в порядке», следом за которым будут и .

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

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

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

&& (И)

Оператор И пишется как два амперсанда :

В классическом программировании И возвращает , если оба аргумента истинны, а иначе – :

Пример с :

Как и в ИЛИ, в И допустимы любые значения:

К И применим тот же принцип «короткого цикла вычислений», но немного по-другому, чем к ИЛИ.

Если левый аргумент – , оператор И возвращает его и заканчивает вычисления. Иначе – вычисляет и возвращает правый аргумент.

Например:

Можно передать и несколько значений подряд, при этом возвратится первое «ложное» (на котором остановились вычисления), а если его нет – то последнее:

Итак, оператор вычисляет операнды слева направо до первого «ложного» и возвращает его, а если все истинные – то последнее значение.

Иначе можно сказать, что » запинается на лжи».

Приоритет у больше, чем у

Приоритет оператора И больше, чем ИЛИ , так что он выполняется раньше.

Поэтому в следующем коде сначала будет вычислено правое И: , а уже потом – ИЛИ.

Не используйте вместо

Оператор в простых случаях можно использовать вместо , например:

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

Получился аналог:

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

Аналогия из жизни

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

Например, переменную можно представить как коробку с названием и значением внутри:

Мы можем положить любое значение в коробку.

Мы также можем изменить его столько раз, сколько захотим:

При изменении значения старые данные удаляются из переменной:

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

Повторное объявление вызывает ошибку

Переменная может быть объявлена только один раз.

Повторное объявление той же переменной является ошибкой:

Поэтому следует объявлять переменную только один раз и затем использовать её уже без .

Функциональные языки программирования

Примечательно, что существуют функциональные языки программирования, такие как Scala или Erlang, которые запрещают изменять значение переменной.

В таких языках однажды сохранённое «в коробку» значение остаётся там навсегда. Если нам нужно сохранить что-то другое, язык заставляет нас создать новую коробку (объявить новую переменную). Мы не можем использовать старую переменную.

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

Что такое 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. После этого машинный код запускается и работает достаточно быстро.

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

Symbol.iterator

Мы легко поймём принцип устройства перебираемых объектов, создав один из них.

Например, у нас есть объект. Это не массив, но он выглядит подходящим для .

Например, объект , который представляет собой диапазон чисел:

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

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

Вот полная реализация с пояснениями:

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

• У самого нет метода .
• Вместо этого другой объект, так называемый «итератор», создаётся вызовом , и именно его генерирует значения.

Таким образом, итератор отделён от самого итерируемого объекта.

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

Например, вот так:

Теперь возвращает сам объект : у него есть необходимый метод , и он запоминает текущее состояние итерации в . Короче? Да. И иногда такой способ тоже хорош.

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

Бесконечные итераторы

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

Метод не имеет ограничений, он может возвращать всё новые и новые значения, это нормально.

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

Итого

Объекты, которые можно использовать в цикле , называются итерируемыми.

• Технически итерируемые объекты должны иметь метод .
  • Результат вызова называется итератором. Он управляет процессом итерации.
  • Итератор должен иметь метод , который возвращает объект , где сигнализирует об окончании процесса итерации, в противном случае – следующее значение.
• Метод автоматически вызывается циклом , но можно вызвать его и напрямую.
• Встроенные итерируемые объекты, такие как строки или массивы, также реализуют метод .
• Строковый итератор знает про суррогатные пары.

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

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

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