Вывод данных 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()

Для отображения данных также можно использовать окно сообщений. Для этого нужно воспользоваться методом 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>

Подробнее об отладке скриптов будет рассказано в следующих главах.