Интерфейс Frontpage для работы с Javascript

Работать с javascript можно в режиме «Код» либо «С разделением», просматривать в режиме «Просмотр».

При работе с javascript Frontpage выводит подсказки.

Например, если есть объект p1, то при вводе названия объекта после точки будет выведен список свойств данного объекта.

 

Также при вводе параметров тэга после нажатия пробела он подсказывает, какие события можно выбрать.

В случае ошибки при просмотре он выведет номер строки, в которой обнаружена ошибка, либо номер строки, следующей за ней.

Например, если ввести f1.T4.value, при том, что объекта T4 на форме f1 нет, как показано на рисунке ниже, то будет выведено сообщение об ошибке

 

Сообщение об ошибке

Задания

I. Создать визуальный эффект

Варианты:

1. Создать 3 раскрывающиеся структуры: Возле каждой - краткая информация, кнопка «подробнее», при нажатии на которую появляется подробная информация, а заголовок кнопки меняется на «скрыть», при нажатии кнопки «скрыть» остается только краткая информация. При наведении на кнопку ее шрифт становится полужирным, при отведении возвращается к исходному.

2. Создать развертывающееся меню из 3 пунктов: При наведении на любой из пунктов появляется подменю, при отведении исчезает. При наведении на пункт меняется цвет фона, при отведении возвращается к исходному.

3. Создать виртуальный тур из 3 областей. В каждой области находится текст, изображение и кнопки «вперед» и «назад». Сначала видима только первая область. С помощью кнопок «вперед», «назад» можно переключаться на другие области. При наведении на кнопки отступы меняются, при отведении возвращаются к исходным.

4. Создать 3 раскрывающиеся структуры: Возле каждой - краткая информация, кнопка «подробнее», при нажатии на которую появляется подробная информация, а заголовок кнопки меняется на «скрыть», при нажатии кнопки «скрыть» остается только краткая информация. При наведении на кнопку ее шрифт становится наклонным.

5. Создать развертывающееся меню из 3 пунктов: При наведении на любой из пунктов появляется подменю, при отведении исчезает. При наведении на область, размер шрифта увеличивается, при отведении возвращается к исходному.

6. Создать виртуальный тур из 3 областей. В каждой области находится текст, изображение и кнопки «вперед» и «назад». Сначала видима только первая область. С помощью кнопок «вперед», «назад» можно переключаться на другие области. При наведении на кнопки заголовок кнопки становится подчеркнутым, при отведении возвращается к исходному.

 

II. Создать тест, состоящий из 5 вопросов, по 4 варианта ответа в каждом.

Варианты:

1. Создать тест про Башкортостан, используя раскрывающиеся списки. Выделить все вопросы, на которые даны неправильные ответы.
2. Создать тест про Россию, используя переключатели. Выделить все вопросы, на которые даны правильные ответы.
3. Создать тест про Уфу, используя метки. Если на все вопросы даны правильные ответы, используя innerHTML в отдельной области написать «Молодец».
4. Создать тест про страны мира, используя переключатели. Если на все вопросы даны неправильные ответы, используя innerHTML в отдельной области написать «Очень плохо».
5. Создать тест про животных, используя раскрывающиеся списки. Если дано от 2 до 3 правильных ответов, используя innerHTML в отдельной области написать «плохо».
6. Создать тест про растения, используя метки. Выделить все вопросы, на которые даны неправильные ответы.
7. Создать тест про памятники культуры, используя метки. Выделить все вопросы, на которые даны правильные ответы.
8. Создать тест про группу, используя переключатели. Если на все вопросы даны правильные ответы, используя innerHTML в отдельной области написать «Молодец».
9. Создать тест про семью, используя раскрывающиеся списки. Если на все вопросы даны неправильные ответы, используя innerHTML в отдельной области написать «Очень плохо».
10. Создать тест про школу, используя переключатели. Если дано от 2 до 3 правильных ответов, используя innerHTML в отдельной области написать «плохо».

 

Тематика теста может быть предложена студентом и согласована с преподавателем.

 

III. Создать форму, выполнить проверку правильного заполнения полей

 

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

Визуальные эффекты.

Часть 1. Необходимо создать 2 ячейки гипертекста: одна видимая, другая невидимая. При наведении мыши на первую, должны изменяться цвет фона и текста. При щелчке на первую, появляется вторая.

Создайте 2 области гипертекста <div> и заполните гипертекстом. Во всех вариантах кроме 2 и 5 здесь и далее вместо первой области создать и использовать кнопку

<input type=”button” value=”подробнее”> (для 3 и 6 вариантов вместо «подробнее» нужно написать «вперед»).

 

Создайте классы для оформления областей (используйте собственные атрибуты и значения) и примените их. Обязательно указать, что вторая область невидима. Во 2 и 5 вариантах в класс для второй области нужно добавить position: absolute, что означает, что область будет отображаться поверх другого гипертекста. Также установите ширину(width) и высоту (height).

 

Наименуйте ячейки (параметр id).

В зависимости от задания создайте обработку события onclick (щелчок) либо onmouseover(наведение мыши), при совершении которого должна появляться скрытая область (см. «Dynamic HTML. Обработка событий», стр. 3).

 

Создайте функцию для выполнения той же операции.

 

Создайте функцию для изменения цвета фона при наведении мыши.[2]

 

Самостоятельно создайте функцию и обработку события отведения мыши. Чтобы стиль вернулся к исходному в новой функции атрибуту CSS присвойте пустую строку (“”). В функции для наведения и отведения мыши в соответствии с заданием добавить изменение других атрибутов CSS (см. «Изменение свойств объектов. Настройка стилей», стр. 5).

 

В соответствии с вариантом окончите задание.

В вариантах 1 и 4 необходимо проверять, является вторая область видимой либо нет. В первом случае область становится невидимой, а заголовок кнопки пишется «подробнее». Во втором случае область становится видимой, а заголовок кнопки пишется «скрыть». Для этого в функцию, запускаемую при событии onclick, добавьте условный оператор (if (…) {…} else {…}) (См. «Условный оператор», стр. 8). В скобках () напишите условие видимости, т.е. проверьте, равен ли атрибут CSS display равен значению block. Учтите, что в javascript проверка на равенство пишется == (два знака “=”). Добавьте еще 2 основные и 2 вспомогательные области и примените к ним те же функции.

В вариантах 2 и 6 добавьте области: Должно быть 3 области, в каждой из которой по 2 кнопки. Добавьте функцию hide(obj), скрывающую объект. Она аналогична функции show(obj), только вместо block нужно установить значение none. В событие onclick долно быть введено (hide(d1); show(d2)), т.е. первая область d1 скрывается, а вторая область d2 появляется. Аналогично напишите и в остальных кнопках, т.е. текущая область должна скрываться, а следующая появляться. При достижении последней области при нажатии кнопки «вперед» должен осуществиться переход к первой области. Аналогично создаем кнопки «назад» в каждой области и осуществляем переходы в обратную сторону.

 

В 2 и 5 вариантах, чтобы дочерние области не пропадали сразу, нужно использовать таймер. Описание того, как это сделать, ниже.