Home

Введение в JavaScript разработку

Содержание

1. Вступление

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

2. История JavaScript

2.1 Все началось в 90-е

События, в результате которых появился JavaScript, разворачивались в течение шести месяцев, с мая по декабрь 1995 года. Компания Netscape Communications уверенно прокладывала себе путь в области веб-технологий. Её браузер Netscape Communicator успешно отвоевывал позиции у NCSA Mosaic, первого популярного веб-браузера. Netscape была создана людьми, принимавшими участие в разработке Mosaic в ранние 90-е. Теперь, с деньгами и независимостью, у них было всё необходимое для поиска способов дальнейшего развития веб-технологий. Именно это послужило толчком для рождения JavaScript.

И тут в нашей истории появляется Брендан Айк, отец JavaScript. Айк должен был разработать для Netscape «Scheme для браузера». Scheme — это динамичный, мощный и функциональный диалект языка программирования Lisp с максимально упрощённым синтаксисом. Вебу требовалось что-то подобное: простое в освоении, динамичное, немногословное и мощное. Айк не стал упускать шанса поработать над тем, что ему нравилось, и присоединился к команде.

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

Первой большой переменой для JavaScript после его выпуска стала стандартизация ECMA. ECMA — ассоциация, созданная в 1961 году с целью стандартизации информационных и коммуникационных систем.

Работа над стандартизацией JavaScript началась в ноябре 1996 года. Стандарту, над которым работала группа TC-39, был присвоен идентификационный номер ECMA-262. К тому моменту JavaScript активно использовался на многих веб-страницах.

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

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

Вторая версия, ECMAScript 2, была выпущена в июне 1998 года, чтобы исправить несостыковки между ECMA и стандартом ISO для JavaScript (ISO/IEC 16262) и не включала в себя никаких изменений самого языка.

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

2.2 ECMAScript 3: первые большие изменения

ECMAScript 3 был выпущен в декабре 1999 года.

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

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

2.3 AJAX

AJAX (asynchronous JavaScript and XML) — технология, появившаяся на свет в годы ECMAScript 3. Хоть она и не являлась частью стандарта, Microsoft встроила некоторые расширения для JavaScript в Internet Explorer 5. Одним из таких расширений была функция XMLHttpRequest в виде управляющего элемента ActiveX XMLHTTP. Эта функция позволяла браузеру выполнять асинхронные HTTP-запросы серверу, тем самым позволяя страницам обновляться на лету. Хотя само название AJAX было придумано значительно позже, сама техника активно использовалась в то время.

Впервые термин AJAX был публично использован 18 февраля 2005 года в статье Джесси Джеймса Гарретта

2.4 ECMAScript 5: перерождение JavaScript

В 2008 году, после долгих боев, развернувшихся вокруг ECMAScript 4, сообщество сфокусировалось на работе над ECMAScript 3.1, отправив ECMAScript 4 на свалку. В 2009 году ECMAScript 3.1 был полностью завершён и одобрен всеми участниками комитета. Так как ECMAScript 4 считался своеобразным вариантом ECMAScript несмотря на отсутствие хоть какого-либо релиза, было решено переименовать ECMAScript 3.1 в ECMAScript 5, чтобы избежать недоразумений

ECMAScript 5 стал одной из самых поддерживаемых версий JavaScript, став также целью компиляции многих транспайлеров. ECMAScript 5 получил полную поддержку в браузерах Firefox 4 (2011), Chrome 19 (2012), Safari 6 (2012), Opera 12.10 (2012) и Internet Explorer 10 (2012).

ECMAScript 5 получил обновление в 2011 году под названием ECMAScript 5.1. Этот релиз вносил ясность в некоторые неоднозначные пункты стандарта, но никаких новых возможностей в нем не было. Все новые возможности были запланированы для следующего большого релиза ECMAScript.

ECMAScript 6 (2015) и 7 (2016): универсальный язык программирования

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

Краткий список новых возможностей включает в себя:
- Let (лексическая) и const (неизменяемая) привязки
- Стрелочные функции (короткие анонимные функции) и лексическое this
- Классы (синтаксический сахар поверх прототипов)
- Улучшения объектных литералов (вычисляемые ключи, укороченные определения методов и т.д.)
- Шаблонные строки
- Промисы
- Генераторы, итерируемые объекты, итераторы и for..of
- Параметры функций по умолчанию и оператор rest
- Spread-синтакис
- Деструктуризация
- Модульный синтаксис
- Новые коллекции (Set, Map, WeakSet, WeakMap)
- Прокси и Reflect
- Тип данных Symbols
- Типизированные массивы
- Наследование классов
- Оптимизация хвостовой рекурсии
- Упрощённая поддержка Unicode
- Двоичные и восьмеричные литералы

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

В 2016 году увидело свет небольшое обновление ECMAScript. Эта версия стала результатом нового процесса подготовки, принятого в TC-39. Все новые предложения должны пройти через четыре стадии. Предложение, достигшее четвёртой стадии, имеет все шансы быть включенным в следующую версию ECMAScript (однако комитет имеет право отложить его для более поздней версии). Таким образом, каждое предложение разрабатывается индивидуально (разумеется, с учётом его взаимодействия с другими предложениями), не тормозя разработку ECMAScript.

2.5 Итоги

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

3. Классификация

1. Cценарный

2. Высокоуровневый язык

3. Динамическая типизация

Статическая / динамическая типизация. Статическая определяется тем, что конечные типы переменных и функций устанавливаются на этапе компиляции. Т.е. уже компилятор на 100% уверен, какой тип где находится. В динамической типизации все типы выясняются уже во время выполнения программы.

4. Слабая типизация

Сильная / слабая типизация (также иногда говорят строгая / нестрогая). Сильная типизация выделяется тем, что язык не позволяет смешивать в выражениях различные типы и не выполняет автоматические неявные преобразования, например нельзя вычесть из строки множество. Языки со слабой типизацией выполняют множество неявных преобразований автоматически, даже если может произойти потеря точности или преобразование неоднозначно.

5. Неявная типизация

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

6. Не имеющий средств ввода-вывода

7. Автоматическое управление памятью

8. Функции как объекты первого класса

9. Мультипарадигмальный:

- Императивная
- Процедурная
- Структурная
- Аспектно-ориентированное программирование
- Объектно-ориентированная(Прототипно-ориентированная)
- Декларативная
- Чистота функции(но не чистота языка)
- Функциональная
- Событийно-ориентированное
Частичная поддержка
- Модульность
- Рефлексивность
- Полиморфизм
- Реактивное

4. Окружение

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

4.1 Window

Сам по себе язык JavaScript не предусматривает работы с браузером.

На рисунке ниже схематически отображена структура, которая получается если посмотреть на совокупность браузерных объектов с «высоты птичьего полёта».

Как видно из рисунка, на вершине стоит window.

4.2 JS/BOM/DOM

DOM - Document Object Model
BOM - Document Object Model
ES - ECMAScript

5. Лексическая структура

5.1 Набор символов

При написании программ на JavaScript используется набор символов Юникода. Юникод является надмножеством кодировок ASCII и Latin-1 и поддерживает практически все письменные языки, имеющиеся на планете. Стандарт ECMAScript 3 требует, чтобы реализации JavaScript обеспечивали поддержку стандарта Юникода версии 2.1 или выше, а стандарт ECMAScript 5 требует, чтобы реализации обеспечивали поддержку стандарта Юникода версии 3 или выше.

5.2 Чувствительность к регистру

JavaScript – это язык, чувствительный к регистру символов. Это значит, что ключевые слова, имена переменных и функций и любые другие идентификато­ры языка должны всегда содержать одинаковые наборы прописных и строчных букв. Например, ключевое слово while должно набираться как «while», а не «While» или «WHILE». Аналогично online, Online, OnLine и ONLINE – это имена четырех разных переменных.

5.3 Пробелы, переводы строк и символы управления форматом

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

5.4 Экранированные последовательности Unicode

alert('\u058D');
\u0061\u006C\u0065\u0072\u0074('hello world');

5.5 Cинтаксис комментариев

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

// alert('\u058D');
/*
\u0061\u006C\u0065\u0072\u0074('hello world');
*/

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

Комментарии полезны почти всегда, хотя многие программисты не используют их в полном объеме. Если вы решили не прибегать к помощи комментариев, то стоит помнить о том, что не каждый человек может разобраться в вашем коде так же легко, как это удается вам; возможно, что ваши действия требуют дополнительного разъяснения. Кроме того, по прошествии некоторого времени вы сами можете забыть некоторые детали алгоритма своей программы. Используйте комментарии так, чтобы человек, читающий листинг вашей программы, понимал, что делает эта программа. Детали алгоритма можно понять из самих операторов, поэтому задача комментариев — дать общие пояснения функционирования отдельных блоков программы.

5.6 Зарезервированные слова

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

  • break
  • delete
  • function
  • return
  • typeof
  • case
  • do
  • if
  • switch
  • var
  • catch
  • else
  • in
  • this
  • void
  • continue
  • false
  • instanceof
  • throw
  • while
  • debugger
  • finally
  • new
  • true
  • with
  • default
  • for
  • null

JavaScript также резервирует некоторые ключевые слова, которые в настоящее время не являются частью языка, но которые могут войти в его состав в будущих версиях. Стандарт ECMAScript 5 резервирует следующие слова:

  • class
  • const
  • enum
  • export
  • extends
  • import
  • super

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

  • implements
  • let
  • private
  • public
  • yield
  • interface
  • package
  • protected
  • static

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

  • abstract
  • double
  • goto
  • native
  • static
  • boolean
  • enum
  • implements
  • package
  • super
  • byte
  • export
  • import
  • private
  • synchronized
  • char
  • extends
  • int
  • protected
  • throws
  • class
  • final
  • interface
  • public
  • transient
  • const
  • float
  • long
  • short
  • volatile

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

  • arguments
  • encodeURI
  • Infinity
  • Number
  • RegExp
  • Array
  • encodeURIComponent
  • isFinite
  • Object
  • String
  • Boolean
  • Error
  • isNaN
  • parseFloat
  • SyntaxError
  • Date
  • eval
  • JSON
  • parseInt
  • TypeError
  • decodeURI
  • EvalError
  • Math
  • RangeError
  • undefined
  • decodeURIComponent
  • Function
  • NaN
  • ReferenceError
  • URIError

6. Strict Mode

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

7. Взаимодействие с пользователем

7.1 UI операции

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

alert()

Выводит на экран окно с сообщением.

prompt()

Возвращает то, что ввёл посетитель.

confirm()

Выводит окно с вопросом.

7.2 Объект console

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

7.2.1 Методы объекта console

console.clear()

console.count()

console.debug()

console.dir()

console.error()

console.group()

console.groupEnd()

console.info()

console.log()

console.table()

console.time()

console.timeEnd()

console.warn()

8. Инструкции и их разновидности

9. Переменные и литералы

9.*. Литералы

9.*. Переменные

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

10. Операторы, операнд, основные операторы

11. От Эрика Элиота

JavaScript предлагает то чего не хватает в других языках: Свободу!

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

  • Наследование через прототипы (объекты не содержащие классов, делегирование прототипов более известное как OLOO — Objects Linking to Other Objects)

  • Функциональное программирование (с помощью лямбда-выражений и замыканий)

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

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

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

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

И если вы всё ещё находитесь в ней — пришло время перейти на новый уровень.

Если вы создаете конструкторы и наследуете их — вы так и не изучили JavaScript. И не важно, что вы занимаетесь этим с 1995 года. Вы не в состоянии воспользоваться основными преимуществами языка.

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

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

Эрик Элиот, автор книги «Programming JavaScript Applications»

*. Упражнения

1. "Hello world"

Вывести в консоль "Hello world" без использования латиницы.

2. Error

Вывести в консоль Error.
(console.error())

3. Literals

Вывести в консоль литералы JS: Null, Boolean Literals(оба), Numeric Literals(всех систем счисления), String Literals(3 базовых) (можна найти тут).

4. Group

Сгрупировать все литералы по типу и вывести группу с подписью конкретной группы.

5. Time

Засечь время выполнения кода из задания 4.
(console.time()/console.timeEnd())

6. Age

Спросить у пользователя сколько ему лет. Результат вывести в консоль.
(prompt())

7. 18-

Спросить у пользователя есть ли ему 18. Результат вывести в консоль.
(confirm())

8. Info

Спросить у пользователя имя, фамилию, возраст и пол. Результат записать в переменную и вывести в консоль одной строкой как поле info.

console.info(1, 2, 3, 4);

9. Global

Вывести в консоль window. Изучить результат.

10. DOM

Вывести в консоль document в 2 вариантах: dir и log. Сравнить результат.

11. Dude

Создать переменную чувак без оператора var и вывести в консоль window. Ctrl+F в консоли, найти чувака в window. Перезапустить страницу, сделать то же но с оператором var. Изучить результат.

12. Strict dude

Повторить задание 11 с директивой "use strict". Изучить результат.

13. Value exchange

Даны две переменные с числами a = 8, b = 5. Составить фрагмент программы, после исполнения которого значения переменных поменялись бы местами (новое значение a равно старому значению b и наоборот).

14. Value exchange 2.0

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