33
Web Internship 2014 JavaScript Константин Кузьмин
Web Internship 2014
JavaScript
Константин Кузьмин
План• Области применения• Добавление на страницу и особенности синтаксиса• Переменные и операторы• Примитивные типы• Массивы, функции, объекты• this• window• DOM• События• jQuery• JSON & AJAX• Замыкания• Полезное
JavaScript
Области применения
• Web-приложения• Мобильные приложения• Серверные приложения• Виджеты• Браузерные плагины
JavaScript
Добавление JS-кода на страницу
<script type="text/javascript">// js code here</script>
<script type="text/javascript " src="script.js "></script>
JavaScript
Особенности синтаксиса• Комментарии
– Однострочный // комментарий– Многострочный /* комментарий */
• Точка с запятой. В JS точку с запятой после операторов можно ставить, но не обязательно. Перевод строки подразумевает точку с запятой. Лучше все же ставить ;
return result //эквивалентно return result;return //эквивалентно return;result //эквивалентно result;
JavaScript
Переменные
• Переменной можно присвоить любой значение.• Имена переменных чувствительны к регистру.• Переменная объявляется с использванием
ключевого слова varvar variable = 100;Директива var при объявлении переменной делает ее локальной, т.е. видимой только внутри текущей функцииПеременные объявленные без ключевого слова var попадают в глобальную область видимости window
JavaScript
Операторы
• Арифметические (+ - * / %).• Логические (&&, ||, !).• Операторы сравнения ( == != < > <= >= ===
!== ?: ).• Строгое сравнение – без приведения
типов.• Приоритеты операторов (http://goo.
gl/wUpvww).
JavaScript
Примитивные типы• Booleanvar f = true;var f = new Boolean('someting'); //=> true
• Numbervar a = 5;var a = new Number('5');
• Stringvar str = 'Hello';var str = new String('Hello');
• undefinedtypeof b == undefined
• null
• Приведение типов: http://learn.javascript.ru/types-conversion
JavaScript
Массивы
• Массивы с числовыми индексами.var arr = new Array("my", "array");var arr = [ "my", "array" ];
• Ассоциативные массивы.var obj = { n: 1, str: "Вася" }
JavaScript
Функцииfunction print(msg) {
document.write(msg, '<br/>');}
function hypotenuse(a, b) {function square(x) { return x*x; }return Math.sqrt(square(a) + square(b));
}
var f = function(x) { return x*x; };f(5);
JavaScript
Объекты
• Все в JS является объектом• Объекты создаются функциями-
конструкторами при помощи директивы new.var date = new Date();console.log(date.getDate());• Доступ к методам и параметрам объекта
через точку .• Функция - это встроенный объект, у которого
есть метод call
JavaScript
this• Оператор this возвращает ссылку на объект,
являющийся текущим контекстом вызова.• Текущий объект не является жестко
фиксированным и зависит от контекста вызова функции.
• Варианты передачи– неявно, через вызов метода: object.method(...)– явно, через call: function.call(object,...)– явно, через apply: function.apply(object,...)– неявно, через вызов new: new constructor(...)– иначе – window
JavaScript
Объект window
• Объект window сочетает два в одном: глобальный объект js и окно браузера.
• Для обращения к свойствам и методам window не обязательно указывать объект.
var a = 123;console.log(a);console.log(window.a);
JavaScript
Объект window• Основные методы для работы с окном
– window.open()– window.close()– window.focus()
• Основные свойства– window.location
• window.location.reload(); // выполняется перезагрузка текущего окна
• window.location.href = 'http://translate.google.com/'; // выполняется переход на другой URL
– window.history• window.history.back();• window.history.forward();
– window.top
JavaScript
Объект window
Глобальные методы• alert• clearInterval• clearTimeout• confirm• decodeURI• decodeURIComponent• encodeURI• encodeURIComponent
• eval• isFinite• isNaN• parseFloat• parseInt• prompt• setInterval• setTimeout
JavaScript
Document Object Model (DOM)<!DOCTYPE HTML><html> <head> <title>Документ</title> </head> <body> <div id="dataKeeper">Data</div> <ul> <li style="background-color:red">Осторожно</li> <li class="info">Информация</li> </ul> <div id="footer">Made in Russia ©</div> </body></html>
JavaScript
Объект document
• document.getElementById• document.getElementsByTagName• document.createTextNode• Node.removeChild• Node.appendChild• https://developer.mozilla.org/en-
US/docs/Web/API/document
JavaScript
DOM Events
• Позволяют с помощью JS регистрировать различные обработчики, которые будут выполняться при возникновении событий (например, нажатие на кнопку).
• Event Object (http://goo.gl/Skpn4x)• Bubbling• http://goo.gl/Pn1aYV
JavaScript
DOM Events: Регистрация обработчиков
• HTML атрибут<button onclick="alert('Hello world!')">• DOM свойствоmyButton.onclick = function(event){alert('Hello world');};• EventTarget.addEventListenermyButton.addEventListener('click', function(){alert('Hello world');}, false);
JavaScript
jQuery. Подключение.
Документация: http://api.jquery.com/• CDN (Content Delivery Network)<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>• Просто скачать с http://jquery.com/ и
подключить на страницу как локальный файл.
JavaScript
jQuery. Готовность документа
$(document).ready(function() {// выполняется, когда DOM загрузилсяalert("document is ready");
});
$(window).load(function() {/* выполняется, когда страница полностью
загрузилась, включая фреймы и картинки */alert("window is loaded");
});
JavaScript
jQuery. Селекторы$(selector, context)• "#mydiv" // элемент с id="mydiv"• "div" // все div'ы на странице• "div.myclass" // div имеющий class="myclass“• "div:first" // только первый div• "div:last" // только последний• "div:even" // все четные div'ы• "input[type='text']" // все элементы input с type="text“• "input:checkbox:checked" // все чекбоксы с checked=true• "div.myclass img" // img, который находится в div'е с class="myclass“• "div.myclass, div.my2" // div'ы имеющие class="myclass" и class="my2“• "div", "#myid" // все div'ы, находящиеся в контейнере с id="myid"
JavaScript
jQuery. Работа с элементами• attr() Аттрибут элемента.
– $(element).attr(‘attr-name’);– $(element).attr(‘attr-name’, ‘attr-value’);
• prop() Свойства элемента (например, checked)– $(element).prop(‘prop-name’);– $(element).prop(‘prop-name’, ‘prop-value’);
• val() Значение элемента– $(element).val();– $(element).val(123);
• text() Текстовое содержимое элемента. Не применяется для input элементов.– $(element).text();– $(element).text(“Hello");
JavaScript
jQuery. События
• on() добавить обработчик события– $("input").on('blur', function (event) {});
• off() удалить обработчик события– $("input").off('blur', function (event) {});
• trigger() вызвать событие– $("input").trigger('blur‘)
JavaScript
jQuery. СобытияДокументация: http://api.jquery.com/category/events/• blur - элемент теряет фокус• focus – элемент получает фокус (мышью или по Tab)• change – элемент теряет фокус ввода и при этом
изменилось значение элемента с момента получения фокуса• click – нажатие на элемент. (~ mousedown + mouseup на
одном и том же участке экрана)• keydown – нажатие клавиши на клавиатуре• keyup – отжатие клавиши на клавиатуре• resize – изменение размеров области просмотра документа• submit – отправка формы• и многое другое ☺
JavaScript
jQuery. Each
Используется для манипуляций коллекцией объектов (в том числе и результат работы селекторов)<ul> <li>foo</li> <li>bar</li></ul>
$( "li" ).each(function( index ) { console.log( index + ": " + $( this ).text() );});
var obj = { "flammable": "inflammable", "duh": "no duh"};
$.each( obj, function( key, value ) { alert( key + ": " + value );});
JavaScript
JSON
JSON (JavaScript Object Notation) — текстовый формат обмена данными, основанный на JavaScript.{ "firstName": "Иван", "lastName": "Иванов", "address": { "streetAddress": "Московское ш., 101, кв.101", "city": "Ленинград", "postalCode": 101101 }, "phoneNumbers": [ "812 123-1234", "916 123-4567" ]}
JavaScript
AJAXAJAX, Ajax (Asynchronous Javascript and XML — «асинхронный JavaScript и XML»)$.ajax({
type: "POST",url: "some.php",data: { name: "John", location: "Boston" },dataType: "html"
}).done(function( msg ) {alert( "Data Saved: " + msg );
}).fail(function( jqXHR, textStatus ) { alert( "Request failed: " + textStatus );
});
Документаций jQuery http://api.jquery.com/jquery.ajax/
JavaScript
Функции. Callbackfunction foo(str, cb){
var big_str = str + "some data";cb(big_str);
}
function bar(data){console.log(data);
}
foo('i am ', bar);
JavaScript
Функции. ЗамыканияЕсли говорить просто, то замыкание - это внутренняя функция. И эти функции имеют доступ к переменным внешней функции.
function makeShout() { var phrase = "Старт!"; var shout = function() { alert(phrase); } phrase = "Готово!"; return shout;}shout = makeShout();shout();
JavaScript
Функции. Замыкания
Неправильное использованиеfunction addEvents(divs) { for(var i=0; i<divs.length; i++) { divs[i].innerHTML = i; divs[i].onclick = function() { alert(i); } }}
Правильное использованиеfunction addEvents(divs) { for(var i=0; i<divs.length; i++) { divs[i].innerHTML = i; divs[i].onclick = function(x) { return function() { alert(x) } }(i) }}
JavaScript
Инструменты
• Chrome developers tools• Advanced REST client• console.log(), console.error()
JavaScript
Чтиво
• jqfundamentals.com/chapter/javascript-basics• slideshare.net/guestceb98b/the-javascript-
programming-language• shamansir.github.io/JavaScript-Garden/• slideshare.net/danwrong/metaprogramming-
javascript• slideshare.net/rudevich/javascript-intro-17192262• es5.javascript.ru/• codecademy.com/• http://javascript.ru/
JavaScript
