Yeni Kayıt
Konudaki Resimler
< Bu mesaj bu kişi tarafından değiştirildi oralunal -- 15 Ağustos 2008; 21:29:02 > |
Hızlı 
Bildirim
JavaScript El Kitabı - Dr. Hakkı Öcal
Sıcak Fırsatlarda Tıklananlar
Editörün Seçtiği Fırsatlar
Daha Fazla 
Bu Konudaki Kullanıcılar:
Daha Az 
2 Misafir - 2 Masaüstü
Giriş
Mesaj
-
-
ÖNSÖZ
Eskiden, medrese zamanı, o zamanki öğrenciler de bizden farklı olmayıp, dersi kaynatmak istedikleri zaman müderrise, "Hocam; hangi velinin kızını dağda kurt yedi?" diye sorarlarmış. Hoca da başlarmış anlatmaya: "Bir kere veli değil, nebi idi; dağda değil çölde idi; kızı değil, oğlu idi. Kurt demedi, ‘Yedi!’ dediler.." dermiş.
Son bir yıldır en sık karşılaştığım soru: "Web siteme veya filanca sayfama bir Java koydum; ama çalışmıyor! Bir bakar mısınız?" Müderrisin hesabı, bu soruyu baştan yanıtlasak iyi olacak:
Bir kere Java değil, Javascript. Çalışmıyor değil, sayfada bu Script’i çalıştıracak olay ya da komut yok! Ayrıca başka bir Web sayfasında çalışan bir programın zorla yamandığı her sayfada çalışması mümkün olamaz. İşin temizi şu işi baştan öğrenmek! Sonuç itibariyle Web siteniz varsa veya açmayı düşünecek kadar ilerlediyseniz, HTML’i öğrendiniz demektir. Javascript’in, programlama dili sayarsanız, HTML’den zor bir tarafı yok! Bütün mesele, işi yarım bırakmamak; iki satır komut öğrenip, eski usul, başkalarının Javascript metinlerini kesip-kesip yapıştırma yoluna gitmemek.
Bu kitapçığı elinize alıp, bilgisayarın karşısına geçip, çok değil, bir haftanızı verirseniz, "Javascript biliyorum!" diyecek kadar Javascript öğrenebilirsiniz. Gerçi Javascript’in temeli olan ECMAScript ile ilgili kurallar kitabı 1.500 sayfa ama! Varsın olsun. Niyetiniz Javascript ile yeni bir oyun programı yazmak değilse, bu kitapçıktaki bilgiler işinize yarayacak kadar bu dili öğrenmenizi sağlayacaktır.
Konuya girmeden bir iki noktaya açıklık kazandıralım. "Javascript, Java değildir," dedik. Peki nedir? Javascript, Netscape firması tarafından hep ürküntü ile duya geldiğimiz C dilinden türetilmiştir. Java ise, Sun firması tarafından Pascal ve Delphi dillerinden esinlenerek yazılmıştır. Javascript, HTML gibi, Visual Basic Scripting Edition (VBScript) gibi, kodları (komutları) düz yazı dosyası olarak kaydedilen ve işleyebilmesi için bir yorumlayıcıya ihtiyacı olan bir dildir. Java ile yazdığınız program ise (en azından teoride) işletme sisteminden bile bağımsız olarak, kendi başına çalışabilir.
Netscape, HTML’in dil olarak yetersizliğini Web Browser programının ikinci sürümüne hazırlanırken gördü. Bir kere bir Web sayfasına bir "iş yaptırmak" istediğiniz zaman bunu HTML ile yaptıramıyordunuz. Ayrıca HTML yeteri kadar dinamik değildi. Mesela, Web ziyaretçisi radyonuzun program listesinin yer aldığı sitenize bağlandığında kendisine programları güne göre sunmak istediğinizde, bir CGI programı yazmanız veya yazdırmanız gerekiyordu. CGI (Common Gateway Interface) Web ziyaretçinin Browser’ı ile sizin sitenizin bulunduğu Web Server’ın buluştuğu nokta. Bu noktada yapılacak işler, çalıştırılacak programlar Web Server’da çalışıyor demektir. Her yeni ziyaretçi, her yeni CGI programı Web Server’ınıza ek yük yüklenmesi, yani Web Server’ın giderek yavaşlaması demek. Siteleri dinamik hale getirmeyi amaçlayan ve Web sayfasının "eğer.. ise.." sorusunu sormasını gerektiren böyle küçük programları Server’da değil de, ziyaretçinin bilgisayarında çalıştırabilmek, Server’ın yükünü azaltabilirdi. Bu düşünceden yola çıkan Netscape, LiveScript adıyla bir "Düz yazı dili" geliştirdi. O sırada Sun firmasının geliştirdiği, PC veya Mac farkı gözetmeden, Windows, Unix veya başka bir işletim sistemine tabi olmadan çalışacak bir dil üzerinde çalışıyor, ve böyle bir dilin geliştirildiği haberleri bile bilgisayar programcıları arasında heyecan fırtınalarına sebep oluyordu. Ortalığı bir "Java" fırtınası kaplamıştı. Netscape, akıllıca bir davranışla 1995 Aralık’ında bu dili piyasaya Javascript adıyla sürdü. Netscape 2.0, "Javascript uyumlu" olarak çıktı. O sırada Microsoft da Internet Explorer adlı Browser’ına bu imkanı kazandırmak istiyordu, ama Netscape bir yıla yakın Javascript’i paylaşmaya yanaşmadı. Microsoft, Netscape’in Javascript yorumlama kodunu almadan, IE’i Javascript’i anlar hale getirdi; fakat ortaya çıkan dile JScript adını verdi. Jscript 1.0 ile Javascript 1.0 tümüyle aynı idi ve her iki program da hem Javascript, hem de JScript anlayabiliyordu. Fakat bu durum çok uzun sürmedi; her iki firma da kendi Script diline diğer programın tanımadığı özellikler kazandırdılar. Bu arada Microsoft, IE’ye, JScript’te de, Javascript’te de olmayan becerilerle donattığı VBScript’i tanıma özelliği kazandırdı.
Şu anda Netscape firmasının Netscape Navigator’ı üçüncü sürümüne varan JScript’i ve VBScript’i tanımıyor, yorumlayamıyor. Buna karşılık IE, her üç Script dilini (Javascript’in bazı komutları hariç) tanıyabilir, yorumlayabilir. VBSCript, günümüzde daha çok Microsoft’un Web Server programı olan Internet Information Server (IIS) ile çalışan Web Server’larda, Server için yazılan programlarda kullanılıyor. Bu tür programlarda, mesela Active Server Pages teknolojisi ile yazılacak Server uygulamalarında da Javascript kullanılabilmesi, Javascript dilini bir Web tasarımcısının öncelikle öğrenmesini gerekli kılıyor. Bunu gerekli kılan başka gelişme daha var. Avrupa Birliği standart kurumu, daha sonra kavgayı bir kenara bırakıp, Script dilinde ortaklığa gitmenin daha doğru olduğunu gören Microsoft ve Netscape firmalarının ortaklaşa sunduğu öneriye dayanarak. Javascript ve JScript’i ECMAScript adıyla birleştirecek bir standart yayınladı. Kısa bir süre sonra, Javascript’e yüzde 99 benzeyen ortak bir Script diline kavuşacağız. Bu dili çıktığı gün bilir olabilmek için bugünden Javascript öğrenmek gerekir.
Özetlersek:
- Javascript, HTML’in içine gömülür; gerçek Java programları veya programcıkları ise yani Java Applet’ler HTML içinde sadece zikredilir, HTML’in parçası olmazlar.
- Javascript Browser’a bağımlı olarak yorumlanır, yani Javascript’in bazı komutları Netscape’te başka, IE’de başka sonuç verebilir veya hiç sonuç vermeyebilir.
- Javascript ile, ortaya uzatması .EXE olan bir dosya çıkartmazsınız; Javascript kodları HTML’in içine, kendisini HTML’den ayırteden <SCRIPT>...</SCRIPT> etiketlerinin arasına gömülür (isterseniz, içinde Javascript kodları bulunan bölümü ayrı bir düzyazı dosyası ve adının uzatmasını da ".js" yaparak HTML sayfasına LINK edebilirsiniz). Javascript, bir Script dili olduğu için illa şu ya da bu kurala uygun yazılmaz; son derece esnek bir dildir. Javascript yorumlanan bir dildir: kendisi bir takım nesneler oluşturmaz; kendisini yorumlayacak çerçeveye programa (yani Netscape Navigator’ın veya Internet Explorer’ın nesnelerini kullanır. Bu, Javascript öğrenmenin asıl büyük bölümünün Browser programının ne gibi unsurları, bu unsurların ne gibi özellikleri olduğunu ve bu özelliklere hangi olay sırasında nasıl hitap edileceğini bilmek anlamına gelir.
- Son nokta, Javascript, ancak bir olay halinde işler: bu olay ziyaretçinin Browser programının bir iş yapması, bir işi bitirmesi veya ziyaretçinin bir yeri tıklaması ya da klavyesinde bir tuşa basması demektir.
Peki, Javascript’i tanıdığımıza göre, biraz da onunla neler yapabileceğinizden söz edelim. Gerçi su kitapçığa ilgi gösterdiğinize göre, Javascript’in kullanım alanlarına o kadar da yabancı olmadığınız anlaşılıyor; fakat kısaca "client-side application" (istemci-tarafındaki uygulama) programlarına değinmemiz gerekir. Yukarıda dedik ki, Javascript bir Web sayfasında oluşturulmak istenen bazı etkileri yerine getirecek işlerin Web Server’da değil, ziyaretçinin bilgisayarında yapılması maksadıyla geliştirildi. O halde Javascript programları Web ziyaretçisinin bilgisayarında çalışacaktır. HTML kodlarınızın arasına gömdüğünüz Javascript kodları, kendilerini harekete geçirecek işareti görünce, ne yapmaları gerekiyorsa, o işi yaparlar. Bu işler neler olabilir? Çok çerçeveli bir sayfada belirli çerçevelerin içeriğini belirleme işi Javascript ile yapılabilir. Ziyaretçilerinizden sayfalarınızda bazı formlar doldurmalarını istiyorsanız, bu formların kutularına yazılan bilgilerin, arzu ettiğiniz türden olup olmadığı Javascript ile anında denetlenebilir (Hayır; Javascript, kendiliğinden, sitenizi ziyaret edecek kişilerin kredi kartı numarasını edinemez!).
Javascript öğrendiniz diye her yere Javascript kodları serpiştirmeli misiniz? Hayır. HTML ile yapabileceğiniz bir işi asla Javascript ile yapmamalısınız. Bu iyi tasarım ilkelerine aykırıdır. Bir kere, sayfanıza koyacağınız her Javascript kodu, sizin kendi yükünüzü arttırır; belirttiğimiz gibi Javascript henüz ve muhtemelen epey bir zaman için Browser-bağımlı olarak kalacak, yani kodlarınızın IE ve Netscape’de yorumu daima yüzde 100 aynı olmayacaktır. Bu yüzden yazacağınız her Javascript kodunu her iki Browser’da ve farklı sürümlerinde sınamak zorundasınız. İkincisi, Javascript kodunuz, ne kadar kısa olursa olsun, ziyaretçinin Browser’ının yükünü arttıracaktır. Hiç kimsenin sizin programcılık becerisi gösterinizi izleyecek zamanı yok! Javascript veya başka herhangi bir Script programına, ancak ve sadece HTML’in yetersiz kaldığı durumlarda başvurabilirsiniz.
Sonuç: Javascript, Java değildir, ama ona yakın beceriklilikte bir programlama dilidir. Programlama dilleri arasında öğrenme kolaylığı bakımından en ön sırada yer alır. Ve en önemlisi, Javascript olağanüstü zevklidir. Gerçek hikayeyi anlattıkça, Javascript ile neler yapabileceğini gördükçe, bir daha başkasının Javascript kodunu alıp, "Neden işlemiyor?" diye üzülmektense, kendi Javascript’inizi yazmanın daha kolay olduğunu da göreceksiniz.
Bu kitapçığı, okurun iyi, hem de bayağı iyi düzeyde HTML bildiği varsayımıyla ve programlama konusunda hiç deneyimi olmayan bir Web tasarımcısını dikkate alarak kaleme aldık. Eğer HTML konusunda kendinizi hazır hissetmiyorsanız, söz gelimi, Byte dergisinin Eğitim Dizisi’nde çıkan HTML Rehberi kitapçığını okumanızı öneririm. Bir programlama dili biliyor ve şimdi Javascript‘i öğrenmek için bu kitapçığı okuyorsanız, programlamanın temel ilkeleriyle ilgili cümleleri veya bölümleri okumak zorunda değilsiniz! Yine bu kitapçıkta hemen her fırsatta Javascript’e ilişkin bütün terimlerin İngilizcesini göstermeye ve kullanmaya çalıştık. Bunun amacı, ilerde karşılacağınız kullanılmaya hazır ve kullanma izni verilmiş Javascript kodlarını kendi sayfalarınıza uyumlu hale getirirken, program yazıcısının neyi nasıl ifade ettiğine aşina olmanıza yardımdır. Bu kitapçıkla giriş yaptığınız Javascript’i daha başka kaynaklardan derinlemesine öğrenmek istediğiniz zaman da, İngilizce terimler kaynaklar arasında paralellik kurmanıza yardımcı olacaktır. Buraya kadar dersi iyi kaynattık. Haydi kolları sıvayalım.
Bu kitapçıktaki örnek kodları istediğiniz gibi kendi sitenizde kullanabilir ve dağıtabilirsiniz. Ancak bu kodların satılması yasaktır.
- Javascript, HTML’in içine gömülür; gerçek Java programları veya programcıkları ise yani Java Applet’ler HTML içinde sadece zikredilir, HTML’in parçası olmazlar.
-
JAVASCRITP'LE TANIŞALIM
Javascript programı yazmak için ihtiyacınız olan alet-edavat, bu kitapçığın yanı sıra, iyi bir bilgisayar ve bir düz yazı programıdır. Bilgisayarınız ecza dolabı kılıklı bir PC ise Notepad, bilgisayarınız mandalina, çilek veya şeftali renkli bir iMac ise SimpleText bu iş için biçilmiş kaftan sayılır. Eğer bu amaçla bir kelime-işlem programı kullanacaksanız, oluşturacağınız metnin dosyasını diske veya diskete kaydederken, düz yazı biçiminde kaydetmesini sağlamalısınız. Çalışmaya başlamadan önce örnek kodlarınızı bir arada tutabilmek ve gerektiğinde gerçek sayfalarınızda yararlanabilmek için sabit diskinizde bir dizin açmanız yerinde olur.
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.
O halde, kolları sıvayıp, ilk 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ç:
Şimdi kendi kendinizi kutlayın: Birazcık yardımla da olsa, Javascript programcısı olarak dünyaya merhaba demiş bulunuyorsunuz. Yazdığınız koddan tek kelime bile anlamıyorsanız da hiç önemli değil. Önemli olan ilk adımı atmaktı.
Bu adımı attığınıza göre şimdi yazdığınız kodu biraz irdeleyelim. Bütün Web sayfaları gibi, Javascript kodunuzun yer aldığı sayfa da tipik bir HTML kod kümesi:
- Browser programına kendisinin bir HTML dosyası olduğunu birinci satırda beyan ediyor; ve bittiği yer açıkça gösteriliyor.
- 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.
- Gövde bölümünde bir Form unsuruna yer veriliyor; fakat bu formun tek ögesi var: Düğme (Button).
- 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.
- 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!
Özellikle bu son husus, size şunu gösteriyor: Günümüzde Netscape ve IE Javascript ile o kadar içiçe geçmiş ve Javascript özellikle 1.2’nci sürümü ile o kadar Browserların Belge Nesnesi Modeli (Document Object Model) ile kaynaşmıştır ki, kimi zaman HTML’in işlevi nerede bitiyor, Javascript’in işlevi nerede başlıyor, kolaylıkla ayırt edilemez. Javascript’ten söz ederken, bu dilin 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. Bu esnekliğe bakarak, Javascript diline, "Ne yapsam olur! Nasıl yazsam işler!" anlayışıyla yaklaşamazsınız. Javascript, bütün bilgisayar dilleri gibi yorumlanabilmesi (çalışabilmesi) için kendi imla ve dilbilgisi kurallarına son derece bağlı kalınmasını ister. Bunu sınamak isterseniz, şu ana kadar oluşturduğunuz herhangi bir HTML dosyasında Javascript bölümündeki bir parantezi veya süslü parantezi kaldırın; dosyayı başka bir isimle kaydedin ve Browser’ınıza açtırmaya çalışın! Merhaba3.htm dosyasında "onclick="merhaba()" komutunun bir parantezini kaldırdığımızda, Netscape ve IE’nin şu hata mesajlarını verdiğini görüyoruz:
HTML sayfalarınının Web Browser programlarında yapabileceği bir başka hata ise, kodu icra etmek yerine içerik gibi görüntülemektir. Web ziyaretçilerinin halâ kullandığı eski sürüm Browser programları, Javascript programlarını ya hiç anlamazlar, ya da eski sürümlerini anlarlar. Netscape 2.0 öncesi ile IE 3.0 öncesi Browser programlarının, Javascript kodlarını icra etmek yerine sayfanın içeriği imiş gibi görüntülemesini önlemek için Script bölümlerini eski sürüm Browser’lardan, merhaba2.htm sayfasında yaptığınız gibi gizlemeniz gerekir. Merhaba2.htm’e bakarsanız:
<!-- Javascript kodunu eski sürüm Browserlardan gizleyelim
function merhaba()
{
alert ("Merhaba Dünya!")
}
// kod gizlemenin sonu -->
şeklinde bir bölüm göreceksiniz. Bu bölümün başında ve sonunda yer alan "<!--" ve "-->" işaretlerinin arasındaki herşey, eski sürüm Browserlar tarafından HTML dili kurallarına göre "yorum" sayılacak ve görmezden gelinecektir. Javascript dilinin yorumları ise "//" işaretiyle başlar ve satır sonunda sona erer. Merhaba2.htm’de Javascript kodlarının bütün satırlarında böyle yorumlar koydunuz. Eğer yorumlarınız bir satırdan uzun olacaksa, bunu şöyle belirtebilirsiniz:
/* yorumun birinci satırı
yorumun ikinci satırı
yorumun üçüncü satırı */
Javascript veya başka bir dille program yazarken, iyi programcılar, programlarını kendilerinden başkası denetlemeyecek ve yeniden kullanmayacak da olsa, önemli işleri yaptıkları satırlara mutlaka yorum koyarlar. Bunun yararını, kendi yazdığınız bir programı bile bir yıl sonra yeniden açtığınızda görürsünüz!
Ziyaretçinin Web Browser programı Javascript anlıyor ise sayfanızdaki Javascript kodları, ya ilk yazdığınız programda olduğu gibi, ziyaretçinin sayfanızda bir yeri tıklaması veya klavyede bir tuşa basmasıyla harekete geçer; ya da HTML sayfası ziyaretçinin Browser’ında görüntülendiği anda otomatik olarak çalışmaya başlar. Otomatik çalışan Javascript kodu ise iki ayrı yöntemle çalıştırılabilir: HTML kodları icra edilmeden önce (yani sayfanız ziyaretçinin Web Browser’ında görüntülenmeden önce, veya sayfa görüntülendikten sonra. Davranın düz yazı programınıza ve şu kodları girin:
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<TITLE>Merhaba Dünya!</TITLE>
<SCRIPT LANGUAGE="Javascript1.2">
<!--
alert("Merhaba Dünya!")
// -->
</SCRIPT>
</HEAD>
<BODY>
<B>Merhaba Dünya</B><br>
</BODY>
</HTML>
Bu dosyayı da merhaba4.htm adıyla kaydedin ve Browser’ınızda açın.
Sayfanızın içeriğini oluşturan "Merhaba Dünya" yazısı ile Javascript
programınızın icra ettirdiği uyarı kutusunun görüntülenmelerindeki
sıraya dikkat edin.
Bu dosyada, küçük bir değişiklik yapalım ve kodlarımıza şu şekli verelim:
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<TITLE>Merhaba Dünya!</TITLE>
<SCRIPT LANGUAGE="Javascript1.2">
<!--
function merhaba()
{
alert("Merhaba Dünya!")
}
// -->
</SCRIPT>
</HEAD>
<BODY onLoad="merhaba()">
<B>Merhaba Dünya</B><br>
</BODY>
</HTML>
merhaba5.htm adıyla kaydedeceğiniz bu dosyayı Browser’ınızda açtığınızda, sayfa metni ile uyarı kutusunun görüntülenme sırasına dikkat edin. Merhaba4’de önce uyarı kutusunun görüntülenmesinin sebebi, Browser’ın HTML kodundaki komutları yukarıdan aşağı sırayla yerine getirmesi ve bu arada karşısına çıkan Javascript komutunu da icra etmesidir. Oysa merhaba5’te, Javascript komutunu bir fonksiyon olarak tanımladınız ve bu fonksiyonun icrasını HTML’in BODY etiketinin içeriğinin Browser’ın penceresine yüklenmesine bağladınız. Bunu Javascript’in "onLoad" komutuyla yaptık. (onLoad’ın nasıl kullanıldığını ve nerelerde kullanıldığını daha sonra ayrıntılı ele alacağız. Şimdiden telaşa kapılmaya gerek yok!)
Buraya kadar gördüğümüz bir kaç örneği, Javascript kodlarının ne zaman ve nasıl işlediğini göstermek amacıyla verdik. Fakat bu örneklerden çıkartacağımız başka bir sonuç daha var: Dikkat etti iseniz Javascript komutları, daima HTML sayfasının bir unsuruna bağlı olarak veriliyor. Yani Javascript’in konusu veya hedefi, Web Browser programının (Netscape veya IE’nin) bilgisayarın ekranında oluşturduğu pencerenin içindeki belgenin bir ögesi. Bu öge, şimdilik ya bu belgenin içindeki FORM unsurunun bir bölümü (örneğin, düğmesi), ya da sayfanın BODY bölümünün bizzat kendisi oldu.
Bu ögeler, unsurlar, unsurların bölümlerine programcılık dilinde "Nesne" (Object) denir. Ya kendisi bir nesne oluşturabilen veya içinde çalıştığı programın ya da işletim sisteminin nesnelerini konu alan ve bu nesnenin unsurlarını, ögelerini, parçalarını hedef olarak alan dillere Object-oriented (nesne-yönelimli) diller denir. Bu dillerle yazılan programlara (isterse bir Script dilinin düz yazı şeklindeki komutları olsun) Object-oriented Program (OOP) adı verilir.
Javascript programları da OPP sınıfına girdiği için, Javascript programcısı olacaksanız, programlarınızın mutlaka Web Browser’ın bir nesnesinin bir özelliğini belirlemeye veya değiştirmeye ve Web Browser’ı bir nesne oluşturmaya ve nesnenin şu özelliğini şöyle veya böyle yapmaya yönelik olması gerektiğini akıldan hiç çıkartmamalısınız. Bu nesne, Browser’ın penceresinin menü çubuğunun olması ya da olmaması, pencerenin bilgisayar ekranında ne büyüklükte olması, pencerenin alt çerçevesindeki statü mesajının içeriğinin değiştirilmesi bile olabilir. Javascript programı açısından HTML etiketleri ile oluşturacağınız hemen herşey nesnedir. Bu nesnelerin nasıl etkileneceği ise Javascript programının içeriğini oluşturur. Özetlersek, Javascript ile Web Browser programını penceresini ve Browser programının yorumladığı HTML etiketlerinin oluşturacağı sayfa ögelerini, bu ögelerin biçimini, değerini belirler, sorgulayabilir ve değiştirebilirsiniz.
Şimdi kısaca bu işlevselliğin temeli olan ve adına Document Object Model (DOM, Belge Nesne Modeli) denen kurallar demetinden söz edelim. Javascript kodu, DOM’u hedef alır: bu bağlamda DOM, bir Browser’ın penceresi ve penceresinin içindeki herşey demektir. Ama henüz herşey için bir olay ve metod standardı geliştirilmiş değil.
"Olay" (Event) ve "Metod" (Method) burada dikkat etmeniz gereken iki kelime. Olay, Web Browser’ın veya kullanıcının yaptığı bir iş, eylem, hareket demektir; "Metod" ise programcı olarak sizin bu "Olay"ı veya nesnenin bir özelliğini (Property) kullanarak, Belge’nin bir unsuruna yaptırtabileceğiniz iş, eylem, hareket veya değişikliktir. Bu "teori" ilk bakışta sanıldığı kadar kavranması zor değil. Bir örnekle açıklayalım:
Diyelim ki, HTML sayfanızda şöyle bir bölüm var:
<FORM NAME=form01> WEB KİTAPÇISI
<INPUT TYPE="checkbox" NAME="roman">Roman
<INPUT TYPE="checkbox" NAME="hikaye">Hikaye
<INPUT TYPE="checkbox" NAME="biyografi">Biyografi
<TEXTAREA NAME="sonuc" ROWS="6" COLS="6">Burada sonuç gösterilecek</TEXTAREA>
</FORM>
Şimdi bu HTML kodu sayfanızda şu Nesne’leri oluşturur:
- Bir adet Form
- Dört adet "checkbox" türü INPUT alanı
- Bir adet metin alanı
Şimdi dikkat: Sizin açınızdan "form01" isimli bu formu oluşturan FORM ögesi, Javascript açısından "document.form01" adlı nesnedir. Ziyaretçinin içine işaret koyduğu kutu, Javascript tarafından "document.checkboxSelected" diye tanınır. Sizin "sonuc" isimli metin alanınızın içinde yazılı olacak metin ise Javascript bakımından "document.form01.sonuc.value" (value=değer) diye bilinir. HTML dilini geliştirenler, türü "checkbox" olan INPUT nesnesinin başına gelebilecek "olay" türlerinin neler olabileceğini düşünürken, "Mesela," demişler, "Kullanıcı bu kutuyu tıklayabilir!" Yani, bu nesnenin Browser açısından yol açabileceği "olay"lardan biri tıklanması halinde olan olaydır. Tıklamanın İngilizcesi ne? "click!" O halde bu olayın adı "Click," bu olayı yönlenrdiren metodun adı ise "onClick"tir (on, İngilizce -de, -da eki veya üzerinde, halinde kelimesinin karşılığıdır). Bu durumda "onClick," olayı, bu kutu açısından bir olaydır ve Javascript prnogramcısı olarak bu olayı yakalayabilir, kullanabiliriz. Başka bir deyişle, Browser’a, Javascript yoluyla "Ey Browser; kullanıcı benim INPUT nesnelerimden "roman" adlı olanı tıkladığı zaman şu, şu işi yap!" emrini verebiliriz. Bu noktada bilgisayar programının, hangi dille yazılırsa yazılsın, alt alta gelmiş komutlar listesi olduğunu hatırlatalım.
Peki, yine aynı örnekte, Browser’a Javascript yoluyla ne gibi bir iş yaptırtabiliriz? Mesela, "Ey Browser, kullanıcı benim INPUT nesnelerimden ‘roman’ adlı olanı tıkladığı zaman benim ’sonuc’ adlı TEXTAREA nesnemin değerini ‘Roman’ yap!" diyebiliriz. Biliyorsunuz ki, TEXTAREA nesnelerinin değeri, ekranda çizdikleri kutunun içine koydukları içerik demektir. Tabiî aynı mantıkla, "hikaye" kutusu işaretlenince Sonuç kutusuna "Hikaye," "biyografi" kutusu işaretlenince de Sonuç kutusuna "Biyografi" yazdırtmak elimizde.
Kısaca, Javascript herşeyi, bir HTML ögesine göre tanımlar, adlandırır ve bilir. Unutmayacağınız kural: "Javascript, sayfanın bir şeyini alır, sayfanın bir şeyine hitabeder!"
Bu gayet anlamlı şekilde ifade ettiğimiz kuralı yerine getirmekte sorun, sadece Javascript’in on-onbeş kelimesini, yedi-sekiz işlemini öğrenmek değil, aslında HTML belgesinin nesnelerinin olaylarını ve metodlarını öğrenmektir.
Dolayısıyla, önce Javascript’in on-onbeş kelimesi ve yedi-sekiz işleminden ibaret temel kurallarını ele alacağız; sonra da bunlarla Belge Nesneleri'ne hangi olay halinde ne yapabileceğimizi ve bunu nasıl yapabileceğimizi göreceğiz.
< Bu mesaj bu kişi tarafından değiştirildi oralunal -- 13 Ağustos 2008; 21:23:32 >
- Browser programına kendisinin bir HTML dosyası olduğunu birinci satırda beyan ediyor; ve bittiği yer açıkça gösteriliyor.
-
JAVASCRIPT'IN TEMEL İLKELERİ
Web Browser programları, Javascript komutlarını yorumlayabilmek için, HTML’in içinde <SCRIPT LANGUAGE="Javascript"> etiketini ararlar ve </SCRIPT> etiketini gördükleri anda bu yoruma son verir; HTML yorumuna dönerler. Bu etikette, kullanacağınız Javascript sürümünü de belirtebilirsiniz. Javascript, şu anda 1.3’ncü sürümünde. Ancak Netscape 2.0 ve 2.2 ile IE 3.0, Javascript’in 1.0 ve 1.1 sürümlerini tanıyabilir. Her iki Browser’ın 4’ncü sürümleri ise Javascript 1.2 ile uyumludur. Script etiketinde sürüm yazmazsanız, her iki Browser da 1.0 sürümünü kullandığınızı varsayar. Netscape ileri sürümlere ait komutları (eğer tanıyorsa) icra eder, tanımıyorsa görmezden gelir. IE ise belirttiğiniz sürümden ileri komutları tanımaz ve hata mesajı verir. Kullanılan Browser türleri ve sürümlerine ilişkin istatistikler dikkate alınırsa, bu satırları kaleme aldığımızda en güvenli sürüm 1.2’dir. Biz de örneklerimizde bunu belirteceğiz. Hemen bir uyarı Javascript’in birinci sürümünü kastetmek amacıyla <SCRIPT LANGUAGE="Javascript1.0"> veya "<SCRIPT LANGUAGE="Javascript1"> yazmayın; IE hata mesajı verir, Netscape ise Javascript bölümünü görmezden gelir!
< Bu mesaj bu kişi tarafından değiştirildi oralunal -- 13 Ağustos 2008; 21:24:09 >
-
JAVASCRIPT YAZIM KURALLARI
Browser’ların Javascript yorumlama bölümleri, kodların arasında yer alan yorum ifadeleri ile boşlukları atar; geri kalan kelimeleri beşe ayırarak ele alırlar:
- Belirleyiciler (Identifier):
Javascript dilinin değişkenleri, metodları ve nesnelerini belirleyen isimlere Belirleyiciler denir. Bu sınıfa giren bütün kelimeler ya harfle ya da alt çizgi (_) ile başlar. Rakam veya diğer işaretler birinci karakter olarak kullanılamaz, fakat daha sonra kullanılabilir. Javascript, aynı kelimenin büyük harfle yazılanı ile küçük harfle yazılanını farklı isimler olarak görür. Bu sınıfta giren kelimelerin içinde boşluk olamaz. Javascript kodlarınız sizin bilgisayarınızda değil, ziyaretçinin bilgisayarında çalıştırılacağına göre, kullandığınız karakterlerin ziyaretçinin bilgisayarında nasıl bir değer taşıyacağını düşünmeniz gerekir. Bu bakımdan güvenli yol, Bu sınıfa giren kelimelerde, İngilizce alfabede bulunmayan, Türkçe ve diğer dillerdeki high-ASCII karakterleri (ı, İ, ğ, Ğ, Ş, Ş ile ü, Ü, ö, Ö, ç ve Ç) kullanmamaktır.
Aşağıda doğru ve yanlış belirleyici kelime örneklerini bulacaksınız:
Doğru Yanlış
sonucgoster sonuc goster
ikincidegisken 2ncidegisken
_gelen #gelen
Anahtar kelime grubundaki kelimeler de bu sınıfta kullanılamaz.
- Anahtar Kelimeler (Keyword):
Javascript dilinin önceden tanımlanmış ve programın yorumunda özel anlam kazandırılmış kelimelerine Anahtar Kelime denilir. Aşağıda bu kelimelerin yanında kelime anlamlarını göreceksiniz; fakat ilerledikçe bu kelimelerin Javascript’te kullanıldıkları yere göre anlamlarını ve nerelerde kullanıldıklarını göreceğiz.
Javascript 1.0’deki anahtar kelimeler:
break (kes)
continue (devam et)
else (başka bir durum)
false (yanlış)
for (için)
function (işlev)
if (eğer)
in (içinde)
int (integer, tam sayı)
new (yeni)
null (boş değer)
return (dön)
this (bu)
true (doğru)
var (variable, değişken)
while (... iken)
with (ile)
Javascript 1.i ile eklenen anahtar kelimeler:
typeof (türü)
void (geçersiz)
Javascript 1.2 ile eklenen anahtar kelimeler:
do (yap)
labeled (etiketli)
switch (değiştir)
- Ayrılmış Kelimeler (Reserved):
İkinci gruba girsin-girmesin bazı kelimeler, ilerde Javascript programlama ve yorumlama işlerinde kullanılabileceği düşüncesi ile, bir kenara ayrılmıştır; Javascript kodlarında kullanılamazlar. Bu listede yer alan ve halen Anahtar Kelime listesine girmiş bir kelime değişken, fonksiyon, nesne veya metod adı olarak kullanılırsa, program hata verir; henüz anahtar kelime listesine alınmamış olmakla birlikte "rezerv edilmiş" bu kelimelerin geçtiği komut satırı ise görmezden gelinir. Javascript programlarınızda kullanmayacağınız kelimelerin listesi şöyledir:
abstract (soyut)
boolean (Boolean Mantığı)
break (kes)
byte (bayt)
case (hal)
catch (yakala)
char (karakter)
class (sınıf)
const (sabit)
continue (devam)
default (varsayılan)
delete (sil)
do (yap)
double (çift)
else (başka bir durum)
extends (uzanır)
false (yanlış)
final (sonuncu)
finally (sonunda)
float (kesirli)
for (için)
function (işlev)
goto (--ya git)
if (eğer)
implements (uygular)
import (ithal et)
in (içinde)
instanceof (--nın oluşumu)
int (integer, tam sayı)
interface (arayüz)
labed (etiketli)
long (uzun)
native (kendinden olan)
new (yeni)
null (boş değer)
package (paket)
private (özel)
protected (korunmuş)
public (genel)
return (dön)
short (kısa)
static (sabit)
super (kuvvet)
switch (değiştir)
synchronized (uyumlu)
this (bu)
throw (içine kat)
throws (içine katar)
transient (geçici)
true (doğru)
try (dene)
typeof (türü)
var (değişken)
void (geçersiz)
while (iken)
with (ile)
- Değerler (Literal):
Javascript kodu icra edildiği sırada değişmeyen rakam veya metinlere Değer denir. Javascript kodlarında beş tür değer bulunur:
- Tamsayı Değerler (Integer Literal):
Tamsayılar, 10 tabanlı (ondalık, decimal), 8 tabanlı (octal) veya 16 tabanlı (hexadecimal) olabilir. 8 tabanlı sayıları belli etmek için sayıdan önce sıfır, 16 tabanlı sayıları belli etmek için sıfır ve x harfi kullanılır. Hexadecimal sayılarda 9’dan büyük sayılar A, B, C, D, E ve F harfleri ile yazılır. (Sayının basamaklarını okuma kolaylığı sağlamak için, nokta değil, virgül ile ayırmalısınız.) Örnek: Decimal 46,789; Octal 072,7898; Hexadecimal: 0x7B8.
- Kesirli Değerler (Floating-point literal):
Tam sayı bölümünü bir ondalık nokta (virgül değil) ile kesir bölümü izleyen sayılar. Örnek: 3987.786, -1.1.
- Boolean Mantık İfadeleri (Boolean Literal):
Javascript dilinde, Boolean Mantığı, iki sonuç verir: True (Doğru) ve False (Yanlış). Javascript, True (Doğru) değerini 1, False (Yanlış) değerini 0 rakamıyla tutar. Bir denklemin sonucunun doğru veya yanlış olduğunu irdelerken, Javascript metninde bu iki kelime küçük harfle yazılmalıdır. Dolayısıyla büyük harfle yazılmış TRUE ve FALSE kelimeleri, değişken, fonksiyon, nesne ve metod adı olarak kullanılabilir. Tabii, bir süre sonra kafanız karışmazsa!
- Alfanümerik (Karakter) Değerler (String literal):
İki adet çift-tırnak (") veya tek-tırnak (‘) içine alınan her türlü ifade, Javascript için String değeridir. (Çeşitli Türkçe bilgisayar kaynaklarında "String literal" terimi "karakter değişken" olarak belirtilmektedir. "Karakter" bu değerlerin örneğin sayı değerlerden farkını anlatmıyor. Bazı kaynaklarda ise hem rakam, hem de harf içerdikleri, buna karşılık sayı olmadıkları gerçeğini belirtmek amacıyla, daha aşina olduğumuz alfanümerik terimini görmek mümkün. Ben bu ikincisini benimsiyorum.) Bir Javascript metninde alfanümerik değerleri bir tek tırnakla, bir çift tırnakla gösteremezsiniz. Başta nasıl başladıysanız, programın sonuna kadar bütün alfanümerik değerleri aynı tür tırnak içinde göstermelisiniz. Alfanümerik değer olarak verdiğiniz karakterler, daha sonra bir HTML sayfada bir nesnenin bir unsurunun değeri (örneğin bir TEXTAREA’nın içeriği) olarak kullanılacaksa ve HTML sayfa, meta etiketlerinde kendisinin Türkçe olarak yorumlanmasını sağlayacak ifadeye sahipse, Türkçe karakter ve diğer yüksek ASCII kodlardaki karakterleri içerebilir. Örnekler: "Bugün hava çok güzel" ‘Bugün hava güzel değil’ "123 adet yumurta" ’23,234,678.987’
- Özel Karakterler
Özellikle alfanümerik değerleri verirken, Browser’a metin görüntüleme konusunda biçim veya hareket komutları da vermek isteyebilirsiniz. Bunu, bazı kod harflerin önüne ters-bölü işareti koyarak yapabilirsiniz. Bu tür özel karakterler şunlardır:
\b - Klavyede Geri (backspace) tuşunun görevini yaptırır.
\f - Yazıcıya sayfayı bitirmeden çıkarttırır (formfeed).
\n - Yazı imlecini yeni bir satırın başına getirir (new line)
\r - Klavyede Enter-Return tuşunun görevini yaptırır.
\t - Sekme (tab) işaretini koydurur.
\\ - Yazıya ters-bölü işareti koydurur.
\’ - Yazıya tek-tırnak işareti koydurur.
\" - Yazıya çift-tırnak işareti koydurur.
Javascript’e bu tür özel karakterlerle HTML sayfasına bir metin yazdıracağınız zaman, bu yazının <PRE>..</PRE> etiketleri arasında olması gerekir. Aksi taktirde Javascript ne yazdırırsa yazdırsın, HTML bu özel karakterleri dikkate almayacaktır.
- Tamsayı Değerler (Integer Literal):
< Bu mesaj bu kişi tarafından değiştirildi oralunal -- 13 Ağustos 2008; 21:24:34 >
- Belirleyiciler (Identifier):
-
JAVASCRIPT DEĞİŞKENLERİ(VARIABLE)
Değişken, adı üstünde, Javascript yorumlayıcısı tarafından bilgisayarın belleğinde tutulan ve içerdiği değer programın akışına göre değişen bir unsurdur. Değişkenlerin bir adı olur, bir de değeri. Program boyunca beğişkenin adı değişmez; fakat içeriği değişebilir.
Değişkenlere isim verirken Belirleyici isimleri kurallarına riayet etmeniz gerekir. Yani bir değişkenin adı rakamla veya alt çizgi (_) dışında bir işaretle başlayamaz. Javascript, büyük harf-küçük harf ayırt ettiği (case-sensitive olduğu) için, örneğin SONUC ve sonuc kelimeleri iki ayrı değişken gösterir. Bir değişkeni tanımlarken, büyük harf kullandıysanız, program boyunca bu değişkeni büyük harle yazmanız gerekir.
Değişken tanımlamak, bilgisayar programcılarına daima gereksiz bir yük gibi görünür. Birazdan göreceğiz, Javascript sadece değişkenleri tanımlamayı zorunlu kılmakla kalmaz, fakat nerede tanımlandığına da özel bir önem verir. Javascript’e bir Belirleyici’nin değişken olarak kullanılacağını bildirmek için "var" anahtar-kelimesini kullanırsınız:
var sonuc
var adi, soyadi, adres, siraNo
var i, j, k
var mouseNerede, kutuBos, kutuDolu
Gördüğünüz gibi, bir "var" satırında birden fazla değişken tanımlayabilirsiniz. Bazı diğer programlardan farklı olarak Javascript, size değişkenleri hem beyan, hem de içeriğini belirleme işini aynı anda yapma imkanı veriyor (initialization):
var sonuc = "Merhaba Dünya!"
var adi = "Abdullah", soyadi = "Aksak"
var i = 100, j = 0.01, k = 135
var kutuBos = false, kutuDolu = true
Gerekiyorsa, bir değişkeni önce tanımlar, sonra değerini belirleyebilirsiniz:
var kutuBos = false, kutuDolu
kutuDolu = true
Javascript, programcıya bir değişkeni tanımlamadan "initalize etme" (içine doldurma) imkanı da verir; bu durumda o değişken genel (global) nitelik kazanır. Buna birazdan değineceğiz; ama iyi programlama tekniği ve özellikle daha sonra hata arama zorunluğu sebebiyle, değişkenlerin açık-seçik tanımlanması en doğru yoldur. Bir değişkeni tanımlayarak içini doldurmadan (initialization’dan) önce içindeki değeri sorgulamaya kalkarsanız, Browser’ın Javascript yorumlayıcısı o noktada durur ve tanımlanmamamış (undefined) değişken hatası verir. Javascript programlarında beş tür değişken bulunabilir:
- Sayı (number): -14, 78, 87678
Sayı türündeki değişkenler, tam sayı, ondalık sayı, pozitif sayı veya negatif sayı olabilir. Sayı değişkenlerle aritmetik işlemler yapılabilir.
var eni = 9, boyu = 4
var alani = eni * boyu
document.writeln(alani)
Bu kod örneği ile Javascript, Browser penceresi içindeki belgeye "alani" adlı değişkenin değerini (36) yazdıracaktır.
- Boolean değişken: true, false
Javascript, tanımlanırken değeri "true" (doğru) veya "false" (yanlış) olarak belirtilen değişkenleri otomatik olarak Boolean değişken olarak sınıflandırır ve sorguladığınızda "true" için 1, "false" için 0 değerini verir.
- Alfanümerik (String) Değişken: "Merhaba Dünya!"
Alfanümerik değişken, kendisine tek veya çift tırnak içinde verilen bütün karakterleri tutar, ve sorulduğunda aynen bildirir. Alfanümerik değişkenin içi boş olabilir (var adi = "", soyadi = ""). Alfanümerik değişkenler, tabir yerinde ise "toplandığında" değişkenlerin değerleri sırayla birbirine eklenir:
var adi = "Osman", soyadi = "Hömek"
var adisoyadi = adi + soyadi
document.writeln(adisoyadi)
Bu kod örneği ile Javascript, Browser penceresi içindeki belgeye "adisoyadi" adlı değişkenin değerini (OsmanHomek) yazdıracaktır. Araya boşluk koymanın tekniğine ilerde değineceğiz!
- İşlev (Function) Değişken:
Javascript’in hayatî noktası fonksiyonlardır. Javascript’e fonksiyonlarla iş yaptırırız. Kimi fonksiyonu, Javascript’i tasarlayanlar bizim için tanımlamışlardır; bunlara metod denir. (Kimi metod, ne yapacaksa bizim hiç bir katkımızı beklemeden yapar; kimi metod mutlaka bizden bir katkı bekler.) Kimi fonksiyonları biz tanımlarız ve komutlarını biz veririz. Bunlara "Programlanan Fonksiyonlar" denir. Başlarda yazdığınız ve merhaba2.htm adıyla kaydettiğiniz dosyada biz "merhaba()" adlı bir fonksiyon oluşturduk; sonra bu fonksiyona bir otomatik fonksiyon olan alert() metodunu kullanmasını bildirdik; bu otomatik fonksiyona da görevini yaparken kullanmasını istediğimiz değeri verdik!
- Nesne (Object) değişkenleri: window, document
Bu tür değişkenlere değişken adını vermek bile gerekmez; çünkü bunlar Browser’ın nesneleridir. Fakat Javascript kodlarımızda bu nesneleri de değişken gibi kullanabiliriz. Bu sınıfa giren özel bir değişken ise değerini "null" (içi boş) kelimesiyle belirlediğiniz değişkenlerdir.
Javascript, değişkenlerini bu beş sınıfa ayırmakla birlikte sizden değişkenlerinizini sınıflamanızı beklemez. Sınıflamanın önemi, daha sonra, programın ileri bir aşamasında bir değişkenin değeri ile yaptıracağınız işlemde ortaya çıkacaktır. Bir değişken, kendi sınıfının yapamayacağı bir işleme veya sorgulamaya tabi tutulursa, Javascript size pek de kibarca olmayan bir hata mesajı ile değişkeni doğru kullanmadığınızı hatırlatacaktır. Bununla birlikte bir fonksiyonda sayı olarak tanımlanmış ve doldurulmuş bir değişken, aynı fonksiyonda daha sonraki bir işlemde veya başka bir fonksiyonda alfanümerik değişken olarak tanımlanabilir ve doldurulabilir. Bu değişken sorgulandığında değerini, yetki alanı (scope) çerçevesinde bildirir.
Değişkenlerin yetki alanı veya geçerli olduğu alan (scope), oluşturulmuş ve değeri belirlenmiş olduğu sahayı, yani kendisine atıfta bulunulduğu zaman bildireceği değerini ve bu değişkene nerelerden atıfta bulunulabileceğini gösterir. Şimdi, HTML dosyasının baş tarafında (HEAD etiketi içinde) bir değişkeni tanımladığınızı ve ona bir değer verdiğinizi düşünün. Daha sonra yazacağınız bütün fonksiyonlarda veya değerini belirleyebileceğiniz otomatik fonksiyonlarda (metod’larda) bu değişkeni bir daha tanımlamaya ve değerini belirlemeye gerek kalmadan kullanabilirsiniz; çünkü Javascript açısından bu değişken genel (global) değişken sayılır. Daha sonra ayrıntılı olarak göreceğimiz gibi, HTML’in gövde kısmında (BODY etiketi içinde) bir fonksiyon yazdığımızı ve bu fonksiyonun içinde bir değişken tanımladığımızı düşünün. Daha sonra yazacağınız bir fonksiyonda bu değişkeni kullanamazsınız; çünkü Javascript bir fonksiyonun içindeki değişkeni yerel (local) değişken sayar ve kendi yetki alanı (scope’u) dışında kullanmanıza izin vermez. Bir yerel değişken, ait olduğu fonksiyon çağrıldığı anda oluşturulur ve fonksiyonun icrası bittiği anda yok edilir. Dolayısıyla bir fonksiyon, başka bir fonksiyonun yerel değişkinini kullanmaya kalktığında "undefined" (tanımlanmamış) değişken hatasıyla karşılaşırsınız.
Bir değişkeni bütün HTML sayfası boyunca kullanmayı düşünüyorsanız, bu değişkeni, HTML sayfasının başında içinde fonksiyon bulunmayan bir SCRIPT bölümünde tanımlamalı ve doldurmalısınız. İyi bir programlama tekniği, genel değişkenleri, açık-seçik tanımlamak ve bunu yorum satırıyla belirtmektir:
<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 saklayalim
// genel değişken tanımları
var metin1 = "Merhaba Dünya!"
var metin2 = "Vayy, merhaba canım! N’aber?"
var metin3 = "Bu samimiyet nereden? Lütfen biraz ciddi olur musunuz?"
// -->
</SCRIPT>
</HEAD>
<P>BURAYA ÇEŞİTLİ AMAÇLARLA HTML KODLARI GİREBİLİR!! SONRA TEKRAR SIRA JAVASCRIPT'E GELEBİLİR</P>
<SCRIPT LANGUAGE="Javascript1.2">
<!-- Javascript kodunu eski sürüm Browserlardan saklayalim
//bu fonksiyon uyarı kutusu açar
function merhaba()
{
alert(metin1)
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<B>Merhaba Dünya</B><br>
<FORM>
<INPUT TYPE="SUBMIT" NAME="dugme1" VALUE="TIKLAYIN!" onclick="merhaba()">
</FORM>
</BODY>
</HTML>
Bu kodu da merhaba6.htm adıyla kaydedebilirsiniz. Daha sonra merhaba fonksiyonunda "alert(metin1)" satırındaki 1 rakamını 2 ve 3 diye değiştirirseniz, merhaba6.htm’in uyarı kutusunun içeriğini değiştirdiğini göreceksiniz. Şimdi, merhaba6’da merhaba() fonksiyonunu şöyle değiştirin ve şu eki yapın:
function merhaba()
{
var metin1 = "Sana da merhaba!"
alert(metin1)
}
function hello()
{
alert(metin1)
}
Sonra, aynı dosyada mevcut düğme oluşturan INPUT satırının altına şu satırı ekleyin; sayfanızda iki düğme görünecektir:
<INPUT TYPE="SUBMIT" NAME="dugme2" VALUE="TIKLAYIN!" onclick="hello()">
Bu düğmelerden birincisi, merhaba() fonksiyonunu, ikincisi hello() fonksiyonunu çağıracak. Genel olarak tanımladığınız ve değer verdiğiniz metin1 değişkeninin değerini merhaba() fonksiyonunda değiştirdiniz; bu değişkenin yeni değeri "Sana da merhaba!" şeklini aldı. Bu metni, merhaba7.htm adıyla kaydedip, Browser’da açtığınızda ve birinci düğmeyi tıkladığınızda, uyarı kutusunun içeriğinin metin1 değişkeninin genel değerini değil yerel değerini içerdiğini göreceksiniz. Yani metin1’in değeri değişmiş oldu. Peki, ikinci düğmeyi tıklayın! metin1’in değeri değişmemiş gibi, uyarı kutusunun genel tanımlamadaki değeri kullandığını göreceksiniz. Oysa biraz önce, birinci düğmeyi tıkladığımızda yani merhaba() fonksiyonu çalıştığında metin1’in değeri değişmemiş miydi? Şimdi neden eski metin1’in eski değeri karşımıza çıkıyor?
Bu alıştırmanın öğrettiği kural şöyle özetlenebilir: Bir genel değişken, bir fonksiyon içinde yerel olarak değiştirilebilir; ama onun genel değeri diğer fonksiyonlar için geçerli kalır. Javascript programlarınızı yazdığınız zaman genel değişkenleriniz beklediğiniz değeri vermiyorsa bu değeri bir fonksiyonun yerel olarak, sırf kendisi için, değiştirip değiştirmediğine bakmalısınız. Bu tür hatalardan kaçınmanın bir yolu, yerel değişkenlerinizle genel değişkenlerinize farklı isimler vermektir.
Javascript, değişkenlerinizi isimlendirmede rakamla ve işaretle başlamamak dışında kural koymuyor; ama iyi programcılık tekniği, değişkenlere anlaşılır ve kullanıldığı yeni belli eden isimler vermektir. Örneğin, "adi" şeklindeki bir değişken adı, çok değişkenli bir Javascript programında yanıltıcı olur. "musteri_adi" veya "musteriAdi" çok daha uygun olabilir. Ayrıca değeri "Evet" (=doğru, true) veya "Hayır" (=yanlış, false) olan Boolean değişkenlerin adlandırılmasında, örneğin, "doluMu," "tamamMi," "acikMi," "bittiMi" gibi cevabı çağrıştıran değişken adları kullanabilirsiniz.
< Bu mesaj bu kişi tarafından değiştirildi oralunal -- 14 Ağustos 2008; 10:46:52 >
- Sayı (number): -14, 78, 87678
-
DİZİ-DEĞİŞKENLER(Array)
Javascript’in şu ana kadar ele aldığımız bütün değişkenleri, tekildir. Yani bu değişkenlerden Javascript bakımından sadece bir adet vardır; dolayısıyla bir adet de değeri bulunur.
Oysa şimdi şöyle bir durum düşünün: Evcil kuşları tanıttığınız bir site yapıyorsunuz. Ele alacağınız bütün kuşları ve özelliklerini bir tablo olarak düşünebilir misiniz? Kuş-1: Kanarya, Kuş-2: Bülbül, Kuş-3: Muhabbet Kuş-4: Papağan, gibi. Bunların hepsini tek tek tanımlamaya kalkarsak, daha sonra kullanım zorluğu doğabilirdi. Javascript, bize "dizi-değişken" (Array) yoluyla, örneğin bir "kuş" değişkeni oluşturup, bunun içine istediğimiz kadar değer koyma imkanı veriyor. Bir dizi-değişkenin bireylerinin değerlerini dizi-değişkenin endeksi ile çağırabilir veya belirleyebilirsiniz. Bir dizi-değişken oluşturmanın formülü şudur:
var dizinin_Adı = new Array(unsur1, unsur2, unsur3...unsurN)
Bu formüle göre, kuş dizisini şöyle oluşturabiliriz:
var kusDizi = new Array(bülbül, kanarya, muhabbet, papagan)
Diziler (nedendir, bilinmez) sıfırdan itibaren numaralanır; yani bizim örneğimizde dizinin birinci üyesi kusDizi[0], ikinci üyesi kusDizi[1], üçüncü üyesi kusDizi[2], dördüncü üyesi ise kusDizi[3] diye anılır. Burada örneğin kusDizi[2] değişkeni "muhabbet" değerini taşır. İlerde bu değeri değiştirmek ve diyelim ki "Saka" yapmak istersek, Javascript kodumuzun uygun yerinde şunu yazarız:
kusDizi[2]="saka"
Dizi-değişkenleri, özellikle ele almamızın bir nedeni, dizilerin Javascript açısından nesne sayılmasıdır. Bunun önemine ve kullanıldığı yerlere daha sonra değineceğiz; şimdilik şunu belirtelim: dizi-değişkenlerin, nesne oldukları için özellikleri (property) vardır. Örneğin, oluşturduğum dizi-değişkenin kaç üyesi olduğu, "kusDizi.length" özelliğinin içinde yazılıdır. İlerde dizi-değişkenlerimizin üye sayısından çok yararlanacağız.
-
JAVASCRIPT'TE İŞLEMLER(Operator)
Program yazmanın amacı, bilgisayara işlem yaptırtmaktır. Javascript de bu açıdan farklı değildir: bir değişkenin değerini alırsınız, bir işlemden geçirirsiniz; sonra ortaya çıkacak yeni değeri ya bildirirsiniz, ya da yeni bir işlemde kullanırsınız. Tabiî herşey bu kadar kolay olsa idi, herkes programcı olurdu. Herkes programcı olmadığına göre, söz gelimi "bir değişkeni almak" için önce değişkenin değerinin nereden ve nasıl elde edileceğini bulmanız gerekir. Ayrıca yukarıda öğrendik ki, Javascript programları Browser’ın pencere nesnesine veya penceresinde de görüntülediği belge nesnesinin bir unsuruna hitaebeder. Dolayısıyla hangi nesnenin ne gibi nitelikleri olduğunu öğrenmemiz gerekir ki, işleme tabi tuttuğumuz değerleri bu unsurların işine yarayacak şekle getirelim.
Javascript, eline verdiğiniz değişkenin türüne ve değişkenin değerine göre dört tür işlem yapar. Şimdi bunları sırasıyla ele alalım...
-
ATAMA(Assignment) İŞLEMLERİ
Javascript’te en sık yapacağınız işlem, bir değişkene bir değer atama işlemidir: "Adı" adlı değişkenin değeri "Hakkı" olsun! "Soyadı" adlı değişkenin değeri "Öcal" olsun, gibi. Ve tahmin ettiğiniz gibi bunu eşittir (=) işaretiyle yaparız:
var adi = "Ahmet", soyadi = "Arif"
var siraNo = 123, sigortaNo = "A123-2345-234"
Javascript, bir eşittir işaretiyle karşılaştığında, önce işaretin sağına bakar ve değeri okur; sonra işaretin soluna bakar ve bu adın, meşru bir değişkene ait olup olmadığını ve bu adla bilgisayarın belleğinde bir yer açıp açamayacağını belirler. Eğer işaretin solundaki isim, meşru, yani önceden tanımlanmış veya değeri belirlenmiş bir değişkene ait ise, o değişkenin bilgisayarın belleğindeki adresine işaretin sağındaki değeri yazar. Değişken ismi yeni bir meşru isme aitse, Javascript bu değişkeni "initalize" eder, yani hem yer açar, hem de içine değerini yazar. Değişken ismi kabul edilebilir nitelikte değilse, yani söz gelimi altı çizgi (_) dışında bir işaretle veya rakamla başlıyorsa, içinde boşluk varsa, veya yasaklı kelimelerden biri ise, Javascript hata mesajı verir.
Bu noktada sık yapılan bir hata, başka bir programlama dilinden kalma alışkanlıkla değişkeni sağa, değeri sola yazmaktır: hakki = adi, gibi. Javascript bu durumda da hata mesajı verir; çünkü "hakki" değişkenine "adi" değerini atamak için, sayı olmayan bu alfanümerik değerin ya tek, ya da çift tırnak içine yazılması gerekir. Javascript’te bir değişkene değer atarken, bu değeri mevcut bir veya daha fazla değişkenden de alabilirsiniz:
var i = j + k
var indexNo = siraNo + kategoriNo
var tutariTL = birimFiyatTL * adet
-
Çoğunluk tarafından bilinen şeyler de olsa elimizin altında bir kaynak daha bulunması bakımından güzel olmuş. -
Güzel gidiyor, bitince iyi bir kaynak olacağı kesin.
Teşekkürler... -
(İlginiz için teşekkürler)
ARİTMETİK İŞLEMLERİ
İşte lisede matematik dersinde kaytarmamış olduğunuza şükredeceğiniz noktaya geldik: Javascript (veya başka herhangi bir programlama dili) siz formülünü vermedikçe hiç bir hesabı yapamaz; ama dünyanın en çapraşık, en karmaşık formülünü de verseniz, sonucu (bilgisayarınızın hızı ile orantılı olarak) hesaplar.
Tabiî, Javascript, dört temel işlemi yapabilir. toplama işlemini artı işaretiyle (+), çıkartma işlemini eksi işaretiyle (-), çarpma işlemini yıldız (asterisk, *) işaretiyle, ve bölme işlemini düz bölü işaretiyle (/) yaptırırsınız.
Javascript, artı işaretini gördüğü zaman, işaretin hem sağına, hem de soluna aynı anda bakar ve bulduğu iki değeri, sayı ise toplar, alfanümerik ise sağdakinin soldakinin arkasına ekler:
x = 3 + 4
Javascript, bu işlemin sonucu olarak x adlı değişkene 7 değerini atar. Fakat kimi zaman, bir değişkenin mevcut değerini (sıfır bile olsa) belirli bir miktarda arttırmak isteyebilirsiniz. Yani Javascript’e "x’in mevcut değerine 3 ekle!" demek isteyebilirsiniz. Bunu, "x = x + 3" diye ifade ederiz. Eğer arttırılacak miktar 1 ise, bunu daha kısa yazmak da mümkündür: ++x.
Javascript çıkartma işleminde de aynı kuralları uygular:
x = 3 - 4
x = x - 3
--x
Değişkenleri 1 arttırma veya 1 eksiltmeye yarayan kısaltmanın üzerinde biraz duralım. İlerde bol bol örneklerini göreceğimiz gibi, Javascript programlarınızda bazı değişkenleri sayaç olarak kullanmak isteyebilirsiniz. Bir işin sonuna geldiğimizi bilebilmek için, diyelim ki 12 kişilik bir adres listesini Javascript’e okutup, sayfaya bir tablo çizdiriyorsak, Javascript’e listenin sona geldiğini belirtebilmek için sayaç rakamı 12 veya 0 oldu ise durmasını emretmek zorundasınız. Bu durumda sayaç olarak kullandığınız değişkenin değerini, her adres okunduğunda 1 arttırmak veya 1 eksiltmek, en kestirme yoldur. Diyelim ki, x’in orijinal değeri 12. Javascript x-- veya --x işlemini gördüğü anda, 12’den 1 çıkartacak ve x’in yeni değeri olarak 11’i atayacaktır. Aynı şekilde ilk değer sıfır ise, x++ veya ++x işlemini gördüğü anda x’in yeni değerini 1 yapacaktır.
Toplama ve çıkartma işlemlerinde yapabileceğiniz başka bir kısaltma ise şöyle yazılır:
x = x + y işlemini kısaltmak için x += y
x = x - y işlemini kısaltmak için x -= y
Bu bölümü bitirmeden önce, bir sayının değerini negatif yapmaktan da söz edelim. Bir değişkene negatif değer atamak için, sayının önüne eksi işareti koymanız yeter: x = -5 gibi. Bir değişkene başka bir değişkenin değerini negatif olarak atamak istiyorsanız, x = -y gibi yazabilirsiniz. y değişkeninin değeri zaten negatif ise, x’e atanan değer pozitif olur. Belki belirtmek bile gerekmez ama, Javascript, bölü işaretinin solundaki sayıyı, sağındaki sayıya böler; yıldız (asterisk) işaretinin sağındaki ve solundaki sayıları birbiri ile çarpar. Javascript, alfanümerik değerlerle çıkartma, çarpma ve bölme işlemleri yapmaz; sonucun yerine "NaN" (Not a Number, Sayı Değil) yazar.
-
KARŞILAŞTIRMA İŞMLEMLERİ
Javascript dahil, bütün bilgisayar programlarının ortak özelliği, programın bir noktada karar vermesidir: "Filanca değişken şu değerde ise, falanca değişken ile şunu yap; o değerde değil de, bu değerde ise bunu yap!" gibi. Bu tür komutlarda Javascript, sözünü ettiğiniz değişkenin değerini bulup, onu verdiğiniz bir başka ölçütle karşılaştıracak ve varacağı sonuca göre emrettiğiniz işi yapacaktır. Dolayısıyla Javascript’te bir takım karşılaştırma işlemlerine ihtiyacınız var demektir.
Javascript’in karşılaştırma operatörleri genellikle "if" (eğer..ise) ifadesiyle birlikte kullanılır; ve bu soruyu soran satıra "true" (doğru) veya "false" (yanlış) sonucunu verir. Önce, bu işlemleri yaptırtan operatörleri ve işlevlerini sıralayalım:
== Eşit operatörü. İşaretin sağında ve solundaki değerlerin
eşit olması halinde true (doğru) sonucunu gönderir.
!= Eşit değil operatörü. İşaretin sağında ve solundaki değerlerin
eşit olmaması halinde true (doğru) sonucunu gönderir.
> Büyüktür operatörü. Soldaki değer, dağdaki değerden büyük
ise true (doğru) sonucunu gönderir.
< Küçüktür operatörü. Soldaki değer, dağdaki değerden küçük
ise true (doğru) sonucunu gönderir.
>= Büyük veya eşit operatörü. Soldaki değer, dağdaki değerden
büyük veya bu değere eşit ise true (doğru) sonucunu gönderir.
<= Küçük veya eşit operatörü. Soldaki değer, dağdaki değerden
küçük veya eşit ise true (doğru) sonucunu gönderir.
Daha sonra örneklerini göreceğiz; ve karşılaştırma işleminden sonra ne olduğunu, Javascript’in nasıl bir yol izlediğini ele alacağız. Şimdi sadece böyle bir karşılaştırma işleminde nasıl sonuç verdiğini görmekle yönetinelim. Düz yazı programınızda şu HTML kodunu yazın ve karsilastirma1.htm adıyla kaydedin:
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<TITLE>Javascript'te Mukayese</TITLE>
<SCRIPT LANGUAGE="Javascript1.2">
<!-- Javascript kodunu eski sürüm Browserlardan saklayalim
// degisken tanimlari
var x, y, z
x = 7
y = 7
z = 13
// -->
</SCRIPT>
</HEAD>
<BODY>
<PRE>
<SCRIPT LANGUAGE="Javascript1.2">
<!-- Javascript kodunu eski sürüm Browserlardan saklayalim
//mukayese sonuclarını gösterelim
document.writeln("x = " + x)
document.writeln("y = " + y)
document.writeln("z = " + z)
document.write("x değişkeni y değişkenine eşit mi, (x==y)? ")
document.writeln(x==y)
document.write("y değişkeni z değişkenine eşit mi, (y==z)? ")
document.writeln(y==z)
// -->
</SCRIPT>
</PRE>
</BODY>
</HTML>
Bu kod bir tarafta açıkken, oluşturduğunuz dosyayı Browser’da açın ve sonuca bakın; sonra kodunuzda x, y ve z değişkenlerinin değerini değiştirerek, Browser’a sayfayı yenilettirin; sonucun nasıl değiştiğini inceleyin. Javascript’in sonuç true (doğru) ise nasıl ilerlediğini, sonuç false (yanlış) ise nasıl ilerlediğini daha sonra ayrıntılı olarak göreceğiz. Fakat derhal öğrenmeniz gereken kuralı burada belirtelim: Javascript, karşılaştırma sonucu doğru ise, karşılaştırma komutundan sonraki ilk emri (veya emir grubunu), değilse bir sonraki emri (veya emir grubunu) icra eder. Bunun ayrıntılarını da ele alacağız. Şimdilik sadece bu kuralı bir kenara yazın!
Bu konuyu bitirmeden, bir de ne ile neyi karşılaştırabileceğinizden söz edelim. Javascript 1.0’de elmalarla (sayılarla) armutları (alfanümerik değişkenleri) karşılaştırabilir ve doğru sonucunu verebilirdi. Yani, Javascript 1.0 açısından 7 ile "7" eşitti; Javascript önce karşılaştırılan değişkeni sayıya çevirip çeviremeyeceğine bakar; çevirebiliyorsa, karşılaştırmayı yapardı. Daha sonraki sürümlerinde durum değişti; Javascript’i tasarlayanlar bu çevirme işlemini programcıya bıraktılar; dolayısıyla Javascript elmalarla armutları ayırteder oldu!
-
ALFANÜMERİK İŞLEMLER
Javascript’in alfanümerik değişkenlerin değerleri ile sadece toplama işlemi yaptığını söylemiştik. Bu durumda buna toplama değil birleştirme, ekleme işlemi denir. Aşağıdaki kodu düz yazı programınızla oluşturup, birlestir.htm adıyla kaydederseniz ve Browser’ınızda incelelerseniz, Javascript’in alfanümerik değerleri nasıl birleştirdiğini görmüş olursunuz:
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<TITLE>Javascript'te Ekleme</TITLE>
</HEAD>
<BODY>
<PRE>
<SCRIPT LANGUAGE="Javascript1.2">
<!-- Javascript kodunu eski sürüm Browserlardan saklayalim
//değiskenlerimizi tanımlayalım
var a, b, c, d
a = "www"
b = "pcworld"
c = "com"
d = "tr"
//sonuçlarımızı görüntüleyelim
document.writeln("a değişkeninin değeri: \""+a+"\".")
document.writeln("b değişkeninin değeri: \""+b+"\".")
document.writeln("c değişkeninin değeri: \""+c+"\".")
document.writeln("d değişkeninin değeri: \""+d+"\".")
document.writeln("\nŞimdi bunları birleştirelim:\n")
document.write("a + b = ")
document.write(a + b)
document.write("\nAralarına nokta koyalım: ")
document.write(a + "." + b)
document.write("\nŞimdi c değişkenini, noktasıyla birlikte ekleyelim: ")
document.write(a + "." + b + "." + c)
document.write("\nŞimdi de d değişkenini, noktasıyla birlikte ekleyelim: ")
document.write(a + "." + b + "." + c + "." + d)
document.write("\nİşte a + b + c + d'nin sonucu: ")
document.write(a + "." + b + "." + c + "." + d)
// -->
</SCRIPT>
</PRE>
</BODY>
</HTML>
Bu dosyada, iki tür yazdırma komutu kullandığımıza dikkat ediyor musunuz: "document.writeln()" ve "document.write()". Bu iki komut arasındaki farkı bulabilir misiniz? (İpucu: "document.write()" yönteminde satırbaşı yaptırtmak için "\n" kullanıyoruz!)
Javascript, alfanümerik değerlere diğer aritmetik işlemleri yapamaz. Buna karşılık, Javascript sayılarla yaptığı bütün karşılaştırma işlemlerini alfanümerik değişkenlerle de yapar ve doğru veya yanlış sonucunu bildirir.
Daha önce kaydettiğiniz karsilastirma1.htm dosyasını düz yazı programında açın ve değişkenleri tanımladığınız bölümünü şöyle değiştirin:
x = "Ali"
y = "Ali"
z = "Veli"
Sonra bu dosyayı, karsilaştirma2.htm adıyla kaydedip, Browser’da inceleyin; değişkenlerin değerini değiştirip, yeniden inceleyin ve ne sonuç aldığınıza bakın.
< Bu mesaj bu kişi tarafından değiştirildi oralunal -- 14 Ağustos 2008; 14:34:40 >
-
ŞARTLI İŞLEMLER
Javascript’te karşılaştırma yaparken şartlı (..ise ..yap!) işlemler de yaptırabilirsiniz. Şartlı işlemlerde ? (soru işareti) ve : (iki nokta üstüste) işaretlerini kullanırsınız. Karsilastirma2.htm dosyasının bütün "document.write.." kodlarını silin ve yerine şu iki satırı yazarak, karsilastirma3.htm adıyla kaydedin.
sonucMsg = (y==x)?"y degiskeni x degiskenine esit!" : "y degiskeni x degiskenine esit degil!"
alert(sonucMsg)
Kod dosyası düz yazı programında açıkken, karsilastirma3.htm’i Browser’da açın. Uyarı kutusunda, iki değişkenin eşit olması şarti halinde görüntülenmesini istediğiniz mesajı göreceksiniz. Dosyada değişkenlerin değerini değiştirerek, sonucu inceleyin. Bunu sağlayan şartlı işlem komutu üç bölümden oluşuyor: şartın doğru olup olmadığını sorguladığınız, soru işaretine kadar olan karşılaştırma bölümü; iki nokta üstüste işaretine kadar olan şart doğru ise uygulanacak bölüm, sonra satır sonuna kadar olan şart yanlış ise uygulanacak bölüm. Yukarıda, "Javascript bir karşılaştırma yaptıktan sonra karşılaştırma sonucu doğru ise, karşılaştırma işleminden sonraki ilk komutu icra eder" demiştik. Burada da, x değişkeni ile y değişkeni aynı olduğu zaman, soru işaretiyle biten karşılaştırma işleminden hemen sonraki ilk komut (veya ifade) seçiliyor; değişkenler aynı olmadığı taktirde, iki nokta üstüste işaretinden sonra gelen komut (veya ifade) seçiliyor.
-
MANTIKSAL İŞLEMLER
Javascript, karşılaştırma işlemini Boolean (.. ve .. doğru ise ... yap!) mantıksal işlemlerini kullanarak da yapabilir. Burada, Boolean mantığından kısaca söz edelim. Şimdi, bir baba, kızı Ayşe ile oğlu Ali’ye diyor ki, "İkiniz de sınıfını geçerseniz, bu yıl sizi Antalya’ya deniz kenarında bir ay geçirmek üzere teyzenizin evine göndereceğiz!" Ali sınıfını geçer, Ayşe geçemezse iki çocuk da teyzelerine gidemeyecekler; Ali sınıfını geçer, Ayşe de geçerse, iki çocuk da Antalya’ya gidecek; Ali de, Ayşe de sınıflarını geçemezse, iki çocuk da yaz tatilini oturdukları yerde geçirecekler.
Javascript’in Boolean mantığını sorgulama işaretleri şunlardır:
&& Mantıksal Ve: iki koşul da doğru.
|| Mantıksal Veya: ya birinci, ya da ikinci koşul doğru.
! Mantıksal Değil: Tek koşula uygulanır; koşul doğru ise
sonuç false (yanlış), koşul yanlış ise sonuç true (doğru) olur.
Bu mantığı, şimdi Boolean ifadesi haline getirelim:
Ali=geçti && Ayşe=geçti : çocukların ikisi de tatile gidiyor.
Ali=geçti || Ayşe=geçti : çocukların ikisi de tatile gidemiyor.
!(Ali=geçti) : çocukların ikisi de tatile gidemiyor.
!(Ayşe=geçti) : çocukların ikisi de tatile gidemiyor.
-
İŞLEMLERDE SIRA
Javascript’te işlemler yukarıdan aşağı ve soldan sağa yapılır, ama aritmetik işlemlerde bu kuralın bazı istisnaları vardır. Javascript kodlarınızda beklediğiniz sonuçları alamıyorsanız, önce işlemlerinizi işlem sırasına uygun yazıp yazmadığınızı kontrol edin. Javascript’te işlemlerin genel sırası şöyledir: Atama işlemleri, şartlı işlemler, mantıksal ve/veya/değil işlemleri, karşılaştırma işlemleri, aritmetik işlemler, fonksiyonlar. Javascript’te aritmetik işlemler ilke olarak soldan sağa doğru yapılır. Örneğin
x = a * b + c
denklemi çözülürken, önce a ile b çarpılır, elde edilecek sayıya c eklenir. Fakat bir denklemde parantez içine alınmış ifade varsa, Javascript önce parantezin içini halleder. Örneğin
x = a * (b + c)
denklemin önce b ile c toplanır, elde edilecek sayı a ile çarpılır. Eğer bir işlemde Javascript aritmetik işlemleri sıraya sokmak zorunda kalırsa, toplama, çıkartma, çarpma ve bölme sırasıyla yapar. İşlemlerin sırası konusunda kuşkunuz varsa, mümkün olduğu kadar çok parantez kullanın.
-
PROGRAM AKIŞ DENETİMİ
Javascript veya bir başka programlama dili ile yazacağınız programda, zaman zaman programın akışını, programa bırakmanız gerekir. Programcı olarak siz, programın izleyeceği alternatif yolları belirlersiniz; fakat bu yollardan hangisini izleyeceğine, sizin koyduğunuz şartları değerlendirerek program kendisi karar verir. Programcılığın gerçek anlamda zevki de bu noktada başlar. Şimdi Javascript’in programın akışını kontrolde kullanacağınız unsurlarını tanımaya başlayalım.
Aşağıda yazacağımız iki Javascript kodunda Browser’a, ziyaretçinin ekranındaki bir form unsurunun içini doldurtma tekniğini kullanacağız. Henüz ele almadığımız bu tekniğin ayrıntılarını FORM nesnesinin özelliklerine değinirken ele alacağız. -
If(Eğer ... ise)
Javascript programının, bir değişkenin değerine göre yönlenmesini sağlayan ilk aracı, "if" (eğer) ifadesidir. İşte size program akışını "if" yoluyla kontrol eden bir HTML sayfası:
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<TITLE>Javascript'te Mukayese</TITLE>
<SCRIPT LANGUAGE="Javascript1.2">
function goster(secme)
{
var endeks, secilenYemek
endeks=secme.selectedIndex
secilenYemek=secme.options[endeks].text
if (secilenYemek == "Adana Kebap")
{
document.tarifForm.tarif.value=secilenYemek + " seçtiniz! Bravo!"
}
if (secilenYemek == "Yogurtlu Iskender")
{
document.tarifForm.tarif.value=secilenYemek + " seçtiniz. Sizi tebrik ederiz!"
}
if (secilenYemek == "Biber Dolma")
{
document.tarifForm.tarif.value=secilenYemek + " seçtiniz. Zevkinize hayranız!"
}
if (secilenYemek == "Yaprak Sarma")
{
document.tarifForm.tarif.value=secilenYemek + " yapması biraz zordur; ama çok lezizdir"
}
}
</SCRIPT>
</HEAD>
<BODY>
<BR>
<FORM NAME="tarifForm">
<P>Hangi yemeğin tarifini istiyorsunuz? Lütfen istediğiniz yemeği seçin:</P>
<SELECT NAME="yemeklistesi" onChange="goster(this)">
<OPTION SELECTED> Bir yemek seçiniz
<OPTION> Adana Kebap
<OPTION> Yogurtlu Iskender
<OPTION> Biber Dolma
<OPTION> Yaprak Sarma
</SELECT>
<P></P>
<INPUT NAME="tarif" VALUE="" SIZE=55>
</FORM>
</BODY>
</HTML>
Bu sayfayı denetim1.htm adıyla kaydedin ve Browser’inizde açın. Şimdilik, yemek tariflerini vermediğimize aldırmayın. Daha sonra bunu yapmanın yolunu da göreceğiz. Bu sayfadaki Javascript kodunda "goster()" isimli bir fonksiyon var; bu fonksiyon kendisini harekete geçmeye çağıran nesnenin kendisine "secme" adı altında bir takım bilgiler göndermesini şart koşuyor. Sayfamızda yer alan ve adı "tarifForm" olan FORM nesnesi, kendi unsurlarından SELECT nesnesindeki her değişiklikte, "goster" fonksiyonunu harekete geçiriyor. "yemeklistesi" isimli SELECT etiketinin içindeki onChange (değişiklik halinde) isimli Javascript komutu, bir metod’tur ve burada kendi unsurlarını ve değerlerini topluca "gonder" fonksiyonuna gönderecektir. (Şimdilik bu metod ve metodu kullanırken yazdığımız THIS ifadesi üzerinde durmayın. Sırası gelecek.)
Fonksiyonun başında iki değişken tanımlıyoruz: endeks ve secilenYemek. Endeks değişkeninin değeri, fonksiyona gönderilecek nesnelerden birinden alınıyor. Bu nesne "selectedIndex" adını taşıyor. "selectedIndex" denen şeyin, HTML belgesinin Form nesnesinin bir özelliği (property) olduğunu belirtmekle yetinelim; ayrıntılarını Form nesnesinin özelliklerini incelerken göreceğiz. Bir Form’un içinde SELECT nesnesi varsa, Browser mevcut SELECT ögelerini dizi-değişken yaparak 0’dan itiberen numaralar ve kullanıcının seçtiği SELECT ögesinin numarası "selectedIndex" adıyla bir kenara kaydeder.
Fonksiyonumuzdaki ikinci değişken olan "secilenYemek" değişkeni de değerini, SELECT nesnesinin seçilen ögesinin metninden alıyor. Şimdilik bu tanımlar sizin için anlam ifade etmiyorsa, üzerinde durmayın; iki değişkenimize ziyaretçinin sayfada yapacağı tercihe bağlı olarak değerler kazandırdığımızı düşünün. Şimdi dikkatimizi şu satıra verelim:
if (secilenYemek == "Adana Kebap")
Yukarıda öğrendiğimize göre, bu satırdaki ifadede Javascript’e ne demiş oluyoruz? "Ey Javascript, ‘secilenYemek’ adlı değişkenin değerine bak; orada gördüğün metin, ‘Adana Kebap’ alfanümerik değeri ile aynı ise, bu satırdan hemen sonraki işi yap! aynı değilse, ber sonraki satıra git, oradaki işi yap!" diyoruz. Buradaki "aynı ise" ifadesini, "==" işaretleriyle sağladığımızı biliyorsunuz; "hemen sonraki iş" ifadesinin de bir karşılaştırma komutu doğru sonuç verirse, Javascript’in bu karşılaştırma komutundan hemen sonra gelen satırdaki işi yapmasından kaynaklandığını hatırlıyorsunuz. Ziyaretçi "Adana Kebap" seçeneğini seçti ise, "Seçim, Adana Kebap ise" sorgulamasının sonucu doğru olacak, ve Javascript
document.tarifForm.tarif.value=secilenYemek + " seçtiniz! Bravo!"
komutunu icra ederek, ekrana "secilenYemek" değişkeninin değeri yazacak ve buna "seçtiniz! Bravo!" kelimelerini ekleyecektir. Sorgulamanın sonucu doğru değil ise, yani ziyaretçi Adana Kebap’ı seçmemişse, Javascript bir sonraki satırına atlayacaktır. Burada "bir sonraki satır" ile şu anda içinde bulunduğumuz "if" ifadesinin açılan ve kapanan süslü parantezle belirlenen sınırının bittiği yeri kastediyoruz. Yazma kolaylığı bakımından ve açtığımız parantezi kapattığımızdan emin olmak için süslü parantezleri ayrı satırlara yazarız. Ama bu şart değildir. Yani istese idik, burada üç satıra yayılan "sonraki satır" aslında tek satırda yazılabilirdi.
Javascript’in, ziyaretçinin Adana Kebap’ı seçmemesi halinde atlayacağı bir sonraki satırda da bir "if" ifadesi var. Javascript bu kez bu sorgulamanın sonucunu alacak ve bu sorgulama doğru sonuç verirse (yani ziyaretçi Yoğurtlu İskender’i seçmişse), hemen sonraki satırı, seçmemişse, bir sonraki satırı icra edecektir. Böylece dört sorgulamayı da bitiren Javascript, çalışmasına son verecektir. Taa ki, ziyaretçi, yeni bir tercih yapıncaya kadar. SELECT etiketinin içindeki onChange (değişiklik halinde) yönlendiricisi, bu kutuda olacak her değişiklikte, formun SELECT nesnesinin ögelerini topluca "gosder" fonksiyonuna gönderecektir.
Bir "if" sorgusunun içinde bir veya daha fazla "if" bulunabilir. Böyle iç-içe "if" ifadesi yazarsanız, herbirinin icra alanının başladığı ve bittiği yeri gösteren süslü parantezlerine dikkat edin.
-
If ... Else (Eğer .. Diğer)
Kimi zaman bu kadar çok seçeneğe tek tek "if" ifadesi yazmak gerekmeyen durumlar olabilir. Javascript’e "Eğer şu değişkenin değeri şu işe şunu yap, diğer bütün durumlarda ise şunu yap!" demek istiyebilirsiniz. "If... Else" ifadesi ile bunu sağlarız.
denetim1.’in dört "if" ifadesini de silin ve yerine şunları yazın:
if (secilenYemek != "Adana Kebap")
{
document.tarifForm.tarif.value=secilenYemek + " tarifini veremiyoruz!"
}
else
{
document.tarifForm.tarif.value="Adana Kebap Tarifini asağıda sunuyoruz:"
}
Bu sayfayı denetim2.htm adıyla kaydedin ve Browser’inizde açın. Şimdi dikkatimizi şu satıra verelim:
if (secilenYemek != "Adana Kebap")
Yukarıda öğrendiğimize göre, bu satırdaki ifadede Javascript’e "Ey Javascript, ‘secilenYemek’ adlı değişkenin değerine bak; orada gördüğün metin, ‘Adana Kebap’ alfanümerik değeri ile aynı değil ise, bu satırdan hemen sonraki işi yap!" demiş oluyoruz. Buradaki "aynı değil ise" ifadesini, "!=" işaretleriyle sağlıyoruz; "hemen sonraki iş" ifadesinin de bir karşılaştırma komutu doğru sonuç verirse, Javascript’in bu karşılaştırma komutundan hemen sonra gelen satırdaki işi yapmasından kaynaklandığını hatırlıyorsunuz. Ziyaretçi "Adana Kebap" seçeneğini seçmedi ise, "Seçim, Adana Kebap değil ise" sorgulamasının sonucu doğru olacak, ve Javascript
"document.tarifForm.tarif.value=secilenYemek + " tarifini veremiyoruz!"
komutunu icra ederek, ekrana "secilenYemek" değişkeninin değeri yazacak ve buna "tarifini veremiyoruz!" kelimelerini ekleyecektir. Sorgulamanın sonucu doğru değil ise, yani ziyaretçi Adana Kebap’ı seçmişse, Javascript sorgulamanın sonucunun "diğer" sınıfına girdiğini anlayacak ve "Else" ifadesini icra edecektir. Yani ekrana "Adana Kebap Tarifini aşağıda sunuyoruz:" yazacaktır. (Tarifi vermediğimizin üzerinde de durmayın. İlerde bu tür uzun ifadeleri Javascript ile sayfaya yazdırmanın yollarını da göreceğiz.)
Özetlersek, "if" ifadesinde ileri sürdüğünüz şart doğru ise ilk komut dizisi, doğru değilse "Else" bölümündeki komut dizisi icra edilir.
Benzer içerikler
- html yönlendirme kodu
- e okul hackleme
- armut benzeri uygulamalar
- google güvenli arama kapatma
- jnlp dosyası açılmıyor
Ip işlemleri
Bu mesaj IP'si ile atılan mesajları ara Bu kullanıcının son IP'si ile atılan mesajları ara Bu mesaj IP'si ile kullanıcı ara Bu kullanıcının son IP'si ile kullanıcı ara
KAPAT X
Bu mesaj IP'si ile atılan mesajları ara Bu kullanıcının son IP'si ile atılan mesajları ara Bu mesaj IP'si ile kullanıcı ara Bu kullanıcının son IP'si ile kullanıcı ara
KAPAT X
