Bir kodlama (script) belgenin "head" ya da "body" bölümlerinde herhangi bir yere yazabilir. Belgenin düzgün görünmesi için temel notlar şöyledir:
- Birçok kodlama head bölümünde bulunabilir. Burada olmaları onların belge gövdesinden uzakta olmalarını sağlar.
- Sayfa yayılımında belli bir yerde çalışması düşünülen kodlama varsa (örneğin, içerik oluşturmak için "document.write" kullanıyorsa), belgenin doğru yerine yerleştirilmelidir. Çoğu zaman belge gövdesinde bir yerde olması gerekir. Eğer çok kısa bir kodlamaysa, bulunması gereken yere taşınır. Eğer çok uzunsa, "head" bölümünde bir işlev olarak bulunur ve olması gereken yerden işlev çağırma biçiminde çalıştırılır.
- Eğer kodlama birden çok sayfada kullanılacaksa, ya da hatırı sayılır derecede uzunsa, onun yüklemesi "head" bölümünde yapılmalıdır.
Bu biçimde kullanım sayfanın kodlamasındaki uzunluğu engellemenin dışında oluşabilecek olası kodlama hatalarını azaltır (ortadan kaldırır). Ayrıca bu kodlar birden çok sayfada da kullanılabilir, tarayıcıların tampon belleğini kullanarak indirilecek sayfalarla bant genişliğini şişirmemiş olur.
Sayfaya kodlama eklemek
Javascript kodunu web sayfasına eklemek için <script> biçimi kullanılır.
Burada "type" niteliğinde kullanılacak kodlamanın ne olduğu belirtilir. Javascript için "text/javascript" niteliğin değeri olacaktır.
Nitelik olarak "language" kullanarak hangi Javascript sürümü ile kodlama yapıldığı bilirtilebilir.
Uygulamada bu sayı tarayıcıya çok az şey anlatır. Bir sürümü desteklediklerini söyleyebilirler ama her birinin kendine özgü değişik becerileri vardır. Javascript destekleyen tarayıcıların tümü Javascript 1.2 konusunda ortak davranış gösterirler (kodlamada javascript1.2 olarak gösterilir). Bu nedenle kurallar Javascript 1.2 sürümüne göre anlatılmıştır.
Tarayıcılar rastgele seçilmiş bir sürüm değerini desteklediklerini bildirirler ama sürüm değeri olmayan kodlamaları da çalıştırırlar. Hatta sürüm değeri daha yüksek olanları bile destekleyebilirler. Böylece dil sürümünün inandırıcı olmadığı anlaşıldığına göre, genelde sürüm parametresinin unutulmasında yarar vardır. Yerine, kodlamada tarayıcının kodlamayı destekleyip desteklemediğini yakalanması daha doğru bir yaklaşım olur.
Aşağıdaki "script" biçiminin sayfadaki görünüşüdür:
<script type="text/javascript">
//JavaScript buraya yazılır
</script>
Eğer kodlamaya erişilemiyorsa, ama sayfaya erişilmesi istenirse Javascript olmayan bir tarayıcıda aşağıdaki kullanım biçimine yer verilmelidir:
<noscript>
Eğer javascript açıksa, bu bölüm hiç görüntülenmez...
</noscript>
Açıklamaları kullanmak
Açıklamalar kodlayıcının kendi için kodlamaya bırakacağı notları tanımlar. Böylece ileride kodlamanın neler yaptığı çabuk anımsanmış olur. İkili kesme işareti (//) tek satırlık açıklamaları belirtir. Bir kesme ve yıldız (/*) açıklamanın başladığını gösterir. Kodlamanın kalanı karşılaşılan ilk yıldız kesme (*/) işaretine değin "açıklama" kabul edilir.
<script type="text/javascript">
// Tek satır açıklamasıdır
/* Bu bir
blok açıklamadır */
</script>
Dışsal kodlama dosyaları kullanımı
Sayfaların ortak kullanıcı için Javascript kodlama dosyasını (genellikle *.js biçimindedir) "head" bölümüne ekleyebilirsiniz.
<script src="herneyse.js" type="text/javascript"></script>
Kodlama ve başlık dosyaları ana sayfadaymış gibi işlenir. Yani kodlamada dosyalara, resimlere ve adreslere bağlantı varsa, ana sayfaya göreceli olarak erişilirler. Kodlama dosyasının yolu anlamsız kalır.
XHTML ile ilgilenmek
Burada XHTML'den söz ederken aslında içeriği application/xhtml+xml biçiminde sunulan bilgiden söz edilmektedir. Bu tür sayfaların çoğunluğu (XHTML olan) text/html biçiminde sunulmaktadır ve sayfa HTML olarak yorumlanmaktadır (XHTML değil).
XHTML'de kurallar farklıdır. Kodlama biçimleri "özel" diye adlandırılmaz. İçerikleri XHTML'in herhangi bir bölümü gibi işlenir. Bu nedenle bazı işlemler sayfanın parçası gibi kabul edilip yanlış yorumlanabilir. Bunu önlemek için kodlamaları dışsal bir dosyaya koymak ve sayfanın kodlarıyla karışmasını önlemek doğru olur. Eğer bir kodu sayfanın içine doğrudan eklemek isterseniz onu CDATA biçiminde tanımlayabilirisiniz:
<script type="text/javascript">
<![CDATA[
//JavaScript buraya yazılır
]]>
</script>
Eğer kodlamanın XHTML içinde açıklamaymış gibi görüntülenmesi isternirse, eskisinden daha çirkin bir yöntem kullanmanız gerekir. Aslında bunu hiç gerek yoktur. Script anlamayan XHTML de anlamaz. Eğer bazıları için bu sayfayaı HTML, diğerleri için XHTML olarak yorumlanması isternirse, aşağıdaki kodlama kullanabilir:
<script type="text/javascript">
<!--//--><![CDATA[//><!--
//JavaScript buraya yazılır
//--><!]]>
</script>
Kodalamanın ne zaman aktif olacağını denetlemek
Varsayılana göre yazdığınız her kodlama yüklenince işlenir. Örneğin:
<script type="text/javascript">
var myVariable = 'Hello';
window.alert(myVariable);
//Kodlama yüklenince "Hello" yazan mesaj kutusu kaybolur.
</script>
Bazen otomatik çalışma istenmeyebilir. Bu durumda işlevler yazmak ve işlevleri gerektiğinde çalıştırmak daha uygun gelebilir.
Javascript kodları başlatmak (aktif etmek için) HTML olayları kullanılır. Yeni kuşak tarayıcılarda birçok olay pekçok öğede kullanalabilir.
- input, textarea, select biçimlerinde
- onclick, onkeydown, onkeyup, onkeypress, onchange, onfocus, onblur, vb.
- form biçiminde
- onsubmit, onreset
- a biçiminde
- onclick, onmouseover, onmouseout, onfocus, onblur
- body biçiminde
- onload, onunload
W3C sitesinde HTML tanımlarından son değişiklikleri kontrol edebilirsiniz. Tüm yeni tarayıcılarda "a" öğesi "onmousemove" olayını da fark edebilir (ama artık kullanılmayan Netscape 4 gibi eski tarayıcılar hariç). Her zaman gövde üzerinde onmouseover, onmouseout ve sonra document.captureEvents ve onmousemove kullanarak bu sorunu giderme olanağı vardır. Olay ve DOM Olayları bu konuda ayrıntılı bilgi içermektedir.
Aşağıdakiler olay kullanımı için bazı örneklerdir.
<a onmouseover="name_of_function(params)" href="somepage.html">
<input onkeypress="myVariable = 2;startTest();">
<select onchange="self.location.href =
this.options[this.selectedIndex].value;">
<body onunload="window.alert('bye')">
Javascript kodunu etkinleştirmenin bir başka yolu
<a href="javascript:name_of_function(params)">
kullanmaktır. Ama genelde en iyisi olayları kullanmaktır, böylece Javascript etkin olmadığında hala geçerli bir bağ kalmış olur.
Bu örneklerin hepsinde kodlama HTML niteliği içindedir ve normal HTML komutlarıyla aynı biçimde yorumlanacaktır.