Динамическая подсказка

В строке состояния браузера, когда вы проводите указатель мыши над ссылкой, она показывает URL, на который эта ссылка указывает. Однако с помощью сценария вы можете выводить более подробное описание ссылки

Используйте событие onMouseOver дескриптора <А> для того, чтобы вывести текст справки, и событие onMouseOut, чтобы стереть его.

Для каждой ссылки на ваш Web-странице добавьте атрибут onMouseOver к дескриптору <А> — тогда каждый раз, когда пользователь перемещает мышь над ссылкой, будут выполняться два оператора назначенных этому событию.

Первый оператор self. status=' The help text'; водит текст, содержащийся внутри одиночных кавычек, в строке состояния браузера.

Замените этот текст на реальное описание ссылки.

Второй оператор return true; — предотвращает вывод URL браузером в строке состояния:

OnMouseOver="self.status='текст справки'; return true;"

Добавьте также атрибут события onMouseOut к каждому дескриптору <А>.

Он работает точно так же, как и атрибут onMouseOver. Он нужен для очистки строки состояния, когда пользователь покинет ссылку.

OnMouseOut="self.status=' '; return true;"

Использование сценариев других программистов

Самый быстрый способ добавления сценария к Web-странице – использование сценариев, загружаемых из галереи или библиотеки сценариев.

Вопросы допуска к практической работе:

1. Назначение языка гипертекстовой разметки JavaScript;

2. Понятие гипертекста и гипертекстовой разметки;

3. Назначение браузера;

4. Редакторы JavaScript.

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

Изучение методов

Пользоваться методом alert () проще всего. Он применяется для вывода на экран текстовой информации в краткой форме. После прочтения сообщения пользователь щелкает по кнопке ОК и окно исчезает.

1. Создать диалоговое окно с сообщением на фоне браузера Internet Explorer

   1. Откройте блокнот и наберите следующий код

1.2. Сохраните файл в следующем виде 1.htm

1.3. Загрузите данный файл в веб-браузере

1.4. В результате должно появиться следующие диалоговое окно.

2. Создать редактор программ JavaScript, сделанный с помощью html

2.1. Откройте блокнот и наберите следующий код

1.2. Сохраните файл в следующем виде 2.htm

1.3. Загрузите данный файл в веб-браузере

1.4. В результате должен появиться редактор программ JavaScript.

В веб-браузере этот HTML-код выведет две текстовых области: одна служит для ввода выражений на языке JavaScript, а другая — для отображения результатов этого кода. Кроме текстовых областей создаются две кнопки: одна для выполнения введенного кода и отображения результатов, а вторая — для очистки текстовых областей. В поле результатов выводится значение, возвращаемое последним

выражением введенного кода. Обратите внимание, что в поле для кода следует вводить только выражения на языке JavaScript, но не теги HTML.

3. Подсветка кнопок и текста

Рассмотрим задачу изменения цвета кнопки при наведении на нее указателя мыши. При удалении указателя с кнопки должен вернуться ее первоначальный цвет. Это так называемая подсветка кнопок. В нашем примере три элемента, задающие кнопки, находятся в контейнере формы <FORM>. К этому контейнеру привязываются обработчики событий onmouseover (наведение указателя мыши) и onmouseout (удаление указателя мыши). Таким образом, инициатором (получателем) этих событий может быть любой элемент формы (в нашем примере — любая из трех кнопок). В обычном состоянии кнопки имеют серый цвет, заданный 16-м кодом аОаОаО. При наведении указателя мыши цвет кнопки становится желтым (yellow)

3.1. Откройте блокнот и наберите следующий код

3.2. Сохраните файл в следующем виде 3.htm

3.3. Загрузите данный файл в веб-браузере

3.4. В результате должен появиться подсветка кнопки при наведении на нее указателя мыши.

В функции colorchangeQ проверяется, является ли инициатор события объектом типа button (кнопка). Если это так, то цвет кнопки изменяется, в противном случае — нет. Без этой проверки изменялся бы цвет не только кнопок, но и фона.

Аналогичным образом можно изменять цвет и других элементов, например фрагментов текста. Если требуется подсвечивать текст, то он должен быть заключен в какой-нибудь контейнер, например в теги <Р>, <В>, <1> или <DIV>.