diff --git a/1-js/2-first-steps/5-variables/variable-change.svg b/1-js/2-first-steps/5-variables/variable-change.svg index c19d0827..b28c49be 100644 --- a/1-js/2-first-steps/5-variables/variable-change.svg +++ b/1-js/2-first-steps/5-variables/variable-change.svg @@ -11,13 +11,13 @@ - + "World!" - + "Hello!" diff --git a/1-js/2-first-steps/5-variables/variable.svg b/1-js/2-first-steps/5-variables/variable.svg index 27528808..44fa8557 100644 --- a/1-js/2-first-steps/5-variables/variable.svg +++ b/1-js/2-first-steps/5-variables/variable.svg @@ -12,7 +12,7 @@ - + "Hello!" diff --git a/1-js/3-writing-js/2-coding-style/code-style.svg b/1-js/3-writing-js/2-coding-style/code-style.svg index 64fa7c07..40aeb08b 100644 --- a/1-js/3-writing-js/2-coding-style/code-style.svg +++ b/1-js/3-writing-js/2-coding-style/code-style.svg @@ -6,87 +6,85 @@ - - - - - - - - - 2 - - - - - - Между именем функции - и скобкой ( нет пробела - - - - - Отступ - 2 пробела - - - - - Пробел после for - - - - - } else { без перевода строки - - - - - Пробелы вокруг - вложенного вызова - - - - - - - пустая строка - между - логическими блоками - - - - - длина строки - не более 80 символов - - - - - точка с запятой ; - обязательна - - - - - Фигурная скобка { - на той же строке, через пробел - - - - - - - Пробел между - параметрами - - - - - Пробел между - параметрами - - + + + + + + + + 2 + + + + + + Между именем функции + и скобкой ( нет пробела + + + + + Отступ + 2 пробела + + + + + Пробел после for + + + + + } else { без перевода строки + + + + + Пробелы вокруг + вложенного вызова + + + + + + + пустая строка + между + логическими блоками + + + + + длина строки + не более 80 символов + + + + + точка с запятой ; + обязательна + + + + + Фигурная скобка { + на той же строке, через пробел + + + + + + + Пробел между + параметрами + + + + + Пробел между + параметрами + \ No newline at end of file diff --git a/1-js/4-data-structures/6-object-reference/variable-copy-value.svg b/1-js/4-data-structures/6-object-reference/variable-copy-value.svg index 83b9e7d1..f28a7c20 100644 --- a/1-js/4-data-structures/6-object-reference/variable-copy-value.svg +++ b/1-js/4-data-structures/6-object-reference/variable-copy-value.svg @@ -12,7 +12,7 @@ - + "Привет!" @@ -27,7 +27,7 @@ - + "Привет!" diff --git a/1-js/4-data-structures/7-array/array-speed.svg b/1-js/4-data-structures/7-array/array-speed.svg index 7c097bbf..d6d5b45f 100644 --- a/1-js/4-data-structures/7-array/array-speed.svg +++ b/1-js/4-data-structures/7-array/array-speed.svg @@ -8,18 +8,18 @@ - + 0 - + 1 - + 2 - + 3 diff --git a/2-ui/1-document/16-metrics-window/document-client-width-height.svg b/2-ui/1-document/16-metrics-window/document-client-width-height.svg index cb9f6b69..b88a533f 100644 --- a/2-ui/1-document/16-metrics-window/document-client-width-height.svg +++ b/2-ui/1-document/16-metrics-window/document-client-width-height.svg @@ -6,7 +6,7 @@ - + @@ -16,14 +16,18 @@ - - - documentElement.clientHeight + documentElement.clientHeight - document.documentElement.clientWidth + document.documentElement.clientWidth + + + + + + \ No newline at end of file diff --git a/2-ui/2-events-and-interfaces/4-event-bubbling/article.md b/2-ui/2-events-and-interfaces/4-event-bubbling/article.md index 4d490766..bc3ba0ce 100644 --- a/2-ui/2-events-and-interfaces/4-event-bubbling/article.md +++ b/2-ui/2-events-and-interfaces/4-event-bubbling/article.md @@ -36,7 +36,7 @@ Всплытие гарантирует, что клик по внутреннему `

` вызовет обработчик `onclick` (если есть) сначала на самом `

`, затем на элементе `

` далее на элементе `
`, и так далее вверх по цепочке родителей до самого `document`. -Порядок всплытия событий +Порядок всплытия событий Поэтому если в примере выше кликнуть на `P`, то последовательно выведутся `alert`: `p` -> `div` -> `form`. @@ -129,7 +129,7 @@ В [стандарте DOM Events 3](http://www.w3.org/TR/DOM-Level-3-Events/) это продемонстрировано так: - + То есть, при клике на `TD` событие путешествует по цепочке родителей сначала вниз к элементу ("погружается"), а потом наверх ("всплывает"), по пути задействуя обработчики. diff --git a/2-ui/2-events-and-interfaces/4-event-bubbling/event-order-bubbling.png b/2-ui/2-events-and-interfaces/4-event-bubbling/event-order-bubbling.png deleted file mode 100755 index 32825548..00000000 Binary files a/2-ui/2-events-and-interfaces/4-event-bubbling/event-order-bubbling.png and /dev/null differ diff --git a/2-ui/2-events-and-interfaces/4-event-bubbling/event-order-bubbling.svg b/2-ui/2-events-and-interfaces/4-event-bubbling/event-order-bubbling.svg new file mode 100644 index 00000000..4a1fbbaf --- /dev/null +++ b/2-ui/2-events-and-interfaces/4-event-bubbling/event-order-bubbling.svg @@ -0,0 +1,29 @@ + + + + event-order-bubbling.svg + Created with bin/sketchtool. + + + + + + + + + 1 + + + 2 + + + 3 + + + Самый глубокий + элемент + + + + + \ No newline at end of file diff --git a/2-ui/2-events-and-interfaces/4-event-bubbling/eventflow.png b/2-ui/2-events-and-interfaces/4-event-bubbling/eventflow.png deleted file mode 100755 index 5c010aad..00000000 Binary files a/2-ui/2-events-and-interfaces/4-event-bubbling/eventflow.png and /dev/null differ diff --git a/2-ui/2-events-and-interfaces/4-event-bubbling/eventflow.svg b/2-ui/2-events-and-interfaces/4-event-bubbling/eventflow.svg new file mode 100644 index 00000000..2d073078 --- /dev/null +++ b/2-ui/2-events-and-interfaces/4-event-bubbling/eventflow.svg @@ -0,0 +1,194 @@ + + + DOM Level 3 Events: Event Flow + Alternate description + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Window + + + + + + + Document + + + + + + <html> + + + + + <body> + + + + + <table> + + + + + <tbody> + + + + + <tr> + + + + + <tr> + + + + + + <td> + + + + + Shady Grove + + + + + + <td> + + + + + Aeolian + + + + + + <td> + + + + + + Over the River, Charlie + + + + + + + <td> + + + + + Dorian + + + + + + + + + + + + + + + + + + + + + + + + Capture Phase (1) + + + + + + + + + + + + + Target Phase (2) + + + + + + Bubbling Phase (3) + + + + + + + + + + + + diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/article.md b/2-ui/2-events-and-interfaces/5-event-delegation/article.md index 1cfe0435..370fd03c 100644 --- a/2-ui/2-events-and-interfaces/5-event-delegation/article.md +++ b/2-ui/2-events-and-interfaces/5-event-delegation/article.md @@ -79,7 +79,7 @@ function highlight(node) { Естественно, клик может произойти внутри ``, на элементе ``. Такой клик будет пойман единым обработчиком, но `target` у него будет не ``, а ``: - + Внутри обработчика `table.onclick` мы должны по `event.target` разобраться, в каком именно `` был клик. diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/bagua-bubble.svg b/2-ui/2-events-and-interfaces/5-event-delegation/bagua-bubble.svg new file mode 100644 index 00000000..67b77c88 --- /dev/null +++ b/2-ui/2-events-and-interfaces/5-event-delegation/bagua-bubble.svg @@ -0,0 +1,24 @@ + + + + bagua-bubble.svg + Created with bin/sketchtool. + + + + + + + + + <table> + + + <td> + + + <strong> + + + + \ No newline at end of file diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/bagua.png b/2-ui/2-events-and-interfaces/5-event-delegation/bagua.png deleted file mode 100755 index 87a1641b..00000000 Binary files a/2-ui/2-events-and-interfaces/5-event-delegation/bagua.png and /dev/null differ diff --git a/3-more/1-webcomponents/7-webcomponent-build/article.md b/3-more/1-webcomponents/7-webcomponent-build/article.md index d34c8b9a..8366fceb 100644 --- a/3-more/1-webcomponents/7-webcomponent-build/article.md +++ b/3-more/1-webcomponents/7-webcomponent-build/article.md @@ -289,11 +289,8 @@ if ( !jQuery.contains( elem.ownerDocument, elem ) ) {
  • Можно использовать произвольную библиотеку, такую как jQuery, и работать с Shadow DOM с её использованием. Но возможны проблемки. Выше была продемонстрирована одна из них, могут быть и другие.
    • +Пока веб-компоненты ещё не являются законченными стандартами, можно попробовать [Polymer](http://www.polymer-project.org) -- это самый известный из полифиллов на тему веб-компонент. -Самый известный из полифиллов на тему веб-компонент -- это [Polymer](http://www.polymer-project.org). Он старается их эмулировать по возможности кросс-браузерно, но пока что это довольно-таки сложно, в частности, необходима дополнительная разметка. - -Текущее состояние веб-стандартов -- "взгляд в будущее". Наверно, будет здорово, когда оно наступит. - - +Он старается их эмулировать по возможности кросс-браузерно, но пока что это довольно-таки сложно, в частности, необходима дополнительная разметка. diff --git a/3-more/10-ajax/5-xhr-longpoll/longpoll/.zip b/3-more/10-ajax/5-xhr-longpoll/longpoll/.zip deleted file mode 100755 index d3f5a12f..00000000 --- a/3-more/10-ajax/5-xhr-longpoll/longpoll/.zip +++ /dev/null @@ -1 +0,0 @@ - diff --git a/3-more/10-ajax/8-xhr-resume/upload-2way/.zip b/3-more/10-ajax/8-xhr-resume/upload-2way/.zip deleted file mode 100755 index d3f5a12f..00000000 --- a/3-more/10-ajax/8-xhr-resume/upload-2way/.zip +++ /dev/null @@ -1 +0,0 @@ - diff --git a/3-more/10-ajax/8-xhr-resume/upload-resume/.zip b/3-more/10-ajax/8-xhr-resume/upload-resume/.zip deleted file mode 100755 index d3f5a12f..00000000 --- a/3-more/10-ajax/8-xhr-resume/upload-resume/.zip +++ /dev/null @@ -1 +0,0 @@ - diff --git a/3-more/11-css-for-js/10-box-sizing/article.md b/3-more/11-css-for-js/10-box-sizing/article.md index 123c953f..0baa65ed 100644 --- a/3-more/11-css-for-js/10-box-sizing/article.md +++ b/3-more/11-css-for-js/10-box-sizing/article.md @@ -28,7 +28,7 @@ div { } ``` - + В верхнем случае браузер нарисовал весь элемент размером в `width x height`, в нижнем -- интерпретировал `width/height` как размеры внутренней области. diff --git a/3-more/11-css-for-js/10-box-sizing/border-box.png b/3-more/11-css-for-js/10-box-sizing/border-box.png deleted file mode 100755 index 84b57c72..00000000 Binary files a/3-more/11-css-for-js/10-box-sizing/border-box.png and /dev/null differ diff --git a/3-more/11-css-for-js/10-box-sizing/border-box.svg b/3-more/11-css-for-js/10-box-sizing/border-box.svg new file mode 100644 index 00000000..8a15225d --- /dev/null +++ b/3-more/11-css-for-js/10-box-sizing/border-box.svg @@ -0,0 +1,40 @@ + + + + border-box + Created with Sketch. + + + + + Содержимое + + + Содержимое + + + + + + + + + border-box + + + content-box + + + + + + + + border: 5px; + + padding: 20px; + + + + + \ No newline at end of file diff --git a/3-more/10-ajax/1-ajax-intro/article.md b/3-more/2-ajax/1-ajax-intro/article.md similarity index 56% rename from 3-more/10-ajax/1-ajax-intro/article.md rename to 3-more/2-ajax/1-ajax-intro/article.md index f151012a..659e3aa2 100644 --- a/3-more/10-ajax/1-ajax-intro/article.md +++ b/3-more/2-ajax/1-ajax-intro/article.md @@ -1,50 +1,31 @@ # Введение в AJAX и COMET -В этой статье AJAX описывается на уровне возможностей и примеров. Рассмотрены особенности асинхронного взаимодействия и примеры использования, но с минимумом технических деталей. +В этой главе мы "обзорно", на уровне возможностей и примеров рассмотрим технологию AJAX. Пока что с минимумом технических деталей. -Надеюсь, она будет полезна для понимания, что такое AJAX и с чем его едят. +Она будет полезна для понимания, что такое AJAX и с чем его едят. [cut] ## Что такое AJAX? -AJAX ("Asynchronous Javascript And Xml") -- технология обращения к серверу без перезагрузки страницы. +AJAX (аббревиатура от "Asynchronous Javascript And Xml") -- технология обращения к серверу без перезагрузки страницы. За счет этого уменьшается время отклика и веб-приложение по интерактивности больше напоминает десктоп. -Например, при нажатии кнопки голосовать -- из браузера на сервер будет отправлено сообщение, а сервер ответит браузеру, что голос принят. - - - -Обратите внимание, текст кнопки после голосования предоставляется сервером и обновляется лишь после его ответа! - Несмотря на то, что в названии технологии присутствует буква `X` (от слова XML), использовать XML вовсе не обязательно. Под AJAX подразумевают любое общение с сервером без перезагрузки страницы, организованное при помощи JavaScript. ## Что я могу сделать с помощью AJAX?
    Элементы интерфейса
    -
    -В первую очередь AJAX полезен для небольших элементов, связанных с элементарными действиями: добавить в корзину, подписаться, и т.п. +
    В первую очередь AJAX полезен для форм и кнопок, связанных с элементарными действиями: добавить в корзину, подписаться, и т.п. - - - - - - -
    - -Сейчас -- в порядке вещей, что голосование на сайтах осуществляется без перезагрузки страницы. +Сейчас -- в порядке вещей, что такие действия на сайтах осуществляются без перезагрузки страницы.
    Динамическая подгрузка данных
    -
    Например, дерево, которое при открытии узла запрашивает данные у сервера: - -[iframe src="tree.html" height=200 border=1] -
    +
    Например, дерево, которое при раскрытии узла запрашивает данные у сервера.
    Живой поиск
    -
    -*Живой поиск* -- классический пример использования AJAX, взятый на вооружение современными поисковыми системами. +
    *Живой поиск* -- классический пример использования AJAX, взятый на вооружение современными поисковыми системами. Пользователь начинает печатать поисковую фразу, а JavaScript предлагает возможные варианты, получая список самых вероятных дополнений с сервера. @@ -52,26 +33,19 @@ AJAX ("Asynchronous Javascript And Xml") -- техн Код, который это обеспечивает, работает следующим образом.
      -
    1. Активируется примерно при каждом нажатии клавиши -
        -
      • Время посылки последнего запроса отслеживается
        • -
      • Для "обычной" скорости печати - запрос отсылается при каждом нажатии
        • -
      • Для "программистской" скорости - каждые несколько нажатий
        • +
      • Код активируется примерно при каждом нажатии клавиши, но не чаще чем раз в 100мс (примерно).
      2. -
    2. Создается скрытый DIV, который показывается при начале печати
      3. -
    3. DIV заполняется ответом сервера +
    4. Создается скрытый DIV и заполняется ответом сервера:
      • Текущий результат подсвечен, можно перемещаться и выбирать
      • При нажатии правой стрелки или при клике -- поиск в подрезультатах
      5. -
    5. Результаты кешируются -
        -
      • При нажатии на Backspace, обращения к серверу не происходит
        • +
      • Результаты запросов кешируются, повторных обращений к серверу не происходит.
      6. -
    6. В Google не только предлагаются варианты, но система тут же инициирует и сам поиск, т.е. не нужно даже жать Enter.
      7. +
    7. В Google не только предлагаются варианты, но система тут же инициирует и сам поиск, т.е. не нужно даже нажимать [key Enter].
    @@ -90,7 +64,7 @@ AJAX ("Asynchronous Javascript And Xml") -- техн [COMET](http://ru.wikipedia.org/wiki/Comet_(%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5) -- общий термин, описывающий различные техники получения данных по инициативе сервера. -Можно сказать, что AJAX -- это "нажал на кнопку -- получил результат", а COMET -- это "просто сижу и наблюдаю за результатами". +Можно сказать, что AJAX -- это "отправил запрос -- получил результат", а COMET -- это "непрерывный канал, по которому приходят данные". Примеры COMET-приложений: @@ -110,22 +84,3 @@ AJAX ("Asynchronous Javascript And Xml") -- техн В принципе, можно начать их использовать и не зная, что внутри. Но, скорее всего, вам всё равно понадобится отлаживать ошибки, смотреть детали коммуникации, выбирать наилучшее решение для конкретной задачи, и здесь обязательно разбираться, как это всё работает. - -[head] - -[/head] \ No newline at end of file diff --git a/3-more/10-ajax/1-ajax-intro/suggest.png b/3-more/2-ajax/1-ajax-intro/suggest.png old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/1-ajax-intro/suggest.png rename to 3-more/2-ajax/1-ajax-intro/suggest.png diff --git a/3-more/10-ajax/1-ajax-intro/tree.html b/3-more/2-ajax/1-ajax-intro/tree.html old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/1-ajax-intro/tree.html rename to 3-more/2-ajax/1-ajax-intro/tree.html diff --git a/3-more/10-ajax/10-ajax-jsonp/article.md b/3-more/2-ajax/10-ajax-jsonp/article.md similarity index 100% rename from 3-more/10-ajax/10-ajax-jsonp/article.md rename to 3-more/2-ajax/10-ajax-jsonp/article.md diff --git a/3-more/10-ajax/10-ajax-jsonp/scriptRequest.js b/3-more/2-ajax/10-ajax-jsonp/scriptRequest.js old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/10-ajax-jsonp/scriptRequest.js rename to 3-more/2-ajax/10-ajax-jsonp/scriptRequest.js diff --git a/3-more/10-ajax/11-server-sent-events/article.md b/3-more/2-ajax/11-server-sent-events/article.md similarity index 100% rename from 3-more/10-ajax/11-server-sent-events/article.md rename to 3-more/2-ajax/11-server-sent-events/article.md diff --git a/3-more/10-ajax/11-server-sent-events/browser.js b/3-more/2-ajax/11-server-sent-events/browser.js old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/11-server-sent-events/browser.js rename to 3-more/2-ajax/11-server-sent-events/browser.js diff --git a/3-more/10-ajax/11-server-sent-events/eventsource/browser.js b/3-more/2-ajax/11-server-sent-events/eventsource/browser.js old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/11-server-sent-events/eventsource/browser.js rename to 3-more/2-ajax/11-server-sent-events/eventsource/browser.js diff --git a/3-more/10-ajax/11-server-sent-events/eventsource/index.html b/3-more/2-ajax/11-server-sent-events/eventsource/index.html old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/11-server-sent-events/eventsource/index.html rename to 3-more/2-ajax/11-server-sent-events/eventsource/index.html diff --git a/3-more/10-ajax/11-server-sent-events/eventsource/index.js b/3-more/2-ajax/11-server-sent-events/eventsource/index.js old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/11-server-sent-events/eventsource/index.js rename to 3-more/2-ajax/11-server-sent-events/eventsource/index.js diff --git a/3-more/10-ajax/11-server-sent-events/index.js b/3-more/2-ajax/11-server-sent-events/index.js old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/11-server-sent-events/index.js rename to 3-more/2-ajax/11-server-sent-events/index.js diff --git a/3-more/10-ajax/12-ajax-iframe/article.md b/3-more/2-ajax/12-ajax-iframe/article.md similarity index 100% rename from 3-more/10-ajax/12-ajax-iframe/article.md rename to 3-more/2-ajax/12-ajax-iframe/article.md diff --git a/3-more/10-ajax/12-ajax-iframe/samedomain.js b/3-more/2-ajax/12-ajax-iframe/samedomain.js old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/12-ajax-iframe/samedomain.js rename to 3-more/2-ajax/12-ajax-iframe/samedomain.js diff --git a/3-more/10-ajax/12-ajax-iframe/samedomain/.zip b/3-more/2-ajax/12-ajax-iframe/samedomain/.zip old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/12-ajax-iframe/samedomain/.zip rename to 3-more/2-ajax/12-ajax-iframe/samedomain/.zip diff --git a/3-more/10-ajax/12-ajax-iframe/samedomain/iframe.js b/3-more/2-ajax/12-ajax-iframe/samedomain/iframe.js old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/12-ajax-iframe/samedomain/iframe.js rename to 3-more/2-ajax/12-ajax-iframe/samedomain/iframe.js diff --git a/3-more/10-ajax/12-ajax-iframe/samedomain/index.html b/3-more/2-ajax/12-ajax-iframe/samedomain/index.html old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/12-ajax-iframe/samedomain/index.html rename to 3-more/2-ajax/12-ajax-iframe/samedomain/index.html diff --git a/3-more/10-ajax/12-ajax-iframe/samedomain/samedomain.js b/3-more/2-ajax/12-ajax-iframe/samedomain/samedomain.js old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/12-ajax-iframe/samedomain/samedomain.js rename to 3-more/2-ajax/12-ajax-iframe/samedomain/samedomain.js diff --git a/3-more/10-ajax/12-ajax-iframe/samedomain/samedomain.php b/3-more/2-ajax/12-ajax-iframe/samedomain/samedomain.php old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/12-ajax-iframe/samedomain/samedomain.php rename to 3-more/2-ajax/12-ajax-iframe/samedomain/samedomain.php diff --git a/3-more/10-ajax/13-ajax-iframe-htmlfile/activex/.zip b/3-more/2-ajax/13-ajax-iframe-htmlfile/activex/.zip old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/13-ajax-iframe-htmlfile/activex/.zip rename to 3-more/2-ajax/13-ajax-iframe-htmlfile/activex/.zip diff --git a/3-more/10-ajax/13-ajax-iframe-htmlfile/activex/activex.js b/3-more/2-ajax/13-ajax-iframe-htmlfile/activex/activex.js old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/13-ajax-iframe-htmlfile/activex/activex.js rename to 3-more/2-ajax/13-ajax-iframe-htmlfile/activex/activex.js diff --git a/3-more/10-ajax/13-ajax-iframe-htmlfile/activex/index.html b/3-more/2-ajax/13-ajax-iframe-htmlfile/activex/index.html old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/13-ajax-iframe-htmlfile/activex/index.html rename to 3-more/2-ajax/13-ajax-iframe-htmlfile/activex/index.html diff --git a/3-more/10-ajax/13-ajax-iframe-htmlfile/activex/samedomain.php b/3-more/2-ajax/13-ajax-iframe-htmlfile/activex/samedomain.php old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/13-ajax-iframe-htmlfile/activex/samedomain.php rename to 3-more/2-ajax/13-ajax-iframe-htmlfile/activex/samedomain.php diff --git a/3-more/10-ajax/13-ajax-iframe-htmlfile/article.md b/3-more/2-ajax/13-ajax-iframe-htmlfile/article.md similarity index 100% rename from 3-more/10-ajax/13-ajax-iframe-htmlfile/article.md rename to 3-more/2-ajax/13-ajax-iframe-htmlfile/article.md diff --git a/3-more/10-ajax/14-ajax-iframe-xdomain/article.md b/3-more/2-ajax/14-ajax-iframe-xdomain/article.md similarity index 100% rename from 3-more/10-ajax/14-ajax-iframe-xdomain/article.md rename to 3-more/2-ajax/14-ajax-iframe-xdomain/article.md diff --git a/3-more/10-ajax/14-ajax-iframe-xdomain/name.js b/3-more/2-ajax/14-ajax-iframe-xdomain/name.js old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/14-ajax-iframe-xdomain/name.js rename to 3-more/2-ajax/14-ajax-iframe-xdomain/name.js diff --git a/3-more/10-ajax/14-ajax-iframe-xdomain/name/.zip b/3-more/2-ajax/14-ajax-iframe-xdomain/name/.zip old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/14-ajax-iframe-xdomain/name/.zip rename to 3-more/2-ajax/14-ajax-iframe-xdomain/name/.zip diff --git a/3-more/10-ajax/14-ajax-iframe-xdomain/name/anydomain.php b/3-more/2-ajax/14-ajax-iframe-xdomain/name/anydomain.php old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/14-ajax-iframe-xdomain/name/anydomain.php rename to 3-more/2-ajax/14-ajax-iframe-xdomain/name/anydomain.php diff --git a/3-more/10-ajax/14-ajax-iframe-xdomain/name/blank.html b/3-more/2-ajax/14-ajax-iframe-xdomain/name/blank.html old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/14-ajax-iframe-xdomain/name/blank.html rename to 3-more/2-ajax/14-ajax-iframe-xdomain/name/blank.html diff --git a/3-more/10-ajax/14-ajax-iframe-xdomain/name/iframe.js b/3-more/2-ajax/14-ajax-iframe-xdomain/name/iframe.js old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/14-ajax-iframe-xdomain/name/iframe.js rename to 3-more/2-ajax/14-ajax-iframe-xdomain/name/iframe.js diff --git a/3-more/10-ajax/14-ajax-iframe-xdomain/name/index.html b/3-more/2-ajax/14-ajax-iframe-xdomain/name/index.html old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/14-ajax-iframe-xdomain/name/index.html rename to 3-more/2-ajax/14-ajax-iframe-xdomain/name/index.html diff --git a/3-more/10-ajax/14-ajax-iframe-xdomain/name/name.js b/3-more/2-ajax/14-ajax-iframe-xdomain/name/name.js old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/14-ajax-iframe-xdomain/name/name.js rename to 3-more/2-ajax/14-ajax-iframe-xdomain/name/name.js diff --git a/3-more/10-ajax/14-ajax-iframe-xdomain/postmessage.js b/3-more/2-ajax/14-ajax-iframe-xdomain/postmessage.js old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/14-ajax-iframe-xdomain/postmessage.js rename to 3-more/2-ajax/14-ajax-iframe-xdomain/postmessage.js diff --git a/3-more/10-ajax/14-ajax-iframe-xdomain/postmessage/.zip b/3-more/2-ajax/14-ajax-iframe-xdomain/postmessage/.zip old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/14-ajax-iframe-xdomain/postmessage/.zip rename to 3-more/2-ajax/14-ajax-iframe-xdomain/postmessage/.zip diff --git a/3-more/10-ajax/14-ajax-iframe-xdomain/postmessage/anydomain.php b/3-more/2-ajax/14-ajax-iframe-xdomain/postmessage/anydomain.php old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/14-ajax-iframe-xdomain/postmessage/anydomain.php rename to 3-more/2-ajax/14-ajax-iframe-xdomain/postmessage/anydomain.php diff --git a/3-more/10-ajax/14-ajax-iframe-xdomain/postmessage/iframe.js b/3-more/2-ajax/14-ajax-iframe-xdomain/postmessage/iframe.js old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/14-ajax-iframe-xdomain/postmessage/iframe.js rename to 3-more/2-ajax/14-ajax-iframe-xdomain/postmessage/iframe.js diff --git a/3-more/10-ajax/14-ajax-iframe-xdomain/postmessage/index.html b/3-more/2-ajax/14-ajax-iframe-xdomain/postmessage/index.html old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/14-ajax-iframe-xdomain/postmessage/index.html rename to 3-more/2-ajax/14-ajax-iframe-xdomain/postmessage/index.html diff --git a/3-more/10-ajax/14-ajax-iframe-xdomain/postmessage/postmessage.js b/3-more/2-ajax/14-ajax-iframe-xdomain/postmessage/postmessage.js old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/14-ajax-iframe-xdomain/postmessage/postmessage.js rename to 3-more/2-ajax/14-ajax-iframe-xdomain/postmessage/postmessage.js diff --git a/3-more/10-ajax/15-comet-iframe/article.md b/3-more/2-ajax/15-comet-iframe/article.md similarity index 100% rename from 3-more/10-ajax/15-comet-iframe/article.md rename to 3-more/2-ajax/15-comet-iframe/article.md diff --git a/3-more/10-ajax/15-comet-iframe/comet.png b/3-more/2-ajax/15-comet-iframe/comet.png old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/15-comet-iframe/comet.png rename to 3-more/2-ajax/15-comet-iframe/comet.png diff --git a/3-more/10-ajax/15-comet-iframe/iframeComet.js b/3-more/2-ajax/15-comet-iframe/iframeComet.js old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/15-comet-iframe/iframeComet.js rename to 3-more/2-ajax/15-comet-iframe/iframeComet.js diff --git a/3-more/10-ajax/16-ajax-summary/article.md b/3-more/2-ajax/16-ajax-summary/article.md similarity index 100% rename from 3-more/10-ajax/16-ajax-summary/article.md rename to 3-more/2-ajax/16-ajax-summary/article.md diff --git a/3-more/10-ajax/2-ajax-nodejs/article.md b/3-more/2-ajax/2-ajax-nodejs/article.md similarity index 92% rename from 3-more/10-ajax/2-ajax-nodejs/article.md rename to 3-more/2-ajax/2-ajax-nodejs/article.md index 1184ed57..2507ce03 100644 --- a/3-more/10-ajax/2-ajax-nodejs/article.md +++ b/3-more/2-ajax/2-ajax-nodejs/article.md @@ -2,11 +2,11 @@ В этом разделе предлагаются задачи по теме AJAX. -Конечно же, они требуют взаимодействия с сервером. Чтобы не давать преимущества ни одному из серверных языков программирования ;), мы будем использовать серверную часть, написанную на Node.JS. +Конечно же, они требуют взаимодействия с сервером. Мы будем использовать серверную часть, написанную на JavaScript, на Node.JS. [cut] -Если вы не использовали Node.JS ранее -- не беспокойтесь. Здесь нашей целью является преимущественно клиентская часть, поэтому прямо сейчас изучать Node.JS не обязательно. Серверные скрипты уже готовы. Нужно только поставить и добавить модулей, чтобы их запускать. +Если вы не использовали Node.JS ранее -- не беспокойтесь. Здесь нашей целью является преимущественно клиентская часть, поэтому прямо сейчас изучать Node.JS не обязательно. Серверные скрипты уже готовы. Нужно только поставить Node.JS и модули, чтобы их запускать. ## Установка diff --git a/3-more/10-ajax/2-ajax-nodejs/example/.zip b/3-more/2-ajax/2-ajax-nodejs/example/.zip old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/2-ajax-nodejs/example/.zip rename to 3-more/2-ajax/2-ajax-nodejs/example/.zip diff --git a/3-more/10-ajax/2-ajax-nodejs/example/index.html b/3-more/2-ajax/2-ajax-nodejs/example/index.html old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/2-ajax-nodejs/example/index.html rename to 3-more/2-ajax/2-ajax-nodejs/example/index.html diff --git a/3-more/10-ajax/2-ajax-nodejs/example/index.js b/3-more/2-ajax/2-ajax-nodejs/example/index.js old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/2-ajax-nodejs/example/index.js rename to 3-more/2-ajax/2-ajax-nodejs/example/index.js diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-async/.zip b/3-more/2-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-async.view/.zip old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-async/.zip rename to 3-more/2-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-async.view/.zip diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-async/index.html b/3-more/2-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-async.view/index.html old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-async/index.html rename to 3-more/2-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-async.view/index.html diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-async/phones.json b/3-more/2-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-async.view/phones.json old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-async/phones.json rename to 3-more/2-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-async.view/phones.json diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-async/index.js b/3-more/2-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-async.view/server.js old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-async/index.js rename to 3-more/2-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-async.view/server.js diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-list/.zip b/3-more/2-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-list.view/.zip old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-list/.zip rename to 3-more/2-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-list.view/.zip diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-list/index.html b/3-more/2-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-list.view/index.html old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-list/index.html rename to 3-more/2-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-list.view/index.html diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-list/phones.json b/3-more/2-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-list.view/phones.json old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-list/phones.json rename to 3-more/2-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-list.view/phones.json diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-list/index.js b/3-more/2-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-list.view/server.js old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-list/index.js rename to 3-more/2-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-list.view/server.js diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/solution.md b/3-more/2-ajax/3-ajax-xmlhttprequest/1-phones-list/solution.md similarity index 80% rename from 3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/solution.md rename to 3-more/2-ajax/3-ajax-xmlhttprequest/1-phones-list/solution.md index 4bb95319..abfc3d8c 100644 --- a/3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/solution.md +++ b/3-more/2-ajax/3-ajax-xmlhttprequest/1-phones-list/solution.md @@ -7,6 +7,8 @@ function loadPhones() { xhr.open('GET', 'phones.json', true); + xhr.send(); + xhr.onreadystatechange = function() { if (xhr.readyState != 4) return; @@ -28,8 +30,6 @@ function loadPhones() { } - xhr.send(""); - button.innerHTML = 'Загружаю...'; button.disabled = true; } @@ -47,8 +47,8 @@ function showPhones(phones) { ``` Полное решение с возможнотью скачать: -[iframe src="phones-list" height="100" border="1" zip] +[codetabs src="phones-list" height="100"] Обратите внимание -- код обрабатывает возможную ошибку при чтении JSON при помощи `try..catch`. -Технически, это такая же ошибка, как и `status != 200`, так как сервер обязан присылать корректный JSON, поэтому если уж обрабатываем ошибки запроса, то и её тоже. +Технически, это такая же ошибка, как и `status != 200`. Ведь сервер обязан присылать корректный JSON. Поэтому если уж обрабатываем ошибки запроса, то и её тоже. diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/task.md b/3-more/2-ajax/3-ajax-xmlhttprequest/1-phones-list/task.md similarity index 81% rename from 3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/task.md rename to 3-more/2-ajax/3-ajax-xmlhttprequest/1-phones-list/task.md index 5a0422fa..21e354a5 100644 --- a/3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/task.md +++ b/3-more/2-ajax/3-ajax-xmlhttprequest/1-phones-list/task.md @@ -5,9 +5,8 @@ Создайте код, который загрузит файл `phones.json` из текущей директории и выведет все названия телефонов из него в виде списка. Демо результата: -[iframe src="phones-list" height="100" border="1"] - +[iframe src="phones-list" height="100"] Исходный код просто выводит содержимое файла (скачайте к себе): -[iframe src="phones-async" border="1" zip] +[codetabs src="phones-async" height="100"] diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/article.md b/3-more/2-ajax/3-ajax-xmlhttprequest/article.md similarity index 58% rename from 3-more/10-ajax/3-ajax-xmlhttprequest/article.md rename to 3-more/2-ajax/3-ajax-xmlhttprequest/article.md index 2dcf7f20..4c1054f5 100644 --- a/3-more/10-ajax/3-ajax-xmlhttprequest/article.md +++ b/3-more/2-ajax/3-ajax-xmlhttprequest/article.md @@ -12,11 +12,7 @@ Как правило, `XMLHttpRequest` используют для загрузки данных. -Разберём его на примере ниже, в котором JavaScript осуществит загрузку файла `phones.json` и вывод содержимого: - -[iframe src="phones" border="1" zip] - -Код, который выполняется при нажатии на кнопку, по шагам: +Для начала посмотрим на пример использования, который загружает файл `phones.json` из текущей директории и выдаёт его содержимое: ```js *!* @@ -46,21 +42,27 @@ if (xhr.status != 200) { } ``` -Далее мы более подробно разберём основные методы и свойства `xhr`. +В действии: -## Методы open, send и abort +[codetabs src="phones"] -Эти три метода управляют основным потоком запроса: +Далее мы более подробно разберём основные методы и свойства объекта `XMLHttpRequest`, в том числе те, которые были использованы в этом коде. + +## Настроить: open + +Синтаксис: +```js +xhr.open(method, URL, async, user, password) +``` + +Этот метод -- как правило, вызывается первым после создания объекта `XMLHttpRequest`. -
    -
    `open(method, URL, async, user, password)`
    -
    Задаёт основные параметры запроса:
    • `method` -- HTTP-метод. Как правило, используется GET либо POST, хотя доступны и более экзотические, вроде TRACE/DELETE/PUT и т.п.
    • `URL` -- адрес запроса. Можно использовать не только http/https, но и другие протоколы, например `ftp://` и `file://`. -**При этом есть ограничения безопасности, называемые "Same Origin Policy": запрос со страницы можно отправлять только на тот же `протокол://домен:порт`, с которого она пришла. В следующих главах мы рассмотрим, как их можно обойти.** +При этом есть ограничения безопасности, называемые "Same Origin Policy": запрос со страницы можно отправлять только на тот же `протокол://домен:порт`, с которого она пришла. В следующих главах мы рассмотрим, как их можно обойти.
    • `async` -- если установлено в `false`, то запрос производится синхронно, если `true` -- асинхронно. @@ -71,18 +73,25 @@ if (xhr.status != 200) {
    • `user`, `password` -- логин и пароль для HTTP-авторизации, если нужны.
    -
    -
    `send([body])`
    -
    Отправить запрос на сервер. +[warn header="Вызов `open` не открывает соединение"] +Заметим, что вызов `open`, в противоположность своему названию (`open` - англ. "открыть") не открывает соединение. Он лишь настраивает запрос, а коммуникация инициируется методом `send`. +[/warn] +## Отослать данные: send -В `body` находится *тело* запроса. Не у всякого запроса есть тело, например у GET-запросов тела нет. +Синтаксис: +```js +xhr.send([body]) +``` -С другой стороны, в POST основные данные как раз передаются через `body`.
    -
    `abort()`
    -
    Прерывает выполнение запроса.
    -
    +Именно этод метод открывает соединение и отправляет запрос на сервер. -## Свойства status, statusText, responseText и responseXML +В `body` находится *тело* запроса. Не у всякого запроса есть тело, например у GET-запросов тела нет, а у POST -- основные данные как раз передаются через `body`. + +## Отмена: abort + +Вызов `xhr.abort()` прерывает выполнение запроса. + +## Ответ: status, statusText, responseText Основные свойства, содержащие ответ сервера: @@ -92,40 +101,53 @@ if (xhr.status != 200) {
    `statusText`
    Текстовое описание статуса от сервера: `OK` `Not Found`, `Forbidden` и так далее.
    `responseText`
    -
    Ответ сервера в виде текста.
    -
    `responseXml`
    +
    Текст ответа сервера.
    + + +Есть и ещё одно свойство, которое используется гораздо реже: + +
    +
    `responseXML`
    Если сервер вернул XML, снабдив его правильным заголовком `Content-type: text/xml`, то браузер создаст из него XML-документ. По нему можно будет делать запросы `xhr.responseXml.querySelector("...")` и другие. -Как правило, при общении с сервером используют не XML, а JSON. То есть, сервер возвращает JSON в виде текста, который браузер превращает в объект вызовом `JSON.parse(xhr.responseText)`. +Оно используется редко, так как обычно используют не XML, а JSON. То есть, сервер возвращает JSON в виде текста, который браузер превращает в объект вызовом `JSON.parse(xhr.responseText)`.
    +## Синхронные и асинхронные запросы -## Асинхронный вызов +Если в методе `open` установить параметр `async` равным `false` или просто забыть его указать, то запрос будет синхронным. -Синхронные вызовы имеют ряд важных отличий от асинхронных: +Синхронные вызовы используются чрезвычайно редко, так как блокируют взаимодействие со страницей до окончания загрузки. Посетитель не может даже прокручивать её. Никакой JavaScript не может быть выполнен, пока синхронный вызов не завершён -- в общем, в точности те же ограничения как `alert`. -
      -
    • Блокируют взаимодействие со страницей до окончания загрузки. Посетитель не может даже прокручивать её.
      • -
    • Если синхронный вызов занял слишком много времени, то браузер предложит закрыть "зависшую" страницу.
      • -
    • Кроме того, забегая вперёд, заметим, что ряд продвинутых возможностей, таких как возможность делать запросы на другой домен и указывать таймаут, в синхронном режиме не работают.
      • -
    +```js +// Синхронный запрос +xhr.open('GET', 'phones.json', *!*false*/!*); -**Поэтому, как правило, используют асинхронные вызовы.** +// Отсылаем его +xhr.send(); +*!* +// ...весь JavaScript "подвиснет", пока запрос не завершится +*/!* +``` + +Если синхронный вызов занял слишком много времени, то браузер предложит закрыть "зависшую" страницу. + +Из-за такой блокировки получается, что нельзя отослать два запроса одновременно. Кроме того, забегая вперёд, заметим, что ряд продвинутых возможностей, таких как возможность делать запросы на другой домен и указывать таймаут, в синхронном режиме не работают. + +Из всего вышесказанного уже должно быть понятно, что синхронные запросы используются чрезвычайно редко, а асинхронные -- почти всегда. Для того, чтобы запрос стал асинхронным, укажем параметр `async` равным `true`. -Демо: - -[iframe src="phones-async" border zip] - -JS-код изменился: +Изменённый JS-код: ```js var xhr = new XMLHttpRequest(); xhr.open('GET', 'phones.json', *!*true*/!*); +xhr.send(); // (1) + *!* xhr.onreadystatechange = function() { // (3) if (xhr.readyState != 4) return; @@ -141,20 +163,21 @@ xhr.onreadystatechange = function() { // (3) } -xhr.send(); // (1) - button.innerHTML = 'Загружаю...'; // (2) button.disabled = true; ``` -Теперь мы отправляем запрос асинхронно: -
      -
    1. JavaScript продолжает выполнение после `xhr.send()`.
      2. -
    2. Для того, чтобы показать, что задача "в процессе" -- мы меняем текст кнопки `button`.
      3. -
    3. Скрипт завершается, страница полностью активна, а ответ, когда он появится, вызовет обработчик `onreadystatechange`.
      4. -
    +Если в `open` указан третий аргумент `true`, то запрос выполняется асинхронно. Это означает, что после вызова `xhr.send()` в строке `(1)` код не "зависает", а преспокойно продолжает выполняться, выполняется строка `(2)`, а результат приходит через событие `(3)`, мы изучем его чуть позже. -**Событие `readystatechange` происходит несколько раз в процессе отсылки и получения ответа. При этом можно посмотреть "текущее состояние запроса" в свойстве `xhr.readyState`.** +Полный пример в действии: + +[codetabs src="phones-async"] + +# Событие readystatechange + +Событие `readystatechange` происходит несколько раз в процессе отсылки и получения ответа. При этом можно посмотреть "текущее состояние запроса" в свойстве `xhr.readyState`. + +В примере выше мы использовали только состояние `4` (запрос завершён), но есть и другие. Все состояния, по [спецификации](http://www.w3.org/TR/XMLHttpRequest/#states): @@ -168,24 +191,22 @@ const unsigned short DONE = 4; // запрос завершён Запрос проходит их в порядке `0` -> `1` -> `2` -> `3` -> ... -> `3` -> `4`, состояние `3` повторяется при каждом получении очередного пакета данных по сети. -В данном случае нас интересует состояние `4` (запрос завершён). - Пример ниже демонстрирует переключение между состояниями. В нём сервер отвечает на запрос `digits`, пересылая по строке из 1000 цифр раз в секунду. -[iframe src="readystate" height=200 border zip] +[codetabs src="readystate"] -[warn header="Точка разрыва не гарантирована"] -При `readyState=3` мы можем посмотреть текущие данные в `responseText` и, казалось бы, могли бы работать с этими данными как с "ответом на текущий момент". +[warn header="Точка разрыва пакетов не гарантирована"] +При состоянии `readyState=3` (получен очередной пакет) мы можем посмотреть текущие данные в `responseText` и, казалось бы, могли бы работать с этими данными как с "ответом на текущий момент". -Однако, технически мы не управляем разрывами между сетевыми пакетами. Если протестировать пример выше в локальной сети, то в большинстве браузеров разрывы будут каждые 1000 символов, но в реальности событие может возникнуть на любом байте. +Однако, технически мы не управляем разрывами между сетевыми пакетами. Если протестировать пример выше в локальной сети, то в большинстве браузеров разрывы будут каждые 1000 символов, но в реальности пакет может прерваться на любом байте. -Вплоть до того, что символ русского языка в кодировке UTF-16 кодируется двумя байтами -- и разрыв может возникнуть *между ними*. +Чем это опасно? Хотя бы тем, что символы русского языка в кодировке UTF-8 кодируются двумя байтами каждый -- и разрыв может возникнуть *между ними*. -Получится, что при очередном `readyState` в конце `responseText` будет байт-полсимвола, то есть он не будет корректной строкой -- частью ответа! Если скрипт будет предполагать, что это -- полноценная часть ответа, то неизбежны глюки. +Получится, что при очередном `readyState` в конце `responseText` будет байт-полсимвола, то есть он не будет корректной строкой -- частью ответа! Если в скрипте как-то по-особому это не обработать, то неизбежны проблемы. [/warn] -## HTTP-заголовки, методы *RequestHeader +## HTTP-заголовки `XMLHttpRequest` умеет как указывать свои заголовки в запросе, так и читать присланные в ответ. @@ -210,7 +231,7 @@ xhr.setRequestHeader('Content-Type', 'application/json'); [warn header="Поставленный заголовок нельзя снять"] Особенностью `XMLHttpRequest` является то, что отменить `setRequestHeader` невозможно. -Повторные вызовы добавляют информацию к заголовку: +Повторные вызовы лишь добавляют информацию к заголовку, например: ```js xhr.setRequestHeader('X-Auth', '123'); @@ -219,7 +240,6 @@ xhr.setRequestHeader('X-Auth', '456'); // в результате будет заголовок: // X-Auth: 123, 456 ``` - [/warn] @@ -252,9 +272,9 @@ Date: Sat, 08 Sep 2012 16:53:16 GMT -## Таймаут: свойство и событие timeout +## Таймаут -Максимальную продолжительность запроса можно задать свойством `timeout`: +Максимальную продолжительность асинхронного запроса можно задать свойством `timeout`: ```js xhr.timeout = 30000; // 30 секунд (в миллисекундах) @@ -268,9 +288,9 @@ xhr.ontimeout = function() { } ``` -## Полный список событий загрузки +## Полный список событий -Современная [спецификация](http://www.w3.org/TR/XMLHttpRequest/#events) предусматривает следующие события: +Современная [спецификация](http://www.w3.org/TR/XMLHttpRequest/#events) предусматривает следующие события по ходу обработки запроса:
    • `loadstart` -- запрос начат.
      • @@ -279,14 +299,16 @@ xhr.ontimeout = function() {
    • `error` -- произошла ошибка.
    • `load` -- запрос был успешно (без ошибок) завершён.
    • `timeout` -- запрос был прекращён по таймауту.
      • -
    • `loadend` -- запрос был завершён (успешно или неуспешно)
      • `loadend` -- запрос был завершён (успешно или неуспешно)
    Используя эти события можно более удобно отслеживать загрузку (`onload`) и ошибку (`onerror`), а также количество загруженных данных (`onprogress`). -Также поддерживается событие `readystatechange`, которое было описано ранее. Оно появилось гораздо раньше, ещё до появления текущего стандарта. От него можно отказаться в пользу современных событий, если учесть особенности IE8-9 (см. далее). +Ранее мы видели ещё одно событие -- `readystatechange`. Оно появилось гораздо раньше, ещё до появления текущего стандарта. -## Особенности IE8,9: XDomainRequest +В современных браузерах от него можно отказаться в пользу других, необходимо лишь, как мы увидим далее, учесть особенности IE8-9. + +## IE8,9: XDomainRequest В IE8 и IE9 поддержка `XMLHttpRequest` ограничена: @@ -295,28 +317,30 @@ xhr.ontimeout = function() {
  • Некорректно поддерживается состояние `readyState = 3`: браузер может сгенерировать его только один раз во время запроса, а не при каждом пакете данных. Кроме того, он не даёт доступ к ответу `responseText` до того, как он будет до конца получен.
    • -Дело в том, что, когда создавались эти браузеры, спецификации были не до конца проработаны. Поэтому разработчики браузера решили добавить свой объект [XDomainRequest](/xhr-crossdomain) (только IE!), который реализовывал часть возможностей современного стандарта. +Дело в том, что, когда создавались эти браузеры, спецификации были не до конца проработаны. Поэтому разработчики браузера решили добавить свой объект `XDomainRequest`, который реализовывал часть возможностей современного стандарта. А обычный `XMLHttpRequest` решили не трогать, чтобы ненароком не сломать существующий код. -**Для того, чтобы получить некоторые из современных возможностей, вместо `new XMLHttpRequest()` пишем `new XDomainRequest`.** +Мы подробнее поговорим про `XDomainRequest` в главе [](/xhr-crossdomain). Пока лишь заметим, что для того, чтобы получить некоторые из современных возможностей в IE8,9 -- вместо `new XMLHttpRequest()` нужно использовать `new XDomainRequest`. -Если кросс-браузерно: +Кросс-браузерно: ```js var XHR = window.XDomainRequest || XMLHttpRequest; var xhr = new XHR(); ``` -Теперь в IE8,9 поддерживаются события `onload`, `onerror` и `onprogress`. +Теперь в IE8,9 поддерживаются события `onload`, `onerror` и `onprogress`. Это именно для IE8,9. Для IE10 обычный `XMLHttpRequest` уже является полноценным. -**Ещё одна деталь: IE9- по умолчанию кеширует ответы, не снабжённые антикеш-заголовком. Другие браузеры этого не делают.** +### IE9- и кеширование -**Чтобы этого избежать, сервер должен добавить в ответ соответствующие антикеш-заголовки, например `Cache-Control: no-cache`.** +Обычно ответы на запросы `XMLHttpRequest` кешируются, как и обычные страницы. -По правде говоря, использовать заголовки типа `Expires`, `Last-Modified` и `Cache-Control` рекомендуется в любом случае, чтобы дать понять браузеру (не обязательно IE), что ему следует делать. +Но IE9- по умолчанию кеширует все ответы, не снабжённые антикеш-заголовком. Другие браузеры этого не делают. Чтобы этого избежать, сервер должен добавить в ответ соответствующие антикеш-заголовки, например `Cache-Control: no-cache`. -**Альтернативный вариант -- добавить в URL запроса случайный параметр, предотвращающий кеширование.** +Впрочем, использовать заголовки типа `Expires`, `Last-Modified` и `Cache-Control` рекомендуется в любом случае, чтобы дать понять браузеру (не обязательно IE), что ему следует делать. + +Альтернативный вариант -- добавить в URL запроса случайный параметр, предотвращающий кеширование. Например, вместо `xhr.open('GET', 'service', false)` написать: @@ -335,6 +359,8 @@ var xhr = new XMLHttpRequest(); xhr.open('GET', '/my/url', true); +xhr.send(); + xhr.onreadystatechange = function() { if (this.readyState != 4) return; @@ -350,11 +376,9 @@ xhr.onreadystatechange = function() { // получить результат из this.responseText или this.responseXML } - -xhr.send(); ``` -Методы: +Методы объектов `XMLHttpRequest`:
    • `open(method, url, async, user, password)`
      • @@ -365,7 +389,7 @@ xhr.send();
    • `getAllResponseHeaders()`
    -Свойства: +Свойства объектов `XMLHttpRequest`:
    • `timeout`
      • @@ -388,39 +412,3 @@ xhr.send();
    • `onloadend`
    - -[head] - - -[/head] \ No newline at end of file diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/phones-async/index.html b/3-more/2-ajax/3-ajax-xmlhttprequest/phones-async.view/index.html old mode 100755 new mode 100644 similarity index 99% rename from 3-more/10-ajax/3-ajax-xmlhttprequest/phones-async/index.html rename to 3-more/2-ajax/3-ajax-xmlhttprequest/phones-async.view/index.html index 605c5092..51ae05d1 --- a/3-more/10-ajax/3-ajax-xmlhttprequest/phones-async/index.html +++ b/3-more/2-ajax/3-ajax-xmlhttprequest/phones-async.view/index.html @@ -11,6 +11,10 @@ function loadPhones() { var xhr = new XMLHttpRequest(); xhr.open('GET', 'phones.json', true); + + + xhr.send(); + xhr.onreadystatechange = function() { if (xhr.readyState != 4) return; @@ -26,9 +30,7 @@ function loadPhones() { } } - - xhr.send(); - + button.innerHTML = 'Загружаю...'; button.disabled = true; } diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/phones-async/phones.json b/3-more/2-ajax/3-ajax-xmlhttprequest/phones-async.view/phones.json old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/3-ajax-xmlhttprequest/phones-async/phones.json rename to 3-more/2-ajax/3-ajax-xmlhttprequest/phones-async.view/phones.json diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/phones-async/index.js b/3-more/2-ajax/3-ajax-xmlhttprequest/phones-async.view/server.js old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/3-ajax-xmlhttprequest/phones-async/index.js rename to 3-more/2-ajax/3-ajax-xmlhttprequest/phones-async.view/server.js diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/phones/index.html b/3-more/2-ajax/3-ajax-xmlhttprequest/phones.view/index.html old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/3-ajax-xmlhttprequest/phones/index.html rename to 3-more/2-ajax/3-ajax-xmlhttprequest/phones.view/index.html diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/phones/phones.json b/3-more/2-ajax/3-ajax-xmlhttprequest/phones.view/phones.json old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/3-ajax-xmlhttprequest/phones/phones.json rename to 3-more/2-ajax/3-ajax-xmlhttprequest/phones.view/phones.json diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/phones/index.js b/3-more/2-ajax/3-ajax-xmlhttprequest/phones.view/server.js old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/3-ajax-xmlhttprequest/phones/index.js rename to 3-more/2-ajax/3-ajax-xmlhttprequest/phones.view/server.js diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/readystate/index.html b/3-more/2-ajax/3-ajax-xmlhttprequest/readystate.view/index.html old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/3-ajax-xmlhttprequest/readystate/index.html rename to 3-more/2-ajax/3-ajax-xmlhttprequest/readystate.view/index.html diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/readystate/index.js b/3-more/2-ajax/3-ajax-xmlhttprequest/readystate.view/server.js old mode 100755 new mode 100644 similarity index 97% rename from 3-more/10-ajax/3-ajax-xmlhttprequest/readystate/index.js rename to 3-more/2-ajax/3-ajax-xmlhttprequest/readystate.view/server.js index f23d5556..61f9e5e9 --- a/3-more/10-ajax/3-ajax-xmlhttprequest/readystate/index.js +++ b/3-more/2-ajax/3-ajax-xmlhttprequest/readystate.view/server.js @@ -6,6 +6,8 @@ var file = new static.Server('.'); function accept(req, res) { +console.log(req.url); + if (req.url == '/digits') { res.writeHead(200, { diff --git a/3-more/10-ajax/4-xhr-forms/article.md b/3-more/2-ajax/4-xhr-forms/article.md similarity index 100% rename from 3-more/10-ajax/4-xhr-forms/article.md rename to 3-more/2-ajax/4-xhr-forms/article.md diff --git a/3-more/10-ajax/5-xhr-longpoll/article.md b/3-more/2-ajax/5-xhr-longpoll/article.md similarity index 100% rename from 3-more/10-ajax/5-xhr-longpoll/article.md rename to 3-more/2-ajax/5-xhr-longpoll/article.md diff --git a/3-more/10-ajax/5-xhr-longpoll/longpoll.png b/3-more/2-ajax/5-xhr-longpoll/longpoll.png old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/5-xhr-longpoll/longpoll.png rename to 3-more/2-ajax/5-xhr-longpoll/longpoll.png diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/phones-async/.zip b/3-more/2-ajax/5-xhr-longpoll/longpoll/.zip old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/3-ajax-xmlhttprequest/phones-async/.zip rename to 3-more/2-ajax/5-xhr-longpoll/longpoll/.zip diff --git a/3-more/10-ajax/5-xhr-longpoll/longpoll/browser.js b/3-more/2-ajax/5-xhr-longpoll/longpoll/browser.js old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/5-xhr-longpoll/longpoll/browser.js rename to 3-more/2-ajax/5-xhr-longpoll/longpoll/browser.js diff --git a/3-more/10-ajax/5-xhr-longpoll/longpoll/index.html b/3-more/2-ajax/5-xhr-longpoll/longpoll/index.html old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/5-xhr-longpoll/longpoll/index.html rename to 3-more/2-ajax/5-xhr-longpoll/longpoll/index.html diff --git a/3-more/10-ajax/5-xhr-longpoll/longpoll/index.js b/3-more/2-ajax/5-xhr-longpoll/longpoll/index.js old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/5-xhr-longpoll/longpoll/index.js rename to 3-more/2-ajax/5-xhr-longpoll/longpoll/index.js diff --git a/3-more/10-ajax/6-xhr-crossdomain/1-do-we-need-origin/solution.md b/3-more/2-ajax/6-xhr-crossdomain/1-do-we-need-origin/solution.md similarity index 100% rename from 3-more/10-ajax/6-xhr-crossdomain/1-do-we-need-origin/solution.md rename to 3-more/2-ajax/6-xhr-crossdomain/1-do-we-need-origin/solution.md diff --git a/3-more/10-ajax/6-xhr-crossdomain/1-do-we-need-origin/task.md b/3-more/2-ajax/6-xhr-crossdomain/1-do-we-need-origin/task.md similarity index 100% rename from 3-more/10-ajax/6-xhr-crossdomain/1-do-we-need-origin/task.md rename to 3-more/2-ajax/6-xhr-crossdomain/1-do-we-need-origin/task.md diff --git a/3-more/10-ajax/6-xhr-crossdomain/article.md b/3-more/2-ajax/6-xhr-crossdomain/article.md similarity index 100% rename from 3-more/10-ajax/6-xhr-crossdomain/article.md rename to 3-more/2-ajax/6-xhr-crossdomain/article.md diff --git a/3-more/10-ajax/7-xhr-onprogress/article.md b/3-more/2-ajax/7-xhr-onprogress/article.md similarity index 100% rename from 3-more/10-ajax/7-xhr-onprogress/article.md rename to 3-more/2-ajax/7-xhr-onprogress/article.md diff --git a/3-more/10-ajax/7-xhr-onprogress/progress/.zip b/3-more/2-ajax/7-xhr-onprogress/progress/.zip old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/7-xhr-onprogress/progress/.zip rename to 3-more/2-ajax/7-xhr-onprogress/progress/.zip diff --git a/3-more/10-ajax/7-xhr-onprogress/progress/index.html b/3-more/2-ajax/7-xhr-onprogress/progress/index.html old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/7-xhr-onprogress/progress/index.html rename to 3-more/2-ajax/7-xhr-onprogress/progress/index.html diff --git a/3-more/10-ajax/7-xhr-onprogress/progress/upload.php b/3-more/2-ajax/7-xhr-onprogress/progress/upload.php old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/7-xhr-onprogress/progress/upload.php rename to 3-more/2-ajax/7-xhr-onprogress/progress/upload.php diff --git a/3-more/10-ajax/8-xhr-resume/article.md b/3-more/2-ajax/8-xhr-resume/article.md similarity index 100% rename from 3-more/10-ajax/8-xhr-resume/article.md rename to 3-more/2-ajax/8-xhr-resume/article.md diff --git a/3-more/10-ajax/8-xhr-resume/browser.js b/3-more/2-ajax/8-xhr-resume/browser.js old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/8-xhr-resume/browser.js rename to 3-more/2-ajax/8-xhr-resume/browser.js diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/phones/.zip b/3-more/2-ajax/8-xhr-resume/upload-2way/.zip old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/3-ajax-xmlhttprequest/phones/.zip rename to 3-more/2-ajax/8-xhr-resume/upload-2way/.zip diff --git a/3-more/10-ajax/8-xhr-resume/upload-2way/browser.js b/3-more/2-ajax/8-xhr-resume/upload-2way/browser.js old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/8-xhr-resume/upload-2way/browser.js rename to 3-more/2-ajax/8-xhr-resume/upload-2way/browser.js diff --git a/3-more/10-ajax/8-xhr-resume/upload-2way/index.html b/3-more/2-ajax/8-xhr-resume/upload-2way/index.html old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/8-xhr-resume/upload-2way/index.html rename to 3-more/2-ajax/8-xhr-resume/upload-2way/index.html diff --git a/3-more/10-ajax/8-xhr-resume/upload-2way/index.js b/3-more/2-ajax/8-xhr-resume/upload-2way/index.js old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/8-xhr-resume/upload-2way/index.js rename to 3-more/2-ajax/8-xhr-resume/upload-2way/index.js diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/readystate/.zip b/3-more/2-ajax/8-xhr-resume/upload-resume/.zip old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/3-ajax-xmlhttprequest/readystate/.zip rename to 3-more/2-ajax/8-xhr-resume/upload-resume/.zip diff --git a/3-more/10-ajax/8-xhr-resume/upload-resume/browser.js b/3-more/2-ajax/8-xhr-resume/upload-resume/browser.js old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/8-xhr-resume/upload-resume/browser.js rename to 3-more/2-ajax/8-xhr-resume/upload-resume/browser.js diff --git a/3-more/10-ajax/8-xhr-resume/upload-resume/index.html b/3-more/2-ajax/8-xhr-resume/upload-resume/index.html old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/8-xhr-resume/upload-resume/index.html rename to 3-more/2-ajax/8-xhr-resume/upload-resume/index.html diff --git a/3-more/10-ajax/8-xhr-resume/upload-resume/index.js b/3-more/2-ajax/8-xhr-resume/upload-resume/index.js old mode 100755 new mode 100644 similarity index 100% rename from 3-more/10-ajax/8-xhr-resume/upload-resume/index.js rename to 3-more/2-ajax/8-xhr-resume/upload-resume/index.js diff --git a/3-more/10-ajax/9-websockets/article.md b/3-more/2-ajax/9-websockets/article.md similarity index 100% rename from 3-more/10-ajax/9-websockets/article.md rename to 3-more/2-ajax/9-websockets/article.md diff --git a/3-more/10-ajax/index.md b/3-more/2-ajax/index.md similarity index 93% rename from 3-more/10-ajax/index.md rename to 3-more/2-ajax/index.md index 5956b3cd..e458887f 100644 --- a/3-more/10-ajax/index.md +++ b/3-more/2-ajax/index.md @@ -1,4 +1,4 @@ -# AJAX +# AJAX и COMET [todo] Современный `XMLHttpRequest`, включая поддержку докачки, индикации прогресса, кросс-доменных запросов. diff --git a/3-more/2-animation/1-js-animation/article.md b/3-more/2-animation/1-js-animation/article.md index 2e3fd1ab..a5858325 100644 --- a/3-more/2-animation/1-js-animation/article.md +++ b/3-more/2-animation/1-js-animation/article.md @@ -210,7 +210,7 @@ function linear(progress) { **График:** - + **По горизонтали - `progress`, а по вертикали - `delta(progress)`.** @@ -262,7 +262,7 @@ function quad(progress) { **График квадратичной функции:** - + Пример для квадратичной функции (клик для просмотра):
    @@ -271,7 +271,7 @@ function quad(progress) { Увеличение степени влияет на ускорение. Например, график для 5-й степени: - + И пример:
    @@ -294,7 +294,7 @@ function circ(progress) { ``` **График:** - + Пример:
    @@ -318,7 +318,8 @@ function back(progress, x) { ``` **График для `x = 1.5`:** - + + Пример для `x = 1.5`:
    @@ -413,7 +414,7 @@ function makeEaseOut(delta) { // преобразовать delta Давайте посмотрим, как преобразование `easeOut` изменяет поведение функции: - + Красным цветом обозначен easeIn, а зеленым - easeOut.
      @@ -465,7 +466,7 @@ bounceEaseInOut = makeEaseInOut(bounce); Например, давайте посмотрим эффект `easeOut`/`easeInOut` на примере функции `circ`: - + Как видно, график первой половины анимации представляет собой уменьшенный "easeIn", а второй -- уменьшенный "easeOut". В результате, анимация начинается и заканчивается одинаковым эффектом. diff --git a/3-more/2-animation/1-js-animation/back.png b/3-more/2-animation/1-js-animation/back.png deleted file mode 100755 index aaf93223..00000000 Binary files a/3-more/2-animation/1-js-animation/back.png and /dev/null differ diff --git a/3-more/2-animation/1-js-animation/back.svg b/3-more/2-animation/1-js-animation/back.svg new file mode 100644 index 00000000..462e7317 --- /dev/null +++ b/3-more/2-animation/1-js-animation/back.svg @@ -0,0 +1,25 @@ + + + + back.svg + Created with bin/sketchtool. + + + + + + + + + + 0 + + + 1 + + + 1 + + + + \ No newline at end of file diff --git a/3-more/2-animation/1-js-animation/bounce-inout.png b/3-more/2-animation/1-js-animation/bounce-inout.png deleted file mode 100755 index 49067b27..00000000 Binary files a/3-more/2-animation/1-js-animation/bounce-inout.png and /dev/null differ diff --git a/3-more/2-animation/1-js-animation/bounce-inout.svg b/3-more/2-animation/1-js-animation/bounce-inout.svg new file mode 100644 index 00000000..72befffd --- /dev/null +++ b/3-more/2-animation/1-js-animation/bounce-inout.svg @@ -0,0 +1,26 @@ + + + + bounce-inout.svg + Created with bin/sketchtool. + + + + + + + + + + 0 + + + 1 + + + 1 + + + + + \ No newline at end of file diff --git a/3-more/2-animation/1-js-animation/circ-ease.svg b/3-more/2-animation/1-js-animation/circ-ease.svg new file mode 100644 index 00000000..df183f8b --- /dev/null +++ b/3-more/2-animation/1-js-animation/circ-ease.svg @@ -0,0 +1,27 @@ + + + + circ-ease.svg + Created with bin/sketchtool. + + + + + + + + + + + 0 + + + 1 + + + 1 + + + + + \ No newline at end of file diff --git a/3-more/2-animation/1-js-animation/circ.png b/3-more/2-animation/1-js-animation/circ.png deleted file mode 100755 index a0518456..00000000 Binary files a/3-more/2-animation/1-js-animation/circ.png and /dev/null differ diff --git a/3-more/2-animation/1-js-animation/circ.svg b/3-more/2-animation/1-js-animation/circ.svg new file mode 100644 index 00000000..1e05644a --- /dev/null +++ b/3-more/2-animation/1-js-animation/circ.svg @@ -0,0 +1,25 @@ + + + + circ.svg + Created with bin/sketchtool. + + + + + + + + + + 0 + + + 1 + + + 1 + + + + \ No newline at end of file diff --git a/3-more/2-animation/1-js-animation/circ_ease.png b/3-more/2-animation/1-js-animation/circ_ease.png deleted file mode 100755 index 09a825da..00000000 Binary files a/3-more/2-animation/1-js-animation/circ_ease.png and /dev/null differ diff --git a/3-more/2-animation/1-js-animation/linear.png b/3-more/2-animation/1-js-animation/linear.png deleted file mode 100755 index 9181dbcc..00000000 Binary files a/3-more/2-animation/1-js-animation/linear.png and /dev/null differ diff --git a/3-more/2-animation/1-js-animation/linear.svg b/3-more/2-animation/1-js-animation/linear.svg new file mode 100644 index 00000000..6d8c4208 --- /dev/null +++ b/3-more/2-animation/1-js-animation/linear.svg @@ -0,0 +1,25 @@ + + + + linear.svg + Created with bin/sketchtool. + + + + + + + + + + 0 + + + 1 + + + 1 + + + + \ No newline at end of file diff --git a/3-more/2-animation/1-js-animation/quad.png b/3-more/2-animation/1-js-animation/quad.png deleted file mode 100755 index dd7c32dd..00000000 Binary files a/3-more/2-animation/1-js-animation/quad.png and /dev/null differ diff --git a/3-more/2-animation/1-js-animation/quad.svg b/3-more/2-animation/1-js-animation/quad.svg new file mode 100644 index 00000000..4c06185b --- /dev/null +++ b/3-more/2-animation/1-js-animation/quad.svg @@ -0,0 +1,25 @@ + + + + quad.svg + Created with bin/sketchtool. + + + + + + + + + + 0 + + + 1 + + + 1 + + + + \ No newline at end of file diff --git a/3-more/2-animation/1-js-animation/quint.png b/3-more/2-animation/1-js-animation/quint.png deleted file mode 100755 index 9153c144..00000000 Binary files a/3-more/2-animation/1-js-animation/quint.png and /dev/null differ diff --git a/3-more/2-animation/1-js-animation/quint.svg b/3-more/2-animation/1-js-animation/quint.svg new file mode 100644 index 00000000..44f6fcc7 --- /dev/null +++ b/3-more/2-animation/1-js-animation/quint.svg @@ -0,0 +1,25 @@ + + + + quint.svg + Created with bin/sketchtool. + + + + + + + + + + 0 + + + 1 + + + 1 + + + + \ No newline at end of file diff --git a/3-more/3-jquery-stub/index.md b/3-more/3-jquery-stub/index.md deleted file mode 100644 index c3b1a546..00000000 --- a/3-more/3-jquery-stub/index.md +++ /dev/null @@ -1,3 +0,0 @@ -# jQuery: курс немолодого бойца [в работе] - -Пока материал этого раздела существует только в голове автора. \ No newline at end of file diff --git a/3-more/6-extra/index.md b/3-more/6-extra/index.md index 3d29a3df..6adea6de 100644 --- a/3-more/6-extra/index.md +++ b/3-more/6-extra/index.md @@ -1,2 +1,4 @@ -# Разное +# О всякой всячине + +Статьи на разные темы, которые не вошли в другие разделы. diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/2-request-with-auth/solution.md b/archive/2-request-with-auth/solution.md similarity index 100% rename from 3-more/10-ajax/3-ajax-xmlhttprequest/2-request-with-auth/solution.md rename to archive/2-request-with-auth/solution.md diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/2-request-with-auth/task.md b/archive/2-request-with-auth/task.md similarity index 100% rename from 3-more/10-ajax/3-ajax-xmlhttprequest/2-request-with-auth/task.md rename to archive/2-request-with-auth/task.md diff --git a/3-more/3-jquery-stub/1-jquery-intro/article.md b/archive/3-jquery-stub/1-jquery-intro/article.md similarity index 100% rename from 3-more/3-jquery-stub/1-jquery-intro/article.md rename to archive/3-jquery-stub/1-jquery-intro/article.md diff --git a/3-more/3-jquery-stub/2-jquery-search/article.md b/archive/3-jquery-stub/2-jquery-search/article.md similarity index 100% rename from 3-more/3-jquery-stub/2-jquery-search/article.md rename to archive/3-jquery-stub/2-jquery-search/article.md diff --git a/3-more/3-jquery-stub/3-jquery-traversal/1-select-parents-with-self/solution.md b/archive/3-jquery-stub/3-jquery-traversal/1-select-parents-with-self/solution.md similarity index 100% rename from 3-more/3-jquery-stub/3-jquery-traversal/1-select-parents-with-self/solution.md rename to archive/3-jquery-stub/3-jquery-traversal/1-select-parents-with-self/solution.md diff --git a/3-more/3-jquery-stub/3-jquery-traversal/1-select-parents-with-self/task.md b/archive/3-jquery-stub/3-jquery-traversal/1-select-parents-with-self/task.md similarity index 100% rename from 3-more/3-jquery-stub/3-jquery-traversal/1-select-parents-with-self/task.md rename to archive/3-jquery-stub/3-jquery-traversal/1-select-parents-with-self/task.md diff --git a/3-more/3-jquery-stub/3-jquery-traversal/article.md b/archive/3-jquery-stub/3-jquery-traversal/article.md similarity index 100% rename from 3-more/3-jquery-stub/3-jquery-traversal/article.md rename to archive/3-jquery-stub/3-jquery-traversal/article.md diff --git a/3-more/3-jquery-stub/4-jquery-dom/article.md b/archive/3-jquery-stub/4-jquery-dom/article.md similarity index 99% rename from 3-more/3-jquery-stub/4-jquery-dom/article.md rename to archive/3-jquery-stub/4-jquery-dom/article.md index a6599891..c06e68a9 100644 --- a/3-more/3-jquery-stub/4-jquery-dom/article.md +++ b/archive/3-jquery-stub/4-jquery-dom/article.md @@ -42,4 +42,5 @@ css
    • prepend -> prependTo
    • insertAfter -> after
    • insertBefore -> before
      • +
    diff --git a/3-more/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/solution.md b/archive/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/solution.md similarity index 100% rename from 3-more/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/solution.md rename to archive/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/solution.md diff --git a/3-more/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/solution.view/bagua.css b/archive/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/solution.view/bagua.css old mode 100755 new mode 100644 similarity index 100% rename from 3-more/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/solution.view/bagua.css rename to archive/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/solution.view/bagua.css diff --git a/3-more/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/solution.view/index.html b/archive/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/solution.view/index.html old mode 100755 new mode 100644 similarity index 100% rename from 3-more/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/solution.view/index.html rename to archive/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/solution.view/index.html diff --git a/3-more/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/source.view/bagua.css b/archive/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/source.view/bagua.css old mode 100755 new mode 100644 similarity index 100% rename from 3-more/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/source.view/bagua.css rename to archive/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/source.view/bagua.css diff --git a/3-more/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/source.view/index.html b/archive/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/source.view/index.html old mode 100755 new mode 100644 similarity index 100% rename from 3-more/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/source.view/index.html rename to archive/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/source.view/index.html diff --git a/3-more/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/task.md b/archive/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/task.md similarity index 100% rename from 3-more/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/task.md rename to archive/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/task.md diff --git a/3-more/3-jquery-stub/5-jquery-stub-article/article.md b/archive/3-jquery-stub/5-jquery-stub-article/article.md similarity index 100% rename from 3-more/3-jquery-stub/5-jquery-stub-article/article.md rename to archive/3-jquery-stub/5-jquery-stub-article/article.md diff --git a/archive/3-jquery-stub/index.md b/archive/3-jquery-stub/index.md new file mode 100644 index 00000000..90817524 --- /dev/null +++ b/archive/3-jquery-stub/index.md @@ -0,0 +1,3 @@ +# jQuery [todo] + +Небольшой раздел. Самые основы jQuery. diff --git a/figures.sketch b/figures.sketch index d8a65308..30d76f89 100644 Binary files a/figures.sketch and b/figures.sketch differ