Javascript

JAVASCRIPT
JavascrIpt..................................................................................1 nsz........................................................................................3 Javascriptle Tanalm...............................................................9 Javascriptin Temel lkeleri......................................................19

Javascript Yazm Kurallar.............................................................................19 Javascript Deikenleri (Variable)..................................................................25
Dizi-Deikenler (Array)....................................................................................................31
Javascriptte lemler (Operator)...................................................................32

Atama (Assignment) lemleri:...........................................................................................33 Aritmetik lemleri:..........................................................................................................34 Karlatrma lemleri:.....................................................................................................36 Alfanmerik lemleri:......................................................................................................38 artl lemler:................................................................................................................40 Mantksal lemler:...........................................................................................................41 lemlerde Sra:...............................................................................................................42
Program Ak Denetimi................................................................................42
If (Eer .. ise).................................................................................................................43 If ... Else (Eer .. Dier)....................................................................................................46
Program Dng Denetimi.............................................................................47

for dngs..................................................................................................................47 artl dng: while...........................................................................................................49 do...while.......................................................................................................................52 Break ve Continue.......................................................................................................54 Switch.........................................................................................................................54
Javascriptte Fonksiyon............................................................57
Fonksiyona deer gnderme ve deer alma....................................................58
charAt(i).........................................................................................................................61 parseInt(i,n)...................................................................................................................62
Fonksiyon ile HTML unsarlarnn ilikisi............................................................64

Date(): getYear(), getMonth(), getDate(), getDay(), getTime(), getHours(), getMinutes(), getSeconds(). 65 toString(), toLowerCase(), toUpperCase()............................................................................66 setTimeout(fonksiyonun_ad, milisaniye)...........................................................................67 Deikenleri Deerlendirme (Eval)......................................................................................67
Javascriptin Nesneleri, Olaylar ve zellikleri..........................69 Nesneler..................................................................................70
JAVASCRIPT
Olaylar.....................................................................................74
onClick...........................................................................................................................75 onSubmit........................................................................................................................77 onReset..........................................................................................................................79 onChange.......................................................................................................................79 onFocus, onBlur...............................................................................................................81 onMouseOver, onMouseOut...............................................................................................82 onLoad, onUnLoad...........................................................................................................84 onError, onAbort..............................................................................................................86
Nesneler ve Olaylar Birletirelim.............................................87

Browser Nesneleri.......................................................................................88
Pencere (window)............................................................................................................88 Mesaj Kutular.................................................................................................................91 ereve Nesnesi..............................................................................................................91
Belge (Document) Nesneleri.........................................................................94 Form Nesneleri...........................................................................................99

Formun unsurlar............................................................................................................100 Radyo Dmesi (Radio)...................................................................................................103 Select...........................................................................................................................104 Password......................................................................................................................107 Gizli Nesneler (Hidden)....................................................................................................108
Javascript Nesneleri...................................................................................108
String Nesnesi...............................................................................................................108
Javascript ile Dinamik HTML...................................................111

Dme Grafii Animasyonu..............................................................................................112 Katman Teknii (DIV, LAYER)...........................................................................................114
Sonu.....................................................................................124
JAVASCRIPT
nsz
Eskiden, medrese zaman, o zamanki renciler de bizden farkl olmayp, dersi kaynatmak istedikleri zaman mderrise, Hocam; hangi velinin kzn dada kurt yedi? diye sorarlarm. Hoca da balarm anlatmaya: Bir kere veli deil, nebi idi; dada deil lde idi; kz deil, olu idi. Kurt demedi, Yedi! dediler.. dermi. Son bir yldr en sk karlatm soru: Web siteme veya filanca sayfama bir Java koydum; ama almyor! Bir bakar msnz? Mderrisin hesab, bu soruyu batan yantlasak iyi olacak: Bir kere Java deil, Javascript. almyor deil, sayfada bu Scripti altracak olay ya da komut yok! Ayrca baka bir Web sayfasnda alan bir programn zorla yamand her sayfada almas mmkn olamaz. in temizi u ii batan renmek! Sonu itibariyle Web siteniz varsa veya amay dnecek kadar ilerlediyseniz, HTMLi rendiniz demektir. Javascriptin, programlama dili sayarsanz, HTMLden zor bir taraf yok! Btn mesele, ii yarm brakmamak; iki satr komut renip, eski usul, bakalarnn Javascript metinlerini kesip-kesip yaptrma yoluna gitmemek. Bu kitap elinize alp, bilgisayarn karsna geip, ok deil, bir haftanz verirseniz, Javascript biliyorum! diyecek kadar Javascript renebilirsiniz. Geri Javascriptin temeli olan ECMAScript ile ilgili kurallar kitab 1.500 sayfa ama! Varsn olsun. Niyetiniz Javascript ile yeni bir oyun program yazmak deilse, bu kitapktaki bilgiler iinize yarayacak kadar bu dili renmenizi salayacaktr. Konuya girmeden bir iki noktaya aklk kazandralm. Javascript, Java deildir, dedik. Peki nedir? Javascript, Netscape firmas tarafndan hep rknt ile duya geldiimiz C dilinden tretilmitir. Java ise, Sun firmas tarafndan Pascal ve Delphi dillerinden
JAVASCRIPT
esinlenerek yazlmtr. Javascript, HTML gibi, Visual Basic Scripting Edition (VBScript) gibi, kodlar (komutlar) dz yaz dosyas olarak kaydedilen ve ileyebilmesi iin bir yorumlaycya ihtiyac olan bir dildir. Java ile yazdnz program ise (en azndan teoride) iletme sisteminden bile bamsz olarak, kendi bana alabilir. Netscape, HTMLin dil olarak yetersizliini Web Browser programnn ikinci srmne hazrlanrken grd. Bir kere bir Web sayfasna bir i yaptrmak istediiniz zaman bunu HTML ile yaptramyordunuz. Ayrca HTML yeteri kadar dinamik deildi. Mesela, Web ziyaretisi radyonuzun program listesinin yer ald sitenize balandnda kendisine programlar gne gre sunmak istediinizde, bir CGI program yazmanz veya yazdrmanz gerekiyordu. CGI (Common Gateway Interface) Web ziyaretinin Browser ile sizin sitenizin bulunduu Web Servern bulutuu nokta. Bu noktada yaplacak iler, altrlacak programlar Web Serverda alyor demektir. Her yeni ziyareti, her yeni CGI program Web Servernza ek yk yklenmesi, yani Web Servern giderek yavalamas demek. Siteleri dinamik hale getirmeyi amalayan ve Web sayfasnn eer.. ise.. sorusunu sormasn gerektiren byle kk programlar Serverda deil de, ziyaretinin bilgisayarnda altrabilmek, Servern ykn azaltabilirdi. Bu dnceden yola kan Netscape, LiveScript adyla bir Dz yaz dili gelitirdi. O srada Sun firmasnn gelitirdii, PC veya Mac fark gzetmeden, Windows, Unix veya baka bir iletim sistemine tabi olmadan alacak bir dil zerinde alyor, ve byle bir dilin gelitirildii haberleri bile bilgisayar programclar arasnda heyecan frtnalarna sebep oluyordu. Ortal bir Java frtnas kaplamt. Netscape, akllca bir davranla 1995 Aralknda bu dili piyasaya Javascript adyla srd. Netscape 2.0, Javascript uyumlu olarak kt. O srada Microsoft da Internet Explorer adl Browserna bu imkan kazandrmak istiyordu, ama Netscape bir yla yakn Javascripti paylamaya yanamad. Microsoft, Netscapein Javascript yorumlama kodunu almadan, IEi Javascripti anlar hale getirdi; fakat ortaya kan dile JScript adn verdi. Jscript 1.0 ile Javascript 1.0 tmyle ayn idi ve her iki program da hem Javascript, hem de JScript
JAVASCRIPT
anlayabiliyordu. Fakat bu durum ok uzun srmedi; her iki firma da kendi Script diline dier programn tanmad zellikler kazandrdlar. Bu arada Microsoft, IEye, JScriptte de, Javascriptte de olmayan becerilerle donatt VBScripti tanma zellii kazandrd. u anda Netscape firmasnn Netscape Navigator nc srmne varan JScripti ve VBScripti tanmyor, yorumlayamyor. Buna karlk IE, her Script dilini (Javascriptin baz komutlar hari) tanyabilir, yorumlayabilir. VBSCript, gnmzde daha ok Microsoftun Web Server program olan Internet Information Server (IIS) ile alan Web Serverlarda, Server iin yazlan programlarda kullanlyor. Bu tr programlarda, mesela Active Server Pages teknolojisi ile yazlacak Server uygulamalarnda da Javascript kullanlabilmesi, Javascript dilini bir Web tasarmcsnn ncelikle renmesini gerekli klyor. Bunu gerekli klan baka gelime daha var. Avrupa Birlii standart kurumu, daha sonra kavgay bir kenara brakp, Script dilinde ortakla gitmenin daha doru olduunu gren Microsoft ve Netscape firmalarnn ortaklaa sunduu neriye dayanarak. Javascript ve JScripti ECMAScript adyla birletirecek bir standart yaynlad. Ksa bir sre sonra, Javascripte yzde 99 benzeyen ortak bir Script diline kavuacaz. Bu dili kt gn bilir olabilmek iin bugnden Javascript renmek gerekir. zetlersek: 1. Javascript, HTMLin iine gmlr; gerek Java programlar veya programcklar ise yani Java Appletler HTML iinde sadece zikredilir, HTMLin paras olmazlar. 2. Javascript Browsera baml olarak yorumlanr, yani Javascriptin baz komutlar Netscapete baka, IEde baka sonu verebilir veya hi sonu vermeyebilir. 3. Javascript ile, ortaya uzatmas .EXE olan bir dosya kartmazsnz; Javascript kodlar HTMLin iine, kendisini HTMLden ayrteden <SCRIPT>...</SCRIPT> etiketlerinin arasna gmlr (isterseniz, iinde Javascript kodlar bulunan blm ayr bir dzyaz dosyas ve adnn uzatmasn da .js yaparak HTML sayfasna LINK edebilirsiniz). Javascript,
JAVASCRIPT
bir Script dili olduu iin illa u ya da bu kurala uygun yazlmaz; son derece esnek bir dildir. Javascript yorumlanan bir dildir: kendisi bir takm nesneler oluturmaz; kendisini yorumlayacak ereveye programa (yani Netscape Navigatorn veya Internet Explorern nesnelerini kullanr. Bu, Javascript renmenin asl byk blmnn Browser programnn ne gibi unsurlar, bu unsurlarn ne gibi zellikleri olduunu ve bu zelliklere hangi olay srasnda nasl hitap edileceini bilmek anlamna gelir. 4. Ve son nokta, Javascript, ancak bir olay halinde iler: bu olay ziyaretinin Browser programnn bir i yapmas, bir ii bitirmesi veya ziyaretinin bir yeri tklamas ya da klavyesinde bir tua basmas demektir. Peki, Javascripti tandmza gre, biraz da onunla neler yapabileceinizden sz edelim. Geri su kitapa ilgi gsterdiinize gre, Javascriptin kullanm alanlarna o kadar da yabanc olmadnz anlalyor; fakat ksaca client-side application (istemci-tarafndaki uygulama) programlarna deinmemiz gerekir. Yukarda dedik ki, Javascript bir Web sayfasnda oluturulmak istenen baz etkileri yerine getirecek ilerin Web Serverda deil, ziyaretinin bilgisayarnda yaplmas maksadyla gelitirildi. O halde Javascript programlar Web ziyaretisinin bilgisayarnda alacaktr. HTML kodlarnzn arasna gmdnz Javascript kodlar, kendilerini harekete geirecek iareti grnce, ne yapmalar gerekiyorsa, o ii yaparlar. Bu iler neler olabilir? ok ereveli bir sayfada belirli erevelerin ieriini belirleme ii Javascript ile yaplabilir. Ziyaretilerinizden sayfalarnzda baz formlar doldurmalarn istiyorsanz, bu formlarn kutularna yazlan bilgilerin, arzu ettiiniz trden olup olmad Javascript ile annda denetlenebilir. (Hayr; Javascript, kendiliinden, sitenizi ziyaret edecek kiilerin kredi kart numarasn edinemez!) Javascript rendiniz diye her yere Javascript kodlar serpitirmeli misiniz? Hayr. HTML ile yapabileceiniz bir ii asla Javascript ile yapmamalsnz. Bu iyi tasarm ilkelerine aykrdr. Bir kere, sayfanza koyacanz her Javascript kodu, sizin kendi yknz arttrr; belirttiimiz gibi Javascript henz ve muhtemelen epey bir zaman iin Browser-baml
JAVASCRIPT
olarak kalacak, yani kodlarnzn IE ve Netscapede yorumu daima yzde 100 ayn olmayacaktr. Bu yzden yazacanz her Javascript kodunu her iki Browserda ve farkl srmlerinde snamak zorundasnz. kincisi, Javascript kodunuz, ne kadar ksa olursa olsun, ziyaretinin Browsernn ykn arttracaktr. Hi kimsenin sizin programclk becerisi gsterinizi izleyecek zaman yok! Javascript veya baka herhangi bir Script programna, ancak ve sadece HTMLin yetersiz kald durumlarda bavurabilirsiniz. Sonu: Javascript, Java deildir, ama ona yakn beceriklilikte bir programlama dilidir. Programlama dilleri arasnda renme kolayl bakmndan en n srada yer alr. Ve en nemlisi, Javascript olaanst zevklidir. Gerek hikayeyi anlattka, Javascript ile neler yapabileceini grdke, bir daha bakasnn Javascript kodunu alp, Neden ilemiyor? diye zlmektense, kendi Javascriptinizi yazmann daha kolay olduunu da greceksiniz. Bu kitap, okurun iyi, hem de baya iyi dzeyde HTML bildii varsaymyla ve programlama konusunda hi deneyimi olmayan bir Web tasarmcsn dikkate alarak kaleme aldk. Eer HTML konusunda kendinizi hazr hissetmiyorsanz, sz gelimi, Byte dergisinin Eitim Dizisinde kan HTML Rehberi kitapn okumanz neririm. Bir programlama dili biliyor ve imdi Javascripti renmek iin bu kitap okuyorsanz, programlamann temel ilkeleriyle ilgili cmleleri veya blmleri okumak zorunda deilsiniz! Yine bu kitapkta hemen her frsatta Javascripte ilikin btn terimlerin ngilizcesini gstermeye ve kullanmaya altk. Bunun amac, ilerde karlacanz kullanlmaya hazr ve kullanma izni verilmi Javascript kodlarn kendi sayfalarnza uyumlu hale getirirken, program yazcsnn neyi nasl ifade ettiine aina olmanza yardmdr. Bu kitapkla giri yaptnz Javascripti daha baka kaynaklardan derinlemesine renmek istediiniz zaman da, ngilizce terimler kaynaklar arasnda paralellik kurmanza yardmc olacaktr. Buraya kadar dersi iyi kaynattk. Haydi kollar svayalm.
JAVASCRIPT
Not: Bu kitapktaki rnek kodlar PC World-Trkiyenin Internet sitesinde (http://www.pcworld.com.tr) bulabilirsiniz. Bu kodlar istediiniz gibi kendi sitenizde kullanabilir ve databilirsiniz. Ancak bu kodlarn satlmas yasaktr. ///////////////NOT N NOT:///////////////// Eer bu kodlar Internette deil de CDde yer alacaksa, not yle olabilir: Not: Bu kitapktaki rnek kodlar, CD-Magazinin ----------- tarihli --------- saysnda bulabilirsiniz. Bu kodlar istediiniz gibi kendi sitenizde kullanabilir ve databilirsiniz. Ancak bu kodlarn satlmas yasaktr. ////////////////////////////////NOTUN SONU//////////////////
JAVASCRIPT
Javascriptle Tanalm
Javascript program yazmak iin ihtiyacnz olan alet-edavat, bu kitapn yan sra, iyi bir bilgisayar ve bir dz yaz programdr. Bilgisayarnz ecza dolab klkl bir PC ise Notepad, bilgisayarnz mandalina, ilek veya eftali renkli bir iMac ise SimpleText bu i iin biilmi kaftan saylr. Eer bu amala bir kelime-ilem program kullanacaksanz, oluturacanz metnin dosyasn diske veya diskete kaydederken, dz yaz biiminde kaydetmesini salamalsnz. almaya balamadan nce rnek kodlarnz bir arada tutabilmek ve gerektiinde gerek sayfalarnzda yararlanabilmek iin sabit diskinizde bir dizin amanz yerinde olur. Javascript, HTMLin bir parasdr ve iinde bulunduu HTML ile birlikte Web Browser program tarafndan yorumlanr. Dolaysyla, Javascript program yazmak demek, bir Web sayfas hazrlamak ve bu sayfadaki HTML kodlarnn arasna Javascript kodlar gmmek demektir. O halde, kollar svayp, ilk Javascript programmz yazalm. u kodu yazp, merhaba1.htm adyla kaydedin:
<HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> <TITLE>Merhaba Dnya!</TITLE> </HEAD> <BODY> <B>Merhaba Dnya</B><br> <FORM> <BUTTON onclick="alert('Merhaba Dnya!')">TIKLAYINI!</BUTTON> </FORM> </BODY>
JAVASCRIPT
</HTML>
Sonra ya bu dosyay iki kere tklayn; ya da favori Browser programnz altrn ve bu dosyay an. Karnza kacak dmeyi tklayn. te sonu: <JS001.TIF> imdi kendi kendinizi kutlayn: Birazck yardmla da olsa, Javascript programcs olarak dnyaya merhaba demi bulunuyorsunuz. Yazdnz koddan tek kelime bile anlamyorsanz da hi nemli deil. nemli olan ilk adm atmakt. Bu adm attnza gre imdi yazdnz kodu biraz irdeleyelim. Btn Web sayfalar gibi, Javascript kodunuzun yer ald sayfa da tipik bir HTML kod kmesi: 1. Browser programna kendisinin bir HTML dosyas olduunu birinci satrda beyan ediyor; ve bittii yer aka gsteriliyor. 2. HTML kodu iki blm ieriyor: Balk (Head) ve gvde (Body) blmleri. Her blmn nerede balad ve nerede bittii aka belirtiliyor. 3. Gvde blmnde bir Form unsuruna yer veriliyor; fakat bu formun tek gesi var: Dme (Button). 4. Daha nce Web sayfalarnza dme koyduysanz, bu dmenin onlardan farkl bir taraf var: Tr, deeri, vs. belirtilmiyor; sadece onclick="alert('Merhaba Dnya!')" eklinde bir ifadeye yer veriliyor. 5. Ve ilk Javascript programnzda ne Javascriptin ad geiyor; ne de HTML ile Javascript blmlerini birbirinden ayrteden, <SCRIPT>..</SCRIPT> etiketine yer veriliyor! zellikle bu son husus, size unu gsteriyor: Gnmzde Netscape ve IE Javascript ile o kadar iie gemi ve Javascript zellikle 1.2nci srm ile o kadar Browserlarn Belge Nesnesi Modeli (Document Object Model) ile kaynamtr ki, kimi zaman HTMLin ilevi nerede bitiyor, Javascriptin ilevi nerede balyor, kolaylkla ayrt edilemez.
JAVASCRIPT
10
Javascriptten sz ederken, bu dilin imla kurallar olmakla birlikte bu kurallara yzde 100 uymann zorunlu olmadn ifade ettik. Kural olarak, Javascript blm, HTMLin iine <SCRIPT>..</SCRIPT> etiketlerinin arasna gmlr. te size btn kurallar yerine getirilmi bir Javascript blm yazma rnei:
<HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> <TITLE>Merhaba Dnya!</TITLE> <SCRIPT LANGUAGE=Javascript1.2>  </HEAD> <BODY> <B>Merhaba Dnya</B><br> <FORM> <BUTTON onclick=merhaba()>TIKLAYINI!</BUTTON> </FORM> </BODY> <HTML>
Bu metni merhaba2.htm adyla kaydeder ve Browsernzda aarsanz, grntnn ve ilevin tpatp ayn olduunu greceksiniz. ki metin arasndaki fark, ikincisinin Javascript yazma kurallarna yzde 100 uymasndan ibaret. Bununla birlikte Javascript ile HTMLi birbirinden dikkatlice ayrmanz gereken durumlar, ikisinin birbiriyle kaynat noktalardan daha oktur. Hatta o kadar ki, Javascriptin ileri srmne ilikin komutlar kullanyorsanz, eski srm Browserlarn kafasnn karmamas ve dolaysyla ziyaretinizin bilgisayarnn kilitlenmemesi iin bunu bile belirtmeniz gereken durumlar olabilir. Bir de unu deneyin: nce merhaba.js adyla u metni kaydedin:
JAVASCRIPT
11
function merhaba() { alert("Merhaba, Dnya!") }
Sonra, merhaba2.htm dosyasnda u deiiklii yapn ve merhaba3.htm adyla kaydedin:

<HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> <TITLE>Merhaba Dnya!</TITLE> <SCRIPT SRC="merhaba.js" LANGUAGE=JavaScript> </SCRIPT> </HEAD> <BODY> <B>Merhaba Dnya</B><br> <FORM> <INPUT TYPE="SUBMIT" NAME="BUTTON1" VALUE="TIKLAYIN!" onclick="merhaba()"> </FORM> </BODY> </HTML>
Ve merhaba3.htmi atnzda yine ayn grnt ve ayn ilevle karlatnz greceksiniz. Bu nc yntemde sadece Javascript kodlarn ieren ve dosya adnn uzatmas .js olan bir dzyaz dosyasn HTMLe dardan da eklemi olduk. Bu esneklie bakarak, Javascript diline, Ne yapsam olur! Nasl yazsam iler! anlayyla yaklaamazsnz. Javascript, btn bilgisayar dilleri gibi yorumlanabilmesi (alabilmesi) iin kendi imla ve dilbilgisi kurallarna son derece bal kalnmasn ister. Bunu snamak isterseniz, u ana kadar oluturduunuz herhangi bir HTML dosyasnda Javascript blmndeki bir parantezi veya ssl parantezi kaldrn; dosyay baka bir isimle kaydedin ve Browsernza atrmaya aln! Merhaba3.htm dosyasnda onclick=merhaba() komutunun bir parantezini kaldrdmzda, Netscape ve IEnin u hata mesajlarn verdiini gryoruz:
JAVASCRIPT
12
<JS001.TIF> HTML sayfalarnnn Web Browser programlarnda yapabilecei bir baka hata ise, kodu icra etmek yerine ierik gibi grntlemektir. Web ziyaretilerinin hal kulland eski srm Browser programlar, Javascript programlarn ya hi anlamazlar, ya da eski srmlerini anlarlar. Netscape 2.0 ncesi ile IE 3.0 ncesi Browser programlarnn, Javascript kodlarn icra etmek yerine sayfann ierii imi gibi grntlemesini nlemek iin Script blmlerini eski srm Browserlardan, merhaba2.htm sayfasnda yaptnz gibi gizlemeniz gerekir. Merhaba2.htme bakarsanz:

eklinde bir blm greceksiniz. Bu blmn banda ve sonunda yer alan  iaretlerinin arasndaki herey, eski srm Browserlar tarafndan HTML dili kurallarna gre yorum saylacak ve grmezden gelinecektir. Javascript dilinin yorumlar ise // iaretiyle balar ve satr sonunda sona erer. Merhaba2.htmde Javascript kodlarnn btn satrlarnda byle yorumlar koydunuz. Eer yorumlarnz bir satrdan uzun olacaksa, bunu yle belirtebilirsiniz:
/* yorumun birinci satr yorumun ikinci satr yorumun nc satr */
Javascript veya baka bir dille program yazarken, iyi programclar, programlarn kendilerinden bakas denetlemeyecek ve yeniden kullanmayacak da olsa, nemli ileri yaptklar satrlara mutlaka yorum koyarlar. Bunun yararn, kendi yazdnz bir program bile bir yl sonra yeniden atnzda grrsnz!
JAVASCRIPT
13
Ziyaretinin Web Browser program Javascript anlyor ise sayfanzdaki Javascript kodlar, ya ilk yazdnz programda olduu gibi, ziyaretinin sayfanzda bir yeri tklamas veya klavyede bir tua basmasyla harekete geer; ya da HTML sayfas ziyaretinin Browsernda grntlendii anda otomatik olarak almaya balar. Otomatik alan Javascript kodu ise iki ayr yntemle altrlabilir: HTML kodlar icra edilmeden nce (yani sayfanz ziyaretinin Web Browsernda grntlenmeden nce, veya sayfa grntlendikten sonra. Davrann dz yaz programnza ve u kodlar girin:
<HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> <TITLE>Merhaba Dnya!</TITLE> <SCRIPT LANGUAGE="Javascript1.2"> <!-alert("Merhaba Dnya!") // --> </SCRIPT> </HEAD> <BODY> <B>Merhaba Dnya</B><br> </BODY> <HTML>
Bu dosyay da merhaba4.htm adyla kaydedin ve Browsernzda an. Sayfanzn ieriini oluturan Merhaba Dnya yazs ile Javascript programnzn icra ettirdii uyar kutusunun grntlenmelerindeki sraya dikkat edin. Bu dosyada, kk bir deiiklik yapalm ve kodlarmza u ekli verelim:
<HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> <TITLE>Merhaba Dnya!</TITLE>
JAVASCRIPT
14
<SCRIPT LANGUAGE="Javascript1.2"> <!-function merhaba() { alert("Merhaba Dnya!") } // --> </SCRIPT> </HEAD> <BODY onLoad="merhaba()"> <B>Merhaba Dnya</B><br> </BODY> <HTML>
merhaba5.htm adyla kaydedeceiniz bu dosyay Browsernzda atnzda, sayfa metni ile uyar kutusunun grntlenme srasna dikkat edin. Merhaba4de nce uyar kutusunun grntlenmesinin sebebi, Browsern HTML kodundaki komutlar yukardan aa srayla yerine getirmesi ve bu arada karsna kan Javascript komutunu da icra etmesidir. Oysa merhaba5te, Javascript komutunu bir fonksiyon olarak tanmladnz ve bu fonksiyonun icrasn HTMLin BODY etiketinin ieriinin Browsern penceresine yklenmesine baladnz. Bunu Javascriptin onLoad komutuyla yaptk. (onLoadn nasl kullanldn ve nerelerde kullanldn daha sonra ayrntl ele alacaz. imdiden telaa kaplmaya gerek yok!) Buraya kadar grdmz bir ka rnei, Javascript kodlarnn ne zaman ve nasl ilediini gstermek amacyla verdik. Fakat bu rneklerden kartacamz baka bir sonu daha var: Dikkat etti iseniz Javascript komutlar, daima HTML sayfasnn bir unsuruna bal olarak veriliyor. Yani Javascriptin konusu veya hedefi, Web Browser programnn (Netscape veya IEnin) bilgisayarn ekrannda oluturduu pencerenin iindeki belgenin bir gesi. Bu ge, imdilik ya bu belgenin iindeki FORM unsurunun bir blm (rnein, dmesi), ya da sayfann BODY blmnn bizzat kendisi oldu.
JAVASCRIPT
15
Bu geler, unsurlar, unsurlarn blmlerine programclk dilinde Nesne (Object) denir. Ya kendisi bir nesne oluturabilen veya iinde alt programn ya da iletim sisteminin nesnelerini konu alan ve bu nesnenin unsurlarn, gelerini, paralarn hedef olarak alan dillere Object-oriented (nesne-ynelimli) diller denir. Bu dillerle yazlan programlara (isterse bir Script dilinin dz yaz eklindeki komutlar olsun) Object-oriented Program (OOP) ad verilir. Javascript programlar da OPP snfna girdii iin, Javascript programcs olacaksanz, programlarnzn mutlaka Web Browsern bir nesnesinin bir zelliini belirlemeye veya deitirmeye ve Web Browser bir nesne oluturmaya ve nesnenin u zelliini yle veya byle yapmaya ynelik olmas gerektiini akldan hi kartmamalsnz. Bu nesne, Browsern penceresinin men ubuunun olmas ya da olmamas, pencerenin bilgisayar ekrannda ne byklkte olmas, pencerenin alt erevesindeki stat mesajnn ieriinin deitirilmesi bile olabilir. Javascript program asndan HTML etiketleri ile oluturacanz hemen herey nesnedir. Bu nesnelerin nasl etkilenecei ise Javascript programnn ieriini oluturur. zetlersek, Javascript ile Web Browser programn penceresini ve Browser programnn yorumlad HTML etiketlerinin oluturaca sayfa gelerini, bu gelerin biimini, deerini belirler, sorgulayabilir ve deitirebilirsiniz. imdi ksaca bu ilevselliin temeli olan ve adna Document Object Model (DOM, Belge Nesne Modeli) denen kurallar demetinden sz edelim. Javascript kodu, DOMu hedef alr: bu balamda DOM, bir Browsern penceresi ve penceresinin iindeki herey demektir. Ama henz herey iin bir olay ve metod standard gelitirilmi deil. Olay (Event) ve Metod (Method) burada dikkat etmeniz gereken iki kelime. Olay, Web Browsern veya kullancnn yapt bir i, eylem, hareket demektir; Metod ise programc olarak sizin bu Olay veya nesnenin bir zelliini (Property) kullanarak,
JAVASCRIPT
16
Belgenin bir unsuruna yaptrtabileceiniz i, eylem, hareket veya deiikliktir. Bu teori ilk bakta sanld kadar kavranmas zor deil. Bir rnekle aklayalm: Diyelim ki, HTML sayfanzda yle bir blm var:
<FORM NAME=form01> WEB KTAPISI <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 gsterilecek</TEXTAREA> </FORM>
imdi bu HTML kodu sayfanzda u Nesneleri oluturur: 1. Bir adet Form 2. Drt adet checkbox tr INPUT alan 3. Bir adet metin alan imdi dikkat: Sizin anzdan form01 isimli bu formu oluturan FORM gesi, Javascript asndan document.form01 adl nesnedir. Ziyaretinin iine iaret koyduu kutu, Javascript tarafndan document.checkboxSelected diye tannr. Sizin sonuc isimli metin alannzn iinde yazl olacak metin ise Javascript bakmndan document.form01.sonuc.value (value=deer) diye bilinir. HTML dilini gelitirenler, tr checkbox olan INPUT nesnesinin bana gelebilecek olay trlerinin neler olabileceini dnrken, Mesela, demiler, Kullanc bu kutuyu tklayabilir! Yani, bu nesnenin Browser asndan yol aabilecei olaylardan biri tklanmas halinde olan olaydr. Tklamann ngilizcesi ne? click! O halde bu olayn ad Click, bu olay ynlenrdiren metodun ad ise onClicktir (on, ngilizce -de, -da eki veya zerinde, halinde kelimesinin karldr). Bu durumda onClick, olay, bu kutu asndan bir olaydr ve Javascript prnogramcs olarak bu olay yakalayabilir, kullanabiliriz. Baka bir deyile, Browsera, Javascript yoluyla Ey Browser; kullanc benim INPUT nesnelerimden roman
JAVASCRIPT
17
adl olan tklad zaman u, u ii yap! emrini verebiliriz. Bu noktada bilgisayar programnn, hangi dille yazlrsa yazlsn, alt alta gelmi komutlar listesi olduunu hatrlatalm. Peki, yine ayn rnekte, Browsera Javascript yoluyla ne gibi bir i yaptrtabiliriz? Mesela, Ey Browser, kullanc benim INPUT nesnelerimden roman adl olan tklad zaman benim sonuc adl TEXTAREA nesnemin deerini Roman yap! diyebiliriz. Biliyorsunuz ki, TEXTAREA nesnelerinin deeri, ekranda izdikleri kutunun iine koyduklar ierik demektir. Tabi ayn mantkla, hikaye kutusu iaretlenince Sonu kutusuna Hikaye, biyografi kutusu iaretlenince de Sonu kutusuna Biyografi yazdrtmak elimizde. Ksaca, Javascript hereyi, bir HTML gesine gre tanmlar, adlandrr ve bilir. Unutmayacanz kural: Javascript, sayfann bir eyini alr, sayfann bir eyine hitabeder! Bu gayet anlaml ekilde ifade ettiimiz kural yerine getirmekte sorun, sadece Javascriptin on-onbe kelimesini, yedi-sekiz ilemini renmek deil, aslnda HTML belgesinin nesnelerinin olaylarn ve metodlarn renmektir. Dolaysyla, nce Javascriptin on-onbe kelimesi ve yedi-sekiz ileminden ibaret temel kurallarn ele alacaz; sonra da bunlarla Belge Nesneleri'ne hangi olay halinde ne yapabileceimizi ve bunu nasl yapabileceimizi greceiz.
JAVASCRIPT
18
Javascriptin Temel lkeleri
Web Browser programlar, Javascript komutlarn yorumlayabilmek iin, HTMLin iinde <SCRIPT LANGUAGE=Javascript> etiketini ararlar ve </SCRIPT> etiketini grdkleri anda bu yoruma son verir; HTML yorumuna dnerler. Bu etikette, kullanacanz Javascript srmn de belirtebilirsiniz. Javascript, u anda 1.3nc srmnde. Ancak Netscape 2.0 ve 2.2 ile IE 3.0, Javascriptin 1.0 ve 1.1 srmlerini tanyabilir. Her iki Browsern 4nc srmleri ise Javascript 1.2 ile uyumludur. Script etiketinde srm yazmazsanz, her iki Browser da 1.0 srmn kullandnz varsayar. Netscape ileri srmlere ait komutlar (eer tanyorsa) icra eder, tanmyorsa grmezden gelir. IE ise belirttiiniz srmden ileri komutlar tanmaz ve hata mesaj verir. Kullanlan Browser trleri ve srmlerine ilikin istatistikler dikkate alnrsa, bu satrlar kaleme aldmzda en gvenli srm 1.2dir. Biz de rneklerimizde bunu belirteceiz. Hemen bir uyar Javascriptin birinci srmn kastetmek amacyla <SCRIPT LANGUAGE=Javascript1.0> veya <SCRIPT LANGUAGE=Javascript1> yazmayn; IE hata mesaj verir, Netscape ise Javascript blmn grmezden gelir!
Javascript Yazm Kurallar

Browserlarn Javascript yorumlama blmleri, kodlarn arasnda yer alan yorum ifadeleri ile boluklar atar; geri kalan kelimeleri bee ayrarak ele alrlar: 1. Belirleyiciler (Identifier): Javascript dilinin deikenleri, metodlar ve nesnelerini belirleyen isimlere Belirleyiciler denir. Bu snfa giren btn kelimeler ya harfle ya da alt izgi (_) ile balar. Rakam veya dier iaretler birinci karakter olarak kullanlamaz, fakat daha sonra
JAVASCRIPT
19
kullanlabilir. Javascript, ayn kelimenin byk harfle yazlan ile kk harfle yazlann farkl isimler olarak grr. Bu snfta giren kelimelerin iinde boluk olamaz. Javascript kodlarnz sizin bilgisayarnzda deil, ziyaretinin bilgisayarnda altrlacana gre, kullandnz karakterlerin ziyaretinin bilgisayarnda nasl bir deer tayacan dnmeniz gerekir. Bu bakmdan gvenli yol, Bu snfa giren kelimelerde, ngilizce alfabede bulunmayan, Trke ve dier dillerdeki high-ASCII karakterleri (, , , , , ile , , , , ve ) kullanmamaktr. Aada doru ve yanl belirleyici kelime rneklerini bulacaksnz: Doru sonucgoster ikincidegisken _gelen Yanl sonuc goster 2ncidegisken #gelen Anahtar kelime grubundaki kelimeler de bu snfta kullanlamaz. 2. Anahtar Kelimeler (Keyword): Javascript dilinin nceden tanmlanm ve programn yorumunda zel anlam kazandrlm kelimelerine Anahtar Kelime denilir. Aada bu kelimelerin yannda kelime anlamlarn greceksiniz; fakat ilerledike bu kelimelerin Javascriptte kullanldklar yere gre anlamlarn ve nerelerde kullanldklarn greceiz.
////////////QUARK N NOT//////////////// Kelime listelerini Word iinde stun haline getirdim. Bylece Quarka giderse alfabetik sra bozulabilir. Wordde iken kelime listesini stundan kartmak gerekir. ////////////////QUARK NOTU BTT////////////////////
Javascript 1.0deki anahtar kelimeler: break (kes) continue (devam et)
JAVASCRIPT
20
else (baka bir durum) false (yanl) for (iin) function (ilev) if (eer) in (iinde) int (integer, tam say) new (yeni)
null (bo deer) return (dn) this (bu) true (doru) var (variable, deiken) while (... iken) with (ile)
Javascript 1.i ile eklenen anahtar kelimeler: typeof (tr) void (geersiz) Javascript 1.2 ile eklenen anahtar kelimeler: do (yap) labeled (etiketli) switch (deitir) 3. Ayrlm Kelimeler (Reserved): kinci gruba girsin-girmesin baz kelimeler, ilerde Javascript programlama ve yorumlama ilerinde kullanlabilecei dncesi ile, bir kenara ayrlmtr; Javascript kodlarnda kullanlamazlar. Bu listede yer alan ve halen Anahtar Kelime listesine girmi bir kelime deiken, fonksiyon, nesne veya metod ad olarak kullanlrsa, program hata verir; henz anahtar kelime listesine alnmam olmakla birlikte rezerv edilmi bu kelimelerin getii komut satr ise grmezden gelinir. Javascript programlarnzda kullanmayacanz kelimelerin listesi yledir:
JAVASCRIPT
21
abstract (soyut) boolean (Boolean Mant) break (kes) byte (bayt) case (hal) catch (yakala) char (karakter) class (snf) const (sabit) continue (devam) default (varsaylan) delete (sil) do (yap) double (ift) else (baka bir durum) extends (uzanr) false (yanl) final (sonuncu) finally (sonunda) float (kesirli) for (iin)
function (ilev) goto (--ya git) if (eer) implements (uygular) import (ithal et) in (iinde) instanceof (--nn oluumu) int (integer, tam say) interface (arayz) labed (etiketli) long (uzun) native (kendinden olan) new (yeni) null (bo deer) package (paket) private (zel) protected (korunmu) public (genel) return (dn) short (ksa) static (sabit)
JAVASCRIPT
22
super (kuvvet) switch (deitir) synchronized (uyumlu) this (bu) throw (iine kat) throws (iine katar) transient (geici) 4. Deerler (Literal):
true (doru) try (dene) typeof (tr) var (deiken) void (geersiz) while (iken) with (ile)
Javascript kodu icra edildii srada deimeyen rakam veya metinlere Deer denir. Javascript kodlarnda be tr deer bulunur: a. Tamsay Deerler (Integer Literal): Tamsaylar, 10 tabanl (ondalk, decimal), 8 tabanl (octal) veya 16 tabanl (hexadecimal) olabilir. 8 tabanl saylar belli etmek iin saydan nce sfr, 16 tabanl saylar belli etmek iin sfr ve x harfi kullanlr. Hexadecimal saylarda 9dan byk saylar A, B, C, D, E ve F harfleri ile yazlr. (Saynn basamaklarn okuma kolayl salamak iin, nokta deil, virgl ile ayrmalsnz.) rnek: Decimal 46,789; Octal 072,7898; Hexadecimal: 0x7B8. b. Kesirli Deerler (Floating-point literal): Tam say blmn bir ondalk nokta (virgl deil) ile kesir blm izleyen saylar. rnek: 3987.786, -1.1. c. Boolean Mantk fadeleri (Boolean Literal): Javascript dilinde, Boolean Mant, iki sonu verir: True (Doru) ve False (Yanl). Javascript, True (Doru) deerini 1, False (Yanl) deerini 0 rakamyla tutar. Bir denklemin
JAVASCRIPT
23
sonucunun doru veya yanl olduunu irdelerken, Javascript metninde bu iki kelime kk harfle yazlmaldr. Dolaysyla byk harfle yazlm TRUE ve FALSE kelimeleri, deiken, fonksiyon, nesne ve metod ad olarak kullanlabilir. Tabii, bir sre sonra kafanz karmazsa! d. Alfanmerik (Karakter) Deerler (String literal): ki adet ift-trnak () veya tek-trnak () iine alnan her trl ifade, Javascript iin String deeridir. (eitli Trke bilgisayar kaynaklarnda String literal terimi karakter deiken olarak belirtilmektedir. Karakter bu deerlerin rnein say deerlerden farkn anlatmyor. Baz kaynaklarda ise hem rakam, hem de harf ierdikleri, buna karlk say olmadklar gereini belirtmek amacyla, daha aina olduumuz alfanmerik terimini grmek mmkn. Ben bu ikincisini benimsiyorum.) Bir Javascript metninde alfanmerik deerleri bir tek trnakla, bir ift trnakla gsteremezsiniz. Bata nasl baladysanz, programn sonuna kadar btn alfanmerik deerleri ayn tr trnak iinde gstermelisiniz. Alfanmerik deer olarak verdiiniz karakterler, daha sonra bir HTML sayfada bir nesnenin bir unsurunun deeri (rnein bir TEXTAREAnn ierii) olarak kullanlacaksa ve HTML sayfa, meta etiketlerinde kendisinin Trke olarak yorumlanmasn salayacak ifadeye sahipse, Trke karakter ve dier yksek ASCII kodlardaki karakterleri ierebilir. rnekler: Bugn hava ok gzel Bugn hava gzel deil 123 adet yumurta 23,234,678.987 e. zel Karakterler zellikle alfanmerik deerleri verirken, Browsera metin grntleme konusunda biim veya hareket komutlar da vermek isteyebilirsiniz. Bunu, baz kod harflerin nne tersbl iareti koyarak yapabilirsiniz. Bu tr zel karakterler unlardr: \b - Klavyede Geri (backspace) tuunun grevini yaptrr. \f - Yazcya sayfay bitirmeden karttrr (formfeed). \n - Yaz imlecini yeni bir satrn bana getirir (new line) \r - Klavyede Enter-Return tuunun grevini yaptrr.
JAVASCRIPT
24
\t - Sekme (tab) iaretini koydurur. \\ - Yazya ters-bl iareti koydurur. \ - Yazya tek-trnak iareti koydurur. \ - Yazya ift-trnak iareti koydurur. Javascripte bu tr zel karakterlerle HTML sayfasna bir metin yazdracanz zaman, bu yaznn <PRE>..</PRE> etiketleri arasnda olmas gerekir. Aksi taktirde Javascript ne yazdrrsa yazdrsn, HTML bu zel karakterleri dikkate almayacaktr.
Javascript Deikenleri (Variable)

Deiken, ad stnde, Javascript yorumlaycs tarafndan bilgisayarn belleinde tutulan ve ierdii deer programn akna gre deien bir unsurdur. Deikenlerin bir ad olur, bir de deeri. Program boyunca beikenin ad deimez; fakat ierii deiebilir. Deikenlere isim verirken Belirleyici isimleri kurallarna riayet etmeniz gerekir. Yani bir deikenin ad rakamla veya alt izgi (_) dnda bir iaretle balayamaz. Javascript, byk harf-kk harf ayrt ettii (case-sensitive olduu) iin, rnein SONUC ve sonuc kelimeleri iki ayr deiken gsterir. Bir deikeni tanmlarken, byk harf kullandysanz, program boyunca bu deikeni byk harle yazmanz gerekir. Deiken tanmlamak, bilgisayar programclarna daima gereksiz bir yk gibi grnr. Birazdan greceiz, Javascript sadece deikenleri tanmlamay zorunlu klmakla kalmaz, fakat nerede tanmlandna da zel bir nem verir. Javascripte bir Belirleyicinin deiken olarak kullanlacan bildirmek iin var anahtar-kelimesini kullanrsnz: var sonuc var adi, soyadi, adres, siraNo var i, j, k var mouseNerede, kutuBos, kutuDolu
JAVASCRIPT
25
Grdnz gibi, bir var satrnda birden fazla deiken tanmlayabilirsiniz. Baz dier programlardan farkl olarak Javascript, size deikenleri hem beyan, hem de ieriini belirleme iini ayn anda yapma imkan veriyor (initialization): var sonuc = Merhaba Dnya! var adi = Abdullah, soyadi = Aksak var i = 100, j = 0.01, k = 135 var kutuBos = false, kutuDolu = true Gerekiyorsa, bir deikeni nce tanmlar, sonra deerini belirleyebilirsiniz: var kutuBos = false, kutuDolu kutuDolu = true Javascript, programcya bir deikeni tanmlamadan initalize etme (iine doldurma) imkan da verir; bu durumda o deiken genel (global) nitelik kazanr. Buna birazdan deineceiz; ama iyi programlama teknii ve zellikle daha sonra hata arama zorunluu sebebiyle, deikenlerin ak-seik tanmlanmas en doru yoldur. Bir deikeni tanmlayarak iini doldurmadan (initializationdan) nce iindeki deeri sorgulamaya kalkarsanz, Browsern Javascript yorumlaycs o noktada durur ve tanmlanmamam (undefined) deiken hatas verir. Javascript programlarnda be tr deiken bulunabilir: 1. Say (number): -14, 78, 87678 Say trndeki deikenler, tam say, ondalk say, pozitif say veya negatif say olabilir. Say deikenlerle aritmetik ilemler yaplabilir.
var eni = 9, boyu = 4 var alani = eni * boyu document.writeln(alani)
JAVASCRIPT
26
Bu kod rnei ile Javascript, Browser penceresi iindeki belgeye alani adl deikenin deerini (36) yazdracaktr. 2. Boolean deiken: true, false Javascript, tanmlanrken deeri true (doru) veya false (yanl) olarak belirtilen deikenleri otomatik olarak Boolean deiken olarak snflandrr ve sorguladnzda true iin 1, false iin 0 deerini verir. 3. Alfanmerik (String) Deiken: Merhaba Dnya! Alfanmerik deiken, kendisine tek veya ift trnak iinde verilen btn karakterleri tutar, ve sorulduunda aynen bildirir. Alfanmerik deikenin ii bo olabilir (var adi = , soyadi = ). Alfanmerik deikenler, tabir yerinde ise toplandnda deikenlerin deerleri srayla birbirine eklenir: var adi = Osman, soyadi = Hmek var adisoyadi = adi + soyadi document.writeln(adisoyadi) Bu kod rnei ile Javascript, Browser penceresi iindeki belgeye adisoyadi adl deikenin deerini (OsmanHomek) yazdracaktr. Araya boluk koymann tekniine ilerde deineceiz! 4. lev (Function) Deiken: Javascriptin hayat noktas fonksiyonlardr. Javascripte fonksiyonlarla i yaptrrz. Kimi fonksiyonu, Javascripti tasarlayanlar bizim iin tanmlamlardr; bunlara metod denir. (Kimi metod, ne yapacaksa bizim hi bir katkmz beklemeden yapar; kimi metod mutlaka bizden bir katk bekler.) Kimi fonksiyonlar biz tanmlarz ve komutlarn biz veririz. Bunlara Programlanan Fonksiyonlar denir. Balarda yazdnz ve merhaba2.htm adyla kaydettiiniz dosyada biz merhaba() adl bir fonksiyon oluturduk; sonra bu fonksiyona bir
JAVASCRIPT
27
otomatik fonksiyon olan alert() metodunu kullanmasn bildirdik; bu otomatik fonksiyona da grevini yaparken kullanmasn istediimiz deeri verdik! 5. Nesne (Object) deikenleri: window, document Bu tr deikenlere deiken adn vermek bile gerekmez; nk bunlar Browsern nesneleridir. Fakat Javascript kodlarmzda bu nesneleri de deiken gibi kullanabiliriz. Bu snfa giren zel bir deiken ise deerini null (ii bo) kelimesiyle belirlediiniz deikenlerdir. Javascript, deikenlerini bu be snfa ayrmakla birlikte sizden deikenlerinizini snflamanz beklemez. Snflamann nemi, daha sonra, programn ileri bir aamasnda bir deikenin deeri ile yaptracanz ilemde ortaya kacaktr. Bir deiken, kendi snfnn yapamayaca bir ileme veya sorgulamaya tabi tutulursa, Javascript size pek de kibarca olmayan bir hata mesaj ile deikeni doru kullanmadnz hatrlatacaktr. Bununla birlikte bir fonksiyonda say olarak tanmlanm ve doldurulmu bir deiken, ayn fonksiyonda daha sonraki bir ilemde veya baka bir fonksiyonda alfanmerik deiken olarak tanmlanabilir ve doldurulabilir. Bu deiken sorgulandnda deerini, yetki alan (scope) erevesinde bildirir. Deikenlerin yetki alan veya geerli olduu alan (scope), oluturulmu ve deeri belirlenmi olduu sahay, yani kendisine atfta bulunulduu zaman bildirecei deerini ve bu deikene nerelerden atfta bulunulabileceini gsterir. imdi, HTML dosyasnn ba tarafnda (HEAD etiketi iinde) bir deikeni tanmladnz ve ona bir deer verdiinizi dnn. Daha sonra yazacanz btn fonksiyonlarda veya deerini belirleyebileceiniz otomatik fonksiyonlarda (metodlarda) bu deikeni bir daha tanmlamaya ve deerini belirlemeye gerek kalmadan kullanabilirsiniz; nk Javascript asndan bu deiken genel (global) deiken saylr. Daha sonra ayrntl olarak greceimiz gibi, HTMLin gvde ksmnda (BODY etiketi iinde) bir fonksiyon yazdmz ve bu fonksiyonun iinde bir
JAVASCRIPT
28
deiken tanmladmz dnn. Daha sonra yazacanz bir fonksiyonda bu deikeni kullanamazsnz; nk Javascript bir fonksiyonun iindeki deikeni yerel (local) deiken sayar ve kendi yetki alan (scopeu) dnda kullanmanza izin vermez. Bir yerel deiken, ait olduu fonksiyon arld anda oluturulur ve fonksiyonun icras bittii anda yok edilir. Dolaysyla bir fonksiyon, baka bir fonksiyonun yerel deikinini kullanmaya kalktnda undefined (tanmlanmam) deiken hatasyla karlarsnz. Bir deikeni btn HTML sayfas boyunca kullanmay dnyorsanz, bu deikeni, HTML sayfasnn banda iinde fonksiyon bulunmayan bir SCRIPT blmnde tanmlamal ve doldurmalsnz. yi bir programlama teknii, genel deikenleri, ak-seik tanmlamak ve bunu yorum satryla belirtmektir:
<HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> <TITLE>Merhaba Dnya!</TITLE> <SCRIPT LANGUAGE="Javascript1.2">  </SCRIPT> </HEAD> <P>BURAYA ETL AMALARLA HTML KODLARI GREBLR!! SONRA TEKRAR SIRA JAVASCRIPT'E GELEBLR</P> <SCRIPT LANGUAGE="Javascript1.2">  </SCRIPT> </HEAD> <BODY> <B>Merhaba Dnya</B><br> <FORM> <INPUT TYPE="SUBMIT" NAME="dugme1" VALUE="TIKLAYIN!" onclick="merhaba()"> </FORM> </BODY> </HTML>
Bu kodu da merhaba6.htm adyla kaydedebilirsiniz. Daha sonra merhaba fonksiyonunda alert(metin1) satrndaki 1 rakamn 2 ve 3 diye deitirirseniz, merhaba6.htmin uyar kutusunun ieriini deitirdiini greceksiniz. imdi, merhaba6da merhaba() fonksiyonunu yle deitirin ve u eki yapn:
function merhaba() { var metin1 = "Sana da merhaba!" alert(metin1) } function hello() { alert(metin1) }
Sonra, ayn dosyada mevcut dme oluturan INPUT satrnn altna u satr ekleyin; sayfanzda iki dme grnecektir:
<INPUT TYPE="SUBMIT" NAME="dugme2" VALUE="TIKLAYIN!" onclick="hello()">
Bu dmelerden birincisi, merhaba() fonksiyonunu, ikincisi hello() fonksiyonunu aracak. Genel olarak tanmladnz ve deer verdiiniz metin1 deikeninin deerini merhaba() fonksiyonunda deitirdiniz; bu deikenin yeni deeri Sana da merhaba! eklini ald. Bu metni, merhaba7.htm adyla kaydedip, Browserda atnzda ve birinci dmeyi tkladnzda, uyar kutusunun ieriinin metin1 deikeninin genel deerini deil
JAVASCRIPT
30
yerel deerini ierdiini greceksiniz. Yani metin1in deeri deimi oldu. Peki, ikinci dmeyi tklayn! metin1in deeri deimemi gibi, uyar kutusunun genel tanmlamadaki deeri kullandn greceksiniz. Oysa biraz nce, birinci dmeyi tkladmzda yani merhaba() fonksiyonu altnda metin1in deeri deimemi miydi? imdi neden eski metin1in eski deeri karmza kyor? Bu altrmann rettii kural yle zetlenebilir: Bir genel deiken, bir fonksiyon iinde yerel olarak deitirilebilir; ama onun genel deeri dier fonksiyonlar iin geerli kalr. Javascript programlarnz yazdnz zaman genel deikenleriniz beklediiniz deeri vermiyorsa bu deeri bir fonksiyonun yerel olarak, srf kendisi iin, deitirip deitirmediine bakmalsnz. Bu tr hatalardan kanmann bir yolu, yerel deikenlerinizle genel deikenlerinize farkl isimler vermektir. Javascript, deikenlerinizi isimlendirmede rakamla ve iaretle balamamak dnda kural koymuyor; ama iyi programclk teknii, deikenlere anlalr ve kullanld yeni belli eden isimler vermektir. rnein, adi eklindeki bir deiken ad, ok deikenli bir Javascript programnda yanltc olur. musteri_adi veya musteriAdi ok daha uygun olabilir. Ayrca deeri Evet (=doru, true) veya Hayr (=yanl, false) olan Boolean deikenlerin adlandrlmasnda, rnein, doluMu, tamamMi, acikMi, bittiMi gibi cevab artran deiken adlar kullanabilirsiniz. Dizi-Deikenler (Array) Javascriptin u ana kadar ele aldmz btn deikenleri, tekildir. Yani bu deikenlerden Javascript bakmndan sadece bir adet vardr; dolaysyla bir adet de deeri bulunur. Oysa imdi yle bir durum dnn: Evcil kular tanttnz bir site yapyorsunuz. Ele alacanz btn kular ve zelliklerini bir tablo olarak dnebilir misiniz? Ku-1: Kanarya, Ku-2: Blbl, Ku-3: Muhabbet Ku-4: Papaan, gibi. Bunlarn hepsini tek tek
JAVASCRIPT
31
tanmlamaya kalkarsak, daha sonra kullanm zorluu doabilirdi. Javascript, bize dizideiken (Array) yoluyla, rnein bir ku deikeni oluturup, bunun iine istediimiz kadar deer koyma imkan veriyor. Bir dizi-deikenin bireylerinin deerlerini dizideikenin endeksi ile arabilir veya belirleyebilirsiniz. Bir dizi-deiken oluturmann forml udur: var dizinin_Ad = new Array(unsur1, unsur2, unsur3...unsurN) Bu formle gre, ku dizisini yle oluturabiliriz: var kusDizi = new Array(blbl, kanarya, muhabbet, papagan) Diziler (nedendir, bilinmez) sfrdan itibaren numaralanr; yani bizim rneimizde dizinin birinci yesi kusDizi[0], ikinci yesi kusDizi[1], nc yesi kusDizi[2], drdnc yesi ise kusDizi[3] diye anlr. Burada rnein kusDizi[2] deikeni muhabbet deerini tar. lerde bu deeri deitirmek ve diyelim ki Saka yapmak istersek, Javascript kodumuzun uygun yerinde unu yazarz: kusDizi[2]=saka Dizi-deikenleri, zellikle ele almamzn bir nedeni, dizilerin Javascript asndan nesne saylmasdr. Bunun nemine ve kullanld yerlere daha sonra deineceiz; imdilik unu belirtelim: dizi-deikenlerin, nesne olduklar iin zellikleri (property) vardr. rnein, oluturduum dizi-deikenin ka yesi olduu, kusDizi.length zelliinin iinde yazldr. lerde dizi-deikenlerimizin ye saysndan ok yararlanacaz.
Javascriptte lemler (Operator)

Program yazmann amac, bilgisayara ilem yaptrtmaktr. Javascript de bu adan farkl deildir: bir deikenin deerini alrsnz, bir ilemden geirirsiniz; sonra ortaya kacak yeni deeri ya bildirirsiniz, ya da yeni bir ilemde kullanrsnz. Tabi herey bu kadar kolay olsa idi, herkes programc olurdu. Herkes programc olmadna gre, sz gelimi bir
JAVASCRIPT
32
deikeni almak iin nce deikenin deerinin nereden ve nasl elde edileceini bulmanz gerekir. Ayrca yukarda rendik ki, Javascript programlar Browsern pencere nesnesine veya penceresinde de grntledii belge nesnesinin bir unsuruna hitaebeder. Dolaysyla hangi nesnenin ne gibi nitelikleri olduunu renmemiz gerekir ki, ileme tabi tuttuumuz deerleri bu unsurlarn iine yarayacak ekle getirelim. Javascript, eline verdiiniz deikenin trne ve deikenin deerine gre drt tr ilem yapar. imdi bunlar srasyla ele alalm: Atama (Assignment) lemleri: Javascriptte en sk yapacanz ilem, bir deikene bir deer atama ilemidir: Ad adl deikenin deeri Hakk olsun! Soyad adl deikenin deeri cal olsun, gibi. Ve tahmin ettiiniz gibi bunu eittir (=) iaretiyle yaparz: var adi = Ahmet, soyadi = Arif var siraNo = 123, sigortaNo = A123-2345-234 Javascript, bir eittir iaretiyle karlatnda, nce iaretin sana bakar ve deeri okur; sonra iaretin soluna bakar ve bu adn, meru bir deikene ait olup olmadn ve bu adla bilgisayarn belleinde bir yer ap aamayacan belirler. Eer iaretin solundaki isim, meru, yani nceden tanmlanm veya deeri belirlenmi bir deikene ait ise, o deikenin bilgisayarn belleindeki adresine iaretin sandaki deeri yazar. Deiken ismi yeni bir meru isme aitse, Javascript bu deikeni initalize eder, yani hem yer aar, hem de iine deerini yazar. Deiken ismi kabul edilebilir nitelikte deilse, yani sz gelimi alt izgi (_) dnda bir iaretle veya rakamla balyorsa, iinde boluk varsa, veya yasakl kelimelerden biri ise, Javascript hata mesaj verir. Bu noktada sk yaplan bir hata, baka bir programlama dilinden kalma alkanlkla deikeni saa, deeri sola yazmaktr: hakki = adi, gibi. Javascript bu durumda da hata
JAVASCRIPT
33
mesaj verir; nk hakki deikenine adi deerini atamak iin, say olmayan bu alfanmerik deerin ya tek, ya da ift trnak iine yazlmas gerekir. Javascriptte bir deikene deer atarken, bu deeri mevcut bir veya daha fazla deikenden de alabilirsiniz: var i = j + k var indexNo = siraNo + kategoriNo var tutariTL = birimFiyatTL * adet Aritmetik lemleri: te lisede matematik dersinde kaytarmam olduunuza kredeceiniz noktaya geldik: Javascript (veya baka herhangi bir programlama dili) siz formln vermedike hi bir hesab yapamaz; ama dnyann en aprak, en karmak formln de verseniz, sonucu (bilgisayarnzn hz ile orantl olarak) hesaplar. Tabi, Javascript, drt temel ilemi yapabilir. toplama ilemini art iaretiyle (+), kartma ilemini eksi iaretiyle (-), arpma ilemini yldz (asterisk, *) iaretiyle, ve blme ilemini dz bl iaretiyle (/) yaptrrsnz. Javascript, art iaretini grd zaman, iaretin hem sana, hem de soluna ayn anda bakar ve bulduu iki deeri, say ise toplar, alfanmerik ise sadakinin soldakinin arkasna ekler: x=3+4 Javascript, bu ilemin sonucu olarak x adl deikene 7 deerini atar. Fakat kimi zaman, bir deikenin mevcut deerini (sfr bile olsa) belirli bir miktarda arttrmak isteyebilirsiniz. Yani Javascripte xin mevcut deerine 3 ekle! demek isteyebilirsiniz. Bunu, x = x + 3 diye ifade ederiz. Eer arttrlacak miktar 1 ise, bunu daha ksa yazmak da mmkndr: ++x.
JAVASCRIPT
34
Javascript kartma ileminde de ayn kurallar uygular: x=3-4 x=x-3 --x Deikenleri 1 arttrma veya 1 eksiltmeye yarayan ksaltmann zerinde biraz duralm. lerde bol bol rneklerini greceimiz gibi, Javascript programlarnzda baz deikenleri saya olarak kullanmak isteyebilirsiniz. Bir iin sonuna geldiimizi bilebilmek iin, diyelim ki 12 kiilik bir adres listesini Javascripte okutup, sayfaya bir tablo izdiriyorsak, Javascripte listenin sona geldiini belirtebilmek iin saya rakam 12 veya 0 oldu ise durmasn emretmek zorundasnz. Bu durumda saya olarak kullandnz deikenin deerini, her adres okunduunda 1 arttrmak veya 1 eksiltmek, en kestirme yoldur. Diyelim ki, xin orijinal deeri 12. Javascript x-- veya --x ilemini grd anda, 12den 1 kartacak ve xin yeni deeri olarak 11i atayacaktr. Ayn ekilde ilk deer sfr ise, x++ veya ++x ilemini grd anda xin yeni deerini 1 yapacaktr. Toplama ve kartma ilemlerinde yapabileceiniz baka bir ksaltma ise yle yazlr: x = x + y ilemini ksaltmak iin x += y x = x - y ilemini ksaltmak iin x -= y Bu blm bitirmeden nce, bir saynn deerini negatif yapmaktan da sz edelim. Bir deikene negatif deer atamak iin, saynn nne eksi iareti koymanz yeter: x = -5 gibi. Bir deikene baka bir deikenin deerini negatif olarak atamak istiyorsanz, x = -y gibi yazabilirsiniz. y deikeninin deeri zaten negatif ise, xe atanan deer pozitif olur. Belki belirtmek bile gerekmez ama, Javascript, bl iaretinin solundaki sayy, sandaki sayya bler; yldz (asterisk) iaretinin sandaki ve solundaki saylar birbiri ile arpar.
JAVASCRIPT
35
Javascript, alfanmerik deerlerle kartma, arpma ve blme ilemleri yapmaz; sonucun yerine NaN (Not a Number, Say Deil) yazar. Karlatrma lemleri: Javascript dahil, btn bilgisayar programlarnn ortak zellii, programn bir noktada karar vermesidir: Filanca deiken u deerde ise, falanca deiken ile unu yap; o deerde deil de, bu deerde ise bunu yap! gibi. Bu tr komutlarda Javascript, szn ettiiniz deikenin deerini bulup, onu verdiiniz bir baka ltle karlatracak ve varaca sonuca gre emrettiiniz ii yapacaktr. Dolaysyla Javascriptte bir takm karlatrma ilemlerine ihtiyacnz var demektir. Javascriptin karlatrma operatrleri genellikle if (eer..ise) ifadesiyle birlikte kullanlr; ve bu soruyu soran satra true (doru) veya false (yanl) sonucunu verir. nce, bu ilemleri yaptrtan operatrleri ve ilevlerini sralayalm: == Eit operatr. aretin sanda ve solundaki deerlerin eit olmas halinde true (doru) sonucunu gnderir. != Eit deil operatr. aretin sanda ve solundaki deerlerin eit olmamas halinde true (doru) sonucunu gnderir. > Byktr operatr. Soldaki deer, dadaki deerden byk ise true (doru) sonucunu gnderir. < Kktr operatr. Soldaki deer, dadaki deerden kk ise true (doru) sonucunu gnderir. >= Byk veya eit operatr. Soldaki deer, dadaki deerden byk veya bu deere eit ise true (doru) sonucunu gnderir. <= Kk veya eit operatr. Soldaki deer, dadaki deerden kk veya eit ise true (doru) sonucunu gnderir.
JAVASCRIPT
36
Daha sonra rneklerini greceiz; ve karlatrma ileminden sonra ne olduunu, Javascriptin nasl bir yol izlediini ele alacaz. imdi sadece byle bir karlatrma ileminde nasl sonu verdiini grmekle ynetinelim. Dz yaz programnzda u HTML kodunu yazn ve karsilastirma1.htm adyla kaydedin:
<HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> <TITLE>Javascript'te Mukayese</TITLE> <SCRIPT LANGUAGE="Javascript1.2">  </SCRIPT> </HEAD> <BODY> <PRE> <SCRIPT LANGUAGE="Javascript1.2">  </SCRIPT> </PRE> </BODY>
JAVASCRIPT
37
</HTML>
Bu kod bir tarafta akken, oluturduunuz dosyay Browserda an ve sonuca bakn; sonra kodunuzda x, y ve z deikenlerinin deerini deitirerek, Browsera sayfay yenilettirin; sonucun nasl deitiini inceleyin. Javascriptin sonu true (doru) ise nasl ilerlediini, sonu false (yanl) ise nasl ilerlediini daha sonra ayrntl olarak greceiz. Fakat derhal renmeniz gereken kural burada belirtelim: Javascript, karlatrma sonucu doru ise, karlatrma komutundan sonraki ilk emri (veya emir grubunu), deilse bir sonraki emri (veya emir grubunu) icra eder. Bunun ayrntlarn da ele alacaz. imdilik sadece bu kural bir kenara yazn! Bu konuyu bitirmeden, bir de ne ile neyi karlatrabileceinizden sz edelim. Javascript 1.0de elmalarla (saylarla) armutlar (alfanmerik deikenleri) karlatrabilir ve doru sonucunu verebilirdi. Yani, Javascript 1.0 asndan 7 ile 7 eitti; Javascript nce karlatrlan deikeni sayya evirip eviremeyeceine bakar; evirebiliyorsa, karlatrmay yapard. Daha sonraki srmlerinde durum deiti; Javascripti tasarlayanlar bu evirme ilemini programcya braktlar; dolaysyla Javascript elmalarla armutlar ayrteder oldu! Alfanmerik lemleri: Javascriptin alfanmerik deikenlerin deerleri ile sadece toplama ilemi yaptn sylemitik. Bu durumda buna toplama deil birletirme, ekleme ilemi denir. Aadaki kodu dz yaz programnzla oluturup, birlestir.htm adyla kaydederseniz ve Browsernzda incelelerseniz, Javascriptin alfanmerik deerleri nasl birletirdiini grm olursunuz:
<HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> <TITLE>Javascript'te Ekleme</TITLE> </HEAD>
JAVASCRIPT
38
<BODY> <PRE> <SCRIPT LANGUAGE="Javascript1.2">  </SCRIPT> </PRE> </BODY> </HTML>
Bu dosyada, iki tr yazdrma komutu kullandmza dikkat ediyor musunuz: document.writeln() ve document.write(). Bu iki komut arasndaki fark bulabilir misiniz? (pucu: document.write() ynteminde satrba yaptrtmak iin \n kullanyoruz!)
JAVASCRIPT
39
Javascript, alfanmerik deerlere dier aritmetik ilemleri yapamaz. Buna karlk, Javascript saylarla yapt btn karlatrma ilemlerini alfanmerik deikenlerle de yapar ve doru veya yanl sonucunu bildirir. Daha nce kaydettiiniz karsilastirma1.htm dosyasn dz yaz programnda an ve deikenleri tanmladnz blmn yle deitirin:
x = "Ali" y = "Ali" z = "Veli"
Sonra bu dosyay, karsilatirma2.htm adyla kaydedip, Browserda inceleyin; deikenlerin deerini deitirip, yeniden inceleyin ve ne sonu aldnza bakn. artl lemler: Javascriptte karlatrma yaparken artl (..ise ..yap!) ilemler de yaptrabilirsiniz. artl ilemlerde ? (soru iareti) ve : (iki nokta stste) iaretlerini kullanrsnz. Karsilastirma2.htm dosyasnn btn document.write.. kodlarn silin ve yerine u iki satr yazarak, karsilastirma3.htm adyla kaydedin.
sonucMsg = (y==x)?"y degiskeni x degiskenine esit!" : "y degiskeni x degiskenine esit degil!" alert(sonucMsg)
Kod dosyas dz yaz programnda akken, karsilastirma3.htmi Browserda an. Uyar kutusunda, iki deikenin eit olmas arti halinde grntlenmesini istediiniz mesaj greceksiniz. Dosyada deikenlerin deerini deitirerek, sonucu inceleyin. Bunu salayan artl ilem komutu blmden oluuyor: artn doru olup olmadn sorguladnz, soru iaretine kadar olan karlatrma blm; iki nokta stste iaretine kadar olan art doru ise uygulanacak blm, sonra satr sonuna kadar olan art yanl ise uygulanacak blm. Yukarda, Javascript bir karlatrma yaptktan sonra karlatrma sonucu doru ise, karlatrma ileminden sonraki ilk komutu icra eder demitik. Burada da, x deikeni ile y deikeni ayn olduu zaman, soru iaretiyle biten karlatrma ileminden hemen sonraki
JAVASCRIPT
40
ilk komut (veya ifade) seiliyor; deikenler ayn olmad taktirde, iki nokta stste iaretinden sonra gelen komut (veya ifade) seiliyor. Mantksal lemler: Javascript, karlatrma ilemini Boolean (.. ve .. doru ise ... yap!) mantksal ilemlerini kullanarak da yapabilir. Burada, Boolean mantndan ksaca sz edelim. imdi, bir baba, kz Aye ile olu Aliye diyor ki, kiniz de snfn geerseniz, bu yl sizi Antalyaya deniz kenarnda bir ay geirmek zere teyzenizin evine gndereceiz! Ali snfn geer, Aye geemezse iki ocuk da teyzelerine gidemeyecekler; Ali snfn geer, Aye de geerse, iki ocuk da Antalyaya gidecek; Ali de, Aye de snflarn geemezse, iki ocuk da yaz tatilini oturduklar yerde geirecekler. Javascriptin Boolean mantn sorgulama iaretleri unlardr: && || ! Mantksal Ve: iki koul da doru. Mantksal Veya: ya birinci, ya da ikinci koul doru. Mantksal Deil: Tek koula uygulanr; koul doru ise sonu false (yanl), koul yanl ise sonu true (doru) olur. Bu mant, imdi Boolean ifadesi haline getirelim: Ali=geti && Aye=geti : ocuklarn ikisi de tatile gidiyor. Ali=geti || Aye=geti : ocuklarn ikisi de tatile gidemiyor. !(Ali=geti) : ocuklarn ikisi de tatile gidemiyor. !(Aye=geti) : ocuklarn ikisi de tatile gidemiyor.
JAVASCRIPT
41
lemlerde Sra: Javascriptte ilemler yukardan aa ve soldan saa yaplr, ama aritmetik ilemlerde bu kuraln baz istisnalar vardr. Javascript kodlarnzda beklediiniz sonular alamyorsanz, nce ilemlerinizi ilem srasna uygun yazp yazmadnz kontrol edin. Javascriptte ilemlerin genel sras yledir: Atama ilemleri, artl ilemler, mantksal ve/veya/deil ilemleri, karlatrma ilemleri, aritmetik ilemler, fonksiyonlar. Javascriptte aritmetik ilemler ilke olarak soldan saa doru yaplr. rnein x=a*b+c denklemi zlrken, nce a ile b arplr, elde edilecek sayya c eklenir. Fakat bir denklemde parantez iine alnm ifade varsa, Javascript nce parantezin iini halleder. rnein x = a * (b + c) denklemin nce b ile c toplanr, elde edilecek say a ile arplr. Eer bir ilemde Javascript aritmetik ilemleri sraya sokmak zorunda kalrsa, toplama, kartma, arpma ve blme srasyla yapar. lemlerin sras konusunda kukunuz varsa, mmkn olduu kadar ok parantez kullann.
Program Ak Denetimi
Javascript veya bir baka programlama dili ile yazacanz programda, zaman zaman programn akn, programa brakmanz gerekir. Programc olarak siz, programn izleyecei alternatif yollar belirlersiniz; fakat bu yollardan hangisini izleyeceine, sizin koyduunuz artlar deerlendirerek program kendisi karar verir. Programcln gerek anlamda zevki de bu noktada balar. imdi Javascriptin programn akn kontrolde kullanacanz unsurlarn tanmaya balayalm.
JAVASCRIPT
42
Aada yazacamz iki Javascript kodunda Browsera, ziyaretinin ekranndaki bir form unsurunun iini doldurtma tekniini kullanacaz. Henz ele almadmz bu tekniin ayrntlarn FORM nesnesinin zelliklerine deinirken ele alacaz. If (Eer .. ise) Javascript programnn, bir deikenin deerine gre ynlenmesini salayan ilk arac, if (eer) ifadesidir. te size program akn 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 + " setiniz! Bravo!" } if (secilenYemek == "Yogurtlu Iskender") { document.tarifForm.tarif.value=secilenYemek + " setiniz. Sizi tebrik ederiz!" } if (secilenYemek == "Biber Dolma") { document.tarifForm.tarif.value=secilenYemek + " setiniz. Zevkinize hayranz!" } if (secilenYemek == "Yaprak Sarma") { document.tarifForm.tarif.value=secilenYemek + " yapmas biraz zordur; ama ok lezizdir" } }
JAVASCRIPT
43
</SCRIPT> </HEAD> <BODY> <BR> <FORM NAME="tarifForm"> <P>Hangi yemein tarifini istiyorsunuz? Ltfen istediiniz yemei sein:</P> <SELECT NAME="yemeklistesi" onChange="goster(this)"> <OPTION SELECTED> Bir yemek seiniz <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 adyla kaydedin ve Browserinizde an. imdilik, yemek tariflerini vermediimize aldrmayn. Daha sonra bunu yapmann yolunu da greceiz. Bu sayfadaki Javascript kodunda goster() isimli bir fonksiyon var; bu fonksiyon kendisini harekete gemeye aran nesnenin kendisine secme ad altnda bir takm bilgiler gndermesini art kouyor. Sayfamzda yer alan ve ad tarifForm olan FORM nesnesi, kendi unsurlarndan SELECT nesnesindeki her deiiklikte, goster fonksiyonunu harekete geiriyor. yemeklistesi isimli SELECT etiketinin iindeki onChange (deiiklik halinde) isimli Javascript komutu, bir metodtur ve burada kendi unsurlarn ve deerlerini topluca gonder fonksiyonuna gnderecektir. (imdilik bu metod ve metodu kullanrken yazdmz THIS ifadesi zerinde durmayn. Sras gelecek.) Fonksiyonun banda iki deiken tanmlyoruz: endeks ve secilenYemek. Endeks deikeninin deeri, fonksiyona gnderilecek nesnelerden birinden alnyor. Bu nesne selectedIndex adn tayor. selectedIndex denen eyin, HTML belgesinin Form
JAVASCRIPT
44
nesnesinin bir zellii (property) olduunu belirtmekle yetinelim; ayrntlarn Form nesnesinin zelliklerini incelerken greceiz. Bir Formun iinde SELECT nesnesi varsa, Browser mevcut SELECT gelerini dizi-deiken yaparak 0dan itiberen numaralar ve kullancnn setii SELECT gesinin numaras selectedIndex adyla bir kenara kaydeder. Fonksiyonumuzdaki ikinci deiken olan secilenYemek deikeni de deerini, SELECT nesnesinin seilen gesinin metninden alyor. imdilik bu tanmlar sizin iin anlam ifade etmiyorsa, zerinde durmayn; iki deikenimize ziyaretinin sayfada yapaca tercihe bal olarak deerler kazandrdmz dnn. imdi dikkatimizi u satra verelim:
if (secilenYemek == "Adana Kebap")
Yukarda rendiimize gre, bu satrdaki ifadede Javascripte ne demi oluyoruz? Ey Javascript, secilenYemek adl deikenin deerine bak; orada grdn metin, Adana Kebap alfanmerik deeri ile ayn ise, bu satrdan hemen sonraki ii yap! ayn deilse, ber sonraki satra git, oradaki ii yap! diyoruz. Buradaki ayn ise ifadesini, == iaretleriyle saladmz biliyorsunuz; hemen sonraki i ifadesinin de bir karlatrma komutu doru sonu verirse, Javascriptin bu karlatrma komutundan hemen sonra gelen satrdaki ii yapmasndan kaynaklandn hatrlyorsunuz. Ziyareti Adana Kebap seeneini seti ise, Seim, Adana Kebap ise sorgulamasnn sonucu doru olacak, ve Javascript
document.tarifForm.tarif.value=secilenYemek + " setiniz! Bravo!"
komutunu icra ederek, ekrana secilenYemek deikeninin deeri yazacak ve buna setiniz! Bravo! kelimelerini ekleyecektir. Sorgulamann sonucu doru deil ise, yani ziyareti Adana Kebap sememise, Javascript bir sonraki satrna atlayacaktr. Burada bir sonraki satr ile u anda iinde bulunduumuz if ifadesinin alan ve kapanan ssl parantezle belirlenen snrnn bittii yeri kastediyoruz. Yazma kolayl bakmndan ve atmz parantezi kapattmzdan emin olmak iin ssl parantezleri ayr satrlara yazarz. Ama bu art deildir. Yani istese idik, burada satra yaylan sonraki satr aslnda tek satrda yazlabilirdi.
JAVASCRIPT
45
Javascriptin, ziyaretinin Adana Kebap sememesi halinde atlayaca bir sonraki satrda da bir if ifadesi var. Javascript bu kez bu sorgulamann sonucunu alacak ve bu sorgulama doru sonu verirse (yani ziyareti Yourtlu skenderi semise), hemen sonraki satr, sememise, bir sonraki satr icra edecektir. Bylece drt sorgulamay da bitiren Javascript, almasna son verecektir. Taa ki, ziyareti, yeni bir tercih yapncaya kadar. SELECT etiketinin iindeki onChange (deiiklik halinde) ynlendiricisi, bu kutuda olacak her deiiklikte, formun SELECT nesnesinin gelerini topluca gosder fonksiyonuna gnderecektir. Bir if sorgusunun iinde bir veya daha fazla if bulunabilir. Byle i-ie if ifadesi yazarsanz, herbirinin icra alannn balad ve bittii yeri gsteren ssl parantezlerine dikkat edin. If ... Else (Eer .. Dier) Kimi zaman bu kadar ok seenee tek tek if ifadesi yazmak gerekmeyen durumlar olabilir. Javascripte Eer u deikenin deeri u ie unu yap, dier btn durumlarda ise unu yap! demek istiyebilirsiniz. If... Else ifadesi ile bunu salarz. denetim1.in drt if ifadesini de silin ve yerine unlar yazn:
if (secilenYemek != "Adana Kebap") { document.tarifForm.tarif.value=secilenYemek + " tarifini veremiyoruz!" } else { document.tarifForm.tarif.value="Adana Kebap Tarifini asada sunuyoruz:" }
Bu sayfay denetim2.htm adyla kaydedin ve Browserinizde an. imdi dikkatimizi u satra verelim:
if (secilenYemek != "Adana Kebap")
JAVASCRIPT
46
Yukarda rendiimize gre, bu satrdaki ifadede Javascripte Ey Javascript, secilenYemek adl deikenin deerine bak; orada grdn metin, Adana Kebap alfanmerik deeri ile ayn deil ise, bu satrdan hemen sonraki ii yap! demi oluyoruz. Buradaki ayn deil ise ifadesini, != iaretleriyle salyoruz; hemen sonraki i ifadesinin de bir karlatrma komutu doru sonu verirse, Javascriptin bu karlatrma komutundan hemen sonra gelen satrdaki ii yapmasndan kaynaklandn hatrlyorsunuz. Ziyareti Adana Kebap seeneini semedi ise, Seim, Adana Kebap deil ise sorgulamasnn sonucu doru olacak, ve Javascript
document.tarifForm.tarif.value=secilenYemek + " tarifini veremiyoruz!"
komutunu icra ederek, ekrana secilenYemek deikeninin deeri yazacak ve buna tarifini veremiyoruz! kelimelerini ekleyecektir. Sorgulamann sonucu doru deil ise, yani ziyareti Adana Kebap semise, Javascript sorgulamann sonucunun dier snfna girdiini anlayacak ve Else ifadesini icra edecektir. Yani ekrana Adana Kebap Tarifini aada sunuyoruz: yazacaktr. (Tarifi vermediimizin zerinde de durmayn. lerde bu tr uzun ifadeleri Javascript ile sayfaya yazdrmann yollarn da greceiz.) zetlersek, if ifadesinde ileri srdnz art doru ise ilk komut dizisi, doru deilse Else blmndeki komut dizisi icra edilir.
Program Dng Denetimi

Javascriptte bazen iler yukardaki rnekte olduu gibi ak ve belirgin artlara bal ve bir kere icra edilecek trden olmayabilir. Javascript, bir ii belirli (veya kendi belirleyecei) kere yapmasn isteyebilirsiniz. Bu tr tekrarlanan ileri Javascripte bir ka satrlk bir kodla yaptrtmak ou kez bizi sayfalar dolusu kod yazmaktan kurtarr. for dngs Diyelim ki, sitenizde santigrad dereceyi fahrenhayt dereceye eviren tablo sunmak istiyorsunuz. 0dan 100e kadar btn santigrad derecelerin (fahrenhayt = santigrad * 9 / 5
JAVASCRIPT
47
+ 32 ) formlyle karln bulup, bir tabloya yazabilirsiniz. Hesab yapmann glnn yan sra, HTML kodunuz tam 100 adet <TR><TD>..</TD><TD>..</TD></TR> kodu ierecektir. Oysa bunu iki satrlk bir Javascript kodu ile Browsera yaptrabilirsiniz. Aadaki kodu, dongu1.htm adyla kaydedin ve Browsernzda an:
<HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> <TITLE>Javascript'te dng</TITLE> <SCRIPT LANGUAGE="Javascript1.2">  </SCRIPT> </HEAD> <BODY> </BODY> </HTML>
Burada for ifadesiyle tekrarlanan bir dng oluturuyoruz. for dngsne gemeden Javascripte, sayfaya bir ka HTML komutu gndermesini bildiriyoruz; bu komutlar sayfada bir tablo balatyor; tablonun birinci srasna iki kutu oluturarak, ilerine Santigrad ve Fahrenhayt yazyor. imdi asl, for ifadesi zerinde duralm: for ile oluturacamz dng, bir sayaca gre ilerler. Burada saya olarak santigrad adnda bir deiken oluturuyoruz, Javascripte Santigrad adnda bir deiken
JAVASCRIPT
48
yap, iine 0 deerini koy; ve bu deiken 100den kk veya 100e eit ise baz iler yap! demi oluyoruz. Bu arada Javascript, dier dillerin benzeri komutuna gre bize bir kolaylk salyor: Javascriptin her dng yapaca iten sonra santigradn mevcut deerine 1 eklemesini ayn satrda ve kolayca salyoruz. for ileminin baladn belirten alan ssl parantezden sonra Javascripte her dngde yapaca iki ii bildiriyoruz:
fahrenhayt = santigrad * 9 / 5 + 32
Bu komutla Javascript, fahrenhayt adn verdii bir deiken oluturuyor ve ilk deer olarak, santigrad deikeninin deerini 9 ile arpp, 5e blyor, bulduu sayya 32 ekliyor. ilk turda, santigrad deikeninin deeri 0 olduuna gre, fahrenhayt deikeninin deeri 32 olarak bulunuyor; ve Javascript ikinci ie geiyor:
document.writeln("<TR><TD>" + santigrad + "</TD><TD>" + fahrenhayt + "</TD></TR>")
Bu i ise, sayfaya bir tablo sras ile bir tablo kutusu gndermek; bu kutunun iine santigrad deikeninin deerini yazmak; sonra bu kutuyu kapatp yeni bir kutu amak; bu kutunun iine fahrenhayt deikenini deerini yazarak, kutuyu ve tablo srasn kapatmaktan ibaret. Javascript, birinci turu bitirdiinde, for komutunun tayin ettii lde saya deikeninin arttrp veya azaltp, ikinci tura balayacaktr. Bu ne zamana kadar byle devam edip gidecektir? Saya deikeninin deeri, tayin ettiiniz snna ulancaya kadar. Nedir bu snr: santigrad deikeninin deerinin 100e eitlenmesi. Bu kadar uzun bir tablo vermek istemiyorsanz, bu deeri istediiniz bir sayya indirebilirsiniz ve sayac birer birer arttrma yerine, mesela beer beer attrabilirsiniz. Sayac beer-beer arttrmak iin for komutunun son argmann santigrad +=5 eklinde yazmalsnz. artl dng: while Javascript kodu yazarken yle durumlar olabilir ki, programn saya deikeninin her deeri iin yapmasn istediiniz ii yapmasndansa, sadece belirli bir art karlanyorsa
JAVASCRIPT
49
yapmasn tercih edebilirsiniz. Bunu while (...iken) ifadesiyle salarz. Bu yntemle Javascripte filanca ii yap, ama falanca art varsa (veya yoksa) demi oluruz. while ile kuracanz dngnn art roln oynayacak deikenin daha nceden oluturulmas, ieriinin baka bir yntemle belirlenmesi ve deitirilmesi gerekir; for dngsnn aksine while artl dngs bunu sizin iin otomatik olarak yapmaz. Ayrca koyduunu arta bal olarak, while dngs srasnda yaplmasn istediiniz i hi yaplmayabilir. Diyelim ki, bir elektronik ticaret siteniz var; ve mteri aday ziyaretileriniz, baz mallar Web sayfanzda toptan smarlayabilirler. Byle bir siparii alabilmek iin, o maldan stokunuzda yeterli miktarda bulunmas gerekir. Aadaki kodu dongu2.htm adyla kaydederseniz, smarlanan bir miktar zerinden ka sipari karlayabileceini sayfanz otomatik olarak hesaplayacaktr.
<HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> <TITLE>Javascript'te dng</TITLE> <SCRIPT LANGUAGE="Javascript1.2">  </SCRIPT> </HEAD> <BODY> <PRE> <SCRIPT LANGUAGE="Javascript1.2"> function hesapla(miktar) { var endeks, talepMiktar, satis
JAVASCRIPT
50
endeks=miktar.selectedIndex talepMiktar=miktar.options[endeks].text satis = 0 while (talepMiktar < stok) { stok -= talepMiktar satis++ } document.miktarForm.sonuc.value=talepMiktar + " ton itibariyle "+ satis + " adet sipari iin stokumuz var!" } </SCRIPT> </HEAD> <BODY> <BR> <FORM NAME="miktarForm"> <P>Alacanz miktar ltfen seiniz:</P> <SELECT NAME="miktar" onChange="hesapla(this)"> <OPTION SELECTED> Miktar seiniz <OPTION>100 <OPTION>200 <OPTION>300 <OPTION>400 </SELECT> <P></P> <INPUT NAME="sonuc" VALUE="" SIZE=55> </FORM> </BODY> </HTML>
Bu kodun da bir ok unsuru zerinde durmayalm; bizi dng asndan ilgilendiren blmlerini ele alalm. Grdnz gibi deiken tanmlyoruz; stok deikeninin deerini biz veriyoruz; miktarTalep deikeni ise sayfamzdaki Form nesnesinin miktar adl SELECT nesnesinden alnyor. Bu arada, ilemi yapan fonksiyonun iinde sats adl bir deiken oluturuyoruz ve deerinin, dngnn iinde birer birer artmasn salyoruz. Bu
JAVASCRIPT
51
kodun mant, mterinin sipari verecei miktarda, stokumuzdan ka adet toptan sat yaplacan bilmek olduuna gre, Javascript, dngnn iinde alrken yle dnecektir: Benden, stok deikeninin deerinden talepMiktar deikeninin deeri kadar kartmam; sonra da sats adl deikenin deerini bir adet arttrmam isteniyor. Ama bunu ancak ve sadece talepMiktar deikeninin deeri stok deikeninin deerinden az iken yapabilirim! Nitekim Javascript, talepMiktar deikeninin deeri stok deikeninin deerine eit veya fazla hale geldii anda, dngye son verecek ve while ifadesinin dna kacaktr. Dngden kt anda Javascriptin yapaca i ise ekrandaki Formun sonuc adl kutusuna kendisine bildirilen metni yazmaktan ibaret! do...while while dngsnn, koyduunuz arta gre bazen hi icra edilmeyebileceini syledik. Yukardaki rnekte mteri yle bir rakam verir ki, sipari miktar stoktan yksek olduu iin, hesaplama hi yaplmaz ve mteriye ka parti sevkiyat yapacamz deil, sevkiyat yapamayacamz bildiririz. Fakat baz durumlarda dngnn bir kere ilemesi, fakat ikinci ve daha sonraki seferler iin bir deikenin deerine bakmas gerekebilir. Akla gelecek ilk rnek, bir elektronik ticaret sitesinde, mteriye bir mal almak isteyip istemedii sorusudur. Bu soruyu bir kere sormak zorundayz; mteri bu soruya Hayr! yantn verirse, al-veri sorusunu soran dngy durdurmamz gerekir; mteri alverie devam etmek istediini bildirirse, dng devam edecek ve mteriye al-veri sorusu yeniden sorulacaktr. Bunu, do...while (Yap ... iken) komut grubuyla yapabiliriz. Do (Yap) komutu bir kere icra edilir ve ondan sonra while (..iken) art aranr. Bu art yerine geliyorsa, Dodaki komut yeniden icra edilir, artn deiip deimediine yeniden baklr.
JAVASCRIPT
52
Dz yaz programnda aadaki kodu yazn ve dongu5.htm adyla kaydedin:

<HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> <TITLE>Javascript'te Switch</TITLE> <SCRIPT LANGUAGE="Javascript1.2">  </SCRIPT> </HEAD> <BODY> </BODY> </HTML>
Bu programda Browsern kullancdan bilgi alma arac olan Prompt kutusunu kullanyoruz; mteri adayna bir gmlek almak isteyip istemediini soruyoruz. Buradaki bir kelimesi, geici deikenimizden alnyor; mteri ikinci al-veriini yapmaya karar verirse, bu deikenin deerini Bir baka olarak deitiriyoruz. Bu programda, mteriziyaretinin ilk Evet yant halinde sayfamzda yaplabilecek siparii alma, fiyat bildirme, onay isteme ve benzeri ilerin hi biri yok; Javascript sadece ayn soruyu yeniden soruyor; taa ki ziyaretci Prompt kutusuna Evet dnda bir ey yazncaya kadar. Do komutu, while blmne yazdnz art deiinceye kadar icra edilecektir. (Tabi, buradaki rnekte btn
JAVASCRIPT
53
sre, mteri-ziyaretinin Prompt kutusunda Cancel (ptal) dmesine basmasyla da sona erecektir; ama bu Prompt kutusunun bir zelliidir.) Break ve Continue artl dngde, tekrar eden i, artn yerine geldii noktada kendiliinden kesilecektir. Ayn otomasyonu for dngsnde break (kes) ve continue (devam et) komutlaryla biz de salayabiliriz. Javascript, Break ile karlat anda dngy keser ve icraata dngden sonraki ilk ifadeden devam eder. Continue ise Javascriptin dngnn o andaki admn durdurup, dngnn bana dnmesini salar; dng batan devam eder. dongu1.htm adyla kaydettiiniz dosyada, fahrenhayt hesaplattrdnz komutla, bunu HTML belgesine yazdrdnz komut arasna u satr koyarak, dosyay, dongu3.htm adyla saklayn.
if (santigrad == 13) continue
Browserda incelediinizde, Fahrenhayt derecenin 13 santigrad derece iin hesaplanmadn greceksiniz. Eklediiniz satrdaki continue komutu, santigrad 13e eitlendiinde, dngy olduu yerde keserek, bir sonraki admdan yeniden balatt. Eklediiniz bu satrdaki continue kelimesini break diye deitirir, dosyay dongu4.htm adyla kaydeder ve sayfay Browserda aarsanz, bu kez listenin 12de kesildiini greceksiniz; nk break komutu dngy olduu yerde durdurup, Javascripti bir sonraki admdan devama zorlad. Switch Javascriptin switch (deitir) komutu, programn bir deikenin deerine gre, belirli bir ii yapmasn salar. Szgelimi, elektronik sat sitenizde, mteri-ziyaretiniz, alaca gmlein beden lsn seecek ve siz de bu lye gre, siparii kaydedecek ve mteriye sipariin alndn bildireceksiniz. Javascript programnn mant yle olacak:
JAVASCRIPT
54
Mteri byk bedeni seti ise Byk bedenle ilgili ileri yap; kk bedeni seti ise kk bedenle ilgili ileri yap; orta bedeni seti ise orta bedenle ilgili ileri yap!" Javascripte switch komutu, bir veri kmesi gsterilerek verilir ve bu veri kmesi iinde hangi deere gre ne yapaca case (halinde) ifadesiyle bildirilir: Deerin A olmas halinde u ii yap; deerin B olmas halinde u ii yap! gibi. imdi u kodu dzyaz programnda yazn ve dosyay dongu6.htm adyla kaydedin:
<HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> <TITLE>Javascript'te Switch</TITLE> <SCRIPT LANGUAGE="Javascript1.2">  </SCRIPT> </HEAD> <BODY> </BODY> </HTML>
Bu sayfay Browserda atnzda, karnza bir diyalog kutusu gelecektir. <js003.tif ve js004.tif -- Resimalt: Javascriptin prompt komutu ile IEnin ve Netscapein at diyalog kutular, balklar dnda, ayndr.> Bu kutuda varsaylan deer olarak Orta Boy l iin O harfi bulunuyor. isterseniz, komutta deiiklik yaparak. bu kutuya istediiniz deeri girebilirsiniz. Javascript, bu kutunun salayaca deeri, olcu ad altnda, switch komutuna iletiyor; switch komutu da olcu bilgisinin ayr halinde ayr yant veriyor. Byle bir program gerek hayatta uygularken, yaplacak i olarak sadece bir Alert kutusuyla yetinmeyerek, sz gelimi bu noktada Javascripti farkl fonksiyonlara sevkederek, diyelim ki bir sipari belgesi hazrlatabilirsiniz. Bu rnekte Javascript, olcu bilgisinin farkl hallerinde sadece farkl uyar kutular vermekle yetiniyor. Bu programda dikkatinizi eken bir dier nokta, her bir hale ilikin case grubunda yer alan break komutu olmal. Olcu isimli switch dngsnn ii gerekli mesaj verdikten sonra bittiine gre, Javascriptin dier caseleri deerlendirmesini nlememiz gerekir; bunu break ile salyoruz. Ayrca bu programda, ziyareti ile ilikilerde gznnde tutmanz gereken bir ilkenin uygulandn gryorsunuz: ziyaretinin byk beden iin byk ya da kk harf B tuuna basacan bilmediimiz iin, kendimizi her iki ihtimale kar da hazrlyoruz. yi bir programclk teknii, zellikle ziyaretilerden girdi beklediiniz hallerde, byk harf-kk harf durumlarna kar hazrlkl olmaktr.
JAVASCRIPT
56
Javascriptte Fonksiyon
Javascript, klasik HTMLin yapamad eyler yapabilir; ziyaretiden veya ziyaretinin Browser programndan alaca bir bilgiyi deerlendirerek bir dizi ilem yapabilir; ziyaretiyi sitemizde belli bir sayfaya ynlendirebilir; ksaca sayfalarmza ziyareti ile etkileme imkan kazandrr. Yukardaki eitli rneklerde grdnz ilerin ou bir kere bavurulan ilerdi; fakat ou zaman sayfanzdaki bir Javascript ileminin defalarca yaplmas gerekebilir. Hatta yle ilemler olur ki, Javascript, baka bir ii yapmadan nce, mutlaka bu ilemi yapmak isteyebilir. Bu tr tekrarlanan ileri, bu iin yaplmas iin gerekli bilgi kmesi ve komutlarla birlikte bir grup haline getirsek ve bu gruba bir isim versek; sonra bu i kmesine ihtiya olduu yerde Javascripte Filanca isimli grubu al; iinde belirtilen ileri yap, sonra sonucu bu noktaya bildir! desek; acaba ilerimiz daha kolay hale gelmez mi? te bu tr, bir isim altnda toplanm ilem paketlerine Function (ilev) ad verilir; Javascript kendisine u fonksiyonu yap! dediiniz noktada yapmakta olduu durdurur ve fonksiyon paketindeki ileri yapar; bu paket ortaya bir deiken veya sonu kartyorsa, o bilgiyi edinmi olarak fonksiyon iin yarm brakt ileme geri dner. Fonksiyon yazmanzdaki birinci sebep, byk bir ihtimalle, Javascripte, Fonksiyonun salayaca bilgiyi kazandrmaktr. Genel hatlaryla fonksiyon, u formle gre yazlr:
function fonksiyonun_ad (argman1, argman2, ... argmanN){ ilemler }
JAVASCRIPT
57
Fonksiyonlar mutlaka SCRIPT etiketinin iinde yer alr. Daha sonra kullanlacak (arlacak) olsa da btn fonksiyonlarnn HTML dosyasnn HEAD blmne koymanz, Browsern Javascript yorumlaycs bakmndan srat salar. yi bir programlama teknii, bir sayfada gerekli btn fonksiyonlar, altalta, HTMLin HEAD blmnde yer alacak bir SCRIPT etiketi iinde beyan etmek; sonra ihtiya olduu yerde yeni bir SCRIPT etiketi koyarak bu fonksiyonu greve armaktr. Bir fonksiyon, kendisini greve aran komuttan veya fonksiyondan veri kmesi (argument) alabilir. Buna bir deerin fonksiyona geirilmesi, ulatrlmas, verilmesi denilir. Bir fonksiyon, bir ya da daha fazla argman alabilir. Fonksiyonun argmanlar, bir isim altnda toplanr ve bu bilgi kmesinin blmlerine bu isimle atfta bulunulur.
Fonksiyona deer gnderme ve deer alma

Bir fonksiyon ile Javascript programnn dier ilemlerinin ilk ilikisi fonksiyona bir deer gnderme ve ondan bir deer almaktr. Bir fonksiyon, yapt iin sonucu olarak, kendisini greve aran komuta veya fonksiyona kendi adyla bir deer verebilir. Bir rnek zerinde dnmeye balayalm. Ziyaretinizden telefon numarasn yazmasn istiyorsunuz. Ziyareti de sayfada bir INPUT kutusuna veya PROMPT diyalog kutusuna telefon numarasn yazyor. Bu numaray, sayfada baka bir programda veya blmde kullanmadan nce, gerekten doru yazlp yazlmadn irdelemek istiyorsunuz. Ziyaretinin verdii telefon numarasn bir fonksiyona havale edebilirsiniz; bu fonksiyon telefon numaras arzu ettiimiz biimde yazlmsa olumlu, yazlmamsa olumsuz yant verebilir. Btn yapacamz ey, ziyaretiden alacamz bilgiyi, bu fonksiyona argman olarak geirmekten ibaret; fonksiyonun sonu olarak verdii deer doru ise ileme devam edeceiz, deilse ziyaretiyi uyararak, doru bilgiyi girmesini isteyeceiz. imdi dz yaz programnzda u kodu yazp, fonksiyon1.htm adyla kaydedin:
<HTML>
JAVASCRIPT
58
<HEAD> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> <TITLE>Javascript'te Fonksiyon</TITLE> <SCRIPT LANGUAGE="Javascript1.2">  </SCRIPT> </HEAD> <BODY> <PRE> <SCRIPT LANGUAGE = "Javascript1.2">  </SCRIPT> </PRE> </BODY> </HTML>
Bu sayfada, nce if(dogruMu(numara)) eklindeki ifadeye dikkat edelim. Javascript, bu noktada dogruMu fonksiyonu aracak, bunu yaparken de fonksiyona numara ad altnda bir deer geirecektir. (Bu deeri, eitli ekillerde elde edebiliriz; bir Form nesnesinde INPUT kutusundan alabileceimiz gibi, burada olduu gibi PROMPT diyalog kutusuyla da alabiliriz.) Fonksiyondan btn beklediimiz if sorgulamasna true (doru) veya false (yanl) eklinde bir karlk vermesidir. Yukarda if dngsn ele alrken,
JAVASCRIPT
60
yantn doru olmas halinde ilk blmdeki, yanl olmas halinde else blmndeki komutlarn uygulandn grmtk. imdi burada dogruMu() fonksiyondan true sonucu dnerse, sayfaya teekkr mesaj ve bilgi notu iki satr halinde yazlacak; false sonucu dnerse, ziyareti numaray doru yazmas iin uyarlacaktr. (Bu rnekte program bu noktada kesiliyor, oysa gerek hayatta bu noktada ziyaretiye bilgi girme aracnn yeniden sunulmas gerekir.) imdi fonksiyona dnebiliriz. dogruMu() fonksiyonu, kendisine grev verecek ilemden veya fonksiyondan mutlaka bir argman verilmesini istiyor. numara adyla ileme sokulacak olan bu argman, fonksiyon iin bir nesnedir. Bu arada fonksiyonumuz kendi ileri iin bir deiken oluturuyor (karakter), ve iine bo deer koyuyor (null); daha sonra kendisinden beklenen deeri iine koyaca bir deiken oluturuyor ve iine varsaylan deer olarak true kelimesini koyuyor. Aksi kantlanmad taktirde, fonksiyonu greve aran if dngsne bu deer bildirilecektir. Fakat nce fonksiyonun gerekten kendisine verilen bilgilerin, arzu edilen biime uygun olup olmadn snamas gerekir. Bu bilgiyi tutan numara nesnesi, nesne olduu iin baz zelliklere sahiptir; bu zelliklerden biri de uzunluudur. nce bu uzunluun 13 karakter olup olmadna bakyoruz. Ziyareti, telefon numarasn yazd halde parantezleri veya kesme izgisini unuttuysa, verdii bilgilerin uzunluu 13 karakterden az olacaktr, yani numara.length 13 olmayacak, durum deikenin deeri false olarak deitirilecektir. Yok, numarann karakter says 13 ise, fonksiyonumuz 13 karakteri, bir for dngs erevesinde tek tek irdelemeye balayacaktr. charAt(i) Fonksiyonlarda ve dier tr ilemlerde kullanabileceimiz bir Javascript ksaltmas, filanca yerdeki karakter diyebileceimiz charAt(i) ifadesidir. Burada i yerine herhangi bir rakam yazabilirsiniz. Bu ksaltma ancak say ya da alfanmerik deer ieren deikene veya nesneye uygulanabilir.
JAVASCRIPT
61
Buradaki rneimizde, Javascript, karakter adn verdii ve iini bo brakt deikenin deeri olarak, numara nesnesinin o anda, o admda irdeledii karakterini atamaktadr. imdi kendimizi Javascriptin yerine koyalm, ve buradaki for dngsnn birinci admnda ne yapacamz belirtelim: Hmm.. karakter deikeninin deeri olarak numara nesnesinin inci karakterini atamam isteniyor. Peki i nedir? 0. O halde karakter, nesnenin 0 numaral gesi olacaktr. Nedir bu: Alan parantez. Gzel. O halde, karakter eittir alan parantez. Sonra, eer i deikeni sfr ve karakter alan parantez ise devam etmeliymiim! kisi de doru; o halde devam. O da ne? Devam etmem gereken yerde continue komutu var. Yani, ii burada kes, for dngsnn bana git ve yeniden bala diyorlar. Peki, hadi en baa dnelim. iyi bir adet arttralm, 2 yapalm; 2, 12 olmad ve 12den kk olduuna gre devam edelim.. kinci admda Javascript, karakter deikeninin deeri olarak numara nesnesinin ikinci karakterini atayacak ve, i artk sfr olmad iin ilk continueden geri dnmeyecek ve birinci Elsei izleyen ii yapacaktr. Bu iin ilk art inin drt olmasdr. i bu anda 2 olduuna gre, Javascript bu kez hi bir continuedan geri dnmeyecek ve en sondaki parseInt() ilemlerine ulaacaktr. Ne zaman 1nin deeri drt olursa, ikinci ifin ikinci art olan drdnc karakterin kapanan parantez olup olmad irdelenecektir. Ziyaretinin verdii telefon numarasnda drdnc karakter kapanan parantez deil ise, fonksiyon kesilecek ve durum deikeninin deeri false olacak ve bu deer, fonksiyonu greve aran if dngsne bildirilecektir. Fonksiyon ayn sorguyu, dokuzuncu karakterin kesme izgisi olup olmadn belirlemek iin de yapacaktr. parseInt(i,n) Fonksiyona dikkat ederseniz, 0, 4 ve 9ncu karakterlerdeki alan ve kapanan parantez ve kesme izgisi irdelemelerinde baa dnmeyen dnglerde, Javascript en sonda if ile balayan parseInt() eklinde bir ifadeyi icra ediyor.
JAVASCRIPT
62
Javascript, kendisine alfanmerik olarak verilen bir deiken deerini tamsay (integer) veya kesirli sayya (float) evirebilir. Alfanmerik deerleri tam veya kesirli sayya evirmek iin, parseInt ve parseFloat ifadelerini kullanrz. (Javascriptin say olarak verilen deikeni alfanmerik deere (string) evirmesi iin kullanlmaya hazr bir metod yoktur; bunun iin toplama ilemi ieren bir fonksiyon yazmanz gerekir.) Her iki metotta da, evirme ileminin 10 tabanl (decimal), 8 tabanl (octal) veya 16 tabanl (hexadecimal) olymasn istediinizi, evrilmesini istediiniz alfanmerik deerden (veya bu deeri temsil eden deikenin adndan) sonra bir virgl koyarak, 10, 8 veya 16 rakam ile belirtmeniz gerekir. parseInt() metodu ile baz evirme ilemlerine rnek verirsek, parseInt(123456.3333), 123456 sonucunu verir. nk bu metod kendisine verdiiniz alfanmerik deerin iinde rakam ile art ve eksi iaretlerinden baka bir ey grd noktada durur; o noktaya kadar grd unsurlar bir tamsay deikeni olarak size geri verir. parseFloat() metoduna da bir rnek verirsek, parseFloat(123456.3333), 123456.3333 sonucunu verir. nk bu metod kendisine verdiiniz alfanmerik deerin iinde rakam ile art ve eksi iaretlerinin yan sra nokta iaretinden baka bir ey grd noktada durur; o noktaya kadar grd unsurlar bir kesirli say deikeni olarak size geri verir. Her iki metod da, evirme ilemini baaryla yaparlarsa, kendilerini grevlendiren ileme (bizim rnekte bunu bir if dngs yapyor) 1, baaryla yapamazlarsa 0 deeri dndrrler. Yani, if dngs, parsInt() metodu baarl olursa 1, baarl olamazsa 0 sonucunu alacaktr. Biliyoruz ki, if asndan 1, true-doru, 0 ise false-yanl demektir. Buradaki rnek kodda, 1, 2, 3, 5, 6, 7, 8, 10, 11, 12 ve 13nc karakterler, parseInt() metodu ile sayya evriliyor ve elde edilen saynn 0 ile 9 arasnda olup olmadna baklyor; sonu doru ise dng bir sonraki karakteri almak zere baa
JAVASCRIPT
63
dnyor; sonu yanl ise dng o naktada break ile kesiliyor, durum deikenin deeri false yaplyor ve fonksiyon bu sonucu kendisini grevlendiren ileme teslim ederek, kapanyor.
Fonksiyon ile HTML unsarlarnn ilikisi

Javascript asndan, yukardaki gibi uzun fonksiyon ile tek satrlk bir metodun fark yoktur: ikisi de kendisinden beklenen bir deeri, bu deeri bekleyen ileme teslim etmek zorundadr. Bunu ister 150 satrlk komut kmesiyle yapsnlar, isterse tek satrlk bir komutla, Javascript, isteyen btn fonksiyonlara ve metodlara kendi nesnelerini ve onlarn metodlarn kullanma imkan verir; hatta bilgisayarn kaynaklarndan yararlanmalarn bile salar. Bylece Javascript asndan Browser ve onun grntledii HTML belgesinin nesne olarak zelliklerine ve bilgisayarn kaynaklarn kullanmaya biraz daha yaklam oluyoruz. imdi yeni bir fonksiyon yazarak, Browsern, bilgisayarn iletim sisteminden saat ve tarih bilgisi edinerek, Javascripte ulatrmasn salayalm. Bunun iin dz yaz programnzda u kodu yazn ve fonksiyon2.htm adyla kaydedin.
<HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> <TITLE>Javascript'te Fonksiyon</TITLE> <SCRIPT LANGUAGE="Javascript1.2">  </SCRIPT> </HEAD> <BODY onLoad="tarihsaat()"> <FORM method="POST" name="saatForm"> u anda saat: <input type=text size=50 maxlength=50 name="saatkutusu"> </FORM> </BODY> </HTML>
Bu Javascript kodunda tanmladmz deikenin, Javascriptin otomatik bir metodundan deiken elde ettiini gryorsunuz. Date(): getYear(), getMonth(), getDate(), getDay(), getTime(), getHours(), getMinutes(), getSeconds() Bu metod, Javascriptin Browserdan, Browsern iletim sisteminden, iletim sisteminin de bilgisayarn temel girdi/kt ilemlerini yapan (BIOS) ipinden, saati ve tarihi ieren bilgiyi almasn salar. Geri metod Date (gnn tarihi) adn tayor, ama Date(), Javascript asndan class (snf) saylr ve edinilen bilgi sadece ay, gn ve yl bilgisini deil, o andaki saati, dakikay ve saniyeyi de ierir. saat adn verdiimiz bu deiken, Date() metodunun salad btn bilgileri ierdii iin, iinden saate ilikin bilgiyi skp almamz gerekir. Date() snfnn salad bilgiyi, get... yoluyla alrz. Burada nce biraz, hem ngilizceden hem de Javascript dilinden Trkeye tercme yapalm: Year: Yl (1900den sonra) Month: Ay (0=Ocak - 11=Aralk) Date: Gn (1-31) Hours: Saat (0-23)
JAVASCRIPT
65
Minutes: Dakika (0-59) Seconds: Saniye (0-59) Time: Zaman (Bu bilgilerin tm: Gn, Ayn Ad, gnn tarihi, saat:dakika:saniye, Yaz saati/k saati ve yl) Bu durumda getYear(), size bilgisayarn BIOSnun ayarl oluduu yl (rnein 1999) deerini; getHours() ise bu komutun icra edildii andaki saati (rnein, 19) kazandracaktr. Grdnz gibi, getTime() metodu, bize olaanst zengin bilgi kazandrabilir. Bizim rnek kodumuzda, saat deikeninin iinden getTime() yntemi ile, hemen her trl tarih ve saatle ilgili bilgi demetini alyoruz; ve bunu bir baka metodun ilemine tabi tutuyoruz. toString(), toLowerCase(), toUpperCase() Javascriptin kullanlmaya hazr ilevleri (metodlar) arasnda Date (Tarih) nesnesine uygulanabilecek olanlarndan biri toString() metodudur. Kelime anlam Stringe evir, alfanmerike evir olan bu metodla, saat nesnesinin tamamen kendine zg biimi, Javascript tarafndan HTMLin anlayabilecei ekle evrilmi olur. Buradaki rnek kodda, saat deikeninin ieriini toString() metoduna tabi tutarak, alfanmerik deere eviriyoruz ve bunu, HTML sayfasndaki Form nesnesinin saatkutusu isimli INPUT gesinin ierii haline getiriyoruz. Javascriptte, evirme amal iki metod daha vardr. toString() metodu sadece Date nesnesine uygulanabilir, ama toLowerCase() (kk harfe evir) ve toUpperCase() (byk harfe evir) metodlar btn alfanmerik deerlere uygulanabilir. Nesneleri daha ayrntl ele aldmz blmde, alfanmerik deerlere uygulanabilecek, kullanlmaya hazr fonksiyonlar diyebileceimiz baka metodlar bulunduunu da greceiz ve hepsini birarada inceleyeceiz.
JAVASCRIPT
66
setTimeout(fonksiyonun_ad, milisaniye) rnek fonksiyonumuza dnersek; evirme ve bulunan alfanmerik deeri HTMLin Form nesnesinin bir gesinin ierii olarak atama ileminden sonra, kronometre adn verdiimiz bir deiken gryoruz; fakat bu deikenin deeri olduka farkl bir ifade ieriyor: setTimeout(). setTimeout(), Javascriptin 1.2 srmyle gelen ve kendi kendisinin zamanlamasn belirleyen bir metoddur. Buradaki rnekte, kronometre deikeninin deeri olarak, tarihsaat fonksiyonumuzun, her 1000 milisaniyede bir yenilenmesini istiyoruz. Bunun sonucu, Javascript, fonksiyonu her bin milisaniyede bir altracak, ve bunun sonucu olarak HTML sayfasndaki formda saatkutusu isimli kutunun deeri srekli yenilenecektir. Bu metoddan yararlanarak, Javascripte, szgelimi her sabah 6:30da bir i yaptrabiliriz. Bunun iin, sz gelimi setTimeout metodunu ieren deikeni, yle bir dng iine koyabiliriz:
if ((saat.getHours() == 6) && (saat.getMinutes() == 30)) { //burada ne gibi iler yaplacaksa o ie ait komutlar olabilir, rnein: document.saatForm.saatkutusu.value = saat.toString() //sonra setTimeout metodunu ieren zamanlama ifadesi gelir: kronometre = setTimeout("tarihsaat()",10000) }
Byle bir dng iine alnd zaman kronometre sadece sabah 6:30da saati ve tarihi gsterecektir. Deikenleri Deerlendirme (Eval) Buradaki rneimizde yer almamakla birlikte bu blm bitirmeden bir metoddran daha sz edelyim. Javascriptin kendi hazr fonksiyonlar iinde en az kullanlan hangisidir diye sorarlarsa Deerlendirme Fonksiyonu olan eval()dir derseniz, yanlmam olursunuz.
JAVASCRIPT
67
Buna karlk, Javascriptin hemen hemen en kullanl fonksiyonlarndan biri de eval() fonksiyonudur. Bir kere, eval(), programcy satrlarca kod yazmaktan kurtarr. Diyelim ki, Javascript programnzn bir yerinde
var toplamTutar = ((siparisMiktar * fiyatTL) * vergi) if (vergiYok) { toplamTutar = (siparisMiktar * fiyatTL) } .......
eklinde bir kodunuz var. Daha sonra programn herhangi bir yerinde,
document.write(eval(toplamTutar))
demekle, btn bu -drt satrlk kodu yazm olursunuz. eval() sizin iin deikenlerin deerlerini bulup, sonucu deerlendirip, arzu ettiiniz yere yazacak veya iletecektir. Bu fonksiyondan ilerde yararlanacaz.
JAVASCRIPT
68
Javascriptin Nesneleri, Olaylar ve zellikleri
Bilgisayar programcl da giyim-kuam dnyas gibidir: moday takip eder. Gnmzde programcln en moda unsuru Nesneye Ynelik programclktr dersek, gerei ifade etmi oluruz. Javascript programclnda nesne (object), ve nesnenin zellikleri (properties), genellikle HTML belgesinin ad (name) ve deeri (value) olan hereydir. Bir HTML unsurunun etiketinde NAME ve VALUE blmleri varsa, bu unsur, Javascript iin nesne saylr. Bu tanma gre Form, Javascript iin bir nesnedir. Ayrca Form nesnesinin bir gesi olan INPUT, kendisi de ad ve deer alabildiine gre, Javascript iin bir nesne saylr; fakat bu nesneye daima iinde bulunduu nesne dolaysyla atfta bulunabilirsiniz. Bu tr atflarda bulunurken, u kurala uymanz gerekir: nesneAd.zellikAd Bir nesnenin durumunu, deerini veya bir zelliini deitiren Javascriptin kendi iinde kullanlmaya hazr ilevleri; tarih gibi, Browsern masastndeki penceresinin bir zellii gibi deerleri belirleyen otomatik ilevleri; nesnelerin deerlerini belirli bir dzen iinde arttran veya azaltan sreleri; ve Javascriptin hazr ablonlarndan yeni bir nesne reten ilemleri, metod ad altnda toplarz. Her nesnenin kendine ait bir metodu olabilir; bir metod birden fazla nesne ile birlikte kullanlabilir. Bu gibi ifadeleri yle yazarz: nesneAd.metodAd (argman) Javascript ve niteliklerini etkiledii HTML, bir iletim sistemi ortamnda, Grafik Kullanc Arayz (GUI) ile alan bir Browser programnn iinde yer alrlar. Browser programlar kendiliklerinden veya GUI sonucu, yle baz olaylara (rnein Mouse
JAVASCRIPT
69
iaretisinin bir nesnenin zerine gelmesi veya bilgisayar kullancsnn Mouseun veya klavyenin bir dmesini tklamas gibi) yol aarlar ki, bu olay iletim sistemi-GUI-Browser yoluyla HTML belgesi (ve dolaysyla Javascript) asndan nem tayabilir. Bunlara Event (olay) denir, ve Javascripte bu olayn olmas halinde icra edilmek zere zel emirler verilebilir. Bu tr komutlarn yazlmasnda u yntem izlenir: event=fonksiyon_veya_metod (argman) Aslnda yukarda zetlediimiz unsuru, nesne, nesne zellii ve Browser olaylarn buraya kadar bir ok rnekte grdk ve kullandk. Bu blmde, bu kitapn elverdii lde her n ayr ayr ve ayrntl ele alacaz.
Nesneler
Javascript ile yazacamz programlar, Netscape veya Internet Explorer programlarnn belge nesne modeli (Document Object Model) denen kurallar iinde hareket etmek zorundadr. Daha yksek programlama dillerine, rnein C++, Delphi veya Java gibi dillerle program yazmsanz, programc olarak baka bir programn modeli ile snrl olmadnz, hatta iletim sisteminin programlar iin salad arayzle (API) kendinizi snrl hissetmeyebileceinizi bilirsiniz. Fakat Javascript dahil tm Script dilleri, Browsern sunduu hiyerarik nesne modeli ile snrldr. Aada Netscapein modelini gryorsunuz. Geri Internet Explorer ok daha fazla nesneyi kontrol etmenize imkan veriyor; fakat IEnin geni alanna giren nesnelere ynelik Javascript program, Netscape kullanan ziyaretilerin bilgisayarnda ileyemeyebilir: <DOM.TIF> Javascriptte document nesnesi kavramn renirken, ilk kavranmas gereken unsur, container (iinde tutan, kap) meselesidir. Hatrlayacanz gibi, yukardan beri Javascripte ekrana bir ey yazdracamz zaman, una benzer bir komut veriyoruz:
JAVASCRIPT
70
document.write(<H1>Merhaba Dnya!</H1> Burada kullandmz write()metodu, document nesnesine, o da Browsern window (pencere) nesnesine aittir. window nesnesini zikretmiyoruz; nk zaten onun iindeyiz. Ama yeni bir Browser penceresi atrmak istersek, bunu da aka belirtmemiz gerekir. Aadaki kodu, dz yaz programnzda yazarak, yenipencere.htm adyla kaydederseniz ve Browsernzda aarsanz, size yeni bir window nesnesi oluturma imkan verecektir:
<HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> <TITLE>Javascript'te Yeni Pencere</TITLE> <SCRIPT LANGUAGE = "Javascript1.2">  </SCRIPT> <BODY OnUnload="kapaPencere()"> <H1>Bu dmeyi tklarsanz, yeni pencere alr.</H1> <FORM> <INPUT Type="button" Value="Yeni Pencere A" OnClick="yeniPencere()" </INPUT> </FORM> </BODY> </HTML>
JAVASCRIPT
71
Burada windowNesnesi adl deikinin deerine dikkat ediyor musunuz: Browsern kendi iinde bulunan window.open() metodunu kullanarak, ara ubuu bulunmayan, eni 300 ykseklii 150 piksel ve ziyareti tarafndan lleri deitirilebilen bir yeni Browser penceresi ayor. Aslnda bu noktada windowsNesnesi adl deiken, bu nesnenin buradaki temsilcisi saylr; yeni nesneye ne yaptrtmak isterseniz, burada, windowNesnesi deikinini kullanarak yapabilirsiniz. Bir baka dikkat edilmesi gereken nokta, yeni Window nesnesini oluturduktan sonra bir daha window nesne adn kullanmyoruz, sadece document adl containerin (kabn) adna referans yapyoruz. Yukardaki emada grdmz nesnelerin HTML karlklar yledir: Javascript Nesnesi Pencere (Window) ereve (Frame) Belge (Document) Form Dme aretleme Kutusu Gizli (Hidden) Dosya kart (file upload) Parola (password) Radyo dmesi (Radio) Baa dn (Reset) Se (Select) Gnder (Submit) HTML Karl Yok <FRAME> <BODY> <FORM> <INPUT TYPE=button> <INPUT TYPE=checkbox> <INPUT TYPE=hidden> <INPUT TYPE=file> <INPUT TYPE=password> <INPUT TYPE=radio> <INPUT TYPE=reset> <SELECT> <INPUT TYPE=submit>
JAVASCRIPT
72
Metin (Text) Metin Alan (Textarea) Ba (Link) Balant (Anchor) Applet Resim (Image) Plugin Alan (Area)
<INPUT TYPE=text> <TEXTAREA> <A HREF=> <A NAME=> <APPLET> <IMG> <EMBED> <MAP>
Bu nesneleri ve metodlar ile yant verdikleri Window olaylar (event) konusuna gemeden nce bir iki noktay belirtelim: Window nesnesinin HTML karl bulunmamakla birlikte BODY etiketinin onLoad ve unonLoad olaylarnda ileyen bir fonksiyonla yeni window nesnesi oluturmanz (yukardaki rnekte olduu gibi) daima mmkndr. Ayrca, iinde bulunduunuz veya yeni amak istediiniz bir Browser penceresinin alt ervesindeki Status (durum) mesaj alanna istediiniz mesaj yazdrabilirsiniz: window.status = Benim sayfama ho geldiniz! Internet, HTML sayfas ve bal belgelerle bilgisayar dosyalarn alp vermek demektir. Mahal (Location) nesnesi, Browsern grntledii belgenin nereden geldiini gsterir. Geri, HTML size grntledii belgenin nereden geldiini bildirmez, ama Browser, bunu window.location.protocol nesnesi olarak tutar. Bu deer ya http: ya da file: (ikisi de kk harf ve sonlarnda iki nokta stste var) olur. rnein:
if (window.location.protocol == http: { alert (Bu belge Internetten geliyor.) } Else { alert (Bu belge sabit diskten geliyor.)}
JAVASCRIPT
73
eklinde bir kodla, belgenin mahallini aratrmak mmkndr. Tarih (History) nesnesi ise, her iki Browsern, ziyaret edilen siteler ve sayfalar listesinde ileri veya geri gitmekte kulland nesnedir. HTMLde bu listeye erimeyi salayan etiket bulunmamakla birlikte Javascript bu listeyi kullanabilir. rnein: function gerigit() { window.history.go(-1) } eklindeki bir fonksiyon ve bu fonksiyonu aran bir dme (onClick=gerigit() gibi) Tarin nesnesinden yararlanmasn salayabilir.
Olaylar
Browser programlar, olayl bir yaama sahiptir! Ya bilgisayar sistemi, ya da kullanc (ziyareti), srekli bir takm olaylarn (Event) olumasna sebep olurlar. Ya Mouseun bir dmesine baslr Click ad verilen olay oluur; ya klavyede bir tua baslr, KeyDown olay oluur. Bir HTML sayfasnn yklenmesi biterse Load, sayfadan kma ilemi tamamlanrsa unLoad olay olur. Her Pencere, Browser veya Kullanc olayna karlk, Javascriptin bir Olay Ynlendiricisi (Event Handler) vardr. Olay Ynlendirici, olayn adn tar. rnein, kullancnn Mouseun bir dmesini tklamas, Click, bu olay karlayan ve ynlendiren metod ise onClick (tklandnda, tklama halinde) adn tar. Javascript programcs olarak bu olaylarn tm bizi ilgilendirmedii gibi, nesnelerimiz de ounlukla bu olaylara ilgi gstermezler. Bizi yakndan ilgilendiren nesneler ve onlarn olaylarla ilgisini ...... tabloda grebilirsiniz. //////////////NOT//////////////////////////////// Bo yere tablonun bulunduu yeri belirten ifade gidecek: kar sayfadaki
JAVASCRIPT
74
nceki sayfadaki arkadaki sayfada bulunan gibi. //////////////////////////////////////////////// <EVENTS.TIF --- RESMALTI: Javascript asndan Browser Nesneleri ve karlk verdikleri Browser ve GUI Olaylar (Event).> Event Handlerlar, bir tr adlandrlm ama ii bo fonksiyonlar gibi dnebilirsiniz. Programc olarak bize den, bu olay karsnda olay yndendiricisinin ne yapmasn istediimi belirtmekten ibarettir. Event Handlerlar, daha nceden hazrladmz bir fonksiyonu greve arabilir; veya hemen orackta bir Javascript metodunu da devreye sokabiliriz. Mesela:
<INPUT TYPE=text SIZE=50 MAXLENGTH=100 NAME=soyadi onChange=denetle(this)>
Ziyareti bu INPUT kutusuna soyadn yazdnda, kutunun ierii deimi olacak ve bu Change (deiiklik) olay, kendisini yndendiren onChange sayesinde, nceden hazrladmz denetle() isimli fonksiyonu aracaktr. Burada grdnz this (bu) kelimesi, Javascripte fonksiyonun istedii deer kmesi olarak bu nesnenin ieriini vermesini bildiriyor. lerde rneklerde bunu sk sk kullandmz greceksiniz. imdi sk kullandmz olaylar ve ynlendirilcilerini daha yakndan tanyalm: onClick Ziyaretinin, Mosue iaretisi tklanabilir bir nesne zerinde iken Mousenun dmesine basmas, Click olayn dourur; bu olay onClick ynlendirir. Dmeler, iaretleme kutular, radyo dmeleri ve balantlar tklanabilir. Olayn olumas iin varsaylan Mouse dmesinin baslmas ve braklmas gerekir. Dme basl durursa, Click olay gereklemi olmaz.
JAVASCRIPT
75
onClick ynlendiricisine, Click olay halinde ne yapmasn istediinizi ait olduu nesnenin HTML etiketi iinde bildirmeniz gerekir. Aadaki kodu dz yaz programnzda yazar ve onClick01.htm adyla kaydederseniz, onClick ynlendiricisi iin program yazm olacaksnz:
<HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> <TITLE>JavaScript'te onClick</TITLE> <SCRIPT LANGUAGE="JavaScript1.2">  </SCRIPT> </HEAD> <BODY> <H1>Dmelerden birini tklaynz!</H1> <INPUT TYPE="button" NAME="Resim1" VALUE="Resim 1" onClick=resim1()> <INPUT TYPE="button" NAME="Resim2" VALUE="Resim 2" onClick=resim2()> </BODY> </HTML>
Bu kodda ad geen resim1.htm ve resim2.htm adn vereceimiz ve iki kk resim ieren sayfalar da oluturalm (Elinizde hazr bir grafiin adn verebilirsiniz).
<html>
JAVASCRIPT
76
<head> <title>Resim 1[veya Resim 2]</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> </head> <body> <h1>Resim 1[veya Resim 2]</h1> <p><img src="resim1.gif" width="151" height="278" alt="uzayli.tif (4942 bytes)"></p> </body> </html>
Bu sayfay oluturduktan sonra onClick.htmde srayla her iki dmeyi de tklayn; her Click olaynda onClick ynlendiricisinin farkl fonksiyonlar ardna dikkat edin. Kimi zaman onClick ynlendiricisi, balant nesnesi ile dorudan kullanlabilir. Balant nesnesi olan <A HREF=....> etiketi, bir balant protokol adresi (URL) verilmesini ister. Ancak HTTP veya FILE protokol yerine buraya dorudan JavaScriptin adn ve icra etmesi istenen fonksiyonu yazabilirsiniz. rnein, <A HREF=JavaScript:resim1()> eklinde bir ifade, protokol olarak Javascripti gstermemizi salayabilir. onClick01.htmde INPUT etiketleri yerine, u iki satr yazarak, onClick02.htm adyla kaydedip, Browserda an. Dmelerin yerini balantl iki kelimenin aldn greceksiniz; fakat sayfann ilevi deimeyecek. onClick, bu kez dmenin Click olayn deil, balantnn Click olayn karlyor:
<A HREF=JavaScript:resim1()>Resim 1</A> <A HREF=JavaScript:resim1()>Resim 1</A>
onSubmit Javascriptin, HTMLi tamamlad noktalarn banda Form ve Form yoluyla elde edilecek bilgilerle ilgili ilemler gelir. Bu ilemlerin banda ise Formdaki bilgilerin Servera gnderilmeden nce, daha Browserda iken dorulanmas ve hatalardan arndrlmas vardr. Javascript, bunu ziyaretinin formda, Submit (Gnder) olayna yol aan herhangi bir dmenin tklanmas halinde yapar. Bir form, ziyareti tarafndan tr Submit olan bir
JAVASCRIPT
77
dmenin tklanmas halinde, Browser tarafndan HTTP protokol ile Servera gnderilir. Javascript, onSubmit ynlendiricisi ile bu olaya ilikin iler yapabilir, fonksiyonlar icra edebilir. Fakat burada dikkat edeceiniz nokta, Submit olayna engel olmamak veya bu ilemi arta balad iseniz, bu artn yerine gelmesini salamaktr. Bunu bir rnek zerinde grelim. Diyelim ki, HTML sayfanzda, una benzer bir FORM etiketi var:
<FORM ACTION=form_islem.pl METHOD=post onSubmit=onayla()>
Burada ad geen onayla() fonksiyonu HTMLin HEAD blmnde yer alyor ve una benzer komutlar ieriyor:
//onSubmit olayn ynlendirme fonksiyonu function onayla() { confirm(Bu siparii vermek istediinizden emin misiniz?); }
lk bakta byle bir tuzak, formun bir kere daha onaylandktan sonra gnderileceini dndrebilir. Burada grdnz confirm komutu, Javascripte, Browsern kullancdan OK (Tamam) ve Cancel (ptal) yazl bir kutu ile onay almasn salar. Kullanc OK dmesini tklarsa, Browser, Javascripte true (doru), kullanc Cancel (ptal) dmesini tklarsa false (yanl) deeri gnderecektir; sanlabilir ki, Javascripte true deeri dnerse formu gnderilecek, fakat false deeri dnerse form gitmeyecektir. Bu doru deil! Her iki deerde de form gidecektir; nk, yukardaki kodda Browsern Confirm kutusunun oluturaca deerin tr ile onSubmit olay ynlendiricisi arasnda bir ba kurulmuyor; baka bir deyile onSumbite kendisine dnmesi gereken bir sonu olduu bildirilmiyor. Bunu return anahtar kelimesiyle salarz. return (anlam: geri dn) kelimesi, bir fonksiyona kendisini greve aran unsura mutlaka bir deer gndermesi gerektiini bildirir. return kelimesini kullanarak, Form etiketini yle yazabiliriz:
<FORM ACTION=form_islem.pl METHOD=post onSubmit=return onayla()>
Dolaysyla onayla() fonksiyonuna da kendisini greve aran komuta bir sonu ulatrmas gerektiini bildtirmemiz gerekir:
JAVASCRIPT
78
//onSubmit olayn ynlendirme fonksiyonu function onayla() { return confirm(Bu siparii vermek istediinizden emin misiniz?); }
Bu durumda kullanc/ziyareti confirm kutusunun OK (Tamam) dmesini tklarsa onSubmit ynlendiricisi Formu belirtilen CGI programna, ilenmek zere, gnderecek; Cancel (ptal) dmesi tklanrsa, onSubmit ynlendiricisi submit olayn durduracaktr. onReset Formlara koyduunuz Reset (Baa dn) dmesi, bir Formdaki btn bilgilerin silinmesini salar; Browsern Geri dmesini tklamak dahil, hi bir eylem ziyaretinin yanllkla bast Sil dmesinin sildiini geri getiremez. Fakat programc olarak siz byle bir hatay nleyebilirsiniz. nk Sil dmesinin oluturduu reset olayn ynlendiren onReset, size bu imkan verir. Tpk onSubmitteki gibi FORM etiketinize onReset tarafndan devreye sokulacak bir dorulama fonksiyonu koyabilirsiniz. Form etiketiniz yle olabilir:
<FORM ACTION=form_islem.pl METHOD=post onReset=return sahiMi()>
Bu fonksiyonu da HTMLin HEAD blmnde yle yazabilirsiniz:

//onReset olayn ynlendirme fonksiyonu function sahiMi() { return confirm(Bu formdaki bktn bilgileri silmek istediinizden emin misiniz?); }
Ziyaretiniz doldurduu formda, Gnder yerine yanllkla Sili tkladysa, bylece bir ansa daha kavumu olur. onChange HTML sayfanzda olabilecek tek deiiklik, ziyaretinin iine bir eyler yazabildii veya baz iaretler koyabildii alandr: Text (Metin), Textarea (Metinalan) ve Select (Se) etiketleri. Metin ve metinalann iini tklayarak Browser Penceresinin odak noktasn buraya getiren ziyareti klavyesine basarak, bu alanlara metin girebilir; bu HTML sayfasnda
JAVASCRIPT
79
change (deiiklik) olmas anlamna gelir Select etiketinin salad klardan birini seen ziyareti de sayfada deiiklik olayna yol aar. change olay halinde, onChange bu olay ynlendirir. Javascript programcs olarak siz bu ynlendiriciye belirli bir fonksiyonu altrmasn bildirebilirsiniz. Bunu da bir rnekle ele alalm. Diyelim ki Frame (ereve) esasna dayanan bir ana sayfanz var; ziyaretinin bir erevedeki select etiketinin seeneklerinden birini semesi halinde bir dier erevenin ierii deisin istiyorsunuz. Ana sayfanzda bir FRAMESET var ve bu ereveli bir sayfa oluturuyor. Burada Browsern document (sayfa) hiyerarisi iinde Frameset Parent (ebeveyn; nk dier btn Frame'leri o douruyor!) ve Frame 0 (1nci ereve) Frame 1 (2nci ereve) ve Frame 2 (3nc ereve) vardr. document nesnesi ereveleri bir dizi-deiken iinde tuttuu ve Array (dizi deiken) numaralanmaya 0'dan balad iin erevelerimiz 0dan itibaren numaralanyor. Buna gre sa Frame'in ieriini deitireceimiz zaman bu ereveye "Frame 2" adyla gnderme yapmalyz. Frame 1'e yle bir FORM koyarsak, daha sonra bu formun deiiklik olayn onChange ile sa erevenin ieriini deitirmeye ynlendirebiliriz:
<FORM METHOD="post"> <P><SELECT NAME="hedef" SIZE="1" onChange="parent.frames[2].location.href=this.form.hedef.options[this.form.hedef.selected Index].value"> <OPTION>Se bakalm <OPTION VALUE="test1.htm">Test 1 <OPTION VALUE="test2.htm">Test 2 <OPTION VALUE="test3.htm">Test 3 </SELECT> </FORM>
Burada, SELECT nesnesinin ierii, ziyaretinin herhangi bir seenei semesi halinde deimi oluyor; bu change olay zerine bu olay ynlendirmek zere kullandmz onChange ise karsndaki Javascript komutunu icra etmeye balyor. Bu uzun kodda, this (bu) anahtar kelimesinin yeniden kullanldn gryorsunuz. Bu kelime, herhangi bir
JAVASCRIPT
80
Javascript fonksiyonuna (ad fonksiyon olmamakla birlikte burada yazdmz kod da bir fonksiyonun grevini yapyor) ihtiyac olan bilgileri bu nesneden almasn bildiriyor. Bu diye nitelediimiz nesne, iinde bulunduumuz FORMun SELECT gesidir. SELECT gesinin OPTIONlar, bu nesnenin OPTIONS dizi-deikeninde numaralanr ve seilen OPTIONn numaras selectedIndex, ierii ise .value adyla adlandrlr. Nesneleri ve zelliklerini ele aldmz blmde bu konuya yeniden dneceiz. onFocus, onBlur Bilgisayarda bir program akken, Mouse ile programn balk ubuunu tklayn; ubuun renginden iletim sisteminin dikkatinin bu programn penceresinde younlatn greceksiniz. Bir de masastnde bo bir yeri tklayn; bu pencere sistemin odak noktas olmaktan kacaktr. HTML sayfasnda da Browsern Focusunu (dikkat odan) zerinde toplad veya odan ekildii nesne olabilir: Text (Metin), Textarea (Metinalan) ve Select (Se) etiketleri. nk ziyaretinin sadece bu etiketlerin oluturduu nesnelere klavyenin dikkatini ekme hakk vardr. Bu nesnelerden biri tklannca Browsern focusu bu nesneye dnm, yani focus olay olmu demektir; bu durumda, biz de bu olay ynlendiren onFocusu kullanabiliriz. Ayn mantkla, ziyareti Browsern focusunu bu nesneden baka bir yere ektii zaman bu nesne focusu kaybeder, blur (netlikten kma, flulama) olay olur. Bunu da onBlur ile ynlendiririz. Bu iki ynlendiricinin birlikte kullanld u rnek kodu, onFocus.htm adyla kaydederseniz ve Browserda ekrandaki talimatlar izlerseniz, her iki ynlendiriciyi de kullanm olacaksnz:
<HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> <TITLE>JavaScript'te onFocus ve onBlur</TITLE> <SCRIPT LANGUAGE="JavaScript1.2">  </SCRIPT> </HEAD> <BODY> <BR> <FORM NAME="isimForm"> <P>Ltfen adnz yazn ve sayfa zerinde baka bir yeri tklayn: <BR><INPUT TYPE="text" NAME="ad" VALUE="Adnz buraya yaznz" SIZE=25 onBlur="goster()"> <P>imdi de aadaki kutuya mesleinizi yazn: <BR><INPUT TYPE="text" NAME="meslek" VALUE="Mesleinizi buraya yaznz" SIZE=25 onFocus="uyar()"> </FORM> </BODY> </HTML>
Javascript, stteki kutuya adnz yazdktan sonra baka bir yeri tkladnzda olan i, ad isimli metin kutusunun blur olayna onBlurn ard goster() fonksiyonu ile; alttaki kutuyu mesleinizi yazmak zere tkladnz anda meslek kutusunda olan focus olayna da uyar() fonksiyonu ile karlk veriyor. onMouseOver, onMouseOut Javascript dnyasnda en ok kullanlan iki event varsa, birincisi Mouse iaretisinin bir nesnenin zerine gelmesi (MouseOver olay), ikincisi ise Mouse iuaretisinin bir nesnenin zerinden ekilmesi (MouseOut olay) saylabilir. Bu iki olay onMouseOver ve onMouseOut ynlendiricileri ile karlayabiliriz. Gerekte bu iki olayla, Mouse iaretisi bir balant satr veya grafiinin ve bir grafik haritasnn (Map, Area) zerine geldii veya
JAVASCRIPT
82
zerinden ekildii zaman ilgilenebiliriz; nk dier HTML unsurlar ve Javascript nesneleri ile Mouse iaretisinin iaretleme ilikisi yoktur. Bu olay ve ynlendirilmesini, u kk programda grebiliriz:
<HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> <TITLE>JavaScript'te Fonksiyon</TITLE> <SCRIPT LANGUAGE="JavaScript1.2">  </SCRIPT> </HEAD> <BODY> <A HREF="http://pcworld.com.tr" NAME="bag" onMouseOver="return faregelince()" onMouseOut="return faregidince()">PC World-Trkiye</A> </BODY> </HTML>
Bu kodu onMouseOver.htm adyla kaydeder ve Mouse iaretisini PCWORLD-TRKYE balantsnn zerine getirirseniz, Browsernzn alt erevesindeki stat mesaj yerinde "En gzel site iin buray tklayn!", geri ektiinizde de "En gzel siteye gitme frsatn kardnz!" mesajn greceksiniz.
JAVASCRIPT
83
onLoad, onUnLoad Javascript asndan Browsern bir HTML sayfasn grntlemeyi bitirmesi sayfann load (ykleme), baka bir sayfaya geilmesi ise nceki sayfann unload (yklenmilikten kmas) saylr; ve bu iki olay onLoad ve onUnLoad ynlendiricileri ile karlayabiliriz. HTML dosyasnn iki blm (HEAD ve BODY) olduunu biliyorsunuz. Browser asndan asl sayfa, BODY blmdr; HEAD blmndeki komutlar sayfann nasl grntleneceine ilikin komutlar ierir. Bir sayfa Browsera yklenirken yapabileceimiz bir ok iten birisi, ziyaretinin Browsernn trn yoklamak olabilir. O halde, BODY etiketini yle yazarsak;
<BODY onLoad=hangiBrowser()>
ve HTMLin HEAD blmne bu fonksiyonu koyarsak, sayfamz yklenirken bize ziyaretinin Netcape mi, yoksa Internet Explorer m kullandn bildirebilir. Bu bilgiyi nasl deerlendirebileceimiz ise ayr bir konu. hangiBrowser() fonksiyonu yle olabilir:
// hangiBrowser fonksiyonunu tanmlayalm: var Browser=navigator.appName + " " + navigator.appVersion; var getkey=Browser.substring(0, 12); function hangiBrowser() { if (Browser.substring(0, 8)=="Netscape") window.location="netscape4.htm"; if (Browser.substring(0, 9)=="Microsoft") window.location="ie.htm"; if ( (Browser.substring(0, 8)!="Netscape") && (Browser.substring(0, 9)!="Microsoft") ) window.location="belirsiz.htm"; } // -->
Bu iki kodu ieren sayfanz onLoad.htm adyla kaydeder ve ayn dizine, iinde Netscape kullanyorsunuz! yazl ve ad netscape.htm; iinde IE kullanyorsunuz! yazl ve ad ie.htm, ve iinde Ne tr Browser kullandnz anlamadk! yazl ve ad
JAVASCRIPT
84
belirsiz.htm olan HTML dosyas koyarsanz, onLoad.htmi amak istediinizde kullandnz Browser hangisi ise (onLoad.htmin deil) dier dosyadan birinin aldn greceksiniz. Bir sayfada baka bir sayfay iaret eden bir balanty tkladnzda, Browser ak olan HTML kodunu silecek, yani sayfay yklenmemi hale getirecektir. Bu Javascript asndan bir UnLoad olaydr. O halde, BODY etiketimize onUnLoad ynlendiricisini harekete geiren bir fonksiyonu armasn syleyebiliriz. Aadaki HTML konudu onUnLoad.htm, ve bir HTML sayfasna da sadece Gle Gle.. Yine Bekleriz! yazarak, gulegule.htm adyla kaydederseniz sayfanz kapanrken ziyaretinize veda etme imkannz olur. (Ama ou ziyaretinin bundan holanmayacana emin olabilirsiniz!)
<HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> <TITLE>JavaScript'te onUnLoad</TITLE> <SCRIPT LANGUAGE="JavaScript1.2">  </script> </head> <body onUnLoad="gulegule()"> Bu sayfa size gle gle diyecek!! <A HREF="test1.htm">Baska sayfa</A> </body> </html>
JAVASCRIPT
85
Buradaki BODY etiketi, Browser baka sayfaya gemek zere mevcut sayfay sildii anda, Browsera yeni bir pencere aarak, bu pencerede gulegule.htmi grntlemesini salayacaktr. onError, onAbort Ziyaretinin Browser amak zere olduu sayfay transfer hatas yznden aamaz, HTML veya Javascript kodunu doru yorumlayamazsa, Error (hata) olay oluur. Javascript, sadece kendisine ilikin hata durumlarn onError ile yakalayabilir. Javascriptin Browser penceresiyle ilgili hatasn yakalamak istediiniz kod, HTMLin HEAD blmnde, SCRIPT etiketleri iinde ve window.onerror kelimeleri kk harfle yazlm olarak bulunmaldr:
window.onerror=hataHalinde() function hataHalinde (message, url, lineNumber) { messageList = new Array() urlList = new Array() lineNumberList = new Array() messageList[messageList.length] = message urlList[urlList.length] = url lineNumberList[lineNumberList.length] = lineNumber alert(messageList[0] + "\ndosya ad " + urlList[0] + "\nsatr sayisi " + lineNumberList[0]) return true }
Bu kodu zerinde altnz Javascript kodu ieren bir HTML sayfasna yerletirdiiniz taktirde olabilecek hatalar bir Uyar kutusuyla size bildirilir. Sayfann ve Javascriptin hatasz altn anladktan sonra bu kodu kaldrabilirsiniz. Javascript, sayfalarnzdaki grafik unsurlarn da hata halini yakalayabilir. HTTP iletiiminde, en sk grlen transfer hatas grafik unsurlarn aktarlmas srasnda olur; ayrca
JAVASCRIPT
86
HTML tasarm srasnda grafik dosyalarnn sayfaya veya sitenin kk dizinine gre greli adresinin yazlmasnda sk yaplan hatalar, grafik unsurlarn aktarlmasn engeller. Bu tr hatalarda ziyaretinizi u Javascript koduyla uyararabilirsiniz:
<IMG NAME=resim01 SCR=resim1.gif orError=alert(resim1.gif aktarlamyor; zr dileriz)>
Sayfalarnza koyduunuz grafik unsurlar ziyaretilerinizin sabrn tarr da, grafiklerin sonuna kadar aktarlmasn beklemeden Browsern Stop dmesini tklarlarsa, bunun sayfanz iin kt sonular olabilir. Grafik unsurlara balant belirten alan haritalar (AREA, MAP) etiketleri koymu olabilirsiniz. Ziyaretinin Browsernn Stop dmesini tklamas, Javascript asndan abort (yarda kes) olaynn domas demektir; bunu onAbort ile ynlendirebilirsiniz. Bu ynlendiriciden yararlanarak ziyaretiye sayfann eksik olduunu bildirmeniz yerinde olur. Bunun iin IMG etiketini yle yazabilirsiniz:
<IMG NAME=resim01 SCR=resim1.gif onAbort=alert(Sayfannn btn unsurlar aktarlamad; beklediiniz sonucu alabilmek iin btn unsurlarn aktarlmas yerinde olur)>
Nesneler ve Olaylar Birletirelim

imdi Javascript asndan Browser nesnelerinin neler olduunu biliyoruz; Browsern Javascript asndan ne gibi olaylar oluturduunu ve bu olaylar nasl kullandmz kk rneklerle grdk. Olaylardan yararlanarak Javascriptle nesneleri etkileyen programlar yazabiliriz; fakat bunun iin nesnelerin ne gibi zellikleri olduunu ve bunlar nasl etkileyebileceimizi de bilmemiz gerekir. Bu blmde nesnelerin Javascript ile etkilenebilir zelliklerinin neler olduunu ele alacaz. Nesnelerin ayrntlarna girmeden nce bir noktaya aklk getirelim: Javascript ile bir HTML unsurunu etkileyebilmek, rnein bir erevenin (Frame) ieriini deitirebilmek iin mutlaka o nesnenin bir olaya karlk verir olmas gerekmez. ereveler HTML etiketleri ile ekillenirler; herhangi bir olaya karlk vermezler. Dolaysyla olaylara yant vermeyen
JAVASCRIPT
87
nesneleri, olaylara yant veren nesneler yoluyla etkileyebiliriz; bunun iin de bir ok HTML nesnesinin zellikleri bilmemiz gerekir. Bu adan baknca, olaylara yant versin-vermesin, HTML nesnelerimizi, Browser Nesneleri, Belge Nesneleri, Form Nesneleri ve Javascript Dil nesneleri olarak drt ana gruba ayracaz.
Browser Nesneleri
Browsern Javascript dilinde ad Navigatordr. Ziyaretinin Browser program ister Netscape Navigator olsun, isten Internet Explorer olsun, Javascript iin Navigatordr; nesnelerine de Navigator Nesneleri denir. Bunlarn banda, Browsern pencereleri ve ereveler gelir. Pencere (window) u ana kadar yazdmz bir ok Javascript kodunda Navigator penceresinin baz zelliklerini kullandk: width (genilik), height (ykseklik), toolbar (ara ubuu) gibi. imdi bu zellikleri toplu olarak sralayalm: width Navigatorn sayfann grntlenmesi iin ekrandaki temiz alannn piksel olarak genilii. height Navigatorn sayfann grntlenmesi iin ekrandaki temiz alannn piksel olarak ykseklii. toolbar menubar scrollbars Navigatorn ara ubuunun gsterilmesi (=1) veya gizlenmesi (=0). Navigatorn men ubuunun gsterilmesi (=1) veya gizlenmesi (=0). Navigatorn sa ve alt kenardaki kaydrma ubuklarnn gsterilmesi (=1) veya gizlenmesi (=0). resizable Navigator penceresinin bytlebilir-kltlebilir olmas (=1) veya olmamas (=0).
JAVASCRIPT
88
status
Navigator penceresinin alt kenarndaki mesaj ubuunun gsterilmesi (=1) veya gizlenmesi (=0).
location
Navigator penceresinin URL adres ubunun gsterilmesi (=1) veya gizlenmesi (=0).
directories
Netscapede ikinci ara ubunun gsterilmesi (=1) veya gizlenmesi (=0).
copyhistory
Mevcut Navigator penceresinin history kaydnn (daha nce ziyaret edilen URl adreslerinin tutulduu izelgenin) yeni pencereye de kopyalanmas.
outerWidth outerHeight left top alwaysRaised
Navigator penceresinin piksel olarak genilii. Navigator penceresinin piksel olarak ykseklii. Navigator penceresinin ekrann sol kenarndan piksel olarak uzakl. Navigator penceresinin ekrann st kenarndan piksel olarak uzakl. Navigator penceresinin masastnde ak btn pencerelerin zerinde kalmasn salar. (Sadece Windows ve MacOSde iler.)
z-lock
Navigator penceresinin ii tklansa bile masastnde ak btn pencerelerin altnda kalmasn salar. (Sadece Windows ve MacOSde iler.) (Evet-Hayr anlamna deer alan zellikleri 1 ve 0 ile belirtebileceiniz gibi yes (evet)
ve no (hayr) ile de belirtebilirsiniz.) Javascriptin yeni Navigator penceresi ama metodu, window.open() eklinde yazlr:
yeniPencere = window.open(yenisayfa.htm, YeniPencereninAd, toolbar=1, menubar=yes, resizable=no)
JAVASCRIPT
89
Burada, yeni pencereye vermek istediiniz adn tek kelime olduuna, zelliklerin bir ift-trnak iinde toplandna dikkat edin. Navigator pencereleri, xxxx.close() metodu ile kapatlr. xxxx yerine ak pencerenin adn yazmanz gerekir. Aksi taktirde Javascript komutunu icra ettiiniz pencerenin kendisi (yani Browser) kapanr. (Baz Browserlarn baz srmleri Javascript tarafndan almam Navigator pencerelerinin Javascript ile kapatlmasna izin vermezler.) Bu nesnenin ve her iki metodun da kullanmn daha nce grdk. Mevcut bir HTML belgesinin adn vermeden, yeni pencereyi atrp, iine Belge nesnesini kullanarak HTML komutlar yazdrmay, aada Belge Nesnesi blmnde ele alacaz. Bu arada, Browsern kendisinin baz zellikleri ile Javascript asndan nesne olduunu tekrarlayalm. Bu adan Browsern Javascript iin u zellikleri vardr: appname appVersion appCodeName userAgent Browsern ad Browsern srm Browsern kod ad Browsern Servera kendisini tantrken verdii isim.
u ksa kodu browser.htm adyla kaydeder ve farkl Browserlarla aarsanz, Netscape ve IE hakknda bilgileri bir kutu iinde grebilirsiniz:
<HTML> <HEAD> <SCRIPT LANGUAGE = "JavaScript"> function siziTaniyalim () { var BrowserAdi = "" BrowserAdi += "Browser: " + navigator.appName + "\r" BrowserAdi += "Srm:" + navigator.appVersion + "\r" BrowserAdi += "Kod Ad: " + navigator.appCodeName + "\r" BrowserAd += "userAgent: " + navigator.userAgent + "\r" alert(BrowserAdi)
JAVASCRIPT
90
} </SCRIPT> <BODY> <H1>Browsernz Tanyor Musunuz?</H1> <FORM> <INPUT Type="button" Value="Browser Hakknda Bilgi Ver" OnClick="siziTaniyalim()" </INPUT> </FORM> </BODY> </HTML>
Mesaj Kutular Navigator penceresi, tr mesaj kutusu aabilir. Bunlar basit bilgi verme kutusu (alert), dorulama kutusu (confirm) ve kullancnn bilgi girme kutusudur (prompt). Bunlarn genel yazm kural yledir: window.alert(mesaj) return window.confirm(mesaj) return window.prompt(mesaj, varsaylanCevap) Bu kutunun eitli kullanm eklini, baka vesilelerle, daha nceki rneklerde grdk. ereve Nesnesi Bir Navigator penceresinde birden fazla HTML belgesi grntleme imkan veren ereve (Frame) teknii, tasarm asndan kolaylk salar. Bununla birlikte hal baz Web ziyaretilerinin ereveden holanmadklar da gerektir. erevelerin, Navigator asndan nasl bir hiyerar ilediini daha nce grdk. Javascript asndan her bir ereve bir pencere saylr; bunlara atfta bulunurken u adlandrma uygulanr: top En st pencere. yani Browsern kendisi.
JAVASCRIPT
91
parent
Herhangi bir Framei oluturan Frameset. ereve ereve iinde ise, bir erevenin iinde bulunduu ereve parent saylr. Sayfada bir Frameset varsa, btn ereveler iin top ayn zamanda parent saylr.
self
erevenin kendisi.
Daha nce de belirttiimiz gibi, Javascript, bir parent (ebeveyn) Framesetin yavru erevelerini 0dan itibaren numaralar. Yani, sayfanzda iki ereveniz varsa, birincisi parent.frames[0] ikincisi ise parent.frames[1] adyla bilinir. Herhangi bir erevenin ieriini dinamik biimde belirlemenin bir rneini yukarda grdk. Burada write() metodunu kullanarak, ayn ii nasl yapabileceimizi ele alalm. imdi, iki ereveli bir Frameset iin u HTML kodunu anacerceve.htm adyla kaydedin:
<html> <head> <title>Dinamik Cerceve</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> </head> <frameset cols="40%,*"> <frame SRC="doc1.htm" NAME="cerceve1"> <frame SRC="doc2.htm" NAME="cerceve2"> </frameset> <noframes> <body> </body> </noframes> </frameset> </html>
Sonra, bu Framesetin arda bulunduu doc1.htm olarak, u kodu kaydedin:

<html>
JAVASCRIPT
92
<head> <title>Cerceve 1</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> <script LANGUAGE="JavaScript1.2">  </script> </head> <body> <form NAME="form1"> <input type="hidden" name="bginput" value="white"> <p><input TYPE="text" NAME="input1" size="20"></p> <p>Bir zemin rengi seiniz:<br> <input TYPE="radio" NAME="radio1" VALUE="white" CHECKED onClick="document.form1.bginput.value="white"">Beyaz<br> <input TYPE="radio" NAME="radio1" VALUE="red" onClick="document.form1.bginput.value="red"">Krmz<br> <input TYPE="radio" NAME="radio1" VALUE="blue" onClick="document.form1.bginput.value="blue"">Mavi<br> <input TYPE="radio" NAME="radio1" VALUE="green" onClick="document.form1.bginput.value="green"">Yeil<br> <br>
JAVASCRIPT
93
<input TYPE="button" VALUE="ereve 2'yi gncelle" onClick="belgeYazdir()"> </p> </form> </body> </html>
doc2.htm ise olduka basit:

<html> <head> <title>ereve 2</title> </head> <body> <p>Bu sayfa gncellenecek</p> </body> </html>
Burada, document.write() metoduyla, hedef erevemiz olan iki numaral erevenin (parent.frames[1]) birinci erevedeki formdan aldmz unsurlar kullanarak, zemin rengini ve ieriini deitiriyoruz. Buradaki rnekten hareketle, erevelerinizin ieriini, bir dier erevede yaplan tercihlere, yaplan arama sonularna veya veri-ynlendirmeli sonulara ayrabilir ve dinamik olarak deitirebilirsiniz.
Belge (Document) Nesneleri

Web sayfasnn Javascript dilinde ad Belgedir. ster metin, ister sadece Javascript kodu, ister sadece grafik iersin, <HTML> diye balayan ve </HTML> diye biten herey, Javascript gzyle belgedir. Javascriptin gzyle dnyaya bakarsanz, dnyay iie kaplardan ibaret grrsnz. En d kabn ad, Navigator; iindeki ikinci kabn ad Belgedir. Belgenin iinde ise, yine birbirinin iinde olmak artyla, HTML ile oluturulan nesneler vardr. Sayfanzda rnein faturaForm adl bir form varsa, bu Javascript iin document.faturaForm demektir, ziyaretinin doldurduu bilgilerle Servera gnderilmesi iin document.faturaForm.submit() metodunun kullanlmas gerekir. Bu blmde bir belgedeki Javascript kodu ile yeni bir belge
JAVASCRIPT
94
oluturup, ya iinde bulunduumuz sayfann yerine, ya da yeni bir pencereye yollama yolunu ve HTML nesnelerinin zelliklerini Javascript araclyla nasl etkileyeceimize bakalm. Javascript, iinde bulunduu HTML belgesi yerine sizin arzu ettiiniz baka bir belgeyi grntlyebilir. Bu belgenin ierii, ziyaretinin bir nceki sayfada yapt baz tercihleri yanstabilir; ziyaretinin Browser trnden veya kulland bilgisayar iletim sisteminin trnden kaynaklanabilir. Aaddaki rnekte, Javascript ziyaretinin Browser trn alglayp, ona gre bir ierik sunuyor. Bu ierik burada olduu gibi sadece bir hogeldin mesaj olmayabilir, Browser trne uygun ierik olabilirdi. Bu dosyay, yenibelge01.htm adyla kaydedip, Browsernzda aarsanz, Browsernza uygun mesaj greceksiniz:
<html> <head> <title>Yeni Belge</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> </head> <SCRIPT LANGUAGE = "JavaScript1.2"> var Browser = navigator.appName document.open() if (Browser == "Netscape") { document.write("<h2>Sayn <a href='http://home.netscape.com'>Netscape</a> kullancs</h2><p><p>")} else { if (Browser == "Microsoft Internet Explorer") { document.write("<h2>Sayn <a href='http://www.microsoft.com'>Microsoft</a> Internet Explorer kullancs</h2><p><p>") } else { document.write("<h1>Ho geldiniz! Ne tr Browser kullandnz anlayamadk! </h1><p><p>") } } document.write("Sitemize ho geldiniz.<p><p>") document.write("Kullandnz Browser trn anladk diye ardnz m?")
JAVASCRIPT
95
document.close() </SCRIPT> <body> </body> </html>
Burada olduu gibi, yeni belge mevcut belgenin yerine almak yerine, Frameset ile oluturduunuz ereveli bir sayfada arzu ettiiniz bir erevenin ieriini de oluturabilir. Bunun iin, yukarda olduu gibi document.write() metodu yerine,
parent.form[0].document.write()
metodunu kullanmanz gerekir. Burada, birinci ereve iin keli parantez iine 0, ikinci ereve iin 1, nc ereve iin 2 yazmanz gerektiini daha nce belirtmitik. Javascript ile oluturacanz yeni belge, tamamen baka ve hatta yeni bir Browser penceresi iinde de grntlenebilir. Bu teknikten, sayfalarnzda aklayc bilgi ve yardm bilgisi vermekte yararlanabilirsiniz; hatta reklam amacyla bile bu yntemi kullanabilirsiniz. Aadaki kodu, yenibelge02.htm adyla kaydederseniz, ziyaretinin Mouse iaretisini balantl gibi grnen kelimelerin zerine getirdiinde, Javascript annda yeni bir pencere aacak, ve iine arzu ettiiniz metni yazacaktr:
<html> <head> <title>Yeni Belge</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> <script LANGUAGE="JavaScript1.2"> function acYardim01(){ yeniPencere = window.open("", "yardim01", "height=300,width=400") yeniPencere.document.write("<h2>Bu pencerede Konu 1 ile ilgili ek bilgiler olacak</h2>") yeniPencere.document.write("<p>Tabii birisi zahmet edip, yazarsa!</p>") yeniPencere.document.write("<p><font size=-1><a href=\"javascript:self.close()\">Mevzuya Donmek Icin Tiklayin</a></font>") yeniPencere.document.close() }
JAVASCRIPT
96
function acYardim02(){ yeniPencere = window.open("", "yardim02", "height=300,width=400") yeniPencere.document.write("<h2>Bu pencerede Konu 2 ile ilgili ek bilgiler olacak</h2>") yeniPencere.document.write("<p>Tabii birisi zahmet edip, yazarsa!</p>") yeniPencere.document.write("<p><font size=-1><a href=\"javascript:self.close()\">Mevzuya Donmek Icin Tiklayin</a></font>") yeniPencere.document.close() } function acYardim03(){ yeniPencere = window.open("", "yardim03", "height=300,width=400") yeniPencere.document.write("<h2>Bu pencerede Konu 3 ile ilgili ek bilgiler olacak</h2>") yeniPencere.document.write("<p>Tabii birisi zahmet edip, yazarsa!</p>") yeniPencere.document.write("<p><font size=-1><a href=\"javascript:self.close()\">Mevzuya Donmek Icin Tiklayin</a></font>") yeniPencere.document.close() } </script> </head> <body> <h1>Sitemizdeki yeni konular aadadr:</h1> <h2>Konular hakkinda daha fazla bilgi almak icin Mouse isaretcisini konunun uzerine getirin.</h2> <p><a HREF="#" onMouseOver="acYardim01()">Yeni konu 1</a></p> <p><a HREF="#" onMouseOver="acYardim02()">Yeni konu 2</a></p> <p><a HREF="#" onMouseOver="acYardim03()">Yeni konu 3</a></p> </body> </html>
Byle bir pencerede grntlemek istediiniz metin, Javascript fonksiyonu ile yazdrlamayacak kadar uzun ise, yeni pencere atrma kodunuzda yle bir deiiklik yapabilirsiniz:
function acYardim01(){ yeniPencere = window.open("yardim01.htm", "yardim01", "height=300,width=400") }
JAVASCRIPT
97
Bu durumda, Javascript, yeni pencerenin ieriini kendisi document.write() metodu ile kendisi yazmayacak, pencere ierii olarak rnein yardm01.htm adl dosyay grntleyecektir. Bu konuyu kapatmadan; yukardaki rnek kodda, Javascriptin yeni pencerenin ieriini kendisi yazd acYardim01 adl fonksiyonda kullandmz u koda dikkat edin:
yeniPencere.document.write("<p><font size=-1><a href=\"javascript:self.close()\">Mevzuya Donmek Icin Tiklayin</a></font>") yeniPencere.document.close()
Burada kullandmz yerel Javascript kodundaki self.close() metodu, Javascripte belgenin iinde bulunduu kendi penceresini kapattrmaktadr. (self, kendisi anlamna geliyor.) Kodumuzu biraz daha gelitirebiliriz. Szgelimi, MouseOver olay ile atmz ikinci penceresi, MouseOut olay ile kapatabiliriz. Bunun iin, tabi nce yeni pencere aan fonksiyonlarmzdan sonra bir de pencere kapatan fonksiyon yazmamz gerekir:
function kapat() { yeniPencere.close(); }
Sonra, yardm pencerelerini atmz onMouseOver ynlendirisiyle ilgili kodun hemen arkasna, bu kez kapat() fonksiyonunu aran onMouseOut ynlendiricisini yazacaz. Bu rnekteki satrdan biri, yle olabilir:
<p><a HREF="#" onMouseOver="acYardim01()" onMouseOut="kapat()">Yeni konu 1</a></p>
Bu durumda, alan yeni pencerelerin iindeki kendi kendisini kapatan kodu ilitirdiimiz satr tklama imkannz hi olmayaca iin (neden?), bu kodun satrn, acYardim01() dier fonksiyonlarmzdan kartmamz yerinde olur. Bu yeni ekliyle kodunuzu yenibelge03.htm adyla kaydedebilirsiniz.
JAVASCRIPT
98
Form Nesneleri
Javascriptin icad edilme nedenlerinin banda, ziyareti ile etkileme gelir; ziyareti ise Web tasarmcs olarak size bilgileri ancak ve sadece Form ile ulatrabilir. Bu sebeple Javascript asndan HTMLin en nemli nesneleri, Form nesneleridir. HTML, kendi formunu kendisi oluturur; bu bakmdan Javascripte bir grev dmez. Javascript formdaki bilgilerin ilenmesi srasnda devreye girer. nce Form nesnesinin zelliklerini hatrlayalm: <FORM NAME=formun_ad ACTION=CGI_program ENCTYPE=kodlama_tr METHOD= GET veya POST TARGET= pencere_ad onSubmit=metodun_ad> </FORM> Bu durumda, tam teekkll bir form etiketi yle olabilir:
<FORM NAME=form1 ACTION=http://www.pcworld.com.tr/cgi-bin/form.pl METHOD= GET></FORM>
Bu, gerek bir bilgi derleme formu rnei. Fakat Form nesnesi, Servera bilgi gndermek amac dnda da kullanlabilir; bir form nesnesi olan IPNUTun bir tr olan dmeleri (button) farkl amal Javascript fonksiyonlarna balanabilir. Form, gerek amacyla kullanld durumlarda, Javascript, formdaki bilgilerin Servera gnderilmeden nce snanmasn salayabilir. Bunun bir rneini, ziyaretinin telefon numarasn doru biimde yazp yazmadn snadmz kodda grmtk. Burada
JAVASCRIPT
99
ksaca, Javascript asndan form nesnesinin unsurlarn nasl tanyabileceimizi ele alalm. Benzeri snama kodlar yazarken, bu unsurlara referans yapacanz zaman, bu unsurlarn adlarn ve deerlerini bulma yntemini bilmeniz gerekir. Form etiketi iindeki btn unsurlar element adl dizi-deikenin iine yazlrlar ve ierikleri form.element[i].value (i, unsurun sra numaras olmak zere) metoduyla bilinirler. Diyelim ki bilgiForm adl formunuzun birinci unsuru <INTPUT TPYE=text NAME=musteriAdi...> eklinde bir etiket. Bu etiketin oluturaca kutuya ziyaretinin yazaca isim, Javascript asndan bilgiForm.elements[0].value veya bilgiForm.musteriAdi.value eklinde bilinir. Formun unsurlar imdi bir form ieren sayfa rnei yapalm; Javascript ile formun tamamen doldurulmu olup olmadn snayalm. Bylece ziyaretinin gnderecei formun eksik olduunu anlamakta ge kalmam oluruz. Aadaki kodu, form01.htm adyla kaydedip, Browserda bir yerini eksik olarak duldurun ve Gnder dmesini tklayn.
<html> <head> <title>Form</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> <script LANGUAGE="JavaScript1.2"> function denetle() { var num = document.form1.elements.length var dogruMu = true for (var i=0; i<num; i++) { if ((document.form1.elements[i].value == null || document.form1.elements[i].value == "") && (typeof document.form1.elements[i] != 'submit' || typeof document.form1.elements[i] != 'reset')) { dogruMu = false
JAVASCRIPT
100
alert("Formdaki " + document.form1.elements[i].name + " alan doldurulmam bulunuyor. Ltfen doldurunuz!") break } } return dogruMu } // --> </script> </head> <body> <form name="form1" method="POST" onSubmit="return denetle()"> <h2>Abone Formu</h2> <p>Adnz:<br> <input type=text size=25 maxlength=256 name="Abone_Ad"><br> lgi Alan:<br> <input type=text size=25 maxlength=256 name="lgi"><br> <strong>Oturduunuz l: <br></strong> <input type=text size=25 maxlength=256 name="l"><br> <strong>Elektronik Posta Adresiniz: <br></strong> <input type=text size=25 maxlength=256 name="ElektronikAddress"></p> <input type=submit value="Gnder"> <input type=reset value="Sil"> </form> </body> </html>
Daha nceki rneklerden hatrlyorsunuz; formun ierdii bilgilerin gerekten Servera gitmesi iin gerekli submit olaynn nn kesebilmek iin kullandmz onSubmit olayna bal fonksiyonun return ifadesiyle, kendisini grevlendiren olayynlendiriciye bir sonu bildirmesini salamak zorundayz. Fonksiyonu biraz irdelersek, bata tanmladmz Boolean deikeni dogruMu bize doru-yanl tr bir sonu vermek zorunda; ziyareti hereyi doldurmusa (yani her alana hi deilse bir harf yazmsa!) bu deikenin deeri deimiyor. Fakat if sorgulamasnda dme olmayan unsurlardan birinin deeri bosa (yani null veya "" ise) deikenin deeri false olacaktr. if sorgulamasn ka kere yapacaz? Bu sayy, belgenin form elemanlarnn yazld dizi-deikenin
JAVASCRIPT
101
byklnden (document.form1.elements.length) reniyoruz, ve num adl deikene yazyoruz. Dolaysyla Forma yeni alanlar da eklesek, fonksiyonu yeniden yazmamza gerek yok. Sonra, i adn verdiimiz bir saya, num deikeninin deerine eit oluncaya kadar, elements dizi-deikenindeki (submit ve reset dndaki) btn elemanlarn deerlerin bo olup olmadklarna bakyoruz. Bu deerlerden herhangi biri bo ise, if dngs o noktada kesiliyor ve ziyaretiye bir uyar kutusu ile formu doldurmasn hatrlatyoruz. Bu arada uyar kutumuz, bo olan alann adn da bildiriyor. Bunu, if dngs kesildii andaki i deikeni deerindeki form elemannn adn alarak yapyoruz. Buradaki rnekte dme (button) nesnesinin Click olayn onClick ynlendiricisi ile yakaladk. Form nesnesindeki dier nesnelerden metin (text) ve metin alan (textarea) nesneleri, onBlur, onChange, onFocus, onSelect ynlendiricileri ile; iaret kutusu (checkbox) ve radyo dmesi (radio) onClick ynlendiricisi ile, seme listesi (select) onBlur, onChange ve onFocus ynlendiricileri ile fonksiyon arabilirler. Javascript fonksiyonlarmzda Form nesnesinin iaretleme kutularndan hangisinin iaretlenmi olduunu belirlemek iaretli unsurun deerlerini bulabilmek, deitirebilmek veya baka bir yerde kullanabilmek iin nem tar. Browser, ele ald bir HTML sayfasndaki Form nesnesinin unsurlarn ve burada CHECKBOX nesnesini bir dizi-deikenin iinde tutar; bunlardan iaretlenmi olann CHECKED (iaretli) zelliini True (doru) yapar. Bu durumdan yararlanarak istediimiz kutunun iaretli olup olmadn sorgulayabiliriz. Burada nesnenin .value zellii ie yaramaz; nk kutu iaretli olsa da olmasa da .value zellii ayndr. aretleme kutularnda bilmek istediimiz husus, bu nedenle iaretli olup olmadklardr. rnein, sayfamzda, form1 adl bir formda isaret01 adl bir iaret kutusu varsa, bu kutunun iaretli olup olmadn u if dngs snayabilir:
if (document.form1.isaret01.checked) { .......
Bu ifade, kutu gerekten iaretli arzu ettiimiz bir ii yapar, deilse yapmaz.
JAVASCRIPT
102
Radyo Dmesi (Radio) Ziyaretinin bir HTML sayfasnda bir ok ktan birini semesini salayan radyo dmesi (radio) isimli iaretleme ynteminde ise, ayn ad tayan btn radyo dmelerinden biri iaretlenince, Browser dierlerini iaretlenmemi hele getirir; dolaysyla bu dmenin deeri (.value zellii) kullanlabilir. Aadaki kodu yazar ve radyo.htm adyla kaydederek, Browserda aarsanz, setiiniz radyo dmesinin deerinin uyar kutusunda kullanldn greceksiniz.
<HTML> <HEAD> <TITLE>Radyo Dugmesi rnegi</TITLE> <META http-equiv="Content-Type" content="text/html; charset=windows-1254"> <SCRIPT LANGUAGE = "JavaScript1.2"> function radyoDegeri(radyoNesnesi) { var deger = null for (var i=0; i<radyoNesnesi.length; i++) { if (radyoNesnesi[i].checked) { deger = radyoNesnesi[i].value break } } return deger } </SCRIPT> </HEAD> <BODY> <FORM name="form1"> <p><input type=radio name="sanatci" value="Trk">Neet Erta</p> <p><input type=radio name="sanatci" value="ark">Zeki Mren</p> <p><input type=radio name="sanatci" value="Pek anlamadm!">Sezen Aksu</p> <input type=button value="Ne tr mzik seviyorum?" onClick="alert(radyoDegeri(this.form.sanatci))"> </FORM> </BODY> </HTML>
JAVASCRIPT
103
HTML kurallar gerei, bir grup oluturan radyo dmeleri ayn ad tarlar. Burada this anahtar kelimesi ile iinde bulunduumuz yani bu formun, sanatc dizideikeninin tmyle fonksiyona gnderilmesini salyoruz. radyoDegeri adl fonksiyonumuz zaten byle bir bek bilgi bekliyor ve ald tm radyo dmesi nesnesine radyoNesnesi adn verip, nce byklne bakyor. Bir dizi-deikenin bykl eleman saysdr; ki bu bizim rneimizde tr. i sayac 0, 1 ve 2 deerleri iin snanyor ve bunlardan birinin iaretli olmas bekleniyor. aretli radyo dmesi bulunduu anda deeri deger deikenine yazlyor ve dng kesiliyor (break). Gerisi, uyar kutusunun deer deikeni ziyaretiye gstermesinden ibaret. Select Form nesnelerimizden bir dieri ise SELECT etiketiyle oluturduumuz seme kutusu. NAME, SIZE, ve MULTIPLE zelliklerine sahip olan bu nesne, onBlur, onChange, onFocus olay-ynlendiricileri ile kullanlabilir. SELECT nesnesinin deeri, kendisinin ayrlmaz paras olan OPTION etiketinin VALUE zelliinden gelir. Yukardaki radyo.htm kodunu, aadaki ekilde deitirip, sec01.htm adyla kaydedin:
<HTML> <HEAD> <title>Seme Kutusu Ornegi</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> <SCRIPT LANGUAGE = "JavaScript1.2"> function secDegeri(secNesnesi) { return secNesnesi.options[secNesnesi.selectedIndex].value } </SCRIPT> </HEAD> <BODY> <FORM name="form1"> <p><SELECT NAME="sanatci" SIZE=1> <OPTION value="Trk">Neset Ertas</OPTION>
JAVASCRIPT
104
<OPTION value="Sarki">Zeki Mren</OPTION> <OPTION value="Pek anlamadim!">Sezen Aksu</OPTION></P> <input type=button value="Ne tr mzik seviyorum?" onClick="alert(secDegeri(this.form.sanatci))"> </FORM> </BODY> </HTML>
Burada ziyareti asndan seme ilemi, seme kutusunun sandaki seme okuna basarak yaplyor; fakat bizim amzdan da nemli bir deiiklik var. Seilen unsur, SELECT nesnesinin dizi-deikenine deil, selectedIndex adl endeksin deer (.value) zelliine yazlyor. Dolaysyla, bir if dngs ile arama yapmak gerekmiyor; bu deeri uyar kutusuna sadece ayklama ilemiyle belirleyip geri gnderiyoruz. Burada dikkat edeceiniz husus, fonksiyona verilen bu form nesnesinin sanatc adl SELECT nesnesinin bilgi kmesi iinde sadece biri, selectedIndex adl endekse sahiptir. Fonksiyon bu bilgi kmesini secNesnesi adyla ele alyor ve iindeki options dizi-deikenin ziyaretinin setii ve dolaysyla sra numaras selectedIndex olarak iaretlenmi olann deerini (.value) alyor ve bunu doruca Uyar kutusuna gnderiyor. Fakat, HTMLden biliyorsunuz ki, SELECT etiketine MULTIPLE anahtar kelimesini koyarak, ziyaretinin birden ok seme yapmasna izin verebilirsiniz. Bu durumda selectedIndex iaretini kullanabilir miyiz? Hayr; bu bir deiken olduuna gre sadece bir deer (seilen ilk OPTIONn sra numarasn) tutacaktr. Fakat SELECT nesnesinin bir de selected zellii vardr ki iinde seilen btn OPTIONlarn numaras yazldr. Son kod rneimizi bu kez yle deitirelim ve sec02.htm adyla kaydedelim.
<html> <head> <title>Seme Listesi Ornegi</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> <SCRIPT LANGUAGE = "JavaScript1.2"> function secDegeri(secilenIsim) { var liste = ""
JAVASCRIPT
105
for (var i=0; i<secilenIsim.length; i++) { if (secilenIsim.options[i].selected) { liste += secilenIsim.options[i].text + "<p>" } } yeniPencere = window.open ("", "Setikleriniz", "height=200, width=200") yeniPencere.document.write("<H2>u arklar setiniz:</H2><P><P>") yeniPencere.document.write(liste) } </SCRIPT> </HEAD> <BODY> <FORM name="form1"> <p><SELECT NAME="sanatci" SIZE=4 MULTIPLE> <OPTION>Neset Ertas</OPTION> <OPTION>Zeki Mren</OPTION> <OPTION>Sezen Aksu</OPTION> <OPTION>Kayahan</OPTION> <OPTION>Mustafa Sandal</OPTION> <OPTION>Merref Tezcan</OPTION> </P> <input type=button value="Hangilerini setim?" onClick="secDegeri(this.form.sanatci)"> </FORM> </BODY> </HTML>
Burada seilenlerin listesini yeni bir pencerede atmz belgeye yazdryoruz. Bu size, bir formun unsurlarn elde ettiiniz listeyi daha sonraki bir sayfada, HTML unsuru olarak kullanabileceinizi gsteriyor. Kodu ksaca irdelersek; fonksiyonumuz, for dngsnn iindeki if dngs ile, kendisine ulaan bilgi kmesinde selected olarak iaretlenenleri semekte ve bunlarn metnini (.text), liste deikenine, aralarna <P> etiketi koyarak yazyor.
JAVASCRIPT
106
Password Form nesnesinin Javascript yoluyla mutlaka kullanmak isteyeceiniz bir gesi, Password (Parola) nesnesidir. Ziyaretinin, Password olarak nitelediiniz INPUT kutusuna yazd metin, kendisine * olarak grnr; fakat Browser ve dolaysyla Javascript bu metni bilir. Javascriptin ilk srmlerinde Password nesnesinin deeri Javascript tarafndan bilinemezdi; fakat 1.1 srm ile Javascript bu nesnenin de btn kontroln ele geirdi. Aadaki kodu parola.htm adyla kaydederseniz, Password nesnesinin de deerini elde ederek, kullanabileceinizi greceksiniz.
<html> <head> <title>Parolay Grntle</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> <SCRIPT LANGUAGE = "JavaScript1.2"> function parolaNedir() { alert("\nisim --->" + document.form1.gizli.name + "\ndeger --->" + document.form1.gizli.value) } </SCRIPT> </HEAD> <BODY> <FORM NAME="form1"> <BR> <B>Ltfen parola olarak herhangi bir kelime yazp dmeyi tklayn:</B> <BR><BR> <INPUT TYPE="password" NAME="gizli" SIZE="15"> <INPUT TYPE="button" NAME="goster" VALUE="Metni grmek iin tiklayin" onClick="parolaNedir()"> </FORM> </BODY> </HTML>
JAVASCRIPT
107
Burada herhangi bir form unsuru gibi, form1in gizli adl nesnesinin deerini alarak Uyar kutusunda gsteriyoruz. Gerek bir programda, bu deeri bir liste ile karlatrarak, kullanabilirsiniz. Ancak bu karlatrma ileminin ziyaretinin bilgisayarnda deil, Serverda yaplmas gerekir; bunun iin Password nesnesinin deerinin bir CGI programnda veya ASP uygulamasnda deerlendirilmesi gerekir. Browserlar bunu bildikleri iin Password nesnesini daima Servera yollarlar. Bunu snamak istiyorsanz, yukardaki kod Browsernzda akken, dmeyi tklamayn, klavyede Enter tuuna basn! Gizli Nesneler (Hidden) HTMLin INPUT etiketiyle sayfanza tr Hidden (Gizlenmi) olan deikenler koyabilirsiniz. Hidden etiketi, NAME ve VALUE zelliklerine sahiptir. Bu etiketten, genellikle ziyaretinin Form verilerini deerlendirirken, ziyareti sayfa deitirdii halde Serverda deeri sabit kalan deiken olarak yararlanabiliriz.
Javascript Nesneleri
Bu noktaya kadar ele aldmz btn nesneler, Javascripte HTML ve Browser tarafndan sunuluyordu. Fakat Javascript, kendi kendisine nesneler de oluturabilir. rnein, Javascript bir alfanmerik deikeni ele ald anda bu onun iin bir String nesnesi olur; ve dolaysyla, bir deikenden te baz zellikler ve metodlar kazanr. Dizi-deikenler de oluturulduklar anda Array nesnesi olurlar; yeni zellikleri ve metodlar olur. String Nesnesi Javascript kodunuzun ya HTMLin HEAD blmnde genel nitelikli, ya da herhangi bir fonksiyonun iinde yerel nitelikli bir deiken tanmladnz zaman bu trne gre bir String (alfanmerik, karakter) deiken olur. rnein: var kitabnAdi = Gazap zmleri
JAVASCRIPT
108
ifadesi bize ierii Gazap zmleri olan bir deiken kazandrr. eriinin nitelii nedeniyle bu deiken, String deikendir. Fakat u aadaki ifadeye bakarsanz, Javascripte yeni bir String nesnesi oluturmas iin de emir verebiliriz: var kitabinAdi = new String(Gazap zmleri) new, (=yeni) hatrlyorsanz, Javascripte yeni bir nesne oluturmas iin verdiimiz komuttu. Burada Javascripte yeni bir String nesnesi oluturmasn; bunun ieriini Gazap zmleri yapmasn, ve bu nesneyi, kitabinAdi isimli deikene atamasn sylyoruz. deiken oluturma asndan ikisi arasnda hi bir fark olmamakla birlikte, bu ikinci yntem bize, alfanmerik deikenlerin zel niteliini, nesne olduklarn gsteriyor. Bu sayede alfanmerik deikenlerin (yani String nesnelerinin) baz ilave zelliklerinden yararlanabiliriz. Bu zelliklerin sk kullanlanlarn yle sralayabiliriz: length Nesnenin uzunluunu belirtir. rnein kitabinAdi.length, bize 14 deerini verir. charAt(i) i ile belirttiiniz pozisyondaki karakteri verir. kitabnAdi.charAt(1) bize a deerini verir. indexOf(nnn) nnn ile belirttiiniz karakterlerin String iinde ilk getii konumun endeksini verir. kitabnAd.indexOf(za) ifadesi, 2 deerini verir. (G, 0 olmak zere saymaya balayn!) lastIndexOf(nn) nnn ile belirttiiniz karakterlerin String iinde getii son konumun endeksini verir. kitabnAdi.lastIndexOf(a), bize 3 deerini verir. substring(i,j) String nesnesinin ide balayan ve jde biten blmn verir. kitabinAdi.subtring(0,3) ifadesi bize Gaz deerini verir. Bu zellikler, sadece bir alfanmerik deiken veya rendiimiz yeni adyla String nesnesinde deil, String olabilecek herhangi bir metinde de vardr. rnein Gazap zmleri.length, 14; Gazap zmleri.charAt(1) ise a deerini verebilir.
JAVASCRIPT
109
String nesnelerinin kendilerine zg metodlar da vardr. Bunlar da ksaca ele alalm: .bold() Baladnz String nesnesini koyu yapar. rnein kitabnAdi.bold(), size <B>Gazap zmleri</B> metnini verir. .fontcolor(renk) String nesnesinin grntlenme rengini belirler. rnein kitabnAdi.fontcolor(red) size <FONT COLOR=red>Gazap zmleri</FONT> deerini verir. .fontsize(l) String nesnesinin grntlenmesinde harf bykln belirler. rnein kitabnAdi.fontsize(24) size <FONT SIZE=24>Gazap zmleri</FONT> deerini verir. .italics() String nesnesinin itelik harfle grntlenmesini salar. rnein kitabnAdi.italics() size <I>Gazap zmleri</I> deerini verir. .toLowerCase() String nesnesinin grntlenmesi srasnda btn harflerinin kk harf olmasn salar. rnein kitabnAdi.toLowerCase () size gazap zmleri deerini verir. .toUpperCase() String nesnesinin grntlenmesi srasnda btn harflerinin byk harf olmasn salar. rnein kitabnAdi.toLowerCase () size GAZAP ZMLER deerini verir.
JAVASCRIPT
110
Javascript ile Dinamik HTML
Bu kadar urap, Javascript renmemizin, iki amac olabilir; ziyareti ile etkileme ve HTML yaplmas imkan bulunmayan grsel etkileri oluturma. Ziyaretinin Form yoluyla size verecei bilgileri, yapaca tercihleri ve bunlar tutan deikenlerin deerlerini nasl belirleyeceimizi ve kullanabileceimizi ana hatlaryla grdk. Buraya kadar edindiimiz bilgilerden yararlanmak ve bunlar sayfalarmzn ieriine bal olarak gerek durumlara uygulamak tabir yerinde ise kolay. Javascriptin Browser ve HTML olaylarn (MouseOver, Click, Change gibi) ynlendirmekte kulland ynlendiricilerinden (onMouseOver, onClick, onChange gibi) yararlanarak, sayfalarmzda belki de Javascripti icad edenlerin hi de niyet etmedikleri bir tarzda da kullanabiliriz. Bu blmde Javascript ile oynayabileceimiz grsel oyunlar veya Javascript-Layer ve Javascript-CSS ilikilerini ele alacaz. Fakat nce ksaca Dinamik HTMLin (DHTML) imkan ve yeteneklerinden sz edelim. HTML ile DHTML arasndaki fark, ikincisinin stil komutlar, iki boyutlu tasarma st ste ylan katmanlar ekleyerek nc boyutu getiren ve veritaban ile oklu-ortam rnleri ile klasik Web unsurlar arasnda ba kuran teknolojiler iermesidir. DHTML, HTMLe ek etiket getirmez; mevcut etiketlere ilave zellik ve nitelik kazandrr. Bunu CSS (Cascading Style Sheets) teknolojisi salar. Ayrca DHTML yoluyla, HTMLin bilinen etiketlerinin bilinen zellikleri, ziyaretinin sayfanzda yapaca tercihlere, tutum ve davranlarna gre dinamik olarak deimesini programlayabilirsiniz. Baka bir deyile, DHTML, HTML etiketlerinin program yoluyla dinamik hale getirilmesi demektir. Browser dnyasnda IE, bir HTML sayfasndaki btn unsurlarn programlanmasna imkan veren ve adna Element Modeli denen bir yntem uygulayabilir. Fakat bunu yaptnzda, bu kez Netscapein bu modeli tanmayan yorum tarzna taklabilirsiniz. Baka
JAVASCRIPT
111
bir ifadeyle, IE iin bir sayfann tm, programland belirtilmeden programlanabilir. Bir rnek verelim. H1 etiketini tanrsnz ve srekli kullanrsnz; H1 olarak etiketlenmi bir metnin MouseOver olay ile ilgisi olamaz, diye dnebilirsiniz. O halde u kodu herhangi bir sayfaya yerletirin: <H1 onMouseOver=this.style.color = red; onMouseOut=this.style.color = black; >Beni Krmz Yap!</H1> Sonra bu sayfay nce IE ile sonra Netscape ile an; her ikisinde de Mouse iaretisini Beni Krmz Yap! kelimelerinin zerine getirin ve geri ekin. Bu deneyden sonra hayalkrklna kaplmayn; ayn etkiyi Netscape ile de salamanz mmkn; fakat bunu Javascript program ile yapabilirsiniz. imdi bu tr Javascript programlarnn rneklerini grelim. Dme Grafii Animasyonu Cascading Style Sheets (Ylmal Stil Sayfalar) denen ve HTMLin kendi ncedentanmlanm stil etiketlerinin (H1, H2, P gibi) biimini deitirmek dahil, kendi stil etiketlerinizi tanmlamanza imkan veren ek imkana gemeden nce, u ana kadar rendiimiz Javascript komutlarn ve HTML olaylarn kullanarak, kendimize bir Anime (Hareketli) leri-Geri dmesi ieren sayfa yapalm. Hatrlayacaksnz, HTMLin Anchor etiketi, Mouse iaretisinin zerine gelmesi (MouseOver) ve geri ekilmesi (MouseOut) olaylarna kar hassast; ve biz iki olay onMouseOver ve onMouseOut ynlendiricileri ile istediimiz fonksiyona balyabiliyorduk. Aadaki kodun mant, buna dayanyor; nce fonksiyonumuzda kullanmak zere drt deiken tanmlyoruz ve bunlara dmelerimizin adlarn ve boyutlarn deer olarak veriyoruz. Bu altrmay yapmaya balamadan nce ayn boyda drt grafiiniz olmas gerekir: (1) leri dmesinin Mouse iaretisi zerine geldii sradaki grnts (ileri_on.gif), (2) leri dmesinin Mouse iaretisi zerinden ekildii sradaki grnts (ileri_out.gif), (3) Geri dmesinin Mouse iaretisi zerine geldii
JAVASCRIPT
112
sradaki grnts (geri_on.gif), ve (4) Geri dmesinin Mouse iaretisi zerinden ekildii sradaki grnts (geri_out.gif). Konumuz grafikilik deil, ama dme grafiklerinizde yaz ve dier unsurlarn yerlerinin ayn olmas ve on ve out trleri arasnda dikkat ekici bir derinlik (boyut) fark bulunmas yerinde olur. dugmeDegistir isimli fonksiyonumuz, onMouseOver ve onMouseOut ynlendiricilerinden iki kme bilgi almaktadr: ilemin ileri mi geri olduuna ilikin ileri veya geri kelimesini ve bu bu halde kullanmas gereken deikenin adn. Fonksiyonumuz, bu bilgileri kullanarak kullanaca deikenin adn elde edecektir. Bunu eval() fonksiyonu ile yapyoruz. Hatrlayacaksnz, eval() ile, Javascriptin, bir ka deikenin ieriini deerlendirip, bize arzu ettiimiz bir biimde sunmasn salyoruz. Burada eval(), goruntuNesne adn verdiimiz deiken-deerini alacak (goruntuNesne, fonksiyonun onMouseOver veya onMouseOuttan ald ikinci kme bilgi, yani ya ileri_onDugme, ya ileri_outDugme, ya geri_onDugme, ya da geri_outDugme) ve buna .scr metodunu harekete geirecek kelimeyi ekleyecek. Bu metod ise fonksiyona, Javascript e dmenin kaynan (source) bulmas iin yol gsterecek. Aadaki kodu animeDugme.htm adyla kaydeder ve bir yerde saklarsanz, daha sonra bir ok dme veya grafik animasyonunda size yol gsterebilir:
<HTML> <HEAD> <SCRIPT LANGUAGE= "JavaScript1.2">  </SCRIPT> </HEAD> <BODY> <CENTER> <A HREF="javascript:history.back()" onMouseOver = "dugmeDegistir( 'geri', 'geri_onDugme' );window.status='Geri';return true;" onMouseOut = "dugmeDegistir( 'geri', 'geri_outDugme' );window.status='';return true;"> <IMG SRC="./geri_out.gif" BORDER=0 WIDTH=52 HEIGHT=42 NAME="geri"> </A> <A HREF="javascript:history.forward()" onMouseOver = "dugmeDegistir( 'ileri', 'ileri_onDugme' );window.status='Ileri';return true;" onMouseOut = "dugmeDegistir( 'ileri', 'ileri_outDugme' );window.status='';return true;"> <IMG SRC="ileri_out.gif" BORDER = 0 WIDTH = 52 HEIGHT = 42 NAME = "ileri"></A> </CENTER> </BODY> </HTML>
Katman Teknii (DIV, LAYER) Katman, HTMLe, kendi iindeki btn unsurlarn bir btn olarak ele alnmasn bildirir. Tabir yerinde ise, DIV veya LAYER etiketi ile oluturacanz katman ile HTML sayfasnn zerine, altn gsteren bir parmen kat koymu oluyorsunuz. CSS tekniklerini kullanarak Layer unsurlarn sayfada dier herhangi bir HTML unsurundan daha byk lde ve ok daha hassas ekilde biimlendirebilir; hatta hareket zellii kazandrabilirsiniz. Javascript, katmanlarn bu zelliklerini, eitli olaylardan yararlanarak, olayynlendiricilerine ve metodlara balayabilir.
JAVASCRIPT
114
Ne var ki, katman oluturmakta kullanabileceimiz etiketlerden biri olan LAYER Netscape tarafndan tannr fakat IE tarafndan tanmaz. Bu sebeple sayfalarmzda katmanlar LAYER yerine DIV ile oluturarak, iki Browsera da hitabedebiliriz. DIV etiketi de LAYER gibi katmanlar yapar; zellikleri ve metodlar da LAYER gibidir. Aralarndaki tek fark, DIV ile oluturulacak katmanlarn biim ve konum zellikleri kendi STYLE komutlar ile kazandrmak zorundasnz; oysa LAYERn ok daha kestirme kendi biim zellikleri vardr. Bununla birlikte STYLE metodunu kullanmakla DIV etiketine Javascript ile biimlendirilecek daha ok zellik kazandrabiliriz. nce, etiketini yakndan tanyalm: <DIV ALIGN=CENTER, LEFT, RIGHT Sayfada veya tablo iinde bulunduu yere gre, ortaya, sola veya raa hizalanmasn salar. CLASS=snf_ad Uygulanan stil snf varsa, burada belirterek btn DIVin ayn stili almasn salarz. DATAFLD=stun_ad DIVe bir veritabannn deeri veriliyor, verilerin gelecei stunun ad burada belirtilir. DATAFORMATAS=HTML , TEXT Balanan veritabannn HTML olarak m, yoksa dz yaz olarak m yorumlanacan belirtmeye yarar. DATASRC=#ID ID=deer LANG=dil Varsa, balanan veritabannn kimlii Bu DIVin kimlii ISO standartlarna gre bu blmde yer alacak metnin yorumlanmasnda uygulanacak dil kodu LANGUAGE=dil JAVASCRIPT, JSCRIPT, VBS veya VBSCRIPT. Bu DIV etiketinin iindeki Scriptin dili. Hi bir deer belirtmezseniz, JavaScript varsaylr.
JAVASCRIPT
115
STYLE=css1-zellikleri TITLE=balk
Bu etiketin unsurlarna uygulanacak stil komutlar Bilgi iin kullanlr; Bu unsurun deeri onMouseOver halinde ara bilgi notu olarak grntlenir.
>...</DIV> DIV ile oluturacanz katman nesnesinin Grnrlk veya Pozisyon belirleme zelliklerini de stil unsurlar ile belirtebilirsiniz. rnein bir DIV unsurunun HTML sayfas aldnda grnmemesini istiyorsanz, bunu DIV etiketinin iine koyacanz yle bir stil komutu ile salarsnz: STYLE="visibility:hidden;position:absolute;top:0; left:0; z-index:-1" Fakat, ne yazk ki, Javascript, DIVi bir sayfa unsuru olarak ele alarak, Browsera talimat vermeye kalktnda sylediklerini ya Netscape anlamayacaktr; ya da IE. nk iki Browsern DIV ve stil belirlemelerinde art kotuklar referans biimi farkldr. rnein, Netscape, document.layers[1].visibility= hide eklindeki bir Javascript ifadesi zerine, sayfanzda ikinci katman grnmez hale getirirken, IE, size document.layers1 Nesne Deil! eklinde hata mesaj verecektir. IE, sayfann unsurlarna document.all.nesne (nesne kelimesinin yerine nesnenin ad girecek) eklinde referans yaplmasn ister. Her iki Browsern anlayaca ekilde Javascript ile katman ve CSS komutlar vererek Dinamik HTML sayfalar yapmann bir yolu, sz gelimi, MacroMedia firmasnn DreamWeaver gibi, kendi Javascript kodunu kendini oluturan ve bunu her iki Browsern anlayaca dilde yazabilen HTML editr yazlmlar kullanmak olabilir. Ayrca Scott Isaacsin (scott@insideDHTML.com) DHTML Library Version 2.0b5 adl Javascript programn (dhtmlLib.js), http://www.insideDHTML.com adresinden indirerek, HTML sayfalarnzda kullanabilirsiniz. Bu tr haric Javascript belgesi bir HTML sayfasnda HEAD blmne u komutla balanr: <SCRIPT scr=dhtmlLib.js language=JavaScript> </SCRIPT>
JAVASCRIPT
116
427 satrlk bu Javascript belgesi programc olarak size, Javascript stil komutlarnz ister sadece Netscapein, ister sadece IEnin anlayaca ekilde yazma imkan veriyor. Bu belge, Browser IE ise Netscapein anlayaca komutlar IE iin, Browser Netscape ise IEin anlayaca komutlar Netscape iin tabir yerinde ise tercme ediyor. Byle bir tercme fonksiyonu, ana hatlaryla yle olabilir:
function Is() { var agent = navigator.userAgent.toLowerCase(); this.major = parseInt(navigator.appVersion); this.minor = parseFloat(navigator.appVersion); this.ns = ((agent.indexOf('mozilla')!=-1) && ((agent.indexOf('spoofer')==-1) && (agent.indexOf('compatible') == -1))); this.ns2 = (this.ns && (this.major == 2)); this.ns3 = (this.ns && (this.major == 3)); this.ns4 = (this.ns && (this.major >= 4)); this.ie = (agent.indexOf("msie") != -1); this.ie3 = (this.ie && (this.major == 2)); this.ie4 = (this.ie && (this.major >= 4)); this.op3 = (agent.indexOf("opera") != -1); } var is = new Is() if(is.ns4) { doc = "document"; sty = ""; htm = ".document" } else if(is.ie4) { doc = "document.all"; sty = ".style"; htm = "" }
Bu kodu, sz gelimi tercume.js adyla kaydeder haric Javascript belgesi olarak HTML sayfanzda HEAD blmne yle bir komutla balayabilirsiniz:
JAVASCRIPT
117
<SCRIPT scr=tercume.js language=JavaScript> </SCRIPT> Bu fonksiyonu doruca HTML belgenizin HEAD blmne de koyabilirsiniz. Her iki durumda da Javascripte DIV nesneleriyle ilgili btn stil komutlarnz, bir deerlendirmeden geirerek uygulamasn yle bir komutla bildirirseniz; golgeVer = eval(doc + '["golgeKatmani"]'); Javascript, diyelim ki balklara glge veren golgeKatmani adl bir katmannz varsa, ve katmann alaca golgeVer gibi bir deikeniniz bulunuyorsa bu deikeni Netscape iin: golgeVer = document.golgeKatmani IE iin ise: golgeVer = document.all.golgeKatmani diye belirtecektir. HTML sayfanza byle bir haric Javascript dosyas ilitirmek yerine, kendi kodunuzu kendiniz yazmak isteyebilirsiniz. imdi byle bir rnei birlikte yapalm. nce sayfamzn almasn istediimiz u ilk grnty birlikte inceleyelim: <js006.tif> Bu sayfada, soldaki spiral ss, stte de sekme olan bir kitap ya da defter esprisinin hkim olduunu gryorsunuz. zellikle iletim sistemlerinin ve programlarn grafik arayzleri, Internet ziyaretilerinize sekmeleri tklama alkanl kazandrm olmal. Bu sebeple, bu sayfa ziyaretiler asndan nerede ne olduu kolay anlalan bir sayfa saylabilir. Ziyareti birinci sekmeyi tkladnda, bu sekmeyle ilgili bilgilerin bulunduu sayfaya gidecek, ve belli ki bu sayfa da burada, kapan bulunduu alanda grntlenecektir. Daha teknik ifade edersek, sayfamz aldnda milimetrik olarak birbirinin zerinde bulunan drt DIVden (Kapak, Sekme1_zemin, Sekme2_zemin, Sekme3_zemin) sadece Kapak DIVi grnr (visible) durumda olacaktr. Ziyareti diyelim ki
JAVASCRIPT
118
Sekme1i tkladnda, Javascript Kapak DIVini grnmez (hidden) hale, Sekme1in sayfasn ieren DIVi grnr hale (visible) getirecektir. Ziyaretinin dier sekmelerden sonra Sekme1i yeniden tklayabileceini hesaba katarak, Sekme1e sadece Kapak DIVini deil, emniyette olabilmek iin Sekme2 ve Sekme3n ierik DIVlerini de grnmez hale getirtmemiz uygun olur. Dier sekmeler de, kendi sayfalarn aarken, dier sayfalar ve Kapak, grnmez hale getireceklerdir. Grnmez halde olan bir DIVi yeniden grnmez hale getirmenin Javascript veya Browser asndan bir sakncas yoktur. Bu sayfada sekmelerin ieriklerini tutan DIVler ziyaretinin sekmeleri tklamasnn oluturaca Click olaynn onClick ile ynlendirilmesi suretiyle deitirilecektir. HTMLde DIVlere ilikin etiketi yazarken uygulayacanz srann hi nemi yoktur; Browser, DIVlerin z-index saysna bakarak hangisinin altta hangisinin stte olduunu belirler. Fakat yine de iyi programclk gerei, DIVleri en alttan en ste doru yazmaktr. imdi, daha sonra sekmeler.htm adyla kaydedeceimiz kodumuzu adm adm birlikte yazalm. Tabi, nce standart unsurlarmzla sayfann atsn atalm:
<HTML> <HEAD> <TITLE>Sekmeler</TITLE> <META HTTP-EQUIV="Content-Type" content="text/html; charset=windows-1254"> <SCRPT LANGUAGE="JavaScript">  </SCRPT> </HEAD> <BODY bgcolor="#FFFFFF"> ........................ <p>Sekmeli sayfamza ho geldiniz!</p> <p> </p> </BODY> </HTML>
JAVASCRIPT
119
Burada nokta-noktal yerlerin birincisine Javascript fonksiyonumuz, ikincisine ise DIV etiketlerimiz girecek. Fonksiyonu ina etmeye balamadan nce, tklamayla deimeyecek DIVlerin etiketlerini yazalm. e Spiralden balayalm; ikinci noktal yere unlar yazalm:
<div id="Spiral" style="position:absolute; left:13; top:141px; width:64px; height:288; z-index:1; background-image: url(spiral.gif); layer-background-image: url(spiral.gif); border: 1px none #000000; visibility: visible"> </div>
Bu rnei byle satr satr yazmamzn sebebi, DIV etiketinin blmlerinini aka grmeniz iindir: dikkat ettiyseniz, Spiral adl bu DIVe CSS ile tayin edebileceimiz btn pozisyon zelliklerini kazandryoruz. Zemin grafii olarak spiral.gif diye bir resim kullanyoruz. Kapak adn verdiimiz dier DIV ise yle oluacak:
<div id="Kapak" style="position:absolute; left:73; top:141; width:290; height:288px; z-index:2; visibility: visible; background-image: url(kapak01.gif); border: 1px none #000000"><h1 align="center"><b><font face="Arial, Helvetica, sans-serif">KTABIN NDEKLER GRMEK N SEKMELER TIKLAYINIZ!</font></b></h1></div>
Bu iki DIVin dinamik hi bir zellii olmad iin ieriklerinde onClick veya baka bir ynlendirici yok. imdi dinamik DIVler olan Sekme1, Sekme2 ve Sekme3 adn verdiimiz sekmeyi oluturalm; bunlarn iinde, onClickin araca fonksiyonu ve bu fonksiyona vereceimiz argmanlar (parametreler) bulunacaktr. ite Sekme1in DIVi:
<div id="Sekme1" style="position:absolute; left:73px; top:95px;
JAVASCRIPT
120
width:96; height:46; z-index:3; visibility: visible"> <a href="#" onClick="katmanGizleGoster( 'document.layers[\'Sekme1Zemin\']','document.all[\'Sekme1Zemin\']','show', 'document.layers[\'Sekme2Zemin\']','document.all[\'Sekme2Zemin\']','hide', 'document.layers[\'Sekme3Zemin\']','document.all[\'Sekme3Zemin\']','hide', 'document.layers[\'Kapak\']','document.all[\'Kapak\']','hide')"> <img src="sekme1.gif" width="96" height="46" border="0"> </a> </div>
DIV etiketi genellikle byle yazlmaz; fakat neyin-ne olduunu tartabilmek iin birinci Sekme DIVimizi aka yazyoruz. DIVin adndan sonra stil komutu ve grnr olup olmadna ilikin visibility zellii belirtiliyor. Sonra, bu DIVin iine koyacamz resme # balants kazandryor. Bu balant tpk bir sayfa veya site balants gibi, bir metne veya grafie A etiketinin zelliklerini kazandrr. Hatrlarsanz, DIV etiketinin olaylar arasnda en azndan 3 ve 4nc srm Browserlar asndan hemen hi bir olay (Click, MouseOver gibi) olmadn, bu nedenle DIVin onClick, onMouseOver gibi ynlendiricilerle ynlendirilemeyeceini sylemitik. Bu sebeple, DIVin iine bir resim koyarak, bu resme Anchor etiketi balayp (# eklindeki bu Link tklandnda Browser hi bir yere gitmeyecektir!) bu etiketin Click olayna cevap verme zelliinden yararlanabiliriz. Daha sonra yazacamz katmanGizliGoster() adl fonksiyonumuz, onClick halinde, yaplmasn istediimiz ilere dair parametreleri (argmanlar, arguments) erli gruplar halinde alacak: birinci grup bilgi Netscape iin kullanlacak, ikinci grup bilgi IE iin kullanlacak, nc grup bilgi ise hedef katmann grnr hale mi geleceini, yoksa gizleneceini mi belirtmek iin kullanlacak Burada grnmesini istediimiz katman iin gster anlamna Show, gizlenmesini istediimiz katman iin gizle anlamna Hide kelimelerini ngilizce kullanyoruz; nk bu kelimeleri daha sonra fonksiyonda Netscape iin komut olarak kullanacaz. Bir sekme tklandnda, Javascript drt i birden yapsn istiyoruz: Kapak ve dier iki sekmenin
JAVASCRIPT
121
sayfalar gizlensin; tklanan sekmenin sayfas gsterilsin. O halde, fonksiyona drt ayr erli bilgi kmesini parametre olarak vereceiz. Buraya gelmiken, dier iki sekmenin DIV etiketlerini de yazalm:
<div id="Sekme2" style="position:absolute; left:169; top:95; width:95; height:46; zindex:4; visibility: visible"><a href="#" onClick= "katmanGizleGoster('document.layers[\'Sekme1Zemin\']', 'document.all[\'Sekme1Zemin\']','hide','document.layers[\'Sekme2Zemin\']', 'document.all[\'Sekme2Zemin\']','show','document.layers[\'Sekme3Zemin\']', 'document.all[\'Sekme3Zemin\']','hide','document.layers[\'Kapak\']', 'document.all[\'Kapak\']','hide')"><img src="sekme2.gif" width="95" height="46" border="0"></a></div> <div id="Sekme3" style="position:absolute; left:266; top:95; width:97; height:46; zindex:5; visibility: visible"><a href="#" onClick= "katmanGizleGoster('document.layers[\'Sekme1Zemin\']', 'document.all[\'Sekme1Zemin\']','hide','document.layers[\'Sekme2Zemin\']', 'document.all[\'Sekme2Zemin\']','hide','document.layers[\'Sekme3Zemin\']', 'document.all[\'Sekme3Zemin\']','show','document.layers[\'Kapak\']', 'document.all[\'Kapak\']','hide')"><img src="sekme3.gif" width="97" height="46" border="0"></a></div>
Bu satrlarn hemen arkasndan, sekmeler tklandnda grntlenecek olan sekme sayfalarn oluturacak DIV etiketleri gelecektir. Onlarn kodlar ise yle:
<div id="Sekme1Zemin" style="position:absolute; left:73px; top:141px; width:289px; height:288px; z-index:6; visibility: hidden; background-image: url(sekme1_zemin.gif); layer-background-image: url(sekme1_zemin.gif); border: 1px none #000000"><p> </p><h2><b>Burada Sekme 1'in bilgileri var...</b></h2></div> <div id="Sekme2Zemin" style="position:absolute; left:73; top:141; width:289; height:289; z-index:7; visibility: hidden; background-image: url(sekme2_zemin.gif); layer-background-image: url(sekme2_zemin.gif); border: 1px none #000000"><p> </p><h2><b>Burada Sekme 2'nin bilgileri var...</b></h2></div> <div id="Sekme3Zemin" style="position:absolute; left:73; top:141; width:289; height:289; z-index:8; visibility: hidden; background-image: url(sekme3_zemin.gif); layer-background-image: url(sekme3_zemin.gif); border: 1px none #000000"><p> </p><h2><b>Burada Sekme 3'n bilgileri var...</b></h2></div>
DIVlerimizi tamamladmza gre HTML sayfamzda baa dnerek, fonksiyonumuzu yazabiliriz. Birinci nokta-noktal yere u kodu yazalm; sonra ayrntlarna bakalm:
<script language="JavaScript">
JAVASCRIPT
122
<!-function katmanGizleGoster() { var i, gorunurluk, parametreler, Nesne; parametreler = katmanGizleGoster.arguments; for (i=0; i<(parametreler.length-2); i+=3) { gorunurluk = parametreler[i+2]; if (navigator.appName == 'Netscape' && document.layers != null) { Nesne = eval(parametreler[i]); if (Nesne) Nesne.visibility = gorunurluk; } else if (document.all != null) { if (gorunurluk == 'show') gorunurluk = 'visible'; if (gorunurluk == 'hide') gorunurluk = 'hidden'; Nesne = eval(parametreler[i+1]); if (Nesne) Nesne.style.visibility = gorunurluk; } } } //--> </script>
katmanGizleGoster() fonksiyonu ald argmanlardan bir parametreler dizi-deikeni yapyor; ve oluturaca nesneyi bulunduu Browser Netscape ise bunlardan document.layers diye balayanlarn seerek; bulunduu Browser IE ise, document.all diye balayan argmanlar seerek oluturuyor; ve Browser IE ise ve hedef katman gsterilecekse visibility zellii visible, gsterilmeyecekse hidden; Netscape iin bizim verdiimiz Show ve Hide kelimeleri aynen kullanlyor. Kodlar girdikten sonra sayfanz sekmeler.htm adyla kaydederseniz ve Browsernzda aarsanz, her sekme iin verdiiniz metnin grntlendiini, dier sekmelerin gizlendiini greceksiniz: <js007.tif> <js008.tif> <js009.tif>
JAVASCRIPT
123
Sonu
Anlatacaklarmzn hepsi bu kadar; ama tabi Javascript bu kadar deil. zellikle Belge Nesne Modeli (DOM) konusunda, Javascript yoluyla sayfalarnza veri balama konusunda, daha bir ok unsuru grmedik. IE5in Browser dnyasna getirdii yeni yeni olaylara nasl Script yazlabileceine deinmedik. Ama bu kitapkta amacmz Javascriptin bu ileri aamalarna hazrlanmanz iin gerekli temel bilgileri vermekti. Bu amaca ulamak iin nemli bir nokta kald:hatasz Script yazmak. ster balang dzeyinde, ister ileri dzeyde, hangi dzeyde olursa olsun, hatasz Javascript program yazmak iin dikkat etmeniz gerekenleri belirtelim: 1. Browsern Javascript yorumlaycs (belki de imdilik) programcnn ne demek istediini anlama imkanna sahip deildir; bu sebeple onun anlayaca ekilde, yani nasl yazlmas gerekiyorsa, yle yazn. Daktilo hatas yapmayn. Bir deikeni nasl tanmlamsanz, batan sona o yazlla yazn. Baz daktilo hatalar HTMLe aittir; Javascript sizi uyarmaz bile. Hele daktilo hatas yznden HTMLin mant ve ak bozulmuyorsa, Browser da hata mesaj vermez! Bu sebeple, programlarnz snadnz Browsera deil, kendinize gvenin ve kodlarnz satr satr, kelime kelime okuyun. 2. Atnz etiketin kapanmas gerekiyorsa kapatn. zellikle </SCRIPT> etiketini unutmayn. Javascript programcnn en ok hata yapt nokta byktr, kktr iaretleri arasnda satrlar dolusu kod varsa, at etiketi kapatmamaktr. 3. Parantezleri, zellikle fonksiyonlarn ssl parantezlerini kapatmay unutmayn. ift-trnak ve tek-trnak iaretlerinin kapatlmas da ok kolaylkla unutulur. Bir metnin iinde Javascript asndan ayra iareti saylan trnakla, metne ait alnt iareti saylan trna birbirinden ayrmanz gerekir. Hatrlyorsanz, Javascripte Bu sana ait deil; bu metnin parasdr! demek istediiniz trnaklar ters bl iareti ile \ ve \ eklinde yazyoruz.
JAVASCRIPT
124
3. Tam veya kesirli say deikenlerine alfanmerik (karakter, String) deikeni muamelesi yapmayn. rnein, (.bold gibi) metin biimlendirme metodlar say tutan deikenlere uygulanamaz; say olmayan deikenler de ilerinde rakam olsa bile aritmetik ilemden geirilemez. Say bekleyen fonksiyona karakter, karakter bekleyen fonksiyona say verirseniz; Javascriptin fkesine sebep olabilirsiniz! 4. Javascript, ilem mant hatasn bulamaz. Mesela bir drtgenin alann bulurken, kenarlardan birinin yzde 20sini alp, dier kenarla arpyorsanz, Javascriptin Drtgen alan yle hesaplanmaz! demesini bouna beklersiniz. lemlerinizin mantk ak ve matematik doruluunu salamak sizin grevinizdir. 5. Programn yazlma aamasnda deikenlerin belirli bir noktada ne deeri aldn Javascripte uyar kutularyla size gstermesini bildirin. Sonra bu uyar kutularn kaldrabilirsiniz. rneini grdmz window.onerror() metodu da programn gelitirilme aamasnda hata yakalamaya yarar. 6. Kaynaklara bavurmaktan ekinmeyin. Javascript iin en zengin kaynak, fabrikasdr: http://home.netscape.com/computing/webbuilding/studio/scripting.html. Ayrca ad her ne kadar Javascript deil de JScript bile olsa, Microsoftun da zengin bir Javascript retim alan vardr: http://msdn.microsoft.com/scripting/default.htm. 7. Snayp, yanlmaktan daha iyi renme yntemi yoktur; hata yapmaktan korkmayn. Snayn; yanl dzeltin; bir daha snayn. Ve bol bol Script yazn.
JAVASCRIPT
125

Javascript

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Javascript

Uploaded by

Copyright:

Available Formats

JAVASCRIPT

Javascriptte lemler (Operator)...................................................................32

Program Dng Denetimi.............................................................................47

Fonksiyon ile HTML unsarlarnn ilikisi............................................................64

Javascriptin Nesneleri, Olaylar ve zellikleri..........................69 Nesneler..................................................................................70

Nesneler ve Olaylar Birletirelim.............................................87

Belge (Document) Nesneleri.........................................................................94 Form Nesneleri...........................................................................................99

Javascript ile Dinamik HTML...................................................111

function merhaba() { alert("Merhaba, Dnya!") }

Sonra, merhaba2.htm dosyasnda u deiiklii yapn ve merhaba3.htm adyla kaydedin:

Javascriptin Temel lkeleri

Javascript Yazm Kurallar

Javascript 1.0deki anahtar kelimeler: break (kes) continue (devam et)

Javascript Deikenleri (Variable)

Javascriptte lemler (Operator)

Program Dng Denetimi

Dz yaz programnda aadaki kodu yazn ve dongu5.htm adyla kaydedin:

// --> </SCRIPT> </HEAD> <BODY> </BODY> </HTML>

Fonksiyona deer gnderme ve deer alma

Fonksiyon ile HTML unsarlarnn ilikisi

Javascriptin Nesneleri, Olaylar ve zellikleri

Bu fonksiyonu da HTMLin HEAD blmnde yle yazabilirsiniz:

Nesneler ve Olaylar Birletirelim

Netscapede ikinci ara ubunun gsterilmesi (=1) veya gizlenmesi (=0).

outerWidth outerHeight left top alwaysRaised

Sonra, bu Framesetin arda bulunduu doc1.htm olarak, u kodu kaydedin:

doc2.htm ise olduka basit:

Belge (Document) Nesneleri

document.close() </SCRIPT> <body> </body> </html>

Javascript ile Dinamik HTML

You might also like