Вывод в JavaScript
Скрипт на странице вы уже умеете ставить. Дальше — куда попадает результат: на страницу для посетителя, в диалог, который нужно закрыть, или только в Console для вас. Один язык — четыре очень разных места.
Как показать результат JavaScript?
Для посетителя обновите существующий элемент — textContent для обычного текста, innerHTML только когда нужно вставить разметку. Для блокирующего сообщения — window.alert. Для своей отладки — console.log. document.write — старый поток: пока файл читается, часто безопасно; после загрузки опасно — документ могут заменить целиком.
Где виден результат?
📊 Обычные места, где виден результат
| Способ | Кто видит | Норма для новичка |
|---|---|---|
textContent у элемента |
Посетитель, на странице | Да — повседневный видимый вывод |
innerHTML у элемента |
Посетитель, с HTML-тегами | Только если разметку написали вы |
window.alert |
Посетитель, в диалоге | Редко — страница ждёт OK |
console.log |
Вы, в Console DevTools | Да для отладки; посетитель не видит |
document.write |
Поток HTML | После загрузки не использовать |
На странице (норма для посетителя)
Оставьте настоящий заголовок или абзац в HTML. Когда скрипт выполнится (конец body, как в прошлом уроке), измените этот узел. Посетитель увидит новый текст без DevTools.
<!DOCTYPE html>
<html>
<head>
<title>Output — Page</title>
</head>
<body>
<h1 id="msg">Waiting…</h1>
<script>
document.getElementById("msg").textContent =
"Hello from JavaScript";
</script>
</body>
</html>
Почему сначала textContent
- Если скрипт упадёт, «Waiting…» останется в HTML
- Кавычки и
<остаются текстом, не тегами - Тот же приём, что со скриптом в конце body
- Модуль DOM будет позже; здесь достаточно «положи результат сюда»
innerHTML — когда результат это разметка
innerHTML читает строку как HTML. Нужен, когда вы намеренно вставляете теги, которые написали сами. Не кладите сырой ввод пользователя в innerHTML. Для имени или цены хватает textContent.
<!DOCTYPE html>
<html>
<head>
<title>Output — innerHTML</title>
</head>
<body>
<p id="box">Empty</p>
<script>
document.getElementById("box").innerHTML =
"<strong>Ready</strong> — markup inside the paragraph";
</script>
</body>
</html>
document.write — знать и почти не использовать
document.write шлёт текст в поток HTML, пока файл разбирается. Если вызвать после загрузки (поздний клик), многие браузеры открывают новый поток и стирают страницу. Для обновлений меняйте элемент, а не этот приём.
<!DOCTYPE html>
<html>
<head>
<title>Output — write</title>
</head>
<body>
<p>This paragraph exists first.</p>
<button type="button" id="wipe">Call document.write after load</button>
<script>
document.getElementById("wipe").onclick = function () {
document.write("The previous page content is gone");
};
</script>
</body>
</html>
Откройте демо, нажмите кнопку и смотрите: первый абзац исчезает. Поэтому дальше в курсе document.write в примерах не будет.
alert — диалог, который останавливает страницу
window.alert (обычно alert) открывает системный диалог. Страница ждёт OK. Один раз полезно, чтобы доказать, что скрипт сработал. Как единственный интерфейс слаб: без стилей, надоедает пачкой, рвёт скринридер и клавиатуру. Настоящие сообщения — на странице.
<!DOCTYPE html>
<html>
<head>
<title>Output — Alert</title>
</head>
<body>
<p>The page pauses until you dismiss the dialog.</p>
<script>
alert("Script ran — click OK to continue");
</script>
</body>
</html>
console.log — для вас, не для посетителя
Console — инструмент разработчика. console.log печатает туда. Покупатель с телефона этого не видит. Удобно проверить число или строку, пока учитесь. Успешный лог не значит «приложение показало результат».
console.log("Visible in DevTools, not on the page");
console.log(2 + 2);
Откройте DevTools (часто F12), вкладка Console, обновите, прочитайте строки. Если меняете только console.log, а заголовок остаётся «Waiting…», посетитель тоже видит «Waiting…».
Попробуйте сами
- Сохраните страницу с
textContent, откройте, смените строку, обновите. - Замените строку на
innerHTMLс<strong>и убедитесь, что слово жирное. - Откройте Console и выполните пример
console.log— в теле страницы ничего нового. - Один раз alert; затем замените его обновлением заголовка, чтобы страница не стопорилась.
- По желанию: кнопка
document.write, чтобы почувствовать стирание — потом уберите этот приём из своих файлов.
Частые ошибки
- Показывать результат только через
console.logи удивляться пустой странице - Класть в
innerHTMLчужой текст (формы, URL, чат) вместоtextContent - Вызывать
document.writeпосле загрузки и терять всю вёрстку alertна каждую клавишу- Путать с Where To: там где живёт скрипт; здесь где появляется результат
Итог
- Видимая норма для посетителя: обновить элемент через
textContent innerHTMLвставляет вашу разметку — не чужие строкиalertблокирует; используйте редкоconsole.log— для разработчика в DevTools- После загрузки не вызывайте
document.write; документ могут стереть - Потренируйтесь переносить одно сообщение Console → alert → заголовок
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху