Практическое занятие № 17
Создание HTML-страницы с использованием сценариев JavaScript
Цель работы
Получить практические навыки создания простейших скриптов на языке программирования JavaScript и добавления их на HTML-страницу.
Перечень технических средств обучения
2.1 Персональный компьютер
2.2 Microsoft Windows XP
2.3 Блокнот
2.4 Браузер
Теоретические сведения
Сценарии (скрипты) JavaScript размещаются непосредственно в коде HTML-страницы.
Включение кода JavaScript в состав HTML-документа может осуществляться при помощи тега <SCRIPT>.
Код JavaScript можно разместить в отдельном файле с расширением.jsи подключить его к основному HTML-документу. Для этого в теге <SCRIPT> указывается атрибут src со значением, соответствующим адресу файла со сценарием JavaScript.
С точки зрения сценария JavaScript браузер представляется иерархически организованным набором объектов. Обращаясь к свойствам и методам этих объектов можно выполнять различные операции над окном браузера, загруженным в это окно документом HTML, а также над отдельными объектами, размещенными в документе HTML. Например, можно создавать новые окна браузера, загружая в них документы HTML, динамически формировать текст документа HTML, обращаться к полям форм, определенных в документе HTML и так далее.
Объект window находится в корне иерархии. Когда в окно браузера загружается документ HTML, внутри этого объекта создаются другие объекты - document, parent, frame, location и top.
Если в окно браузера загружается документ HTML с фреймами, то для каждого фрейма создается отдельное окно, причем это окно создается как объект window.
Объект document содержит в себе другие объекты, состав которых полностью определяется документом HTML, загруженным в окно браузера. Это могут быть формы, ссылки на другие документы HTML или локальные ссылки внутри одного документа, объекты, определяющие адрес URL документа и так далее.
Если в документе имеются формы, то они также представляются в виде иерархического набора объектов. Объект-форма может содержать в себе такие объекты, как кнопки, переключатели, поля для ввода текстовой информации.
Обращаясь к свойствам перечисленных выше объектов, сценарий JavaScript может определить различные характеристики документа HTML, такие как, например, заголовок. Ему доступны все ссылки, размещенные в документе, а также содержимое полей форм, определенных в документе HTML.
Ниже перечислены встроенные объекты, свойства и методы которых доступны в сценариях JavaScript без предварительного определения этих объектов.
| Объект | Описание |
| Array | Массив |
| Boolean | Логические данные |
| Date | Календарная дата |
| Function | Функция |
| Global | Глобальные методы |
| Math | Математические константы и функции |
| Number | Числа |
| Object | Объект |
| String | Строки |
В качестве примера, имеющего практическое значение, рассмотрен документ HTML, в котором отображается текущая дата и время.
<HTML>
<HEAD>
<TITLE>Текущая дата и время</TITLE>
</HEAD>
<BODYBGCOLOR=WHITE>
<H1>Текущаядата и время</H1>
<SCRIPTLANGUAGE="JavaScript">
<!--
vardt;
varszDate="";
dt = newDate();
szDate = "Date: " + dt.getDate() + "."
+ dt.getMonth() + "." + dt.getYear();
document.write(szDate);
document.write("<BR>");
document.write("Time: " + dt.getHours()
+ ":" + dt.getMinutes() + ":" + dt.getSeconds());
// -->
</SCRIPT>
</BODY>
</HTML>
Язык JavaScript имеет встроенные средства для отображения простейших диалоговых панелей, таких как панель сообщений (функция alert, предназначенная для отображения диалоговых панелей с сообщениями).
Диалоговая панель ввода информации вызывается с помощью функции prompt. В качестве параметров функции передается вводное сообщение для пользователя и начальное значение запрашиваемой текстовой строки.
Порядок выполнения работы
4.1 В ходе выполнения практической работы №16 был сформирован сайт. Задача, стоящая перед студентом при выполнении практической работы № 17, заключается в следующем:
Написать сценарий, который сообщает текущее время и дату, и поместить на главную страницу сайта;
Создать сценарий JavaScript, который при загрузке данного документа будет вызывать окно, запрашивающее имя пользователя (метод prompt). Введенное имя сохранить в переменной name. Вывести в заголовке страницы (в верхнем блоке) приветствие вида «Здравствуйте, name, добро пожаловать на мою замечательную страницу!». Если имя не введено, вызвать окно предупреждения (alert) с текстом: «Здравствуйте! Было бы приятно с Вами познакомиться»;
Сделать страницу - "Галерея изображений". Разместить несколько изображений малого размера и сделать так, чтобы при выборе каждого из них на странице отображалось это изображение в увеличенном формате.
4.2 Ответить на контрольные вопросы
Содержание отчета
1. Название работы
2. Цель работы
3. Порядок выполнения работы
4. Работающая страница с комментариями (PR17-XXX, где XXX - фамилия студента).
5. Ответы на контрольные вопросы
6 Контрольные вопросы
6.1 Укажите способы использования кода JavaScript в составе HTML-страницы.
6.2 Как в JavaScript определяются комментарии?
6.3 Перечислите методы создания стандартных окон JavaScript.
Перечень литературы
7.1 Е. В. Михеева Информационные технологии в профессиональной деятельности, Академия, 2011
7.2 Избачков Ю., Петров В. Информационные системы, Питер, 2011
7.3 Дронов В. А. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов. – Эком, 2011
7.4 Влад Мержевич. Справочник по HTML - 7.0 и CSS - 5.0,2011
7.5 С. В. Киселев, С. В. Алексахин, А. В. Остроух Веб-дизайн, Академия, 2011.