Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • Web Практическое 13

    Загружено:

    Ira Prunych
    12 просмотров2 страницы

    Авторское право

    © © All Rights Reserved

    Доступные форматы

    PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ

    Авторское право:

    © All Rights Reserved
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    12 просмотров2 страницы

    Web Практическое 13

    Загружено:

    Ira Prunych

    Авторское право:

    © All Rights Reserved
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 2

    Практическое занятие 13.

    Еще несколько обработчиков событий


    Команда onClick (на щелчок)
    Вы уже знаете, что onMouseOver запускает событие, если навести курсор на ссылку. Следовательно,
    щелкнув по ссылке, можно с таким же успехом запустить событие через onClick. Чтобы продемонстри-
    ровать действие команды, воспользуемся методом alert. Если вы сделали задание к прошлому
    практическому занятию, то знаете, что это такое. Вот еще раз его схема:

    alert('текст, который появится в окне')

    Таким образом, получаем:


    <a href="http://www.ukr.net" onClick="alert('Уже уходите?!');">
    Жмите сюда</a>

    Помните, что внутри одинарных кавычек нельзя употреблять слова с апострофами ', иначе браузер
    поймет их, как окончание текста, а это не входит в ваши намерения.

    Команда onFocus (на фокус)


    Это замечательная команда, которая вызывает действие, когда пользователь «фокусируется» на
    элементе страницы. Это годится для форм: флажков (checkbox) и текстовых полей (textbox).
    Вот пример:

    <form>
    <input type="text" size="30"
    onFocus="window.status='Текст в строке состояния';">
    </form>

    Команда onBlur (на потерю фокуса)


    Если можно сосредоточиться на объекте, значит, можно и «потерять фокус». оnBlur позволяет сооб-
    щить пользователю о том, что он изменил свой ответ. Этот обработчик не так часто используется, но
    вот вам пример. Внизу — строка для ввода текста, в которой уже что-то написано. Измените текст и
    уведите курсор, как если бы вы перешли к следующему предмету в списке.

    Здорово, а? Вы можете и сами догадаться, как это делается, но все равно вот вам код:
    <form>
    <input type="text" size="45" value="Впишите свое имя и щелкните по другой
    строке"
    onBlur="alert('Вы изменили ответ — уверены, что он правильный?');">
    </form>

    Команда onChange (на изменение)


    Действие этой команды очень похоже на действие предыдущей, onBlur. Ее главная задача — проверка.
    Когда мы ближе познакомимся с формами, это станет понятнее. Этот обработчик события проверяет,
    сделал ли пользователь то, что вы от него просили. Пример очень похож на предыдущий, но действует
    все-таки по-другому.

    <form>
    <input TYPE="text" size="45"
    value="Измените текст и щелкните по другой строке"
    onChange="window.status='Текст был изменен';">
    </form>

    Команда onSelect (на выделение)


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

    Команда onSubmit (на отправку)


    Это очень популярная команда. Она позволяет вызвать какое-либо действие, когда вы нажимаете
    кнопку Submit (отослать, отправить). Многим хочется, чтобы после того, как пользователь нажимает на
    кнопку, у него на экране появлялась страница с надписью: «Спасибо, что вы нам написали».

    Формат такой:
    <form>
    <input TYPE="submit"
    onSubmit="parent.location='thanksalot.html'";>
    </form>

    Поглядите, у нас новая команда. Схема как будто знакомая, но какая-то странная.
    parent.location — это стандартная схема ссылки на другую страницу. Можно подумать, что parent
    (источник) — это объект, а location (местонахождение) — метод. Неверно. В данном случае parent
    является свойством окна браузера, а location — объектом, который появится в этом окне. То есть для
    ясности просто имейте в виду, что parent.location='…' означает ссылку.

    Команды onLoad и onUnload (на вход и выход)


    Пока мы не приводим примера на эти команды, так как им отведено отдельное занятие.
    Обе они помещаются внутри строки HTML <BODY>. Они вызывают событие, когда страница
    открывается или закрывается. Эти команды потребуются Вам, когда мы возьмемся за функции.

    Ваше задание

    1. Законспектировать изложенный материал

    2. На этот раз вам предлагается создать сайт, содержащий форму, которая будет взаимодействовать
    с пользователем.

    Форма должна иметь три элемента:


     поле ввода с просьбой ввести имя;
     два поля для флажков с вопросом о том, что больше нравится пользователю, мороженое или
    шоколад;
     кнопку отправки данных на ваш электронный адрес.

    С каждым элементом должно произойти следующее:


     При вводе имени в строке состояния должны появиться слова: «Впишите сюда свое имя».
     При изменении имени должны появиться слова: «Вы уверены, что имя нужно изменить?».
     Два поля с флажками должны отослать в строку состояния слова: «Вы выбрали...» и
    выбор пользователя.
     При нажатии на кнопку отправки данных должно выскочить окно предупреждения,
    благодарящее пользователя за участие в опросе.

    Вам также может понравиться