Your SlideShare is downloading. ×
  • Like
×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 78 views
Published

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
78
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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