HTML, XHTML и CSS на 100%
Шрифт:
Свойство lastModified позволяет узнать дату внесения последних изменений в содержание HTML-документа. В сценарии это реализовано в команде document.lastModified. Строка document. write помещает полученную дату на веб-страницу (рис. 10.19).
Рис. 10.19. Использование свойства lastModified
Во многих рассмотренных ранее примерах сценариев JavaScript вам не раз встречалась строка document. write. Write –
• close – заставляет веб-страницу немедленно обновить свое содержимое после использования метода write. Метод close не имеет параметров и не возвращает значения. Поддерживается Internet Explorer, начиная с версии 4.0.
• getElementsByName({имя_элемента}) – возвращает элемент, специфическое имя которого передано в качестве параметра. Данный метод поддерживается браузером Internet Explorer, начиная с версии 5.0.
• getElementByld ({ID}) – возвращает элемент, имя которого передано в качестве параметра. Имя элемента страницы задается атрибутом ID. Метод getElementById имеет единственный параметр – имя элемента страницы. Поддерживается браузером Internet Explorer, начиная с версии 5.0.
• getElementsByTagName({Имя тега}) – возвращает тег, имя которого передано в качестве параметра. Поддерживается браузером Internet Explorer, начиная с версии 5.0.
• write – записывает текст или HTML-код в текущее место документа.
В браузере Microsoft Internet Explorer версии 5.0 появилась поддержка таких методов объекта Document, как getElementById, getElementsByName и getElementsByTagName. Последний используется в сценариях JavaScript особенно часто. Рассмотрим пример такого сценария (листинг 10.21).
<html>
<head>
<title> Метод getElementsByTagName</title>
<!–Код JavaScript –>
<script language="JavaScript">
function getElements //функция
{
var x=document.getElementsByTagName("input");
alert(x.length);
}
</script>
</head>
<body>
<!–Форма –>
<input name="myInput" type="text" size="30" /><br />
<input name="myInput" type="text" size="30" /><br />
<input name="myInput" type="text" size="30" /><br />
<br />
<input type="button" onclick="getElements" value="Посчитаем элементы input" />
</body>
</html>
Данный сценарий содержит функцию getElements, которая производит подсчет всех элементов типа INPUT на веб-странице, а затем выводит результат в окне Alert (рис. 10.20).
Рис. 10.20. Окно с количеством элементов
Функция срабатывает при нажатии кнопки в форме. Как видите, в этом HTML-документе содержится четыре элемента, обозначенные элементом INPUT: три поля для ввода и кнопка (рис. 10.21).
Рис. 10.21.
Итак, мы рассмотрели один из главных объектов в языке JavaScript – объект Document, представляющий собой веб-страницу, загруженную в окно браузера. Благодаря определенным свойствам и методам через объект Document можно получить доступ к любым другим объектам, расположенным на веб-странице.
Доступ к объектам документа
Сценарии JavaScript очень часто применяются для создания динамических вебстраниц, способных получать и обрабатывать произвольную информацию. Для этого необходимо организовать доступ сценария к определенным элементам веб-страницы.
Доступ к различным объектам HTML-документа в языке JavaScript организован в строгом соответствии с иерархией объектов. Каждый объект иерархической структуры имеет свое имя.
Например, на веб-странице может находиться несколько изображений с именами img1, img2 и img3. Если вы хотите обратиться к первому рисунку, то должны сориентироваться в иерархии объектов и начать с самой ее вершины. Главный объект на веб-странице называется Document. Все изображения на странице представлены как коллекция images. Причем первый рисунок всегда обозначается как images [0], второй как images [1], третий как images [2] и т. д. Иными словами, отсчет объектов в коллекции начинается не с единицы, а с нуля.
Таким образом, вы можете получить доступ к первому изображению img1, записав в сценарии JavaScript document.images[0]. Чтобы получить доступ ко второму изображению img2, запишите в сценарии строку document. images [1]. Соответственно для получения доступа к третьему изображению img3 на веб-странице используйте конструкцию document.images[2].
Примечание
Как видите, номер изображения на веб-странице и номер изображения в коллекции отличаются на единицу.
Тот же принцип действует по отношению к ссылкам и формам. Если вы хотите получить доступ к какому-либо элементу формы, снова необходимо начать с вершины иерархии объектов. Затем прослеживаете путь к объекту и последовательно записываете названия всех объектов, которые минуете.
Например, чтобы узнать, какой текст ввел посетитель вашей веб-страницы в поле формы, необходимо обратиться к значению (value) данного поля. Для этого в сценарии JavaScript можно записать строку name= document. forms [0]. elements [0]. value. Полученная строка заносится в переменную name. И теперь вы можете работать с этой переменной, используя ее в других строках сценария JavaScript.
Однако, если вы создаете сложную веб-страницу, процедура адресации к различным объектам по номеру становится весьма затруднительной. Например, довольно неудобно обращаться к объекту через строку document. forms [4]. elements [15]. Можно запутаться в количестве объектов на странице и неправильно указать номер нужного объекта.
Во избежание подобной проблемы в JavaScript можно не только пользоваться существующими коллекциями объекта Document, но и самим присваивать различным объектам уникальные имена. Например, форме на вашей веб-странице можно присвоить имя myform с помощью оператора name: <form name="myform">. Эта запись означает, что первая форма, соответствующая объекту forms[0], получает уникальное имя myform.