JavaScript Output / Вывод
"Если хочешь идти по новому пути, ты должен проложить его своими силами"
Стив Джобс
Возможности отображения JavaScript
JavaScript может "отображать" данные разными способами:
- Запись в HTML элемент, используя
innerHTML. - Запись в HTML выведения, используя
document.write(). - Запись в окно предупреждения (оповещения), используя
window.alert(). - Запись в консоль браузера, используя
console.log().
Использование innerHTML
Чтобы получить доступ к элементу HTML, JavaScript может использовать метод document.getElementById(id).
Атрибут id определяет элемент HTML. Свойство innerHTML определяет содержание HTML:
Пример
<!DOCTYPE html>
<html>
<body>
<h1>Моя первая веб-страница</h1>
<p>Мой первый параграф</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
Попробуйте сами »
Изменение свойства innerHTML элемента HTML является распространенным способом отображения данных в HTML.
Использование document.write()
В целях тестирования удобно использовать document.write():
Пример
<!DOCTYPE html>
<html>
<body>
<h1>Моя первая веб-страница</h1>
<p>Мой первый параграф.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
Попробуйте сами »
Использование document.write() после загрузки HTML документа удалит весь существующий HTML:
Пример
<!DOCTYPE html>
<html>
<body>
<h1>Моя первая веб-страница</h1>
<p>Мой первый параграф.</p>
<button type="button" onclick="document.write(5 + 6)">Попробуй это</button>
</body>
</html>
Попробуйте сами »
Метод document.write() должен использоваться только для тестирования.
Использование window.alert()
Вы можете использовать окно оповещения (alert box) для отображения данных:
Пример
<!DOCTYPE html>
<html>
<body>
<h1>Моя первая веб-страница</h1>
<p>Мой первый параграф.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
Попробуйте сами »
Использование console.log()
Для дебагинга (отладка, настройка, исправление ошибок) вы можете использовать метод console.log() для отображения данных.
Вы узнаете больше о дебагинге в следующем разделе на нашем сайте W3Schools на русском.
Пример
<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>
Попробуйте сами »
JavaScript - Вывод. Видеоурок W3Schools
Это видео показывает, как JavaScript отображает или "выводит" в HTML и браузере.
Часть серии видеоуроков для изучения JavaScript для начинающих!
