4. Содержание отчёта

Отчёт должен содержать название и цель. Ход работы все свойства, методы.

Написать скрипт галереи, в которой выводятся фотографии в строку 5 фото 100 на 100, 3 столбца. Фото должны добавляться динамически. При наведении на фото, фото увеличивается до реальных размеров. Выводы.

5. Контрольные вопросы

1. Для чего нужен объект images.

2. Какие вы знаете свойства объект images.

3. Какие методы обращения к элементам images на странице.

4. Порядок загрузки изображений на странице.

5. Как загружать изображения, которые используются в скриптах.

Лабораторная работа №12 Объект JavaScript – window.

1. Цель Изучить свойства, методы объекта window, научиться применять их на практике.

2. Методические указания

1. При изучении конструкций языка HTML можно использовать любой

текстовый редактор. Для получения HTML файла, сохраняйте свои

изменения как текстовые, для файла используйте расширение *.htm или

*.html.

2. Более опытные пользователи могут воспользоваться любым

специализированным редактором HTML страниц (Macromedia

Dreamweaver, HomeSite, FrontPage, AceHTML, Web Development Studio)

3. Создаваемые файлы необходимо тестировать в основных браузерах Internet

Explorer, Mazilla Firefox, Opera.

4. Отлаженные файлы необходимо сохранять в отдельном каталоге.

5. По окончанию работы сохраните все созданные файлы на своих носителях.

3. Теоретические сведения

Объект window является объектом верхнего уровня в который загружается

документ, являющийся дочерним объектом, именно поэтому из дочернего

объекта мы не можем воздействовать на свойства и методы родительского

окна. Это в случае, если объект document не создает новое окно. Если

посредством программы JavaScript создается новое окно из объекта

document, - новое окно становится уже дочерним объектом от document,

следовательно мы уже можем им управлять. И документ, загруженный в

новое окно также является потомком от объекта document окна верхнего

уровня, следовательно из документа, загруженного в новое окно мы тоже

можем управлять этим окном. То есть, окно, созданное из объекта document

является потомком этого объекта и на него мы можем воздействовать. В

виду того, что в любом случае существует основное родительское окно

которое можно просто закрыть, тем самым лишить потомков родителя и

тогда основным становится первое созданное окно, а если все созданы из

одного документа, то о наследственности вообще речи быть не может - они

станут разрозненны, следовательно массив windows - не существует и не

может таковой существовать. Окнам можно задавать только имена и

получать доступ только через имя. При исчезновении родителя исчезает и

имя - окно становится "сиротой" - это предотвращает обращения к

несуществующим объектам window.

Метод open() объекта window позволяет открывать новые окна, определяя

различные их характеристики (размер, координаты, наличие панели

инструментов, полосы скроллинга и др.). Кроме того, из JavaScript-

программы можно управлять загруженным в окно документом,

динамически изменяя его при помощи методов объекта document, как

open(), write() и close().

Метод open() объекта window вызывается при помощи операторов:

window.open("URL", "windowName", ["windowFeatures, . . ."]);

где строка "URL" - адрес ресурса, загружаемого в новое окно. Если URL не

указан, окно открывается, но загрузки документа не происходит. (Если не

указывается URL, - оставляются кавычки и запятая). С помощью аргумента

"windowName" задают имя окна, это имя не является его заголовком.

Аргумент windowFeatures представляет собой список характеристик нового

окна, которые задавать не обязательно. Эти характеристики представляют

собой строку, в которой через запятую без пробелов перечисляются

атрибуты: наличие меню, полос прокрутки, рамки, позволяющей изменять

размер окна, данные о размерах окна и др. Вновь созданное окно получает

фокус ввода, который можно при необходимости изменить методами:

focus() и blur().

Каждая характеристика окна представляется в виде атрибута с уникальным

именем и может быть включена или выключена при помощи установок

yes/no или 1/0.

<html> <head> <script language="JavaScript"> function openWin() { myWin= open("forma/close.htm"); } </script> </head> <body> <form> <input type="button" value="Открыть новое окно" onClick="openWin()"> </form> </body> </html>

Заметим, что Вы имеете возможность управлять самим процессом создания окна. Например, Вы можете указать, должно ли новое окно иметь строку статуса, панель инструментов или меню. Кроме того Вы можете задать размер окна. Рассмотрим основные свойства, которыми Вы можете управлять:

Атрибут	Значения	Что определяет
copyhistory	[=yes|no] | [=1|0]	Сохранение истории загрузки документов в данное окно
directories	[=yes|no] | [=1|0]	Наличие в данном окне кнопок групп новостей
height	=pixelheight	Высоту окна в пикселах
location	[=yes|no] | [=1|0]	Наличие поля Location
menubar	[=yes|no] | [=1|0]	Наличие меню
resizable	[=yes|no] | [=1|0]	Наличие рамки окна, позволяющего менять его размеры
scrollbars	[=yes|no] | [=1|0]	Наличие линеек прокрутки
status	[=yes|no] | [=1|0]	Наличие строки состояния
toolbar	[=yes|no] | [=1|0]	Наличие панели инструментов
width	=pixelwidth	Ширину окна в пикселах

По умолчанию атрибутам всегда присваивается значение yes, а размер нового окна (если он не задан) соответствует размеру предыдущего. Атрибуты можно указывать в произвольном порядке.

<head> <script language="JavaScript"> function openWin() { myWin= open("forma/close.htm", "displayWindow", "width=400,height=300,status=no,toolbar=no,menubar=no"); } </script> </head> <body> <form> <input type="button" value="Открыть новое окно" onClick="openWin()"> </form> </body> </html>

Теперь мы рассмотрим такую замечательную возможность JavaScript , как динамическое создание документов. То есть Вы можете разрешить Вашему скрипту на языке JavaScript самому создавать новые HTML-страницы. Более того, Вы можете таким же образом создавать и другие документы Web, такие как VRML-сцены и т.д. Для удобства Вы можете размещать эти документы в отдельном окне или фрейме.

<html> <head> <script language="JavaScript"> function openw() { var OpenWindow=window.open("", "newwin", "height=300,width=300"); OpenWindow.document.write("<HTML>") OpenWindow.document.write("<TITLE>Новое окно</TITLE>") OpenWindow.document.write("<BODY BGCOLOR='white'>") OpenWindow.document.write("<CENTER>") OpenWindow.document.write("<font size=+1>Новое окно</font><P>") OpenWindow.document.write("<a href= 'forma/content.html' target='main window'> Эта ссылка<BR>откроется в главном окне</a><p>") OpenWindow.document.write("<P><HR><P>") OpenWindow.document.write("<a href='' onClick='self.close()'> Эта закроет окно</a><p>") OpenWindow.document.write("</CENTER>") OpenWindow.document.write("</HTML>") self.name="main window" } </SCRIPT> </script> </head> <body onLoad="openw()"> </body> </html>