САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ

JavaScript Вывод



Варианты вывода JavaScript на дисплей

JavaScript данные можно вывести на "дисплей" различными способами:

  • innerHTML - используя, запись внутри элемента HTML.
  • document.write() - используя, запись внутри элемента HTML.
  • 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 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>
Редактор кода »