Иерархия JavaScript
JavaScript организовывает все элементы web-страницы в соответствии с иерархией. Каждый элемент рассматривается как объект. Каждому объект присущи некоторые свойства и методы. С помощью JavaScript вы можете легко управлять объектами. Для этого очень важно понять иерархию HTML-объектов. Вы быстро поймете, как это работает с помощью примера. Следующий код — простая HTML-страница.
<html> <head> <title>My homepage</title> </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.
Сначала взгляните на пример:
<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>