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