2. План
• Области применения
• Добавление на страницу и особенности синтаксиса
• Переменные и операторы
• Примитивные типы
• Массивы, функции, объекты
• this
• window
• DOM
• События
• jQuery
• JSON & AJAX
• Замыкания
• Полезное
JavaScript
4. Добавление JS-кода на страницу
<script type="text/javascript">
// js code here
</script>
<script type="text/javascript " src="script.js
"></script>
JavaScript
5. Особенности синтаксиса
• Комментарии
– Однострочный // комментарий
– Многострочный
/*
комментарий
*/
• Точка с запятой. В JS точку с запятой после
операторов можно ставить, но не обязательно.
Перевод строки подразумевает точку с запятой. Лучше
все же ставить ;
return result //эквивалентно return result;
return //эквивалентно return;
result //эквивалентно result;
JavaScript
6. Переменные
• Переменной можно присвоить любой значение.
• Имена переменных чувствительны к регистру.
• Переменная объявляется с использванием
ключевого слова var
var variable = 100;
Директива var при объявлении переменной делает
ее локальной, т.е. видимой только внутри текущей
функции
Переменные объявленные без ключевого слова var
попадают в глобальную область видимости window
JavaScript
8. Примитивные типы
• Boolean
var f = true;
var f = new Boolean('someting'); //=> true
• Number
var a = 5;
var a = new Number('5');
• String
var str = 'Hello';
var str = new String('Hello');
• undefined
typeof b == undefined
• null
• Приведение типов: http://learn.javascript.ru/types-conversion
JavaScript
9. Массивы
• Массивы с числовыми индексами.
var arr = new Array("my", "array");
var arr = [ "my", "array" ];
• Ассоциативные массивы.
var obj = { n: 1, str: "Вася" }
JavaScript
10. Функции
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
11. Объекты
• Все в JS является объектом
• Объекты создаются функциями-
конструкторами при помощи директивы new.
var date = new Date();
console.log(date.getDate());
• Доступ к методам и параметрам объекта
через точку .
• Функция - это встроенный объект, у которого
есть метод call
JavaScript
12. this
• Оператор this возвращает ссылку на объект,
являющийся текущим контекстом вызова.
• Текущий объект не является жестко
фиксированным и зависит от контекста вызова
функции.
• Варианты передачи
– неявно, через вызов метода: object.method(...)
– явно, через call: function.call(object,...)
– явно, через apply: function.apply(object,...)
– неявно, через вызов new: new constructor(...)
– иначе – window
JavaScript
13. Объект window
• Объект window сочетает два в одном:
глобальный объект js и окно браузера.
• Для обращения к свойствам и методам
window не обязательно указывать объект.
var a = 123;
console.log(a);
console.log(window.a);
JavaScript
14. Объект 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
18. DOM Events
• Позволяют с помощью JS регистрировать
различные обработчики, которые будут
выполняться при возникновении событий
(например, нажатие на кнопку).
• Event Object (http://goo.gl/Skpn4x)
• Bubbling
• http://goo.gl/Pn1aYV
JavaScript
19. DOM Events: Регистрация
обработчиков
• HTML атрибут
<button onclick="alert('Hello world!')">
• DOM свойство
myButton.onclick = function(event){alert
('Hello world');};
• EventTarget.addEventListener
myButton.addEventListener('click', function()
{alert('Hello world');}, false);
JavaScript
20. 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
21. jQuery. Готовность документа
$(document).ready(function() {
// выполняется, когда DOM загрузился
alert("document is ready");
});
$(window).load(function() {
/* выполняется, когда страница полностью
загрузилась, включая фреймы и картинки */
alert("window is loaded");
});
JavaScript
22. 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
23. 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
24. jQuery. События
• on() добавить обработчик события
– $("input").on('blur', function (event) {});
• off() удалить обработчик события
– $("input").off('blur', function (event) {});
• trigger() вызвать событие
– $("input").trigger('blur‘)
JavaScript
25. jQuery. События
Документация: http://api.jquery.com/category/events/
• blur - элемент теряет фокус
• focus – элемент получает фокус (мышью или по Tab)
• change – элемент теряет фокус ввода и при этом
изменилось значение элемента с момента получения фокуса
• click – нажатие на элемент. (~ mousedown + mouseup на
одном и том же участке экрана)
• keydown – нажатие клавиши на клавиатуре
• keyup – отжатие клавиши на клавиатуре
• resize – изменение размеров области просмотра документа
• submit – отправка формы
• и многое другое ☺
JavaScript
26. 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
29. Функции. Callback
function foo(str, cb){
var big_str = str + "some data";
cb(big_str);
}
function bar(data){
console.log(data);
}
foo('i am ', bar);
JavaScript
30. Функции. Замыкания
Если говорить просто, то замыкание - это внутренняя
функция. И эти функции имеют доступ к переменным
внешней функции.
function makeShout() {
var phrase = "Старт!";
var shout = function() {
alert(phrase);
}
phrase = "Готово!";
return shout;
}
shout = makeShout();
shout();
JavaScript
Несколько способов добавления JS на страницу.
Место включения скриптов. Блокировка загрузки страницы.
Возможность непосредственного включения в HTML и минусы этого подхода.
Область видимости переменных задаётся функцией, а не блоком кода
Оператор "+" делает конкатенацию, если хотя бы один операнд - строка, причем, не обязательно первый
Оператор && возвращает последний операнд, если все операнды верны. Если хоть один из операндов неверен, то возвратит первый неверный операнд, причем дальнейшие – не вычисляются. Оператор && обычно используется, чтобы избежать ошибок при получении вложенных свойств объекта.
Оператор || возвращает первое верное значение. А если верных значений вообще нет, то последнее неверное.
Операторы больше-меньше также работают со строками, сравнивая их лексикографически.
Все примитивные типы имеют объектные обертки
Undefined отличается от null тем, что обозначает совсем неопределенное значение (его еще никто нигде не определил), а не пустое значение.
Неявное приведение типов - задачка
Лучше заключать ключи массива в кавычки. Также IE ругается на использование в качестве ключей встроенных слов.
Оператор new делает из любой функции - функцию конструктор
Пример про bubbling
jQuery обертка
Самый быстрый селектор
Возвращается – массив
prop() например, для установки checked
Затрагивает только существующие элементы
Неймспейсы событий
Несколько вариантов off
