Coding for Future in Lutsk. JavaScript. Part 15

Задача 67
Створіть сторінку, на якій генеруватиметься
маркований список з числами 1-20. Розмістіть
там ще два абзаци <p id="par1"></p> і <p
id="par2">0</p>. Напишіть код, який при
наведенні мишки на елементи списку буде
виводити відповідні числа у абзац par1, а при
кліках на них – виводити у par2 суму
відповідних чисел.
Підказки:
Подія наведення мишки – mouseover;
Перетворити величину x у числовий тип можна
так: +x або так: parseFloat(x).

Розв’язок
<ul>
<script>
var N = 20;
for (var i = 1; i <= N; i++) {
document.write("<li>" + i + "</li>");
}
</script>
</ul>
<p id="par1"></p> <p id="par2">0</p>
<script>
var lis = document.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
lis[i].addEventListener("mouseover", handleMouseOver);
lis[i].addEventListener("click", handleClick);
}
function handleMouseOver(){
par1.innerHTML = this.innerHTML;
}
function handleClick(){
par2.innerHTML = +par2.innerHTML + +this.innerHTML;
}
</script>

Деякі приклади подій
mouseover і mouseout
<div id="myDiv">Поводіть тут мишкою</div>
<script>
myDiv.addEventListener("mouseover", mOver);
myDiv.addEventListener("mouseout", mOut);
function mOver() {
this.innerHTML = "Дякую"
}
function mOut() {
this.innerHTML = "Поводіть тут мишкою"
}
</script>

Або:
<div onmouseover="mOver(this)"
onmouseout="mOut(this)" >
Поводіть тут мишкою</div>
<script>
function mOver(obj) {
obj.innerHTML = "Дякую"
}
function mOut(obj) {
obj.innerHTML = "Поводіть тут мишкою"
}
</script>

mousedown, mouseup і click
(onmousedown, onmouseup і onclick)
<div id=myDiv style="background-
color:#D94A38;width:90px;height:20px;padding:40px;">
Натисніть</div>
<script>
myDiv.addEventListener("mousedown", mDown);
myDiv.addEventListener("mouseup", mUp);
function mDown() {
this.style.backgroundColor = "#1ec5e5";
this.innerHTML = "Відпустіть";
}
function mUp() {
this.style.backgroundColor="#D94A38";
this.innerHTML="Дякую";
}
</script>

Або
<div onmousedown="mDown(this)" onmouseup="mUp(this)"
style="background-
color:#D94A38;width:90px;height:20px;padding:40px;
">
Натисніть</div>
<script>
function mDown(obj) {
obj.style.backgroundColor = "#1ec5e5";
obj.innerHTML = "Відпустіть";
}
function mUp(obj) {
obj.style.backgroundColor="#D94A38";
obj.innerHTML="Дякую";
}
</script>

load (onload)
Подія стається, коли об’єкт завантажується.
Приклади:
<body onload="myFunction()">
object.onload = function(){myScript}; //
використовується анонімна функція
object.addEventListener("load", myScript);
<img src="someimage.gif" onload="loadImage()"
width="100" height="132">
<script>
function loadImage() {
alert("Image is loaded");
}
</script>

Спливання і перехоплення
Якщо є кілька вкладених один в одного елементів,
події можна призначати кожному з них. Тоді, по
замовчуванню, порядок виконання – від внутрішніх
до зовнішніх. Це звуть спливанням (bubbling).
Приклад:
<div onclick="alert('DIV')">
<p onclick="alert('P')">
<span> 1 </span>
<span onclick="alert('SPAN')"> 2
</span>
<span> 3 </span>
</p>
</div>
Клік на 2 виводить SPAN, потім P, потім DIV.

Порядок виконання можна змінити на
протилежний, що називають перехопленням
(capturing ). Це робиться третім
(необов’язковим) параметром у
addEventListener, який, по
замовчуванню, дорівнює false. Отже, для
перехоплення треба писати так:
element.addEventListener("click",
myFunction, true);

Приклад:
<div id=myDiv>
<p id=myPar>
<span> 1 </span><span id=mySpan> 2 </span><span> 3 </span>
</p>
</div>
<script>
myDiv.addEventListener("click", clickDiv, true);
myPar.addEventListener("click", clickPar, true);
mySpan.addEventListener("click", clickSpan, true);
function clickDiv() {
alert("You clicked the DIV element!");
}
function clickPar() {
alert("You clicked the P element!");
}
function clickSpan() {
alert("You clicked the SPAN element!");
}
</script>

Властивість target
Властивість події target повертає елемент, на якому
спрацювала подія.
Приклад:
<body onclick="myFunction(event)">
<p>Клікніть, і дізнаєтесь, на чому клікнули</p>
<div><strong>Зауваження:</strong> target повертає
елемент, на якому спрацювала подія, але не обов’язково
елемент, якому призначений eventlistener.</div>
<script>
function myFunction(event) {
alert(event.target.tagName);
}
</script>
</body>
В аргументі функції можна замість event використовувати e.

event.target дає можливість
прочитати чи змінити властивості
елементів (залежно від типу
елемента).
Приклади:
event.target.tagName
event.target.innerHTML
event.target.style
event.target.src

Задача 67
Завантажте і розпакуйте архів з
зображеннями goo.gl/mAjJME. Розмістіть їх
підряд на сторінці balls.html у блоці
DIV. Створіть для цього блоку обробник
подій, який при наведенні на будь-яку з
картинок заміняє її випадковим чином на
іншу.

Розв’язок
<div id="ballsContainer">
<img src="images/circle_blue.png">
<img src="images/circle_green.png">
<img src="images/circle_red.png">
<img src="images/circle_yellow.png">
<img src="images/circle_purple.png">
<img src="images/circle_grey.png">
</div>
<script>
ballsContainer.addEventListener("click", getBall);
var imgs = [
"images/circle_blue.png",
"images/circle_green.png",
"images/circle_red.png",
"images/circle_yellow.png",
"images/circle_purple.png",
"images/circle_grey.png"
];
function getBall(e) {
var rnd = Math.floor(Math.random()*imgs.length);
e.target.src = imgs[rnd];
}
</script>

Додаткове завдання
Змініть код попередньої задачі так, щоб
при наведенні мишкі на кульку, її розмір
збільшувався на 5 px (а при відведенні -
відновлювався).
Розв’язок (з коментарями і належним
оформленням коду) надішліть на адресу
viligurskyi@gmail.com

Передача параметрів обробнику
Щоб передати якісь параметри функції-обробнику, можна використати
анонімну функцію, яка викликає іншу, передаючи її потрібні параметри:
element.addEventListener("click", function(){
myFunction(p1, p2); });
Приклад:
<img src="images/1.png" width=600 height=400 id=img1>
<script>
img1.addEventListener("click", function()
{getBall(this.width,this.height)});
function getBall(a,b) {
alert(a*b); // к-ть пікселів картинки
}
</script>

Задача 68
Розмістіть в контейнері DIV два
зображення. Створіть обробники для
зображень, які при натисканні на них будуть
виводити шлях до зображень і кількість
зображень в контейнері. Наприклад:
шлях: file:///d:/JS/images/circle_blue.png
число картинок в контейнері: 2
Підказка: батьківський елемент можна
отримати властивістю parentElement.

Розв’язок
<div>
</div>
<script>
{getBall(this.src,this.parentElement.children)});
{getBall(this.src,this.parentElement.children)});
function getBall(a,b) {
alert("шлях до картинки: " + a + "nчисло картинок в
контейнері: " + b.length);
}
</script>

Coding for Future in Lutsk. JavaScript. Part 15

More Related Content

More from Олег Вілігурський

Recently uploaded

Coding for Future in Lutsk. JavaScript. Part 15