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

Содержание

  • Вступление
  • История 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.

Сделайте шаг за шагом и изучите результат:

//1
var a=23;
console.dir(window);
//2
var aa=234;
console.dir(window);
//3
var aaa=2345;
console.dir(window);

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

4.2 JS/BOM/DOM

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

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

Перенос

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. Любой текст между символами /* и */ также рассматривается как комментарий. Эти комментарии могут состоять из нескольких строк, но немогут быть вложенными.

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

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. Инструкции и их разновидности

Что такое инструкции в JavaScript?

Скрипты на JavaScript практически полностью состоят из инструкций. В JavaScript есть три типа инструкций: условные, циклы, переходы. Условные инструкции, например, if и switch заставляют интерпретатор выполнить или пропустить фрагмент кода. Циклы, например, for и while зацикливают фрагмент кода, то есть повторяют его определенное количество раз. Инструкции переходов, например, break и return, которые заставляют JavaScript перейти на другой фрагмент кода (часть программы).

Простые инструкции

Вы уже знакомы с простыми инструкциями, это выражения. Инструкция присваивания, инкремент, декремент, оператор delete и остальные.

Составные и пустые инструкции

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

Пример 1 

{
    a *= b;
    c = a + b;
    document.write(c);
}

Блок инструкций не завершается точкой с запятой. Пустая инструкция выглядит просто:

Пример 2 

{
    ;
}

Есть так называемые инструкции объявления var и function. Уже ясно из названия, что они делают – объявляют переменные и функции.

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

9.1. Литералы

Литерал – это любое значение указанное явным образом в коде. В качестве литералов в js могут выступать числа, строки (текстовые значения), логические значения. Функциональные литералы, массивы и объекты мы рассмотрим позже.

Числовые литералы

В js дробные и целые числа в десятичной системе счисления записываются в виде последовательности цифр. Дробная часть десятичной дроби отделяется точкой. Если опустить целую часть десятичной дроби, то она будет считаться равной нулю. Например, литерал .8 описывает значение 0.8.

Примеры числовых литералов: 0, 2, 4, 8, 3.14, .2.

Экспоненциальная форма записи числовых литералов

Числовые литералы могут представляться в экспоненциальной форме записи. Согласно этой записи вначале (необязательно, если есть дробная часть) идут цифры, затем дробная часть (необязательно, если есть целая часть), отделённая точкой, затем (необязательно) знак «+» или минус и буква e (E).

Такая запись обозначает число, умноженное на 10 в степени, определяемой числом, которое стоит после буквы e (E). Например, 6.2e10 — это 6.2 умножить на 10 в 10-ой степени, 1.2E-2 – это 1.2 умножить на 10 в минус второй степени, .1e1 — это единица, -.2e3 – это -200 и т.д.

Шестнадцатеричные литералы

Такие литералы задают числа в шестнадцатеричной системе счисления, они начинаются с символов «0x» или «0X», а затем следует запись числа в шестнадцатеричной форме. Такая запись содержит числа от 0 до 9 и большие или маленькие буквы a, b, c, d, e, f.

Примеры шестнадцатеричных литералов: 0xFF, 0Xbb, 0x123, 0x0.

Для перевода числа из десятеричной системы счисления в шестнадцатиричную необходимо делить нацело (без остатка) на 16 пока не получится ноль, записывая остатки от деления в обратном порядке, при этом остаток 10 запишется как A, 11 как B и т.д.

Переведём число 123 из десятичной, в шестнадцатеричную систему счисления. Символ «/» будет означать деление нацело.

123 / 16 = 7, остаток 11 (запишется как B вторым символом)
7 / 16 = 0, остаток 7

В итоге шестнадцатеричное представление числа 123 – 7B, а литерал, описывающий это значение – 0X7B.

Для перевода числа из шестнадцатеричной формы представления в десятичную необходимо начиная с последних брать цифры этого числа, умножать на 16 в степени номер цифры считая с нуля и с конца числа, при этом заменяя цифры A, B, C, D, E, F на 10, 11, 12, 13, 14 и 15. Например, 7B = B * 16^0 + 7 * 16^1 = 11 * 1 + 7 * 16 = 11 + 112 = 123.

Шестнадцатеричная форма записи используется, как более краткое представление числа в текстовом виде. С помощью этой формы записи задаются, например, цвета в СSS-свойствах и кодируются кириллические символы в get-запросе.

Восьмеричные литералы

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

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

Примеры восьмеричных литералов: , 012, 0123, 02.

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

Строковые литералы

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

Примеры строковых литералов: ‘Привет мир!’, «site=’true-coder.ru'», », ‘123’.
Некорректные строковые литералы: ‘mess=’hello ‘, «двойные («) кавычки».

Логические значения

Логический тип данных имеет всего два возможных значения: true, false. Логическое значение говорит об истинности чего-либо. Возможно, вам проще будет рассматривать эти значения, как «да» (true) или «нет» (false).

9.2. Переменные

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

results matching ""

    No results matching ""