Wyjście JavaScript
Możliwości wyświetlania JavaScript
JavaScript może „wyświetlać” dane na różne sposoby:
- Zapis do elementu HTML za pomocą
innerHTML. - Zapis do wyjścia HTML za pomocą
document.write(). - Pisanie w polu alertu za pomocą
window.alert(). - Pisanie do konsoli przeglądarki za pomocą
console.log().
Korzystanie z innerHTML
Aby uzyskać dostęp do elementu HTML, JavaScript może użyć document.getElementById(id)metody.
idAtrybut definiuje element HTML . Właściwość innerHTML definiuje zawartość HTML:
Przykład
<!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>
Zmiana właściwości innerHTML elementu HTML jest powszechnym sposobem wyświetlania danych w HTML.
Korzystanie z document.write()
Do celów testowych wygodnie jest używać document.write():
Przykład
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
Użycie document.write() po załadowaniu dokumentu HTML spowoduje usunięcie całego istniejącego HTML :
Przykład
<!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>
Metoda document.write() powinna być używana tylko do testowania.
Korzystanie z window.alert()
Możesz użyć pola alertu, aby wyświetlić dane:
Przykład
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
Możesz pominąć windowsłowo kluczowe.
W JavaScript obiekt window jest obiektem zasięgu globalnego, co oznacza, że zmienne, właściwości i metody domyślnie należą do obiektu window. Oznacza to również, że określenie windowsłowa kluczowego jest opcjonalne:
Przykład
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
alert(5 + 6);
</script>
</body>
</html>
Korzystanie z console.log()
Do celów debugowania możesz wywołać console.log()metodę w przeglądarce, aby wyświetlić dane.
Więcej o debugowaniu dowiesz się w następnym rozdziale.
Przykład
<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>
Drukuj JavaScript
JavaScript nie ma żadnego obiektu drukowania ani metod drukowania.
Nie możesz uzyskać dostępu do urządzeń wyjściowych z JavaScript.
Jedynym wyjątkiem jest to, że możesz wywołać window.print()metodę w przeglądarce, aby wydrukować zawartość bieżącego okna.
Przykład
<!DOCTYPE html>
<html>
<body>
<button onclick="window.print()">Print this page</button>
</body>
</html>