Лабораторная работа №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 «Итоговый вид страницы»