1. Ввод и вывод данных в JavaScript.

Вывод текста, данных на экран в JavaScript осуществляется при помощи двух операторов: Alert и Write.

Оператор Alert в JavaScript

Этот способ вывода текста (информации) в JavaScript характерен тем, что на экране браузера появляется небольшое окно с сообщением – его еще называют диалоговой панелью. Характерные черты панели – наличие кнопки Ok и текстовой информации.

Давайте рассмотрим пример вывода сообщения в JavaScript: Alert(‘Привет! Как дела?’)  // в диалоговой панели появится соответствующая надпись

Вот так просто с помощью оператора Alert в JavaScript мы можем производить вывод данных на экран (текста, картинки, сообщения).

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

Оператор Write в JavaScript

Данный метод предоставляется объектом document. Поэтому оператор вывода сообщений будет выглядеть так: document.write(‘Текстовая информация’). Текст будет отображаться не в диалоговой панели, а в окне браузера.

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

Пример форматирования: document.write(‘<h2><strong><i >Вот так форматируется текст</i></strong></h2>’)

Если сообщение большое, то его можно разделять на несколько подстрок при помощи символа +. document.write(‘Разделяем сообщение ‘ + ‘ символом +’)

Ввод данных в JavaScript

Для ввода данных в JavaScript можно использовать также два способа: вызов confirm или prompt. Оба метода, как и alert, работают с диалоговой панелью, но имеют различные задачи. Первый требует от пользователя лишь выбора одного из двух вариантов, а второй – в заполнении формы.

1. Оператор confirm в JavaScript

При использовании данного оператора пользователь увидит на экране диалоговую панель, содержащую какое-то сообщение, а чуть ниже – две кнопки – Ok и Cancel. Такой способ необходим в том случае, если программа нуждается в действии от пользователя – подтверждения или опровержения какой-то информации.

Давайте рассмотрим пример использования оператора confirm:

  1. if (confirm(‘Вы готовы перейти по ссылке?’))

  2. document.write(‘Переходим…’)

  3. else

  4. document.write(‘Переход по ссылке отменен’)

Скрипт работает так:

  • Выводит пользователю сообщение «Вы готовы перейти по ссылке?» и ждет его действий.

  • Если пользователь нажимает да (Ok), то программа выводит на экран сообщение «Переходим…».

  • Если пользователь нажимает отмена (cancel), то на экран выводится «Переход по ссылке отменен».

2. Оператор prompt в JavaScript

Этот оператор ждет от пользователя не только нажатия Ok или Cancel, а заполнения какой-либо формы. Пользователь увидит сообщение и строку, в которую он должен произойти ввод данных (даты, цифр, сообщения). Если он вводит данные и нажимает Ok, то метод prompt считывает содержимое строки и отдает переменной. В противном случае (при нажатии cancel) – переменная получает значение null.

Таким образом, данный метод имеет 2 параметра. Первый – это текст, объясняющий пользователю, что от него требуется. А второй – это значение, которое получит переменная, если пользователь нажмет (cancel).

Давайте разберем пример: var s // объявляем переменную с примитивом undefined

s=prompt(‘Введите свое имя’, ‘Имя не введено’) // два параметра оператора prompt

document.write(s) //вывод на экран значения переменной

studfile.net

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

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

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

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

<html>
    <head>
    </head>
    <body>
         <div>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.”;

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

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

Бывают случаи, когда клика недостаточно. Порой требуется более сложная вводимая информация, например строка или число. На этот случай существует инвертированный аналог функции 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 size=60>
<button>Submit</button><br>
<P><div></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 onKeyUp="userSubmit()" size=60><BR>
<P><div></div>

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

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

www.ossportal.ru

Как получить значение поля ввода текста с помощью JavaScript? — javascript

Существуют различные методы для получения значения входного текстового поля напрямую (без обертки элемента ввода внутри элемента формы):

Метод 1:

document.getElementById('textbox_id').value, чтобы получить значение желаемое поле

Например, document.getElementById("searchTxt").value;

 

Примечание: Метод 2,3,4 и 6 возвращает коллекцию элементов, поэтому используйте [whole_number], чтобы получить желаемое событие. Для первого элемента используйте [0], для второго используйте 1 и т.д….

Метод 2:

Использование document.getElementsByClassName('class_name')[whole_number].value, который возвращает Live HTMLCollection

Например, document.getElementsByClassName("searchField")[0].value;, если это первое текстовое поле на вашей странице.

Способ 3:

Используйте document.getElementsByTagName('tag_name')[whole_number].value, который также возвращает живой HTMLCollection

Например, document.getElementsByTagName("input")[0].value;, если это первое текстовое поле на вашей странице.

Способ 4:

document.getElementsByName('name')[whole_number].value, который также > возвращает живой NodeList

Например, document.getElementsByName("searchTxt")[0].value;, если это первое текстовое поле с названием «поиск текста» на вашей странице.

Метод 5:

Используйте мощный document.querySelector('selector').value, который использует селектор CSS для выбора элемента

Например, document.querySelector('#searchTxt').value;, выбранный id
document.querySelector('.searchField').value;, выбранный классом
         document.querySelector('input').value;, выбранный тэгом
        document.querySelector('[name="searchTxt"]').value;, выбранный по имени

Метод 6:

document.querySelectorAll('selector')[whole_number].value, который также использует селектор CSS для выбора элементов, но возвращает все элементы с этим селектором как статический ноделист.

Например, document.querySelectorAll('#searchTxt')[0].value;, выбранный id
 document.querySelectorAll('.searchField')[0].value; выбранный классом
  document.querySelectorAll('input')[0].value;, выбранный тэгом
 document.querySelectorAll('[name="searchTxt"]')[0].value;, выбранный по имени

Поддержка

Browser          Method1   Method2  Method3  Method4    Method5/6
IE6              Y(Buggy)   N        Y        Y(Buggy)   N
IE7              Y(Buggy)   N        Y        Y(Buggy)   N
IE8              Y          N        Y        Y(Buggy)   Y
IE9              Y          Y        Y        Y(Buggy)   Y
IE10             Y          Y        Y        Y          Y
FF3.0            Y          Y        Y        Y          N    IE=Internet Explorer
FF3.5/FF3.6      Y          Y        Y        Y          Y    FF=Mozilla Firefox
FF4b1            Y          Y        Y        Y          Y    GC=Google Chrome
GC4/GC5          Y          Y        Y        Y          Y    Y=YES,N=NO
Safari4/Safari5  Y          Y        Y        Y          Y
Opera10.10/
Opera10.53/      Y          Y        Y        Y(Buggy)   Y
Opera10.60
Opera 12         Y          Y        Y        Y          Y

Полезные ссылки

qaru.site

No related posts.