- •Лабораторная работа №1
- •Краткие сведения из теории
- •Задание.
- •1. Запустите текстовый редактор и создайте html-документ со следующими данными:
- •2. Сохраните полученный документ под названием lab1.Htm.
- •3. Запустите браузер ms Internet Explore для просмотра данного документа. Лабораторная работа №2
- •Краткие сведения из теории
- •Задание.
- •2. Сохраните полученный документ под названием lab2.Htm.
- •3. Запустите браузер ms Internet Explore для просмотра данного документа. Лабораторная работа №3
- •Краткие сведения из теории
- •Задание.
- •2. Сохраните полученный документ под названием lab3.Htm.
- •3. Запустите браузер ms Internet Explore для просмотра данного документа. Лабораторная работа №4
- •Краткие сведения из теории
- •Задание.
- •Флаги-команды для вставки в текст объектов нетекстовой информации
- •Параметры графического изображения
- •Задание.
- •Задание.
- •1. Запустите текстовый редактор и создайте html-документ. В документ включите ссылки для более наглядного перемещения по документу.
- •Небольшая статья об Актюбинском Университете.
- •2. Сохраните полученный документ под названием lab6.Htm.
- •3. Запустите браузер ms Internet Explore для просмотра данного документа. Лабораторная работа №7
- •Краткие сведения из теории
- •Задание.
- •1. Запустите текстовый редактор и создайте html-документ с табличным представлением данных.
- •2. Сохраните полученный документ под названием lab7.Htm.
- •3. Запустите браузер ms Internet Explore для просмотра данного документа. Лабораторная работа №8
- •Краткие сведения из теории
- •Задание.
- •Задание.
- •1. Создайте многоконный интерфейс в html-документе, используя фреймы.
- •2. После сохранения полученных документов на диск запустите браузер ms Internet Explore для просмотра данного документа. Лабораторная работа №10
- •Краткие сведения из теории
- •Задание.
- •Задание.
- •Задание.
- •Основные теги
- •Теги оглавления
- •Атрибуты тела документа
- •Теги для форматирования текста
- •Гиперссылки
- •Форматирование
- •Графические элементы
- •Атрибуты таблицы
- •Атрибуты кадров
- •Формы Для форм, выполняющих какие-то функции должны быть запущены соответствующие cgi скрипты на сервере. Html только создает внешний интерфейс формы.
Задание.
1. Запустите текстовый редактор и создайте HTML-документы, пользуясь примерами данными в теории.
2. Сохраните полученные документы.
3. Запустите браузер MS Internet Explore для просмотра этих документов.
Лабораторная работа №12
Тема: Javascript в HTML-документе.
Цель работы: Научиться использовать программы, написанные на языке Javascript в HTML-документе.
Инструменты: Текстовый редактор NotePad. HTML-браузер MS Internet Explore.
Краткие сведения из теории
Java Script - это язык управления сценарием отображения документа. Все операции, которые можно исполнять в программе на JavaScript, описывают действия над хорошо известными и понятными объектам - элементами рабочей области программы Netscape Navigator и контейнерами языка HTML. В Java Script не реализованы классы объектов, наследование, инкапсуляция и полиморфизм. Имеются объекты с набором свойств и набор функций над объектами, которые называются методами. Функция пользователя выполняется по наступлении некоторого события: onChange, onClick, onLoad и др., а внутренние функции языка используются непосредственно.
Не вдаваясь в подробности описания Java Script, сконцентрируем внимание на контейнерах Java Script и примерах использования Java Script кодов. Контейнер <SCRIPT LANGUAGE= "Java Script"> ... </SCRIPT> может использоваться как в заголовке, так и в теле документа. Не все программы просмотра способны распознавать и исполнять скрипты, поэтому само тело скрипта помещается в контейнер комментария. Лучше всего описать применение Java Script на примерах.
Идущие часы и бегущая строка
Данный тип объектов наиболее часто используется на страницах WWW. В примере 7 приведен фрагмент программы, реализующей эти объекты:
Пример 7.
<HTML>
<HEAD>
<TITLE>JavaScript</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
<!- Hide script from user
adv_string = "Internet\"
status_string = adv_string +
adv_string + adv_string +
adv_string + adv_string +
adv_string
i=0
function background()
{
window.status = status_
string.substring (i,i+180)
...
current_date = new Date()
window.document.form1.
clock.value = current_
date.getHours() + ":" +
current_date.getMinutes
() + ":" + current_
date.getSeconds()
id = setTimeout("back
ground()", 500)
window.document.form1.
kuku.value = "number"+i
}
//This is the end of code
definition ->
</SCRIPT>
</HEAD>
<BODY onLoad = "background()"
BACKGROUND=www_wal0.jpg>
<H1>JavaScript</H1>
<FORM NAME=form1 ACTION =
"new_window()">
<INPUT NAME = clock TYPE =
text SIZE = 8MAXLENGTH=8>
<HR>
<INPUT TYPE=button NAME =
help Value = "HELP"
onClick = "window.open
("clock.htm",
"Clock_Window",
"scrollbars = yes,width =
450, height=350") ">.
<HR>
<INPUT NAME = kuku type =
text>
<HR>
</FORM
<P>
</BODY>
</HTML>
Для создания скрипта в заголовок документа (контейнер HEAD) включен контейнер SCRIPT. До недавнего времени атрибут LANGUAGE в этом контейнере не являлся обязательным. Но с момента появления VBSCRIPT смысл в указании типа языка появился - Navigator не понимает скриптов на других языках. Отсутствие атрибута может привести к ошибкам при отображении гипертекстовых страниц. Далее в тексте страницы определен комментарий, в который включен текст скрипта. Начинается комментарий строкой:
<!- Hide script from user
И кончается строкой:
// This is the end of code definition->
Функция, реализующая бегущую строку, использует метод open - встроенную в JavaScript функцию, которая определена над объектом window. В результате открывается новое окно Netscape Navigator и в него загружается документ. Вызов функции осуществляется после нажатия на соответствующую кнопку. Таким образом, функция будет выполнена только в том случае если произойдет событие, описанное атрибутом onClick в контейнере INPUT.
Изначально предполагалось, что программа просмотра, которая поддерживает JavaScript будет исполняться в среде многопотоковых операционных систем. В этом случае к моменту порождения нового потока старый уже завершится и setTimeout будет порождать последовательно исполняемые потоки. Однако, из-за неаккуратной реализации JavaScript, команда setTimeout стала просто "пожирать" ресурсы компьютера. Системы Windows 3.x вообще не являются многопоточными и в них просто происходит переполнение стека при выполнении данного скрипта, а как быстро "упадет" система зависит от объема исполняемой по setTimeout функции. Самое лучше, что можно посоветовать, если вдруг на экране появляется прокрутка - поскорее покинуть такую страницу. Справедливости ради следует отметить, что прокрутку можно организовать и другими способами, поэтому ее появление не обязательно должно вызывать крах системы или крах программы просмотра.
JavaScript - это не единственный язык управления сценариями просмотра документов. Имеется другая версия аналогичного языка - VBScript на основе Visual Basic. Кроме того, управлять сценарием просмотра можно и из Java-апплетов, что, конечно, сложнее, но зато более надежно и безопасно. При этом программист получает возможность наследования и прочие атрибуты объектно-ориентированного программирования. В конце концов, для создания фреймов и окон можно использовать атрибуты соответствующих контейнеров HTML, которые позволяют делить рабочую область экрана на фрагменты, перекрывать объекты и восстанавливать первоначальный вид страницы. В Navigator 3.0 появились новые типы объектов и функции над ними.
Примеры скриптов.
Идущие часики можно поместить в строке статуса и в поле form.
<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>
Второй пример - скрипта, создающего часики (в сокращенном варианте) в поле 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>
Бегущая строка в строке статуса
<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>
Бегущая строка в поле 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=32 name=forum>
</form></center>
<script language="JavaScript">
m_line();
</script></body></html>