Для того чтобы работать с объемным кодом и писать собственные функции, необходимо группировать сценарии между тегами <script>. Элемент <script> играет ту же роль, что и элемент <style> в CSS, то есть позволяет собрать код в одном месте и обращаться к остальным элементам в документе посредством ссылок.
Так же, как и в случае с элементом <style>, в HTML5 не требуется использовать атрибут type для указания языка в теге <script>. В HTML5 по умолчанию считается, что код будет написан на языке JavaScript.
Листинг 4.2. Встроенный сценарий JavaScript
<! DOCTYPE html>
<html lang="ru">
<head>
<script>
Function showalert (){
Alert (‘Tbi на мне щелкнул!’);
} function clickme (){document. getElementsByTagName (‘p’)[0]. onclick=showalert;
} window. onload=clickme;
</script>
</head>
<body>
<div id="main">
<p>Ha мне нельзя щелкать</p>
</div>
</body>
</html>
Элемент <script> и его содержимое могут находиться в любом месте документа, внутри других элементов или между ними. В целях унификации рекомендуем всегда помещать сценарии в голову документа (как в примере в листинге 4.2) и ссылаться на элементы с помощью корректных методов JavaScript, предусмотренных именно для этой цели.
Сейчас в JavaScript существует три метода определения ссылок на элементы HTML:
— getElementsByTagName (используется в листинге 4.2) ссылается на элемент по его ключевому слову;
— getElementByld ссылается на элемент по значению его атрибута id;
— getElementsByClassName — это новый метод, который позволяет сослаться на элемент по значению его атрибута class.
Даже если вы следуете рекомендациям (и помещаете сценарии в голову документа), необходимо учитывать следующее: браузер считывает код последовательно, поэтому невозможно сослаться на элемент, который еще не был создан.
В листинге 4.2 сценарий находится в голове документа и считывается до того, как создаются элементы <p>. Если бы мы попытались в этом коде сделать что-либо с элементами <p>, то получили бы сообщение об ошибке, объясняющее, что такого элемента не существует. Во избежание данной проблемы мы превратили код в функцию под названием showalert (), а ссылку на элемент <p> и обработчик событий поместили во вторую функцию, носящую название clickme ().
Функции вызываются из последней строки сценария с помощью еще одного обработчика событий (в данном случае связанного с окном), который называется onload. Этот обработчик выполняет указанную функцию, когда окно полностью загружается и все элементы полностью создаются.
Давайте рассмотрим процесс выполнения всего документа из листинга 4.2. Сначала функции загружаются, но еще не исполняются. Затем создаются элементы HTML, включая элементы <p>. И наконец, когда документ загружен целиком, срабатывает событие load и вызывается функция clickme ().
В этой функции метод getElementsByTagName ссылается на элементы <p>. Он возвращает массив, содержащий список элементов, найденных в документе. Однако, добавив в конце метода индекс [0], мы указали, что выбрать нужно только первый элемент. После того как элемент идентифицирован, код регистрирует для него обработчик события onclick. Когда соответствующее событие срабатывает, выполняется функция showalert (). При этом она открывает на экране небольшое окошко с сообщением «Ты на мне щелкнул!».
Может показаться, что мы использовали слишком много кода, чтобы воспроизвести эффект, который в примере из листинга 4.1 создали всего одной строкой. Однако с учетом потенциала HTML5 и того, какие изощренные решения можно создавать на JavaScript, подобный подход — с кодом, сосредоточенным в одном месте, и тщательно продуманной организацией документов — дает большое преимущество для будущих реализаций и значительно упрощает поддержку и обслуживание веб-сайтов и приложений.
Функция — это фрагмент кода, который выполняется только после вызова (активизации) данной функции по имени.
Обычно для вызова функции указывают ее имя и передают какие-то значения, заключенные в круглые скобки, например, clickme (1,2). Исключение из этого синтаксиса можно наблюдать в листинге 4.2. Здесь мы не используем скобки, так как передаем обработчику событий ссылку на функцию, а не результат ее выполнения. Для того чтобы больше узнать о функциях JavaScript, зайдите на наш веб-сайт и изучите ссылки для этой главы.
Добавить комментарий