Лабораторные работы. Краева / Web-технологии. Отчет №4

Цель работы — изучить основы языка программирования JavaScript, включая способы подключения скриптов, работу с функциями, событиями, формами и регулярными выражениями.

Ход выполнения

Упражнение №1. Alert и формы.

Был создан HTML-документ с базовой структурой. В тело документа добавлена форма с кнопкой. Для кнопки задан обработчик события onclick, который вызывает функцию show_information(), написанную в подключаемом файле script.js.. [Рис. 1].

Рисунок 1. Код программы

Код функции в script.js [Рис. 2]:

Рисунок 2. Код программы скрипта

2

Для форматирования кнопки и ее расположения на странице был создан отдельный файл стилей [Рис. 3].

Рисунок 3. Код программы

Получился следующий вид страницы [Рис. 4]:

Рисунок 4. Отображение страницы

3

Упражнение №2. Alert и формы. Ввод данных

В том же документе HTML создана вторая форма. Она содержит поле для ввода числа (type=”number”) и кнопку. Для кнопки задан обработчик onclick, который вызывает функцию show_information2(), передавая ей введенное значение. [Рис. 5].

Рисунок 5. Новая форма

Код функции в script.js [Рис. 6]:

Рисунок 6. Скрипт

4

Файл стилей [Рис. 7]:

Рисунок 7. Изменение файла стилей

Стиль текста изменился на следующий [Рис. 8]:

Рисунок 8. Отображение страницы

5

Упражнение №3. Стили через подключение внешнего файла

В документ добавлена третья форма-анкета. Она включает поле для ввода фамилии и три группы радиокнопок для оценки по трем дисциплинам. При нажатии на кнопку «Отправить» вызывается функция send(), которая рассчитывает средний рейтинг и выводит все данные на страницу, полностью перезаписывая ее содержимое с помощью document.write(). [Рис. 9].

Рисунок 9. Содержимое HTML-файла

6

Продолжение CSS-файла [Рис. 11]

Рисунок 11. Обновлённый файл

8

Код функции в script.js [Рис. 12]:

Рисунок 12. Обновлённый файл

9

Продолжение JavaScript [Рис. 13]:

Рисунок 13. Обновлённый файл

Отображение анкеты на странице [Рис. 14]:

Рисунок 34. Отображение страницы

10