JavaScript output

Indholdsfortegnelse

    Vis indholdsfortegnelse

JavaScript-visningsmuligheder

JavaScript kan "vise" data på forskellige måder:

  • Skrivning i et HTML-element ved hjælp af innerHTML.

  • Skrivning i HTML-outputtet ved hjælp af document.write().

  • Skrivning i en advarselsboks ved hjælp af window.alert().

  • Skrivning ind i browserkonsollen ved hjælp af console.log().

Brug af innerHTML

For at få adgang til et HTML-element kan JavaScript bruge metoden document.getElementById(id).

Attributten id definerer HTML-elementet. Egenskaben innerHTML definerer HTML-indholdet:

Eksempel

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

Prøv det selv →

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

Ændring af den indreHTML-egenskab for et HTML-element er en almindelig måde at vise data i HTML.

Brug af document.write()

Til testformål er det praktisk at bruge document.write():

Eksempel

<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
 <p>My first paragraph.</p>
 
<script>
document.write(5 + 6);
</script>

</body>
</html>

Prøv det selv →

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

Brug af document.write() efter at et HTML-dokument er indlæst, vil slette al eksisterende HTML:

Eksempel

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

Prøv det selv →

<!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()-metoden bør kun bruges til test.

Brug af window.alert()

Du kan bruge en advarselsboks til at vise data:

Eksempel

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>
 
<script>
window.alert(5 + 6);
</script>

</body>
</html>

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

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

<script>
window.alert(5 + 6);
</script>

</body>
</html>

Du kan springe søgeordet window over.

I JavaScript er vinduesobjektet det globale omfangsobjekt. Det betyder, at variabler, egenskaber og metoder som standard hører til vinduesobjektet. Dette betyder også, at det er valgfrit at angive window søgeordet:

Eksempel

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>
 
<script>
alert(5 + 6);
</script>

</body>
</html>

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

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

<script>
alert(5 + 6);
</script>

</body>
</html>

Brug af console.log()

Til fejlretningsformål kan du kalde metoden console.log() i browseren for at vise data.

Du vil lære mere om fejlretning i et senere kapitel.

Eksempel

<!DOCTYPE html>
<html>
<body>
 
<script>
console.log(5 + 6);
</script>

</body>
</html>

Prøv det selv →

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

JavaScript har ikke noget printobjekt eller printmetoder.

Du kan ikke få adgang til outputenheder fra JavaScript.

Den eneste undtagelse er, at du kan kalde metoden window.print() i browseren for at udskrive indholdet af det aktuelle vindue.

Eksempel

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Prøv det selv →

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