4. Основы синтаксиса
var _true = true; // O, Realy ?
if (a < b) return 1
for (i = 0; i < arr.length; i++) {
arr[i] += 1;
}
try {
throw 'test';
}
catch (e) {
console.log(e)
}
5. Объявления переменных
var a = 10, b = 20;
window.x = 30;
Типы переменных:
a = 1; b = 1.1; // Number – числовой
str = 'hello' // String – строковы
b = true; // Boolean – логический
obj = {}; arr = []; // Object – объекты
f = function () {
return 1
} // функции – объекты
null и undefined – специальные значения,
отдельные типы
7. Функции
function doSomething(a, b, c) {
. . .
}
var doSomething = function(a, b, c) {
. . .
}
function addHandler(obj, msg) {
function say() {
alert(msg)
}
obj.addEventListener('click', say);
}
8. Область видимости
// quiz 1
function doSomething(a, b, c) {
if (!x) {
var x = 5;
}
alert(x);
}
// quiz 2
funcs = [];
for (var i = 0; i < 10; i++) {
funcs[i] = function() { alert(i) };
}
funcs[3]();
9. Замыкания
function hideButNotNow(id, timeout) {
var elem = document.getElementById(id);
setTimeout(function() {
elem.style['display'] = 'none';
}, timeout);
}
hideButNotNow('mybtn', 1000)
hideButNotNow('mybtn2', 2000)
hideButNotNow('mybtn3', 3000)
Замыкание = функция + ее лексическое окружение на
момент создания
10. Стандартные объекты
Math – станадртные математические операции,
специальные типы Infinity и NaN
String – работа со строками, поиск, доступ по индексу,
строки – immutable
RegExp – работа с регулярными выражениями,
search/match/replace, RegExp.$1
Date – работа с датой и временем, UTC, таймзоны, простая
арифметика
Function – гибкие возможности по вызову функций
!! Глобальный объект !!
12. Где может находиться ?
<script src=”/js/jquery.js”></script>
<script type=”text/script”>
alert('hello there!');
</script>
<a href=”javascript:alert(1)”>CLICK</a>
<a href=”#” onclick=”alert(1)”>PUSH</a>
<div onmouseover=”$(this).fadeOut()”>...
<form onsubmit=”return validate(this)”>...
13. Порядок выполнения
1) Исполняется сразу при загрузке страницы, в порядке
подключения
2) JS код добавляет обработчики событий
3) … либо устанавливает таймеры
4) Обработчики событий вызываются асинхронно
14. Простейшие функции
document.write('Hello'); // вывод HTML
alert('Ooops'); // Сообщение об.. успехе
if (сonfirm('Точно уверен?')) // Подтверждение
<a href=”/delete?id=3”
onclick=”confirm('Точно удалить?')”>DEL</a>
prompr('Введите что-то'); // запрос данных
el = document.getElementById('content');
el.innerHTML = '<div>Hello</div>';
15. API браузера
window – текущее окно (глобальный объект)
document – представляет текущий документ, используется для работы
со структурой HTML
location – текущий URL страницы, позволяет работать с отдельными
частями URL, изменение location – переход по URL
history – объект для работы с историей страниц, позволяет переходить
назад и вперед
navigator – содержит информацию о браузере и операционной
системе
cookie – получение и установка куки
screen – информация о размерах экрана
16. Не зависящий от языка и платформы интерфейс для доступа
к содержимому XML, HTML и XHTML
DOM
44. Best Practice
●
Без глобальных переменных!
●
Используйте data- атрибуты для обмена данными
●
Используйте отдельные имена классов
js-login-block, js-login-block-btn
b_login_overlay, b_login_overlay__btn__inner
(function() {
// do some work
})();
46. Домашнее задание
●
Изучить Class-Based Views и Django Templates
●
Сделать шаблон для отображения списка объектов в
таблице (“Лекции”)
●
Сделать шаблон для отображения одного объекта в
таблице
●
Использовать наследование шаблонов, для исключения
дублирования кода