HTML ile Script Kullanımı ~ Webkolog

Merhaba sevgili Webkolog okurları,

Bugün sizlere web sayfalarımızı sadece statik bilgilerden ibaret olmaktan çıkarıp, interaktif ve dinamik deneyimler sunan o büyülü araçtan bahsedeceğim: JavaScript (JS). Evet, JavaScript, web sitelerimize hareket katmanın, kullanıcı etkileşimlerini yönetmenin ve sayfalarımızı "canlandırmanın" en etkili yolu. HTML 4.01 ile JavaScript kodlarını sayfalarımıza nasıl dahil edeceğimizi ve bu güçlü betik dilini nasıl kullanacağımızı adım adım inceleyeceğiz. Haydi, web'in geleceğine bir adım atalım!

JavaScript, bir programlama dilidir ve web tarayıcılarında çalışarak sayfaların davranışlarını kontrol eder. Kullanıcı bir butona tıkladığında bir şey olmasını sağlamak, form girişlerini doğrulamak, animasyonlar oluşturmak veya sayfa içeriğini dinamik olarak değiştirmek gibi birçok şeyi JavaScript ile yapabiliriz.

1. Satır İçi JavaScript (Inline Script): Hızlı Etkileşimler İçin

Bazen belirli bir HTML öğesiyle doğrudan ilişkili küçük bir JavaScript kodu çalıştırmak isteriz. İşte bu noktada satır içi JavaScript devreye girer. Genellikle bir HTML olayına (örneğin bir butona tıklama - onclick) yanıt vermek için kullanılır.

<button onclick="alert('Merhaba Webkolog!');">Bana Tıkla!</button>

Bu örnekte, butona tıklandığında tarayıcıda "Merhaba Webkolog!" mesajını gösteren küçük bir uyarı penceresi açılır. onclick gibi olay yöneticisi özelliklerinin değerine doğrudan JavaScript kodunu yazabiliriz.

Bu yöntem, küçük ve tek kullanımlık işlevler için kullanışlıdır. Ancak karmaşık veya çoklu kullanıma sahip kodlar için pek uygun değildir, çünkü kodun tekrarına ve yönetilmesi zor bir yapıya yol açabilir.

2. Sayfa İçi JavaScript (Internal Script): Belirli Bir Sayfa İçin Genel Fonksiyonlar

Eğer belirli bir HTML belgesinde birden fazla yerde kullanacağınız veya sayfa yüklendiğinde çalışacak JavaScript kodlarınız varsa, sayfa içi JavaScript kullanmak daha düzenli bir yaklaşımdır. Bu yöntemde, JavaScript kodlarınızı HTML belgesinin <head> veya <body> bölümüne yerleştirdiğimiz <script> etiketlerinin arasına yazarız.

<head>
<title>Dinamik Webkolog Sayfası</title>
<script type="text/javascript">
  function karsilamaMesaji() {
    document.write("Hoş geldiniz, sevgili Webkolog ziyaretçisi!");
  }
</script>
</head>
<body onload="karsilamaMesaji()">
  <!-- Sayfa yüklendiğinde mesajı gösterir -->
</body>

Burada, karsilamaMesaji() adında bir JavaScript fonksiyonu tanımladık ve bu fonksiyonu <body> etiketinin onload özelliği aracılığıyla sayfa yüklendiğinde çalıştırdık. type="text/javascript" özelliği, tarayıcıya bu etiketler arasındaki içeriğin JavaScript olduğunu bildirir.

Genellikle <script> etiketlerini <head> bölümüne koyarız, ancak sayfa içeriği tamamen yüklendikten sonra çalışması gereken kodlar için <body> etiketinin sonuna yakın bir yere yerleştirmek, sayfanın daha hızlı görünür hale gelmesini sağlayabilir.

3. Harici JavaScript Dosyası (External Script): Web Sitenizin Geneline Etki Eden Betikler

Tüm web sitenizde kullanacağınız veya farklı sayfalarda tekrar tekrar kullanacağınız JavaScript kodları için en iyi yöntem harici JavaScript dosyaları kullanmaktır. Bu yöntemde, tüm JavaScript kodlarınızı ayrı bir .js uzantılı dosyaya yazarsınız ve bu dosyayı her HTML belgesine bağlarsınız.

Öncelikle, JavaScript kodlarınızı içeren bir dosya oluşturun (örneğin, webkolog.js):

// webkolog.js dosyasının içeriği
function selamVer() {
  alert("Webkolog.net'e hoş geldiniz!");
}

document.write("Bu metin JavaScript'ten yazıldı!");

Ardından, bu JavaScript dosyasını HTML belgenizin <head> veya <body> bölümüne <script> etiketi ile bağlarsınız:

<head>
<title>Webkolog ile Harici JS</title>
<script type="text/javascript" src="webkolog.js"></script>
</head>
<body>
  <button onclick="selamVer();">Beni Tıkla ve Selam Ver!</button>
</body>

src="webkolog.js": JavaScript dosyasının yolunu veya URL'sini belirtir.
type="text/javascript": JavaScript dosyası olduğunu belirtmek için kullanılır.

Bu yöntem, kodlarınızı düzenli tutar, sayfalarınızın daha hızlı yüklenmesini sağlar (tarayıcılar .js dosyalarını önbelleğe alabilir) ve kod tekrarını önler. En önemlisi, sitenizin herhangi bir yerindeki bir JavaScript kodunu güncellediğinizde, bu değişiklik sitenizdeki tüm ilgili sayfalara yansır.

`<noscript>` Etiketi: JavaScript Desteklemeyen Tarayıcılar İçin

Bazı kullanıcıların tarayıcılarında JavaScript devre dışı bırakılmış olabilir veya çok eski tarayıcılar JavaScript'i desteklemeyebilir. Bu gibi durumlar için <noscript> etiketini kullanarak alternatif içerik sunabiliriz.

<script type="text/javascript">
  document.write("Bu yazı JavaScript tarafından yazıldı!");
</script>
<noscript>
  <p>Tarayıcınız JavaScript'i desteklemiyor veya devre dışı bırakılmış. Sayfanın tam işlevselliği için lütfen JavaScript'i etkinleştirin.</p>
</noscript>

Eğer kullanıcının tarayıcısı JavaScript'i çalıştırıyorsa, <script> içindeki kod çalışır. Çalıştırmıyorsa, <noscript> içindeki içerik gösterilir. Bu, web sitenizin erişilebilirliğini artırır.

IE İçin Özel Yorum Satırları (Conditional Comments)

2006 yılında, farklı tarayıcıların HTML ve CSS'i farklı yorumlaması yaygın bir durumdu, özellikle de Internet Explorer. Bu sorunları aşmak için koşullu yorumlar (conditional comments) kullanıyorduk. Bu, sadece belirli IE sürümleri için JavaScript veya CSS dosyalarını yüklemenizi sağlar.

<!--[if lt IE 7]>
  <script src="http://www.webkolog.net/themes/js/ie6-fix.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="ie6-stil.css" />
<![endif]-->

Yukarıdaki örnek, sadece Internet Explorer 7'den eski sürümler (IE6 ve altı) için "ie6-fix.js" JavaScript dosyasını ve "ie6-stil.css" CSS dosyasını yükler. Kullanılan operatörler şunlardır:

lt (less than): Belirtilen sürümden küçükse.
lte (less than or equal): Belirtilen sürüme eşit veya küçükse.
gt (greater than): Belirtilen sürümden büyükse.
gte (greater than or equal): Belirtilen sürüme eşit veya büyükse.
!: Belirtilen koşul doğru değilse.
Örnek: <!--[if IE 6]> sadece IE6 için, <!--[if !IE]> ise IE dışındaki tarayıcılar için.

HTML 4.01 ile JavaScript'i kullanmak, web sitelerinize etkileşim, dinamizm ve kullanıcı dostu özellikler kazandırmanın anahtarıdır. Bu teknikleri ustalaşarak, ziyaretçilerinizi etkileyecek ve onlara unutulmaz deneyimler sunacak web siteleri oluşturabilirsiniz. Web'in geleceği, etkileşimli içerikte yatıyor!

Webkolog'u takipte kalın!

Hepinize bol kodlu ve başarılı projeler dilerim!

3 Ağustos 2006 Perşembe