Вход в систему

Что такое OpenID?

Введение в JavaScript для Мага [Стефан Кох] (fb2) читать постранично, страница - 3

- Введение в JavaScript для Мага 573 Кб, 73с. скачать: (fb2) - (исправленную)  читать: (полностью) - (постранично) - Стефан Кох

 [Настройки текста]  [Cбросить фильтры]

его кода была повторена три раза. Разве это эффективно? Нет, мы можем решить ту же задачу еще лучше. Как насчет такого скрипта для решения той же самой задачи?:


<html>

<script language="JavaScript">

<!- hide

function myFunction() {

document.write("Добро пожаловать на мою страницу!<br>");

document.write("Это JavaScript!<br>");

}

myFunction();

myFunction();

myFunction();

// — >

</script>

</html>

В этом скрипте мы определили некую функцию, состоящую из следующих строк:

function myFunction() {

document.write("Добро пожаловать на мою страницу!<br>");

document.write("Это JavaScript!<br>");

}


Все команды скрипта, что находятся внутри фигурных скобок — {} — принадлежат функции myFunction(). Это означает, что обе команды document.write() теперь связаны воедино и могут быть выполнены при вызове указанной функции. И действительно, нашем примере есть три вызова этой функции — Можно увидеть, что мы написали строку myFunction() три раза сразу после того, как дали определение самой функции. То естькак раз и сделали три вызова. В свою очередь, это означает, что содержимое этой функции (команды, указанные в фигурных скобках) было выполнено трижды.

Поскольку это довольно простой пример использования функции, то у Вас мог возникнуть вопрос, а почему собственно эти функции столь важны в JavaScript. По прочтении данного описания Вы конечно же поймете их пользу. Именно возможность передачи переменных при вызове функции придает нашим скриптам подлинную гибкость — что это такое, мы увидим позже.

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


<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>

</html>


А вот как выглядит эта страница на экране (я добавил к ней еще красным цветом комментарии):



Итак, мы имеем два рисунка, одну ссылку и некую форму с двумя полями для ввода текста и одной кнопкой. С точки зрения языка JavaScript окно браузера — это некий объект window. Этот объект также содержит в свою очередь некоторые элементы оформления, такие как строка состоятия. Внутри окна мы можем разместить документ HTML (или файл какого-либо другого типа — однако пока мы все же ограничимся файлами HTML). Такая страница является ни чем иным, как объектом document. Это означает, что объект document представляет в языке JavaScript загруженный на настоящий момент документ HTML. Объект document является очень важным объектом в языке JavaScript и Вы будете пользоваться им многократно. К свойствам объекта document относятся, например, цвет фона для web-страницы. Однако для нас гораздо важнее то, что все без исключения объекты HTML являются свойствами объекта document. Примерами объекта HTML являются, к примеру, ссылка или заполняемая форма.

На следующем рисунке иллюстрируется иерархия объектов, создаемая HTML-страницей из нашего примера: