Освоение программы «Hello World» на JavaScript: руководство для начинающих

Привет, ребята! Сегодня мы окунемся в захватывающий мир программирования на JavaScript и узнаем все о знаменитой программе «Hello World». Если вы новичок в программировании или только начинаете свое знакомство с JavaScript, эта статья идеально подойдет вам. Мы рассмотрим несколько методов написания программы «Hello World», используя разговорный язык и попутно предоставляя примеры кода. Итак, начнём!

Метод 1. Классический подход

Давайте начнем с традиционного метода вывода «Hello World» на консоль. Откройте свой любимый текстовый редактор или интегрированную среду разработки (IDE) и создайте новый файл JavaScript. Введите следующий код:

console.log("Hello World!");

Сохраните файл с расширением.js, например helloworld.js. Теперь откройте терминал или командную строку, перейдите в каталог, в котором вы сохранили файл, и запустите скрипт, используя среду выполнения Node.js:

node helloworld.js

Вуаля! Вы должны увидеть великолепное сообщение «Hello World», отображаемое в консоли.

Метод 2: отображение на веб-странице

Если вы хотите разместить свое сообщение «Hello World» на веб-странице, не бойтесь! JavaScript поможет вам. Создайте HTML-файл, скажем, index.html, и добавьте следующий код:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <h1 id="hello">Hello World!</h1>
    <script src="helloworld.js"></script>
  </body>
</html>

В этом фрагменте кода мы связываем наш файл JavaScript helloworld.jsс файлом HTML с помощью тега <script>. Теперь давайте изменим наш файл JavaScript следующим образом:

document.getElementById("hello").innerText = "Hello World!";

Сохраните оба файла и откройте index.htmlв веб-браузере. Та-да! Вы увидите сообщение «Hello World!» отображается на веб-странице.

Метод 3. Интерактивное сообщение

Давайте немного оживим ситуацию, разрешив пользователю взаимодействовать с нашей программой «Hello World». Измените свой HTML-файл, как показано ниже:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <h1 id="hello">Hello World!</h1>
    <button onclick="changeMessage()">Click me!</button>
    <script src="helloworld.js"></script>
  </body>
</html>

Теперь обновите файл JavaScript, используя следующий код:

function changeMessage() {
  var message = prompt("Enter a new message:");
  document.getElementById("hello").innerText = message;
}

Сохраните файлы и откройте index.html

Заключение

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

Помните: практика ведет к совершенству, поэтому продолжайте программировать и получайте удовольствие!