Как вызвать функцию JavaScript в HTML

В этом уроке ты узнаешь, как вызывать функции JavaScript с HTML-страниц, чтобы сделать их интерактивными.

HTML и CSS могут структурировать веб страницу и сделать ее красивой. JavaScript помогает веб-странице взаимодействовать с пользователями и направлять их к нужной информации.

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

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

Использование функций JS с атрибутами событий HTML

Ты можешь использовать атрибуты события в элементе управления HTML для вызова функции Javascript при возникновении события.

HTML предоставляет набор таких атрибутов для охвата широкого спектра событий.

Несколько распространенных примеров - onclick, onchange, onload, onmouseover, onmouseout и onkeydown.

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

Это, пожалуй, самый простой подход для вызова функции JavaScript из HTML-элемента.

Как вызвать функцию JavaScript с помощью атрибутов событий HTML

Давайте разработаем веб-страницу, которая будет принимать имена своих пользователей. Как только пользователь нажмет кнопку “Отправить”, на веб-сайте появится поздравительное сообщение для пользователя.

Мы будем использовать атрибут события HTML “onclick”, чтобы вызвать функцию, когда пользователь нажимает кнопку. Эта функция встретит пользователя предупреждающим сообщением.

Вам нужно будет создать файл HTML и JavaScript, чтобы опробовать этот пример. Давайте создадим index.html для исходного кода HTML и scripts.js для исходного кода JavaScript. Мы также будем использовать эти исходные коды для последующих примеров с минимальными изменениями.

Исходный код HTML

Ты можешь написать или скопировать приведенный ниже исходный код в свой index.html. Этот исходный код HTML показывает текстовое поле и кнопку отправки. Пользователи могут ввести имя в текстовое поле.

<!DOCTYPE html>
<html lang="en">
<head>

    <title> Calling Function From HTML</title>

</head>
<body>

<label for="fullName">Enter your name:</label>
<input type="text" name="fullName" id="fullName" />

<!-- The onclick event attribute is used to call showAlert() function -->
<button type="submit" onclick="showAlert()"> Submit</button>

<script src="/scripts.js"></script>

</body>
</html>

В приведенном выше примере используется атрибут события “onclick” в разметке для кнопки “Отправить”. Браузер вызывает функцию “showAlert()”, если пользователь нажимает кнопку “Отправить”.

Исходный код JavaScript

Давайте напишем приведенный ниже исходный код в scripts.js файл -

function showAlert()
{
    var name = document.getElementById("fullName").value;
    alert("Hello " +name +"!");
}

Эта функция выполняет поиск текстового поля HTML с идентификатором “Полное имя”. Он извлекает вводимые пользователем данные и использует их для отображения сообщения.

Ожидаемые результаты

В действии веб-страница просит конечных пользователей ввести полное имя пользователя. Если вы введете “Джон Коллинз”, система покажет сообщение “Привет, Джон Коллинз!”.

Использование функций JS с обработчиками событий JavaScript

JavaScript предоставляет набор свойств обработчика событий, способных выполнять вызовы функций. Ты можешь использовать их с объектами JavaScript для вызова функций в случае элемента управления HTML.

Каждое из этих свойств соответствует определенному событию. Несколько распространенных примеров - “onload”, “onclick”, “onmouseover”, “onmouseout” и “onkeydown”. Ты можешь получить полный список со многих веб-сайтов в Интернете.

Обработчики событий JavaScript также работают с элементами HTML, не требующими действий. Это означает, что ты можешь превратить даже элемент “

” в интерактивный элемент управления с помощью обработчика событий.

Обработчики событий JavaScript могут вызывать только одну функцию в событии для элемента HTML. Это ограничение, которое прокладывает путь для слушателей событий Javascript, чтобы войти в картину.

Как вызвать функцию JavaScript с помощью обработчиков событий в HTML

Мы разработаем веб-страницу, которая будет принимать имена своих пользователей. Как только пользователь нажмет кнопку “Отправить”, на веб-сайте появится поздравительное сообщение для пользователя.

Здесь мы будем использовать свойство обработчика событий JavaScript “onclick” для вызова функции JavaScript, когда пользователь нажимает кнопку “Отправить”.

Исходный код HTML

Ты можешь написать или скопировать исходный код HTML ниже в свой HTML-документ, index.html . Этот исходный код HTML показывает текстовое поле и кнопку отправки. Пользователи могут ввести имя в текстовое поле.

<!DOCTYPE html>

<html lang="en">

<head>
    <title> Calling Function From HTML</title>
</head>

<body>
<label for="fullName">Enter your name:</label>
<input type="text" name="fullName" id="fullName"/>
<button type="submit" id="submitButton"> Submit</button>

<script src="/scripts.js"></script>
</body>

</html>

Исходный код JavaScript

Ты можешь написать или скопировать приведенный ниже исходный код в свой файл JavaScript, scripts.js

var bttn = document.getElementById("submitButton");

function showAlert() {
    var name = document.getElementById("fullName").value;
    alert("Hello " + name + "!");
}

//Used onclick event handler property to call showAlert() function
bttn.onclick = showAlert;

В этом примере обработчик событий onclick вызывает функцию showAlert(). Этот вызов функции происходит, когда вы нажимаете кнопку отправки HTML.

Ожидаемые результаты

Если вы введете имя “Джон” и нажмете кнопку “Отправить”, система покажет сообщение - “Привет, Джон!”.

Как использовать слушатели событий для вызова функции JavaScript в HTML

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

Метод слушателя событий присоединяет слушатель событий к объекту и вызывает нужную функцию при запуске определенного события на объекте.

Это самый мощный, но гибкий подход к вызову функций из HTML.

JavaScript предлагает следующие два метода слушателя событий, которые можно использовать с объектами JavaScript-

addEventListener() - Добавляет обработчик событий в HTML-элемент и вызывает функции в указанном событии.
removeEventListener() - Удаляет обработчик событий из HTML-элемента.

Вы должны передать следующие параметры этим методам слушателя событий JavaScript -

Название события - Вам необходимо передать фактическое имя события HTML DOM. Пример нескольких распространенных событий - щелчок, изменение, фокусировка, перемещение мыши и т.д.
Имя функции - Вы должны передать здесь имя функции. Браузер вызывает эту функцию в ответ на описанное выше событие на объекте.
Ты можешь назначить объекту любое количество слушателей событий. Таким образом, ты можешь выполнить несколько вызовов функций в одном событии элемента управления HTML.

Пример кодирования для вызова функции JavaScript с использованием слушателей событий

Здесь мы будем использовать слушатель событий JavaScript для вызова функции JavaScript, когда пользователь нажимает кнопку “Отправить”.

Исходный код HTML

<!DOCTYPE html>

<html lang="en">

   <head>
     <title> Calling Function From HTML</title>    
   </head>
  
   <body>
     <label for="fullName">Enter your name:</label> 
     <input type="text" name="fullName" id="fullName"/> 
     <button type="submit" id="submitButton"> Submit</button> 
     <script src="/scripts.js"></script>
   </body>

</html>

Исходный код JavaScript

Внешний файл JavaScript, scripts.js должен иметь исходный код ниже -

var bttn =document.getElementById("submitButton");

   
function showAlert() {
     var name = document.getElementById("fullName").value;
     alert("Hello " + name + "!");
}

function showWelcomeMessage() {
     var name = document.getElementById("fullName").value;
     alert("Welcome, " + name + "!");
} 

//Event listener method
bttn.addEventListener("click", showAlert);
bttn.addEventListener("click", showWelcomeMessage);

Когда пользователь нажимает кнопку “Отправить”, браузер выполняет два вызова функций. Это функции “showAlert()` и “Showwelcomemessage()”.

Ожидаемые результаты

Если вы введете Джона в качестве ввода и нажмете кнопку “Отправить”, система должна отобразить два сообщения друг за другом:

Привет, Джон!
Добро пожаловать, Джон!

Заключение

Подводя итог, вот чему вы научились в этом уроке:

Ты можешь использовать атрибуты событий HTML, обработчики событий JavaScript для вызова функций. Они могут вызывать одну функцию в одном событии определенного элемента управления.
Атрибуты события HTML работают только с активными элементами HTML.
Обработчики событий JavaScript работают как с активными, так и с неактивными элементами управления.
Методы слушателя событий JavaScript принимают события HTML DOM. Таким образом, они дают вам возможность слушать широкий спектр событий. В дополнение к этому они позволяют вызывать множество функций в одном событии элемента управления.
Основное правило здесь заключается в том, что вы должны использовать свойство обработчика событий, когда вам нужно вызвать одну функцию в случае элемента управления. В случае, если вам нужно много вызовов функций в одном событии, вы должны выбрать методы прослушивания событий.

Получи мою бесплатную электронную книгу для подготовки к техническому собеседованию на JavaScript или начни Учить Full-Stack JavaScript прямо сейчас!

🔥 НАЧАТЬ ОБУЧЕНИЕ 🔥