JavaScript Output / Виведення
"Якщо хочеш прямувати новим шляхом, ти мусиш прокласти його самотужки"
Стів Джобс
Можливості відображення 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()
Ви можете використовувати вікно сповіщення (alert box) для відображення даних:
Приклад
<!DOCTYPE html>
<html>
<body>
<h1>Моя перша веб-сторінка</h1>
<p>Мій перший параграф.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
Спробуйте самі »
Використання console.log()
Для дебагінга (відладка, налагодження, виправлення помилок) ви можете використовувати метод console.log() для відображення даних.
Ви дізнаєтесь більше про дебагінг в наступному розділі на нашому сайті W3Schools українською.
Приклад
<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>
Спробуйте самі »
