Як зробити кнопку з кодом
При створенні сторінок буває потрібно, щоб при натисканні на вміщену в сторінку кнопку в браузері відбувалося якесь запрограмоване автором подія. Для цього потрібно помістити в створюваний документ javascript-код і прив`язати його до потрібної кнопки. Залежно від обсягу коду, який необхідний для реалізації задуманого події, можна використовувати різні способи підключення кнопки до коду.
1
Найчастіше виклик javascript-коду прив`язують до події onclick, тобто до клацання по кнопці лівою кнопкою миші. Якщо для опису дії, яке має відбутися, не потрібно великого обсягу коду, то його весь можна помістити прямо в тег кнопки. Наприклад, щоб запрограмувати браузер показувати просте повідомлення при натисканні кнопки, javascript-сценарій повинен виглядати так: alert ( `Код спрацював!`) Потрібно всього один оператор і текст. Все це без проблем можна помістити в опис події onclick тега button. Найпростіший HTML-код сторінки в цьому випадку може виглядати так:
кнопка з кодом
2
Код складнішого javascript-сценарію розміщувати безпосередньо в тезі кнопки недоцільно. Простіше зробити з нього окрему функцію, а в подія onclick помісити її виклик. Наприклад, так може виглядати функція, яка показує віконце, що містить час натискання кнопки: function getTime () {
var now = new date () -
alert ("Код спрацював в " + Now.getHours () + ":" + Now.getMinutes ()) -
} Її слід розмістити в головній частині сторінки (між тегами і ). Повний код сторінки з прив`язаним до кнопки викликом цієї функції може виглядати так:
Кнопка з викликом функції
var now = new date () -
alert ("Код спрацював в " + Now.getHours () + ":" + Now.getMinutes ()) -
} Її слід розмістити в головній частині сторінки (між тегами і ). Повний код сторінки з прив`язаним до кнопки викликом цієї функції може виглядати так:
3
Цей же спосіб слід використовувати, коли натискання кількох різних кнопок повинно викликати подія, яку можна описати однаковим javascript-кодом. Наприклад, можна трохи змінити попередню функцію, щоб вона додати в віконце з повідомленням ідентифікацію натиснутою кнопки: function getTime (btnString) {
var now = new date () -
alert (btnString + " натиснута в " + Now.getHours () + ":" + Now.getMinutes ()) -
} Повний код сторінки з трьома такими кнопками може виглядати так:
Три кнопки з викликом функції
var now = new date () -
alert (btnString + " натиснута в " + Now.getHours () + ":" + Now.getMinutes ()) -
} Повний код сторінки з трьома такими кнопками може виглядати так:
Статті за темою "Як зробити кнопку з кодом"
Оцініть, будь ласка статтю