Документ представляет собой подробное руководство по синтаксису и основам JavaScript, включая типы переменных, функции, области видимости и обработку событий. Рассматриваются также методы работы с DOM и AJAX для создания динамичного веб-контента, а также использование библиотеки jQuery для упрощения манипуляций с элементами страницы. В завершение приводятся рекомендации по лучшим практикам в разработке на JavaScript.

1. JavaScript
Дмитрий Смаль

2. Синтаксис

3. JavaScript
●
Скриптовый
●
Динамически типизированный
●
Прототипный
●
Поддержка функционального
программирования
●
Функции – объекты первого рода
●
Диалект ECMAScript
●
Другие диалекты (JScript, ActionScript)

4. Основы синтаксиса
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)
}

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

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

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

8. Область видимости
// quiz 1
function doSomething(a, b, c) {
if (!x) {
var x = 5;
}
alert(x);
}
// quiz 2
funcs = [];
for (var i = 0; i < 10; i++) {
funcs[i] = function() { alert(i) };
}
funcs[3]();

9. Замыкания
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)
Замыкание = функция + ее лексическое окружение на
момент создания

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

11. Client-Side JS

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

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

14. Простейшие функции
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>';

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

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

17. DOM0 (традиционный)
document.forms[0].elements[0]
document.formName.inputName
document.anchors // массив якорей
document.images // массив картинок
document.all // только в IE
onclick=”...” // обработчики событий
onsubmit=”...”

18. DOM1

19. DOM1

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

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

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

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

24. Обработчики событий
<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>

25. Asynchronous Javascript And XML
AJAX

26. AJAX

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

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

29. Преимущества AJAX
●
Не блокирует интерфейс
●
Сокращает время загрузки страницы
●
Уменьшает сетевой трафик
●
Уменьшает нагрузку на сервер

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

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

32. 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
(Не)переносимость JavaScript

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

34. jQuery

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

36. Стандартные:
.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
jQuery - селекторы

37. $(...).find('input[name=age]') // поиск вниз
$(...).children('.nice') // потомки
$(...).parent() // родитель
$(...).closest('.containter') // поиск вверх
$(...).siblings() // “соседи”
$(...).next() $(...).nextAll()
$(...).prev() $(...).prevAll()
$(...).filter(':checked') // фильтрация
$(...).each(function(id) { // итерация
alert(this)
})
jQuery - traversing

38. $(...).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

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

40. $.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

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

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

43. jQuery UI

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

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

46. Домашнее задание
●
Изучить Class-Based Views и Django Templates
●
Сделать шаблон для отображения списка объектов в
таблице (“Лекции”)
●
Сделать шаблон для отображения одного объекта в
таблице
●
Использовать наследование шаблонов, для исключения
дублирования кода

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