Написание простой программы JavaScript
«Hello, World!» – классический пример простой программы. Эта простейшая программа помогает новичкам понять, как работает язык программирования, а опытным разработчикам – убедиться, что окружение функционирует должным образом.
Данный мануал научит создавать эту программу в JavaScript. Кроме того, вы узнаете, как немного усложнить программу: научить ее запрашивать имя пользователя и затем применять его в приветствии.
Требования
Выполнить мануал можно с помощью консоли разработчика JavaScript в браузере. Прежде рекомендуем ознакомиться с руководством Использование консоли разработчика JavaScript.
1: Написание программы «Hello, World!»
Для начала откройте в браузере консоль JavaScript.
Написать программу «Hello, World!» можно двумя способами: с помощью метода alert() и с помощью метода console.log().
Метод alert()
Метод alert() выведет окно предупреждения с заданным текстом поверх текущей страницы. В данном случае это будет фраза «Hello, World!». Чтобы закрыть предупреждение, нужно будет нажать Ок.
В качестве параметра методу нужно передать строку. Этой строкой будет последовательность символов Hello, World!.
Читайте также: Работа со строками в JavaScript
Поместите строку в круглые скобки метода alert() и поставьте в конце точку с запятой:
alert("Hello, World!");
Читайте также: Синтаксис и структура кода JavaScript
Нажмите Enter, и на экране появится всплывающее окно с фразой «Hello, World!».
Консоль также выведет результат вычисления выражения: вы увидите undefined, если выражение не возвращает явный результат.
Всплывающие предупреждения позволяют проверить работу, но их нужно постоянно закрывать. Давайте попробуем создать ту же самую программу с помощью метода console.log().
Метод console.log()
Метод console.log() имитирует работу с языком программирования в терминале.
Как и в случае с методом alert(), строка «Hello, World!» будет передана методу console.log() в качестве параметра.
console.log("Hello, World!");
Нажав ENTER, вы увидите в консоли строку:
Hello, World!
Теперь попробуйте добавить в программу немного интерактива.
2: Запрос пользовательского ввода
На данный момент программа «Hello, World!» выдает один и тот же результат. Ее можно немного усложнить. К примеру, она может запрашивать имя пользователя, а затем использовать полученные данные в приветствии.
Для этого нужно добавить к любому из перечисленных выше методов одну строку. Для запроса входных данных используется метод prompt(). Передайте ему параметр “What is your name?”, чтобы предложить пользователю ввести свое имя. Не забудьте про точку с запятой в конце.
let name = prompt("What is your name?");
Нажмите Enter, и на экране появится окно запроса.
Диалоговое окно содержит текстовое поле для ввода. Введя значение в текстовое поле, пользователь должен нажать кнопку ОК, чтобы сохранить значение. Пользователь также может отменить запрос значения, нажав кнопку Cancel.
Метод prompt() нужно использовать только тогда, когда это имеет смысл в контексте программы, поскольку чрезмерное количество всплывающих окон может стать утомительным для пользователей.
Введите свое имя в поле. Например, 8host.
Программа сохранит это значение в переменной name и сможет использовать его в дальнейшем.
Вывод приветствия с помощью alert()
Метод alert() выведет всплывающее окно с приветствием поверх текущей страницы браузера.
Теперь нужно использовать конкатенацию строк и объединить строку “Hello, ” с именем пользователя.
Это делается так:
"Hello, " + name + "!"
Читайте также: Работа со строками в JavaScript
Эта строка объединяет две строки («Hello, » и «!») и вставляет между ними значение переменной name. Используйте вышеприведенную строку кода в качестве параметра метода alert(). Введите в консоль:
alert("Hello, " + name + "!");
На экране появится всплывающее окно с фразой «Hello, 8host!».
Вывод приветствия с помощью console.log()
Метод console.log() выведет приветствие в консоль. Этот метод работает аналогично методу print() в Python.
Используйте конкатенацию, как было показано ранее:
"Hello, " + name + "!"
Поместите этот код в круглые скобки метода console.log() и введите полученную строку в консоль:
console.log(“Hello, ” + name + “!”);
Нажмите Enter, и в консоли появится вывод:
Hello, 8host!
Теперь вы умеете добавлять в программу функцию запроса пользовательского ввода, который будет использован в дальнейшем.
Заключение
Вы знаете, как написать классическую программу «Hello, World!», запросить пользовательские данные и отобразить их в выводе. Теперь вы можете продолжить работу над своей программой и усложнить ее. Например, запросите любимый цвет пользователя и попросите программу сказать, что ее любимый цвет красный. Можно даже попробовать использовать эту технику для создания программы Mad Lib.
Tags: Javascript