JavaScript ile bir bilgiyi ekrana yazdırırken farklı yöntemler kullanılır:
innerHTML kullanarakdocument.write() kullanarakwindows.alert() ile ekrana bir uyarı mesajı getirmekconsole.log() ile bilgi yazdırmakBu kullanılan yöntemlerin sonuçları ekranda nasıl görüntülenir aşağıdaki örneklerde bulabilirsiniz.
JavaScript ile bir HTML elementine erişmek için document.getElementById(id) ifadesini kullanırız.
Parantez içindeki id ifadesi HTML elementinin kimliğini ifade eder.
Örneğin, JavaScript ile bir <p> elementinin içindeki yazıyı değiştirmek istiyorsak önce elemente erişmeli ve sonra içeriğini değiştirmeliyiz.
<!DOCTYPE html>
<html>
<body>
<h1>İşk Web Sayfam</h1>
<p>İlk Paragraf</p>
<p id="yazi"></p>
<script>
document.getElementById("yazi").innerHTML ="Bu metin javascript ile yazdırılmıştır.";
</script>
</body>
</html>
Bu örnekte <p> etiketi öncelikle getElementById("yazi") ile yakalanmış daha sonra innerHTML("") metodu ile içindeki yazı değiştirilmiştir.
document.write() en temel JavaScript komutlarından biridir. Parantez içine yazılan metin ekrana yazdırılır.
Genelde bir işlem yaptığınızda oluşan ara sonucu ekrana yazdırmak, çıkan sonucu test etmek için kullanılır.
<!DOCTYPE html>
<html>
<body>
<h1>Web Sayfam</h1>
<p>Paragraf</p>
<script>
document.write("Merhaba js!");
</script>
</body>
</html>
Ekrana bir mesaj kutusu getirmek istiyorsanız window.alert() kullanabilirsiniz.
<!DOCTYPE html>
<html>
<body>
<h1>Web sayfam</h1>
<button onclick="uyari()">Tıkla</button>
<script>
function uyari(){
window.alert("Bu bir mesaj kutusudur.");
}
</script>
</body>
</html>
console.log() diğerlerinden biraz daha farklıdır. Bu komutu kullandığınızda HTML içinde veya web sitesinde herhangi bir şey görüntülenmez.
Fakat kullandığınız tarayıcının konsol ekranında işlemin çıktırı görüntülenir.
Özellikle yazdığınız kodu test ederken, hata giderirken kullanılan bir komuttur.
<!DOCTYPE html>
<html>
<body>
<p>Bu işlem tarayıcı konsolunda görüntülenir.</p>
<p>Tarayıcı konsolunu açmak için F12 tuşuna basın</p>
<script>
console.log("Tarayıcı konsolu test");
</script>
</body>
</html>
Bu işlem sadece tarayıcı konsolunda görüntülenir.