ТОР 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 Не нашли, что искали? Воспользуйтесь поиском:
|