Як зробити кнопку з кодом

Як зробити кнопку з кодом

При створенні сторінок потрібно, щоб при натисканні на поміщену в сторінку кнопку в браузері відбувалася якась запрограмована автором подія. Для цього потрібно помістити в створений документ JavaScript-код і прив 'язати його до потрібної кнопки. Залежно від об 'єму коду, необхідного для реалізації задуманої події, можна використовувати різні способи з' єднання кнопки до коду.

Інструкція

1. Найчастіше виклик JavaScript-коду прив 'язують до події onclick, тобто до клацання лівою кнопкою миші. Якщо для опису дії, яка має відбутися, не потрібно великого обсягу коду, то його весь можна помістити прямо в тег кнопки. Наприклад, щоб запрограмувати просте повідомлення при натисканні кнопки, JavaScript-сценарій повинен виглядати так:alert ("Код спрацював!") Потрібен лише один оператор і текст. Все це без проблем можна помістити в опис події onclick теґу button. Найпростіший HTML-код сторінки в цьому випадку може виглядати так:< html > < head > < title > Кнопка з кодом </title > </head > < body > < button onclick = "" javascript:alert ("Код спрацював!"); "> Кнопка з кодом </button > </body > </html >переглядачпоказувати


2. Код більш складного JavaScript-сценарію розміщувати безпосередньо в тегу кнопки недоцільно. Простіше зробити з нього окрему функцію, а в подію onclick помісити її виклик. Наприклад, так може виглядати функція, яка показує віконце, що містить час натискання кнопки:function getTime() { var now = new date(); alert ("Код спрацював в" "+ now.getHours () +" ":"" + now.getMinutes ());} Ee слід розмістити в заголовковій частині сторінки (між тегами < head > і </head >). Повний код сторінки з прив 'язаним до кнопки викликом цієї функції може виглядати так:< html > < head > < title > Кнопка з викликом функції </title > < script > function getTime () {var now = new date (); alert ("Код спрацював в" "+ now.getHours () +" ":"" + now.getMinutes ());} </script > </head > < body > < button onclick = "" getTime (); "> Кнопка з викликом функції </button > <

3. Цей же спосіб слід використовувати, коли натискання декількох різних кнопок має викликати подію, яку можна описати однаковим JavaScript-кодом. Наприклад, можна трохи змінити попередню функцію, щоб вона додати до віконця з повідомленням ідентифікацію натиснутої кнопки: function getTime(btnString) { var now = new date(); alert (btnString + "" натиснута в "+ now.getHours () +" ":"" + now.getMinutes ());} Повний код сторінки з трьома такими кнопками може виглядати так:< html > < head > < title > Три кнопки з викликом функції </title > < script > function getTime (btnString) {var now = new date (); alert (btnString + "" натиснута в "+ now.getHours () +" ":"" + now.getMinutes ());} </script > </head > < body > < button onclick = "" getTime (this.innerHTML); "> Перша кнопка <