JS switch. events (onclick, onfocus, onblur)

Конструкция switch.
Events (onclick, onfocus, onblur)

Конструкция switch заменяет собой сразу несколько if.
Она представляет собой более наглядный способ сравнить выражение сразу с
несколькими вариантами.
switch(x) {
case 'value1': // if (x === 'value1')
...
[break]
case 'value2': // if (x === 'value2')
...
[break]
default:
...
[break]
}

● Переменная x проверяется на строгое равенство первому значению
value1, затем второму value2 и так далее.
● Если соответствие установлено – switch начинает выполняться от
соответствующей директивы case и далее, до ближайшего break
(или до конца switch).
● Если ни один case не совпал – выполняется (если есть) вариант
default.
При этом case называют вариантами switch.

Пример работы
var a = 2 + 2;
switch (a) {
case 3:
alert( 'Маловато' );
break;
case 4:
alert( 'В точку!' );
break;
case 5:
alert( 'Перебор' );
break;
default:
alert( 'Я таких значений не знаю' );
}
Здесь оператор switch
последовательно сравнит a
со всеми вариантами из
case.

events
(onclick, onfocus, onblur)
Событие – это сигнал от браузера о том, что что-то
произошло. Существует много видов событий.
Посмотрим список самых часто используемых,
пока просто для ознакомления:

onclick event
Обработчик может быть назначен прямо в разметке, в атрибуте, который называется
on<событие>.
Например, чтобы прикрепить click-событие к input кнопке, можно присвоить обработчик
onclick, вот так:
<input value="Нажми меня"
onclick="alert('Клик!')" type="button">

Пример
<script>
function ChangeColor(Element) {
if (Element.style.color == 'green') Element.style.color = 'red';
else Element.style.color = 'green';
return false;
}
</script>
<a href="#" style="color: green;" onclick="return ChangeColor(this);">Изменить
цвет</a>

onfocu/onblur
Событие onfocus возникает при получении элементом
фокуса. Например, для текстового поля фокусом
называется возможность вводить текст. Событие
onfocus по своему действию противоположно onblur

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Событие onfocus</title>
<style>
input {
border: 1px solid #ccc; /* Параметры рамки */
padding: 3px; /* Поля вокруг текста */
color: #666; /* Цвет текста */
width: 90%; /* Ширина поля */
}
</style>

</head>
<body>
<form>
<p><input type="text" class="text" value="Введите
текст"
onfocus="this.value=''" onblur="this.value='Введите
текст'"></p>
</form>
</body>
</html>
В данном примере при получении фокуса в текстовом поле скрывается текст, а при потере
фокуса (событие onblur), наоборот, в поле добавляется текстовая строка.

Пример: введите ваше имя: <input type="text" id="myInput"
onfocus="focusFunction()" onblur="blurFunction()">
<script>
function focusFunction() {
// Focus = Changes the background color of input to yellow
document.getElementById("myInput").style.background = "yellow";
}
function blurFunction() {
// No focus = Changes the background color of input to red
document.getElementById("myInput").style.background = "red";
}
</script>

«Мүмкүнчүлүктөрү чектелген адамдарга карата IT окутуу» проекти
Европалык Союзу тарыбынан финансылоо болгон.
Бул документин мазмуну толугу менен IT Академиянын
жоопкерчилиги жана эч кандай жолунда Европалык Комиссиянын
көз карашын көргөзбөйт.

Проект «IT тренинг для людей с ограниченными возможностями»
финансирован Европейским Союзом.
Содержание этого документа полностью является
ответственностью IT Academy и никак не отражает взгляды
Европейской Комиссии.

#programmingwithoutbarriers
#cheksizprogramming

JS switch. events (onclick, onfocus, onblur)

More Related Content

Similar to JS switch. events (onclick, onfocus, onblur) (12)

More from IT Academy Project EU (20)

JS switch. events (onclick, onfocus, onblur)