Непрофессиональное введение в Javascript

         

Иерархия JavaScript



Иерархия JavaScript

JavaScript организовывает все элементы web-страницы в соответствии с иерархией. Каждый элемент рассматривается как объект. Каждому объект присущи некоторые свойства и методы. С помощью JavaScript Вы можете легко управлять объектами. Для этого очень важно понять иерархию 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-объект представляет HTML-документ, который загружен в настоящее время. document-объект - очень важен в JavaScript - Вы будете часто пользоватся им. К примеру свойством этого объекта является цвет фона страницы. Но что более важно - все HTML-объекты являются свойствами document-объект. Пример HTML-объекта - ссылка или форма.
Следующее изображение иллюстрирует иерархию, нашей HTML-страницы:

Для того, чтобы получать информацию относительно различных объектов и управлять ими мы должны знать, как обратиться к этим объектам. Вы можете видеть имя объектов в иерархии. Если Вы теперь хотите знать, как адресовать первое изображение на HTML-странице, Вы должны рассмотреть иерархию. Начинать надо сверху. Первый объект назван document. Первое изображение страницы представляется через images[0]. Это означает, что мы можем обращаться к этому объекту через JavaScript соответствующим образом: document.images[0].
Если Вы например хотите знать то, что пользователь ввел в первый элемент формы, Вы должны сначала подумать относительно того, как обратиться к этому объекту. Снова мы начинаем с верхней части нашей иерархии. Проследите путь к объекту названному elements[0] - помещает все имена объектов, к которым Вы обращаетесь, вместе. Это означает, что Вы можете обращаться к первому текстовому элементу через: document.forms[0].elements[0]


Но как мы теперь можем узнать введенный текст? Чтобы выяснять, какие свойства и методы доступны этому объекту, Вы должны обратиться к справочнику JavaScript (например документация Netscape или моя книга). Оттуда вы узнаете, что текстовое поле имеет свойство value. Это - текст, введенный в текстовое поле. Теперь мы можем считать значение с помощью следующего кода:

name= document.forms[0].elements[0].value;

Строка сохранена в переменной name. Теперь мы можем работать с этой переменной. Например мы можем создавать всплывающее окно, с помощью alert("Hi " + name). Если ввести 'Stefan', то команда alert("Hi " + name) откроет всплывающее окно с текстом 'Hi Stefan'
Большие размеры страницы могут привести к путанице при адресации объектов с числами - например document.forms[3].elements[17] или это document.forms[2].elements[18]? Чтобы избежать этой проблемы, Вы можете давать уникальные имена различным объектам. Пример Вы можете видеть в HTML-коде, который мы записали :

<form name="myForm"> Name: <input type="text" name="name" value=""><br> ...

Это означает, что forms[0] с таким же успехом может быть названа myForm. Вместоelements[0] Вы можете использовать name (как определено свойством name в теге<input>). Так вместо записи

name= document.forms[0].elements[0].value;

мы можем написать следующее

name= document.myForm.name.value;

Что делает этот процесс намного проще, особенно с большими страницами, содержащими большое количество объектов. (Пожалуйста обратите внимание, что Вы должны сохранять регистр при написании - это означает, что Вы не можете писать myform вместо myForm)
Многие из свойств объектов JavaScript не ограничены операциями чтения. Вы можете назначать новые значения к этим свойствам. Например Вы можете написать новую строку в текстовое поле. Взгляните на этот пример:

Ниже приведен код для этого примера. Обратите особое внимание на то, что внутри onClick- свойство второго тега <input>:

<form name="myForm"> <input type="text" name="input" value="bla bla bla"> <input type="button" value="Write" onClick="document.myForm.input.value= 'Yo!'; ">

Я не могу здесь описывать все детали. Вам будет намного проще, если Вы попробуете понять иерархию объектов с помощью справочной системы JavaScript. Я написал маленький пример, где Вы увидите использование различных объектов. Попытайтесь понять сценарий с помощью документации Netscape или лучше: с моей JS-книгой ...: -)
Сначала взгляните на пример, чтобы увидеть, как это работает:

Вот исходный код:

<html> <head> <title>Objects</title> <script language="JavaScript"> <!-- hide function first() { // creates a popup window with the // text which was entered into the text element alert("The value of the textelement is: " + document.myForm.myText.value); } function second() { // this function checks the state of the checkbox var myString= "The checkbox is "; // is checkbox checked or not? if (document.myForm.myCheckbox.checked) myString+= "checked" else myString+= "not checked"; // output string alert(myString); } // --> </script> </head> <body bgcolor=lightblue> <form name="myForm"> <input type="text" name="myText" value="bla bla bla"> <input type="button" name="button1" value="Button 1" onClick="first()"> <br> <input type="checkbox" name="myCheckbox" CHECKED> <input type="button" name="button2" value="Button 2" onClick="second()"> </form> <p><br><br> <script language="JavaScript"> <!-- hide document.write("The background color is: "); document.write(document.bgColor + "<br>"); document.write("The text on the second button is: "); document.write(document.myForm.button2.value); // --> </script> </body> </html>



Содержание раздела