JavaScript Temelleri

Bölüm 1

Başlangıç Bilgileri

Bölüm 1 Sayfa 3

1.3 - JavaScript Programlarının Web Sayfalarında Konuk Edilmesi

JavaScript programlama dili, ancak bir belge çözümleyicisi içinde konuk edilirse, kullanıcının kullanımına açılabilir. JavaScript programlama dilinin, giriş/çıkış ortamı, web sayfasının kendisidir.

JavaScript bir web sayfasına,

konuk edilebilir. Bu yöntemleri ayrıntılı olarak inceleyeceğiz.

1.3.1 - JavaScript Programlarının Web Sayfalarında<script> Elementinin İçeriği Olarak İlişkilendirilmesi

16 Şubat 2007 de yayınlanmış, DTD si tamamlanmış en son XHTML standardı olan, XHTML 1.1 (İkinci Baskı) standardının, <script> elementi tanımı aşağıda görülmektedir.

XHTML 1.1 Standardında <script> Elementi Tanımı
Element Nitelikler İçerik
script charset(Charset), defer("defer"), src(URI), type* (ContentType) PCDATA

XHTML 1.1 (İkinci Baskı) standardına göre, <script> elementinin nitelikleri, charset (Charset), defer ("defer"), src (URI), type* (ContentType) olarak açıklanmıştır. Eski language niteliği artık kullanımdan kalkmıştır ve kod yazanların artık bu niteliği kullanmamaları sağlık verilmektedir.

charset niteliği, W3C ye IETF den kalan bir gelenek olan RFC (Request For Comments) (Yorum İçin İstek) notları olarak yazılan teknik açıklama RFC4329 da, bu değerin IANA da tescil edilmiş, karakter setleri olacağını belirtmektedir. Bu değerler, koçük/büyük harf yazılımına duyarlı değildir. Bu kaynakta Türkçe (latin5 gurubu) karakter setleri aşağıda görüldüğü gibi tanımlanmaktadır:

Name: ISO_8859-9:1989RFC1345,KXS2
MIBenum: 12
Source: ECMA registry
Alias: iso-ir-148
Alias: ISO_8859-9
Alias: ISO-8859-9 (preferred MIME name)
Alias: latin5
Alias: l5
Alias: csISOLatin5


ve Windows İşletim Sistemi için tescil edilmiş olan,


Name: windows-1254
MIBenum: 2254
Source: Microsoft (http://www.iana.org/assignments/charset-reg/windows-1254) [Lazhintseva]
Alias: None
		

Tipik değerler, Türkçe'nin de bulunduğu latin-5 gurubu için charset="windows-1254", charset="ISO-8859-9", UTF (Unicode) gurubu için, UTF-8, UTF-16LE, UTF-16BE, UTF-32LE, UTF-32BE değerleri kullanılabilir. (LE=Little Endian) (BE=Big Endian) Bu nitelik değerinin kullanılması, pratikte gereksizdir, çünkü bu durumda belge çözümleyicisi bu niteliği charset="UTF-8" olarak algılayacak ve her türlü Türkçe değişken ve fonksiyon ismi otomatik olarak kullanılabilecektir. charset Niteliğini FireFox 2.0 henüz desteklememektedir. Şu an için, bu niteliğin kullanılmaması gerekmektedir.

defer Niteliği, defer="defer" olarak kullanılır Amacı script programlarının yorumlanması fakat çalıştırılmamasıdır. Açılan <script> elementinin içeriğinde sayfa elementlerine bir erişim yoksa, yani sadece program adımlarının çalıştırılması öngörülüyorsa, (X)HTML çözümleyicisine (parser), bir sonraki <script> elementine kadar, belge çözümlenmesine güvenle devam edilebileceğini bildirir. Belge çözümleyiciler bu niteliği desteklemediğinden pratikte kullanılmaz.

src (Source=Kaynak) Niteliği, bir dış JavaScript program dosyasının kullanılacağını belirtir. JavaScript programlarının bir dış dosyada tutulup, XHTML işaretleme kodlarından ayrı tutulması, en güncel olarak uygulanması sağlık verilen ilişkilendirme yöntemidir. Bunu ayrıca inceleyeceğiz. Dış JavaScript dosyası, bir metin (text) dosyasıdır ve program_adı.js şeklinde saklanır. Kısa olarak buna, "dış js dosyası" adı verilir. Dış js dosyasında sadece program adımları ve yorumlar bulunabilir. Bir dış js dosyasının belirtildiği durumlarda, <script> elementinin içeriği boş kalmalıdır.

type Niteliğinin belirtilmesi zorunludur. Bu niteliğin değeri, içerik (MIME) tipidir. IANA da tescil edilmiş içerik tipleri, [RFC 4329] da belirtilmiştir. Bu belgede aşağıdaki içerik (MIME) tipleri tescil edilmemiş fakat kullanılmakta oldukları belirtilmiştir:

IANA 'da Tescil Edilmememiş Fakat Kullanılan
İçerik (MIME) Tipleri
text/javascript text/ecmascript
text/javascript1.0 text/javascript1.1
text/javascript1.3 text/javascript1.3
text/javascript1.4 text/javascript1.5
text/jscript text/livescript
text/x-javascript text/x-ecmascript
application/x-javascript application/x-ecmascript
application/javascript application/ecmascript

Bu tabloda görülen, içerik tiplerinden ,"text/javascript" ve "text/ecmascript" tanınmış fakat çağdışı (obsolete) olarak kabul edilmiştir. Kullanılması sağlık verilen içerik tipleri, "application/javascript" ve "application/ecmacript" olarak belirtilmiştir. Günümüzde desteklenebilen içerik tipi, sadece ,"text/javascript" tipi olduğundan içerik tipi olarak belirtilebilecek tek seçenek budur. type Niteliği sadece sunucular tarafından belirlenmekte ve istemcinin öngördüğü MIME tipi gözardı edilmektedir. Buna rağmen, bu niteliğin belirtilmesi zorunludur. Aksi halde W3C kod değerlendicisi sayfayı, hatalı sayfa olarak değerlendirecektir.

<script> Elementinin içeriğinin salt PCDATA kapsamında olması gerektiği belirtilmiştir. SGML temeline dayalı dillerde, element içerikleri olabilecek metin parçalarında, < , & karakterleri ve ]] > karakter dizesi bulunamaz, çünkü SGML çözümleyicileri (parser) bunları element işaretleri olarak kabul ederek yanılabilirler. Bu karakterleri içermeyen sakıncasız metin parçaları, çözümlenmiş metin verisi (Parsed Character Data) veya kısaca (PCDATA) olarak adlandırılır. Bu sakıncasız metin parçacıkları (PCDATA), metin içerebilen her türlü elementin içeriği olarak kullanılabilir ve sorunsuz olarak çözümlenip görüntülenebilir. Program adımları gibi bazı özel metin parçacıkları ise bazen bu sakıncalı karakterleri içermek zorundadır. Bu tür kodları içeren sayfaların, kod değerlendiricileri tarafından geçersiz sayılmamaları için bir yöntem bulunması gerekmiştir. Bulunması gereken yöntem, bu gibi sakıncalı karakterleri içeren, <script> ve <style> elementlerinin içeriğinin, çözümlenmemesini ve görüntülenmemesini fakat yorumlanmasını sağlayabilmelidir. Sakıncalı karakterleri içeren metinler, çözümlenmemiş karakter verileri (Character Data) veya kısaca (CDATA) olarak adlandırılır. Bu kodlar, XML sayfalarında,

<script type"text/javascript">
<![CDATA[
program adımları ...
]]>
</script>
		

işaretleri arasına alınarak çözümleyici tarafından gözardı edilmesi sağlanır ve oldukları gibi görüntülenebilir. Bu tür bir gözardı etmenin yorum olayı ile bir ilgisi yoktur çünkü yorum satırları, çözümleyici tarafından hem gözardı edilir hem de görüntülenmez.

XHTML sayfalarında ise durum, kullanılan belge çözümleyiciye bağlıdır. MSIE 7.0 ve FireFox 2.0, XHTML belelerini desteklemektedirller. Bu en yeni sürüm belge çözümleyiciler, XHTML belgelerindeki <script> elementinin içeriğini tanımakta ve çözümlememektedir. XHTML belgelerinde, yukarıda görüldüğü gibi, XML tipi bir CDATA gizlemesi, hataya neden olur ve sayfa görüntülenmez. XHTML sayfalarında CDATA kod gizlemesi yapılmamalıdır. XHTML sayfalarında DTD de belirtilen yazılım, aşağıda görüldüğü gibi, aynen uygulanabilir:

<script type"text/javascript">
program adımları ...(PCDATA Kapsamında)
</script>
		

Program adımları, PCDATA kapsamında kaldıkça, bu kodlar, yeni sürüm belge çözümleyicilerde hiçbir sorun çıkarmayacak ve W3C kod değerlendiricisi tarafından, başka bir kodlama hatası olmadıkça geçerli sayfa olarak tanımlanacaktır.

Bazı durumlarda, JavaScript program adımları, PCDATA kısıtı içinde kalmayıp CDATA kapsamında olan karakterleri de içerebilirler. Bu durumdaki sayfalarda kod gizlemesi olmasa bile, en son sürüm belge çözümleyiciler hiçbir hata vermez ve programı çalıştırırlar. Fakat bu durumda, W3C kod değerlendiricisi sayfayı geçersiz olarak nitelendirecektir.

Bu durumun önlenmesi ve kodların eski sürüm belge çözümleyicilerde de sorunsuz çalışabilmesini sağlayabilecek kod gizleme sistemi, about.com dan Steve Chapman tarafından önerilmiştir. Bu sistemde, aşağıda görüldüğü gibi, çok satırlı yorum işaretleri, CDATA kod gizlemesi ile birlikte kullanılmaktadır.

<script type"text/javascript">
/* <![CDATA[ */
program adımları (aralarında CDATA içeriği olabilir) ...
/* ]]> */ 
</script>
		

Yukardıdaki yöntemle saklanmış olan JavaScript kodlarını içeren sayfalar, eski ve yeni sürüm belge çözümleyicileri ile sorunsuz olarak çalıştırılabilmekte ve W3C kod değerlendiricisi sayfayı geçerli olarak nitelendirmektedir. Bu kod gizlemesi, sadece bağlantılı (embeded) yani script kodları sayfa içinde olan kodlar için değil, aynı zamanda bir dış *.js dosyası içinde olan kodlar için de kullanılabilmektedir.

HTML sayfalarında ise, CSS ve JavaScript kodlarının, <!-- yorum --> şeklinde (X)HTML yorumu satırları arasına alınmasından artık kesinlikle vazgeçmek gerekir. Yeni sürüm belge çözüleyiciler ve kod değerlendiricileri, <script> ve <style> elementlerini sorunsuz tanımakta ve sayfayı gereği gibi görüntülemektedirler, <!--yorum--> şeklinde (X)HTML yorumu satırları arasına gizlenmiş kodların artık çalışmaması olasılığı belirmiştir. Ayrıca,<script> ve <style> elementlerini tanımayan çok eski sürüm belge çözümleyicileri de artık kullanımdan tamamen kalkmıştır. Dolayısı ile, HTML sayfalarında stil ve script kodlarının gizlenmesine hiç bir neden kalmamıştır.

1.3.2 - JavaScript Programlarının Web Sayfalarına Olay Yöneticilerinin Değeri Olarak Yerleştirilmesi

Olay yöneticileri, XHTML1.1 standardında tanımlandığı gibi, belirli bir olayın gerçekleşmesini gözleyen niteliklerdir. Bu niteliklerin değerleri doğrudan üst düzey programlama alanına açılır ve buradan kuramsal olarak, her türlü program aktivitesini gerçekleştirme olanağı elde edilir. (X)HTML elementlerinin büyük çoğunluğunda, olay yöneticisi nitelikleri bulunmasına karşın, uygulamada en çok çapa ve düğme elemenlerinin onclick olay yöneticilerine, JavaScript program adımları, atanmaktadır.

Düğme elementinin amacı bir programı çalıştırmak olduğu için, olay yöneticisine Javascript program adımlarının atanması, kuramsal olarak sakıncalı olmayabilir. Çapa elementi ise, prensip olarak, sadece sayfaların birbirlerine bağlanmaları amacı ile oluşturulmuştur. Olay yöneticisine Javascript program adımlarının atanarak, çapa elemanın bağlantı sağlamak yerine Javascript programlarının çalıştırılması için kullanılması, çapa elementinin amacı dışında kullanılması anlamına geldiğinden, genel olarak uygun görülmez. Buna rağmen uygulamada yaygın olarak kulanılmaktadır.

Çapa elementinin onclick olay yöneticisine bir JavaScript programı atanmışsa, kullanıcı bağlantıyı tıkladığında, belge çözümleyicisi ilk olarak JavaScript yorumlayıcısının çalışıp çalışmadığına bakacak, eğer sayfada JavaScript yorumlayıcısı çalışıyorsa belirtilen programı çalıştıracak ve ondan sonra bağlantıyı çalıştırarak sayfayı kapatarak bağlantıda belirtilen sayfayı açacaktır. Eğer çalıştırılacak JavaScript programının sonuna return false; ifadesi konulursa, kontrol çapa elementine dönmeyerek bir sonraki elemente geçecektir. Bu şekilde bağlantı tıklandığında, sadece JavaScript programı çalışmış olacak ve sayfa yönlendirme bağlantısı çalışmayacaktır. Örnek,

<a href="http://w3c.org"  onclick="veriOku();return false;" >Verileri Okut !</a>
		

(X)HTML olay yöneticilerinin değeri olarak, JavaScript program adımları atanacaksa, HTML spesifikasyonu, sayfanın <head> kısmında,

<meta http-equiv="Content-Script-Type" Content="text/javascript" />
		

bildirimi yapılmasını öngörmektedir.

Çapa elementinin bu şekilde amacı dışında kullanımı genel olarak uygun görülmemektedir. Bundan başka, (X)HTML elementlerinin olay yöneticilerine, JavaScript kodlarının atanması (Hard Coding), JavaScript kodlarının, (X)HTML kodlarınında karmaşa yaratmaması (Obtrusion) prensibine de aykırıdır. Bu nedenle, (X)HTML elementlerinin olay yöneticilerine JavaScript kodlarının atanması (Hard Coding) yerine, sayfadaki (X)HTML elementlerine, JavaScript olay yöneticilerinin ilişkilendirilmesi daha uygundur. Bu şekilde, en azından sayfanın (X)HTML elementlerinin kod homojenitesi sağlanmış olur. Bu konuda bir örnek olarak, Merhaba Dünya programının JavaScript kodları incelenebilir.

Güncel tasarım prensipleri, sayfanın (X)HTML kodları ile, CSS ve JavaScript kodlarının birbirine karıştırılmaması (Non Obstrusion) yönelimindedir. Bu nedenle, sayfanın (X)HTML kaynak kodlarının ayrı bir kaynak kodu sayfasında, sayfanın CSS kaynak kodlarının ayrı bir kaynak kodu sayfasında, sayfanın JavaScript kaynak kodlarının yine ayrı bir kaynak kodu sayfasında, düzenlenerek saklanması öngörülmektedir. Sayfanın (X)HTML kaynak kodları sayfasında sadece (X)HTML kaynak kodları bulunmalıdır. (X)HTML kaynak kodlarında, herhangibir elementin olay yöneticisi niteliğine bir programlama dilininin kodları atanmamalıdır.

1.3.3 - JavaScript Programlarının Web Sayfalarında JavaScript Pseudoprotokolunun Kullanımı ile Çalıştırılması

JavaScript pseudoprotokolu, bir bir çapa elementinin href değerine, bir JavaScript programı yerleştirilmesidir. Kullanımı,

<a href="javascript: alert('Merhaba Dünya !');">Mesaj</a>
		

şeklindedir.

Bu programı çalıştırınız ! Bu yöntemde, bağlantının URI noktası yerine, JavaScript programının çalışmasının nedeni, alert() fonksiyonun geriye null değerinin döndürmesinden kaynaklanır. Geriye değer döndürecek bir işlem yapılırsa, link tıklandığında, çapa elementi yeni bir pencere açacak ve işlem sonucunu bu penceye yazdıracaktır. Örnek :

<a href="javascript: n=9;">Sonuç</a>
		

Bu programı çalıştırınız ! Bu işlem, ek-3 de özetlenmiş olan W3C-DOM öncesi metotlardan document.writeln() metoduna benzemektedir.

Eğer salt hesap yapılıp, açık pencerede bir değişiklik olması istenmiyorsa, değer döndürülmesini önleyecek void(0) ifadesi işlem sonuna eklenmelidir. Örnek:

<a href="javascript: n=9;void (0)">Sonuç</a>
		

Bu programı çalıştırınız ! Bu durumda, hesaplar yapılmakta fakat sonuç görüntülenmemektedir.

Modern yazılım yöntemleri gözönüne alındığında, JavaScript pseudoprotokolu, JavaScript programlarının yazılımı için kesinlikle uygun bir yöntem sayılmaz. Herşeyden önce, bu yöntem, biraz ileride göreceğimiz JavaScript kodlarının (X)HTML kodlarında karşıklık yaratmaması prensibine aykırıdır. Yeni düşünceye göre, (X)HTML kodları ayrı bir dosyada, JavaScript kodları ayrı bir sayfada tutulmalıdır. Yani, JavaScript kodları, (X)HTML kod sayfasında karışıklık yaratmamalıdır. JavaScript pseudoprotokolu ise, bu prensibe kesinlikle aykırıdır. İkinci bir sakınca da JavaScript pseudoprotokolunun web sayfasının erişilebilirliğini tartışılabilir hale getirmesidir. İleride göreceğimiz gibi, JavaScript kodları, sayfanın vermesi gereken bilginin bir kısmının bile verilmesine engel olmamalıdır. Oysaki tüm belge çözümleyiciler JavaScript programlarını desteklemedikleri gibi, tüm kullanıcılar da belge çözümleyicilerinin JavaScript desteğini aktif hale getirmemiş olabilirler. Bunun sonucunda, sayfaya JavaScript ile bir içerik sağlanması isteniyorsa, JavaScript desteği olmayan belge çözümleyicileri kullanan kullanıcıların bu içerikten yararlanamayacakları anlamına gelir ve kesinlikle kabul edilemez. Ayrıca, güncel düşünceye göre, (X)HTMl linkleri sayfaları birbirine bağlamaktan başka bir amaç için kullanılmamalıdır. JavaScript pseudoprotokolu linkleri program yazılım alanı haline getirmeye çalışmakla bu prensibi de çiğnemiş olmaktadır. Bundan başka, JavaScript pseudoprotokolunun yazılım olanakları çok kısıtlıdır ve dar alana ancak az sayıda program adımı yazılabilir. Bütün bu sakıncaları düşünüldüğünde, JavaScript programlarının sayfaya uygulanması için, JavaScript pseudoprotokolunun kullanılmaması gerektiği ortaya çıkar. JavaScript pseudoprotokolu yerine yukarıda örnekleri verildiği gibi, çapa elementinin onclick olay yöneticisi kullanılabilir. Günümüzde bu yöntem de uygun görülmemekte bunun yerine, JavaScript programından, çapa elementine id niteliği ile erişilerek, olay yönteminin JavaScript onclick olay yöneticisi kullanılarak gerçekleştirilmesi öngörülmektedir. Bu konuda bir uygulama, ve bu uygulamanın JavaScript kodları incelenebilir.

1.3.4 - Bir Dış Dosyada Tutulan JavaScript Programlarının, Bir Web Sayfası ile İlişkilendirilerek Çalıştırılması

JavaScript programlarının sayfa ile ilişkili bir dış dosyada tutulabilmesi için, <script> Elementinin src (src=source) (kaynak) niteliğinden yararlanılır. Bu nitelik, bize biş JavaScript dosyasının sayfaya bağlanması olanağını sağlar. Sayfaya bağlanacak dış JavaScript sayfası, sadece JavaScript program adımlarını ve yorumları içerebilir. Bu dosya, Unicode karakterleri içeren basit bir metin dosyasıdır. Dış JavaScript program dosyası, programAdı.js şeklinde belirli bir URI lokasyonuna (yerleşimine) yerleştirilmiş ve sayfanın erişimine açık olmalıdır.

Bir dış JavaScript sayfası tanıtılan bir <script> elementi, başka hiçbir içerik taşımaz. Tanıtım aşağıdaki örnekte görüldüğü gibi yapılabilir :

<script type="text/javascript" src="../js/bdelib.js">
</script>
		

Bu şekilde istenildiği kadar dış JavaScript sayfası, sayfa ile ilişkilendirilebilir. Sayfa ile ilişkili tüm dış JavaScript sayfaları eşit ağırlıktadır ve tümü, sayfadaki diğer JavaScript kod kaynakları ile birlikte aynı üst düzey programlama alanına açılırak aynı program sayfasını paylaşırlar. Bu şekilde, değişik program kaynaklarından gelen bilgiler aynı program sayfasından kaynaklanmış gibi etki yaparlar.

Biraz ileride göreceğimiz, "Karışıklık Yaratmayan JavaScript" prensibine göre , JavaScript kodları, sayfanın yapılanma kodlarında karışıklığa neden olmamalıdır. Web sayfa kodlarında, sadece sayfa içeriğinin yapılanması kodları olan (X)HTML kodları kullanılmalı, bunun dılındaki tüm kodlar, kedilerine ait dış dosyalarda saklanarak sayfa ile ilişkilendirilmelidir. Bu prensibe göre, sayfa içinde, <script> elementlerinin içeriğinin olmaması ve bu elementlerinin sadece dış script dosyalarının sayfaya bağlanması için kullanılması gerekir. Sayfa ile ilişkili JavaScript kodlarının, ayrı bir program dosyasında saklanmasının ayrıca aşağıdaki yararları da bulunmaktadır:

Tüm bu nedenlerden dolayı, günümüzde, bir web sayfasının kaynak kodları ile CSS ve JavaScript kodları kesinlikle ayrı dosyalarda saklanır. Bu şekilde, sayfanın yapılanma, görüntü düzenleme ve programlama kodları birbirinden ayrılarak kod karışıklığı yaratılmaz.

1.3.5 - <script> Elementinin Sayfa Kodlarındaki Yeri

Bir web sitesinin kodlarına, <script> elementinin konulması gereken yer, sayfanın yazılım yöntemi ve <script> elementinin içeriğine göre dramatik olarak değişebilmektedir. Bir web sitesi, içeriğin yapılandırılmasını, görüntünün düzenlenmesini, interaktivite sağlanmasını gerçekleştiren kod türlerinden oluşmaktadır. Sayfanın son görüntüsü, bu kodların hem kendilerinin hem de birbirleri ile ilişkilerinin sonucudur ve bu sonucun alınması için çok sayıda ve birbirinden farklı yöntemler kullanılabilmektedir.

Sayfa içeriğinin temel yapılandırılması (X)HTML kodları ile gerçekleştirilmektedir. Günümüzde, yeni geliştirilen sayfalar, büyük olasılıkla XHTML kodlamasına göre gerçekleştirlmektedir. Fakat bu konuda bir zorlayıcı kural yoktur ve belge çözümleyiciler, eski HTML kodlarını da çözümlemektedirler.

Sayfanın görüntüsünün düzenlenmesi için çok değişik olanaklar bulunmaktadır. Spesifikasyonlarda, giderek daha azaltılmakla birlikle, görüntü sağlayacak element nitelikleri bulunmakta, bundan başka, hem <style> elementinin içeriği, hem de elemetlerin style niteliklerinin değeri olarak CSS görüntü stili oluşturma kodları kullanılabilmektedir.

Bu kadar değişik program dillerinin aynı sayfada uygulanmaya çalışılması, geçmişte sayfa kodlarının yazılmasını ve izlenmesini çok zor bir hale getirdiği görülmüş, durumun daha da kötüleşeceği düşünülerek, bu konuda önlemler alınmasına çalışılmıştır. Düzenli bir kod sayfası oluşturabilmek için her programın kendi konusu ile sınırlı kalması ve kodlarının diğerlerinden ayrılması düşüncesi temel hedef olarak benimsenmiştir. Doğal olarak hedefe ulaşabilmek kolay olmamaktadır. Bu konuda W3C üstüne düşen görevleri yapmaya çalışmış, bir yandan CSS stil belirleme dilini geliştirirken, diğer taraftan görüntü oluşturmaya yönelik element ve nitelikleri yeni geliştirilen spesifikasyonlardan çıkarmaya özen göstermiştir. Kullanıcılar da, kendi aralarında çalışma gurupları oluşturarak düzgün kodlama prensipleri geliştirmeye ve bir toplumsal baskı kurarak bu kurallara geniş kütlenin uymasını sağlamaya çalışmaktadırlar. Kullanıcıların kod karmaşasını önlemek için geliştiridiği prensipler genel olarak aşağıdaki gibidir.

Yukarıda belirtilen prensipler, eskiden çok toleranslı bir ortamda çalışmaya alışmış, düzenli kod yazma alışkanlığı olmayan geliştiriciler için, son derece sıkntılı olacağı gerçektir. Diğer taraftan bir başka gerçek de, artık kimsenin bu düzensizliğe, karışıklığa ve kuralsızlığa katlanmak istemediğidir. Yukarıdaki kuralların çok sıkıcı oldukları doğrudur. Bu kuralları uygulayabilmek için gerekli her araç elimizde kullanıma hazır olarak bulunmaktadır. Yapılacak tek şey, eski kötü alışkanlıkları bırakarak, yeni projeleri bu zor, fakat sonucu iyi olacak yönteme göre gerçekleştirmektir.

Yukarıdaki prensiplere uygun olan kodlamalarda, <script> elementinin sayfadaki en uygun yeri, <body> elementinin en altı olacaktır. Bir web sayfasının sunucudan indirilip bir istemci bilgisayarında görüntülenmesi süreci incelendiğinde bunun nedeni anlaşılacaktır. Bir web sayfasının sunucudan istemci bilgisayarına yüklenmesi sırasında, ilk olarak sayfanın <head> kısmı yüklenir. Bu kısımda, sayfanın kendisi görüntülenmeyen fakat sayfa hakkındaki bilgilerin, istemci ile sunucu arasında aktarımını sağlayacak elementler bulunur. Sayfa hakkında istemci ile sunucu arasında bilgilendirme süreci tamamlandığında, sunucunun gönderdiği kodlar çözümlenerek sayfanın görüntü oluşturacak elementlerinin bulunduğu <body> kısmındaki elementlerin bir yandan indirilmesi, bir yandan da sunucudan gelen bilgiler yardımı ile sunucu belge çözümleyicisinde çözümlenerek, görüntüleneceklerdir. Bilgilerin sunucudan indirilmesi, çözümlenmesi ve görüntülenmesi asenkrondur. Hızlı indirilebilen elementler önce indirilip çözümlenip görüntülenir. Ardından da yükleme hızı yavaş olan resimler gibi öğeler yüklenerek sayfanın görüntülenmesi tamamlanır. Sayfanın sunucudan indirilmesi, çözümlenmesi ve görüntülendirilme aşaması, istemci bilgisayarının en yoğun çalıştığı anlardır. Bu yoğun çalışma arasında istemci bilgisayarının yüküne bir de JavaScript kodlarının yorumlanması yükü eklenmemelidir. Sayfanın sonuna doğru, istemci bilgisayarının yükü hafiflemiş olacağından, JavaScript kodlarının yorumlanması daha uygun koşullarda gerçekleşecektir. Bu yüzden sayfa kodlarında <script> elementinin en uygun yeri <body> elementinin en altı olacaktır. Yine de, JavaScript kodlarının yorumlanması tamamlandığında, sayfanın yüklenmesi tamamlanamamış olabilir.

Bir web sayfasının kaynak kodlarında, <script> elementinin sayfadaki en uygun yerinin, <body> elementinin en altı olması, sadece yazılım yönteminin yukarıdaki prensiplere uygun olması koşulu ile geçerlidir. Aksi halde, yani sayfa yazılımında, kodlama düzenine uyulmadığı durumlarda, örnek olarak JavaScript kodları ile sayfanın yerleşik yapılanma elemanlarının görüntülerinin düzenlenmesine çalışıldığı, durumlarda, <script> elementini, <body> kısmının alt altına yerleştirmek, çok kötü bir sonuca neden olabilir. Çünkü, önce sayfanın başlangıç görüntüsü yüklenmiş olacak, sonra devreye JavaScript girince sayfanın değişimi başlayacak, bu değişim, kullanıcıyı tedirgin edecek, hatta sayfanın "hack" edildiği şeklinde yorumlayacak olan kullanıcı belki de acele olarak sayfayı terkedecektir. Bunun olmasının ise programcının isteyebileceği en son şey olacağı açıktır. Bu gibi düzensizliklerin önlenmesi için, son derece dikkatli ve yazılım kurallarına uygun çalışılmalıdır.

1.3.6 - JavaScript Programlarının Sayfa Yüklendikten Sonra Çalıştırılması

JavaScript programları, giriş/çıkış işlemleri için veya dinamik görüntüler oluşturmak için, mutlaka sayfa elemanlarına erişim sağlamak isteyebilir. Ulaşılmak istenen sayfa öğesi yüklenmeden erişim isteği gerçekleşirse, bir çalışma süreci (runtime) hatası oluşur ve sayfanın görüntülenmesi bir hata mesajı ile kesilir. Bunun önlenmesi için, sayfanın önce yüklenmesi, ardından yüklenmiş elemanlara erişim isteminin gerçekleşmesinin sağlanması gerekir.

Alınabilecek en iyi önlem ilk olarak, sayfa elemanları ile ilişkili hiçbir program adımını, yazılan tüm program adımlarını anında çalıştıran global program alanı içine yazmamak ve bu bildirimleri, kodları sadece öağrıldığında çalışacak fonksionlar içinde tutmaktır. Bundan sonra, yapılacak şey, fonksiyonun sayfanın yüklenmesinden sonra çağrılmasının sağlanmasıdır. Bunu sağlayabilecek bir olay yöntecisi, JavaScript window.onload olay yöneticisidir. Bu olay yöneticisi, sayfa yüklenmesi olayını dinler ve sayfa yüklenmesinin tamamlanması ile belirtilen fonksiyonu çalıştırır. Örnek olarak sayfanın yüklenmesinden sonra çalıştırılacak fonksiyon ilkAdım() ise,

window.onload=ilkAdım;
		

şeklinde bu fonksiyon çalıştırılır. Sayfanın yüklenmesi tamamlandıktan sonra çalıştırılması istenen fonksiyon sayısı birden fazla ise, bu bir sorun oluşturur. Çünkü, window.onload olay yöneticisi, sadece bir tek olayı yönetebilir.

Sayfanın yüklenmesi tamamlandıktan sonra çalıştırılması istenen fonksiyon sayısı birden fazla ise, alınabilecek bir önlem bir ana fonksiyon yazarak çalışacak fonksiyonları buradan çağırmak olabilir. Örnek :

function anaProgram () {
ilkAdım();
ikinciAdım();
}
window.onload=anaProgram;
		

şeklinde bir düzenleme yapılabilir. Bu yöntemin bir sakıncası olmamasına karşın, JavaScript için gereksiz bir ana program zorunluluğu yaratabilir. Aşağıdaki yöntem daha iyi bir başlangıç sağlamaktadır.

Bir başka yöntem, sayfa içinden,

<body onload="ilkAdım()","ikinciAdım();">
		

şeklinde bir satıriçi yükleme sırası oluşturmaktır. Bu yöntem geçerli olmasına karşın, satıriçi yazılım özellikle çok sayfalı web çalışmalarında bezdirici olabilir. Ayrıca, iyi programcılık prensibi ile artık (X)HTML elementlerinin olay yöneticilerinin kullanılmaması ve tüm olay yönetiminin sayfa ilişkilendirilmiş dış JavaScript kodlarından düzenlenmesi öngörülmüştür. Yani sayfanın tüm elementlerinin yüklenmiş olmasını gözleyip, kod çalıştırmasının sayfa yüklendikten sonra başlatacak, JavaScript dış program sayfasından çalışabilecek bir yöntem geliştirilmelidir.

Dış program sayfasında çalışabilecek ve sayfa yüklendikten sonra, çalışması gereken fonksiyonları sıra ile çalıştıracak bir fonksiyon, Simon Willison tarafından yazılmış ve başarı ile uygulanmıştır. Bu fonksiyon, sayfa yüklendikten sonra çalışacak fonksiyonlar için, bir çalıştırma kuyruğu oluşturmakta ve sayfanın yüklenmesinden sonra, bu fonksiyonları sıra ile çalıştırmaktadır. Bu fonksiyonun yazılımı aşağıda verilmiştir.

function sayfaYüklendiktenSonraÇalıştır(çalıştırılacakFonksiyon) {
var öncekiFonksiyon = window.onload;
if(typeof window.onload != 'function') {
window.onload = çalıştırılacakFonksiyon;
}
else {
window.onload = function() {
öncekiFonksiyon();
çalıştırılacakFonksiyon();
};
}
}
		

Bu fonksiyon yazıldıktan sonra, sayfanın yüklenmesi tamamlandıktan sonra çalıştırılacak fonksiyonlar için çalıştırma kuyruğu,

sayfaYüklendiktenSonraÇalıştır(ilkAdım);
sayfaYüklendiktenSonraÇalıştır(ikinciAdım);
		

şeklinde oluşturulur.

sayfaYüklendiktenSonraÇalıştır(çalıştırılacakFonksiyon) birçok sorunun oluşmasına engel olan çok yararlı bir fonksiyondur. Bu fonksiyonun yazılımını ancak, ileride konularda iyice ilerledikten sonra anlamış olacağız. Bu fonksiyonu şimdilik sadece kullanmakla yetineceğiz.

Sayfa önyüklemesini sağlayan çok daha kapsamlı bir fonksiyon, Scott Andrew tarafından geliştrilmiş ve Dustin Diaz tarafından yenilenmiştir. Bu fonksiyon çok daha karmaşık ve kapsamlıdır. Prensip olarak aynı işlevi yaptığı için, çalışmalarımızda genel olarak yapıldığı gibi, Simon Willison tarafından geliştirilmiş olan yukarıda kodları verilen fonksiyonu kullanacağız. Fakat, ikinci yöntem de uygulanabilir.

Bir başka yöntem de, Justin Barlow tarafından geliştirilmiş olan WOM (Window Onload Manager) adlı çok basit bir kitaplıktır. Bu yöntem de ilk ikisi ile aynı işlevi yapmaktadır. İstendiğinde bu yöntem de kullanılabilir.

En son olarak, sitepoint de yayınlanan, basit fakat etkili bir metot da denenebilir:

window.onload = function{
fonksiyon1();
fonksiyon2();
fonksiyon3();
...
}
		

Bu son metot, sadece küçük ve fonksiyon sayısı kontrollü sayfalar için geçerlidir. Örnek olarak bir sayfaya bu çalışmada olduğu gibi, birden fazla dış *.js sayfası bağlanırsa, ve her sayfada da bir veya daha çok window.onload olay yönetcisine bağlı fonksiyon varsa, bu metot çalışmaz. Bu durumda, her sayfadaki çalışacak fonksiyonu tek sayfada göstermek gerekebilir. Bunun yerine, her duruma uygun olan sayfaYüklendiktenSonraÇalıştır() programının kullanılması daha kolaydır. Bu nedenle çalışmalarımızda da sayfaYüklendiktenSonraÇalıştır() programı kullanılmaktadır.

Sayfa önyüklemesi problemi, düşünüldüğünden çok daha ayrıntılıdır. Dean Edwards, bir sayfada çok sayıda resim bulunduğunda, scriptlerin çalışmasının bu resimlerin tümünün yüklenmesini beklemesinin olumsuz olabileceğini belirtmiştir. Kullanıcı indirilen resimlerde öngörülen JavaScript etkilerini çalıştıramayınca, durumu anlamakta zorluk çekebilir. Burada yüklemesi beklenecek olay aslında tüm sayfa değil, sadece DOM elementleridir. Bu konuda FireFox ve Opera 9 DOMContentLoaded metodunu desteklemekte, fakat Internet Explorer de bu metot bulunmamaktadır. Bu konuda IE, FireFox ve Opera da çalışabilen, son derece karmaşık bir çözüm geliştirilmiştir. bu çözüm çalışmamızda js klasöründe edwards.js adı ile dosyalanmıştır. Bu dosya, sayfaya ilk dosya olarak bağlanmalı ve DOM elementleri yüklendikten sonra çalışacak fonksiyonlar, init() fonksiyonu içeriğinden çağrılmalıdır. Bir deneme sayfası yapılarak çalıştığı saptanmıştır. Bu deneme sayfasında, edwards.js dosyasında init() içinden çağrılan fonksiyon bu deneme sayfasına özgüdür. Her uygulama, bu fonksiyonu, kendisininkilerle değiştirmelidir.

Bu çalışmada sayfalarımızda, fazla resim olmadığından, sayfanın tümünün yüklenmesi ile DOM elementlerinin yüklenmesi arasında algılanacak bir faz farkı olmamaktadır. Bu nedenle daha pratik olan, Simon Willison tarafından geliştirilmiş olan window.onload olayını dinleyen sayfaYüklendiktenSonraÇalıştır() programını uygulayacağız. Fakat profesyonel uygulamalarda Dean Edwards yöntemi daha uygun olabilir. Gerçek gereksinme, sayfa içeriğine bağlıdır ve denemelerle saptanmalıdır.

1.3.7 - <noscript> Elementinin Kullanımı

<noscript> Elementi JavaScript yorumlayıcısı kapalı olan veya hiç desteklemeyen belge çözümleyicilerde görüntülenip, JavaScript programını destekleyen belge çözümleyicilerde görüntülenmeyen bir içerikle kullanıcıların uyarılması amacı ile konulmuştur. Ne yazık ki, JavaScript programlamasını çok az destekleyen belge çözümleyicileri de mesajları görüntülemediğinden bu elementin kullanımı çok azalmıştır. Aslında, çok kullanılan belge çözümleyiciler, MSIE 7 ve FireFox 2 bu elementi, tam olarak desteklemektedirler. Bu durumda, kullanımında hiçbir sakınca kalmamış sayılabilir.

Valid XHTML 1.1