Стажировка-2013, разработчики, занятие 9. DOM, JS, AJAX

550 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

No notes for slide

Стажировка-2013, разработчики, занятие 9. DOM, JS, AJAX

  1. 1. JavaScript: манипулирование элементами DOM и асинхронные запросы Разработчики. Занятие 9
  2. 2. JavaScript JavaScript – интерпретируемый язык программирования, изначально разработанный для написания скриптов для браузера.
  3. 3. JavaScript != Java
  4. 4. ECMAScript Ядро языка – спецификация ECMAScript ECMAScript 6 (декабрь 2014)
  5. 5. Популярность JavaScript https://github.com/languages
  6. 6. Что умеет JavaScript? • Создавать новые HTML-теги, удалять существующие, менять стили элементов, прятать, показывать элементы. • Реагировать на действия посетителя • Посылать запросы на сервер (AJAX) • Получать и устанавливать cookie, запрашивать данные, выводить сообщения
  7. 7. Что не умеет JavaScript? • работать с памятью, процессором • читать/записывать файлы на жесткий диск • вызывать программы • нет доступа к операционной системе
  8. 8. jQuery jQuery – библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. jQuery CDN http://jquery.com/download/
  9. 9. Чистый (pure) JavaScript и JQuery Особенности jQuery: • Совместимость с браузерами • Упрощение сложных операций • Простая манипуляция с DOM • Требуется время на загрузку библиотеки • Много библиотек на jQuery
  10. 10. Подключение скриптов <html> <head> <script src=js/file.js></script> </head> ... </html>
  11. 11. Подключение скриптов
  12. 12. Использование jQuery Функция $() Все вызовы выполняются через функцию $ Примеры: $("div a") $("ul li")[0] $("a").first(), $("a").last() $("#login").is(":hidden")
  13. 13. Использование jQuery, работа с DOM addClass() hasClass() removeClass() attr() css() append() prepend() remove()
  14. 14. Выполнение js-кода alert("boom") $(document).ready(function() { alert("boom") }) $(window).load(function() { alert("boom") })
  15. 15. jQuery: пример $(document).ready(function() { $('nav a').addClass('active') $('#login').slideDown() })
  16. 16. jQuery: события .bind() .click() .focus() .focusin() .focusout() .keypress(), keydown(), keyup() .mouseenter(), mouseleave() .scroll()
  17. 17. jQuery: события $('#main').mouseenter(function() { alert($('input#name').val()) }) Объект this: $('#main').mouseenter(function() { $(this).remove() })
  18. 18. AJAX AJAX (Asynchronous Javascript and XML) — подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в фоновом обмене данными браузера с веб-сервером. Преимущества: • Экономия трафика • Уменьшение нагрузки на сервер • Ускорение реакции интерфейса • Autocomplete, подсказки и др.
  19. 19. AJAX (frontend) $.ajax({ url: "ajax.php", type: "post", data: someData, dataType: "json", success: function(data){ alert("success"); }, error: function(){ alert("failure"); } })
  20. 20. JSON JSON – формат обмена данными, основанный на JavaScript. { "firstName": "Иван", "lastName": "Иванов", "address": { "streetAddress": "Московское ш., 101", "city": "Ленинград", "postalCode": 101101 }, "phoneNumbers": [ "812 123-1234", "916 123-4567" ]
  21. 21. Чтение полей форм cityValue = $(‘form input#city’).val() ageValue = $(‘form input#age’).val() someData = { city: cityValue, age: ageValue }
  22. 22. someData = $(‘form#myform’).serialize() Чтение полей форм
  23. 23. AJAX (backend) • Необходимо генерировать ответ (JSON или HTML) • Необходимо установить HTTP статус-код ответа. Для генерации ответа в JSON формате: $data = array('foo'=>'bar'); echo json_encode($data);
  24. 24. Что посмотреть/почитать? • An overview of ECMAScript 6, the next version of JavaScript • JavaScript Patterns • Учебник javascript.ru • JavaScript Garden • Уроки jQuery на Codeschool.com
  25. 25. Задание • Выполнить верстку по PSD макету дизайнера.

×