Youtube Channel
javascript ile tanisalim
Javascript’le Tanışalım
Javascript, HTML’in bir parçasıdır ve içinde bulunduğu HTML ile birlikte Web Browser programı tarafından yorumlanır. Dolayısıyla, Javascript programı yazmak demek, bir Web sayfası hazırlamak ve bu sayfadaki HTML kodlarının arasına Javascript kodları gömmek demektir.İlk Javascript programımızı yazalım. Şu kodu yazıp, merhaba1.htm adıyla kaydedin:
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<TITLE>Merhaba Dünya!</TITLE>
</HEAD>
<BODY>
<B>Merhaba Dünya</B><br>
<FORM>
<BUTTON onclick="alert('Merhaba Dünya!')">TIKLAYINI!</BUTTON>
</FORM>
</BODY>
</HTML>
Sonra ya bu dosyayı iki kere tıklayın; ya da favori Browser programınızı çalıştırın ve bu dosyayı açın. Karşınıza çıkacak düğmeyi tıklayın. İşte sonuç:
Bütün Web sayfaları gibi, Javascript kodunuzun yer aldığı sayfa da tipik bir HTML kod kümesi:
1. Browser programına kendisinin bir HTML dosyası olduğunu birinci satırda beyan ediyor; ve bittiği yer açıkça gösteriliyor.
2. HTML kodu iki bölüm içeriyor: Başlık (Head) ve gövde (Body) bölümleri. Her bölümün nerede başladığı ve nerede bittiği açıkça belirtiliyor.
3. Gövde bölümünde bir Form unsuruna yer veriliyor; fakat bu formun tek ögesi var: Düğme (Button).
4. Daha önce Web sayfalarınıza düğme koyduysanız, bu düğmenin onlardan farklı bir tarafı var: Türü, değeri, vs. belirtilmiyor; sadece “onclick="alert('Merhaba Dünya!')" şeklinde bir ifadeye yer veriliyor.
5. Ve ilk Javascript programınızda ne Javascript’in adı geçiyor; ne de HTML ile Javascript bölümlerini birbirinden ayırteden, <SCRIPT>..</SCRIPT> etiketine yer veriliyor!
Javascript’te imla kuralları olmakla birlikte bu kurallara yüzde 100 uymanın zorunlu olmadığını ifade ettik. Kural olarak, Javascript bölümü, HTML’in içine <SCRIPT>..</SCRIPT> etiketlerinin arasına gömülür. İşte size bütün kuralları yerine getirilmiş bir Javascript bölümü yazma örneği:
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<TITLE>Merhaba Dünya!</TITLE>
<SCRIPT LANGUAGE=”Javascript1.2”>
<!--Javascript kodunu eski sürüm Browserlardan gizleyelim
function merhaba() //merhaba isimli fonksiyonu deklare ediyoruz
{ //bu, fonksiyonun başlama işareti
alert (“Merhaba Dünya!”) //fonksiyonun komutu ve komutun gerektirdiği metin
} //bu fonksiyonun bitme işareti
// kod gizlemenin sonu -->
</HEAD>
<BODY>
<B>Merhaba Dünya</B><br>
<FORM>
<BUTTON onclick=merhaba()>TIKLAYINI!</BUTTON>
</FORM>
</BODY>
<HTML>
Bu metni merhaba2.htm adıyla kaydeder ve Browser’ınızda açarsanız, görüntünün ve işlevin tıpatıp aynı olduğunu göreceksiniz. İki metin arasındaki fark, ikincisinin Javascript yazma kurallarına yüzde 100 uymasından ibaret. Bununla birlikte Javascript ile HTML’i birbirinden dikkatlice ayırmanız gereken durumlar, ikisinin birbiriyle kaynaştığı noktalardan daha çoktur. Hatta o kadar ki, Javascript’in ileri sürümüne ilişkin komutlar kullanıyorsanız, eski sürüm Browser’ların kafasının karışmaması ve dolayısıyla ziyaretçinizin bilgisayarının kilitlenmemesi için bunu bile belirtmeniz gereken durumlar olabilir.
Bir de şunu deneyin: önce merhaba.js adıyla şu metni kaydedin:
function merhaba()
{
alert("Merhaba, Dünya!")
}
Sonra, merhaba2.htm dosyasında şu değişikliği yapın ve merhaba3.htm adıyla kaydedin:
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<TITLE>Merhaba Dünya!</TITLE>
<SCRIPT SRC="merhaba.js" LANGUAGE=”JavaScript”>
</SCRIPT>
</HEAD>
<BODY>
<B>Merhaba Dünya</B><br>
<FORM>
<INPUT TYPE="SUBMIT" NAME="BUTTON1" VALUE="TIKLAYIN!" onclick="merhaba()">
</FORM>
</BODY>
</HTML>
Ve merhaba3.htm’i açtığınızda yine aynı görüntü ve aynı işlevle karşılaştığınızı göreceksiniz. Bu üçüncü yöntemde sadece Javascript kodlarını içeren ve dosya adının uzatması “.js” olan bir düzyazı dosyasını HTML’e dışardan da eklemiş olduk.
Etiketler: javascript ile tanışalım, <form>, javascript, javascript, javascript kodları oluşturma, <html></html>