Читать «HTML5. Недостающее руководство» онлайн - страница 308

Мэтью Мак-Дональд

<head>

<meta charset="utf-8">

<title>A Simple JavaScript Example</title> <script src="MessageScripts.js"></script> </head>

<body>

<p>At some point in the processing of this page, a script block will run and show a message box.</p>

<script>

showMessage()

</script>

<p>If you get here, you've already seen it.</p> </body> </html> Когда браузер обнаружит этот блок сценариев, он запросит файл MessageScripts.js и будет рассматривать содержащийся в нем код, как будто бы тот находится в веб -странице. Это означает, что функцию showMessage() можно вызывать точно таким же образом, как мы это делали ранее.

Хотя при использовании отдельных файлов сценариев блок <script> в действитель-ности не содержит никакого кода, его все равно нужно закрывать тегом </script> . В противном случае браузер будет полагать, что все, что следует за открывающим те-гом <script> , т. е. остальная часть страницы, является частью JavaScript - кода.

Страницу можно связать с файлом сценариев на другом веб - сайте. Для этого вме-сто простого имени файла атрибуту src нужно присвоить полный URL файла (на-пример, http://SuperScriptSite.com/MessageScript.js ). Эта технология позволяет подключать услуги других веб - компаний, например Google Maps (см. разд. "Ото -бражение карты" главы 12) .

Реагирование на события

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

Для этого нужно использовать события (events) JavaScript, которые представляют извещения, отправляемые элементом HTML в ответ на определенные развития. Так, каждый элемент HTML имеет JavaScript - событие onMouseOver , которое сраба-тывает при наведении указателя мыши на элемент, например блок текста, ссылку, изображение, ячейку таблицы, текстовое поле и т. п. В результате срабатывания события исполняется связанный с ним код.

Здесь возникает естественный вопрос: а каким образом код связывается с событием элемента? Для этого необходимое событие нужно добавить в элемент в качестве атрибута, а в качестве значения этого атрибута указать требуемую функцию. Таким образом, если мы хотим связать определенный код с событием onMouseOut элемента <img> , то можем это сделать так:

<img src="sunny.jpg" alt="A sunny day" onmouseover="showMessage()" > В JavaScript имена функций, переменных и объектов являются чувствительными к ре-гистру, что означает, что showMESSAGE — не одно и то же, что showMessage . Но имена атрибутов событий не чувствительны к регистру, т. к. они технически являются частью разметки HTML, который относится терпимо к любой комбинации букв верхнего и ни ж-него регистра. Тем не менее, распространенной практикой является написание атри-бутов событий без прописных букв (как показано в примере ранее), т. к. это соответст-вует старым правилам XHTML; в любом случае, большинство программистов слишком ленивые, чтобы постоянно тянуться к клавише <Shift>.