Информатика и выч. техника \ Информатика

JAVAScript как универсальное средство создания интерактивных Web-страниц, страница 10

Пример. Затемнение фона документа при прохождении указателя мыши над гиперссылкой.

<html>

<body>

<p>

Получить более подробную информацию можно на

<a href = "http://www.primpogoda.ru"

onmouseover = "document.bgColor = 'dddddd'"

onmouseout  = "document.bgColor = 'ffffff'">

Web – сайте www.primpogoda.ru </a>

</body>

</html>

3.5.1. Семействa элементов

Доступ к различным элементам осуществляется через свойства all, anchors, forms, images, styleSheets. Число элементов в семействе возвращается свойством length.

Конкретный элемент семейства возвращается методом item, либо указанием в качестве параметра семейства ссылки на него. Ссылку на элемент семейства можно производить либо по его номеру, либо по значению атрибутов id и name, либо непосредственно по имени. Например, если в документе у тега с номером 4 установлено значение атрибута id равным show, то приведенные ниже четыре способа указывают на один и тот же элемент.

document.all(4);

document.all("head");

document.all.Item ("head");

document.all.head;

Следующее свойство возвращает значение атрибута id этого элемента:

document.all.item(4).id

Различие между атрибутами id и name заключается в том, что каждый элемент в документе имеет униальное значение атрибута id, в то время как несколько элементов в документе могут иметь одно и то же значение атрибута name. Кроме того, у каждого элемента имеется атрибут id, но существуют такие элементы, у которых нет атрибута name.

Элементы семейства обладают свойством tagName, возвращающим имя его тега. Например, следующий код позволяет определить число используемых тегов в документе и вывести их имена.

<html>

<script>

function taglist(){

alert("Количество тегов: " +document.all.length);

for (var i = 0; i<document.all.length; i++)

alert (document. all(i). tagName);

}

</script>

<body>

<p onclick = "taglist()">

Щелкните здесь, чтобы получить список тегов </p>

</body>

</html>

Кроме перечисленных семейств, существует еще одно важное семейство tags, представляющее собой все элементы с данным тегом. Например, следующий код проверяет, имеются ли в документе рисунки. Если их нет, то об этом выводится сообщение.

if(document.all.tags("IMG").length = = 0)

alert("Нет изображений!");

3.5.2. Внедрение сценария в тело документа

Метод write() объекта document позволяет внедрить результат работы кода JavaScript непосредственно в документ. В приведенном ниже коде первая и последняя строка создаются средствами HTML, а средняя строка – кодом JavaScript.

<html>

<body>

<h2 style = "color: red"> Это HTML – документ.</h2>

<script>

document.write ("<h3 style = 'color: navy'> Это Java-скрипт</h3>");

</script>

<h2 style = "color: green"> Это снова HTML – документ </ h2>

</body>

</html>

3.5.3. Работа с cookies

Javascript позволяет сохранять небольшой объем информации в специальном файле на компьютере клиента. Данная информация называется cookies. Доступ к cookies осуществляется через свойство cookie объекта document.  Например, строка

document.cookie="name=value; expires=date";

записывает cookie с именем name, значением value, окончанием хранения date   (в формате GMTString).

Следующий код подсчитывает статистику посещения страницы с данного компьютера.

<html>

<script>

function f(){

var a = new Array();

var b = new Array();

var d = new Date();

d.setTime(d.getTime() + 10000000);

var exp = d.toGMTString();

if(document.cookie){

var c = document.cookie;

a = c.split(";");

b = a[0].split("=");

b[1]++;

document.cookie="visits="+b[1]+"; expires="+exp;

}

else{

document.cookie="visits=1; expires="+exp;

}

alert(document.cookie);

}

</script>

<body onload="f()">

</body>

</html>

Скачать файл