JavaScript ile Çalışmak

JavaScript, web sayfalarına etkileşim kazandırmak için kullanılan bir programlama dilidir. Günümüzde neredeyse tüm modern tarayıcılar JavaScript’i eksiksiz şekilde desteklemektedir. İlk zamanlarda sınırlı olan bu destek, bugün web’in temel taşlarından biri haline gelmiştir.

Bilgi
JavaScript öğrenebilmek için temel HTML bilgisi gereklidir. Çünkü JavaScript genellikle HTML öğeleriyle birlikte çalışır.

JavaScript Kodları Sayfaya Nasıl Yerleştirilir?

JavaScript kodları HTML sayfalarına <script> etiketi kullanılarak eklenir. Bu etiket sayfanın <head> veya <body> bölümü içinde istenilen herhangi bir yerde kullanılabilir.

Önemli Not
Eski örneklerde görülen language="JavaScript" kullanımı artık önerilmez. Modern HTML’de sadece <script> yeterlidir.

Basit Bir JavaScript – HTML Örneği

Aşağıdaki örnekte, hem HTML hem de JavaScript ile ekrana yazı yazdırılmaktadır. Bu sayede HTML ve JavaScript farkı net olarak görülebilir. 


<!DOCTYPE html>
<html>
<head>
  <title>İlk JavaScript Örneği</title>
</head>
<body>

  Bu yazı HTML ile yazdırılmıştır.
  <br>

  <script>
    document.write("Bu yazı JavaScript içerisinden yazdırılmıştır.");
  </script>

  <br>
  HTML bölümü..

</body>
</html>

Ekran Çıktısı

Bu yazı HTML ile yazdırılmıştır.
Bu yazı JavaScript içerisinden yazdırılmıştır.
HTML bölümü..

document.write() Hakkında

Örnekte kullanılan document.write() komutu, JavaScript içerisinden HTML sayfasına yazı yazdırmak için kullanılır. Ancak modern JavaScript uygulamalarında bu yöntem artık önerilmemektedir.

Uyarı
document.write() sayfa yüklendikten sonra çalıştırılırsa, tüm sayfa içeriğini silebilir. Bu yüzden gerçek projelerde DOM manipülasyonu tercih edilir.

Modern Yaklaşım: DOM Üzerinden Yazdırma

Günümüzde JavaScript ile HTML içeriği değiştirmek için document.getElementById veya benzeri DOM metodları kullanılır. 


<h3 id="mesaj"></h3>

<script>
  document.getElementById("mesaj").textContent =
    "Bu yazı JavaScript ile DOM üzerinden yazdırıldı.";
</script>
Avantaj
Bu yöntem hem daha güvenlidir hem de sayfanın tamamını etkilemeden sadece ilgili bölümü günceller.

Özet

  • JavaScript, HTML sayfalarına etkileşim kazandırır
  • Kodlar <script> etiketi içinde yazılır
  • document.write() öğretici amaçlıdır, gerçek projelerde önerilmez
  • Modern JavaScript, DOM manipülasyonu ile çalışır
JS Kod Örnekleri Tüm Örnekler
Sonraki →
If Deyimi