Лабораторна робота № 5
ТЕМА: Динаміка Web-сторінок. Елементи JavaScript.
Мета: Закріпити на практиці знання і навички зі створення і використання динамічних об’єктів в HTML-документах.
Хід роботи
Розробити індексний файл (Web-сторінку) для навігації по лабораторних роботах № 1-4. Для естетичного оформлення та динаміки використати наведені в прикладах Java-скрипти. Піктограми та малюнки для об’єктів створити за допомогою редактора Paint. Готовий проект розмістити в окремій папці.
Приклади JavaScript:
Приклад 1. Демонстрація Java. Дата та час
Приклад 2. Демонстрація Java. Дата та час - функція
Приклад 3. Годинник
Приклад 4. Біжуча стрічка (в полі)
Приклад 5. Біжуча стрічка в стрічці статусу
Приклад 6. Миготливі посилання
Приклад 7. Підкреслення посилання при наведенні на нього мишки
Приклад 8. Mеню з підсвічуванням кнопок, посилань
Приклад 9. Mеню із кнопкою GO
Приклад 10. Mеню без кнопки GO
Приклад 11. Меню з підменю
Приклад 12. Дата редагування документа
Приклад 13. Багато випадаючих меню
Приклад 14. Падаючі сніжинки
Приклад 1. Демонстрація Java. Дата та час
Найпростіший HTML-документ із JavaScript для виводу поточної дати та часу:
<HTML>
<HEAD>
<TITLE> СЬОГОДНІ </TITLE>
</HEAD>
<BODY>
<P>
<SCRIPT LANGUAGE="JavaScript">
var d;
d=new Date();
document.write(d.toString());
</SCRIPT>
</P>
</BODY>
</HTML>
Приклад 2. Демонстрація Java. Дата та час - функція
HTML-документ із JavaScript-функцією для виводу поточної дати та часу:
<HTML>
<HEAD>
<TITLE> СЬОГОДНІ </TITLE>
<SCRIPT>
function writeDate()
{
var d;
d=new Date();
document.write(d.toString());
}
</SCRIPT>
</HEAD>
<BODY>
<P>
<SCRIPT LANGUAGE="JavaScript">
writeDate();
</SCRIPT>
</P>
</BODY>
</HTML>
Приклад 3. Годинник
function fulltime() {
var time=new Date();
document.clock.full.value=time.toLocaleString();
setTimeout('fulltime()',500)
}
</script>
<center>
<form name=clock>
<input type=text size=20 name=full>
</form>
<script language="JavaScript">
fulltime();
</script>
Приклад 4. Біжуча стрічка (в полі)
<script language="JavaScript">
var line="Біжуча стрічка";
var speed=150;
var i=0;
function m_line() {
if(i++<line.length) {
document.cit.forum.value=line.substring(0,i);
}
else{
document.cit.forum.value=" ";
i=0;
}
setTimeout('m_line()',speed);
}
</script>
<center>
<form name=cit>
<input type=text size=20 name=forum>
</form>
</center>
<script language="JavaScript">
m_line();
</script>
Приклад 5. Біжуча стрічка в стрічці статусу
<html>
<head>
<title>Біжуча стрічка</title>
<script language="javascript">
function statusmessageobject(p,d) {
this.msg = message
this.out = " "
this.pos = position
this.delay = delay
this.i = 0
this.reset = clearmessage
}
function clearmessage() {
this.pos = position
}
var position = 100
var delay = 40
var message = "Біжуча стрічка "
+ " в стрічці статусу"
var scroll = new statusmessageobject()
function scroller() {
for (scroll.i = 0; scroll.i < scroll.pos; scroll.i++)
{
scroll.out += " "
}
if (scroll.pos >= 0)
scroll.out += scroll.msg
else scroll.out =
scroll.msg.substring(-scroll.pos,scroll.msg.length)
window.status = scroll.out
scroll.out = " "
scroll.pos--
if (scroll.pos < -(scroll.msg.length)) {
scroll.reset()
}
setTimeout ('scroller()',scroll.delay)
}
</script>
</head>
<body bgcolor="white" onLoad="scroller()">
</body>
</html>
Приклад 6. Миготливі посилання
Цей код вставляєте між тегами <HEAD>...</HEAD>:
<script language="JavaScript">
<!--
function initArray() {
for (var i = 0; i < initArray.arguments.length; i++) {
this[i] = initArray.arguments[i];
}
this.length = initArray.arguments.length;
}
// далі ви заповнюєте масив кольорами, які
// і будуть по черзі мінятися в посиланнях
var colors = new initArray(
"#008000",
"green",
"#C6C68C",
"green",
"blue",
"purple",
"black",
"red");
pause_time = 0.5; // в секундах
link = 0; // починаючи з цього номера в масиві
// будуть змінюватись кольори у гіперпосилань
vlink = 4; // теж саме, тільки для переглянутих посилань
function linkDance() {
link = (link+1)%colors.length;
vlink = (vlink+1)%colors.length;
document.linkColor = colors[link];
document.vlinkColor = colors[vlink];
setTimeout("linkDance();",pause_time*1000);
}
linkDance();
// -->
</script>
Приклад 7. Підкреслення посилання при наведенні на нього мишки
Цей код вставляєте між тегами <HEAD>...</HEAD>:
<style type="text/css">
<!--
A:link {text-decoration: none;}
A:visited {text-decoration: none;}
A:hover {text-decoration: underline; }
-->
</style>
Приклад 8. Mеню з підсвічуванням кнопок, посилань
Підставляйте свої малюнки .gif та посилання й користуйтеся!
<HTML>
<HEAD>
<TITLE>меню з підсвіткою кнопок та посилань</TITLE>
<script language="JavaScript1.2">
function high(which2){
theobject=which2
highlighting=setInterval("highlightit(theobject)",50)
}
function low(which2){
clearInterval(highlighting)
which2.filters.alpha.opacity=30
}
function highlightit(cur2){
if (cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=5
else if (window.highlighting)
clearInterval(highlighting)
}
</script>
</HEAD>
<BODY BGCOLOR="#ffffff" TEXT="#000000" LINK="#0000FF" VLINK="#7F007F" ALINK="#FF0000">
<H2><center>Підсвічене меню.</H2>
<HR>
<a href="../name.htm"><img src="name.gif" border=0 style="filter:alpha(opacity=50)" onMouseover="high(this)" onMouseout="low(this)"></a>
<a href="../name.htm"><img src="name.gif" border=0 style="filter:alpha(opacity=50)" onMouseover="high(this)" onMouseout="low(this)"></a>
<a href="../name.htm"><img src="name.gif" border=0 style="filter:alpha(opacity=50)" onMouseover="high(this)" onMouseout="low(this)"></a>
</BODY>
</HTML>
Приклад 9. Mеню із кнопкою GO
<Form><Select Name="mymenu">
<Option Value="http://">Ваш текст - 1
<Option Value="http"//">Ваш текст - 2
<Option Value="http"//">Ваш текст - 3
<Option Value="http"//">Ваш текст - 4
</Select>
<Input Type="button" Value="Go"
OnClick="top.location.href=this.form.mymenu.options[this.form.mymenu.selectedIndex].value">
</Form>
Приклад 10. Mеню без кнопки GO
<Form><Input Type="hidden" Name="select value">
<Select Name="sel" Size="1" OnChange="top.location.href = this.options[this.selectedIndex].value;">
<Option selected value=#>Навігація по сайту</Option>
<Option value=http://>Ваш текст - 1</Option>
<Option value=http://>Ваш текст - 2</Option>
<Option value=http://>Ваш текст - 3</Option>
<Option value=http://>Ваш текст - 4</Option>
</Select></Form>
Приклад 11. Меню з підменю
<script language="JavaScript1.2">
<!--
var head="display:''"
function doit(header){
var head=header.style
if (head.display=="none")
head.display=""
else
head.display="none"
}
//-->
</script>
<h3 style="cursor:hand" onClick="doit(document.all[this.sourceIndex+1])">Меню 1</h3>
<span style="display:none" style=&{head};>
<A HREF="name.htm">Links 1</A><br>
<A HREF="../name.htm">Links 2</A><br>
<A HREF="http://www.name.htm">Links 3</A><br>
</span>
<h3 style="cursor:hand" onClick="doit(document.all[this.sourceIndex+1])">Меню 2</h3>
<span style="display:none" style=&{head};>
<a href="name.htm"><img src="name.gif" border="0"></A><br>
<a href="../name.htm"><img src="name.gif" border="0"></A><br>
<a href="img/name.htm"><img src="name.gif" border="0"></A><br>
</span>
Приклад 12. Дата редагування документа
Цей скрипт призначений для економії вашого часу.
Використовуючи його, вам не доведеться змінювати дату редагування документа при кожній його зміні. Він особливо корисний, якщо сторінки поновлюються дуже часто
<FONT SIZE="-1">Документ оновлено:
<SCRIPT LANGUAGE="JavaScript"><!--
document.writeln(document.lastModified)
// --></SCRIPT></FONT>
Приклад 13. Багато випадаючих меню
Якщо ви хочете використовувати багато випадаютчих меню, на сторінці, у кожного меню повинне бути індивідуальне ім'я, у даного - воно «menu».
Наприклад, якщо буде два меню, тоді в другому меню пропишіть «menu1» замість «menu».
<form>
<select name="menu">
<option value="../notes.htm">Статті – Все для вебмайстра
<option selected value="java1-10.htm">Приклади JavaScript
<option value="../applets.htm">Приклади апплетів
<option value="../promotion.htm">Все для розкрутки сайтів
</select>
<input type=button value="Ok"
onclick="top.location.href =
this.form.menu.options[this.form.menu.selectedIndex].value">
</form>
Приклад 14. Падаючі сніжинки
Цей скрипт створює на сторінці ефект падаючого снігу (листочків і т.д.)
Міняти малюнок у цьому рядку скрипта:
var snowflake = "1.gif";
(малюнки взяти в папці GIF)
<SCRIPT LANGUAGE="JavaScript1.2">
<!-- Begin
var no = 35; // кількість сніжинок
var speed = 6; // швидкість сніжинок
var snowflake = "1.gif";
var ns4up = (document.layers) ? 1 : 0;
var ie4up = (document.all) ? 1 : 0;
var dx, xp, yp;
var am, stx, sty;
var i, doc_width = 800, doc_height = 600;
if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
for (i = 0; i < no; ++ i) {
dx[i] = 0;
xp[i] = Math.random()*(doc_width-50);
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
if (ns4up) {
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></layer>");
}
} else if (ie4up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></div>");
}
}
}
function snowNS() {
for (i = 0; i < no; ++ i) {
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i];
document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", speed);
}
function snowIE() {
for (i = 0; i < no; ++ i) {
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx[i] += stx[i];
document.all["dot"+i].style.pixelTop = yp[i];
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowIE()", speed);
}
if (ns4up) {
snowNS();
} else if (ie4up) {
snowIE();
}
// End -->
</script>
Вимоги
Головний документ повинен обов’язково містити всі подані вище скрипти.
Робота має бути виконана в окремому каталозі (бути логічно структурованою).
Усі гіперпосилання мають бути відносними.
Поміняти сніжинки на інші об’єкти (наприклад, краплини дощу)
Змінити напрямок руху сніжинок.
Звіт
Повинен містити вихідний текст HTML-коду головного документа.
Контрольні питання
Опишіть функції тегів, які дають можливість вставляти JavaScript в HTML документ.
Навести приклади динамічних об’єктів WEB-сторінок.
Які особливості використання нестандартних функцій в JavaScript?
Як впливають позначаються коментарі в JavaScript?
Що означає «OnClick»?
Що означає «<Form>»
Як записується інкрементування (декрементування) лічильника в JavaScript?
Описати структурну схему операторів циклу (з лічильником) та розгалуження.
Що означає запис dx[i] += stx[i]?
Що означає запис yp[i] = Math.random()*doc_height ?