Web весна 2013 лекция 9

497 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
497
On SlideShare
0
From Embeds
0
Number of Embeds
120
Actions
Shares
0
Downloads
21
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Web весна 2013 лекция 9

  1. 1. JavaScript Дмитрий Смаль
  2. 2. Синтаксис
  3. 3. JavaScript ● Скриптовый ● Динамически типизированный ● Прототипный Поддержка функционального программирования ● ● Функции – объекты первого рода ● Диалект ECMAScript ● Другие диалекты (JScript, ActionScript)
  4. 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. 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. 6. JSON [] - массив, {} - объект, словарь, хэш var rata = { 'result': true, 'message': 'hello world', 'ids': [1, 2, 33, 100500], 'actors' : [ { 'name' : 'Peter', 'age' : 30 }, { 'name' : 'David', 'age' : 35 } ] };
  7. 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. 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. 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. 10. Стандартные объекты Math – станадртные математические операции, специальные типы Infinity и NaN String – работа со строками, поиск, доступ по индексу, строки – immutable RegExp – работа с регулярными выражениями, search/match/replace, RegExp.$1 Date – работа с датой и временем, UTC, таймзоны, простая арифметика Function – гибкие возможности по вызову функций !! Глобальный объект !!
  11. 11. Client-Side JS
  12. 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. 13. Порядок выполнения 1) Исполняется сразу при загрузке страницы, в порядке подключения 2) JS код добавляет обработчики событий 3) … либо устанавливает таймеры 4) Обработчики событий вызываются асинхронно
  14. 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. 15. API браузера window – текущее окно (глобальный объект) document – представляет текущий документ, используется для работы со структурой HTML location – текущий URL страницы, позволяет работать с отдельными частями URL, изменение location – переход по URL history – объект для работы с историей страниц, позволяет переходить назад и вперед navigator – содержит информацию о браузере и операционной системе cookie – получение и установка куки screen – информация о размерах экрана
  16. 16. DOM Не зависящий от языка и платформы интерфейс для доступа к содержимому XML, HTML и XHTML
  17. 17. DOM0 (традиционный) document.forms[0].elements[0] document.formName.inputName document.anchors // массив якорей document.images // массив картинок document.all // только в IE onclick=”...” // обработчики событий onsubmit=”...”
  18. 18. DOM1
  19. 19. DOM1
  20. 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. 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. 22. События Типы событий: click (mousedown, mouseup) keypress (keydown, keyup) mouseover (mousein, mouseout) change, submit Аттрибуты событий: Тип Элемент Доп. информация (время, координаты, кнопка)
  23. 23. Всплывание (bubbling) <html> <p> Hello world <a href=”#”> CLCK </a> </p> </html> Действия по-умолчанию: a – переход по ссылке, form – отправка формы и т.д.
  24. 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. 25. AJAX Asynchronous Javascript And XML
  26. 26. AJAX
  27. 27. Обычный HTTP запрос
  28. 28. Асинхронный запрос
  29. 29. Преимущества AJAX ● Не блокирует интерфейс ● Сокращает время загрузки страницы ● Уменьшает сетевой трафик ● Уменьшает нагрузку на сервер
  30. 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. 31. Ограничения AJAX ● Невозможно загружать файлы (решение: iframe) ● Работает только в своем домене (решение: JSONP) “Запрос” <script src=”/load.js?id=3&callback=func”> </script> “Ответ” func({ 'res' : 'ok', . . . });
  32. 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. 33. JavaScript библиотеки
  34. 34. jQuery
  35. 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. 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. 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. 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. 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. 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. 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. 42. Плагины jQuery jquery.modal // диалоговые окна jquery.validate // валидация данных jquery.accordion jquery.slider jquery.suggest // тысячи их!
  43. 43. jQuery UI
  44. 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. 45. JavaScript и конкуренты
  46. 46. Спасибо за внимание Дмитрий Смаль, smal@corp.mail.ru

×