JavaScript Доступ к объектам и сценариям

Цель работы - научиться использовать различные способы доступа к свойствам и методам объектов для внесения изменений в HTML-документ.

Все изменения в HTML-документе производятся через свойства, методы и события объектов, входящих в состав объектной модели документа. Рассмотрим сценарий (пример 1.1), в котором используются типичные способы доступа к свойствам и методам объектов.

Пример 1.1.

<HTML ID='DOCUM'> 
<CENTER><H1 ID='zag'&gt ВАСЬКА</h1> 
<FORM NAME='f1'> 
<INPUT TYPE=BUTTON name="bot" onclick=bm() value='Увеличить'> 
</FORM> 
<IMG SRC="VaskaM.jpg" ID='Vas' onclick=bm()> 
</center> 
<!--В скрипте закомментирован вывод окна со списком объектов --> 
<SCRIPT> 
/* 
 var msg='' 
 for(i=0; i<document.all.length;i++) 
 msg+=i + ' ' + document.all[i].tagName +' ID=' + document.all[i].id+'\n' 
 alert(msg) 
*/ 
flag=true 
function bm() 
{ if(flag)
{ document.images[0].src='VaskaB.jpg' flag=false; 
  document.forms[0].bot.value="Уменьшить" 
  document.forms[0].bot.style.background='red' 
  document.all.bot.style.color='black'; 
} 
else 
{ document.getElementById("Vas").src='VaskaM.jpg'; 
  //обращение к кнопке по индексу 
  document.forms[0].bot.value="Увеличить" 
  document.forms[0].bot.style.background='green' 
  document.all.bot.style.color='white'; flag= true 
}
} 
</script>
</HTML>

В примере 1.1 сценарий используется для замены фотографии и изменения цвета кнопки и надписи на ней. Друг друга меняют маленькая и большая фотографии кота Васьки.

Замена фотографии и изменение вида кнопки в примере происходят при щелчке мышкой по кнопке или по самой фотографии. В тегах <INPUT> и <IMG> помещён атрибут onclick=bm(), при помощи которого в ответ на щелчок мышкой вызывается функция bm(). Такой атрибут называют обработчиком событий. Имя файла с фотографией является свойством SRC объекта IMG. Замена фотографии делается в сценарии двумя равнозначными способами:

document.images[0].src='VaskaB.jpg' 
document.getElementById("Vas").src='VaskaM.jpg'

В первом варианте доступ к фотографии происходит через коллекцию images, в которой все расположенные на странице фотографии (в примере одна фотография) пронумерованы. Нумерация начинается с нуля. Во втором варианте используется метод getElementById() объекта document. Параметром в методе getElementById() служит ID(идентификатор) объекта IMG. Весь оператор читается так: "свойству src объекта, имеющего ID=Vas и входящего в состав объекта document, присвоить значение VaskaM.jpg ". Сам объект document является дочерним по отношению к объекту window. Поэтому полное обращение к свойству src следовало бы писать так:

window.document.images[0].src='VaskaB.jpg' 
window.document.getElementById("Vas").src='VaskaM.jpg'

Обычно, за исключением тех случаев, когда нужно воспользоваться свойствами или методами самого объекта window, это слово опускают.

Более сложная иерархия объектов наблюдается при обращении к свойствам кнопки:

document.forms[0].bot.value="Уменьшить"

document.forms.f1.bot.style.background='red'

Первый оператор служит для изменения надписи на кнопке. Доступ к кнопке происходит по её имени (name='bot'). Доступ к форме осуществляется через коллекцию forms и номер формы в коллекции.

С помощью второго оператора меняется цвет кнопки. Доступ к форме осуществляется через коллекцию forms и имя формы f1. Своеобразие доступа к свойствам, задаваемым стилем, состоит в том, что style выступает формально как дочерний объект. В рассматриваемом примере родительским по отношению к style является объект с именем bot, то есть, кнопка.

Для обращения к объектам удобна коллекция all объекта document. В коллекцию all входят все объекты HTML-документа, поэтому выбирать объект нужно по его ID или имени. Коллекция all использована для изменения цвета надписи на кнопке:

document.all.bot.style.color='black'

Все описанные способы доступа к объектам HTML-документа базируются на объектной модели документа (DOM). Наиболее трудной задачей, стоящей перед разработчиком сценариев, является разработка сайтов, которые будут одинаково выполняться на всех браузерах. Рассматриваемый пример HTML-документа подобран так, что он (почти) одинаково выполняется на браузерах Internet Explorer 6.0 и Mozilla Firefox 2.0, несмотря на то, что объектные модели в этих браузерах отличаются друг от друга. Для того, чтобы убедиться в этом уберите символы комментариев /* и */ из первой и пятой строчек скрипта и откройте страницу в обоих браузерах. Появится окно со списком всех объектов, созданных браузером для открытого документа. В созданной браузером Internet Explorer модели – 12 объектов, а у Mozilla Firefox – 10.

Рассмотрим подробнее раскомментированный фрагмент скрипта.

var msg='' 
for(i=0; i<document.all.length;i++) 
msg+=i + ' ' + document.all[i].tagName +' ID=' + document.all[i].id+'\n' 
alert(msg)

Коллекция all всех объектов HTML-документа имеет свойство length, равное количеству всех объектов модели документа. Любой объект имеет свойство tagName, значение которого совпадает с именем объекта. В приведённом фрагменте скрипта в цикле формируется строковая переменная msg, состоящая из номеров, имён и ID объектов. Сочетание символов \n служит для перевода строки.

Метод getElementById() - входит в стандарт W3C и поддерживается всеми браузерами. Коллекция allразработана фирмой Microsoft для браузера Internet Explorer. В настоящее время эта коллекция поддерживается почти всеми брауэерами. Как ни странно, в новом браузере Edge, встроенном в ОС Windows 10, коллекция all не поддерживается.

Задача 1.1. Напишите HTML-документ, который в окне браузера отображается в виде следующих трёх строк:

ДОСТУП К СВОЙСТВАМ И МЕТОДАМ
Коллекция all
Метод getElementById()

Первую строку поместите в контейнер <H2>...</h2>, вторую – в контейнер <P> …</p>, третью – в контейнер <DIV> … </div>. Напишите скрипт для изменения цветов фона и букв надписей, при щелчке по этим строкам. При щелчке по первой строке цвет букв должен меняться с чёрного на белый или с белого на чёрный, а фон – с жёлтого на синий или с синего на жёлтый. Так же должны меняться цвета третьей строки.

При щелчках по второй строке цвет букв на ней должен меняться с красного на белый и наоборот, а цвет фона - с белого на зелёный и наоборот.

Для изменения первой и третьей строк примените метод getElementById(), а для второй строки – коллекцию all.

Размещение сценариев в HTML-документе

Сценарий в HTML-документе можно размещать тремя способами:

в открывающем теге в качестве значения атрибута событие (см. пример 2.1);
в контейнере, ограниченном тегами <SCRIPT> ...</script>;
в отдельном файле.

Контейнеры со сценариями могут размещаться в любом месте HTML-документа. Количество сценариев в одном HTML-документе не ограничено.

Выполнение сценариев происходит при загрузке HTML-документа и при наступлении событий. Во время загрузки HTML-документа браузер последовательно просматривает встречающиеся сценарии и пытается их выполнить. Если встретился вызов функции, то браузер ищет её описание в текущем и во всех ранее загруженных сценариях. Поэтому описание функции должно размещаться либо в одном сценарии с вызовом, либо в сценариях расположенных выше вызова функции.

Сценарий можно хранить в отдельном файле. Для вставки сценария в HTML-документ служит атрибут SRC тега <SCRIPT>. Сценарий, размещённый в отдельном файле, можно использовать на многих страницах сайта. В примере 1.2 рассматривается одна из страниц сайта сети магазинов.
Пример 1.2

<html><!-- СКРИПТ загружается из файла primJs.js--> 
<HEAD> 
<TITLE>Сеть</title> 
</head>
<body>
<SCRIPT language="JavaScript" src="PrimJs.js"> 
</script> 
<H2 align=center style="color:green">Магазин "ПОДАРКИ"</h2> 
<p>Адрес: Лесная ул., д.2</P> 
<p>Транспорт: трамваи 7, 23, автобусы 56, 93</p>
</body> 
</html> 
// Файл primJs.js 
a="background-color:#00ffff; color:#ff00ff;" 
a+="font-size:24pt; font-family:'Times New Roman'" 
naim='Сеть магазинов "ВСЁ ДЛЯ ДОМА"' 
var da=new Date() 
d=da.getDate()+"."+(da.getMonth()+1)+"."+da.getFullYear() 
document.write('<P align=center style= "'+a+'"> '+ 
naim+'</p><P> Сегодня '+d+'</p> ')

Общие для страниц всех магазинов сети заголовок с названием сети и сегодняшняя дата формируются скриптом, размещённым в отдельном файле primJs.js . Метод write(HTML-код) служит для вставки в страницу размеченного текста (HTML-кода). Этот метод применяется только при загрузке страницы, так как его применение после окончания загрузки приведёт к стиранию старого содержимого страницы.

Задача 1.2. Добавьте в пример 1.2 три страницы. Две страницы должны отображать информацию о магазинах Посуда и Мебель. Третья страница – главная в сайте сети магазинов ВСЁ ДЛЯ ДОМА. На ней должны быть ссылки на страницы магазинов, входящих в сеть. На страницах магазинов должен использоваться скрипт из файла primJs.js.

Следующая работа