Шпаргалка по JavaScript №3 - Ввод информации.

Опубликовано maxpestun, 25 Ноя 2010

В этой статье рассмотрены различные методы ввода информации. Стоит уточнить, что клик мыши – это тоже вводимая информация, поэтому именно с него мы и начнем.

Первый вариант ввода информации (событие onClick).

Ввод информации несколько сложнее вывода. Но лишь немного. Такое осложнение вызвано лишь большим спектром способов осуществления ввода. Самый простой для нас способ – клик мыши.

Все в HTML имеет id, и кроме того, имеет события, которые срабатывают при различном взаимодействии с объектом (клик мыши, нажатие кнопки на клавиатуре, двойной клик, удерживание кнопки на клавиатуре и так далее). Нас интересует событие “onClick”. Рассмотрим пример:

<html>
    <head>
    </head>
    <body>
         <div id='feedback' onClick='goodbyeWorld()'>Users without Javascript see this.
         </div>
         <script type='text/javascript'>
             document.getElementById('feedback').innerHTML='Hello World!';
             function goodbyeWorld() {
                 document.getElementById('feedback').innerHTML='Goodbye World!';
             }
         </script>
    </body>
</html>

Некоторые пользователю отключают обработку кода JavaScript в своих браузерах. Также поисковые системы (Google, Yahoo и другие) не принимают его во внимание. Чтобы не отображать “ничего”(или для предоставления поисковикам “пищи” для поиска) при отсутствии поддержки кода JavaScript, используется именно описанная выше конструкция.

При выполнении этого скрипта будет происходить следующая последовательность действий (перерисовка будет осуществляться настолько быстро, что пользователь увидит только конечный результат):

  • Будет выведен текст “Users without Javascript see this.”;

    • Если в браузере отключено выполнение JavaScript, то обработка страницы завершается;

  • Прежде выведенный текст заменяется на “Hello World!”;

  • Ожидание клика по надписи;

    • В случае клика по надписи вызывается функция goodbyeWorld(). В результате ее выполнения выведенный ранее текст заменится на “Googbay World!”.

Второй вариант ввода информации (функция prompt).

Бывают случаи, когда клика недостаточно. Порой требуется более сложная вводимая информация, например строка или число. На этот случай существует инвертированный аналог функции alert(string) – prompt(stringTitle, stringText). Использование этой функции считается довольно дурным тоном, но может значительно помочь при отладке написанного кода. Первый параметр функции отвечает за выводимое сообщение, второй – за значение, которое по-умолчанию отображается в строке ввода (этот параметр можно опустить). Следующий пример все легко разъяснит:

<html>
    <head>
    </head>
    <body>
        <script type='text/javascript'>
            answer = prompt('Enter your greating', 'Hello World!');
        </script>
    </body>
</html>

После утверждения ответа пользователем введенная информация сохранится в переменной “answer”.

Третий вариант ввода информации (пользовательский ввод).

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

Для создания поля ввода и кнопки подтверждения ввода используйте следующий код HTML:

<input id='userInput' size=60>
<button onClick='userSubmit()'>Submit</button><br>
<P><div id='result'></div>

Этот блок надо поместить между тэгами <body> и </body>. При выполнении этого кода на экране появится строка для ввода длиной в 60 символов (ее id равен “userInput”), кнопка с надписью “Submit”, при нажатии на которую будет вызвана функция userSubmit(), и пустой абзай с id равным “result”.

Теперь припишем следующий код, который заставит страницу ожить:

<script type='text/javascript'>
    function userSubmit() {
        var UI=document.getElementById('userInput').value;
        document.getElementById('result').innerHTML='You typed: '+UI;
    }
</script>

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

  • В переменную UI записывается значение поля ввода “userInput”;

  • В абзац “result” записывается текст “You typed: ” плюс содержимое переменной UI (то есть то, что находится сейчас в поле ввода “userInput”).

Можно пойти дальше и отказаться от кнопки “Submit”, для этого замените первый введенный блок кода HTML на следующий:

<input id='userInput' onKeyUp="userSubmit()" size=60><BR>
<P><div id='result'></div>

Теперь текст будет появляться на экране непосредственно после ввода новой буквы в поле ввода “userInput”. Попробуйте сами и убедитесь как легко, изящно и красиво работает JavaScript в связке с HTML.

Итог.

Мы уже научились осуществлять ввод и вывод информации. Узнали о существующих событиях, таких как onClick и onKeyUp. Подробней о всех событиях читайте в следующей статье “Шпаргалка по JavaScript №4 – События HTML”.

2075
  • maxpestun's блог