Вывод в JavaScript: console.log(), document.write()

1. console.log(): лучший друг программиста

Когда вы пишете программу, важно не только что-то посчитать, но и как-то показать результат пользователю (или хотя бы себе, чтобы убедиться, что всё работает). В JavaScript для этого есть несколько способов. Самые популярные — это console.log() и document.write(). Каждый из них имеет свои особенности, плюсы, минусы и даже "подводные камни".

В этой лекции мы разберём оба способа, научимся ими пользоваться и, конечно, попрактикуемся.

Что такое консоль?

Консоль — это специальное место, где браузер (или Node.js) может показывать вам сообщения, ошибки, предупреждения и прочие полезные штуки. В браузере консоль обычно открывается клавишей F12 (или через меню "Инструменты разработчика" → "Консоль").

Как работает console.log()?

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

console.log("Привет, мир!");

Если вы откроете консоль браузера, то увидите там:

Привет, мир!

Можете попробовать прямо сейчас: создайте HTML-файл, подключите к нему JS-скрипт, напишите console.log("Hello, JS!"); — и проверьте результат в консоли.

let name = "Анна";
let age = 25;
console.log("Имя:", name);
console.log("Возраст:", age);

В консоли появится:

Имя: Анна
Возраст: 25

let score = 100;
let level = 3;
console.log("Счет:", score, "Уровень:", level);

Результат:

Счет: 100 Уровень: 3

Почему это удобно?

• Не мешает пользователю: Вывод не портит внешний вид сайта.
• Можно выводить что угодно: Числа, строки, объекты, массивы, даже ошибки.
• Очень удобно для отладки: Любой программист скажет, что без console.log() жизнь была бы намного грустнее.

Вывод сложных данных

Можно выводить сложные объекты, массивы, результаты вычислений:

let user = {
  name: "Вася",
  age: 30
};
console.log(user);

В консоли вы увидите красивую структуру, которую можно разворачивать и изучать.

2. document.write(): привет из прошлого

Что это такое?

document.write() — это команда, которая выводит текст (или HTML-код) прямо на страницу. То есть, если вы вызовете document.write("Привет!"), то этот текст появится в браузере, как обычное содержимое страницы.

document.write("Привет, мир!");

Результат: на странице появится надпись "Привет, мир!".

Когда это бывает полезно?

• Для самых простых экспериментов и учебных задач.
• Когда нужно быстро что-то показать на странице, не заморачиваясь с HTML-элементами.

Почему этим редко пользуются в реальных проектах?

• document.write() полностью перезаписывает страницу, если вызвать его после загрузки. Попробуйте вызвать document.write() после того, как страница уже отобразилась, — и вся ваша страница исчезнет, останется только то, что вы написали!
• Неудобно для сложных интерфейсов. Для настоящей работы с содержимым страницы есть гораздо более удобные способы (например, работа с DOM, о чём мы поговорим позже).
• Реальные программисты используют document.write() только для шуток и страшилок на собеседованиях. 😅

let user = "Катя";
let points = 42;
document.write("Пользователь: " + user + "<br>");
document.write("Баллы: " + points);

Результат:

Пользователь: Катя  
Баллы: 42

(Обратите внимание: тег <br> нужен для переноса строки, иначе всё будет в одну строку.)

3. Сравнение: console.log() vs document.write()

console.log()

document.write()

Резюме:
- Для отладки и обучения — console.log().
- Для простых примеров на странице — document.write().
- Для реальных интерфейсов — изучаем DOM (скоро будет!).

4. Практика: выводим информацию в вашем мини-приложении

Давайте напишем небольшое учебное приложение. Создадим переменную с текстом, а затем склеим ее значение со строкой. Теперь выведем их на экран.

let userName = "Женя";
console.log("Привет, " + userName + "!");
document.write("Привет, " + userName + "!");

• В консоли появится: Привет, Женя!
• На странице тоже появится: Привет, Женя!

let x = 10;
let y = 3;
let sum = x + y;

console.log("Сумма:", sum);
document.write("Сумма: " + sum + "<br>");

5. Ещё немного про форматирование вывода

Перевод строки

• В консоли каждая команда console.log() по умолчанию выводит с новой строки.
• В document.write() всё выводится подряд. Если хотите сделать перенос строки, используйте <br>:

document.write("Строка 1<br>");
document.write("Строка 2<br>");

Склеивание разных типов

В JavaScript можно склеивать строки с числами, булевыми значениями и даже с undefined (но лучше не надо!):

let age = 30;
document.write("Возраст: " + age + "<br>"); // "Возраст: 30"

6. Микро-практика: попробуйте сами!

1. Создайте переменные: имя пользователя, возраст, флаг "подписан на рассылку" (true или false).
2. Выведите все значения в консоль и на страницу.
3. Попробуйте изменить значения переменных и снова вывести их.

let user = "Вася";
let age = 18;
let subscribed = true;

console.log("Имя:", user);
console.log("Возраст:", age);
console.log("Подписан на рассылку:", subscribed);

document.write("Имя: " + user + "<br>");
document.write("Возраст: " + age + "<br>");
document.write("Подписан на рассылку: " + subscribed + "<br>");

7. Типичные ошибки при выводе информации

Ошибка №1: забыли кавычки вокруг строки.
Если написать console.log(Привет, мир!);, то получите ошибку: Uncaught ReferenceError: Привет is not defined.
Правильно: console.log("Привет, мир!"); или console.log('Привет, мир!');.

Ошибка №2: забыли скобки у команды.
console.log "Текст" — так не работает!
Правильно: console.log("Текст");

Ошибка №3: не используете <br> в document.write(), всё выводится в одну строку.
document.write("A"); document.write("B"); — получится "AB".
Хотите перенос — добавьте <br>:
document.write("A<br>"); document.write("B<br>");

Ошибка №4: вызываете document.write() после загрузки страницы.
Если вы вызовете document.write() после того, как страница уже отобразилась (например, после клика на кнопку), вся страница исчезнет и останется только ваш текст. Это не баг, а "фича". Поэтому используйте document.write() только при начальной загрузке страницы.

Ошибка №5: забыли открыть консоль.
Иногда студенты говорят: "Я написал console.log(), но ничего не вижу на странице!"
Откройте консоль браузера (F12 → вкладка "Console") — и всё увидите.

1

Задача

Модуль 1: Web Core, 20 уровень, 1 лекция

Недоступна

Наследование методов

Наследование методов

Открыть

1

Задача

Модуль 1: Web Core, 20 уровень, 1 лекция

Недоступна

Object.create

Object.create

Открыть