Порядок выполнения работы





Практическое занятие № 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.

 





Читайте также:
История русского литературного языка: Русский литературный язык прошел сложный путь развития...
Новые русские слова в современном русском языке и их значения: Менсплейнинг – это когда мужчина что-то объясняет...
Обряды и обрядовый фольклор: составляли словесно-музыкальные, дра­матические, игровые, хореографические жанры, которые...

Рекомендуемые страницы:


Поиск по сайту

©2015-2019 poisk-ru.ru
Все права принадлежать их авторам. Данный сайт не претендует на авторства, а предоставляет бесплатное использование.
Дата создания страницы: 2019-03-17 Нарушение авторских прав и Нарушение персональных данных


Поиск по сайту:

Обратная связь
0.014 с.