Несколько простых примеров onclick на языке javascript

Javascript

Наше руководство поможет вам разобраться в функционале onclick () – обработчика событий. Для лучшего усваивания материала, мы приведем несколько простых примеров. Вы узнаете о их плюсах и минусах, а также усвоите принцип работы jQuery с событиями.

Назначение обработчиков событий

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

Все обработчики по правилам написания содержат в названии «on+наименование события», что и соблюдено в onclick (). В зависимости от конкретного события обработка будет осуществляться вследствие различных действий. То есть при использовании onclick () будут выполняться только те event-ы, которые вызваны левым кликом мышки.

Примеры назначения событийного обработчика

На текущий момент существует несколько способов внедрения в код обработчика определенных событий.

Простые события

Рассмотрим простой вариант, который строится на внедрении onclick ()непосредственно в html-разметку. Это выглядит так:

<!DOCTYPE HTML>
<html>
<head>
<metacharset=»utf-8″>
</head>
<body>
<inputtype=»button» onclick=»alert(‘Клик-клик!’)» value=»Кликни на меня и узнаешь, что произойдет.»/>
</body>
</html>

При нажатии на левую кнопку мышки всплывает сообщение «Клик-клик!». Здесь важно не забыть об этой маленькой, но существенной детали: внутри alert должны использоваться только одинарные кавычки (‘’).
Кроме того, в этом случае может применяться слово this, которое ссылается на текущий элемент и предоставляет ему все доступные методы.

<buttononclick=»alert (this.innerHTML=’Кликни!’)»>Нажми на меня</button>

Данная строка кода создает кнопку с текстом «Нажми на меня». В результате на экране всплывет сообщение: «’Кликни!». Оно заменит изначальное название кнопки.

Это самый простой способ, который можно использовать только для подобных задач, то есть выполнения простых команд или вывода сообщений.

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

Работа с функциями

С помощью функций можно отделить необходимый код в отдельный блок, который в результате можно вызывать посредством событийного обработчика в разметке html.

Рассмотрим пример приложения для вывода результирующего числа в разных степенях: от первой до пятой. Для этого была использована функция countPow (). В нее можно передавать примеры. В приведенном ниже приложении пользователь должен указать цифру в качестве переменной функции. Так, через обработчик, связанный с функцией, были произведены вычисления и выведены на экран.

<!DOCTYPE HTML>
<html>
<head>
<metacharset=»utf-8″>

<script>
varresult =1;
functioncountPow(n) {
for(var i=1; i<=5; i++) {
result*=n;
alert(«В » + i +»-ой степени результат равен: «+ result);
}
}
</script>
</head>
<body>
<inputtype=»button» onclick=»countPow(3)» value=»Узнать 5 степеней числа!»/>
</body>
</html>

Этот способ пользуется спросом у разработчиков. Но он не самый популярный, поскольку не всегда удобно делать привязку событий таким образом. Иногда лучшее решение для задачи – предусмотреть гибкую привязку объектов к событиям, применяя их свойства. .

Свойства DOM-элементов («DocumentObjectModel»)

DOM – основной инструмент для выполнения разных манипуляций и изменений над элементами страницы. Поскольку DOM является иерархическим деревом, то к определенным методам и свойствам объектов веб-страницы можно добраться посредством продвижения через конкретные ветви.

Рассмотрим пример – цвет фона меняется со стандартного на синий. Проход по цепочке document.body.style.backgroundColor.

<!DOCTYPE HTML>
<html>
<head>
<metacharset=»utf-8″>
</head><body>

<inputtype=»button» id=»button» value=»Кнопка» />
<script>
button.onclick = function() {
document.body.style.backgroundColor = ‘blue’;
};
</script>

</body>
</html>

Использование библиотеки jQuery

С появлением этой библиотеки стало использоваться много дополнительных команд, методов и свойств, которые существенно сокращают и упрощают написанный код. Чаще всего разработчики применяют свойства для получения определенного элемента по его идентификатору (document.getElementById (iden)), имени (document.getElementsByName (name)) или тегу (elem.getElementsByTagName (tag)).

Для наглядности приведем очередной пример:

<!DOCTYPE HTML>
<html>
<head>
<title>Работа с jQuery</title>
<metacharset=»utf-8″>
</head>
<body>

<p id=»zona»>Осторожно! Если ты нажмете на кнопку, то произойдут изменения с данным контентом.</p>

<buttononclick=»SupperButton()»>Рискни, нажми на меня!</button>

<script>
functionSupperButton() {
document.getElementById(«zona»).innerHTML = «Молодец! Ты прошел испытание на смелость! «;
document.getElementById(«zona»).style.color = ‘red’;

document.getElementById(«zona»).style.fontSize = ’32px’;
}
</script>

</body>
</html>

Если во все вникнуть, вы поймете, что здесь нет ничего сложного. Не забудьте оставить комментарии, если вам было что-то не понятно или поделитесь своим опытом.

Оцените статью
Образовательный портал WELCOME4U.RU
Добавить комментарий

Adblock
detector