Презентация

Раздел 9:
Введение в JavaScript
JavaScript везде
2
Как работает JavaScript
JavaScript
3
HTML
JavaScript
CSS
3
HTML
JavaScript DOM
CSS
3
Document Object Model
<html>
<body>
<h1>HTML Academy</h1>
<p>
<img src="logo.png" alt="">
</p>
</body>
</html>
https://developer.mozilla.org/ru/docs/DOM/DOM_Reference/Введение
4
Document Object Model
<html>
<body>
HTMLHtmlElement
<h1>HTML Academy</h1>
<p>
<img src="logo.png" alt="">
</p> HTMLBodyElement
</body>
</html>
HTMLHeadingElement HTMLParagraphElement
Text HTMLImageElement
https://developer.mozilla.org/ru/docs/DOM/DOM_Reference/Введение
4
5
document
Глобальный объект; является корневым элементом
DOM-дерева страницы.
6
7
Три главных слова
– querySelector() 
Метод для поиска элементов.
8
– addEventListener() 
Метод для отлова диких событий.
8
– addEventListener() 
Метод для отлова диких событий.
– classList 
Набор методов для управления классами.
8
querySelector
Возвращает элемент из DOM-дерева, 
соответствующий CSS-селектору.
9
querySelector
document.querySelector(".user-block"); 4
1
3.5
1. Где будем искать элемент (по всему DOM-дереву). 3.1
12
https://developer.mozilla.org/ru/docs/Web/API/Document/querySelector
10
querySelector
1 2
3.5
2. Метод для поиска элемента. 12
10
querySelector
1 2 3
3.5
2. Метод для поиска элемента. 12
3. Передаём методу CSS-селектор, по которому будем искать. 8
10
Форма входа
11
Найдём ссылку вход
…
<div class="main-navigation-wrapper">
<div class="container">
<ul class="site-navigation">
<li><a href="info.html">Информация</a></li>
<li><a href="news.html">Новости</a></li>
<li><a href="price.html">Прайс-лист</a></li>
<li><a href="catalog.html">Магазин</a></li>
<li><a href="contacts.html">Контакты</a></li>
</ul>
<ul class="user-navigation">
<li><a class="login-link" href="login.html">Вход</a></li>
</ul>
</div>
</div>
12
<html>
<body>
…
<a class="login-link" href="login.html">Вход</a>
<script>
</script>
</body>
</html>
13
<html>
<body>
…
<script>
var link = document.querySelector(".login-link");
</script>
</body>
</html>
13
var link = document.querySelector(".login-link"); 4
1
3.5
1. Название переменной (link), в которой будет находится найденный 3.1
элемент.
12
https://htmlacademy.ru/courses/207
14
1 2
3.5
элемент.
12
2. Поиск элемента по всему DOM-дереву. 8
14
1 2 3
3.5
элемент.
12
2. Поиск элемента по всему DOM-дереву. 8
3. CSS-селектор, по которому будем искать элемент.
14
15
16
querySelectorAll
Возвращает все элементы из DOM-дерева, 
соответствующие CSS-селектору.
17
querySelectorAll
document.querySelectorAll("nav li"); 4
1
3.5
1. Где будем искать элементы (по всему DOM-дереву). 3.1
12
https://developer.mozilla.org/ru/docs/Web/API/Document/querySelectorAll
18
querySelectorAll
1 2
3.5
2. Метод для поиска элементов. 12
18
querySelectorAll
1 2 3
3.5
2. Метод для поиска элементов. 12
3. Передаём методу CSS-селектор, по которому будем искать. 8
18
19
20
Сообщение в браузере
console.log("какой-то текст"); 1
12
https://developer.mozilla.org/ru/docs/Web/API/Console/log
21
Сообщение в браузере
console.log("какой-то текст"); 1
12
https://developer.mozilla.org/ru/docs/Web/API/Console/log
21
addEventListener
Отлавливает событие элемента и выполняет
переданную функцию.
22
addEventListener
link.addEventListener("click", function () { … }); 1
1
1
1. Элемент, у которого мы будем ловить событие. 1
12
https://developer.mozilla.org/ru/docs/Web/API/EventTarget/addEventListener
23
addEventListener
1 2
1
2. Метод для отлова событий. 12
23
addEventListener
1 2 3
1
3. Определяем, какое событие мы ловим («клики»). 9
23
addEventListener
1 2 3 4
1
3. Определяем, какое событие мы ловим («клики»). 9
4. Функция, которая будет выполняться каждый раз, когда мы ловим событие

«клик».
23
Какие события можно поймать
Мышиные события 1
mouseenter, mouseover, mousemove, mousedown, mouseup, click, dblclick, 
contextmenu, wheel, mouseleave, mouseout, select 1
1
Клавиатурные события
keydown, keypress, keyup
12
События фокуса 9
focus, blur
События формы
reset, submit 
Сетевые события
online, offline
https://developer.mozilla.org/ru/docs/Web/Events
24
Поймаем клик на ссылку вход
…
<script>
</script>
25
…
<script>
link.addEventListener("click", function () {
});
</script>
25
…
<script>
link.addEventListener("click", function () {
console.log("Клик по ссылке вход");
});
</script>
25
26
27
28
…
<script>
link.addEventListener("click", function (evt) {
evt.preventDefault();
console.log("Клик по ссылке вход");
});
</script>
https://developer.mozilla.org/ru/docs/Web/API/Event/preventDefault
29
30
Найдём модальное окно
…
<section class="modal modal-login">

…
</section>
<script>
var popup = document.querySelector(".modal-login");
</script>
31
32
33
classList
Набор методов для управления классами элемента.
34
classList
element.classList.add("modal-show"); 8
1
3.6
1. Элемент, которому добавляем новый класс. 5.1
12
10
https://developer.mozilla.org/ru/docs/Web/API/Element/classList
35
classList
1 2
3.6
2. Свойство, содержащее в себе методы для работы с классами. 12
10
35
classList
1 2 3
3.6
3. Метод добавления класса. 10
35
classList
1 2 3 4
3.6
3. Метод добавления класса. 10
4. Название класса, которое нужно добавить элементу.
35
classList
– element.classList.add();  8
Добавляет класс.
3.6
– element.classList.remove();  5.1
Удаляет класс.
12
– element.classList.toggle();  10
Переключает класс.
– element.classList.contains(); 
Сообщает, есть ли класс у элемента.
36
Покажем модальное окно
<style>
.modal {
display: none;
…
}
.modal-show {
display: block;
}
</style>
<script>
</script>
37
<style>
.modal {
display: none;
…
}
.modal-show {
display: block;
}
</style>
<script>

popup.classList.add("modal-show");
</script>
37
<style>
.modal {
display: none;
…
}
.modal-show {
display: block;
} Без «точки» 
Использовать .modal-show — ошибка
</style>
<script>

</script>
37
<style>
<section class="modal modal-login ">

.modal {
…
display: none;
</section>
…
}
.modal-show {
display: block;
</style>
<script>

</script>
37
<style>
<section class="modal modal-login modal-show">

.modal {
…
display: none;
</section>
…
}
.modal-show {
display: block;
</style>
<script>

</script>
37
38
Соединяем скрипт вместе
<script>


});
</script>
39
А как закрыть модальное окно?
…

…
<button class="modal-close" type="button">Закрыть</button>
</section>
<script>
</script>
40
А как закрыть модальное окно?
…

…
</section>
<script>
…
var close = document.querySelector(".modal-close");
close.addEventListener("click", function (evt) {

popup.classList.remove("modal-show");
});
</script>
40
Промежуточный итог №1
<script>


});

});
</script>
41
Сделаем форму удобной
Фокус на поле ввода
<script>


});

});
</script>
43
<script>

var login = popup.querySelector("[name=login]");

});

});
</script>
43
<script>


login.focus();
});

});
</script>
43
44
45
Проверим форму через HTML
…
<form class="login-form" action="https://echo.htmlacademy.ru" method="post">

…
<input class="login-icon-user" type="text" name="login" required>
<input class="login-icon-password" type="password" name="password" required>

…
<button class="button" type="submit">Войти</button>
</form>
46
47
Проверим форму
<script>
…

var form = popup.querySelector("form");
</script>
48
49
<script>
…

form.addEventListener("submit", function () {
console.log("Отправляем форму");
});
</script>
50
51
52
<script>
…

form.addEventListener("submit", function (evt) {
console.log("Отправляем форму");
});
</script>
53
54
55
<script>
…


var password = popup.querySelector("[name=password]");

});
</script>
56
<script>
…



console.log(login.value);
console.log(password.value);
});
</script>
56
57
58
59
<script>
…



if (!login.value || !password.value) {
console.log("Нужно ввести логин и пароль");
}
});
</script>
60
Условие
if (!login.value) { … }
1
1. Оператор условия: если условие в скобках верное, то запускается код

в фигурных скобках.
61
Условие
1 2

2. Проверяем существование значения поля login.
61
Условие
1 3 2

2. Проверяем существование значения поля login.
3. Знак ! переворачивает условие наоборот: значение отсутствует 

у поля login.
61
Условие
Логическое «и»  Логическое «или» 

&& ||
62
Условие
if (!login.value || !password.value) { … }
1

63
Условие
if (!login.value || !password.value) { … }
1 2

2. Значение отсутствует у поля login или у поля password (или у обоих

сразу).
63
64
65
<script>
var close = popup.querySelector(".modal-close");

login.focus();
});

});

}
});
</script>
66
localStorage
Хранение данных в браузере (ключ=значение).
67
localStorage
localStorage.setItem("name", "keks"); 4
1
3.5
1. Глобальный объект для работы с хранилищем. 4
12
https://htmlacademy.ru/courses/74/run/26
68
localStorage
1 2
3.5
2. Метод для создания новой записи в хранилище. 12
68
localStorage
1 2 3
3.5
3. Ключ записи. 8
68
localStorage
1 2 3 4
3.5
3. Ключ записи. 8
4. Значение записи.
68
localStorage
– localStorage.getItem();  4
Получает значение ключа из хранилища.

3.5
– localStorage.setItem();  4
Создаёт новую запись в хранилище.

12
– localStorage.removeItem();  8
Удаляет запись из хранилища.
– localStorage.clear(); 
Полностью очищает хранилище.
https://developer.mozilla.org/ru/docs/Web/API/Window/localStorage
69
Сколько места?
Chrome Internet Explorer Edge Firefox Safari
70
Сколько места?
10Мб 10Мб 10Мб 10Мб 10Мб
Chrome Internet Explorer Edge Firefox Safari
70
71
Запомним логин
<script>
…

}
});
</script>
72
<script>
…

} else {
}
});
</script>
72
<script>
…

} else {
localStorage.setItem("login", login.value);
}
});
</script>
72
<script> …

login.focus();
});
…
</script>
73
<script> …
var storage = localStorage.getItem("login");

login.focus();
});
…
</script>
73
<script> …
var storage = localStorage.getItem("login");

login.focus();
if (storage) {
login.value = storage;
}
});
…
</script>
73
74
Однако
localStorage может работать не всегда.
75
76
Убеждаемся, что localStorage существует
<script> …
var isStorageSupport = true;

var storage = "";
try {
storage = localStorage.getItem("login");
} catch (err) {
isStorageSupport = false;
}
…
</script>
https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/try...catch
77
Убеждаемся, что localStorage существует
<script> …
} else {
if (isStorageSupport) {
}
}
});
…
</script>
https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/try...catch
78
79
Сместим фокус на пароль
<script> …
if (storage) {
login.value = storage;
password.focus();
} else {
login.focus();
}
});
…
</script>
80
81
window
Глобальный объект; занимается окном, внутри
которого находится DOM-дерево.
82
83
Закроем модальное окно по ESC
<script> …
window.addEventListener("keydown", function (evt) {

…
});
</script>
84
Реагируем только на клавишу ESC
<script> …
26

3
if (evt.keyCode === 27) {
…
5
}
});
12
</script>
6
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
85
Реагируем только на открытый попап
<script> …

if (popup.classList.contains("modal-show")) {
…
}
}
});
</script>
86
Отменяем действия по умолчанию
<script> …

}
}
});
</script>
87
Закрываем модальное окно
<script> …

}
}
});
</script>
88
<script> });
var popup = document.querySelector(".modal-login"); close.addEventListener("click", function (evt) {
var close = popup.querySelector(".modal-close"); evt.preventDefault();
var form = popup.querySelector("form"); popup.classList.remove("modal-show");
var login = popup.querySelector("[name=login]"); });
var isStorageSupport = true; if (!login.value || !password.value) {
var storage = ""; evt.preventDefault();
try { } else {
storage = localStorage.getItem("login"); if (isStorageSupport) {
} catch (err) { localStorage.setItem("login", login.value);
isStorageSupport = false; }
} }
});
evt.preventDefault(); window.addEventListener("keydown", function (evt) {
popup.classList.add("modal-show"); if (evt.keyCode === 27) {
if (storage) { evt.preventDefault();
login.value = storage; popup.classList.remove("modal-show");
password.focus(); }
} else { }
login.focus(); });
} </script>
89
Добавим анимации
Плавно спустим форму
<style>
4
…
5
@keyframes bounce {
0% { transform: translateY(-2000px); }
4
70% { transform: translateY(30px); }
90% { transform: translateY(-10px); }
100% { transform: translateY(0); } 12
}
10
.modal-show {
display: block;
animation-name: bounce;
animation-duration: 0.6s;
}
</style>
91
Демонстрация:
анимация появления формы
https://up.htmlacademy.ru/htmlcss/25/demos/2263#29
92
Потрясём форму
<style>
… 4
@keyframes shake { 5
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
4
20%, 40%, 60%, 80% { transform: translateX(10px); }
}
12
.modal-error {
animation-name: shake; 10
animation-duration: 0.6s;
</style>
93
<script> …

popup.classList.add("modal-error");
} else {
}
}
});
…
</script>
94
<script> …

popup.classList.remove("modal-error");
});

} else {
}
}
});
…
</script>
94
Демонстрация:
анимация при ошибке в форме
https://up.htmlacademy.ru/htmlcss/25/demos/2263#30
95
Скрипт готов
<script> evt.preventDefault();
var link = document.querySelector(".login-link"); popup.classList.remove("modal-show");
var popup = document.querySelector(".modal-login"); popup.classList.remove("modal-error");
var close = popup.querySelector(".modal-close"); });
var login = popup.querySelector("[name=login]"); form.addEventListener("submit", function (evt) {
var password = popup.querySelector("[name=password]"); if (!login.value || !password.value) {
var isStorageSupport = true; popup.classList.remove("modal-error");
var storage = ""; popup.offsetWidth = popup.offsetWidth;
try { } else {
storage = localStorage.getItem("login"); if (isStorageSupport) {
} catch (err) { localStorage.setItem("login", login.value);
isStorageSupport = false; }
} }
});
evt.preventDefault(); window.addEventListener("keydown", function (evt) {
popup.classList.add("modal-show"); if (evt.keyCode === 27) {
if (storage) { evt.preventDefault();
login.value = storage; popup.classList.remove("modal-show");
password.focus(); popup.classList.remove("modal-error");
} else { }
login.focus(); }
} });
}); </script>

96
Скрипт в отдельный файл
…

…
<form class="login-form" action="https://echo.htmlacademy.ru" method="post">
<input class="login-icon-user" type="text" name="login">
<input class="login-icon-password" type="password" name="password">
…
</form>
</section>
<script src="js/popup.js"></script>
</body>
</html>
97
Как проехать
98
Как проехать
99
Откроем модальное окно
…
<section class="contacts">
…
<a class="button contacts-button-map" href="map.html">Как проехать</a>

<a class="button" href="contacts.html">Обратная связь</a>
</section>
<section class="modal modal-map">

<h2 class="visually-hidden">Как до нас добраться</h2>
<p><img src="img/map.jpg" width="766" height="560" alt="Офис компании по адресу ул. Большая Конюшенная 19/8, Санкт-
Петербург"></p>
</section>
100
var link = document.querySelector(".contacts-button-map"); }
});
var popup = document.querySelector(".modal-map");
var close = popup.querySelector(".modal-close");

});

});

}
101
var mapLink = document.querySelector(".contacts-button-map"); }
});
var mapPopup = document.querySelector(".modal-map");
var mapClose = mapPopup.querySelector(".modal-close");
mapLink.addEventListener("click", function (evt) {

mapPopup.classList.add("modal-show");
});
mapClose.addEventListener("click", function (evt) {

mapPopup.classList.remove("modal-show");
});

if (mapPopup.classList.contains("modal-show")) {
mapPopup.classList.remove("modal-show");
}
102
Разбираемся с Google картой
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m…" width="600" height="450" allowfullscreen></iframe>
1 2
1. width — ширина карты в пикселях

2. height — высота карты в пикселях
https://www.google.ru/maps
106
Встроим Google карту
…

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1998.654168778302!2d30.324424403167985!
3d59.93788053140718!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4696310fca5ba729%3A0xea9c53d4493c879f!
2z0JHQvtC70YzRiNCw0Y8g0JrQvtC90Y7RiNC10L3QvdCw0Y8g0YPQuy4sIDE5LCDQodCw0L3QutGCLdCf0LXRgtC10YDQsdGD0YDQsywgMTkxMTg2!5e0!
3m2!1sru!2sru!4v1544704404879" width="766" height="560" allowfullscreen></iframe>
</section>
107
108
Разбираемся с Яндекс картой
<iframe src="https://yandex.ru/map-widget/v1/-/CB…" width="560" height="400" allowfullscreen></iframe>
1 2
1. width — ширина карты в пикселях

2. height — высота карты в пикселях
https://yandex.ru/maps
113
Встроим Яндекс карту
…

<iframe src="https://yandex.ru/map-widget/v1/-/CBFL62CzcB" width="766" height="560" allowfullscreen></iframe>
</section>
114
115
Скрипт в отдельный файл
…
<script src="js/popup.js"></script>
<script src="js/map.js"></script>
</body>
</html>
116
Проверяйте, что умеет браузер
117
Тестируйте скрипты 
во всех браузерах
Что читать дальше
– Книжка с носорогом 
https://www.ozon.ru/context/detail/id/141703512/
– Выразительный JavaScript 
https://karmazzin.gitbooks.io/eloquentjavascript_ru/
– Mozilla Developer Network 

https://developer.mozilla.org/ru/docs/Web/JavaScript
– Современный учебник JavaScript 

https://learn.javascript.ru
119
Дополнительные критерии
Д14. Собственные скрипты собраны в отдельном JavaScript-файле, который
подключён в HTML перед закрывающим тегом body.
Д16. С помощью JavaScript реализовано открытие/закрытие окна с формой

(без вспомогательных библиотек).
Д17. С помощью JavaScript добавлена анимация формы (без вспомогательных

библиотек).
Д18. Добавлена интерактивная карта (допускается подключение с помощью iframe).
120
Задание на DOM
1. Основное задание: оживить интерактивные элементы в личном проекте.
2. Бонусное задание: добавить интерактивную карту в личном проекте.
121
126
Задание на DOM
1. Основное задание: оживить интерактивные элементы в личном проекте.
2. Бонусное задание: добавить интерактивную карту в личном проекте.
127
console.log(“Всем JavaScript!”)

Презентация

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Презентация

Загружено:

Авторское право:

Доступные форматы

Раздел 9:

1. Где будем искать элемент (по всему DOM-дереву). 3.1

1. Где будем искать элемент (по всему DOM-дереву). 3.1

2. Метод для поиска элемента. 12

1. Где будем искать элемент (по всему DOM-дереву). 3.1

2. Метод для поиска элемента. 12

3. Передаём методу CSS-селектор, по которому будем искать. 8

<a class="login-link" href="login.html">Вход</a>

<a class="login-link" href="login.html">Вход</a>

var link = document.querySelector(".login-link"); 4

1. Название переменной (link), в которой будет находится найденный 3.1

var link = document.querySelector(".login-link"); 4

1. Название переменной (link), в которой будет находится найденный 3.1

2. Поиск элемента по всему DOM-дереву. 8

var link = document.querySelector(".login-link"); 4

1. Название переменной (link), в которой будет находится найденный 3.1

2. Поиск элемента по всему DOM-дереву. 8

3. CSS-селектор, по которому будем искать элемент.

1. Где будем искать элементы (по всему DOM-дереву). 3.1

1. Где будем искать элементы (по всему DOM-дереву). 3.1

2. Метод для поиска элементов. 12

1. Где будем искать элементы (по всему DOM-дереву). 3.1

2. Метод для поиска элементов. 12

3. Передаём методу CSS-селектор, по которому будем искать. 8

link.addEventListener("click", function () { … }); 1

1. Элемент, у которого мы будем ловить событие. 1

link.addEventListener("click", function () { … }); 1

1. Элемент, у которого мы будем ловить событие. 1

2. Метод для отлова событий. 12

link.addEventListener("click", function () { … }); 1

1. Элемент, у которого мы будем ловить событие. 1

2. Метод для отлова событий. 12

3. Определяем, какое событие мы ловим («клики»). 9

link.addEventListener("click", function () { … }); 1

1. Элемент, у которого мы будем ловить событие. 1

2. Метод для отлова событий. 12

3. Определяем, какое событие мы ловим («клики»). 9

4. Функция, которая будет выполняться каждый раз, когда мы ловим событие

<a class="login-link" href="login.html">Вход</a>

var link = document.querySelector(".login-link");

<a class="login-link" href="login.html">Вход</a>

var link = document.querySelector(".login-link");

<a class="login-link" href="login.html">Вход</a>

var link = document.querySelector(".login-link");

<a class="login-link" href="login.html">Вход</a>

var link = document.querySelector(".login-link");

link.addEventListener("click", function (evt) {

<section class="modal modal-login">

var popup = document.querySelector(".modal-login");

1. Элемент, которому добавляем новый класс. 5.1

1. Элемент, которому добавляем новый класс. 5.1

2. Свойство, содержащее в себе методы для работы с классами. 12

1. Элемент, которому добавляем новый класс. 5.1

2. Свойство, содержащее в себе методы для работы с классами. 12

3. Метод добавления класса. 10

1. Элемент, которому добавляем новый класс. 5.1

2. Свойство, содержащее в себе методы для работы с классами. 12

3. Метод добавления класса. 10

4. Название класса, которое нужно добавить элементу.

var popup = document.querySelector(".modal-login");

var popup = document.querySelector(".modal-login");

var popup = document.querySelector(".modal-login");

<section class="modal modal-login ">

var popup = document.querySelector(".modal-login");

3. Знак ! переворачивает условие наоборот: значение отсутствует 

Логическое «и»  Логическое «или» 