Вступление
Программа «Здравствуй, мир!» - это классическая и проверенная временем традиция в компьютерном программировании. Это короткая и полная первая программа для начинающих, и это хороший способ убедиться, что ваша среда правильно настроена.
Этот учебник проведет вас через создание этой программы на JavaScript. Однако, чтобы сделать программу более интересной, мы изменим традиционную программу «Hello, World!», Чтобы она запрашивала у пользователя его имя. Затем мы будем использовать имя в приветствии. Когда вы закончите с этим учебником, у вас появится интерактивная программа «Здравствуй, мир!».
Предпосылки
Вы можете выполнить это руководство, используя консоль разработчика JavaScript в своем веб-браузере. Перед началом этого урока, вы должны быть знакомы с работой с этим инструментом. Чтобы узнать больше об этом, вы можете прочитать наш учебник «https://www.digitalocean.com/community/tutorials/how-to-use-the-javascript-developer-console[How To Use JavaScript Developer Console]».
[[creating-the-“hello-world-”-program]] === Создание программы «Здравствуй, мир!»
Чтобы написать программу «Hello, World!», Сначала откройте консоль JavaScript предпочитаемого веб-браузера.
Существует два основных способа создания программы «Hello, World!» На JavaScript с помощью метода + alert () + и метода + console.log () +.
Использование + alert () +
Первый способ, которым мы можем написать эту программу, это использовать метод + alert () +, который отобразит окно предупреждения над вашим текущим окном с указанным сообщением (в данном случае это будет «Hello, World!»). ) и кнопку + OK +, которая позволит пользователю закрыть предупреждение.
В рамках метода мы передадим тип данных string в качестве параметра. Эта строка будет установлена в значение + Hello, World! +, Так что это значение будет напечатано в окне предупреждения.
Чтобы написать этот первый стиль программы «Hello, World!», Мы заключим строку в скобки метода + alert () +. Мы закончим нашу инструкцию JavaScript с помощью semicolon.
alert("Hello, World!");Как только вы нажмете клавишу + ENTER + после строки JavaScript, вы должны увидеть следующее предупреждение в вашем браузере:
изображение: https: //assets.digitalocean.com/articles/eng_javascript/js-console/javascript-alert.png [Пример предупреждения консоли JavaScript]
Консоль также напечатает результат вычисления выражения, который будет читаться как + undefined +, когда выражение явно что-то не возвращает.
Всплывающие оповещения могут быть утомительными, чтобы продолжать щелкать, поэтому давайте рассмотрим, как создать ту же программу, зарегистрировав ее на консоли с помощью + console.log () +.
Использование + console.log () +
Мы можем вывести ту же строку, кроме этого времени, на консоль JavaScript, используя метод + console.log () +. Использование этой опции аналогично работе с языком программирования в терминальной среде вашего компьютера.
Как и в случае с + alert () +, мы передадим строку " Hello, World! " Методу + console.log () + в скобках. Мы закончим наше утверждение точкой с запятой, как это типично для соглашений о синтаксисе JavaScript.
console.log("Hello, World!");Как только мы нажмем + ENTER +, сообщение + Hello, World! + Будет напечатано на консоли:
OutputHello, World!В следующем разделе мы рассмотрим, как сделать эту программу более интерактивной для пользователя.
Подсказка для ввода
Каждый раз, когда мы запускаем нашу существующую программу «Hello, World!», Она выдает один и тот же результат. Давайте подскажем человеку, управляющему нашей программой, свое имя. Затем мы можем использовать это имя для настройки вывода.
Для каждого из наших методов JavaScript, которые мы использовали выше, мы можем начать с одной строки, запрашивающей ввод. Мы будем использовать JavaScript + prompt () + метод и передадим ему строку « Как тебя зовут? », Чтобы спросить у пользователя его имя. Вводимые пользователем данные будут сохранены в variable + name +. Мы закончим наше выражение точкой с запятой.
let name = prompt("What is your name?");Когда вы нажмете + ENTER + для запуска этой строки кода, вы получите всплывающее приглашение:
изображение: https: //assets.digitalocean.com/articles/eng_javascript/hello-world/js-prompt.png [Пример подсказки JavaScript]
Диалоговое окно, которое всплывает над окном вашего веб-браузера, включает в себя текстовое поле для ввода пользователем ввода. Как только пользователь введет значение в текстовое поле, ему нужно будет нажать «+ OK » для сохранения значения. Пользователь также может запретить запись значения, нажав кнопку « Отмена +».
Важно использовать метод JavaScript + prompt () + только тогда, когда он имеет смысл в контексте программы, так как чрезмерное его использование может стать утомительным для пользователя.
На этом этапе введите имя, которое вы хотите, чтобы программа приветствовала. В этом примере мы будем использовать имя + Sammy +.
Теперь, когда мы собрали значение имени пользователя, мы можем перейти к использованию этого значения, чтобы приветствовать пользователя.
Приветствие пользователя с помощью + alert () +
Как обсуждалось выше, метод + alert () + создает всплывающее окно над окном браузера. Мы можем использовать этот метод, чтобы приветствовать пользователя, используя переменную + name +.
Мы будем использовать string stringtenation, чтобы написать приветствие «Hello!», Которое обращается к пользователю напрямую. Итак, давайте объединим строку + Hello + с переменной для имени:
"Hello, " + name + "!"Мы объединили две строки: " Hello, " и "! " С переменной + name + между ними. Теперь мы можем передать это выражение в метод + alert () +.
alert("Hello, " + name + "!");Как только мы нажмем + ENTER + здесь, мы получим следующее диалоговое окно на экране:
изображение: https: //assets.digitalocean.com/articles/eng_javascript/hello-world/prompt-output.png [Вывод подсказки JavaScript]
В этом случае имя пользователя - Сэмми, поэтому вывод приветствовал Сэмми.
Теперь давайте перепишем это так, чтобы вывод выводился на консоль.
Приветствие Пользователя с помощью + console.log () +
Как мы видели в предыдущем разделе, метод + console.log () + печатает вывод на консоль, так же как функция + print () + может выводить вывод на терминал в Python.
Мы будем использовать ту же составную строку, что и в методе + alert () +, который объединяет строки " Hello, " и "! " С переменной + name + :
"Hello, " + name + "!"Все это выражение будет помещено в круглые скобки метода + console.log () +, чтобы в качестве вывода мы получили приветствие.
console.log("Hello, " + name + "!");Для пользователя с именем Sammy вывод на консоль будет следующим:
OutputHello, Sammy!Теперь у вас есть программа на JavaScript, которая принимает данные от пользователя и выводит их обратно на экран.
Заключение
Теперь, когда вы знаете, как написать классическую программу «Hello, World!», А также попросить пользователя ввести данные и отобразить их в качестве выходных данных, вы можете работать над расширением своей программы. Например, попросите любимый цвет пользователя и попросите программу сказать, что его любимый цвет - красный. Вы можете даже попытаться использовать эту же технику для создания программы Mad Lib.