У 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()
Для отображения данных также можно использовать окно сообщений. Для этого нужно воспользоваться методом window.alert():
<!DOCTYPE html>
<html>
<body>
<h1>Моя веб-страница</h1>
<p>Первый параграф</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
Использование console.log()
Во время отладки скрипта, чтобы увидеть некие данные, вы можете вывести их в консоль браузера. Для этого используется метод console.log():
<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>
Подробнее об отладке скриптов будет рассказано в следующих главах.
