Это простая техника добавления JavaScript-кода в документ, основанная на преимуществах атрибутов элементов HTML. Речь идет об атрибутах, являющихся обработчиками событий, которые исполняют код в зависимости от действий пользователя.
Чаще всего используются обработчики событий, относящиеся к движениям мыши, такие как onclick, onMouseOver и onMouseOut. Однако на некоторых сайтах применяются ключевые слова и события окна (например, onload и onfocus), то есть действия выполняются после нажатия клавиши или изменения состояния окна.
Листинг 4.1. Строчный сценарий JavaScript
<!DOCTYPE html>
<html lang="ru">
<head>
<title^TOT текст — заголовок документа</title>
</head>
<body>
<div id="main">
<p on^^k^’alertC^i на мне щелкнул!’)">Щелкни на MHe</p>
<p>Ha мне нельзя щeлкать</p>
</div>
</body>
</html>
Код в листинге 4.1, использующий обработчик события onclick, исполняется каждый раз, когда пользователь щелкает на тексте «Щелкни на мне». Обработчик события onclick говорит браузеру примерно следующее: «Когда пользователь щелкнет на этом элементе, выполни этот код», — а кодом является стандартная функция JavaScript, отображающая небольшое окно с сообщением «Ты на мне щелкнул!».
Попробуйте заменить обработчик события onclick, например, обработчиком события onMouseOver, и код будет запускаться простым подведением указателя мыши к элементу.
В HTML5 допускается использование JavaScript внутри элементов HTML, однако по тем же причинам, которые были перечислены при обсуждении CSS, прибегать к подобному методу не рекомендуется. Код HTML из-за этого сильно раздувается, его становится сложно поддерживать и обновлять. Кроме того, разбрасывание фрагментов кода по всему документу сильно затрудняет построение эффективных приложений.
Были разработаны новые методы и техники определения ссылок на элементы HTML и регистрации обработчиков событий, не требующие вставки строчных сценариев. Мы вернемся к этому вопросу и подробнее поговорим о событиях и обработчиках событий позже в этой главе.
Скопируйте код из листинга 4.1 и продолжайте копировать последующие примеры кода из этой главы в пустой HTML-файл. Открывайте этот файл в своем браузере для проверки результата.
Добавить комментарий