Quirksmode.org/Javascript Yerleşimi

Ceviz Viki sitesinden

Git ve: kullan, ara

This page has been copied from http://quirksmode.org/js/placejs.html for permitted translation purposes.

Quirksmode.org yazıları : Tanışalım | Javascript Yerleşimi | Nesne kontrolü | İfadeler | Tarayıcı tespiti

Detaylı içindekiler tabloları için : Genel içindekiler tablosu | Javascript bölümünün içindekiler tablosu


Konu başlıkları

Javascript i sayfalarınıza dahil etmek

Tarayıcınızın bir Javascript betiğini çalıştırıp-çalıştırmadığından emin olabilmek için öncelikle Javascript kodunu sayfanıza dahil etmeniz gerekir. Bu işlemin bir zorluğu yoktur, fakat davranış -kod- (Javascript) ile yapıyı (XHTML) birbirinden ayırmalısınız.

Bunu yapmanızın iki yolu vardır, Harici Javascript kullanmak bunu yapmanın en iyi yoludur, çünkü Javascript kodunuzun HTML dosyasının dışında kalır. Bu sayfanızın bakımını (geliştirilmesini) kolaylaştırır, çünkü sayfa sadece XHTML içermektedir. Ayrıca, Javascript davranışlarının tüm site için tek dosyadan kolayca değiştirebilmenizi sağlar.

Javascript i sayfanın içine direkt olarak da ekleyebilirsiniz, ancak bu yöntem eskimiştir. Bu yazıda <noscript> tagının nasıl kullanıldığına da kısaca göz atacağız.

Harici Javascript

Sayfalarınıza Javascript dosyalarını harici olarak (sayfanın içine kodu yazmadan) dahil etmelisiniz. Bu yöntemin çok avantajı vardır:

  1. Bir dosyayı güncellediğiniz zaman, o betik dosyasını kullanan tüm sayfalarda güncelleme yapmış olursunuz.
  2. Sayfalar daha hızlı yüklenecektir, çünkü hariçten dahil edilen dosyalar tarayıcı tarafından ara-belleğe* (cache) saklanır, böylece her sayfa yüklenişinde tarayıcı o dosyayı yeniden yüklemeyecektir.

Ben (Peter Paul Koch) bu sitedeki (Quirksmode.org) her sayfada bir Javascript dosyasını şu şekilde dahil ediyorum:

<script src="../quirksmode.js"></script>

Böylece sayfa yüklendiği zaman, tarayıcı aynı zamanda quirksmode.js dosyasının içindeki betiği de sayfa ile beraber yüklüyor. Kaynağı görüntülediğiniz zaman betiğin kaynak kodun içinde görünmediğine sadece dahil etme komutunu (include) görüyorsunuz, buna dikkat edin. Bu dosya içinde yer alan tüm fonksiyon ve değişkenler, sayfanın içinde bulunan diğer javascript betikleriyle kullanılabilir haldedir.

Bu dosyayı bütün sayfalarımda kullanmak istediğim betikleri bir arada tutmak için kullanıyorum, örneğin ` sayfa en son ne zaman değiştirildi` (last modified) betiği. Dahil edilen bu dosyayı görmek istiyorsanız buradan bilgisayarınıza indirebilirsiniz : [1].

Bu sayfaya testIt() adında özel bir fonksiyon içeren bir betik dosyası dahil edilmiştir. (Çevirinin yapıldığı orijinal sayfa kastediliyor.) Bunu çalıştırmayı deneyip tarayıcınızın betik dahil etme yeteneğini test edebilirsiniz.

Eski tarayıcılarda hata çıkmamasını sağlamak

<script> etiketini dahil edilen dosya içinde kullanmayın, sadece javascript kodunu kullanın. Her zaman dahil edilen dosyayı <head> düğümünün içine yazın. Netscape 3.01 tarayıcısında <head> düğümünden başka yerde dahil edilen kodlarla ağır sorunlar yaşanır. Ek olarak, sunucuyu .js dosyalarını application/x-javascript MIME tipinde göndermesi için ayarlayın. Eğer başka tipte yollayacak olursanız Netscape 3 (en azından o tarayıcı, diğerlerinde de sorun çıkabilir) kullanıcıya dosyayı indirmek veya açmak isteyip istemediğini soracaktır, bu şüphesiz kullanıcının aklını epey karıştıracaktır.

<script> etiketine ID özelliği eklemeyin. Explorer içinde buna izin verilmiştir, ancak Netscape 4 tarayıcısında 'ID' özelliği eklenmiş <script> etiketi etkisizleşir ve içine yazılan betik çalıştırılmaz.

Eğer tarayıcıların harici javascript dosyalarını dahil etme desteği olmadığında hata mesajı vermemesini istiyorsanız, anlatacağım yöntemlerden birini kullanabilirsiniz. Varsayalım ki, her sayfaya lastMod() isimli fonksiyonu eklediniz. Onu çağıracağınız sırada, önce varlığını kontrol ediniz:

if (self.lastMod) document.write(lastMod())

Bir başka metod ise şöyle

<script>
function lastmod() {}
</script>
<script src="js.js"></script>

Önce lastMod() adında boş bir fonksiyon tanımlıyoruz, eğer harici dosya eklemek destekleniyorsa, boş fonksiyon dahil edilen dosyadaki fonksiyon tarafından iptal edilir. Böylece fonksiyon en eski tarayıcılarda bile daima tanımlanmış olur.

<noscript>

<noscript> tagı ile Javascript desteklemeyen tarayıcılara veya Javascript ayarlarından etkisiz hale getirilmiş kullanıcılara HTML olarak içerik gösterebilirsiniz. Bu Javascript desteklemeyen / etkisiz tarayıcısı olan kullanıcılara karşı "üzgünüz" demek için veya onlara alternatif içerik sunmak için bazen kullanışlı bir yoldur.

Bu tag şöyle çalışır: Betik çalıştıramayan tarayıcılar bu tagı bilmez, görmezden gelir ve içinde ne varsa onu yazdırır. Betik çalıştırabilen tarayıcılar bu tagın ne anlama geldiğini bilir ve eğer Javascript etkin ise içinde yazanları göstermezler.

Maalesef Netscape 2 bu kullanışlı tagı desteklemez, Netscape 2 kullanıcıları script ve noscript tagının içinde yazanları birlikte görürler. Bu konuda yapabileceğiniz hiçbir şey yoktur. Neyse ki Netscape 2 artık yaygın olarak kullanılmıyor.

defer özelliği

Sadece Windows üzerinde çalışan Explorer 4+ defer isimli bir özellik ile döküman tamamen yorumlanıncaya kadar betiğin çalışmasını erteleyebilir.

W3C HTML 4.0 belirtiminde <script> tagları için bir kural tanımlanmıştır:

<script language="javascript" type="text/javascript" defer>

İlk ortaya çıktığında bu özellik tarayıcıya sayfanın içeriğini değiştirmemesi konusunda bir tavsiyeden daha fazlası değildi. (Örneğin document.write kullanarak) Bu yüzden tarayıcı bütün betiğin yorumlanması ve çalıştırılmasını beklemeden HTML yorumlamasına hemen geçebilir. Bu eski sistemlerde biraz yorumlama (parsing) zamanı kazandırır.

Yine de, Explorer 4 ve üzeri tarayıcılarda defer özelliğinin anlamı biraz değiştirilmiştir. defer uygulanmış (deferred) bir betik sadece sayfa tamamen yorumlandıktan sonra çalıştırılır. Örneğin:

<body>
<script language="javascript" type="text/javascript" defer>
<!--
alert(document.forms[0].elements.length);
// -->
</script>
 
<form>
<input value="Bla">
</form>
</body>

Normalde alert çağrısı bize şu hatayı vermelidir : sayfa henüz işlenecek bir form bulundurmamaktadır. defer özelliğini script etiketine (tag) ekleyerek, alert çağrısının çalıştırılmasını erteliyor ve sayfa yorumlandıktan sonra bize formun geçerli uzunluğu olan 1 değerini vermesini sağlıyoruz.

Eski bir yöntem: Sayfaya doğrudan JavaScript yazmak

Sayfaya betik yerleştirmenin en basit yolu, onu sayfanın içerisine doğrudan yazmaktır.

Nasıl yazılır

<script language="javascript" type="text/javascript">
<!--
 
betik buraya yazılacak
 
// -->
</script>

Öncelikle tarayıcıya bir betiğin geldiğini, betik dilinin Javascript olduğunu ve bu betiğin MIME türünün "text/javascript" olduğunu belirtiyoruz. Çoğu doğrulayıcı TYPE özelliğini görmeyince hata bildirimi yapar ancak tarayıcı kodu yine de çalıştırır.

<script language="javascript" type="text/javascript">

Sonra bir HTML yorumu açıyoruz. Bu <script> tagını dahi yorumlayamayacak kadar eski tarayıcılar için alınmış bir önlemdir. Bu tarayıcılar tagları görmezden gelecek ve arasında ne varsa ekrana yazacaktır, bu durumda betik ekranda görünecektir. Kullanıcının işine yaramayan bu betik içeriğini yorum satırı içine alıp gizlemiş oluyoruz.

<!--
 
Sonra betiği yazıyoruz. Betikten hemen sonra HTML yorumunu kapatmak zorundayız. Ancak, sadece şunu yazarsanız:
 
-->

JavaScript çalıştırabilen tarayıcılar son satırı JavaScript komutu olarak anlayacaktır. Elbette bu bir JavaScript kodu olmadığından bize hata mesajı göstereceklerdir. Bu yüzden, HTML yorum kapama işaretini JavaScript yorumu ile yazarız (//)

//-->

En sonunda, betiğin sonuna gelip normal HTML kodlarına dönmüş olduk.

</script>

Nereye yazmalı?

Genellikle JavaScript sayfada <head> içine yerleştirilir. Sadece sayfa içinde bir mesaj yazdırılacağı zaman, betiği mesajı yazdıracağınız yere yazmanız gereklidir. (Not : document.write() ile yazdırmalarda)

Betikleri <head> içine yazmak herhangi bir fonksiyonun butonlardan, bağlantılardan ve bu fonksiyonlara çağrı yapabilecek diğer nesnelerden önce yüklendiğine emin olmanızı sağlar. Eğer betiklerinizi sayfanın sonuna doğru yerleştirirseniz, kullanıcı JavaScript fonksiyonu tetikleyen bir butonu, henüz onun çağırdığı fonksiyon yüklenmeden önce görebilir. Sonuç olarak : kullanıcı butona bastığında tarayıcının o betiği bulamadığına dair hata mesajı alacaktır. (henüz yüklenmediği için)

Başka türlü yapmak için iyi bir sebebiniz yok ise, betiklerinizi daima <head> içine yazınız.

Notlar

  • Harici JavaScript Netscape 2 ve Explorer 3 tarafından desteklenmemektedir.
  • <noscript> Netscape 2 tarafından desteklenmemektedir.
  • Harici JavaScript betikleri bazı tarayıcılarda sayfa yenilendikçe yenilenmeyebilir. (Kaşelenmiş olabilir) Çözüm olarak : .js uzantılı dosyanın tam adresini (URL) adres çubuğuna yazın ve yükleyin, sonra bu .js dosyasını yenileyin ve HTML sayfasına geri dönüp tekrar deneyin.
  • Sadece Windows üzerinde çalışan Explorer 4+ (Internet Explorer 4 ve üst versiyonları) defer özelliğini doğru olarak yorumlayıp, sayfa yükleninceye kadar betiğin çalışmasını ertelemektedir.
Kişisel araçlar