Переменные в 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));
Взаимодействие с пользователем: alert, prompt, confirm
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице https://learn.javascript.ru/alert-prompt-confirm.
В этом разделе мы рассмотрим базовые UI операции: alert , prompt и confirm , которые позволяют работать с данными, полученными от пользователя.
alert
alert выводит на экран окно с сообщением и приостанавливает выполнение скрипта, пока пользователь не нажмёт «ОК».
Окно сообщения, которое выводится, является модальным окном. Слово «модальное» означает, что посетитель не может взаимодействовать со страницей, нажимать другие кнопки и т.п., пока не разберётся с окном. В данном случае – пока не нажмёт на «OK».
prompt
Функция prompt принимает два аргумента:
Она выводит модальное окно с заголовком title , полем для ввода текста, заполненным строкой по умолчанию default и кнопками OK/CANCEL.
Пользователь должен либо что-то ввести и нажать OK, либо отменить ввод кликом на CANCEL или нажатием Esc на клавиатуре.
Вызов prompt возвращает то, что ввёл посетитель – строку или специальное значение null , если ввод отменён.
Единственный браузер, который не возвращает null при отмене ввода – это Safari. При отсутствии ввода он возвращает пустую строку. Предположительно, это ошибка в браузере.
Если нам важен этот браузер, то пустую строку нужно обрабатывать точно так же, как и null , т.е. считать отменой ввода.
Как и в случае с alert , окно prompt модальное.
Второй параметр может отсутствовать. Однако при этом IE вставит в диалог значение по умолчанию "undefined" .
Запустите этот код в IE, чтобы понять о чём речь:
Поэтому рекомендуется всегда указывать второй аргумент:
confirm
confirm выводит окно с вопросом question с двумя кнопками: OK и CANCEL.
Результатом будет true при нажатии OK и false – при CANCEL( Esc ).
Особенности встроенных функций
Конкретное место, где выводится модальное окно с вопросом – обычно это центр браузера, и внешний вид окна выбирает браузер. Разработчик не может на это влиять.
С одной стороны – это недостаток, так как нельзя вывести окно в своём, особо красивом, дизайне.
С другой стороны, преимущество этих функций по сравнению с другими, более сложными методами взаимодействия, которые мы изучим в дальнейшем – как раз в том, что они очень просты.
Это самый простой способ вывести сообщение или получить информацию от посетителя. Поэтому их используют в тех случаях, когда простота важна, а всякие «красивости» особой роли не играют.
Ввод/вывод данных JavaScript
В JavaScript реализовано 3 метода, позволяющие выводить пользователю диалоговые окна: alert, confirm, prompt.
Особенности методов alert, confirm, prompt: Конкретное место, где выводится модальное окно – обычно это центр браузера, и внешний вид окна выбирает браузер. Разработчик не может на это влиять. Нельзя вывести окно в своем, особо красивом, дизайне. Но это самый простой способ вывести сообщение или получить информацию от посетителя. Поэтому их используют в тех случаях, когда простота важна, а всякие «красивости» особой роли не играют.
Диалоговое окно метод alert
Метод alert используется для вывода простейшего диалогового окна, содержащего текст сообщения и единственную кнопку "Ok". Формат вызова данной функции:
Диалоговое окно метод confirm
Функция confirm позволяет вывести пользователю диалоговое окно, содержащее текст сообщения и кнопки "Ok" и "Cancel". Используется в тех случаях, когда пользователь должен сделать выбор. Формат вызова данной функции:
Функция confirm возвращает логическое значение в зависимости от нажатой пользователем кнопки: "Ok" соответствует значению true, "Cancel" — значению false. Как правило, результат работы функции присваивают переменной, для дальнейшего анализа, как это показано в примере выше.
Диалоговое окно метод prompt
Функция prompt позволяет вывести пользователю диалоговое окно запроса на ввод данных. Используется в тех случаях, когда пользователь должен ввести строку текста. Формат вызова данной функции:
Необходимо помнить, что функция prompt возвращает результат строкового типа. Поэтому, прежде чем его использовать в арифметических выражениях, необходимо выполнить преобразование типов к числовому. Это можно сделать при помощи следующих функций:
Однако, преобразование строки в число можно осуществить не во всех случаях. Поэтому, чтобы избавить себя от потенциальной ошибки, необходимо сначала проверить — можно ли выполнить такое преобразование. Для этих целей используется функция isNaN(строка). Данная функция возвращает истину, если строка не может быть преобразована в число, и ложь в противном случае.
Шпаргалка по JavaScript №3 — Ввод информации.
В этой статье рассмотрены различные методы ввода информации. Стоит уточнить, что клик мыши – это тоже вводимая информация, поэтому именно с него мы и начнем.
Первый вариант ввода информации (событие onClick).
Ввод информации несколько сложнее вывода. Но лишь немного. Такое осложнение вызвано лишь большим спектром способов осуществления ввода. Самый простой для нас способ – клик мыши.
Все в HTML имеет id, и кроме того, имеет события, которые срабатывают при различном взаимодействии с объектом (клик мыши, нажатие кнопки на клавиатуре, двойной клик, удерживание кнопки на клавиатуре и так далее). Нас интересует событие “onClick”. Рассмотрим пример:
Некоторые пользователю отключают обработку кода JavaScript в своих браузерах. Также поисковые системы (Google, Yahoo и другие) не принимают его во внимание. Чтобы не отображать “ничего”(или для предоставления поисковикам “пищи” для поиска) при отсутствии поддержки кода JavaScript, используется именно описанная выше конструкция.
При выполнении этого скрипта будет происходить следующая последовательность действий (перерисовка будет осуществляться настолько быстро, что пользователь увидит только конечный результат):
Будет выведен текст “Users without Javascript see this.”;
Если в браузере отключено выполнение JavaScript, то обработка страницы завершается;
Прежде выведенный текст заменяется на “Hello World!”;
Ожидание клика по надписи;
В случае клика по надписи вызывается функция goodbyeWorld(). В результате ее выполнения выведенный ранее текст заменится на “Googbay World!”.
Второй вариант ввода информации (функция prompt).
Бывают случаи, когда клика недостаточно. Порой требуется более сложная вводимая информация, например строка или число. На этот случай существует инвертированный аналог функции alert(string) – prompt(stringTitle, stringText). Использование этой функции считается довольно дурным тоном, но может значительно помочь при отладке написанного кода. Первый параметр функции отвечает за выводимое сообщение, второй – за значение, которое по-умолчанию отображается в строке ввода (этот параметр можно опустить). Следующий пример все легко разъяснит:
После утверждения ответа пользователем введенная информация сохранится в переменной “answer”.
Третий вариант ввода информации (пользовательский ввод).
Предыдущий метод с вызовом всплывающего окна всем хорош, но, как было замечано, сильно раздражает пользователей своей назойливостью, так как сайт будет полностью заблокирован, пока не будет введена необходимая информация.
Для создания поля ввода и кнопки подтверждения ввода используйте следующий код HTML:
Этот блок надо поместить между тэгами <body> и </body>. При выполнении этого кода на экране появится строка для ввода длиной в 60 символов (ее id равен “userInput”), кнопка с надписью “Submit”, при нажатии на которую будет вызвана функция userSubmit(), и пустой абзай с id равным “result”.
Теперь припишем следующий код, который заставит страницу ожить:
При нажатии на кнопку, пустой абзац будет отображать только что введенный текст. Здесь происходить следующая последовательность действий:
В переменную UI записывается значение поля ввода “userInput”;
В абзац “result” записывается текст “You typed: ” плюс содержимое переменной UI (то есть то, что находится сейчас в поле ввода “userInput”).
Можно пойти дальше и отказаться от кнопки “Submit”, для этого замените первый введенный блок кода HTML на следующий:
Теперь текст будет появляться на экране непосредственно после ввода новой буквы в поле ввода “userInput”. Попробуйте сами и убедитесь как легко, изящно и красиво работает JavaScript в связке с HTML.
Мы уже научились осуществлять ввод и вывод информации. Узнали о существующих событиях, таких как onClick и onKeyUp. Подробней о всех событиях читайте в следующей статье “Шпаргалка по JavaScript №4 – События HTML”.