JavaScript

Дмитрий Смаль

Синтаксис

JavaScript

● Скриптовый

● Динамически типизированный

● Прототипный

● Поддержка функционального программирования

● Функции – объекты первого рода

● Диалект ECMAScript

● Другие диалекты (JScript, ActionScript)

Основы синтаксиса

var _true = true; // O, Realy ?

if (a < b) return 1

for (i = 0; i < arr.length; i++) { arr[i] += 1;}

try { throw 'test';}catch (e) { console.log(e)}

Объявления переменных

var a = 10, b = 20;window.x = 30;

Типы переменных:a = 1; b = 1.1; // Number – числовойstr = 'hello' // String – строковыb = true; // Boolean – логическийobj = {}; arr = []; // Object – объектыf = function () {

return 1 } // функции – объекты

null и undefined – специальные значения, отдельные типы

JSON

[] - массив, {} - объект, словарь, хэш

var rata = { 'result': true, 'message': 'hello world', 'ids': [1, 2, 33, 100500], 'actors' : [ { 'name' : 'Peter', 'age' : 30 }, { 'name' : 'David', 'age' : 35 } ]};

Функции

function doSomething(a, b, c) { . . .}

var doSomething = function(a, b, c) { . . .}

function addHandler(obj, msg) { function say() { alert(msg) } obj.addEventListener('click', say);}

Область видимости

// quiz 1function doSomething(a, b, c) { if (!x) { var x = 5; } alert(x);}

// quiz 2funcs = [];for (var i = 0; i < 10; i++) { funcs[i] = function() { alert(i) };}funcs[3]();

Замыкания

function hideButNotNow(id, timeout) { var elem = document.getElementById(id); setTimeout(function() { elem.style['display'] = 'none'; }, timeout);}

hideButNotNow('mybtn', 1000)hideButNotNow('mybtn2', 2000)hideButNotNow('mybtn3', 3000)

Замыкание = функция + ее лексическое окружение на момент создания

Стандартные объекты

Math – станадртные математические операции, специальные типы Infinity и NaN

String – работа со строками, поиск, доступ по индексу, строки – immutable

RegExp – работа с регулярными выражениями, search/match/replace, RegExp.$1

Date – работа с датой и временем, UTC, таймзоны, простая арифметика

Function – гибкие возможности по вызову функций

!! Глобальный объект !!

Client-Side JS

Где может находиться ?

<script src=”/js/jquery.js”></script>

<script type=”text/script”> alert('hello there!');</script>

<a href=”javascript:alert(1)”>CLICK</a>

<a href=”#” onclick=”alert(1)”>PUSH</a>

<div onmouseover=”$(this).fadeOut()”>...

<form onsubmit=”return validate(this)”>...

Порядок выполнения

1) Исполняется сразу при загрузке страницы, в порядке подключения

2) JS код добавляет обработчики событий

3) … либо устанавливает таймеры

4) Обработчики событий вызываются асинхронно

Простейшие функции

document.write('Hello'); // вывод HTML

alert('Ooops'); // Сообщение об.. успехе

if (сonfirm('Точно уверен?')) // Подтверждение

<a href=”/delete?id=3” onclick=”confirm('Точно удалить?')”>DEL</a>

prompr('Введите что-то'); // запрос данных

el = document.getElementById('content');el.innerHTML = '<div>Hello</div>';

API браузера

window – текущее окно (глобальный объект)

document – представляет текущий документ, используется для работы со структурой HTML

location – текущий URL страницы, позволяет работать с отдельными частями URL, изменение location – переход по URL

history – объект для работы с историей страниц, позволяет переходить назад и вперед

navigator – содержит информацию о браузере и операционной системе

cookie – получение и установка куки

screen – информация о размерах экрана

Не зависящий от языка и платформы интерфейс для доступа к содержимому XML, HTML и XHTML

DOM

DOM0 (традиционный)

document.forms[0].elements[0] document.formName.inputNamedocument.anchors // массив якорейdocument.images // массив картинокdocument.all // только в IEonclick=”...” // обработчики событийonsubmit=”...”

DOM1

DOM1

DOM1

Node – базовый класс: type, appendChild, removeChild, insertBefore, insertAfter, parentNode, firstChild, childNodes, nextSibling, previousSibling

Document – главный, корневой Node: createElement, createTextNode, createAttribute, getElementsByTagName, getElementById(*), getElementsByName(*)

Element – Node, являющийся тэгом: getAttribute, setAttribute, removeAttribute, getElementsByTagName

Attr – Node, являющийся аттрибутом: name, value

Text – Node, являющиеся фрагментом текста

Как использовать DOM

table = document.getElementById('tab1');tb = table.getElementsByTagName('tbody')[0];row = tb.lastChild;newRow = row.cloneNode();tb.appendChild(newRow);tds = newRow.getElementsByTagName('td');for (var i = 0; i < tds.length; i++) { children = td[i].childNodes; for (var j = 0; j < children.length; j++) { td[i].removeChild(children[j]); }}

События

Типы событий:

click (mousedown, mouseup)

keypress (keydown, keyup)

mouseover (mousein, mouseout)

change, submit

Аттрибуты событий:

Тип

Элемент

Доп. информация (время, координаты, кнопка)

Всплывание (bubbling)

Действия по-умолчанию: a – переход по ссылке, form – отправка формы и т.д.

<html> <p> Hello world <a href=”#”> CLCK </a> </p></html>

Обработчики событий

<a href=”#” onclick=”alert(1); return false”>CLCK</a>

<script>a = document.getElementById('the_a');a.addEventListener('click', function(ev) { alert('clicked on ' + ev.target); alert('now on ' + this); alert('x ' + ev.clientX); alert('y ' + ev.clientY); ev.stopPropagation(); // не всплывать! ev.preventDefault(); // без умолчания!});</script>

Asynchronous Javascript And XML

AJAX

AJAX

Обычный HTTP запрос

Асинхронный запрос

Преимущества AJAX

● Не блокирует интерфейс

● Сокращает время загрузки страницы

● Уменьшает сетевой трафик

● Уменьшает нагрузку на сервер

XHR – пример использования

var xmlhttp = getXmlHttp()

xmlhttp.open('GET', '/xhr/test.html', true);

xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4) { if(xmlhttp.status == 200) { alert(xmlhttp.responseText); } else { alert('error' + xmlhttp.status); } }};

xmlhttp.send(null);

“Запрос”<script src=”/load.js?id=3&callback=func”></script>

“Ответ”func({ 'res' : 'ok', . . . });

Ограничения AJAX

● Невозможно загружать файлы

(решение: iframe)

● Работает только в своем домене

(решение: JSONP)

obj.addEventListener('click', function(ev) { . . .}); // FF, Chrome, Opera

abj.attachEvent('onclick', function() { var ev = window.event;}); // IE

xhr = new XMLHttpRequest(); // FFxhr = ActiveXObject("Msxml2.XMLHTTP"); // IE

(Не)переносимость JavaScript

JavaScript библиотеки

jQuery

jQuery, $ - точка входа

$(document), $(this), $('a.btn'), $($('div'))$('div') – nodeset, “унаследован” от массива

$('div').filter(':even').addClass('blue') .addpend('body').fadeOut('slow');

$(document.window).width()$('#mylink').attr('href')

jQuery - основы

Стандартные: .clazz #id div > + ,

Расширенные:input:radio // “сокращения”input:checked // только отмеченные checkboxspan:visible // только видимые spanli:nth(n) // n-ый в выбореli:nth-child(n) // n-ый потомокp:eq(n) // n+1 ый параграфp:gt(n) // параграфы, начиная с n+1 ого p:not(.special) // параграфы без класса specialp:has(a.mylink) // только содержащие a.mylink

jQuery - селекторы

$(...).find('input[name=age]') // поиск вниз$(...).children('.nice') // потомки$(...).parent() // родитель$(...).closest('.containter') // поиск вверх$(...).siblings() // “соседи”$(...).next() $(...).nextAll()$(...).prev() $(...).prevAll()

$(...).filter(':checked') // фильтрация

$(...).each(function(id) { // итерацияalert(this)

})

jQuery - traversing

$(...).appendTo('.another')$(...).insertBefore('.smth')$(...).remove()$(...).clone()$(...).replaceWith()$(...).wrap()$(...).html('<h1>hello</h1>')$(...).text('plain text')$(...).attr('href') $(...).attr('href', x)$(...).addClass('some') $(...).removeClass('some')

jQuery – работа с DOM

AddClass / removeClass / hasClass / toggleClass

$(...).height() // высота$(...).width() // ширина$(...).position() // смещение от родителя$(...).offset() // абсолютное смещение{'left':10, 'top':20}

$(...).css('float')$(...).css('float', 'left') $(...).css({ left: 10, top: 20 })

Анимация и работа с CSS

$.ajax({ url: '/vote.php', data: { id: 33, action: 'like' }, success: function (data, status) { alert('ok: ' + data); }, error: function (xhr, status) { alert('fail: ' + status); }});

$('#some_div').load('/list.php', { id: 33 });

jQuery AJAX

<a id=”myid” data-mydata=”yep”>CLCK</a>$('#myid').data('mydata');$('#myid').data('flag', 'on');

$('a.delete').live(function() { var $e = $(this); $.post('/delete/', { id : $e.data('id') }); $e.remove();});

$(function() { alert('page loaded') });

Полезные мелочи

Плагины jQuery

jquery.modal // диалоговые окна

jquery.validate // валидация данных

jquery.accordion

jquery.slider

jquery.suggest // тысячи их!

jQuery UI

Best Practice

● Без глобальных переменных!

● Используйте data- атрибуты для обмена данными

● Используйте отдельные имена классов

js-login-block, js-login-block-btn

b_login_overlay, b_login_overlay__btn__inner

(function() { // do some work})();

JavaScript и конкуренты

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

● Изучить Class-Based Views и Django Templates

● Сделать шаблон для отображения списка объектов в таблице (“Лекции”)

● Сделать шаблон для отображения одного объекта в таблице

● Использовать наследование шаблонов, для исключения дублирования кода

Спасибо за вниманиеДмитрий Смаль, smal@corp.mail.ru