Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
отчёт.docx
Скачиваний:
127
Добавлен:
30.03.2015
Размер:
27.27 Mб
Скачать

Лабораторная работа №11 Окна и динамически создаваемые докумен­ты

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

Ход работы:

1. Создаём документ с именем index.html и делаем разметку страницы.

2. В головной части задаём заголовок страницы, конструкцию использования каскадных таблиц, которые мы расположим в документе main.css и подключаем библиотеки jqwery.

<title>История одной кошки</title>

<link rel="stylesheet" type="text/css" href="main.css">

<script type="text/javascript" src="jquery.min.js" ></script>

<script type="text/javascript" src="jquery.example.min.js" ></script>

3. Открытие новых окон в браузере важная возможность языка JavaScript. Можно либо загружать в новое окно новые документы (например, те же документы HTML), либо (динамически) создавать новые материалы.

Помещаем на страницу кнопку для загрузки одной из страниц в новом окне (рис.1).

Рис.1 «Кнопка для загрузки страницы в новом окне»

В головной части документа помещаем код JavaScript:

$("#b1").click(function(){

window.open(href="mau.html","Картинка",

"screenX=100,screenY=30,width=815,height=580,directories=no");

То есть после нажатия на кнопку b1 откроется новое окно с адресом mau.html, заголовком "Картинка" шириной 815 и высотой 580.

Теперь, после нажатия на экране будет открываться новое окошко (рис.2)

Рис.2 «Новое окно»

4. На этом новом окне расположена кнопка «Закрыть окно»

Её код JavaScript:

$("#b3").click(function(){

window.close();

});

5. Также на страницу помещена кнопка «Динамический документ», при нажатии которой в новом окне открывается документ, и в него динамически записывается текст (Рис.3). Код кнопки:

$("#b2").click(function(){

myWin=window.open("","Документ, чо",

"screenX=300,screenY=300,width=300,height=100,status=yes,toolbar=no,menubar=no");

myWin.document.open();

myWin.document.write("<html><head><title>Документ, чо</title></head>");

myWin.document.write("<body>");

myWin.document.write("<center><font size=+7>МЯУ!</font></center>");

myWin.document.write("</body></html>");

myWin.document.close(); });

Рис.3 «Динамический документ»

При нажатии на кнопку открывается новое окно с соответствующими коду параметрами. Конструкция myWin.document.open(); открывает документ, в который будет записываться информация, а конструкция myWin.document.close(); закрывает этот документ, но не окно.

6. Далее в нашей странице помещаем всплывающий фрейм (Рис.4), который описывается в теле документа кодом:

<iframe ID='Окно'

src="7.jpg"

scrolling='yes'

align='center'

valign='middle'

frameborder="yes"

width='530' height='495'>

</iframe>

Рис.4 «Всплывающий фрейм»

7. Чтобы вставить на нашу страницу таймер, вставляем куда хотим

<div id="time">Таймер</div>

А в текст программы пишем:

var timetogo = 10;

var timer = window.setInterval(function()

{

var str = timetogo;

$('#time').text(str);

if (timetogo <= 0)

{

$('#time').text('Время вышло!');

window.clearInterval(timer);

}

timetogo--;

}, 1000);

Таким образом, создаём переменную timetogo = 10, после открытия документа начинается обратный отсчёт 10 и, когда timetogo <= 0 в <div id="time"> пишется «Время вышло!»

Рис.5 «Таймер на начало»

Рис.6 «Таймер на конец»

Весь текст программы имеет вид:

Рис.7 «Текст программы»

Данной программой при наведении мыши на изображение 2.jpg, картинка будет меняться на 1.jpg, и наоборот, при удалении указателя мыши с поверхности изображения, оно вернётся в прежнее состояние.

Рис.8 «2.jpg и 1.jpg»

8. Итоговый вид страницы:

Рис.9 «Итоговый вид страницы»