Главная

Популярная публикация

Научная публикация

Случайная публикация

Обратная связь

ТОР 5 статей:

Методические подходы к анализу финансового состояния предприятия

Проблема периодизации русской литературы ХХ века. Краткая характеристика второй половины ХХ века

Ценовые и неценовые факторы

Характеристика шлифовальных кругов и ее маркировка

Служебные части речи. Предлог. Союз. Частицы

КАТЕГОРИИ:






Создание сценариев обработки событий мыши




Упражнение 3. Создать скрипт, который при клике мышью на тексте «давайте познакомимся» выводит служебное окно с полем для ввода имени посетителя, а затем может приветствовать посетителя по имени. Технология выполнения:

· в HomeSite создать новый документ с заголовком «Примеры скриптов» и сохранить его как script1.html в своей папке html_files учебного Web-сайта с фреймовым вариантом структуры;

· на Web-странице написать текст «Давайте познакомимся - нажмите сюда» и поместить его в контейнер абзаца p;

· в открывающий тег контейнера p при помощи предсказателя атрибутов добавить атрибут onclick и при помощи метода prompt() создать сценарий, позволяющий вводить текст пользователя в переменную с именем im (рис. 3.8). Следует напомнить, что метод prompt() может иметь один или два аргумента, разделенные запятой. Первый аргумент – текст служебного сообщения в окне, второй – текст в поле ввода по умолчанию (рис. 3.9);

Рис. 3.8. Пример сценария с методом prompt()

Рис. 3.9. Пример служебного окна, формируемого методом prompt()

· создать следующий контейнер абзаца с текстом «Хотите узнать результат - жмите сюда» и сформировать также по событию onclick сценарий вывода служебного окна с содержимым переменной im (рис. 3.10). Символ + использован для соединения текста и значения переменной;

Рис. 3.10. Пример сценария с выводом содержимого переменной im

· проверить работу обоих скриптов в режиме браузера;

· для того, чтобы над текстами абзацев курсор принимал форму указывающего пальца, как при гиперссылках, следует в открывающие теги обоих абзацев добавить соответствующий стиль курсора: style="Cursor: hand";

· проверить результат, сохранить файл script1.html и продемонстрировать преподавателю. На рис. 3.11 приведен пример итогового html-кода Web-страницы с двумя созданными сценариями на события onclick.

Рис. 3.11. Пример html-кода Web-страницы с двумя созданными сценариями на события onclick

Курсор в виде указывающего пальца можно получить также при использовании контейнера гиперссылки a с символом # вместо адреса ссылки, например:

<a href="#" onclick="im=prompt('Введитеимя: ')">Нажмисюда</a>

Часто на Web-страницах области контроля события оформляют в виде кнопки с надписью при помощи тега input, например:

<input type="button" value="Здесьрезультат" onclick="alert(im)">

На рис. 3.12 приведен вид Web-страницы с кнопкой.

Рис. 3.12. Пример Web-страницы с кнопкой

Упражнение 4. Создать скрипт, который по двойному щелчку по кнопке с надписью «Кликни» на Web-странице выводит служебное окно с сообщением «Это был двойной клик».

Упражнение 5. Создать скрипт, который запрашивает у пользователя, от какого числа необходимо получить логарифм, и выводит служебное окно с результатом (использовать метод объекта Math).

Упражнение 6. Создать скрипт, который позволяет пользователю вводить два числа и выводить служебное окно с их произведением.

Упражнение 7. Создать скрипт, который при наведении мыши на надпись «Узнать сегодняшнюю дату» выводит служебное окно с результатом (для получения даты использовать метод Date()).

Если самостоятельно выполнить упражнения 4 – 7 сложно, то на рис. 3 приведен пример выполнения этих упражнений.

Рис. 3. Пример выполнения упражнений 4 - 7






Не нашли, что искали? Воспользуйтесь поиском:

vikidalka.ru - 2015-2024 год. Все права принадлежат их авторам! Нарушение авторских прав | Нарушение персональных данных