Основы JavaScript
JavaScript – это язык программирования, который добавляет интерактивность на ваш веб-сайт (например: игры, отклик при нажатии кнопок или при вводе данных в формы, динамические стили, анимация). Эта статья поможет вам начать работать с этим захватывающим языком и даст вам представление о том, на что он способен.
Что такое JavaScript на самом деле?
JavaScript («JS» для краткости) — это полноценный динамический язык программирования, который применяется к HTML документу, и может обеспечить динамическую интерактивность на веб-сайтах. Его разработал Brendan Eich, сооснователь проекта Mozilla, Mozilla Foundation и Mozilla Corporation.
JavaScript невероятно универсален и дружелюбен к новичкам. Обладая большим опытом, вы сможете создавать игры, анимированную 2D и 3D графику, полномасштабные приложения с базами данных и многое другое!
JavaScript сам по себе довольно компактный, но очень гибкий. Разработчиками написано большое количество инструментов поверх основного языка JavaScript, которые разблокируют огромное количество дополнительных функций с очень небольшим усилием. К ним относятся:
Поскольку эта статья должна быть только лёгким введением в JavaScript, мы не собираемся путать вас на этом этапе, подробно рассказывая о том, какая разница между основным языком JavaScript и различными инструментами, перечисленными выше. Вы можете подробно изучить все это позже, в нашей учебной области JavaScript и в остальной части MDN.
Ниже мы познакомим вас с некоторыми аспектами основного языка, и вы также будете играть с несколькими функциями API браузера. Веселитесь!
Пример «hello world»
Предыдущий раздел звучит очень многообещающе, и это на самом деле так — JavaScript является одной из самых перспективных веб-технологий, и когда вы освоитесь и начнёте использовать его, ваши веб-сайты перейдут в новое измерение мощи и креативности.
Тем не менее, с JavaScript немного более сложно освоиться, чем с HTML и CSS. Вам придётся начать с малого, продолжая изучение небольшими шагами. Для начала мы покажем вам, как добавить некоторые основы JavaScript на вашу страницу, чтобы создать «hello world!» пример (стандарт в начальных примерах программирования).
Важно: Если вы не следили за остальным нашим курсом, скачайте этот пример кода и используйте его в качестве стартовой точки.
JS-гайд: основные концепции JavaScript с примерами кода
Гайд по принципу Парето: 20% языка, которые нужны вам в 80% случаев. Только основные концепции JavaScript с примерами кода.
С момента появления JavaScript 20 лет назад он прошел долгий путь от скромного инструмента для простеньких анимаций до первой десятки рейтинга Tiobe.
Это язык с высоким уровнем абстракции, который позволяет сосредоточиться на коде, а не на низкоуровневой реализации программы. Он имеет слабую динамическую типизацию и поддерживает различные парадигмы программирования.
Версии и стандарты
Язык JavaScript реализует стандарт ECMAScript, поэтому название его версий начинается с букв ES: ES6, ES2016, ES2018 и так далее. Версии имеют порядковый номер, а также нумеруются по году релиза. На данный момент последняя утвержденная версия – ES2017, он же ES8.
За развитие языка отвечает комитет TC39. Каждая новая фича должна пройти несколько этапов от предложения до стандарта.
Стайлгайды
Чтобы JavaScript-код был чистым и аккуратным, следует выработать систему соглашений и строго их придерживаться. Удобно использовать готовые стайлгайды, например, от Google или AirBnb.
Переменные
Нельзя использовать в качестве имен зарезервированные слова языка:
Выражения
Выражения – это структурные единицы кода, которые можно вычислить и преобразовать в значение.
Примитивные типы данных
Числа
Все числа в JavaScript (даже целые) имеют тип float (число с плавающей точкой). Мы подготовили отдельную подробную статью об особенностях чисел и математических методах в JavaScript.
Строки
Строки – это последовательность символов в одинарных или двойных кавычках. Принципиальной разницы между ними нет.
Для конкатенации строк используется оператор + :
Строку можно заполнить символами до определенной длины (с начала или с конца):
В ES6 появился новый синтаксис для создания строк, допускающий интерполяцию выражений и многострочность:
Логические значения
Логические значения true и false используются в сравнениях, условиях и циклах. Все остальные типы данных могут быть приведены к логическому значению.
undefined
undefined означает, что переменная неинициализирована и не имеет значения.
Функции
Функция – это самостоятельный блок JavaScript-кода, который можно повторно использовать в программе. Особенность функций в том, что их можно вызывать, передавать им аргументы и получать некоторое новое значение.
В концепции JavaScript функции являются объектами, а значит могут иметь собственные свойства и методы.
Функция может являться аргументом или возвращаемым значением другой функции, а также быть помещенной в переменную.
Параметры
С версии ES6 функции поддерживают параметры по умолчанию:
А в списке параметров можно оставлять замыкающую запятую:
Возвращаемое значение
Замыкания
Эффект замыканий основан на том, что в концепции JavaScript области видимости ограничены функциями. Это сложная тема, которую, тем не менее, необходимо понять для успешной работы. Мы посвятили ей большой отдельный материал (часть 1, часть 2).
Стрелочные функции
В ES6 появился новый вид функций, который полностью изменил вид JS-кода. На первый взгляд они очень просты:
Immediately Invoked Function Expressions – функции, которые выполняются сразу же после объявления.
Генераторы
Особые функции, работу которых можно приостановить с помощью ключевых слов yield и возобновить позже. Это позволяет использовать совершенно новые концепции JavaScript-программирования.
Поймите концепции JavaScript на примере объяснений или задач.
Массивы
Массивы позволяют организовать несколько различных элементов в коллекцию и предоставляют множество удобных методов для работы с ними.
Объекты
В ES2015 объектные литералы получили новые возможности:
Получение ключей и значений объекта
Циклы
for-each
do-while
while
for-in
for-of
Сочетает лаконичность метода массивов forEach с возможностью прерывания цикла.
Деструктуризация
Спред-оператор
Дает возможность развернуть массив, объект или строку на элементы:
Деструктурирующее присваивание
Дает возможность извлечь из объекта нужные значения и поместить их в именованные переменные:
В ООП-концепции JavaScript главное место занимают прототипы.
Прототипное наследование
Классы
Прототипное наследование весьма своеобразно, поэтому стандарт ES2015 ввел синтаксический сахар для классов, так что теперь JavaScript очень похож на другие объектно-ориентированные языки.
Для свойств класса можно создавать геттеры и сеттеры:
Исключения
Если при выполнении кода возникает неожиданная проблема, JavaScript выбрасывает исключение. Можно создавать исключения самостоятельно с помощью ключевого слова throw :
События
В браузерном JavaScript действует событийная модель программирования. Нужное событие отслеживается и обрабатывается с помощью специальной функции.
Каждое событие представлено объектом со множеством свойств и распространяется на веб-странице в три стадии:
Установить обработчик можно тремя способами:
Основные браузерные события вы можете найти здесь.
Цикл событий
JavaScript-код работает в однопоточном режиме, то есть в один момент происходит только одно действие, а порядок этих действий определяется циклом событий. Его особенности устанавливаются средой выполнения, но в целом суть одинакова: на каждой итерации сначала выполняется синхронный код, а затем обработчики произошедших событий.
Асинхронность
Для более глубокого понимания темы мы подготовили материал по основным концепциям асинхронного программирования.
Коллбэки
Исторически асинхронность в JavaScript обеспечивалась с помощью обратных вызовов:
Однако при большом уровне вложенности код превращался в настоящий кошмар – ад коллбэков.
Промисы
Промисы были созданы, чтобы избавиться от этой вложенности. Вот, что они могут:
Основы работы с промисами:
Асинхронные функции
Сочетание промисов и генераторов – асинхронная абстракция более высокого уровня и с более простым синтаксисом.
Асинхронные функции легко объединять в цепочки:
Таймеры
Таймеры – один из способов асинхронного выполнения кода.
Модули
До ES2015 было по крайней мере три конкурирующих стандарта модулей: AMD, RequireJS и CommonJS, но теперь появился единый формат.
Файл модуля загружается на страницу как обычный скрипт со специальным атрибутом. Для браузеров, которые не поддерживают модули, используйте фоллбэк.
Импорт модуля осуществляется с помощью директивы import :
А экспорт с помощью слова export :
Платформа Node.js продолжает использовать модули CommonJS.
Разделенная память и атомарные операции
Для создания многопоточных программ в браузере используются веб-воркеры и специальный протокол обмена сообщениями через события. В ES2017 можно создать массив общей памяти между веб-воркерами и их создателем, используя SharedArrayBuffer.
Мы заранее не знаем, сколько времени займет запись в разделенную память, поэтому следует использовать атомарные операции.
Подробности вы можете найти в спецификации предложения.
ES2018
Стандарт ES2018 вводит несколько новых языковых фич.
Асинхронная итерация
Новый цикл for-await-of позволяет асинхронно перебирать свойства итерируемого объекта:
Эта конструкция может быть использована только внутри асинхронных функций.
Promise.prototype.finally
Позволяет запускать определенный код независимо от успешного или неудачного завершения цепочки промисов.
Улучшение регулярных выражений
Опережающие (lookahead) и ретроспективные (lookbehind) проверки
Паттерны для символов Юникода (и его отрицание)
Любой символ юникода имеет набор свойств, которые вы можете поместить в круглых скобках для проверки.
Подробнее обо всех свойствах вы можете прочитать в самом предложении.
Именованные группы захвата
Флаг s
Руководство по JavaScript, часть 1: первая программа, особенности языка, стандарты
Недавно мы провели опрос, посвящённый целесообразности перевода этого руководства по JavaScript. Как оказалось, около 90% проголосовавших отнеслись к данной идее положительно. Поэтому сегодня публикуем первую часть перевода.
Это руководство, по замыслу автора, рассчитано на тех, кто уже немного знаком JavaScript и хочет привести свои знания в порядок а также узнать о языке что-то новое. Мы решили немного расширить аудиторию этого материала, включить в неё тех, кто совершенно ничего не знает о JS, и начать его с написания нескольких вариантов «Hello, world!».
Hello, world!
Программа, которую по традиции называют «Hello, world!», очень проста. Она выводит куда-либо фразу «Hello, world!», или другую подобную, средствами некоего языка.
JavaScript — это язык, программы на котором можно выполнять в разных средах. В нашем случае речь идёт о браузерах и о серверной платформе Node.js. Если до сих пор вы не написали ни строчки кода на JS и читаете этот текст в браузере, на настольном компьютере, это значит, что вы буквально в считанных секундах от своей первой JavaScript-программы.
Этот текст можно ввести с клавиатуры, можно скопировать и вставить его в консоль. Результат будет одним и тем же, но, если вы учитесь программировать, рекомендуется вводить тексты программ самостоятельно, а не копировать их.
Первая программа в консоли браузера — вывод сообщения в консоль
Ещё один вариант браузерного «Hello, world!» заключается в выводе окна с сообщением. Делается это так:
Вот результат выполнения этой программы.
Вывод сообщения в окне
Обратите внимание на то, что панель инструментов разработчика расположена теперь в нижней части экрана. Менять её расположение можно, воспользовавшись меню с тремя точками в её заголовке и выбирая соответствующую пиктограмму. Там же можно найти и кнопку для закрытия этой панели.
Инструменты разработчика, и, в том числе, консоль, имеются и в других браузерах. Консоль хороша тем, что она, когда вы пользуетесь браузером, всегда под рукой.
Основы JavaScript для начинающих разработчиков
Материал, перевод которого мы сегодня публикуем, посвящён основам JavaScript и предназначен для начинающих программистов. Его можно рассматривать и как небольшой справочник по базовым конструкциям JS. Здесь мы, в частности, поговорим о системе типов данных, о переменных, о массивах, о функциях, о прототипах объектов, и о некоторых других особенностях языка.
Примитивные типы данных
▍Числа
Арифметические операции JS работают вполне привычным образом, но надо обратить внимание на то, что оператор + может выполнять и сложение чисел, и конкатенацию строк.
▍Строки
Строки, как и другие примитивные значения, иммутабельны. Например, метод concat() не модифицирует существующую строку, а создаёт новую.
▍Логические значения
Объекты
Объекты — это динамические структуры, состоящие из пар ключ-значение. Значения могут иметь примитивные типы данных, могут быть объектами или функциями.
Объекты проще всего создавать, используя синтаксис объектных литералов:
Свойства объекта можно, в любое время, читать, добавлять, редактировать и удалять. Вот как это делается:
Объекты в языке реализованы в виде хэш-таблиц. Простую хэш-таблицу можно создать, используя команду Object.create(null) :
Для перебора всех свойств объекта можно воспользоваться командой Object.keys() :
▍Сравнение значений примитивных типов и объектов
При практической работе с примитивными значениями можно, как уже было сказано, воспринимать их как объекты, у которых есть свойства и методы, хотя объектами они не являются. Примитивные значения иммутабельны, внутренняя структура объектов может меняться.
Переменные
Если переменная объявлена за пределами какой-либо функции, её область видимости является глобальной.
Массивы
Методы массивов позволяют легко реализовывать такие структуры данных, как стеки и очереди:
Функции
Функции в JavaScript являются объектами. Функции можно назначать переменным, хранить в объектах или массивах, передавать в виде аргументов другим функциям и возвращать из других функций.
Существует три способа объявления функций:
▍Классическое объявление функции
При таком подходе к объявлению функций действуют следующие правила:
▍Функциональные выражения
При использовании функциональных выражений нужно учитывать следующее:
▍Стрелочные функции
▍Способы вызова функций
Функции можно вызывать различными способами.
JavaScript учебник для начинающих с нуля
JavaScript — это язык программирования HTML и Web.
JavaScript прост в изучении.
Этот учебник научит вас JavaScript от Basic до Advanced.
JavaScript с нуля
С помощью редактора «Попробуйте сами» вы можете изменить все примеры и просмотреть результаты.
Пример
Мы рекомендуем прочитать этот учебник в последовательности, указанной в левом меню.
JavaScript примеры и уроки
Примеры лучше, чем 1000 слов. Примеры в каждом уроке часто легче понять, чем текстовые пояснения.
Этот учебник дополняет все объяснения с уточнением «Попробуйте сами» примеры.
Если вы попробуете все примеры, вы узнаете много о 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 для начинающих
В этом учебнике, скорость обучения является вашим выбором.
Если вы боретесь, сделать перерыв, или перечитать материал.
Всегда убедитесь, что вы понимаете все «попробовать сами» примеры.