Переменные в 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: Конкретное место, где выводится модальное окно – обычно это центр браузера, и внешний вид окна выбирает браузер. Разработчик не может на это влиять. Нельзя вывести окно в своем, особо красивом, дизайне. Но это самый простой способ вывести сообщение или получить информацию от посетителя. Поэтому их используют в тех случаях, когда простота важна, а всякие «красивости» особой роли не играют.
Диалоговое окно метод alert
Метод alert используется для вывода простейшего диалогового окна, содержащего текст сообщения и единственную кнопку "Ok". Формат вызова данной функции:
Диалоговое окно метод confirm
Функция confirm позволяет вывести пользователю диалоговое окно, содержащее текст сообщения и кнопки "Ok" и "Cancel". Используется в тех случаях, когда пользователь должен сделать выбор. Формат вызова данной функции:
Функция confirm возвращает логическое значение в зависимости от нажатой пользователем кнопки: "Ok" соответствует значению true, "Cancel" — значению false. Как правило, результат работы функции присваивают переменной, для дальнейшего анализа, как это показано в примере выше.
Диалоговое окно метод prompt
Функция prompt позволяет вывести пользователю диалоговое окно запроса на ввод данных. Используется в тех случаях, когда пользователь должен ввести строку текста. Формат вызова данной функции:
Необходимо помнить, что функция prompt возвращает результат строкового типа. Поэтому, прежде чем его использовать в арифметических выражениях, необходимо выполнить преобразование типов к числовому. Это можно сделать при помощи следующих функций:
Однако, преобразование строки в число можно осуществить не во всех случаях. Поэтому, чтобы избавить себя от потенциальной ошибки, необходимо сначала проверить — можно ли выполнить такое преобразование. Для этих целей используется функция isNaN(строка). Данная функция возвращает истину, если строка не может быть преобразована в число, и ложь в противном случае.
Window: prompt() method
window.prompt() instructs the browser to display a dialog with an optional message prompting the user to input some text, and to wait until the user either submits the text or cancels the dialog.
Under some conditions — for example, when the user switches tabs — the browser may not actually display a dialog, or may not wait for the user to submit text or to cancel the dialog.
Syntax
Parameters
A string of text to display to the user. Can be omitted if there is nothing to show in the prompt window.
A string containing the default value displayed in the text input field.
Return value
A string containing the text entered by the user, or null .
Examples
When the user clicks the OK button, text entered in the input field is returned. If the user clicks OK without entering any text, an empty string is returned. If the user clicks the Cancel button, this function returns null .
The above prompt appears as follows (in Chrome on macOS):
Notes
A prompt dialog contains a single-line textbox, a Cancel button, and an OK button, and returns the (possibly empty) text the user entered into that textbox.
Please note that result is a string. That means you should sometimes cast the value given by the user. For example, if their answer should be a Number, you should cast the value to Number.
Dialog boxes are modal windows; they prevent the user from accessing the rest of the program’s interface until the dialog box is closed. For this reason, you should not overuse any function that creates a dialog box (or modal window).
Шпаргалка по 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”.