|
|
Иерархия объектов в JavaScript
В языке JavaScript все элементы на web-странице выстраиваются в иерархическую структуру . При этом каждый элемент - это объект , который может иметь определенные свойства и методы. Язык JavaScript позволяет управлять объектами web-страницы.
С точки зрения языка JavaScript , окно браузера - это некий объект window , который содержит некоторые элементы оформления, такие как строка состояния. Внутри окна мы можем разместить документ HTML . Такая страница является объектом document . К свойствам объекта document относятся, например, цвет фона для web -страницы, как, впрочем, и все остальные свойства.
Кроме объектов window и document в JavaScript имеется еще один важный объект - location . В этом объекте представлен адрес загруженного HTML -документа. Например, если Вы загрузили страницу http :// www . torgpred . com / index . php , то значение location . href как раз и будет соответствовать этому адресу. Вы имеете возможность записывать в location . href свои новые значения. Например, в данной ниже форме кнопка загружает в текущее окно новую страницу:
<form>
<input type=button value=" Гипермаркет "
onClick="location.href='http://www.torgpred.com'; ">
</form>
В JavaScript Вам разрешено пользоваться некоторыми заранее заданными объектами. Примером таких объектов может служить Date.
Date - позволяет Вам работать как со временем, так и с датой. Например, Вы можете определить, сколько дней еще остается до следующего Рождества. Или можете внести в Ваш HTML-документ запись текущего времени. Напишем скрипт, печатающий текущие дату и время:
<script language="JavaScript">
<!-- hide
now= new Date();
document.write("Time: " + now.getHours() + ":" + now.getMinutes() + "<br>");
document.write("Date: " + (now.getMonth() + 1) + "/" + now.getDate() + "/" +
(1900 + now.getYear()));
// -->
</script>
Здесь мы пользуемся такими методами, как getHours () , чтобы вывести на экран время и дату, указанные в объекте Date с именем now . Можно видеть, что мы добавляем к записи года еще число 1900.
А теперь скрипт, создающий на экране изображение работающих часов:
<html>
<head>
<script Language="JavaScript">
<!-- hide
var timeStr, dateStr;
function clock() {
now= new Date();
// врем я
hours= now.getHours();
minutes= now.getMinutes();
seconds= now.getSeconds();
timeStr= "" + hours;
timeStr+= ((minutes < 10) ? ":0" : ":") + minutes;
timeStr+= ((seconds < 10) ? ":0" : ":") + seconds;
document.clock.time.value = timeStr;
// дата
date= now.getDate();
month= now.getMonth()+1;
year= now.getYear();
dateStr= "" + month;
dateStr+= ((date < 10) ? "/0" : "/") + date;
dateStr+= "/" + year;
document.clock.date.value = dateStr;
Timer= setTimeout("clock()",1000);
}
// -->
</script>
</head>
<body onLoad="clock()">
<form name="clock">
Время :
<input type="text" name="time" size="8" value=""><br>
Дата :
<input type="text" name="date" size="8" value="">
</form>
</body>
</html>
Немного о графике
Каждое изображение в HTML -документе рассматривается в качестве объекта Image. Объект Image имеет определенные свойства, к которым и можно обращаться из языка JavaScript . Например, Вы можете определить, какой размер имеет изображение, обратившись к его свойствам width и height. То есть по записи document.images[0].width Вы можете определить ширину первого изображения на web- странице (в пикселах). К сожалению, отслеживать большое количество изображений затруднительно. Но Вы можете назначить изображениям свои собственные имена. Так, если Вы заводите изображение с помощью тэга:
<img src="img.gif" name="myImage" width=100 height=100>
то Вы сможете обращаться к нему, написав document.myImage или document.images["myImage"] . Но самое интересное, на мой взгляд, в том, что Вы можете создать красивые эффекты, используя смену изображений в качестве реакции на определенные события. Например, Вы можете изменять изображения в тот момент, когда курсор мыши попадает на определенную часть страницы.
<html>
<head>
<script language="JavaScript">
<!-- hide
// ******************************************************
// Script from Stefan Koch - Voodoo's Intro to JavaScript
// http://rummelplatz.uni-mannheim.de/~skoch/js/
// JS-book: http://www.dpunkt.de/javascript
// You can use this code if you leave this message
// ******************************************************
// ok, у нас браузер с поддержкой JavaScript
var browserOK = false;
var pics;
// -->
</script>
<script language="JavaScript1.1">
<!-- hide
// браузер с поддержкой JavaScript 1.1!
browserOK = true;
pics = new Array();
// -->
</script>
<script language="JavaScript">
<!-- hide
var objCount = 0; // количество изображений на web- странице
function preload(name, first, second) {
// предварительная загрузка изображений и размещение их в массиве
if (browserOK) {
pics[objCount] = new Array(3);
pics[objCount][0] = new Image();
pics[objCount][0].src = first;
pics[objCount][1] = new Image();
pics[objCount][1].src = second;
pics[objCount][2] = name;
objCount++;
}
}
function on(name){
if (browserOK) {
for (i = 0; i < objCount; i++) {
if (document.images[pics[2]] != null)
if (name != pics[2]) {
// вернуть в исходное систояние все другие изображения
document.images[pics[2]].src = pics[0].src;
} else {
/ / показывать вторую картинку, поскольку курсор пересекает данное изображение
document.images[pics[2]].src = pics[1].src;
}
}
}
}
function off(){
if (browserOK) {
for (i = 0; i < objCount; i++) {
// вернуть в исходное систояние все изображения
if (document.images[pics[2]] != null)
document.images[pics[2]].src = pics[0].src;
}
}
}
// заранее загружаемые изображения - Вы должны здесь указать
// изображения, которые нужно загрузить заранее, а также объект Image ,
// к которому они относятся (первый аргумент). Именно эту часть
// нужно корректировать, если Вы хотите использовать скрипт
// применительно к другим изображениям (конечно, это не освобождает
// Вас от обязанности подредактировать в документе также и раздел body )
preload("link1", "img1f.gif", "img1t.gif");
preload("link2", "img2f.gif", "img2t.gif");
preload("link3", "img3f.gif", "img3t.gif");
// -->
</script>
< / head>
<body>
<a href="link1.htm" onMouseOver="on('link1')"
onMouseOut="off()">
<img name="link1" src="img1f.gif"
width="140" height="50" border="0"></a>
<a href="link2.htm" onMouseOver="on('link2')"
onMouseOut="off()">
<img name="link2" src="img2f.gif"
width="140" height="50" border="0"></a>
<a href="link3.htm" onMouseOver="on('link3')"
onMouseOut="off()">
<img name="link3" src="img3f.gif"
width="140" height="50" border="0"></a>
</body>
</html>
Данный скрипт помещает все изображения в массив pics.
Комментариев: нету
