Вывод JavaScript
Возможности отображения JavaScript
JavaScript может «отображать» данные по-разному:
- Запись в элемент HTML с использованием
innerHTML. - Запись в вывод HTML с использованием
document.write(). - Запись в окно оповещения с использованием
window.alert(). - Запись в консоль браузера с использованием
console.log().
Использование внутреннего HTML
Чтобы получить доступ к элементу HTML, JavaScript может использовать document.getElementById(id)метод.
Атрибут idопределяет элемент HTML. Свойство innerHTML определяет содержимое HTML:
Пример
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</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>My First Web Page</h1>
<p>My first paragraph.</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()
Вы можете использовать окно предупреждения для отображения данных:
Пример
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
Вы можете пропустить windowключевое слово.
В JavaScript объект окна является объектом глобальной области видимости, что означает, что переменные, свойства и методы по умолчанию принадлежат объекту окна. Это также означает, что указывать windowключевое слово необязательно:
Пример
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
alert(5 + 6);
</script>
</body>
</html>
Использование console.log()
В целях отладки вы можете вызвать console.log()метод в браузере для отображения данных.
Вы узнаете больше об отладке в следующей главе.
Пример
<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>
JavaScript Печать
В JavaScript нет объекта печати или методов печати.
Вы не можете получить доступ к устройствам вывода из JavaScript.
Единственным исключением является то, что вы можете вызвать window.print()метод в браузере для печати содержимого текущего окна.
Пример
<!DOCTYPE html>
<html>
<body>
<button onclick="window.print()">Print this page</button>
</body>
</html>