Главная

Новости

Статьи и обзоры
  Горожанин
  Обнинск в Internet
  Web Design
  Hardware
  Software
  Безопасность
  Серфинг
  Игродром
  Relax
  Технологии
  Web-обзор
  Интернет-ликбез
  Опросник
  УП-Технологии
  ART.net

Ссылки

Архив

О нас

Контакты

Форумы

POPULAR.RU

la_serg

JavaScript: Объекты

Как Вы уже знаете, JavaScript - объектно-ориентированный язык. В JavaScript существует иерархия объектов для представления (и соответственно управления) элементов странички и окна браузера.

Допустим, у нас есть страничка с картинкой (<img src="mypic.jpg" width="300" height="100" name="kartinka">). Пусть еще будет форма (<form name="forma" onsubmit="alert(forma.txt); ">...</form>) с текстовым полем (<input type="text" name="txt">) и кнопкой (<input type="submit" name="knopka" value="Click Here!">). Теперь посмотрим на эту страничку с точки зрения браузера. В языке JavaScript все элементы на web-странице выстраиваются в иерархическую структуру. Каждый элемент предстает в виде объекта. И каждый такой объект может иметь определенные свойства и методы. В свою очередь, язык JavaScript позволит Вам легко управлять объектами web-страницы, хотя для этого очень важно понимать иерархию объектов, на которые опирается разметка HTML.

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

Внимательный читатель заметил наличие параметра name="". Этот параметр употребляется, чтобы улучшить читабельность кода. Например, чтобы обратиться к нашей картинке нам достаточно написать document.kartinka вместо document.images[0]. Что удобней - выбирайте сами.

Кроме массива images есть еще массивы forms и links. Массив links представляет собой список использованных на страничке ссылок (тег <a>), ссылки, как и любой другой элемент, могут быть представлены с помощью уникального имени (параметр name=""). Массив forms - множество форм, использованных на Вашей страничке. Помимо прочих свойств, объект типа форма имеет массив элементов elements. Обращение к ним происходит следующим образом document.forms[n].elements[m] - мы обращаемся к m-тому элементу n-той формы, согласитесь не очень удобно.

Давайте подробно разберем пример, который был в начале статьи. Все элементы имеют свои уникальные имена. Например, для того чтобы обратиться к картинке, достаточно написать document.kartinka вместо document.images[0] и, соответственно, для того чтобы обратиться к текстовому полю формы, следует написать document.forma.txt вместо document.forms[0].elements[0].

У Вас наверняка возник вопрос - а зачем нам обращаться к этим объектам вообще? Ответ: для того, чтобы менять их свойства. Например, у объекта типа картинка есть свойства: ширина, высота, источник и т.д. Мы можем менять размеры картинки внутри скрипта, изменение ширины можно вставить внутрь цикла - картинка будет появляться (или исчезать) из точки. Изменение габаритов производится следующим образом: document.kartinka.width=значение, document.kartinka.height=значение (здесь значение - это целочисленная константа или переменная). Внутри скрипта можно изменить источник картинки. Допустим, у нас на странице есть объект типа картинка, и в нем изображается файл 1.gif. Здесь 1.gif - источник изображения. Заменив параметр src, мы сменим картинку и получим желанную интерактивность. Смена графического файла: document.kartinka.src="url"; (Здесь url путь к файлу).

Вернемся к нашему примеру. Итак, что же он делает? На страничке мы увидим картинку и форму с двумя объектами. Текстовое поле называется txt и кнопка называется knopka. Кнопка имеет тип submit, т.е. подтверждение формы. Обычно при подтверждении форма пересылается серверу по адресу, указанному в параметре action тега form. Кто-то из читателей уже заметил параметр onsubmit в теге form. Этот параметр называется "событие", он является частью языка JavaScript. Его наличие означает, что при подтверждении формы (клик на кнопку) вместо стандартных действий (отправка серверу) вызовется частная функция. В нашем случае, при нажатии на кнопку, вылетает окно с сообщением - текст сообщения берется из текстового поля (короче окно с тем, что ввел пользователь).

И вкуснота на прощание. Существует объект location - это адресная строка, у него есть параметр href. Вы можете пересылать пользователя на свой url, записывая его в этот параметр (location.href="http://vt3.al.ru";). Так же Вы можете проверить, открывается ли Ваша страница во фрейме.

В данной статье я затронул очень важную часть JavaScript - события. В следующей статье мы подробно рассмотрим аппарат событий в JavaScript. До скорых встреч.

#5(46)/06.03.2001