Поиск по сайту:

Как написать свою первую программу на JavaScript


Введение

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

Этот учебник проведет вас через создание этой программы на JavaScript. Однако, чтобы сделать программу более интересной, мы изменим традиционное «Hello, World!» программа, чтобы она спрашивала у пользователя его имя. Затем мы будем использовать это имя в приветствии. программа.

Предпосылки

Вы можете выполнить это руководство, используя консоль разработчика JavaScript в своем веб-браузере. Прежде чем приступить к работе с этим учебным пособием, вы должны иметь некоторое представление о работе с этим инструментом. Чтобы узнать больше об этом, вы можете прочитать наш учебник «Как использовать консоль разработчика JavaScript».

Создание «Hello, World!» Программа

Чтобы написать «Привет, мир!» программы, сначала откройте консоль JavaScript вашего предпочтительного веб-браузера.

Есть два основных способа создания «Hello, World!» программу на JavaScript с помощью метода alert() и метода console.log().

Использование оповещения()

Первый способ написать эту программу — использовать метод alert(), который будет отображать окно предупреждения поверх вашего текущего окна с указанным сообщением (в данном случае это будет \Hello , World!») и кнопку OK, которая позволит пользователю закрыть оповещение.

В методе мы будем передавать строковый тип данных в качестве параметра. Эта строка будет иметь значение Hello, World!, чтобы это значение было напечатано в окне предупреждения.

Чтобы написать этот первый стиль «Hello, World!» мы заключаем строку в круглые скобки метода alert() и заканчиваем наш оператор JavaScript точкой с запятой.

alert("Hello, World!");

После того, как вы нажмете клавишу ENTER после строки кода JavaScript, вы должны увидеть следующее всплывающее окно в браузере:

Консоль также распечатает результат вычисления выражения, который будет читаться как undefined, если выражение не возвращает что-то явно.

Всплывающие предупреждения могут быть утомительными, чтобы продолжать нажимать на них, поэтому давайте рассмотрим, как создать ту же программу, зарегистрировав ее в консоли с помощью console.log().

Использование console.log()

Мы можем вывести ту же строку, только на этот раз в консоль JavaScript, используя метод console.log(). Использование этой опции похоже на работу с языком программирования в терминальной среде вашего компьютера.

Как и в случае с alert(), мы передадим строку Hello, World! в метод console.log(), между его скобками. Мы закончим наш оператор точкой с запятой, что типично для соглашений о синтаксисе JavaScript.

console.log("Hello, World!");

Как только мы нажмем ENTER, сообщение Hello, World! будет напечатано в консоли:

Output
Hello, World!

В следующем разделе мы рассмотрим, как сделать эту программу более интерактивной для пользователя.

Запрос на ввод

Каждый раз, когда мы запускаем нашу существующую \Hello, World! Программа выдает тот же результат. Давайте запросим у человека, запускающего нашу программу, его имя. Затем мы можем использовать это имя для настройки вывода.

Для каждого из наших методов JavaScript, которые мы использовали выше, мы можем начать с одной строки, запрашивающей ввод. Мы воспользуемся методом JavaScript prompt() и передадим ему строку Как вас зовут?, чтобы запросить у пользователя его имя. Введенные пользователем данные будут сохранены в переменной name. Мы закончим наше выражение точкой с запятой.

let name = prompt("What is your name?");

Когда вы нажмете ENTER, чтобы запустить эту строку кода, вы получите всплывающее приглашение:

Диалоговое окно, которое появляется над окном вашего веб-браузера, включает текстовое поле для ввода пользователем данных. После того, как пользователь введет значение в текстовое поле, ему нужно будет нажать OK, чтобы значение было сохранено. Пользователь также может запретить запись значения, нажав кнопку Отмена.

Важно использовать метод JavaScript prompt() только тогда, когда это имеет смысл в контексте программы, поскольку чрезмерное его использование может стать утомительным для пользователя.

На этом этапе введите имя, которое вы хотите, чтобы программа приветствовала. В этом примере мы будем использовать имя Sammy.

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

Приветствие пользователя с помощью alert()

Как обсуждалось выше, метод alert() создает всплывающее окно поверх окна браузера. Мы можем использовать этот метод для приветствия пользователя, используя переменную name.

Мы будем использовать конкатенацию строк, чтобы написать приветствие \Hello! который обращается непосредственно к пользователю. Итак, давайте соединим строку Hello с переменной для имени:

"Hello, " + name + "!"

Мы объединили две строки, Hello, и ! с переменной name между ними. Теперь мы можем передать это выражение в метод alert().

alert("Hello, " + name + "!");

Как только мы нажмем ENTER здесь, мы получим следующее диалоговое окно на экране:

В данном случае имя пользователя — Сэмми, поэтому вывод приветствовал Сэмми.

Теперь давайте перепишем это так, чтобы вместо этого вывод выводился в консоль.

Приветствие пользователя с помощью console.log()

Как мы рассмотрели в предыдущем разделе, метод console.log() выводит вывод на консоль так же, как функция print() может выводить вывод на терминал в Питон.

Мы будем использовать ту же составную строку, что и в методе alert(), который объединяет строки Hello, и ! с переменной name:

"Hello, " + name + "!"

Все это выражение будет помещено в круглые скобки метода console.log(), так что мы получим приветствие в качестве вывода.

console.log("Hello, " + name + "!");

Для пользователя по имени Sammy вывод на консоли будет следующим:

Output
Hello, Sammy!

Теперь у вас есть программа JavaScript, которая принимает данные от пользователя и выводит их на экран.

Заключение

Теперь, когда вы знаете, как написать классическое «Hello, World!» программы, а также запрашивать у пользователя ввод и отображать его в качестве вывода, вы можете работать над дальнейшим расширением своей программы. Например, запросите любимый цвет пользователя, и программа скажет, что его любимый цвет — красный. даже попробуйте использовать эту же технику для создания программы Mad Lib.