Как сделать кнопку с кодом?

3 ноября 2014 г. Просмотров: 282

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

Инструкция

  • Чаще всего вызов JavaScript-кода привязывают к событию onclick, то есть к щелчку по кнопке левой кнопкой мыши. Если для описания действия, которое должно произойти, не требуется большого объема кода, то его весь можно поместить прямо в тег кнопки. Например, чтобы запрограммировать браузер показывать простое сообщение при нажатии кнопки, JavaScript-сценарий должен выглядеть так:alert('Код сработал!')Требуется всего один оператор и текст. Все это без проблем можно поместить в описание события onclick тега button. Простейший HTML-код страницы в этом случае может выглядеть так:
  • Кнопка с кодом

    Кнопка с кодом

  • Код более сложного JavaScript-сценария размещать непосредственно в теге кнопки нецелесообразно. Проще сделать из него отдельную функцию, а в событие onclick помесить ее вызов. Например, так может выглядеть функция, которая показывает окошко, содержащее время нажатия кнопки:function getTime() {
  • var now = new date();

    alert("Код сработал в " + now.getHours() + ":" + now.getMinutes());

    }Ее следует разместить в заголовочной части страницы (между тегами и ). Полный код страницы с привязанным к кнопке вызовом этой функции может выглядеть так:

    Кнопка с вызовом функции

    function getTime() {

    var now = new date();

    alert("Код сработал в " + now.getHours() + ":" + now.getMinutes());

    }

    Кнопка с вызовом функции

  • Этот же способ следует использовать, когда нажатие нескольких разных кнопок должно вызывать событие, которое можно описать одинаковым JavaScript-кодом. Например, можно немного изменить предыдущую функцию, чтобы она добавить в окошко с сообщением идентификацию нажатой кнопки: function getTime(btnString) {
  • var now = new date();

    alert(btnString + " нажата в " + now.getHours() + ":" + now.getMinutes());

    }Полный код страницы с тремя такими кнопками может выглядеть так:

    Три кнопки с вызовом функции

    function getTime(btnString) {

    var now = new date();

    alert(btnString + " нажата в " + now.getHours() + ":" + now.getMinutes());

    }

    Первая кнопка

    Вторая кнопка

    Третья кнопка

    Оцените статью!