Вывод JavaScript

Оглавление

    Показать оглавление

Возможности отображения 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>My First Web Page</h1>
 <p>My First Paragraph</p>
    
<p id="demo"></p>

<script>
 document.getElementById("demo").innerHTML = 5 + 6;
    </script>

</body>
</html>

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>
<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>

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>
<p>My first paragraph.</p>

<p>Never call document.write after the document has finished loading.
It will overwrite the whole document.</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>

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>
<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>

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>
<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>

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>
<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>

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>Activate Debugging</h2>

<p>F12 on your keyboard will activate debugging.</p>
<p>Then select "Console" in the debugger menu.</p>
<p>Then click Run again.</p>

<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>

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>The window.print() Method</h2>

<p>Click the button to print the current page.</p>

<button onclick="window.print()">Print this page</button>

</body>
</html>