JavaScript-utgång


Innehållsförteckning

    Visa innehållsförteckning


JavaScript-visningsmöjligheter

JavaScript kan "visa" data på olika sätt:

  • Att skriva in i ett HTML-element med innerHTML.

  • Skriver in i HTML-utdata med document.write().

  • Skriver in i en varningsruta med window.alert().

  • Skriver in i webbläsarkonsolen med console.log().


Använder innerHTML

För att komma åt ett HTML-element kan JavaScript använda metoden document.getElementById(id).

Attributet id definierar HTML-elementet. Egenskapen innerHTML definierar HTML-innehållet:

Exempel

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

Prova själv →

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

Ändra innerHTML-egenskapen för ett HTML-element är ett vanligt sätt att visa data i HTML.


Använder document.write()

För teständamål är det bekvämt att använda document.write():

Exempel

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

</body>
</html>

Prova själv →

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

Om du använder document.write() efter att ett HTML-dokument har laddats, raderas all befintlig HTML:

Exempel

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

Prova själv →

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

Metoden document.write() bör endast användas för testning.



Använder window.alert()

Du kan använda en varningsruta för att visa data:

Exempel

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Prova själv →

<!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 hoppa över nyckelordet window.

I JavaScript är fönsterobjektet det globala scope-objektet. Det betyder att variabler, egenskaper och metoder som standard tillhör fönsterobjektet. Detta betyder också att det är valfritt att ange nyckelordet window:

Exempel

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Prova själv →

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html> 

Använder console.log()

För felsökningsändamål kan du anropa metoden console.log() i webbläsaren för att visa data.

Du kommer att lära dig mer om felsökning i ett senare kapitel.

Exempel

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

</body>
</html>

Prova själv →

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

JavaScript har inga utskriftsobjekt eller utskriftsmetoder.

Du kan inte komma åt utdataenheter från JavaScript.

Det enda undantaget är att du kan anropa metoden window.print() i webbläsaren för att skriva ut innehållet i det aktuella fönstret.

Exempel

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Prova själv →

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