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

Recommended

Recommended

More Related Content

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

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

Recently uploaded

Recently uploaded (13)

Coding for Future in Lutsk. JavaScript. Part 15