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>My First Web Page</h1>
<p>My first paragraph.</p>
<button type="button" onclick="document.write(5 + 6)">Try it</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>
Попробуйте сами »
