Создание интерактивных элементов на Web-странице (изображений, кнопок, всплывающих меню, скрытых информационных блоков и т.д.)

Практическая работа №14

Тема: Создание интерактивных элементов на Web-странице (изображений, кнопок, всплывающих меню, скрытых информационных блоков и т.д.)

Цели: закрепиление знаний по включению JavaScript на страницу и использованию основных функций; применение на практике условных операторов JavaScript.

Время выполнения: 2 часа

Теоретический материал:

Клиентский скрипт – это программа, которая может сопровождать документ HTML или непосредственно быть внедренной в него. Данная программа выполняется на клиентской машине при загрузке документа или в другое время, например, когда активизируется ссылка. К документу HTML могут прикрепляться два типа скриптов:

-     скрипты, выполняющиеся один раз при загрузке документа агентом пользователя;

-     скрипты, выполняющиеся каждый раз, когда происходит определенное событие, например, нажатие кнопки.

Способы включения скриптов на страницу: через тэги <script> и </script>; из другого файла с помощью тэга <link>; непосредственно в тексте документа.

Краткая характеристика функций:

alert(“текст”) – выдаёт на экран сообщение;

confirm(“надпись”) – выдаёт панель с двумя кнопками;

prompt(“надпись”, “значение введённой строки по умолчанию”) – используется для ввода текста.

Общий вид записи полного условного оператора: if(условие) оператор1; else оператор2;

Задания:

Задание 1. Напишите скрипт для вывода на экран сообщения, содержащего Ваши данные: фамилия, имя и группа. Каждое слово должно содержаться в новой строке.

Задание 2. Напишите скрипт для вывода prompt-панели. При вводе в текстовую строку Вашей фамилии и нажатии кнопки «ок» должно выдаваться сообщение о правильности ввода, при вводе другой информации или нажатии кнопки «отмена» – сообщение об ошибке.

Задание 3. Продемонстрируйте использование функции confirm на примере. Причём при нажатии на разные кнопки должны выводиться разные сообщения.

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

а) var x=-10; var y=10; var z=x+y; if (z) z=20;

б) var x=-10; var y=10; var z=x+y; if (x<y) z=y-x;

в) var x=”каша”; var y=”лот”; var z=”акула”; if (x && y) z=x+y;

г) var x=”каша”; var y=”лот”; var z=”акула”; if (!x && y) z=x+y;

Задание 5. Найдите сумму всех целых чисел от 1 до n, где n вводится с клавиатуры в текстовом поле функции prompt. Значение суммы с пояснениями появляется на экране с помощью функции alert. Решите с помощью двух видов циклов. При нажатии кнопки «отмена» выведите сообщение об ошибке.

Ход работы:

1.   Для решения первого задания используйте функцию alert и сочетание символов ‘\n’ для перехода на новую строку.

2.   Во второй задаче необходимо применить условный оператор и стандартные функции prompt и alert. Запишите текст скрипта в тетрадь.

3.   Аналогично второй задаче применяется оператор if-else и alert, функция confirm появляется в начале.

4.   Законспектируйте результат работы скрипта из четвёртого задания и поясните. Для вывода значения z на экран используйте alert.

5.   В последней задаче вычисления реализуются двумя способами через цикл с параметром и цикл с предусловием. Используйте составной оператор. Первоначальный запрос выглядит так (установите значение по умолчанию):

Рисунок 40 – Окно запроса

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

1.   Укажите основные способы включения скриптов на web-страницу.

2.   Опишите принцип работы функции alert().

3.   Назовите основные типы данных языка JavaScript.

4.   Опишите логические операции: конъюнкция, дизъюнкция, исключающее ИЛИ, отрицание.

5.   Приведите примеры использования логических операций в программировании и «в быту»?

6.   Приведите примеры использования стандартных функций языка JavaScript.

7.   Опишите несколько переменных различных типов.

8.   В чём заключается разница между скриптами, выполняющимися на стороне пользователя и сервера?

9.   В результате выполнения выражения y=x=1+1; получим: а) браузер выдаст сообщение об ошибке; б) x и y получат значение 2; в) x получит значение 1, а y – значение 2?

10.            Опишите принципы работы условного и циклических операторов.

11.            Укажите сокращенные арифметические операции языка JavaScript.

Скачано с www.znanio.ru