#10 — События в программировании

Февраля

2017

лайков

Мы снова рады приветствовать вас на канале LoftBlog. Темой сегодняшнего десятого видеоурока курса по основам программирования будет одно из важнейших понятий в этой области — событие в программировании.

Что такое события в программировании и зачем они нужны

Событие – это сообщение от программы, которое возникает в точках исполняемого кода при выполнении определенных условий. Они нужны для того, чтобы предусмотреть или обработать реакцию программы на определенное стечение обстоятельств. В качестве примера из жизни мы можем взять какой-либо механизм, работающий от включения пользователем. Допустим, при нажатии кнопки на системном блоке компьютер включится, при нажатии на кнопку электрического чайника в нем начнется процесс кипячения воды и т.п.

Тот же механизм используется и в программировании. То есть для решения поставленной задачи создается обработчик события, и как только программа попадает в предусмотренное состояние, он вызывается. В случае веб-программирования это, например, взаимодействие пользователя и графического интерфейса сайта (нажатие на кнопку).

Пишем обработчик события в программировании для кнопки

На видеоуроке мы вместе с вами создадим обработчик события для кнопки сброса «СE» в калькуляторе, написанном на JavaScript. Для начала находим эту кнопку, а затем:

var btn = document.getElementById(‘ce’);
/*обработчик события*/
btn.addEventListener(‘click’, function (e) {
alert(‘Вы нажали на кнопку сброса! Не надо так!’);
});

var btn = document.getElementById(‘ce’);

/*обработчик события*/

btn.addEventListener(‘click’, function (e) {

alert(‘Вы нажали на кнопку сброса! Не надо так!’);

});

Теперь добавим обработчик события в программировании, который при вводе символов в окно калькулятора, будет выводить их в отдельном сообщении:

var display = document.getElementById(‘display’);
display.addEventListener(‘keyup’, function (e) {
alert(e.target.value);
});

var display = document.getElementById(‘display’);

display.addEventListener(‘keyup’, function (e) {

alert(e.target.value);

});

И напоследок, давайте навесим обработчик событий на все кнопки. Получится, что при нажатии на любую кнопку будет выводиться в окно калькулятора текст этой кнопки:

var btns = document.querySelectorAll(‘.btn’);
function handleClick = function (e) {
var value = e.target.textContent;
display.value = value;
}
/*цикл по всем кнопкам калькулятора*/
for(var i = 0; I < btns.length; i++) {
var btn = btns[i];
btn.addEventListener(‘click’, handleClick);

var btns = document.querySelectorAll(‘.btn’);

function handleClick = function (e) {

var value = e.target.textContent;

display.value = value;

}

/*цикл по всем кнопкам калькулятора*/

for(var i = 0; I < btns.length; i++) {

var btn = btns[i];

btn.addEventListener(‘click’, handleClick);

Таким образом, сегодняшний видеоурок поможет вам научиться оживлять графические интерфейсы при помощи событий. На следующем уроке видеокурса мы полностью реализуем функционал нашего калькулятора на JavaScript. До скорой встречи.

Приятного всем просмотра! Учитесь с удовольствием! Всегда ваш LoftBlog.

Видеокурс Видеоурок основы программирования программирование события в программировании

Материалы к уроку:

Делись:

Оставь комментарий!

Добавить комментарий Отменить ответ

Для отправки комментария вам необходимо авторизоваться.