71066

Методы в JavaScript

Лабораторная работа

Информатика, кибернетика и программирование

Во время интерпретации HTML-документа браузером создаются объекты JavaScript. Свойства объектов определяются параметрами тегов языка HTML. Структура документа отражается в иерархической структуре объектов, соответствующих HTML-тегам. Родителем всех объектов является объект windows, расположенный на самом верхнем уровне иерархии...

Русский

2014-11-01

22.65 KB

7 чел.

Лабораторная работа №4 
Методы в JavaScript


Во время интерпретации HTML-документа браузером создаются объекты JavaScript. Свойства объектов определяются параметрами тегов языка HTML. Структура документа отражается в иерархической структуре объектов, соответствующих HTML-тегам. Родителем всех объектов является объект 
windows, расположенный на самом верхнем уровне иерархии, он представляет окно браузера и создается при запуске браузера. Для того чтобы открыть новое окно в сценарии JavaScript и отобразить в нем новый документ, применяется метод open, для закрытия окна можно воспользоваться методом close. Метод alert объекта windows отображает диалоговое окно с текстом, переданным методу в качестве параметра. Данный метод используется в случаях проверки правильности вводимых данных с помощью формы. Свойства объекта windows относятся ко всему окну, в котором отображается документ. 
Подчиненными объектами (или объектами нижнего уровня) являются объекты 
document, history, location, frame. Свойства объекта history представляют адреса ранее загружаемых HTML-страниц. Свойства объекта location связаны с URL-адресом отображаемого документа, объекта frame - со специальным способом представления данных. 
Свойства объекта 
document определяются содержимым самого документа: шрифт, цвет фона, формы, изображения и т. д. Объект document в зависимости от своего содержимого может иметь объекты, являющиеся для него подчиненными или дочерними. В частности подчиненными для объекта document являются объекты form, image, link, area и др. Иерархическая структура объектов представлена на рис.1 
Для каждой страницы создается один объект 
document, некоторые его свойства соответствуют параметрам тега <BODY>: bgColor, fgcolor, linkcolor, alinkcolor, vlinkColor. Методы write и writeln записывают в документ текст, задаваемый параметром. 
Если документ содержит изображения, то доступ к объекту, определяющему изображение, можно получить с помощью переменной, указанной в параметре 
name тега <Img>. Объект image имеет свойство images, которое содержит ссылки на все изображения, расположенные в документе. Ссылки перенумерованы, начиная с нуля. Доступ к первому изображению можно получить с помощью составной конструкции document.images[0], ко второму - document.images[1]. Если на странице пять изображений, то доступ к последнему изображению можно получить, воспользовавшись ссылкой document.images[4]
Рассмотрим примеры, в которых используются различные свойства объектов. 
Для встраивания изображений в HTML-документ служит тег <IMG>, имеющий обязательный параметр 
src, определяющий URL-адрес файла с изображением. Можно задавать размеры выводимого изображения. Значение параметра width определяет ширину изображения, значение параметра height - высоту изображения. Значения параметров ширины и высоты могут не совпадать с истинными размерами изображений, тогда при загрузке изображения автоматически выполняется перемасштабирование. 
Изображение можно поместить в рамку. Для этого используется параметр 
border. Значением параметра должно быть число, определяющее толщину рамки в пикселях. По умолчанию рамка вокруг изображения отсутствует, если только изображение не является ссылкой. 
Параметр 
alt определяет альтернативный текст. При наведении курсора мыши на изображение появляется комментарий.

Пример 1. Перестановка изображений

Напишем сценарий, который реализует обмен рисунков в документе. Пусть в документе расположено три изображения, пронумерованных от 1 до 3. В текстовых полях указываются номера рисунков, которые необходимо поменять местами. Требуется, чтобы после нажатия кнопки Обменять изображения переместились на нужные места. 
Сначала проверим, правильно ли заданы номера изображений, если это не так, то выдадим сообщение. Переменная 
z служит для запоминания адреса первого графического изображения. Доступ к изображению с номером r1 производится с помощью конструкции document.images[r1-1]. Для того чтобы на место изображения с номером r1 поместить изображение с номером r2, требуется выполнить оператор присваивания:

document.images[r1-1].src=document.images[r2-1].src

И, наконец, на место изображения с номером r2 помещается изображение, которое ранее было на месте с номером r1, и адрес которого запомнили в переменной z:

document.images[r2-1].src=z

Приведем полностью документ со сценарием (листинг 1). 

<HTML>

 <HEAD>

 <TITLE>Перестановка изображений</TITLE>

 <script>

 function chan(obj)

 { var r1=Number(obj.a1.value)

 var r2=Number(obj.a2.value)

 if ((r1<1)||(r1>3)||(r2<1)||(r2>3))

 alert ("Неверно заданы номера рисунков!")

 else

 { var z=document.images[r1-1].src

 document.images[r1-1].src=document.images[r2-1].src;

 document.images[r2-1].src=z

 } }

 </script>

 </HEAD>

 <BODY>

 <CENTER>

 <H4>Галерея рисунков</H4><br>

 <IMG src="p1.gif" width="90" name="pic1">

 <IMG src="p2.gif" width="90" name="pic2">

 <IMG src="p3.gif" width="90" name="pic3"> <br>

 <FORM name=form1>

 Рисунки с номерами<br>

 <input type="text" name="a1" size=1> и

 <input type="text" name="a2" size=1><P>

 <input type="button" value="Поменять местами" onClick="chan(form1)">

 </FORM>

 </CENTER>

 </body>

 </html>

Пример 2. Простое вертикальное меню

Напишем сценарий, реализующий вертикальное графическое меню. При наведении курсора мыши на пункт меню меняется цветовая палитра, соответствующая выделенному пункту меню. 
Каждому пункту меню соответствует два изображения: первое изображение, когда пункт меню не выбран, второе - при выбранном пункте меню, цветовая палитра рисунка изменена. Графические изображения, соответствующие ситуации, когда пункты меню не выбраны, хранятся в файлах с именами 
pch1.gif, pch2.gif. Соответствующие им графические изображения с измененной палитрой хранятся в файлах с именами wpch1.gif, wpch2.gif
Функция 
img имеет два параметра. Первый параметр задает выбор пункта меню, второй параметр - n - определяет номер пункта меню. От этого параметра зависит, какое изображение в документе требуется изменить document.images[n-1].src (вставить на этом месте рисунок "wpch"+n+".gif" или pch"+n+".gif). Имя файла формируется динамически и представляет собой конкатенацию (слияние) строк, одна из составляющих которой - значение второго параметра. Если имена файлов не подчинены общему правилу, то в функции потребуется дополнительный анализ, какой файл подгрузить. Это сделать нетрудно, зная место в документе, из которого произошел вызов функции. Документ со сценарием, реализующий вертикальное графическое меню, представлен в листинге 2.

 <HTML>

 <HEAD>

 <TITLE>Простое вертикальное меню</TITLE>

 <script language="JavaScript">

 function img(n, action)

 {if (action)

 {document.images[n-1].src="wpch"+n+".gif"}

 else

 {document.images[n-1].src="pch"+n+".gif"}

 }

 </script>

 </HEAD>

 <BODY background="fon1.jpg">

 <H2><FONT соlоr="#0000ff">Содержание</FONT></H2>

 <A href="tch1.htm" onmouseover="img(1,1)" onmouseout="img(1,0)">

 <IMG src="pch1.gif" аlt="форматирование текста" border="0" width="103" height="35"></A><br>

 <A href="tch2.htm" onmouseover="img(2,1)" onmouseout="img(2,0)">

 <IMG src="pch2.gif" аlt="форматирование текста" border="0" width="103" height="35"></A><br>

 <A href="tch3.htm" onmouseover="img(3,1)" onmouseout="img(3,0)">

 <IMG src="pch3.gif" аlt="форматирование текста" border="0" width="103" height="35"></A><br>

 

<!-- copyright (t3) --><div align="center">Хостинг от <a href="http://www.ucoz.ru/" title="Создать сайт бесплатно">uCoz</a><br /></div><!-- /copyright -->

</body>

 </HTML>

При попадании курсора мыши в область изображения возникает событие Mouseover, параметр обработки события onMouseOver получает значение img(p1,true).



Задания

1. Проверить примеры лабораторной работы. 
2. Написать сценарий выбора из трех изображений одного, которое вставляется ниже этих трех. 
3. Написать сценарий картинки с "эффектом приближения", т.е. увеличения размеров как реакция на попадание курсора мыши в поле рисунка (использовать свойства width и height). 
4. Написать сценарий графического горизонтального меню с появляющейся стрелкой над пунктом, у которого находится курсор. 


 

А также другие работы, которые могут Вас заинтересовать

32247. Разборно-переставная опалубка состоит из отдельных элементов (щитов, коробов, элементов креплений и т. д.), которые собираются для возведения железобетонного сооружения или части его в каждом отдельном случае 27 KB
  Устойчивость щитов опалубки обеспечивается подкосами которые устанавливаются через каждые 3 4 м. Для установки верхнего яруса короба опалубки нижние доски удлиненных щитов делают несколько длиннее и опирают их на щиты опалубки нижнего яруса башмака. В верхней части опалубки делаются вырезы для примыкания прогонов или прогонов и балок. Внизу одного из щитов короба делают отверстие для прочистки опалубки от мусора перед бетонированием.
32248. Скользящая опалубка 47.5 KB
  Основными элементами скользящей опалубки являются щиты домкратные рамы рабочий пол подвесные подмости домкратные стержни устанавливаемые по оси стен домкраты.Домкратные рамы являются основными несущими элементами на них устанавливают щиты опалубки которые воспринимают давление бетонной смеси. На домкратные рамы устанавливают домкраты которые опираясь на стержни поднимают всю конструкцию опалубки. Щиты опалубки устанавливают так чтобы расстояние между ними увеличивалось книзу образуя конусность в пределах высоты щитов или 5 7 мм на...
32249. Подъемно-переставная опалубка 21 KB
  Наружные и внутренние шиты опалубки закрепляют на подъемной головке которая устанавливается и поднимается по шахтоподъемнику. На подъемной головке закрепляют также рабочую площадку подвесные леса бункера для бетонной смеси лебедку лифтов и тепляк с юбкой тепляка. Щиты соседних ярусов закрепляют с помощью поперечных накладок.
32250. Объемно-переставная опалубка 49 KB
  Опалубка состоит из пространственных секций Побразной формы которые при соединении образуют туннели опалубки на квартиру или во всю ширину здания. Секции опалубки имеют переменную ширину в зависимости от принятого шага стен и различную длину. Бетонную смесь укладывают между туннелями опалубки для образования стен и на секции при бетонировании перекрытий. При демонтаже секции опалубки как бы сжимаются для чего сдвигают внутрь забетонированного туннеля боковые щиты опалубки щиты стен перемещают вниз горизонтальный щит перекрытий.
32251. Катучая опалубка 28.5 KB
  Каждый блок катучей опалубки состоит из нескольких металлических рам смонтированных на тележках передвигаемых на рельсах. Внешний контур металлических ферм и опалубки должен строго соответствовать очертанию бетонируемых конструкций.Применение подъемнокатучей опалубки снижает стоимость железобетонных работ по устройству покрытия здания на 20.Использование катучей опалубки прямоугольного сечения вдвое ускорило производство работ и позволило снизить трудоемкость 1 м3 железобетонных работ на 046 чел.
32252. ТЕХНОЛОГИЯ МОНТАЖА БОЛЬШЕПРОЛЕТНЫХ КОНСТРУКЦИЙ ЗДАНИЙ И СООРУЖЕНИЙ Возведение зданий с каркасом рамного типа 50 KB
  В производственных зданиях вместо мостовых кранов устанавливают один или два многоопорных подвесных крана грузоподъемностью по 3050 т передвигающихся вдоль пролета по монорельсовым путям подвешенным в узлах нижнего пояса ригеля. В связи с большими постоянными и подвижными нагрузками конструктивное решение ригеля принимают аналогично тяжелым мостовым фермам с поясами и решеткой из двухступенчатых Нобразных сечений. При пролетах более 50 м масса стропильной конструкции ригеля достигает 60 т и более монтаж ее может быть выполнен либо...
32254. Монтаж стальных конструкций укрупненными блоками 63 KB
  Высота конструкций центрального блока доменной печи доходит до 70 м при массе стальных конструкций сконструированных на сравнительно небольшой площади до 5000 т и более. Монтаж таких конструкций может быть выполнен либо частями с применением временных промежуточных опор либо целиком укрупненными блоками. Укрупнительную сборку стальных конструкций выполняют на строительной площадке если целесообразно собрать монтажный блок из нескольких элементов до подъема и полнее использовать грузоподъемность монтажного крана.
32255. Возведение зданий с перекрестно-стержневыми покрытиями 628 KB
  Структурные плитыграни собирали на стройплощадке из отдельных короткомерных стержневых трубчатых элементов поставляемых на стройку в пакетах. Перемещать отдельные грани из предмонтажного положения в проектное предлагалось по рельсовым направляющим уложенным на монтажной площадке и опорахпилонах. Грани покрытия монтировали с помощью двух кранов ДЭК50 и одного крана СКГ100. При монтаже структурных граней ПР1 ПР2 ПР3 основания каждой грани стропили по линии расположения опорных узлов за две точки к кранам ДЭК50 и крану...