HTML İçindeki Olay Yönlendiricilere Javascript Yazmak

JAVASCRIPT eventhandler dediğimiz olay yönlendirici ,   olay güdümlüyücü bir şekilde çalışır. Yani bir event (olay)  gerçekleşir  ve bu olaya kod yazılır. JAVASCRIPTte olaylara kod yazarken function ( fonksiyonlar ) kullanılınır. Sayfamıza bir buton ekleyelim ve olay yönlendiriciye JAVASCRIPT yazmayı görelim ;

Şunu söyleyelim dikkat edilirse script  tagları kullanılmadı ve direk bir eventhandler içerisine bir JAVASCRIPT deyimi  ekledik. Aslında olayyönlendiricilere JAVASCRIPT yazmak kodlar  çoğaldıkça karışıklığa  neden olabilir bu yüzden fonksiyonlar kullanılınır.

  • JAVASCRIPT olay yönlendiricilere  bir fonsiyonda atanabilir.

</body>

Burada click olayı olduğunda bir fonksiyon çağırabiliriz.

Java script kodlarımızı HTML içerisine ekleme

  1. Javascrip kodlarımızı head etiketleri arasına  yazabiliriz. Head etiketi içerisine yazarsak sayfa yüklenmeye başlanmadan önce JAVASCRIPT kod bloklarımız yorumlanacaktır.

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />

<title>Untitled Document</title>

<script language=”JAVASCRIPT”>

BU KISIMDA  KODLAR OLACAK

</script>

</head>

2.JAVASCRIPT kodlarımızı body  etiketleri arasında tanımlayabiliriz. Burada kodlarımız sayfa yüklendikten sonra yorumlanacaktır.

<body>

<script language=”JAVASCRIPT”>

</script>

</body>

3. JAVASCRIPT kodlarımızı dışarıda (    .js  ) uzantılı bir dosya içerisinde saklayarak HTML sayfası içerisinden bu kodları çağırabiliriz. Yani bu kodları çağırmak sayfa kodları arasına dahil etmektir.Bunu yaparken script tagımızın src (source ) özelliğini kullanıyoruz.

Burada script etiketinin kapatıldığına dikkat edin. ilk.js dosyası içerisinde JAVASCRIPT kodlarını barındıran bir sayfadır ve uzantısı .js dir. Bu  şekilde ilk.js dosyası içerisinde ki  JAVASCRIPT kodlarını sayfamıza dahil etmiş olduk.

Dikkat edilecek husular ;

  • Kaynak dosya uzantısı .js  olmak zorundadır
  • Src parametresine relative( göreceli)  yol tanımlaması yapılmalı
  • Kaynak dosya <script> </script>  tagları içermez
  • Eğer src parametresi kullanılmışsa  <script> </script>   blokları arasına kod yazılmaz yazılsada bu kodları  browser dikkate almayacaktır.

JAVASCRIPT kodlarının bir  kaynak dosyada saklanmasının avantajları vardır.

* Örneğin belirli bir işlem yapacaksınız sayfanızda ve bu işlem var olan tüm alt sayfalarınızda kullanılacak Eğer kaynak dosya kullanmazsanız ana sayfa ve tüm  alt sayfalarada bu kodları eklemeniz gerekecek bu durumda ya sonradan bir değişiklik yapma ihtiyacı duyarsanız o zaman tüm sayfalardaki  kodları değiştirmeniz  gerekecek bununda  epey bir işlem alacağı kesin . Ama eğer bir kaynak dosyada bu kodları saklar ve her sayfaya src parametresi ile bu kaynak dosyayı  eklerseniz  , deşiklik yapacağınız zaman sadece kaynak dosyayı değiştirmeniz  yeterli  olacaktır.

*  Kod karmaşasından kurtulmak ve hata tespiti için kaynak dosya kullanmak daha avantajlı  olacaktır.

JAVASCRIPT Giriş

JAVASCRIPT  client(istemci)’nin browserın da çalışan bir programlama dilidir.Browser JAVASCRIPT komutlarını yorumlayarak işlevlerini yerine getirir. Web de  kullanılan programlama dillerini   (server)sunucuda çalışan ve  istemcide(client)  çalışan olarak ikiye ayırıyoruz.

HTML sadece sayfamızı oluşturmamıza yarayan  ve sayfamızdaki nesnelere kısıtlı özellikler katmamıza yarayan  text tabanlı bir etiket(markup) dilidir.İçerisinde programlama dili olması için gereken değişkenler , karar yapıları , döngüler ..vb  gibi yapıları içermez.HTML ile durağan kullanıcıların hareketlerine duyarlı olmayan web sayfaları oluşturabiliriz.

WEB SAYFASI :………………içerik + sunum + etkileşim

Yukarıya baktığımızda içerik kısmını HTML ile oluşturduğumuzu biliyoruz. Html içerik saklar fakat sakladığı içeriklerin ki bu içerikler ( yazı , resim…..) gibi özelliklerini değiştirmek yada ayarlamak için çok kısıtlı imkanlar sunar . İşte burada devreye var olan içeriğin sunulması gelmektedir. Sunum işlemi CSS yapılmaktadır.Şuanda içerik ve sunum işlemini anladığımıza göre biraz etkileşime bakalım . Evet etkileşim dediğimizde web sayfasının kullanıcı hareketlerine tepki göstermesi , yada durağan olmayan nesneler aklımıza gelmektedir.İşin bu kısmını JAVASCRIPT yardımıyla yapmaktayız.Burada şunu belirtmek isterim JAVASCRIPT bir programlama dilidir dolayısıyla içerisinde karar / döngü / kontrol yapıları bulunmaktadır.

Programlama dillerinde yazılan kodlar tek başlarına çalışırlar. Kodları çalıştırmak istediğinizde hata ayıklama ve  COMPİLE ( DERLEME)  işlemi  gerçekleştirilerek makine diline  yada arakod(çalışması için framework’e ihtiyaç duyan) çevrilirler. Fakat JAVASCRIPT  HTML içerisine eklenir ve tarayıcı tarafından yorumlanarak yazılan kodların işlevleri yerine getirilir.

JAVASCRIPT ile kullanıcı hareketlerine duyarlı , kullanıcı ile iletişime geçebilen , sayfamızdaki CSS kodlarını çalışma anında değiştirebileceğimiz ,  çalıştığı browserin yüklü olduğu bilgisayarla ilgili çeşitli bilgilere( işletim sistemi , saat , tarayıcı özellikleri) ulaşabileceğimiz , sayfamıza görsel nitelikli nesneler ekleyebileceğimiz , sayfalar oluşturmamızı sağlar

Son zamanlarda popüler olan AJAX ki sayfanın tamamını yenilemeden sadece belirli bir  region(alanı) yenilemek için kullan ılınılır  bu uygulamaların yapıtaşı JAVASCRIPTtir.

JAVASCRIPT dediğimizde DOM modelinden bahsetmek gerekir. DOM ( document object model ) bu model dokuman obje modeli , bu model sayesinde JAVASCRIPT ile sayfa üzerindeki tüm sayfa nesnelerine ( elemanlarına ) ulaşmamız mümkündür.DOM yeni versiyon hemen hemen tüm tarayıcılar tarafından desteklenmekle beraber eski tip tarayıcılarda farklılık gösterebilmektedir. Bu durumda java script içerisinde tarayıcı model ve versiyonunu tespit edip alternatif kodlar yazmamız gerekebilir.

Temel bir HTML yapısı aşağıda gözükmektedir.

JAVASCRIPT kodlarımızı HTML içerisine eklemekteyiz  bu durumda html sayfasını açıp bir text editöründe ( notepad , notepad ++ ) yada Dreamweaver ve benzeri programlarda JAVASCRIPT kodlarımızı yazabiliriz

  • JAVASCRIPT  kodlarımızı <script>  </script> tagları arasına yazıyoruz. Script tagı içerisinde script dili ve tipini belirlemeliyiz.

- language sayfamızda  kullandığımız JAVASCRIPT sürümünü belirtmek için kullandığımız  bir parametredir.Eğer belirtilen sürüm tarayıcılar tarafından desteklenmiyorsa script bloğu çalıştırılmaz. Bunu engellemek için bu parametreye sadece “JAVASCRIPT” yazmayı uygun görüyoruz .Eğer yeni çıkan bir sürüm kullanacaksak o sürümle beraber gelen tüm metot , yöntem ve özellikler sayfada kullanılabilir.

- Type parametresi ise içeriğin tipini tanımlarız  standart olarak içeriğimiz yani script blokları  rasına yazdığımız içerik text ve JAVASCRIPTtir.