Добавлена лекция 3 по веб-программированию

2 курс/Веб-программирование/Общие стандарты и протоколы сети Интернет.md

@@ -16,7 +16,7 @@
 		- [[#HTML-формы]]
 		- [[#HTML5]]
 	- [[#Браузер]]
-	- [[#DOM]]
+	- [[#Document Object Model]]
 - [[#Стилизация страниц. Основы CSS]]
 	- [[#CSS]]
 		- [[#Источники CSS]]
@@ -26,13 +26,39 @@
 		- [[#LESS]]
 		- [[#Sass]]
 		- [[#SCSS]]
+- [[#Динамические сценарии на стороне клиента. Язык JavaScript]]
+	- [[#JavaScript]]
+		- [[#Структура языка]]
+			- [[#ECMAScript]]
+			- [[#BOM]]
+			- [[#DOM]]
+	- [[#Отличия ES5 от ES6]]
+		- [[#Видимость переменных]]
+		- [[#Вставка переменной в строку]]
+		- [[#Деструктуризация]]
+		- [[#Классы и объекты]]
+		- [[#Наследование]]
+		- [[#Промисы]]
+		- [[#Стрелочные функции]]
+		- [[#Цикл с итератором]]
+		- [[#Параметры по умолчанию]]
+		- [[#Rest-параметр]]
+		- [[#Операция spread]]
+- [[#Асинхронное клиент-серверное взаимодействие. DHTML и AJAX]]
+	- [[#AJAX]]
+		- [[#DHTML]]
+		- [[#XMLHttpRequest]]
+		- [[#jQuery]]
+		- [[#SuperAgent]]
+		- [[#Fetch API]]
+	- [[#WebSocket]]
 ## Введение
 
 В основном все держится на 4 вещах:
 - [[#Клиент-серверное взаимодействие. Протокол HTTP|Hypertext Transfer Protocol (HTTP)]] - предназначен для передачи гипертекста между клиентом и сервером
 - [[#Разметка страниц. Язык HTML|Hypertext Markup Language (HTML)]] - язык разметки гипертекста
 - [[#Стилизация страниц. Основы CSS|Cascade StyleSheets (CSS)]] - язык описания внешнего вида HTML-документов
-- JavaScript - язык для написания динамических сценариев, выполняемых на стороне клиента
+- [[#Динамические сценарии на стороне клиента. Язык JavaScript|JavaScript (JS)]] - язык для написания динамических сценариев, выполняемых на стороне клиента
 ## Клиент-серверное взаимодействие. Протокол HTTP
 
 ### HTTP
@@ -137,7 +163,7 @@ HTML5 - как следует из названия, пятая версия с
 На самом деле, о браузере можно говорить с разных точек зрения: можно определять его главным образом через отображение документов, а можно смотреть на него как на runtime для JavaScript.
 
 Очень важно не путать браузер с поисковиком. Браузер занимается самой отрисовкой документов и чтении динамических сценариев и стилей. В то время как поисковик просто с помощью умных алгоритмов ищет информацию в интернете по заданному запросу. Как главное доказательство их различия, в настройках браузера можно поставить любой другой поисковик.
-### DOM
+### Document Object Model
 
 >**Объектная модель документа** (DOM) - это платформо-независимый интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML-документа.
 
@@ -196,4 +222,155 @@ CSS представляет собой сложную таблицу стиле
 Синтаксис у Sass принципиально отличается от CSS и больше похож на таковой у языка программирования Ruby.
 #### SCSS
 
-SCSS иногда называют диалектом Sass, только с синтаксисом, похожим на CSS. При этом этот язык наиболее популярен среди надстроек для CSS.
+SCSS иногда называют диалектом Sass, только с синтаксисом, похожим на CSS. При этом этот язык наиболее популярен среди надстроек для CSS.
+
+## Динамические сценарии на стороне клиента. Язык JavaScript
+
+### JavaScript
+
+>**JavaScript** (JS) - объектно-ориентированный скриптовый императивный язык программирования.
+
+Скриптовый в определении означает, что у этого языка нет точки входа.
+
+В основном, JS используется для придания интерактивности веб-страницам. Именно он реализовывает динамические сценарии на стороне клиента. Добавить его на [[#HTML]]-страницу можно, используя три способа: в отдельном теге на странице, внутри используемого скриптом тега и в отдельном скриптовом файле. Предпочтительнее использовать последний способ, так как он наиболее удобен.
+
+В данном языке инициализация скриптов происходит по порядку их объявления в файле. При этом объявить скрипт можно в любом месте [[#HTML]]-кода страницы. Важно учитывать, что если для исполнения скрипта необходим полностью построенный [[#Document Object Model|DOM]], то его следует подключать в конце тега body.
+
+JS однопоточный, и по умолчанию он не поддерживает ни асинхронность, ни многопоточность, а работает только по принципу конкуренции процессов. По факту, все JS-скрипты выполняются в одном event-loop'е, который только один. Тем не менее, в некоторых местах кода можно использовать await, который позволяет другим более срочным процессам выполнится именно в этом месте кода, что позволяет реализовать структуру, похожую на асинхронность. 
+
+Сам по себе JS в [[#Браузер|браузере]] не имеет прямой работы с вводом-выводом, все данные передаются ему через API [[#Браузер|браузера]], на котором он работает.
+
+Этому языку присущ ряд характерных архитектурных черт: динамическая или слабая типизация, автоматическое управление памятью, а также прототипное программирование (то есть одна функция наследует другую функцию-шаблон). Помимо этого, функции в этом языке являются объектами первого класса.
+#### Структура языка
+
+Полный язык можно поделить на три части. Первая из них - ядро, [[#ECMAScript]], язык в его чистом виде. Вторая часть языка состоит из [[#BOM|объектной модели браузера (Brawser Object Model, BOM)]]. Третий уровень языка представляет из себя [[#DOM|объектную модель документа (Document Object Model, DOM)]].
+
+[[#BOM]] и [[#DOM]] существуют только внутри [[#Браузер|браузера]], в котором исполняется JS, поэтому для работы с языком вне [[#Браузер|браузера]] требуются специальные инструменты, которые могут их заменить (к примеру, Node.js).
+##### ECMAScript
+
+Сам по себе ECMAScript является отдельным языком программирования. Он встраиваемый, расширяемый, и при этом не имеющий средств ввода-вывода.
+
+В данном языке, функция - это тоже объект. При этом, функцию можно задавать анонимно, можно объявить функцию в переменной, и можно объявить функцию с использованием объектной формы записи (хотя этот вариант уже не актуален и не используется).
+
+С новой версией ES6, выпущенной в 2015 году, стали доступны [[#Отличия ES5 от ES6|новые возможности]]. В основном эти изменения коснулись синтаксиса языка.
+
+Этот язык поддерживается практически всеми современными [[#Браузер|браузерами]], хотя для некоторых может потребоваться отдельная программа, называемая транспилером. Транспилеры могут понизить версию кода JS до версий более популярных браузеров. Самым распространенным транспилером на данный момент является Babel.
+##### BOM
+
+По факту, BOM - это прослойка между [[#ECMAScript|ядром]] и [[#DOM]]. Основное ее предназначение - управление окнами [[#Браузер|браузера]] и обеспечение их взаимодействия. Она представляет каждое окно [[#Браузер|браузера]] как отдельный объект. При этом она специфична для каждого браузера. 
+
+Данная модель предоставляет множество возможностей. Среди них управление фреймами, поддержка задержки в исполнении кода и зацикливания с задержкой, системные диалоги, управление адресом открытой страницы, управление информацией о [[#Браузер|браузере]], управление информацией о параметрах монитора, ограниченное управление историей просмотра страниц, поддержка работы с [[#HTTP]] cookie.
+
+При использовании JS можно в любой части скрипта получить доступ к BOM, с использованием объекта window. С помощью этого объекта можно изменять окно пользователя и записывать функции в окно из любого места в коде.
+##### DOM
+
+Используя JS, с [[#Document Object Model|DOM]] можно производить такие манипуляции, как получение узлов, изменение узлов, изменение связей между узлами, удаление узлов. Для этого используется объект document.
+
+DOM одинаков для каждого браузера.
+### Отличия ES5 от ES6
+
+Уже очень долгое время ES6 является стандартом написания [[#JavaScript|JS]] кода. И он актуален и по сей день, так как радикальных изменений после ES6 не производилось. Тем не менее, существует много старых систем, которые все еще работают с ES5. Именно поэтому важно знать их отличия и уметь работать с обеими версиями [[#ECMAScript|ES]].
+#### Видимость переменных
+
+В стандарте ES5 все переменные обозначались ключевым словом var, видимость которой распространялась на весь код программы - то есть в любом месте можно было эту переменную задать или перезаписать, и также в любом месте можно было эту переменную использовать.
+
+Главная проблема этого подхода состоит в том, что переменные, объявленные внутри блока, автоматически перезаписывают таковые извне блока. То есть, при запуске блока, внутри которого переопределяется определенная переменная, старое значение данной переменной автоматически стирается, даже если сам блок эту переменную не меняет, а только инициализирует. При этом переопределенные переменные остаются таковыми и извне блока.
+
+В то же время в большинстве других языков программирования область видимости переменной ограничивается блоком, в котором она была создана. Это позволяет удобно отслеживать переменные и дает много преимуществ и удобств по сравнению с неограниченной областью видимости.
+
+Тем не менее, в ES5 существовали "костыли" для ограничения видимости переменной внутри блока - использование IIFE (Immediately Invoked Function Expression - выражение немедленно вызываемой функции). С таким подходом приходилось писать весь блок с необходимой переменной внутри функции, а после сразу вызывать эту функцию. В таком случае все действия внутри функции выполнялись, в то время как объявленная внутри нее переменная не выходила из блока во вешнюю область видимости. Но это все еще было неудобно.
+
+Поэтому в версии ES6 были добавлены два новых ключевых слова - let и const - видимость которых стала ограничена как раз блоком. По своей сути, let работает почти так же, как и var, в то время как const стала честной константой let - константой с ограниченной блоком областью видимости, которая также в некоторой степени ограничивает манипуляции с содержащимся в ней объектом, в том числе и изменение свойств объекта.
+
+Тем не менее, сам var все также существует в ES6, и его можно использовать теми же способами, как и в ES5, хотя это и не рекомендуется.
+#### Вставка переменной в строку
+
+С версии ES6 стало возможно вставлять переменные с помощью специальной конструкции ${}. Тем не менее, сделать это можно только в специальных строках, заключенных в обратные кавычки \`\`.
+
+До этого же приходилось постоянно конкатенировать строки при их использовании.
+#### Деструктуризация
+
+>**Деструктуризация** - особый синтаксис присвоения, при котором можно присвоить массив или объект сразу нескольким переменным, разбив его на части.
+
+В ES6 было добавлено много моделей деструктуризации с широким спектром применения.
+#### Классы и объекты
+
+Также в версии ES6 появился новый синтаксис описания и инициализации объектов. Модель описания объектов стала более схожей с таковой у других популярных языков программирования, к примеру добавилось ключевое слово class, а также функция конструктора constructor.
+
+В то же время, чтобы реализовать такое на ES5, приходилось определять класс как переменную, отдельную функцию конструктора, а методы реализовывать через прототипное программирование.
+#### Наследование
+
+Помимо классов, также были добавлены и ключевые слова для наследования - extends и super. Это, при взаимодействии с классами, намного уменьшило количество необходимого кода для описания наследования, и в то же время увеличило его читаемость.
+
+В то же время, для реализации того же самого в ES5 требовалось использовать прототипное программирование, много вызовов функции, а также бесполезных на первый взгляд усложнений.
+
+Самое интересное, что на самом деле весь этот ужас из ES5 никуда не делся, просто его скрыли за красивыми ключевыми словами. "Под капотом" же ES6 работает точно так же.
+#### Промисы
+
+Вместо коллбэков стали использоваться промисы. Тем не менее, коллбэки все также используются и по сей день. Дословно промисы обещают выполнить функцию.
+#### Стрелочные функции
+
+Стрелочная функция - это, по факту, та же анонимная функция, только опуская ключевое слово function, а в некоторых ситуациях и даже само тело функции.
+#### Цикл с итератором
+
+В ES5 существовало только два вида for: обычный for, аналогичный таковому в java, а также forEach для элементов массива.
+
+В новой же версии ES6 стал доступен цикл for с итератором массива, который последовательно перебирает все элементы массива. Но по факту, это все тот же forEach, но более мощный.
+#### Параметры по умолчанию
+
+В ES6 также добавились возможность устанавливать параметры для функции по умолчанию, которой в ES5 не было.
+
+Раньше в ES5 приходилось использовать различные конструкции ветвления, чтобы понять, была ли передана нужная переменная в функцию, и если нет, установить ей нужное значение.
+#### Rest-параметр
+
+В ES6 появилась возможность устанавливать Rest-параметр. По факту, это массив параметров, количество которых по умолчанию не известно. В Java есть аналог такой конструкции - vararg. Названия переменных при таком подходе наследуются.
+#### Операция spread
+
+В ES6 появилась новая операция spread, обозначающаяся как [[#Rest-параметр]], которая может передать в функцию не сам массив данных, а разложить его на различные переменные и передать их отдельно друг от друга, как разные переменные.
+## Асинхронное клиент-серверное взаимодействие. DHTML и AJAX
+
+### AJAX
+
+>**AJAX** (Asynchronous Javascript And XML) - это подход к построению интерактивных пользовательских интерфейсов веб-приложений.
+
+Несмотря на то, что в абревиатуре используется XML, на сегодняшний день он уже не так важен, вместо него используется любой структурированный текст. Поэтому на сегодняшний день AJAX - это просто асинхронный способ выполнения [[#JavaScript|JS]].
+
+Сам по себе, AJAX основан на фоновом обмене данными между [[#Браузер|браузером]] и веб-сервером. При таком подходе во время обмена данными страница не перезагружается полностью, а лишь меняется в соответствии с поступающими данными.
+
+Основными принципами AJAX являются совместное использование технологии динамического обращения к серверу без перезагрузки полностью всей веб-страницы (с использованием, к примеру, [[#XMLHttpRequest]], динамического создания дочерних фреймов, или динамического создания тега, содержащего [[#JavaScript|JS]]) и [[#DHTML]] для динамического изменения содержания страницы.
+
+Преимуществами такого подхода являются экономия трафика (ведь нет необходимости при изменении страницы отправлять копию страницы с изменениями, можно обойтись только самими изменениями), уменьшение нагрузки на сервер (по той же причине) и ускорение реакции интерфейса (и снова по той же причине).
+
+Недостатками такого подхода являются отсутствие возможности поисковикам найти динамически загружаемое содержимое страницы, сложность собирания метрик по использованию сайта, усложнение проекта и требование браузеру включить [[#JavaScript]] (во всех современных браузерах эта функция включена по умолчанию).
+#### DHTML
+
+>**Dynamic HTML** - способ создания интерактивного веб-сайта, использующий сочетание статического языка разметки [[#HTML]], выполняемого на стороне клиента скриптового языка [[#JavaScript]], [[#CSS]] (каскадных таблиц стилей) и [[#Document Object Model|DOM]] (объектной модели документа).
+#### XMLHttpRequest
+
+>**XMLHTTP** (или XMLHttpRequest, или XHR) - это набор API, позволяющий осуществлять [[#Структура запроса HTTP|HTTP-запросы]] к серверу без необходимости перезагружать страницу.
+
+При данном подходе данные можно пересылать как в виде XML, так и в виде JSON, [[#HTML]] или даже просто неструктурированным текстом. При пересылке чаще всего используется текстовый протокол [[#HTTP]], и поэтому данные должны передаваться в виде текста, не важно какого вида.
+#### jQuery
+
+>**jQuery** - это [[#JavaScript|JS]]-библиотека, предназначенная для разработки [[#DHTML]] и AJAX-приложений.
+
+Использование библиотеки jQuery упрощает доступ к элементам [[#Document Object Model|DOM]] с помощью множества различных способов. Помимо этого, данная библиотека упрощает и унифицирует (для различных браузеров) реализацию AJAX, а также упрощает добавление визуальных эффектов.
+#### SuperAgent
+
+>**SuperAgent** - это API для реализации AJAX.
+#### Fetch API
+
+>**Fetch API** - это современный стандарт, призванный заменить [[#XMLHttpRequest]] для реализации AJAX.
+
+На данный момент, поддерживается всеми современными [[#Браузер|браузерами]]. Тем не менее, на старых [[#Браузер|браузерах]] он не поддерживается, а значит и работать не будет.
+
+В отличие от [[#XMLHttpRequest]], Fetch API работает на [[#Промисы|промисах]], при этом поддерживает кросс-браузерность, а также сам по себе он уже встроен в [[#браузер]] (что означает, что нет необходимости подключать что-либо отдельно, в том числе не нужны [[#jQuery]] и [[#SuperAgent]]).
+### WebSocket
+
+>**WebSocket** - это протокол полнодуплексной связи поверх TCP-соединения, предназначенный для обмена сообщениями между [[#Браузер|браузером]] и веб-сервером в режиме реального времени.
+
+Данный протокол позволяет отправлять данные [[#Браузер|браузеру]] без дополнительного запроса со стороны клиента. При этом обмен такими данными ведется через отдельное TCP-соединение. На данный момент, этот протокол поддерживается всеми современными браузерами.
+
+Основное преимущество WebSocket заключается в том, что с ним данные могут отправляться как с клиента на сервер, так и наоборот. Большинство других реализаций того же самого могут отправлять данные только от клиента только на сервер.
+
+Данный протокол является альтернативой для совместного подхода [[#AJAX]] и Long Polling'а. В данном случае Polling - это постоянные запросы от клиента для проверки состояния сервера. Long Polling означает, что опрос клиентом производится не слишком часто, а с определенным интервалом времени. В то же время существует Short Polling, который делает запросы очень часто.