Ivan Asmer 7 lat temu
rodzic
commit
8912dd2e06
2 zmienionych plików z 167 dodań i 0 usunięć
  1. 92 0
      A/11LetConst.md
  2. 75 0
      A/11XMLHttpRequest.md

+ 92 - 0
A/11LetConst.md

@@ -0,0 +1,92 @@
+# ES6: `let` и `const`
+
+## Область видимости.
+
+`let` изначально был придуман во всяких (прастигоспади) `lisp`-диалектах, и суть его заключалась в следующем: определить свой набор переменных и значений для блока кода, т. е. создать область видимости и код, который 
+имеет доступ к этой области видимости. В отличие от **функций**, такая область видимости и блок кода запускаются не по **вызову**, а по порядку исполнения (как обычный код, выполняемый сверху вниз):
+
+```javascript
+var x = 10;
+{
+    let x = 15;
+    console.log('let x: ' + x);
+}
+console.log('var x: ' + x);
+```
+В примере выше применяется *просто блок* кода, однако вы можете использовать `let` для определения локальной переменной в *любом* блоке кода (`if`, `function`, `for`, `while`, и т. п.)
+
+## `Self-Invoked Function`
+
+Классический в **ES5** подход **Self-Invoked Function**, является костылём для реализации обычного исконного поведения `let`. Например, аналог примера выше выглядит в синтаксисе **ES5** так:
+
+```javascript
+var x = 10;
+(function()
+{
+    var x = 15;
+    console.log('self-invoked x: ' + x);
+})()
+console.log('var x: ' + x);
+```
+
+## Объявление переменных через `let`.
+
+В отличие от `var`, переменную через `let` нельзя переопределять в том же блоке кода. Определения `var` *всплывают*, `let` же - нет.
+
+## `let` и циклы
+
+`let` в циклах ведет себя как переменная внутри `Self-Invoked Function`, создаваемой на каждую итерацию, и вмещающей в себя весь итерируемый блок кода:
+
+```javascript
+for (let i=0;i<6;i++){
+    setTimeout(() => console.log(i),i*1000) //ведет себя так, как вы хотите :-D
+}
+```
+
+То есть на *каждую итерацию* создается **своя копия** переменной
+
+В синтаксисе **ES5** это выглядит так:
+
+
+```javascript
+for (var i=0;i<6;i++){
+    (function(i){
+    setTimeout(() => console.log(i),i*1000) //ведет себя так, как вы хотите :-D
+    })(i)
+}
+```
+
+Однако после цикла с `let` переменной не будет (с `var` же она останется)
+
+## Замыкание
+
+простейшее замыкание *без внешней функции* реализуется с помощью `let` следующим образом:
+
+```javascript
+var x = 10;
+{
+    let x = 15;
+    var closureFunc = function(){
+        return x;
+    }
+}
+console.log(x)
+console.log(closureFunc())
+```
+
+## Const
+
+`Const` - это определение константы. Работает так же, как и `let`, однако значение менять нельзя:
+
+```javascript
+let R = 1;
+let warTime = true;
+if (warTime){
+    const PI = 4
+    console.log(2*PI*R)
+}
+else {
+    const PI = Math.PI
+    console.log(2*PI*R)
+}
+```

+ 75 - 0
A/11XMLHttpRequest.md

@@ -0,0 +1,75 @@
+# XMLHttpRequest
+
+Тот самый объект, из которого и произошел AJAX/AJAJ. Программный способ послать **GET** или **POST** запрос на сервер незаметно для пользователя и обработать приходящие данные **JS**-кодом.
+
+## Пример
+
+```javascript
+var request = new XMLHttpRequest() 
+
+request.open('GET', 'URL', false) // последний параметр указывает на синхронность или асинхронность запроса. В данном случае запрос синхронный
+
+request.send() // висим пока получаем данные если синхронный запрос, или быстро проскакиваем в случае асинхронного запроса
+
+if (request.status == 200){
+    alert('all ok')
+    console.log(request.responseText)
+}
+else {
+    alert('shit happens: ' +  xhr.status + ', ' + xhr.statusText );
+}
+```
+
+Пример выше написан в синхронном стиле, и предполагает, что на конец выполнения `request.send()` данные уже будут в браузере и код будет вправе проверять код ошибки. Однако такой режим объекта `XMLHttpRequest` является устаревшим,
+подвешивает браузер и не поддерживает многие полезные новые функции. 
+
+## Пример (асинхронный)
+
+```javascript
+
+var request = new XMLHttpRequest() 
+
+request.open('GET', 'URL', true) // последний параметр указывает на синхронность или асинхронность запроса. В данном случае запрос асинхронный
+
+
+request.onreadystatechange = function(){ //обработчик изменения статуса запроса. Статус == 4 сигнализирует о том, что запрос окончен.
+    if (request.readyState != 4){
+        return;
+    }
+
+    if (request.status == 200){
+        alert('all ok')
+        console.log(request.responseText)
+    }
+    else {
+        alert('shit happens: ' +  xhr.status + ', ' + xhr.statusText );
+    }
+}
+
+request.send() // инициируем запрос.
+```
+
+Пример выше работает в асинхронном режиме - вместо блокирования браузера пока прийдут данные от удаленного сервера назначается обработчик, который запускается при прохождении разных фаз запроса:
+
+```c++
+const unsigned short UNSENT = 0; // начальное состояние
+const unsigned short OPENED = 1; // вызван open
+const unsigned short HEADERS_RECEIVED = 2; // получены заголовки
+const unsigned short LOADING = 3; // загружается тело (получен очередной пакет данных)
+const unsigned short DONE = 4; // запрос завершён
+```
+
+## `timeout`
+
+Это свойство позволяет установить время ожидания выполнения запроса в миллисекундах.
+
+## Подробнее
+
+https://learn.javascript.ru/ajax-xmlhttprequest
+
+## Задание
+
+1. [JSON](https://raw.githubusercontent.com/David-Haim/CountriesToCitiesJSON/master/countriesToCities.json). Загрузить используя XMLHttpRequest и распарсить как ассоциативный массив.
+2. Организовать выбор страны и города, используя два `select` и ассоциативный массив из примера выше. При выборе страны в списке городов должны быть только города из выбранной страны.
+
+