Javascript. Работа с методами объектов window и document (лабораторная работа)

Javascript. Работа с методами объектов window и document. Размещение кода javascript во внешнем файле

Цель работ: поработать с методами объектов window и document, научиться размещать код javvascript во внешнем файле и обращаться к нему.

Краткая теория.

Метод document.open() — открывает поток для вывода в текущий документ строк с помощью методов document.write() и document.writeln(). Данный метод (document.open()) обычно применяется для формирования нового документа. Вызов данного метода в текущем документе приводит к его полной очистке. После того как документ открыт методом document.open() и сформирован с помощью методов document.write() и document.writeln(), его необходимо закрыть методом document.close().

Метод document.close() - предназначен для закрытия потока, который Вы открыли с помощью метода document.open().

Метод open() предназначен для создания новых окон. В общем случае его синтаксис выглядит следующим образом:

myWin = window.open("URL","имя_окна","параметр=значение,параметр=значение,...", заменить);

Первый аргумент задает адрес страницы, загружаемой в новое окно (можно оставить пустую строку, тогда окно останется пустым). Второй аргумент задает имя окна, которое можно будет использовать в атрибуте TARGET контейнеров <A> и <FORM>.

Параметры метода window.open()

width число Ширина окна в пикселах (не менее 100)

height число Высота окна в пикселах (не менее 100)

left число Расстояние от левого края экрана до левой границы окна в пикселах

top число Расстояние от верхнего края экрана до верхней границы окна в пикселах

directories yes/no Наличие у окна панели папок (Netscape Navigator)

location yes/no Наличие у окна поля адреса menubar yes/no Наличие у окна панели меню

resizable yes/no Сможет ли пользователь менять размер окна

scrollbars yes/no Наличие у окна полос прокрутки

status yes/no Наличие у окна поля статуса toolbar yes/no Наличие у окна панели инструментов

<FORM>

<INPUT TYPE=button VALUE="Простое окно"

onClick="window.open('', 'test1',

'directories=no,height=200,location=no,'+

'menubar=no,resizable=no,scrollbars=no,'+

'status=no,toolbar=no,width=200');">

<INPUT TYPE=button VALUE="Сложное окно"

onClick="window.open('', 'test2',

'directories=yes,height=200,location=yes,'+

'menubar=yes,resizable=yes,scrollbars=yes,'+

'status=yes,toolbar=yes,width=200');">

</FORM>

window.open("http://ya.ru");

…При запуске откроется новое окно с указанным URL.

win = window.open(url, name, params)

Функция возвращает ссылку на объект window нового окна, либо null, если окно было заблокировано браузером.

Параметры:

url - URL для загрузки в новое окно.

Name - Имя нового окна. Может быть использовано в параметре target в формах. Если позднее вызвать window.open() с тем же именем, то браузеры (кроме IE) заменяют существующее окно на новое.

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

В примере новое окно заполняется содержимым целиком из JavaScript:

var newWin = window.open("about:blank", "hello", "width=200,height=200");

newWin.document.write("Привет, мир!");

А здесь модифицируем содержимое после загрузки:

var newWin = window.open('/', 'example', 'width=600,height=400');

alert(newWin.location.href); // (*) about:blank, загрузка ещё не началась

newWin.onload = function() {

// создать div в документе нового окна

var div = newWin.document.createElement('div'),

body = newWin.document.body;

div.innerHTML = 'Добро пожаловать!'

div.style.fontSize = '30px'

// вставить первым элементом в body нового окна

body.insertBefore(div, body.firstChild);

}

Пример для выполнения задания1:

<body>

<script>

function createNewDocument() {

var newWindow = window.open('', '', 'width=400,height=500');

newWindow.document.open();

newWindow.document.write('<!doctype html>');

newWindow.document.write('<html lang="ru">');

newWindow.document.write('<head>');

newWindow.document.write('<meta charset="utf-8">');

newWindow.document.write('<meta name="viewport" content="width=device-width, initial-scale=1">');

newWindow.document.write('<title>Новая страница</title>');

newWindow.document.write('</head>');

newWindow.document.write('<body>');

newWindow.document.write('<h1>Документ сформирован с помощью document.write</h1>');

// для корректной работы Live Server

newWindow.document.write('</' + 'body>');

newWindow.document.write('</html>');

}

</script>

<a href="javascript:createNewDocument()">Открыть и сформировать новый документ</a>

</body>

Метод close() позволяет закрыть окно. Если необходимо закрыть текущее, то: window.close(). Если открыли окно с помощью метода window.open(), то из скрипта, работающего в новом окне, сослаться на окно-родитель можно с помощью window.opener . Если необходимо закрыть родительское окно, т.е. окно, из которого было открыто текущее, то:

window.opener.close();

Если необходимо закрыть произвольное окно, то тогда сначала нужно получить его идентификатор: id=window.open(); ... id.close();

Пример изменения окна без закрытия

</head>

<body >

</body> </html>

Если JavaScript-кода много, и код используется в нескольких web-документах , то его выносят в отдельный файл, который, как правило, имеет расширение .js. Чтобы включить в HTML-документ JavaScript-кoд из внешнего файла, нужно использовать атрибут src (source) тега <script>. Его значением должен быть URL-aдpec файла, в котором содержится JS-код, например:

Здесь указан абсолютный путь к файлу с именем script.js, содержащему скрипт (из корня сайта). Сам файл должен содержать только JavaScript-кoд, который иначе располагался бы между тегами <script> и </script>.

По аналогии с элементом <img> атрибуту src элемента <script> можно назначить полный URL-aдpec.

primer

<html>

<head>

<title>javascript окно</title>

</head>

<body>

</form>

</body>

</html>

<html>

<head>

<title>javascript окно</title>

</head>

<body>

<input type="button" value="Закрыть"

onClick="close_pict()">

</body>

</html>

script.js

function open_w1() {

ford=window.open("w1.html", "display_ford",

"width=400,height=300,status=no,toolbar=no,menubar=no");

}

function close_pict() {

window.close();

}

Задания.

1) Используйте внешний css файл стилистическое оформление web-страницы из предыдущих лабораторных работ (body – 100% на100%, золотистый фон, зеленый шрифт 20px. Внешние отступы 0. Стиль оформления заголовка: красный фон, шрифт черный 30 px, поля 10px, текст-по центру, высота секции 20%. Стиль оформления секции контент: черный фон, шрифт белый, поля 10px).

В заголовке разместите надпись window и document. В секции контент:

разместите кнопку , при нажатии на которую сформируется и откроется новый документ размером 350 на 450,

со стилистическим оформлением для body цвет фона -maroon; полоса прокрутки auto; цвет шрифта white; размер шрифта 25px. Для селектора header шрифт: Bethoveen;размер шрифта 150%;отступы15px; высота15%; выравнивание по центру. Для селектора content размер шрифта 90%; отступы10px;выравнивание justify; цвет фона black; высота секции 85%

На странице в заголовке (стиль header) Hello new document. В секции контент (стиль content) заголовок первого уровня «Франсуа Вийон» - с помощью document.write.

Далее, слева рисунок 1.png размером 250 на 300. И текст: Я знаю, как на мед садятся мухи,

Я знаю Смерть, что рыщет, все губя.

Я знаю книги, истины и слухи,

Я знаю все, но только не себя

2) добавьте кнопку «закрыть окно» в родительский документ и разместите весь код javascript во внешнем файле

Требования к отчетам:

1.Цель работ.

2.Кратко теория\методика.

3.Задание и ход выполнения. В отчете представьте код html-документа. Если возможно – скрины с экрана ваших web-страничек.

4.Сделать выводы.