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

283 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
283
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. Client-side JavaScript Смаль Дмитрий smal@corp.mail.ru
  2. 2. JavaScript 1) скриптовый 2) динамически типизированный 3) прототипный 4) поддержка функционального программирования 5) функции – объекты первого рода 5) диалект ECMAScript 6) другие диалекты (JScript, ActionScript)
  3. 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. 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. 5. JSON [] - , {} - , ,массив объект словарь хэш var rata = { 'result': true, 'message': 'hello world', 'ids': [1, 2, 33, 100500], 'actors' : [ { 'name' : 'Peter', 'age' : 30 }, { 'name' : 'David', 'age' : 35 } ] };
  6. 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. 7. Стандартые объекты JS Math – станадртные математические операции, специальные типы Infinity и NaN String – работа со строками, поиск, доступ по индексу, строки – immutable RegExp – работа с регулярными выражениями, search/match/replace, RegExp.$1 Date – работа с датой и временем, UTC, таймзоны, простая арифметика Function – гибкие возможности по вызову функций !! Глобальный объект !!
  8. 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. 9. Порядок исполнения JS 1) Исполняется сразу при загрузке страницы 2) JS код добавляет обработчики событий 3) … либо устанавливает таймеры 4) Обработчики событий вызываются асинхронно
  10. 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. 11. API браузера 1) глобальный объект – window – текущее окно 2) document – представляет текущий документ, используется для работы со структурой HTML 3) location – текущий URL страницы, позволяет работать с отдельными частями URL, изменение location – переход по URL 4) history – объект для работы с историей страниц, позволяет переходить назад и вперед 5) navigator – содержит информацию о браузере и операционной системе 6) cookie – получение и установка куки 6) screen – информация о размерах экрана
  12. 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. 13. DOM1 – html дерево элементов
  14. 14. 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, являющиеся фрагментом текста
  15. 15. Как использовать 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]); } }
  16. 16. События Типы событий: click (mousedown, mouseup) keypress (keydown, keyup) mouseover (mousein, mouseout) change Submit Аттрибуты событий: Тип Элемент Доп. информация (время, координаты, кнопка)
  17. 17. Всплывание (bubbling) событий <html> <p> Hello world <a href=”#”> CLCK </a> </p> </html> Действия по-умолчанию: a – переход по ссылке, form – отправка формы и т.д.
  18. 18. Обработчики событий <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>
  19. 19. AJAX
  20. 20. Обычный HTTP запрос
  21. 21. Асинхронный запрос
  22. 22. 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);
  23. 23. Ограничения AJAX 1) Невозможно загружать файлы. 2) Можно работать только в своем домене. JSONP! “Запрос” <script src=”/load.js?id=3&callback=func”> </script> “Ответ” func({ 'res' : 'ok', . . . });
  24. 24. Переносимость 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
  25. 25. JavaScript библиотеки
  26. 26. jQuery
  27. 27. jQuery - основы jQuery, $ - точка входа $(document), $(this), $('a.btn'), $($('div')) $('div') – nodeset, “унаследован” от массива $('div').filter(':even').addClass('blue') .addpend('body').fadeOut('slow'); $(document.window).width() $('#mylink').attr('href')
  28. 28. 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
  29. 29. jQuery - traversing $(...).find('input[name=age]') $(...).children('.nice') $(...).parent() $(...).closest('.containter') $(...).siblings() $(...).next() $(...).nextAll() $(...).prev() $(...).prevAll() $(...).filter(':checked') $(...).each(function(id) { alert(this) })
  30. 30. 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')
  31. 31. Анимация и работа с CSS AddClass / removeClass / hasClass / toggleClass $(...).height() // высота $(...).width() // ширина $(...).position() // смещение от родителя $(...).offset() // абсолютное смещение {'left':10, 'top':20} $(...).css('float') $(...).css('float', 'left') $(...).css({ left: 10, top: 20 })
  32. 32. 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 });
  33. 33. Полезные мелочи <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') });
  34. 34. jQuery plugins jquery.modal // диалоговые окна jquery.validate // валидация данных jquery.accordion jquery.slider Jquery.suggest // тысячи их! jQuery UI
  35. 35. Best - Practice 1) Без глобальных переменных! (function() { . . . })(); 2) Используйте data- атрибуты для обмена данными 3) Используйте отдельные имена классов js-login-block, js-login-block-btn b_login_overlay, b_login_overlay__btn__inner
  36. 36. JavaScript и конкуренты
  37. 37. Домашнее задание 1) Сделать модальное окно 2) Сделать его перемещаемым

×