Функции ввода вывода javascript

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

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

Оператор Alert в JavaScript

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

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

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

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

Оператор Write в JavaScript

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

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

Пример форматирования: document.write(‘

Вот так форматируется текст

‘)

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

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

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

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

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

1. if (confirm(‘Вы готовы перейти по ссылке?’))
2. document.write(‘Переходим…’)
3. else
4. document.write(‘Переход по ссылке отменен’)

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

Источник

Переменные в JavaScript. Ввод и вывод информации в JavaScript

Чтобы обрабатывать информацию в JavaScript, используются переменные. С помощью переменных в JavaScript можно получать информацию от пользователя, изменять её и выводить на веб страницу. Чтобы задать переменную в JavaScript используется конструкция
let имя переменной = начальное значение;
Пример числовой переменной в JavaScript
let a = 5;
Пример строковой переменной в JS
let name = «Иван»;
Чтобы поменять значение переменной в JavaScript используется конструкция
имя переменной = значение;
Над числовыми переменными в JavaScript можно применять следующие операции:
+ — сложение
— — вычитание
/ — деление
* — умножение
% — остаток от деления
** — возведение в степень
++ — инкремент
— — декремент
Пример арифметической операции в JS
let a=4;
let b=2;
let c;
c = a+b;

Вывод информации на веб страницу с помощью JavaScript

Чтобы вывести информацию на веб страницу с помощью JavaScript, можно использовать модальное окно alert
alert(информация);
Для вывода значения переменной в JavaScript используется конструкция
alert(переменная);
Для вывода текста в JS используется конструкция
alert(«Текст»);

Код всех примеров необходимо сохранять в файл с расширением js и вызывать этот файл внутри html страницы. Подробнее о вызове javascript в html страницах Пример вывода значения переменной в JavaScript
let a=4;
let b=2;
let c;
c = a+b;
alert(c);

Для вывода текста и значения переменной в JS используется конструкция
alert(‘Текст’+(переменная));
Пример вывода текста и значения переменной в JavaScript
let a=4;
let b=2;
let c;
c = a+b;
alert(‘Сумма ‘+(a)+’+’+(b)+’=’+(c));

Для вывода информации в виде текста в JavaScript используется команда
document.write(информация);
Пример вывода информации в виде текста в JavaScript
let a=4;
let b=2;
let c;
c = a+b;
document.write(‘Сумма ‘+(a)+’+’+(b)+’=’+(c));

Ввод информации в JavaScript

Для ввода информации в JS используется окно ввода информации prompt
переменная= prompt(‘Текст’);
Пример ввода информации в JavaScript
let a=prompt(‘Введите ваше имя’);
let b=prompt(‘Введите ваш возраст’);
document.write(‘Здраствуйте, ‘+(a)+’, вам ‘+(b)+’ лет’);

Часто на веб страницах необходимо ввести числовое значение. Чтобы ввести числовое значение в JavaScript используется следующая конструкция.
переменная = Number(prompt(‘Текст’));
Пример ввода числовых значений в JavaScript
let a=Number(prompt(‘Введите первое число’));
let b=Number(prompt(‘Введите второе число’));
let c;
c = a+b;
document.write(‘Сумма ‘+(a)+’+’+(b)+’=’+(c));

Источник

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

В JavaScript реализовано 3 метода, позволяющие выводить пользователю диалоговые окна: alert, confirm, prompt.

Особенности методов alert, confirm, prompt: Конкретное место, где выводится модальное окно – обычно это центр браузера, и внешний вид окна выбирает браузер. Разработчик не может на это влиять. Нельзя вывести окно в своем, особо красивом, дизайне. Но это самый простой способ вывести сообщение или получить информацию от посетителя. Поэтому их используют в тех случаях, когда простота важна, а всякие «красивости» особой роли не играют.

prompt — выводит сообщение и ждёт, пока пользователь введёт текст, а затем возвращает введённое значение или null, если ввод отменён (CANCEL/Esc).

confirm — выводит сообщение и ждёт, пока пользователь нажмёт «OK» или «CANCEL» и возвращает true/false.

Диалоговое окно метод alert

Метод alert используется для вывода простейшего диалогового окна, содержащего текст сообщения и единственную кнопку «Ok». Формат вызова данной функции:

Диалоговое окно метод confirm

Функция confirm позволяет вывести пользователю диалоговое окно, содержащее текст сообщения и кнопки «Ok» и «Cancel». Используется в тех случаях, когда пользователь должен сделать выбор. Формат вызова данной функции:

var result=confirm("Текст вопроса"); //условная конструкция для проверки результата if(result) < /* действия */ >else < /* действия */ >

Функция confirm возвращает логическое значение в зависимости от нажатой пользователем кнопки: «Ok» соответствует значению true, «Cancel» — значению false. Как правило, результат работы функции присваивают переменной, для дальнейшего анализа, как это показано в примере выше.

Диалоговое окно метод prompt

Функция prompt позволяет вывести пользователю диалоговое окно запроса на ввод данных. Используется в тех случаях, когда пользователь должен ввести строку текста. Формат вызова данной функции:

var str=prompt("Запрос на ввод данных", значение_по_умолчанию);

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

parseInt("строка") - преобразует строку в целое число; parseFloat("строка") - преобразует строку в число с плавающей точкой.

Однако, преобразование строки в число можно осуществить не во всех случаях. Поэтому, чтобы избавить себя от потенциальной ошибки, необходимо сначала проверить — можно ли выполнить такое преобразование. Для этих целей используется функция isNaN(строка). Данная функция возвращает истину, если строка не может быть преобразована в число, и ложь в противном случае.

html> body> script type="text/javascript"> var number, summ=0; do < number=parseInt(prompt("Введите число:", 10)); summ+=number; >while(confirm("Продолжим?")) alert("Сумма чисел: "+summ); /script> /body> /html>

При нажатии на кнопку появляется форма для ввода. Если пользователь ничего не ввел — действие по умолчанию отменяется.

input type="submit" name="submit" value="payment" style="margin-left:30px" onclick=" var mcount=prompt('Amount of payment', 10); if (mcount) alert('You enter: '+mcount); else return false; "/>

Источник

Взаимодействие с пользователем: alert, prompt, confirm

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/alert-prompt-confirm.

В этом разделе мы рассмотрим базовые UI операции: alert , prompt и confirm , которые позволяют работать с данными, полученными от пользователя.

alert

alert выводит на экран окно с сообщением и приостанавливает выполнение скрипта, пока пользователь не нажмёт «ОК».

Окно сообщения, которое выводится, является модальным окном. Слово «модальное» означает, что посетитель не может взаимодействовать со страницей, нажимать другие кнопки и т.п., пока не разберётся с окном. В данном случае – пока не нажмёт на «OK».

prompt

Функция prompt принимает два аргумента:

result = prompt(title, default);

Она выводит модальное окно с заголовком title , полем для ввода текста, заполненным строкой по умолчанию default и кнопками OK/CANCEL.

Пользователь должен либо что-то ввести и нажать OK, либо отменить ввод кликом на CANCEL или нажатием Esc на клавиатуре.

Вызов prompt возвращает то, что ввёл посетитель – строку или специальное значение null , если ввод отменён.

Единственный браузер, который не возвращает null при отмене ввода – это Safari. При отсутствии ввода он возвращает пустую строку. Предположительно, это ошибка в браузере.

Если нам важен этот браузер, то пустую строку нужно обрабатывать точно так же, как и null , т.е. считать отменой ввода.

Как и в случае с alert , окно prompt модальное.

var years = prompt('Сколько вам лет?', 100); alert('Вам ' + years + ' лет!')

Второй параметр может отсутствовать. Однако при этом IE вставит в диалог значение по умолчанию «undefined» .

Запустите этот код в IE, чтобы понять о чём речь:

Поэтому рекомендуется всегда указывать второй аргумент:

confirm

confirm выводит окно с вопросом question с двумя кнопками: OK и CANCEL.

Результатом будет true при нажатии OK и false – при CANCEL( Esc ).

var isAdmin = confirm("Вы - администратор?"); alert( isAdmin );

Особенности встроенных функций

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

С одной стороны – это недостаток, так как нельзя вывести окно в своём, особо красивом, дизайне.

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

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

Резюме

• alert выводит сообщение.
• prompt выводит сообщение и ждёт, пока пользователь введёт текст, а затем возвращает введённое значение или null , если ввод отменён (CANCEL/ Esc ).
• confirm выводит сообщение и ждёт, пока пользователь нажмёт «OK» или «CANCEL» и возвращает true/false .

Источник