JavaScript Output
JavaScript can "display" data in different ways:
- Writing into an HTML element, using innerHTML .
- Writing into the HTML output using document.write() .
- Writing into an alert box, using window.alert() .
- Writing into the browser console, using console.log() .
Using innerHTML
To access an HTML element, JavaScript can use the document.getElementById(id) method.
The id attribute defines the HTML element. The innerHTML property defines the HTML content:
Example
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p >
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
Changing the innerHTML property of an HTML element is a common way to display data in HTML.
Using document.write()
For testing purposes, it is convenient to use document.write() :
Example
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
Using document.write() after an HTML document is loaded, will delete all existing HTML:
Example
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<button type="button" onclick="document.write(5 + 6)">Try it</button>
The document.write() method should only be used for testing.
Using window.alert()
You can use an alert box to display data:
Example
You can skip the window keyword.
In JavaScript, the window object is the global scope object. This means that variables, properties, and methods by default belong to the window object. This also means that specifying the window keyword is optional:
Example
Using console.log()
For debugging purposes, you can call the console.log() method in the browser to display data.
You will learn more about debugging in a later chapter.
Example
JavaScript Print
JavaScript does not have any print object or print methods.
You cannot access output devices from JavaScript.
The only exception is that you can call the window.print() method in the browser to print the content of the current window.
Example
<button onclick="window.print()">Print this page</button>
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
Как выводить html с помощью JavaScript
С помощью JavaScript удобно делать «мини» движки для сайтов сделанных на html. Например, можно выводить через яваскрипт левый сайдбар, шапку и футер сайта, поскольку эти элементы часто изменяются. Ниже я расскажу о том, как это делается. Помимо этого способа, есть ещё один отличный способ вывода контента на сайте: вывод html с помощью ajax.
Для вывода html с помощью JavaScript нужно сделать:
1. Создать файл с расширением .js . Например, topjava.js .
2. Напишите в этом файле следующее:
Если Вы будете писать текст без пробелов, то использование переносов ‘+ на следующие строки не обязательны. С текстом можно писать любой html код.
Если Вам нужно подключить файл JavaScript, то его можно подключить так:
3. В месте где Вы хотите вывести текст из javascript напишите следующие:
Если ничего не выводится, то это означает, что у Вас ошибка в файле topjava.js . Скорее всего, где-то пропущена кавычка.
Таким образом, Вы можете написать несколько яваскриптов и выводить различные элементы сайта. Это очень удобно, когда сайт написан на html и на нем много страниц. Вы изменяете код всего лишь в одном файлике, а получается, что он изменяется на всем сайте.
Функции вывода
Во время написания программы, а также при её отладке часто возникает необходимость увидеть, как работает программа. Нужно узнать, доходит ли выполнение программы до определённого места и какие значения имеют переменные в этот момент. Для этого существуют функции вывода, которые рассмотрены в данной теме.
Функция alert()
Функция alert() выводит на экран окно с сообщением. Текст сообщения всегда пишется в кавычках. Все функции вывода могут выводить не только текст, но и значения переменных. Пример:
Особенность этой функции заключается в том, что она приостанавливает работу программы. Когда выполнение программы доходит до функции alert() , появляется окно и работа программы прерывается. А когда пользователь нажимает кнопку OK, окно изчезат, а программа продолжает работу. Иногда эта особенность бывает полезна. Она позволяет не только вывести сообщение, но и увидеть, как выглядит страница на данном этапе выполнения программы. Однако, если нужно вывести много сообщений, то использование функции alert() становится неудобным. Ведь при каждом выводе программа прерывается и нужно нажимать кнопку OK. В этих случаях используются другие способы вывода данных.
Метод document.write()
Метод document.write() добавляет текст на страницу. Это может быть не просто текст, но и HTML тэги. Они будут работать. Однако, не рекомендуется использовать этот метод для добавления элементов страницы. Они могут отображаться неправильно. Для создания элементов применяются другие методы, которые рассмотрены в этом учебнике. А document.write() используется, в основном, для отслеживания работы программы. Пример:
Метод console.log()
Консоль браузера — это полезный инструмент отладки страницы, в том числе, скриптов. Он позволяет получить важную информацию о работе скрипта. Удобнее всего консоль сделана в браузере FireFox. Она находится в Инструментах разработчика. Чтобы их открыть, зайдите в главное меню браузера и выберите «Другие интструменты». Для быстрого открытия Инструментов разработчика можно добавить кнопку в панель инструментов.
JavaScript Выход
JavaScript может «отображать» данные различными способами:
- Запись в HTML-элемент с помощью innerHTML.
- Запись в HTML-вывод с помощью document.write().
- Запись в окно оповещения с помощью window.alert().
- Запись в консоль браузера с помощью console.log().
Использование InnerHtml
Чтобы получить доступ к HTML-элементу, JavaScript может использовать метод Document. getElementById (ID) .
Атрибут ID определяет элемент HTML. Свойство InnerHtml определяет HTML-содержимое:
Пример
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p >
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
Изменение свойства InnerHtml элемента HTML является обычным способом отображения данных в формате HTML.
Использование документа. Write ()
Для целей тестирования удобно использовать Document. Write ():
Пример
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
При полной загрузке HTML-документа с помощью Document. Write () будет удален весь существующий HTML-код:
Пример
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<button type="button" onclick="document.write(5 + 6)">Try it</button>
Метод Document. Write () должен использоваться только для тестирования.
Использование окна. Alert ()
Для отображения данных можно использовать окно оповещения:
Пример
Использование консоли. log ()
Для целей отладки можно использовать метод Console. log () для отображения данных.