⚡ JavaScript

Entrada e saída de dados em JavaScript (Node.js): guia detalhado

Lição 6 / 35 • Leitura completa da teoria

JavaScript — это язык, который оживляет сайты. Если HTML — это кости, а CSS — внешность, то JavaScript — это мозг и мышцы. Именно он заставляет кнопки реагировать на нажатие, картинки — двигаться, а формы — проверять данные. В этом уроке вы узнаете, что такое JavaScript, откуда он взялся и как написать свою первую программу прямо в браузере — без установки вообще ничего.

Зачем браузеру нужен язык программирования?

Представьте, что сайт — это книга. HTML пишет текст и расставляет картинки. CSS делает шрифты красивыми и подбирает цвета. Но книга сама по себе мёртвая — она не реагирует на вас, не меняется, не отвечает на вопросы.

Теперь представьте, что вместо книги у вас интерактивный комикс: вы нажимаете на кнопку — герой прыгает, вводите своё имя — он обращается к вам лично, задаёте вопрос — получаете ответ. Вот что делает JavaScript: он превращает статичную страницу в живое приложение.

Без JavaScript вы могли бы только смотреть на сайт. С JavaScript вы можете с ним взаимодействовать. Именно поэтому каждый браузер в мире — Chrome, Firefox, Safari, Edge — имеет встроенный «движок» JavaScript, который умеет читать и выполнять код на этом языке.

История JavaScript: язык, созданный за 10 дней

В 1995 году компания Netscape (создатель одного из первых популярных браузеров) поняла, что интернет слишком скучный. Сайты были как журналы — можно читать, но нельзя трогать. Они наняли программиста по имени Брэндан Эйх и дали ему задание: создать язык программирования для браузера.

Срок? Десять дней.

Да, один из самых популярных языков программирования в мире был создан примерно за полторы рабочих недели. Брэндан Эйх позже говорил, что спал по четыре часа и работал практически без остановки. Результат назвали «Mocha», потом переименовали в «LiveScript», а потом — в JavaScript.

Почему JavaScript, если это не Java? Это чистый маркетинг. В 1995 году язык Java от компании Sun Microsystems был очень популярен, и Netscape захотели «поймать волну». На самом деле JavaScript и Java — это совершенно разные языки, примерно как «хомяк» и «хомут». Похожие буквы, разные сущности.

Хронология важных событий

Год	Событие
1995	Брэндан Эйх создаёт JavaScript за 10 дней в Netscape
1996	Microsoft копирует JS и делает JScript для Internet Explorer
1997	Язык стандартизируют, стандарт называют ECMAScript (ES)
2009	Появляется Node.js — JS начинает работать вне браузера
2015	ES6 / ES2015 — большое обновление, язык становится намного лучше
Сейчас	JS — самый популярный язык в мире уже много лет подряд

Чем JavaScript отличается от HTML и CSS?

Это вопрос, который задаёт почти каждый новичок. Давайте разберём через простую аналогию.

Представьте, что вы строите человека-робота:

HTML — это скелет и органы. Он определяет структуру: вот голова, вот руки, вот кнопка на животе.
CSS — это внешность. Цвет кожи, длина волос, стиль одежды.
JavaScript — это мозг и нервная система. Он определяет поведение: что робот делает, когда вы нажимаете кнопку на его животе.

HTML и CSS — это языки разметки и стилей. Они описывают, КАК выглядит страница. JavaScript — это настоящий язык программирования. Он описывает, ЧТО страница делает. В нём есть переменные, функции, условия, циклы — всё то, что делает программирование программированием.

Сравнение HTML, CSS и JavaScript

Язык	Тип	Для чего	Пример
HTML	Язык разметки	Структура страницы	<button>Нажми меня</button>
CSS	Язык стилей	Внешний вид	button { color: red; }
JavaScript	Язык программирования	Поведение и логика	button.onclick = function() { alert('Привет!'); }

Где используется JavaScript?

Когда-то JavaScript работал только в браузерах. Сегодня он буквально везде:

Веб-сайты — интерактивные элементы, анимации, проверка форм, динамические обновления страницы без перезагрузки (как в соцсетях, когда новые посты подгружаются сами).
Веб-приложения — Google Docs, Figma, Trello, Gmail — всё это сделано на JavaScript.
Серверная часть — благодаря Node.js JavaScript теперь работает на серверах. Можно написать весь сайт — и frontend, и backend — на одном языке.
Мобильные приложения — React Native позволяет создавать приложения для iOS и Android на JavaScript.
Десктопные приложения — VS Code (редактор кода), Slack, Discord, Notion — написаны на JavaScript с помощью Electron.
Игры — браузерные игры, и даже некоторые серьёзные игровые движки поддерживают JS.
Умные устройства — JavaScript используется в IoT-устройствах и роботах.

По статистике Stack Overflow (крупнейший сайт для программистов), JavaScript остаётся самым популярным языком программирования уже более 12 лет подряд. На нём пишут буквально миллионы разработчиков по всему миру.

Как запустить JavaScript прямо сейчас?

Самое крутое в JavaScript — вам не нужно ничего устанавливать. Каждый браузер уже умеет выполнять JS. Есть несколько способов поиграть с кодом прямо сейчас.

Способ 1: Консоль разработчика (F12)

Нажмите F12 (или Ctrl+Shift+I / Cmd+Option+I на Mac) прямо сейчас — откроется панель разработчика. Перейдите на вкладку Console (Консоль). Вы увидите строку ввода, где можно писать JavaScript-код и мгновенно его выполнять.

Это как калькулятор, только вместо математики — программирование. Попробуйте ввести:

2 + 2

Браузер тут же ответит: 4. Вы только что выполнили первую JavaScript-программу!

Способ 2: Встраивание в HTML-файл

Создайте файл index.html и напишите в нём:

<!DOCTYPE html>
<html>
<head>
  <title>Моя первая страница с JS</title>
</head>
<body>
  <h1>Привет!</h1>

  <script>
    // Это JavaScript-код
    console.log("Привет из JavaScript!");
    alert("Страница загружена!");
  </script>
</body>
</html>

Откройте этот файл в браузере. Что произойдёт: сначала выскочит окошко с текстом "Страница загружена!" (это сделал alert), а в консоли (F12) появится надпись "Привет из JavaScript!" (это сделал console.log). Тег <script> говорит браузеру: "Всё, что внутри — это JavaScript, выполни его."

Способ 3: Внешний JS-файл

Когда кода становится много, удобно держать его в отдельном файле:

<!-- В HTML файле: -->
<script src="script.js"></script>

// В файле script.js:
console.log("Загружен из внешнего файла!");

Атрибут src (от слова source — источник) указывает, из какого файла загрузить код. Это рекомендуемый способ для реальных проектов — HTML отдельно, JavaScript отдельно.

Ваша первая программа: console.log

console.log() — это команда, которую используют абсолютно все JavaScript-разработчики каждый день. Она выводит информацию в консоль браузера. Думайте о ней как о блокноте, куда программист записывает заметки для себя — пользователи сайта этого не видят, а разработчик видит и может понять, что происходит в коде.

// Вывести текст
console.log("Привет, мир!");

// Вывести число
console.log(42);

// Вывести результат математики
console.log(10 + 5);

// Вывести несколько значений сразу
console.log("Меня зовут", "Иван", "и мне", 15, "лет");

Что здесь происходит:

Строки 2, 5, 8, 11 — это комментарии (начинаются с //). Браузер их игнорирует, они для людей.
console.log("Привет, мир!") — вывести текст "Привет, мир!" в консоль. Текст заключается в кавычки.
console.log(42) — вывести число 42. Числа кавычки не нужны.
console.log(10 + 5) — вычислить 10+5 и вывести результат (15).
В последней строке передаём сразу несколько значений через запятую — они выведутся через пробел.

Диалоговые окна: alert, confirm, prompt

JavaScript может показывать пользователю всплывающие окна. Это самые простые способы взаимодействия — не очень красивые, зато очень простые для изучения.

// alert — просто показать сообщение
alert("Привет! Добро пожаловать на сайт.");

// confirm — спросить да/нет, возвращает true или false
let согласен = confirm("Вам исполнилось 18 лет?");
console.log(согласен); // true если нажали OK, false если Cancel

// prompt — попросить ввести текст, возвращает введённую строку
let имя = prompt("Как вас зовут?");
console.log("Привет, " + имя + "!");

Разбираем каждый:

alert(текст) — показывает окошко с текстом и кнопкой OK. Просто уведомление.
confirm(вопрос) — показывает вопрос с кнопками OK и Cancel. Возвращает true (если нажали OK) или false (если Cancel).
prompt(вопрос) — показывает поле для ввода текста. Возвращает то, что ввёл пользователь, или null, если нажал Cancel.

Слова true и false — это специальные значения в JavaScript (логические, или булевы). true означает «да, правда», false — «нет, ложь». К ним мы ещё вернёмся.

document.write: писать прямо на страницу

Команда document.write() позволяет добавить текст прямо в HTML-страницу:

document.write("<h1>Это заголовок, написанный через JS!</h1>");
document.write("<p>А это обычный параграф.</p>");
document.write("<p>Сумма 5 + 3 = " + (5 + 3) + "</p>");

Важное предупреждение: document.write() считается устаревшим способом и в реальных проектах почти не используется. Но для изучения и понимания принципов — отлично подходит. В настоящих проектах для изменения страницы используют другие методы (работа с DOM — тема отдельного урока).

Что такое Node.js?

До 2009 года JavaScript работал только в браузерах. Но потом Райан Даль создал Node.js — среду выполнения JavaScript вне браузера. Теперь можно запускать JS-код прямо на компьютере или сервере, как Python или Java.

Зачем это нужно?

Серверы — принимать запросы от пользователей, работать с базами данных, отдавать данные.
Инструменты разработки — npm (менеджер пакетов), webpack, babel — всё это работает на Node.js.
Скрипты автоматизации — переименовать тысячу файлов, обработать данные, отправить уведомления.

Для установки Node.js перейдите на nodejs.org и скачайте LTS-версию. После установки можно запускать JS-файлы командой:

node script.js

Но для начала обучения Node.js не нужен — нам хватит консоли браузера.

Первая полноценная программа

Давайте напишем что-то более интересное, чем просто "Hello, World!". Программа, которая приветствует пользователя по имени:

<!DOCTYPE html>
<html>
<head>
  <title>Приветствие</title>
</head>
<body>
  <h1 id="заголовок">Загрузка...</h1>

  <script>
    // Спрашиваем имя пользователя
    let имя = prompt("Как тебя зовут?");

    // Проверяем, ввёл ли пользователь что-нибудь
    if (имя) {
      // Меняем заголовок на странице
      document.getElementById("заголовок").textContent = "Привет, " + имя + "!";
    } else {
      document.getElementById("заголовок").textContent = "Привет, незнакомец!";
    }
  </script>
</body>
</html>

Давайте разберём каждую строку:

let имя = prompt("Как тебя зовут?") — показать диалог, запросить имя, сохранить в переменную имя.
if (имя) — проверка: есть ли в переменной что-нибудь? Если пользователь нажал Cancel или ничего не ввёл — имя будет пустым.
document.getElementById("заголовок") — найти на странице элемент с id="заголовок".
.textContent = "..." — заменить текст внутри этого элемента.
"Привет, " + имя + "!" — склеить (concatenate) строки. Знак + для строк работает как клей.

Этот маленький код уже демонстрирует самые важные концепции программирования: переменные, условия, работа с документом. Мы разберём каждую из них подробно в следующих уроках.

Правила написания кода

JavaScript — как иностранный язык. Там свои правила грамматики. Несколько важных моментов для начинающих:

// 1. Точка с запятой в конце строки (не обязательна, но рекомендуется)
console.log("Привет");
console.log("Мир");

// 2. Регистр важен! console.log и Console.Log — разные вещи
console.log("Правильно");
// Console.Log("Ошибка!"); // Это вызовет ошибку

// 3. Строки можно писать в одинарных или двойных кавычках
console.log('Одинарные кавычки');
console.log("Двойные кавычки");
// Главное — не смешивать: 'вот так" — ошибка

// 4. Комментарии — для людей, не для браузера
// Однострочный комментарий

/*
  Многострочный комментарий.
  Можно писать много строк.
  Браузер всё это проигнорирует.
*/

// 5. Пробелы и отступы важны для читаемости, но не для выполнения
let x=5;           // Работает, но некрасиво
let y = 10;        // Работает и читабельно
let z = x + y;     // Рекомендуемый стиль

Типичные ошибки новичков

Забыть кавычки вокруг текста. console.log(Привет) — ошибка. Браузер думает, что Привет — это переменная. Правильно: console.log("Привет").
Перепутать регистр. JavaScript чувствителен к регистру. Console.Log, CONSOLE.LOG — всё это ошибки. Только console.log.
Не закрыть скобку или кавычку. console.log("Привет" — забыта закрывающая скобка. Браузер запутается.
Смешать одинарные и двойные кавычки. 'текст" — ошибка. Открывали одинарной — закрывайте одинарной.
Не открыть консоль разработчика при ошибке. Когда что-то не работает — всегда смотрите в консоль (F12). Там написано, что именно пошло не так и на какой строке.
Бояться ошибок. Ошибки — это нормально. Каждый программист делает их десятками в день. Консоль покажет, что не так — читайте сообщения об ошибках, они информативны.

Как читать сообщения об ошибках

Когда вы сделаете ошибку (а вы обязательно сделаете — это нормально!), консоль покажет что-то вроде:

// Ошибка в коде:
console.log("Привет)  // забыли закрывающую кавычку

// Сообщение в консоли:
// Uncaught SyntaxError: Invalid or unexpected token (at script.js:1:20)

Разбираем: SyntaxError — синтаксическая ошибка (неправильный синтаксис, то есть грамматика кода). at script.js:1:20 — в файле script.js, строка 1, символ 20. Браузер даже показывает, где именно проблема!

Другие частые типы ошибок:

ReferenceError — вы использовали переменную, которая не существует
TypeError — вы пытаетесь сделать что-то с данными неправильного типа
RangeError — значение вышло за допустимые пределы

Практический пример: интерактивный счётчик

Давайте сделаем что-то, что реально работает на странице — кнопку-счётчик:

<!DOCTYPE html>
<html>
<head>
  <title>Счётчик</title>
</head>
<body>
  <h2>Сколько раз нажали: <span id="счёт">0</span></h2>
  <button onclick="нажать()">Нажми меня!</button>

  <script>
    // Переменная для хранения количества нажатий
    let количество = 0;

    // Функция, которая вызывается при каждом нажатии
    function нажать() {
      количество = количество + 1;  // увеличиваем на 1
      document.getElementById("счёт").textContent = количество;
    }
  </script>
</body>
</html>

Вот что происходит: создаём переменную количество со значением 0. При каждом нажатии кнопки вызывается функция нажать(), которая увеличивает счётчик на 1 и обновляет текст на странице. Без перезагрузки, без серверов, прямо здесь и сейчас — вот магия JavaScript!

Итого

В этом уроке мы узнали:

JavaScript — это язык программирования, который делает веб-страницы интерактивными. Он работает в каждом браузере.
Историю JS — создан Брэнданом Эйком за 10 дней в 1995 году в Netscape. Назван JavaScript для маркетинга, но к Java отношения не имеет.
Отличие от HTML и CSS — HTML это структура, CSS это стиль, JavaScript это поведение и логика.
Как запустить — прямо в браузере через консоль разработчика (F12), или вставив код в тег <script> в HTML-файл.
Основные команды — console.log() для вывода в консоль, alert() для всплывающего окна, prompt() для запроса ввода.
Node.js — платформа, позволяющая запускать JavaScript вне браузера, на серверах и компьютерах.
Ошибки — это нормально. Консоль разработчика покажет, что пошло не так. Читайте сообщения об ошибках!

В следующем уроке мы изучим переменные — самый фундаментальный инструмент любого программиста.

← Anterior Aqui está a tradução do artigo de teoria de progra Próximo → Condições (if/else/switch) em JavaScript (Node.js)