Лабораторная работа №8 Использование JavaScript для создания динамического html

Цель работы: приобрести практический навык создания динамических страниц на HTML с использованием javascript.

1. Теоретическая часть

До этого язык JavaScript рассматривался в чистом виде. Правда, некоторые элементы, такие как окна сообщений, не принадлежат одному этому языку, но невозможно обойтись без ввода и вывода информации. Следующий шаг заключается в объединении JavaScript с HTML с технологиями, предоставляемыми браузерами, для создания смешанной технологии динамического HTML (DHTML).

Динамический HTML - понятие собирательное. Он представляет собой комбинацию новых тэгов HTML, опций и возможностей программирования (в виде сценариев), что позволяет сделать Web-страницы интерактивными и размещать на них анимационные объекты. Благодаря DHTML Web-страница начинает функционировать подобно любой компьютерной программе, и тем самым стирается различие между жестким диском и Internet.

Новые технологии, которые в совокупности привели к созданию DHTML, впервые использовались в версиях браузеров Netscape Navigator 4 и Microsoft Internet Explorer 4. Хотя ядро DHTML, базирующееся на стандарте HTML 4.0, поддерживалось обоими браузерами, дополнительные возможности программы поддерживаются либо одним браузером, либо другим. Это одна из трудностей, с которыми сталкиваются разработчики при использовании DHTML на Web-страницах. Еще одна существенная проблема заключается в том, что многие пользователи до сих пор работают со старыми версиями браузеров - третьей и даже более ранними.

Рассмотрим практические методы создания динамического содержимого.

2. Пример выполнения практической части

Создадим в любом текстовом редакторе представленный ниже сценарий WSH на языке JScript и сохраним его в файле с расширением .js. После чего запустим его на выполнение двойным щелчком в проводнике Windows. Со всеми действиями этого сценария можно ознакомиться, прочитав внедренные в текст сценария комментарии.

// Отображение диалогового окна с приветствием

WScript.Echo("Привет!");

text = "";

// Создание объекта Shell

shell = WScript.CreateObject("WScript.Shell")

// Присоединение к семейству WScript.Shell.Environment

// итератора для организации перебора элементов семейства

e = new Enumerator(shell.Environment);

// Перебор элементов семейства Environment

// и сохранение их значений в переменной text

for ( ; !e.atEnd(); e.moveNext()){

text += e.item() + "\n";

}

// Отображение полученных значений в диалоговом окне

WScript.Echo(text)

Встроенный в документ HTML сценарий JavaScript имеет доступ к объектной модели обозревателя, в котором этот документ отображается (при условии, конечно, поддержки обозревателем языка сценариев JavaScript и раскрытия своей модели объектов), а также к объектной модели (DOM) самого документа (опять-таки при ее реализации в обозревателе).

Создадим приведенный ниже документ HTML и отобразим его в обозревателе Internet Explorer. Каждый щелчок на кнопке Новое окно документа будет приводить к отображению еще одного окна обозревателя размером 300x50 пикселей, но без строки меню, полос прокрутки, строки состояния, панели инструментов и адресной строки.

<SCRIPT>

function f(){

newWind = window.open("", "", "width=300,height=50")

}

</SCRIPT>

<BODY>

<FORM>

<INPUT TYPE="button" VALUE="Новое окно" onclick='f()'>

</FORM>

</BODY>

3. Задание для практического выполнения

1. Напишите сценарий, в котором создается переменная currentDate со значением текущей даты и сразу же после обработки страницы браузером ее содержимое отображается с помощью функции alert().

4. Содержание отчёта

1.Название и цель работы

2. Выполненное практическое задание

3. Вывод о проделанной работе

5. Контрольные вопросы

1. К чему имеет доступ сценарий javascript?

2. Как получить доступ к формам браузера?

3. Где генерируется динамическое содержимое страницы?

4. Как называется смешанная технология создания динамического содержимого?