Размещение сценариев в HTML-документе
Лабораторная работа Доступ к объектам и сценариям
Доступ к свойствам и методам объектов
Цель работы - научиться использовать различные способы доступа к свойствам и методам объектов для внесения изменений в HTML-документ.
Все изменения в HTML-документе производятся через свойства, методы и события объектов, входящих в состав объектной модели документа. Рассмотрим сценарий (пример 1.1), в котором используются типичные способы доступа к свойствам и методам объектов.
Пример 1.1.
<HTML ID='DOCUM'>
<CENTER><H1 ID='zag'> ВАСЬКА</h1>
Вариант, совместимый с Mozilla<P>
<FORM NAME='f1'>
<INPUT TYPE=BUTTON name="bot" onclick=bm() value='Увеличить'>
<P>
</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
В примере 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 служит для перевода строки.
Задача 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>
Адрес: Лесная ул., д.2<P>
Транспорт: трамваи 7, 23, автобусы 56, 93
</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()+"."+da.getYear()
document.write('<P align=center style= "'+a+'">'+
naim+'</p><P>Сегодня '+d+'</p>')
Выполнить пример 1.2
Общие для страниц всех магазинов сети заголовок с названием сети и сегодняшняя дата формируются скриптом, размещённым в отдельном файле primJs.js . Метод write(HTML-код) служит для вставки в страницу размеченного текста (HTML-кода). Этот метод применяется только при загрузке страницы, так как его применение после окончания загрузки приведёт к стиранию старого содержимого страницы.
Задача 1.2. Добавьте в пример 1.2 три страницы. Две страницы должны отображать информацию о магазинах Посуда и Мебель. Третья страница – главная в сайте сети магазинов ВСЁ ДЛЯ ДОМА. На ней должны быть ссылки на страницы магазинов, входящих в сеть. На страницах магазинов должен использоваться скрипт из файла primJs.js.