jQ2 alpha

jQuery02.md

@@ -132,22 +132,153 @@ https://repl.it/E8Fc/7
 
 #### `preventDefault`
 
+Для отмены стандартного поведения браузера на событие (например переход по ссылке при клике на ней) существует функция объекта-события `preventDefault`:
+
+```javascript
+    $("a").click(function(evt){
+        evt.preventDefault(); //ссылки не работают
+    })
+```
+
 #### `false`
 
+Так же работает и false как результат функции:
+
+```javascript
+    $("a").click(function(evt){
+        return false; //ссылки не работают
+    })
+```
+
+Однако `return false;` работает только для `on` событий. Если вы добавляете обработчик через `addEventListener`, `return false;` не сработает.
+
+```javascript
+    document.getElementById("eventListener").addEventListener("click", function(evt){
+        return false;
+    });
+```
+
+Поэтому `preventDefault` является более предпочтительным способом, который работает **всегда**.
 
 ## jQuery UI
 
+**jQuery UI** - библиотека виджетов (и не только), которая используется в связке с jQuery. Часть виджетов являются не очень актуальными в силу появления
+возможностей HTML5.
+
 ### Что это, зачем и как подключить
 
+https://developers.google.com/speed/libraries/#jquery-ui
+
+```html
+<!-- jQuery -->
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+
+<!-- jQueryUI -->
+<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
+<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
+```
+
+Теперь мы можем использовать библиотеку. http://jqueryui.com
+
 ### jQuery UI как стандарт реализации API плагинов jQuery
 
+jQuery UI плагины работают стандартным для jQuery способом: как функция-метод, принадлежащая jQuery-объектам, найденным по селектору:
+
+```javascript
+$( "#draggable" ).draggable();
+```
+
+В этом примере плагин `draggable` применяется к элементу с id="draggable". http://jqueryui.com/draggable/
+
 #### Инициализация
 
+При инициализации плагину могут передаваться определенные настройки с помощью ассоциативного массива:
+
+```javascript
+    $( "#draggable" ).draggable({ axis: "y" });
+    $( "#draggable2" ).draggable({ axis: "x" });
+
+    $( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false });
+    $( "#draggable4" ).draggable({ containment: "parent" });
+```
+
+или же с параметрами по умолчанию:
+
+```javascript
+$( "#draggable" ).draggable();
+```
+
+Набор параметров и их описание ищите в документации к плагину.
+
 #### Методы
 
+Методы плагина позволяют оперировать с плагином в процессе его использования. Метод передается *строкой* в качестве первого параметра функции-плагина:
+
+```javascript
+var options = $( "#draggable" ).draggable( "option" );
+```
+
+Пример выше вызывает метод `option`, результат в форме ассоциативного массива сохраняется в переменной `options`.
+
+Для задания настроек:
+```javascript
+$( "#draggable" ).draggable( "option", { disabled: true } );
+```
+Вторым параметром идет ассоциативный массив с настройками для обновления внутри плагина. Обычно набор опций при инициализации совпадает с набором
+опций метода `option`.
+
+Для удаления плагина обычно существует метод `destroy`:
+
+```javascript
+$( "#draggable" ).draggable( "destroy" );
+```
+
+Документация для ознакомления: http://api.jqueryui.com/draggable/
+
 ## Chaining
 
+jQuery позволяет объединять несколько вызовов методов в *цепочки* следующим образом:
+
+```javascript
+$(this).css({"font-size": "2em"}).html("clicked")
+```
+https://repl.it/E8Fc/10
+
+В этом примере две операции объединены через точку. Это реализуется с помощью `return this`.
+
 ## AJAX/AJAJ
 
+**Asynchronous Javascript And XML** - изначально задумка M$, для получения возможности обращаться к серверам незаметно для пользователя из JS-кода.
+Представлена одним дополнительным объектом (XMLHttpRequest). jQuery предоставляет свою обертку над этим объектом, которая более удобна в использовании:
+
+```javascript
+$.get( "URL", function( data ) {
+    alert(data);
+});
+```
+
+Эта технология может передавать не только XML, но и любые другие данные; таким образом не совсем корректно называть её AJAX. В JS удобно работать
+с JSON, посему можно назвать это AJAJ. 
+
+**Задание:** прочитать данные и представить в виде ассоциативного массива из источника: [JSON](https://raw.githubusercontent.com/David-Haim/CountriesToCitiesJSON/master/countriesToCities.json)
+
 ### GET и POST
 
+Существует два основных HTTP метода - **GET** и **POST**.
+
+#### GET
+
+**GET** в целом аналогичен обычному посещению страницы или получению статического файла. Есть возможность отправить данные на сервер только с помощью
+**cookies** или параметров **GET**, которые идут после знака ? в конце **URL**: https://www.google.com.ua/search?client=opera&q=get+url&sourceid=opera&ie=UTF-8&oe=UTF-8
+
+- `=` отделяет параметр от значения
+- `&` отделяет пары параметр-значения друг от друга
+- ` ` (пробел) заменяется на `+`.
+- и кое-что еще, погуглите.
+
+#### POST
+
+Двунаправленное общение браузера с сервером обычно предполагает метод **POST** или иной. Метод **POST** позволяет отправлять данные в *теле запроса* а не в
+URL (как метод GET). Таким образом обычно отправляются данные форм, файлы и так далее. Мы будем использовать **POST** для отправки JSON на сервер.
+
+