JavaScript voi "näyttää" tietoja eri tavoilla:
Kirjoittaminen HTML-elementtiin käyttämällä innerHTML-koodia
.
Kirjoitetaan HTML-tulokseen käyttämällä document.write()
-komentoa.
Varoitusruutuun kirjoittaminen käyttämällä window.alert()
-komentoa.
Kirjoita selainkonsoliin käyttämällä console.log()
-komentoa.
innerHTML
avullaJavaScript voi käyttää HTML-elementtiä document.getElementById(id)
-menetelmän avulla.
Attribuutti id
määrittää HTML-elementin. Ominaisuus innerHTML
määrittää HTML-sisällön:
<!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>
Kokeile itse →
<!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>
HTML-elementin innerHTML-ominaisuuden muuttaminen on yleinen tapa näyttää tietoja HTML-muodossa.
document.write()
avullaTestaustarkoituksiin on kätevää käyttää document.write()
:ta:
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
Kokeile itse →
<!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>
Document.write()-funktion käyttäminen HTML-dokumentin lataamisen jälkeen poistaa kaiken olemassa olevan HTML-koodin:
<!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>
Kokeile itse →
<!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()-menetelmää tulee käyttää vain testaukseen.
window.alert()
-toimintoaVoit käyttää hälytysruutua tietojen näyttämiseen:
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<h2>My First Web Page</h2>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
Voit ohittaa avainsanan ikkuna
.
JavaScriptissä ikkunaobjekti on globaali laajuusobjekti. Tämä tarkoittaa, että muuttujat, ominaisuudet ja menetelmät kuuluvat oletusarvoisesti ikkunaobjektiin. Tämä tarkoittaa myös sitä, että ikkuna
-avainsanan määrittäminen on valinnaista:
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
alert(5 + 6);
</script>
</body>
</html>
Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<h2>My First Web Page</h2>
<p>My first paragraph.</p>
<script>
alert(5 + 6);
</script>
</body>
</html>
console.log()
-toimintoaViankorjaustarkoituksiin voit kutsua console.log()
-menetelmää selaimessa tietojen näyttämiseksi.
Saat lisätietoja virheenkorjauksesta myöhemmässä luvussa.
<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>
Kokeile itse →
<!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>
JavaScriptillä ei ole tulostusobjektia tai tulostusmenetelmiä.
Et voi käyttää tulostuslaitteita JavaScriptin avulla.
Ainoa poikkeus on, että voit kutsua window.print()
-menetelmää selain tulostaa nykyisen ikkunan sisällön.
<!DOCTYPE html>
<html>
<body>
<button onclick="window.print()">Print this page</button>
</body>
</html>
Kokeile itse →
<!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>