1. Client-side JavaScript
Смаль Дмитрий
smal@corp.mail.ru

2. JavaScript
1) скриптовый
2) динамически типизированный
3) прототипный
4) поддержка функционального программирования
5) функции – объекты первого рода
5) диалект ECMAScript
6) другие диалекты (JScript, ActionScript)

3. Основы синтаксиса
if (a < b) return 1
for (i = 0; i < arr.length; i++) {
arr[i] += 1;
}
try {
throw 'test';
}
catch (e) {
console.log(e)
}

4. Объявления переменных
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 – специальные значения, отдельные типы

5. JSON
[] - массив, {} - объект, словарь, хэш
var rata = {
'result': true,
'message': 'hello world',
'ids': [1, 2, 33, 100500],
'actors' : [
{ 'name' : 'Peter', 'age' : 30 },
{ 'name' : 'David', 'age' : 35 }
]
};

6. Функции
function doSomething(a, b, c) {
. . .
}
var doSomething = function(a, b, c) {
. . .
}
function addHandler(obj, msg) {
function say() {
alert(msg)
}
obj.addEventListener('click', say);
}

7. Стандартые объекты JS
Math – станадртные математические операции,
специальные типы Infinity и NaN
String – работа со строками, поиск,
доступ по индексу, строки – immutable
RegExp – работа с регулярными выражениями,
search/match/replace, RegExp.$1
Date – работа с датой и временем, UTC,
таймзоны, простая арифметика
Function – гибкие возможности по вызову
функций
!! Глобальный объект !!

8. Где может находиться 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)”>...

9. Порядок исполнения JS
1) Исполняется сразу при загрузке страницы
2) JS код добавляет обработчики событий
3) … либо устанавливает таймеры
4) Обработчики событий вызываются асинхронно

10. Простейшие функции
document.write('Hello'); // вывод HTML
alert('Ooops'); // Сообщение об.. успехе
сonfirm('Точно уверен?'); // Подтверждение
<a href=”/delete?id=3”
onclick=”confirm('Точно удалить?')”>DEL</a>
prompr('Введите что-то'); // запрос данных
el = document.getElementById('content');
el.innerHTML = '<div>Hello</div>';

11. API браузера
1) глобальный объект – window – текущее окно
2) document – представляет текущий документ,
используется для работы со структурой HTML
3) location – текущий URL страницы, позволяет
работать с отдельными частями URL,
изменение location – переход по URL
4) history – объект для работы с историей
страниц, позволяет переходить назад и
вперед
5) navigator – содержит информацию о браузере
и операционной системе
6) cookie – получение и установка куки
6) screen – информация о размерах экрана

12. DOM – Document Object Model
Не зависящий от языка и платформы интерфейс
для доступа к содержимому XML, HTML и XHTML
DOM0. (Традиционный DOM)
document.forms[0].elements[0]
document.formName.inputName
document.anchors // массив якорей
document.images // массив картинок
document.all // только в IE
onclick=”...” // обработчики событий
onsubmit=”...”

13. DOM1 – html дерево элементов

15. 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, являющиеся фрагментом текста

16. Как использовать 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]);
}
}

17. События
Типы событий:
click (mousedown, mouseup)
keypress (keydown, keyup)
mouseover (mousein, mouseout)
change
Submit
Аттрибуты событий:
Тип
Элемент
Доп. информация (время, координаты, кнопка)

18. Всплывание (bubbling) событий
<html>
<p>
Hello world
<a href=”#”>
CLCK
</a>
</p>
</html>
Действия по-умолчанию: a – переход по ссылке,
form – отправка формы и т.д.

19. Обработчики событий
<a href=”#” onclick=”alert(1)”>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();
return false;
});
</script>

20. AJAX

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

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

23. 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);

24. Ограничения AJAX
1) Невозможно загружать файлы.
2) Можно работать только в своем домене.
JSONP!
“Запрос”
<script src=”/load.js?id=3&callback=func”>
</script>
“Ответ”
func({ 'res' : 'ok', . . . });

25. Переносимость JavaScript
obj.addEventListener('click', function(ev) {
. . .
}); // FF, Chrome, Opera
abj.attachEvent('onclick', function() {
var ev = window.event;
}); // IE
xhr = new XMLHttpRequest(); // FF
xhr = ActiveXObject("Msxml2.XMLHTTP"); // IE

26. JavaScript библиотеки

27. jQuery

28. jQuery - основы
jQuery, $ - точка входа
$(document), $(this), $('a.btn'), $($('div'))
$('div') – nodeset, “унаследован” от массива
$('div').filter(':even').addClass('blue')
.addpend('body').fadeOut('slow');
$(document.window).width()
$('#mylink').attr('href')

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

30. jQuery - traversing
$(...).find('input[name=age]')
$(...).children('.nice')
$(...).parent()
$(...).closest('.containter')
$(...).siblings()
$(...).next() $(...).nextAll()
$(...).prev() $(...).prevAll()
$(...).filter(':checked')
$(...).each(function(id) { alert(this) })

31. jQuery – работа с DOM
$(...).appendTo('.another')
$(...).insertBefore('.smth')
$(...).remove()
$(...).clone()
$(...).replaceWith()
$(...).wrap()
$(...).html('<h1>hello</h1>')
$(...).text('plain text')
$(...).attr('href') $(...).attr('href', x)
$(...).addClass('some')
$(...).removeClass('some')

32. Анимация и работа с CSS
AddClass / removeClass / hasClass / toggleClass
$(...).height() // высота
$(...).width() // ширина
$(...).position() // смещение от родителя
$(...).offset() // абсолютное смещение
{'left':10, 'top':20}
$(...).css('float')
$(...).css('float', 'left')
$(...).css({ left: 10, top: 20 })

33. jQuery AJAX
$.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 });

34. Полезные мелочи
<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') });

35. jQuery plugins
jquery.modal // диалоговые окна
jquery.validate // валидация данных
jquery.accordion
jquery.slider
Jquery.suggest // тысячи их!
jQuery UI

37. Best - Practice
1) Без глобальных переменных!
(function() {
. . .
})();
2) Используйте data- атрибуты для обмена
данными
3) Используйте отдельные имена классов
js-login-block, js-login-block-btn
b_login_overlay, b_login_overlay__btn__inner

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

39. Домашнее задание
1) Сделать модальное окно
2) Сделать его перемещаемым