Output JavaScript
Possibilità di visualizzazione JavaScript
JavaScript può "visualizzare" i dati in diversi modi:
- Scrivere in un elemento HTML, utilizzando
innerHTML
. - Scrivere nell'output HTML utilizzando
document.write()
. - Scrivere in una finestra di avviso, utilizzando
window.alert()
. - Scrivendo nella console del browser, utilizzando
console.log()
.
Utilizzo di innerHTML
Per accedere a un elemento HTML, JavaScript può utilizzare il document.getElementById(id)
metodo.
L' id
attributo definisce l'elemento HTML. La innerHTML
proprietà definisce il contenuto HTML:
Esempio
<!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>
La modifica della proprietà innerHTML di un elemento HTML è un modo comune per visualizzare i dati in HTML.
Utilizzo di document.write()
A scopo di test, è conveniente utilizzare document.write()
:
Esempio
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
L'uso di document.write() dopo il caricamento di un documento HTML eliminerà tutto l'HTML esistente :
Esempio
<!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>
Il metodo document.write() dovrebbe essere utilizzato solo per il test.
Utilizzo di window.alert()
È possibile utilizzare una casella di avviso per visualizzare i dati:
Esempio
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
Puoi saltare la window
parola chiave.
In JavaScript, l'oggetto finestra è l'oggetto ambito globale, ciò significa che variabili, proprietà e metodi per impostazione predefinita appartengono all'oggetto finestra. Ciò significa anche che la specifica della window
parola chiave è facoltativa:
Esempio
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
alert(5 + 6);
</script>
</body>
</html>
Utilizzo di console.log()
Per scopi di debug, puoi chiamare il console.log()
metodo nel browser per visualizzare i dati.
Imparerai di più sul debug in un capitolo successivo.
Esempio
<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>
Stampa JavaScript
JavaScript non ha alcun oggetto di stampa o metodi di stampa.
Non puoi accedere ai dispositivi di output da JavaScript.
L'unica eccezione è che puoi chiamare il window.print()
metodo nel browser per stampare il contenuto della finestra corrente.
Esempio
<!DOCTYPE html>
<html>
<body>
<button onclick="window.print()">Print this page</button>
</body>
</html>