JavaScript ulostulo

JavaScript ei tarjoa mitään sisäänrakennettuja tulostus- tai näyttämismetodeja.

JavaScript-näyttösuunnitelma

JavaScript voi näyttää tiedot eri tavoin:

  • kirjoittaa window.alert() kirjoittaa varoitusruutuun
  • kirjoittaa document.write(); kirjoittaa HTML-lähtöön
  • kirjoittaa innerHTML kirjoittaa HTML-elementtiin
  • kirjoittaa console.log(); kirjoittaa selaimen kontrollipaneeliin

innerHTML:n avulla

Jos haluat käyttää HTML-elementtiä, JavaScript voi käyttää document.getElementById(id) menetelmä.

id Ominaisuus määrittää HTML-elementin. innerHTML-ominaisuus määrittää HTML-sisällön:

Esimerkki

<!DOCTYPE html>
<html>
<body>
<h1>Minun ensimmäinen sivuni</h1>
<p>Minun ensimmäinen kappaleeni</p>
<p id="demo"></p>
<script>
 document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>

Kokeile itse

Huomio:Muuttaminen HTML-elementin innerHTML-ominaisuus on yleinen tapa näyttää tietoja HTML:ssä.

document.write() -komentoa.

Testitarkoituksiin käytetään document.write(); on erittäin helppokäyttöinen:

Esimerkki

<!DOCTYPE html>
<html>
<body>
<h1>Minun ensimmäinen sivuni</h1>
<p>Minun ensimmäinen kappaleeni</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>

Kokeile itse

Huomio:HTML-dokumentin täydellisen lataamisen jälkeen document.write(); KäytäPoista kaikki olemassa oleva HTML :

Esimerkki

<!DOCTYPE html>
<html>
<body>
<h1>Minun ensimmäinen sivuni</h1>
<p>Minun ensimmäinen kappaleeni</p>
<button onclick="document.write(5 + 6)">Kokeile</button>
</body>
</html>

Kokeile itse

Huomio:document.write(); menetelmä on vain testiin.

window.alert() -komentoa.

Voit käyttää varoitusikkunaa tietojen näyttämiseen:

Esimerkki

<!DOCTYPE html>
<html>
<body>
<h1>Minun ensimmäinen sivuni</h1>
<p>Minun ensimmäinen kappaleeni</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>

Kokeile itse

console.log() -komentoa.

Selaimessa voit käyttää console.log(); menetelmät tietojen näyttämiseen.

Aktivoi selaimen kontrollipaneeli F12:n avulla ja valitse valikosta "Kontrolli".

Esimerkki

<!DOCTYPE html>
<html>
<body>
<h1>Minun ensimmäinen sivuni</h1>
<p>Minun ensimmäinen kappaleeni</p>
<script>
console.log(5 + 6);
</script>
</body>
</html>

Kokeile itse