Читать «Введение в JavaScript для Мага» онлайн - страница 5

Стефан Кох

Функции могут также использоваться в совместно с процедурами обработки событий. Рассмотрим следующий пример:

<html>

<head>

<script language="JavaScript">

<!- hide

function calculation() {

var x= 12;

var y= 5;

var result= x + y;

alert(result);

}

// — >

</script>

</head>

<body>

<form>

<input type="button" value="Calculate" onClick="calculation()">

</form>

</body>

</html>

Here you can test this example:

Здесь при нажатии на кнопку осуществляется вызов функции calculation(). Как можно заметить, эта функция выполняет некие вычисления, пользуясь переменными x, y и result. Переменную мы можем определить с помощью ключевого слова var. Переменные могут использоваться для хранения различных величин — чисел, строк текста и т. д. Так строка скрипта var result= x + y; сообщает браузеру о том, что необходимо создать переменную result и поместить туда результат выполнения арифметической операции x + y (т. е. 5 + 12). После этого в переменный result будет размещено число 17. В данном случае команда alert(result) выполняет то же самое, что и alert(17). Иными словами, мы получаем выпадающее окно, в котором написано число 17.

Часть 2: Документ HTML

Иерархия объектов в JavaScript

В языке JavaScript все элементы на web-странице выстраиваются в иерархическую структуру. Каждый элемент предстает в виде объекта. И каждый такой объект может иметь определенные свойства и методы. В свою очередь, язык JavaScript позволит Вам легко управлять объектами web-страницы, хотя для этого очень важно понимать иерархию объектов, на которые опирается разметка HTML. Как это все действует, Вы сможете быстро понять на следующем примере. Рассмотрим простую HTML-страницу:

<html>

<head>

<title>My homepage

</head>

<body bgcolor=#ffffff>

<center>

<img src="home.gif" name="pic1" width=200 height=100>

</center>

<p>

<form name="myForm">

Name:

<input type="text" name="name" value=""><br>

e-Mail:

<input type="text" name="email" value=""><br><br>

<input type="button" value="Push me" name="myButton" onClick="alert('Yo')">

</form>

<p>

<center>

<img src="ruler.gif" name="pic4" width=300 height=15>

<p>

<a href="http://rummelplatz.uni-mannheim.de/~skoch/">My homepage</a>

</center>

</body>