JavaScript-tulostus


Sisällysluettelo

    Näytä sisällysluettelo


JavaScript-näyttömahdollisuudet

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 avulla

JavaScript 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:

Esimerkki

<!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() avulla

Testaustarkoituksiin on kätevää käyttää document.write():ta:

Esimerkki

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

Esimerkki

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



Käyttämällä window.alert()-toimintoa

Voit käyttää hälytysruutua tietojen näyttämiseen:

Esimerkki

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

Esimerkki

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

Käyttämällä console.log()-toimintoa

Viankorjaustarkoituksiin voit kutsua console.log()-menetelmää selaimessa tietojen näyttämiseksi.

Saat lisätietoja virheenkorjauksesta myöhemmässä luvussa.

Esimerkki

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

JavaScript-tulostus

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.

Esimerkki

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