Получение доступа к объектам на HTML странице с помощью технологии DOM. Формализованное описание. Листинг программы

Министерство транспорта Российской Федерации

Департамент водного транспорта

НГАВТ

Кафедра ИСА

Лабораторная работа № 2

                                                                  Выполнили:                                                                        

                                                                                   Студенты группы ИТ – 42а

      Проверил:

Новосибирск 2007

1. Цели и задачи.

1.1. Цель: Научиться, с помощью JavaScript, получать доступ к объектам на HTML странице, используя технологию DOM.

Задачи:

I.  Изучить технологию DOM для доступа к объектам

II.  Создать web-страницу, содержащую таблицу, в соответствии с тематикой варианта

III.  С помощью сценария, реализовать возможность добавления и изменения данных в таблице, на основе изученной технологии

2. Введение.

В данной лабораторной работе необходимо реализовать программу “Расписание занятий” на языке JavaScript. Данная работа должна соответствовать целям и задачам, определенным в разделе 1.

JavaScript был разработан совместно компаниями Sun Microsystems и Netscape.

За синтаксическую основу нового языка был взят язык Java, в свое время разработанный компанией Sun Microsystems.

Имея интерпретируемую природу, JavaScript стал дополнением языка Java и позволил Web-разработчикам создавать и развертывать приложения, как в корпоративных сетях, так и в Internet. Язык JavaScript предоставил Web-разработчикам возможности настоящей программы, а не простого форматирования данных, как это было в случае с HTML. Все это позволяет использовать этот язык для написания различных приложений, как, например эта программа.

3. Ход работы.

В состав программы входят три файла:

1.  index.html – основной файл (интерфейс, вывод результатов и т.д).

2.  script.js – файл с необходимыми функциями для работы программы.

3.  style.css – файл каскадных таблиц стилей.

Для начала работы необходимо запустить файл index.html. После запуска в окне браузера появляется пустая таблица. В “шапке” таблицы указаны названия полей, чтобы можно было легко ориентироваться при вводе значений в таблицу. Ниже располагается интерфейс ввода значений.  Значение полей: “День недели”, “Тип занятий” – необходимо выбирать из выпадающего списка, а значения полей: “Предмет”, “Аудитория” – необходимо вводить вручную.

Следует заметить, что в поле “Предмет”, можно вводить только символы латинского и русского алфавита, а в поле “Аудитория” только цифру или число (максимум: три цифры). Оставлять эти поля незаполненными не рекомендуется. Так – же ввод информации необходимо начинать сначала для понедельника, потом для вторника и т.д. Количество занятий должно быть не больше семи на один день. Время проставляется автоматически.

Вообще – то можно водить все, что угодно! Просто при невыполнении условий описанных выше, вылезет сообщение об ошибке. После ПРАВИЛЬНОГО заполнения всех выше указанных полей, можно нажать кнопку “Добавить”, для занесения информации в таблицу.

Так – же информацию в таблице можно менять. Для этого необходимо кликнуть мышью на интересующее поле таблицы. Появиться форма ввода нового значения. После ввода, необходимо нажать “OK” для принятия изменений или “Отмена” для отмены действия.

Гордостью системы является проверка раздражающего глюка формы для изменения значения поля таблицы, когда при нажатии кнопки “Отмена”, в поле вписывается значение “null”.

3.1. Формализованное описание.

3.1.1 Файл index.html.

Функции: нет.

События: onclick

Генерируется при щелчке кнопкой мыши.

Переменные:

time – представляет собой массив содержащий данные о времени занятий.