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()
.
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:
<!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.
document.write()
För teständamål är det bekvämt att använda document.write()
:
<!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:
<!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.
window.alert()
Du kan använda en varningsruta för att visa data:
<!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
:
<!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>
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.
<!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 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.
<!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>