Документ представляет собой подробный обзор синтаксиса и особенностей JavaScript, включая динамическую типизацию, прототипное наследование и использование функций как объектов первого рода. Он охватывает основы работы с переменными, стандартными объектами, различными методами управления событиями, а также 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;
//
str = 'hello'
//
b = true;
//
obj = {}; arr = []; //
f = function () {
return 1
} // функции – объекты
Number – числовой
String – строковы
Boolean – логический
Object – объекты
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);
var h = function() {
elem.style['display'] = 'none';
};
setTimeout(h, 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>
x = 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. DOM
Не зависящий от языка и платформы интерфейс для доступа
к содержимому XML, HTML и XHTML

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

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. AJAX
Asynchronous Javascript And XML

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

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

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

34. jQuery

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

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

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

38. 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')

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

40. 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 });

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
●
Размещайте JS в отдельных файлах, не в HTML
●
Без глобальных переменных!
(function() {
// do some work
})();
●
Используйте data- атрибуты для обмена данными
●
Используйте отдельные имена классов
js-login-block, js-login-block-btn
b_login_overlay, b_login_overlay__btn__inner

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

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