Урок 11. Понятие сценария

Сценарий на языке JavaScript - это программа, работающая с объектами HTML-документа.

Обработка событий

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

Значением таких атрибутов-событий в тегах HTML является строка, содержащая сценарий, выполняющий роль обработчика события.

Вопросы

  1. Что такое сценарий?
  2. Какие события вы знаете?
  3. Каково главное назначение сценариев?
  4. Где располагается обработчик события?

В качестве примера рассмотрим варианты оформления обработчика щелчка на изображении или кнопке.
Изображение в HTML-документе определяется, как известно, тегом IMG. Файл с изображением задается атрибутом SRC. Обработчик события onclick задается в примере как функция clickimage().

<html>
<head><title>Page with image</title>
<script>
	function clickimage() {
		alert("Hello")
	}
</script>
</head>
<body>
	<p>Вариант 1
	<img src="cat0.jpg" onclick="clickimage()"></p>
	<p>Вариант 2
	<img src="cat1.jpg" onclick='alert("olleH")'></p>
</body>
</html>

Объекты, управляемые сценариями

Приведенный ниже HTML-код формирует простую веб-страницу, содержащую заголовок первого уровня, изображение, ссылку и форму с двумя элементами - полем ввода и кнопкой.

Какие именно теги этого документа соответствуют элементам коллекции all объекта document? Чтобы ответить на этот вопрос разместим простой сценарий тестируемого HTML-документа. Этот сценарий основан на использовании свойства tagName, которое возвращает название тега, с помощью которого был создан соответствующий объект.

<html>
<head>
<script>
	function analysis() {
		msg = ""
		for (i=0; i<document.all.length; i++)
			msg += i + " " + document.all[i].tagName + " name = " 
			+ document.all[i].name + "\n"
		return msg
	}
</script>
</head>
<body>
	<h1>The page</h1>
	<img src="cat0.jpg">
	<p><a href="http://younglinux.info"> Уроки по GNU/Linux</a></p>
	<textarea name="field" rows="10" cols="30"></textarea>
	<br>
	<button onclick="document.all.field.value=analysis()">Press here</button>
</body>
</html>

Итак, универсальный способ обращения к объекту документа базируется на использовании коллекции all.