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