Bu çalışmamda, web sayfasına javascript kodları nasıl eklenir? Kodları eklerken nelere dikkat edilmeli onları araştırdım. Umarım hepimize faydalı olur.
Javascript kodu statik HTML sayfalarına işlevsellik kazandırmak, hareketlendirmek veya kullanıcılarla etkileşim kurmasını sağlamak için kullanılır. Javascript ile web sayfasındaki elemanları hareket ettirebilir veya onlara farklı efektler kazandırabilirsiniz. Bunun haricinde sayfada hesaplama, sorgulama, kullanıcı girişi, form doldurtma gibi işlemler javascript ile yapılır. Javascript kodları web sayfasının kullanıcı önyüzünde çalışır. Tasarım dünyasında buna front end derler. Gereksiz yere javascript kullanımı (CSS ya da HTML’nin yapabileceği işleri javascript’le yapmak) tarayıcının ram üzerindeki yükünü arttırır ve sayfanın görüntülenmesini zorlaştırır. Hatta bazı durumlarda sayfa hiç açılmayabilir. Ziyaretçi, tarayıcı ekranında “İnternet Explorer Bu Web Sayfasını Açamıyor” ya da “Sayfadaki betik çalışmıyor” benzeri hata mesajları alabilir. Bu durum sayfanızın ziyaretçi sayısını ve ziyaret süresini olumsuz etkiler. Çünkü internet çağının insanları için hız önemlidir ve insanların beklemeye tahammülü yoktur. Bu sebepten sayfayı kodlarken HTML, CSS, FLash ve Javascript elemanlarını yerinde ve gerektiği kadar kullanmaya özen gösterilmelidir. Bu kadar ön bilgiden sonra Javascript kodlarının web sayfasına nasıl eklendiğini görelim. Javascript kodları web sayfasının herhangi bir yerine yerleştirilebilir ve en genel kullanımı şu şekildedir.
<script type=”text/javascript” language=”Javascript”>
Bu kısımda
--------------------
--------------------
--------------------
Program kodları bulunur.
</script>
Kodları özellikle web sayfanızın <head></head> tagları arasına yerleştirmeniz kodların okunmasını, yorumlanmasını ve programın yüklenmesini hızlandırır. Burada tarayıcının HTML dosyasını yorumlama şeklinden bahsetmekte fayda var. Tarayıcılar HTML dokümanlarını yukardan aşağıya doğru ilk satırdan itibaren, satır satır okuyarak yorumlamaya ve bu yoruma göre sayfa öğelerini yerleştirip kullanıcıya görüntülemeye başlar. Bu sebepten sayfada öncelikle çalışmasını istediğimiz kodların ve CSS özelliklerinin sayfanın baş kısmında olması çalışma verimini arttırır. Ayrıca Javascipt’te yaptığınız değişken tanımlamalarını <head></head> tagları arasında yapıp ana program kodlarını yine sayfanın herhangi bir yerine de yazabilirsiniz. Ayrıca, özelikle fare ile tıklama veya farenin sayfadaki herhangi bir nesne(resim, buton, link vs.) üzerine gelmesi durumlarında işlemesi için(bunlara javascript’te event-olay denir) bazı kodlar HTML elemanları içine de yazılabilir. Buna da bir örnek verelim,
<img src=”resim.jpg” onClick=”parent.location.href=’http://www.google.com’”/>
Bu kodlama ile resim nesnesine ziyaretçi tıkladığı zaman sayfayı belirtilen web sitesine yönlendirme özelliği verilmiş olur. Aynı işlem şu şekilde de yapılabilir; sonuç aynı olur.
Öncelikle <head></head> etiketleri arasına ya da sayfadaki uygun herhangi bir yere şu kodlama yapılır,
<script type=”text/javascript” language=”javascript”>
function git()
{
parent.location.href=”http://www.google.com”
}
</script>
Sonra web sayfasına istenen nesne yerleştirilir ve tıklama olayı için bu fonksiyona aktive olma emri verilir.
<img src=”resim.jpg” onClick=”git()”/>
Burada sayfaya eklenen resim nesnesine tıklandığı zaman git() fonksiyonu devreye girer ve sayfa istenen web sitesine yönlendirilir. Bu basit link verme işlemi aslında HTML’nin <a></a> tagı kullanılarak da yapılabilir. Başta da söylediğim gibi HTML ya da CSS kullanarak yapabileceğiniz şeyleri Javascript ile yapmaktan kaçının ve her zaman tarayıcı yükünü hafifletmeye çalışın. Burada verdiğim örnek sadece siteye Javascript kodlarının nasıl ekleneceğini ve bu kodların nasıl işleyeceğini göstermek içindir.
Diyelim ki kapsamlı bir program hazırladınız. Satırlar dolusu kod yazdınız. Programınız sabitler, değişkenler, döngüler hesaplamalarla dolu. Bu programı web sayfanıza eklediğiniz zaman, tarayıcının sırtlanacağı yükü bir düşün. Tarayıcı yukardan aşağı tüm kodları yorumlarken, yükleneceği HTML ve CSS kodları, resimler, videolar, vs. elemanlara ek olarak bir de satırlar dolusu javascript kodunu yorumlamakla uğraşacak. Birde sayfada birden fazla Javacript programı kullanıyorsanız tarayıcının ağır yükten dolayı kaplumbağa hızında işlemesi ya da daha kötüsü, sitenin hiç açılmaması işten bile değil. Yukarıda da bahsettiğim gibi Javascript programları nesneye yönelik programlardır ve genelde çalışmak için kullanıcı tarafından tetiklenmeye(fare ile programa konu olan eleman üzerine gelme, tıklama ya da klavyeden bir tuşa basma gibi) ihtiyaç duyarlar. Eğer sayfanızı ziyaret eden kişi programınıza konu olan; programla ilişkilendirilmiş nesnelerle(resim, link vs) etkileşim kurmazsa(veya “window.onload” gibi bir önyükleme kodu da kullanmayacaksanız) muhtemelen kullanıcının ziyareti boyunca hiç kullanmayacağı bir program için tarayıcıya fazladan kod işleme yükü bindirmiş ve sayfa yüklenmesini yavaşlatmış olursunuz. Tüm bunların önüne geçmek ve tarayıcı yükünü hafifletmek için javascript kodlarınızı aynı CSS’de olduğu gibi harici bir dosya haline getirip, tek satırlık bir kodlama ile sayfanıza bağlayabilirsiniz. Böylelikle programınız sadece ziyaretçi tarafından önceden tarafınızdan nasıl olacağı belirlenen(genellikle tıklama) bir etkileşim gerçekleşirse aktive olur. Bu sayede tarayıcı yükünü hafifletmiş, site yüklenme süresini hızlandırmış ve ziyaretçinin bilgisayarını da gereksiz yere yormamış olursunuz. Şimdi tüm bu söylediklerimi yukarıdaki link işlemi için uygulayalım.
-İlk önce yeni bir metin belgesi oluşturalım ve kullanıcı tıkladığı zaman çalışmasını istediğimiz program kodlarını bu belgeye kodlayalım.
function git()
{
parent.location.href=”http://www.google.com”
}
Burada sadece kodları kopyalıyoruz; script etiketlerini almıyoruz.
-Sonra bu dosyayı link.js adıyla kaydedip, sunucumuzda uygun gördüğümüz bir yere kopyalıyoruz.
-Şimdi sıra link.js dosyasını web sayfamıza bağlamaya geldi. Bunun için aşağıdaki kodları HTML dosyamızın <head></head> etiketleri arasına yazıyoruz.
<script src="link.js" type="text/javascript"></script>
-HTML kısmı diğerleri ile aynı.
<img src=”resim.jpg” onClick=”git()”/>
-HTML dosyamızı kaydedip tarayıcımızdan açtığımızda yukarıda anlattığım yöntemlerle aynı sonucu aldığımızı görüyoruz. Bu yöntemle birden fazla sayfaya aynı dosyayı bağlayarak ziyaretçinin tarayıcısını her sayfa için tekrar tekrar kod yorumlama ve yükleme zahmetinden kurtarmış oluyoruz. Burada link.js dosyamızın adresi doğru verildiğinden emin olmalıyız. Aksi takdirde programımız çalışmaz.
Böylelikle web sayfasına Javascript kodu eklemek için kullanabileceğimiz üç yöntemi de görmüş olduk. Her yöntemin kendine göre avantaj veya dezavantajları bulunmaktadır. Tasarımcı, hazırlayacağı sayfanın ve programın işleyişine uygun yöntemi seçmek durumundadır. Eğer doğru tasarım ve program için doğru yöntem seçilirse sayfanın çalışma verimi en üst seviyede olur. Özellikle web sitelerinin front end (önyüz) tasarımı ile uğraşanların bu kurallara dikkat etmesi gerekir.
