Theme17

Приклад 4. Імітація прогрес-бара
<img src=images/bar.png width=14 height=32 id=barImage><br>
<button onclick="move()">Start</button>
<script>
function move() {
var elem = document.getElementById("barImage");
var width = elem.width;
var id = setInterval(progress, 10);
function progress() {
if (width == 200) {
clearInterval(id);
} else {
width++;
elem.width = width;
}
}
}
</script>

Передача параметрів. Приклад.
<p id=output></p>
<button onclick="go(event)" id=b1>Кнопка 1</button>
<button onclick="go(event)" id=b2>Кнопка 2</button>
<script>
var setIntervalID, tics = 0;
function go(event) {
clearInterval(setIntervalID);
var btn=event.target.id;
setIntervalID = setInterval(showTime, 500, btn);
function showTime(param1) {
tics++;
output.innerHTML = "спрацювала кнопка " + param1 + ",
tics: " + tics + ", id of setInterval: " + setIntervalID;
}
}
</script>

Клавіатурні події
onkeydown
Подія відбувається, коли користувач натискає будь-яку клавішу.
Синтаксис:
<element onkeydown="myScript">
Приклад:
<p>Press a key inside the text field to set a red
background color.</p>
<input type="text" id="demo"
onkeydown="myFunction()">
<script>
function myFunction() {
demo.style.backgroundColor = "red";
}
</script>

onkeyup
Подія відбувається, коли користувач відпускає будь-яку клавішу.
Синтаксис:
<element onkeyup="myScript">
Приклад:
<p>Press and hold down a key inside the text field
to set a red background color. Release the key to
set a green background color.</p>
<input type="text" id="demo"
onkeydown="keydownFunction()"
onkeyup="keyupFunction()">
<script>
function keydownFunction() {
}
function keyupFunction() {
demo.style.backgroundColor = "green";
}
</script>

keypress
Аналогічно до keydown, але не спрацьовує на Ctrl, Shift, Alt, F1...
Синтаксис:
<element onkeypress="myScript">
Приклад:
<p>Press a key inside the text field to set a red
background color.</p>
<input type="text" id="demo">
<script>
demo.addEventListener("keypress", myFunction);
}
</script>

Задача 71
Створіть сторінку з таким HTML-кодом:
Введіть текст: <input type="text" id="fname">
<p>Ваш текст: <span id="demo"></span></p>
Напишіть скрипт, який у поле demo буде
автоматично виводити текст, переведений у
верхній регістр.
Порада: вміст input-поля можна отримати
властивістю fname.value.

Розв’язок
Введіть текст: <input type="text" id="fname"
onkeypress="myFunction()">
<p>Ваш текст: <span id="demo"></span></p>
<script>
var x = fname.value;
demo.innerHTML = x.toUpperCase();
}
</script>

keyCode
Властивість keyCode повертає
Unicode клавіші, на якій спрацьовує
onkeydown, onkeyup чи onkeypress.
Для Firefox треба використовувати
which.

Приклад 1:
<input type="text" size="50"
onkeypress="uniCharCode(event)"
onkeydown="uniKeyCode(event)">
<p>onkeypress - <span id="demo"></span></p>
<p>onkeydown - <span id="demo2"></span></p>
<script>
function uniCharCode(event) {
var char = event.which || event.keyCode;
document.getElementById("demo").innerHTML = "The
Unicode CHARACTER code is: " + char;
}
function uniKeyCode(event) {
var key = event.keyCode || event.keyCode;
document.getElementById("demo2").innerHTML = "The
Unicode KEY code is: " + key;
}
</script>

Приклад 2. Alert спрацьовує, коли користувач натискає
Esc (з кодом 27):
<body onkeydown="myFunction(event)">
<script>
function myFunction(event) {
var x = event.which || event.keyCode;
if (x == 27) {
alert ("You pressed the Escape key!");
}
}
</script>
</body>

Задача 72
Розмістіть на сторінці зображення таким кодом:
<img src="images/circle_red.png" id="im"
style="position:absolute; left:400px;
top:300px">
<script>
var key = event.which || event.keyCode;
alert(key);
}
</script>
</body>
Дізнайтесь коди клавіш-стрілок і змініть скрипт так,
щоб картинка рухалась при натисканні стрілок.
Задавати положення можна за зразком:
im.style.left = '100px';

Розв’язок
<img src="images/circle_red.png" id="im" style="position:absolute; left:400px; top:300px">
<script>
var x = 400;
var y = 300;
var key = event.which || event.keyCode;
if (key == 37) {
x -= 10;
im.style.left = x + 'px';
}
if (key == 39) {
x += 10;
im.style.left = x + 'px';
}
if (key == 38) {
y -= 10;
im.style.top = y + 'px';
}
if (key == 40) {
y += 10;
im.style.top = y + 'px';
}
}
</script>
</body>

Конвертація Unicode в символи
Синтаксис:
String.fromCharCode(n1, n2, ..., nX)
Приклади:
var res = String.fromCharCode(65);
alert(res); // A
alert(String.fromCharCode(72, 69, 76,
76, 79)); // HELLO

Завантаження документа і його
елементів
DOMContentLoaded – подія, яка виникає, коли
завантажений HTML документа і побудоване DOM-
дерево. Це дозволяє отримати JavaScript-доступ до
всіх елементів сторінки. Скрипти таким чином можна
поміщати прямо в <head>. Картинки, стилі, файли
при цьому можуть бути недовантажені.
Обробник додається тільки через
addEventListener:
document.addEventListener("DOMContentLoaded",
myScript);

onload – подія, яка відбувається після
завантаження об’єкта.
Синтаксис:
<element onload="myScript">
Або
object.onload =
function(){myScript};
Або
object.addEventListener("load",
myScript);

Приклад:
<img
src="https://uk.wikipedia.org/static/images/pro
ject-logos/ukwiki.png" onload="loadImage()"
width="135" height="155">
<script>
function loadImage() {
alert("Картинка завантажена");
}
</script>

Theme17

Recommended

Recommended

More Related Content

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

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

Recently uploaded

Recently uploaded (9)

Theme17