Читать «Введение в 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>