css # html # html5 # javascript # javascript alert # javascript console.log # javascript window.alert # js
JavaScript Output (Görüntüleme) Yapılır?
JavaScript; innerHTML, document.write(), window.alert(), alert(), console.log(), window.print() komutlarıyla çeşitli çıktılar almamızı sağlar.
JavaScript Görüntüleme Olanakları
JavaScript verileri farklı şekillerde “görüntüleyebilir”:
innerHTMLçıktısını kullanarak bir html öğesinde javascript verisini görüntüleyebiliriz.document.write()çıktısını kullanarak bir html çıktısında javascript verisini görüntüleyebiliriz.window.alert()çıktısını kullanarak bir uyarı penceresine javascript verilerini aktarabiliriz..console.log()çıktısını kullanarak tarayıcının konsolunda istediğimiz javascript verisini görüntüleyebiliriz.
innerHTML’yi kullanma
Bir HTML öğesine erişmek için JavaScript document.getElementById(id) yöntemi kullanabilir.
Nitelik id, HTML öğesini tanımlar. Özellik innerHTML , HTML içeriğini tanımlar:
See the Pen JavaScript Output (Görüntüleme) Nasıl Alınır? 1 by ArmyYazılım (@armyyazilim) on CodePen.
Bir HTML öğesinin innerHTML özelliğini değiştirmek, verileri HTML’de görüntülemenin yaygın bir yoludur.
Document.write() işlevini kullanma
Test amacıyla, aşağıdakileri kullanmak uygundur document.write():
See the Pen JavaScript Output (Görüntüleme) Nasıl Alınır? 2 by ArmyYazılım (@armyyazilim) on CodePen.
Document.write() ile innerHTML arasındaki farkı görebiliyorsunuz. innerHTML ‘de bir javascript değerini “id” tanımladığımız html etiketini buluyoruz ve sonra o etiketin içine değeri aktarıyoruz.
Document.write() ‘de ise direkt etiket aramadan javascript değerini herhangi bir etiketin “id” sini bulmadan bir çıktı olarak html belgede görüntüleyebiliyoruz.
Bir HTML belgesi yüklendikten sonra document.write() işlevinin kullanılması, mevcut tüm HTML’yi siler :
See the Pen JavaScript Output (Görüntüleme) Nasıl Alınır? 3 by ArmyYazılım (@armyyazilim) on CodePen.
Örnekte gördüğünüz gibi bir document.write() çıktısını html belgemiz yüklendikten sonra bir buton veya bir linke işlev olarak atarsak ve bu buton veya linki kullanırsak html belgemizdeki bütün html içerik silinir ve document.write() çıktısındaki değer ekranda görünür. Dikkat edilmesi gereken bir unsurdur.
Document.write() yöntemi yalnızca test için kullanılmalıdır.
window.alert() işlevini kullanma
Verileri görüntülemek için bir uyarı kutusu kullanabilirsiniz:
See the Pen Untitled by ArmyYazılım (@armyyazilim) on CodePen.
Bu sayfayı açtığınızda bu şekilde bir uyarı göreceksiniz:
İşte bu görseldeki uyarı yukarıdaki kullandığımız kod dizisinden kaynaklıdır.
“window” anahtar kelimeyi atlayabilirsiniz.
JavaScript’te pencere nesnesi, genel kapsam nesnesidir. Bu, değişkenlerin, özelliklerin ve yöntemlerin varsayılan olarak pencere nesnesine ait olduğu anlamına gelir. Bu aynı zamanda, anahtar kelimeyi belirtmenin windowisteğe bağlı olduğu anlamına gelir:
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
alert(5 + 6);
</script>
</body>
</html>
Yine bu kod diziside yukarıdaki gibi çalışacaktır. Hiç bir sorun oluşturmaz.
console.log()’u kullanma
console.log()Hata ayıklama amacıyla, verileri görüntülemek için tarayıcıdaki yöntemi çağırabilirsiniz .
console.log()’u hataları ayıklamak için yazılımcıların sıklıkla kullandığı bir çıktı yöntemidir.
<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>
Yine bu kodu kullandıktan sonra tarayıcınızın konsoluna gittiğinizde şu şekilde bir çıktı alacaksınız:
Toplam değerin “11” olduğunu göreceksiniz.
JavaScript Print
JavaScript’te herhangi bir yazdırma nesnesi veya yazdırma yöntemi yoktur.
Çıkış cihazlarına JavaScript’ten erişemezsiniz.
window.print() Bunun tek istisnası, geçerli pencerenin içeriğini yazdırmak için yöntemi tarayıcıda çağırabilirsiniz.
<!DOCTYPE html>
<html>
<body>
<button onclick="window.print()">Bu sayfayı yazdır!</button>
</body>
</html>
Çıktı;
Html Header Etiketi Nedir? Nasıl Kullanılır?
JavaScript Değişkenler (Variables) Nedir ve Nasıl Kullanılır?
JAVASCRİPT ve JQUERY
JavaScript Tek Satırlı ve Çok Satırlı Yorum Satırı Nasıl Kullanılır?
JAVASCRİPT ve JQUERY
JavaScript Syntax Kod Yazma Kuralları!
JAVASCRİPT ve JQUERY
Bir cevap yazın