Лабораторная работа №1 Доступ к объектам и сценариям
Доступ к свойствам и методам объектов
Цель работы - научиться использовать различные способы доступа к свойствам и методам объектов для внесения изменений в 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 сценарий используется для замены фотографии и изменения цвета кнопки и надписи на ней. Друг друга меняют маленькая и большая фотографии кота Васьки.
Замена фотографии и изменение вида кнопки в примере происходят при щелчке мышкой по кнопке или по самой фотографии. В тегах <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.