- •Разработка электронного портала
- •Введение
- •Практическая работа №1 Тема: html. Основные положения
- •Структура документа
- •Комментарии
- •Тэги тела документа
- •Центрирование элементов документа
- •Пронумерованные списки
- •Непронумерованные списки.
- •Вложенные списки
- •Список определений
- •Гипертекстовые ссылки
- •Структура ссылок в html-документе
- •Ссылки на точки внутри документа
- •Задание
- •Практическая работа № 3 Тема: Графика внутри html-документа
- •Фоновые рисунки
- •Задание стандартных цветов
- •Горизонтальная линия
- •Добавление стилей в ваш html-документ
- •Основные атрибуты таблицы
- •Вложенные таблицы
- •Задание
- •Практическая работа № 5 Тема: Фреймы
- •Синтаксис фрэймов
- •Планирование фрэймов и взаимодействия между фрэймами
- •Зарезервированные имена фрэймов
- •Тэги формы
- •Меню выбора в формах
- •Отправление файлов при помощи форм
- •Задание
- •Практическая работа № 7. Тема: Введение в JavaScript
- •Примеры программирования на JavaScript:
- •Задание
- •Контрольные вопросы
- •Темы для индивидуальных работ
- •Литература
- •ПрИложение Названия и коды цветов для html
- •Примечания
Примеры программирования на JavaScript:
Создадим HTML-страницу в которой будет выводиться текущее время. Идущие часы можно поместить в строке статуса и в поле form. (Реализация объекта Date в Netscape Navigator 2.0 содержит ошибки). Пример 1. Часы в строке статуса при загрузке документа:
<html>
<head>
<title>Clock in status bar</title>
<script language="JavaScript">
function clock_status()
{
window.setTimeout("clock_status()",100);
today=new Date();
self.status=today.toString();
}
</script>
</head>
<body background="ffffff" onLoad="clock_status()">
</body>
</html>
Пример 2. Часы в поле form
<html>
<head>
<title>Clock</title>
<script language="JavaScript">
function clock_form()
{
day=new Date()
clock_f=day.getHours()+":"+day.getMinutes()+":"+day.getSeconds()
document.form.f_clock.value=clock_f
id=setTimeout("clock_form()",100)
}
</script>
</head>
<body bgcolor="ffffff" onLoad="clock_form()">
<center>
<form name=form metod="get">
<input name=f_clock maxlength=8 size=8>
</form>
</center>
</body>
</html>
Пример 3. Еще один вариант отображения часов. Причем обратите внимание, что функция вызывается в теле документа, а не в HTML-теге <body> как в предыдущем примере.
<html>
<head>
<title>Clock full</title>
</head>
<script language="JavaScript">
function fulltime() {
var time=new Date();
document.clock.full.value=time.toLocaleString();
setTimeout('fulltime()',500)
}
</script>
<body bgcolor=ffffff text=ff0000>
<center>
<form name=clock>
<input type=text size=17 name=full>
</form>
<script language="JavaScript">
fulltime();
</script>
</center>
</body>
</html>
Пример 4. Часы с указанием "P.M." и "A.M."
<html>
<head>
<title>Clock</title>
<script language="JavaScript">
var timer=null;
var timerrun=false;
function stoptime() {
if(timerrun)
clearTimeout(timer);
timerrun=false;
}
function starttime() {
stoptime();
showtime();
}
function showtime() {
var all=new Date();
var hours=all.getHours();
var minutes=all.getMinutes();
var seconds=all.getSeconds();
var timevalue=" " + ((hours>12) ? hours-12 : hours)
timevalue += ((minutes<10) ? ":0" : ":") + minutes
timevalue += ((seconds<10) ? ":0" : ":") + seconds
timevalue +=(hours>=12) ? "P.M." : "A.M."
document.clock.next.value=timevalue;
timer=setTimeout('showtime()',1000);
timerrun=true;
}
</script>
<body bgcolor=ffffff text=ff0000 onLoad="starttime()">
<center>
<form name=clock>
<input type=text name=next size=12 value=' '>
</center>
</form>
</body>
</html>
Пример 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="#000000" onLoad="scroller()">
</body> </html>
Пример 6. Бегущая строка в поле form.
<html>
<head>
<title>Бегущая строка</title>
</head>
<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>
<body bgcolor=000000>
<center>
<form name=cit>
<input type=text size=40 name=forum>
</form>
</center>
<script language="JavaScript">
m_line();
</script>
</body>
</html>
Пример 6. Информация о броузере.
Существуют броузеры, не поддерживающие некоторых возможностей JavaScript. Поэтому, чтобы не возникало ситуаций, когда броузер пользователя не видит чего-либо в вашем документе, можно использовать свойства объекта Navigator: appName и appVersion, которые определяют имя и версию броузера. В зависимости от версии броузера можно осуществлять вызов того или иного документа. Например, на платформах с 16-разрядной Windows обращение к функции eval() приводит к краху Netscape Navigator 2.0. Поэтому, посмотрим пример с изменением картинки, где используется эта функция и анализируется имя и версия броузера.
<html><head>
<title>Броузер</title>
</head>
<body bgcolor=ffffff>
<center><table border=1>
<tr><td>Имя броузера</td><td>
<script language="JavaScript">
document.write(navigator.appName);</script></td>
<tr><td>Версия броузера</td><td>
<script language="JavaScript">
document.write(navigator.appVersion);</script></td>
<tr><td>Кодовое название броузера</td><td>
<script language="JavaScript">
document.write(navigator.appCodeName);</script></td>
<tr><td>Заголовок пользовательского <br>агента</td><td valign=top>
<script language="JavaScript">
document.write(navigator.userAgent);</script></td>
</table><center>
</body>
</html>
Пример 7. Изменение фона документа.
Изменение фона документа при выборе кнопки с названием цвета. При этом используется свойство bgColor объекта Document. Свойство bgColor в Netscape Navigator 2.0 содержит ошибки.
<html>
<head>
<title>bgcolor</title>
</head>
<body text=000000 bgcolor=ffffff>
<table border=0 align=center>
<tr><td><form>
<input type=button value="красный" onClick="document.bgColor='ff0000'">
<input type=button value="желтый" onClick="document.bgColor='ffff00'">
<input type=button value="синий" onClick="document.bgColor='0000ff'">
<input type=button value="голубой" onClick="document.bgColor='87ceeb'">
<input type=button value="коралловый" onClick="document.bgColor='ff7f50'">
</form></td>
</table>
</body>
</html>