web осень 2012 лекция 9
Post on 16-Jun-2015
220 Views
Preview:
TRANSCRIPT
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
top related