logo search
[ПСП] / lab22

Пример клиентского скрипта

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

Предположим, что мы работаем с очень простой web-страницей, представлен­ной на рис. 14.17. Единственная кнопка на этой странице будет называться testBtn (проще всего присвоить это имя из свойств кнопки). Чтобы настроить перехват события, возникающего при нажатии этой кнопки, перейдем в режим просмотра HTML и выберем нашу кнопку в левом ниспадающем списке. Затем в правом спис­ке выберем для этой кнопки событие onclick (рис. 14.18)

Рис. 14.17. Новая страница HTML

Рис. 14.18. Перехват событий элементов управления HTML

Выполнив эти действия, мы сможем обнаружить в коде HTML следующие из­менения:

<HTML>

<HEAD>

<TITLE></TITLE>

<МЕТА NAME="GENERATOR" Content="Microsoft Visual Studio">

<META HTTP-EQUIV="Content-Type" content="text/html">

<Script ID=clientEventHancnerJS language=javascript>

<!-

function testBtn_onclick { }

//->

</script>

</HEAD>

<BODY>

<p align = center>

<font size = 5>Here is a single button which responds to clicks...</font></p> <p align = center>

<input id=testBtn type=button value=Button name=testBtn language=javascript onclick="return testBtn_onclick()"/>

/BODY> /HTML>

Как мы видим, на нашей странице в разделе <head></head> появился блок <script>, для которого в качестве используемого языка указан JavaScript. Обратите внима­ние, что сам код скрипта помещен в блок комментария HTML. Причина понят­на — если страница будет открыта в браузере, который не поддерживает JavaScript, то этот код будет воспринят как комментарий и проигнорирован.

Обратите также внимание, что в теге для нашей кнопки появился новый атри­бут onclick, который ссылается на метод JavaScript. В результате при нажатии на эту кнопку будет вызван этот метод. Сильно усложнять содержание метода мы не будем, и для наших целей его код будет таким:

<script id = clientEventHandlersJS language = javascript>

<!-

function testBtn_onclick()

{

// Аналог MessageBox в JavaScript

Alert(“Hey, stop clicking me...")

}

//->

</script>

При нажатии на кнопку мы получим окно сообщения, представленное на рис. 14.19.

Рис. 14.19. Окно оповещения (alert) Internet Exlorer