Javascript Kodlarını Ekrana Yazdırma (document.write)

Javascript Kodlarını Ekrana Yazdırma (document.write)

Javascript tam olarak dinamik bir dil yani sunucu taraflı bir dil olmasa da HTML’e göre dinamiktir ve komutlarla yönlendirmeler yapabiliriz, örneğin ekrana istediğimiz bir yazıyı istediğimiz bir zaman da yazdırabiliriz. Ya da istediğimiz bir div içerisinde ID tanımlayarak içerik gönderebiliriz. Bunlar gibi daha bir çok özelliği javascript ile kullanarak html dokümanlarımızı daha canlı hale getirmemiz mümkün.

Bu makalemizde de javascript ile ekrana yazı yazdırma yollarından bahsedeceğim. Ekrana yazı yazdırmak için kullandığımız komutlara bakacak olursak:

HTML elemanlarına yazdırma – innerHTML,

HTML sayfasına yazdırma – document.write(),

Açılır Uyarı Penceresine Yazdırma– alert(),

Browser konsoluna yazdırma – console.log()

InnerHTML Kullanımı:

InnerHTML basitçe ifade etmek gerekirse; Herhangi bir html elemanı içerisindeki kodu almamıza ve html elemanının değerine de istediğimizi yazdırmamıza olanak veren javascript özelliği. InnerHTML  “document.getElementById(ID)” Şeklinde yazılır ve parantez içerisindeki “ID” değeri  ile kod amacına ulaştırılır. Bununla ilgili örnek yaparsak daha iyi anlayacağız.

innerHTML kullanarak herhangi bir alandan veri almak için.

var  isim=document.getElementById("degisken").innerHTML;

ID değeri “degisken” olan HTML öğesine eriştik “innerHTML” komutu ile içeriği çektik ve isim değişkenine tanımladık

innerHTML kullanarak herhangi bir html alanına veriyi aşağıdaki gibi yerleştiririz.

document.getElementById("degisken ").innerHTML="manav";

ID değeri “degisken” olan HTML öğesine ulaştık ve innerHTML komutu ile bu alana “manav” yazdırmayı başardık.

document.write() kullanımı

document.write komutu genelde javascript kodlarını denemek amacı ile kullanılır ve kodların düzgün çalışıp çalışmadığını anlamak için hızlıca ekrana bastırılır. Yukarıda yazdığım kod parçacığında olduğu gibi de kullanabilirsiniz ayrıyeten şu şekilde yazılabilir

<p>bu kısım paragraf alanı</p>

<script>

  document.write("Elma armut bu manavda satılıyor");

</script>

document.write() metodu onclik komutu gibi etkileşimli metodlarla kullanıldığındasayfada geriye kalan HTML ögeleri kaybolacaktır.

<p>bu kısım paragraf alanı</p>

<button onclick="document.write(' Elma armut bu manavda satılıyor ')">Buraya tıkla</button> 

Javascript alert() kullanımı

Ekranda herhangi bir işlemden sonra uyarı penceresi çıkarmak istiyorsanız örneğin bir formun yanlış doldurulması gibi, açılır pencere şeklinde uyarı penceresi açtırabilirsiniz.

<script>

  alert("Elma armut bu manavda satılıyor ");

</script>

Ya da butona tıklandığında da uyarı penceresi açtırabilirsiniz. Örneğin:

<button onclick="alert(' Elma armut bu manavda satılıyor ')">Buraya tıkla</button>

console.log() kullanımı

<script>

var diziDegeri=["elma","armut","kiraz"];

document.write(diziDegeri);

console.log(diziDegeri);

</script>

Yukarıdaki örnek kodumuzda öncelikle “diziDegeri” ifadesine 3adet meyveyi dizi olarak atadık. Daha sonra document.write(diziDeger) ifadesi ile ekrana yazdırdık ve ardından console.log(diziDegeri) ifadesini de kullanarak tarayıcımızın console’una yazdırdık.