T.C.

CELAL BAYAR NVERSTES TURGUTLU MESLEK YKSEKOKULU

BLGSAYAR TEKNOLOJS VE PROGRAMLAMA

JavaScript DERS NOTU

Seval ZBALCI seval.ozbalci@bayar.edu.tr MANSA 2003

NDEKLER
NDEKLER ...................................................................................... 2 JAVASCRIPT ......................................................................................... 4 DEKENLER..................................................................................... 6 Genel Deiken zellikleri .................................................................. 6 Deikenlerin lem Operatrleri le Kullanm ....................................... 7
Aritmetik Operatrler................................................................................. 8 Karlatrma Operatrleri........................................................................... 9 Mantksal Operatrler ................................................................................ 9 zel karlatrma Operatr....................................................................... 9

Internet Explorer & Netscape Fark .................................................... 11 Ekrana kt Ve Klavyeden Bilgi Giri.................................................. 14
Prompt ()................................................................................................14 Write() ...................................................................................................15

KOUL VE DNGLER ........................................................................ 16 Koul Yaplar ................................................................................. 16

If (Eer) .................................................................................................16 If .. Else (Eer ... Deilse) .........................................................................16

Dng Yaps .................................................................................. 18

For Dngs............................................................................................18 artl Dng Yaps While ..........................................................................19 Do .. while yaps .....................................................................................19 Break ve Continue fadeleri .......................................................................20 Switch-Case fadesi ..................................................................................21

FONKSYON KAVRAMI ........................................................................ 22 Fonksiyona Deer Gnderme ve Deer Alma....................................... 22 NESNELER VE ZELLKLER................................................................. 24 Window Nesnesi ............................................................................. 24
Pencere Amak Ve Kapamak ......................................................................24 Window.Location.Protocol ..........................................................................26 Window.History.Go...................................................................................26 Status Bar Kullanm .................................................................................27

Tarayc Nesnesi ............................................................................. 27 ereve (Frame) Nesnesi ................................................................. 27 Form Nesnesi ................................................................................. 29
Text Alan ...............................................................................................30 ifre Alan ...............................................................................................30 Butonlar .................................................................................................31 Radyo (Radio) Dmeleri ..........................................................................31 Select Unsuru ..........................................................................................32

OLAYLAR .......................................................................................... 33 onClick .......................................................................................... 33 onMouseOver , onMouseOut ............................................................. 34 onSubmit....................................................................................... 35

2 :.

onReset ......................................................................................... 35 onChange ...................................................................................... 36 onLoad, onUnLoad .......................................................................... 37 onError, onAbort ............................................................................. 37 JAVASCRPT LE DHTML ..................................................................... 38 Katman zelliklerini Deitirme......................................................... 38

Seval ZBALCI seval.ozbalci@bayar.edu.tr - Internet Programlama Ders Notu - CB Turgutlu MYO

.: 3

JAVASCRIPT
Java ile JavaScript olduka fazla kartrlmaktadr. Java, Sun firmas tarafndan Pascal ve Delphi dillerinden esinlenerek yazlm bir programlama dilidir. Sonuta iletim sistemlerinden bamsz bir program elde edersiniz. Yani exe veya com uzantl dosya oluturur. Fakat JavaScript bu tr bir programlama dili deildir. Yorumlanmas iin bir taraycya ihtiya duyar. Bu yzden script dilidir. Html dosyasn iine gmldr. Sonuta elinizde exe veya com uzantl bir dosya yoktur. Javascript, Netscape firmas tarafndan C dilinden esinlenilerek yazlmtr. Yazlma amac Html'in sahip olmad baz zelliklerin web sayfalarnda kullanlmak istenmesidir. Ziyareti ile etkileim gibi nemli unsurlarda Html'in eksiklerini tamamlayc unsurlara ihtiya duyulmas sonucunda Netscape firmas bu konuya arlk vererek JavaScript script dilini internet ortamna kazandrmtr. Netscape ve Internet Explorer tarayclarnn JavaScript kodundaki anlaylar farkldr. Nedeni ise, Netscape JavaScript dilini hazrladnda Microsoftun bu dilin zelliklerini veya yazlm tarzn tam anlamyla Internet Explorer'a eklemeyip kendi yazm kurallarn belirlemesidir. Bu yzden JavaScript kodu yazarken bu iki tarayc zelliklerini de gz nnde bulundurmalyz.

Java Script'in Genel Baz zellikleri

o Javascript kodlarn yazmak iin Windows kullanclar iin NotePad, Mac. kullanclar iin Simple Text yeterlidir. o o JavaScript kodlar <script> etiketi ile balar, </script> etiketi ile biter. <script> etiketi, JavaScript'i anlamayan eski srm tarayclarn bu ksm gemeleri iindir. Genellikle yazm tarz aadaki ekildedir: <script> <! JavaScript kodlar --> </script> yi bir programc kod satrlarnda aklama yapar. Bu satr u ilemi gerekletiriyor gibi aklayc bilgiler yazar kodlarnn yanna. JavaScript'te bu tr

4 :.

aklamalar // ile balar ve // ile biter. Eer aklamanz bir satrdan fazla ise /* ile balar */ ile biter. rnek: // bu satr kullanlacak deikenlerin tanmlanmas /* aklama satr 1 aklama satr 2 aklama satr 3 */ JavaScript kodlar Html kodlarn arasnda yer alr. Veya uzants js olan dosyalarda saklanarak yine Html ierisinden arlr. Java Appletleri gibi Html'den ayr bir unsur deildir. Javascript Html'in bir parasdr. Kullanlacak yere gre Html'in ierisinde kullanlr. Fakat genelde <head> </head> etiketleri arasnda kullanlr. Javascript kodlar bittiinde elinizde asla kendi bana alan uzants exe veya com olan bir dosya olmaz. Her zaman iin tarayc tarafndan yorumlanmas gerekir. Yorumlanmas demek Javascript kodunun almas anlamndadr. Nesne ve buna uygulanan olaylar ile ilgili bir takm grevleri vardr. Javascript kulland her unsuru nesne olarak alglar. Siz bu nesneleri tklamak, zerine gelmek, zerinde kmak gibi olaylar ile altrrsnz ki bu da Javascript'in ziyareti ile etkilemesi demektir.
NOT: Her konuyu yle bir okuyup hemen ardndan uygulamalsnz. Uygulamada dikkat edilmesi gereken; her kod rneinin (deikenler konusundakiler gibi) kendi bana bir i yapmayabileceidir. Bu tr kodlar dierlerinden farkl olarak arka plan ak sar ve italik olarak yazlmtr. Uygulayabilmek iin dier birtakm kodlara da ihtiya duyulur. Bu yzden bu tip konular sadece bilginiz olmas amacyla okuyup geiniz.

Seval ZBALCI seval.ozbalci@bayar.edu.tr - Internet Programlama Ders Notu - CB Turgutlu MYO

.: 5

DEKENLER
Genel Deiken zellikleri
Deikenler Javascript'te ve dier programlama dillerinde olduu gibi bilgi depolamak bu bilgiyi kullanmak amacyla kullanlrlar. Deikenler "var" komutu ile oluturulurlar. Karakter olarak kullanldklarnda ilem yaplamazlar. Nmerik olarak kullanldklarnda ancak ilem yapabilirler. Kullanmna bir rnek verelim. rnek: var sayi; var sayi1=10; var yazi1="10"; Burada birinci satrdaki "sayi" deikeni script kodunun herhangi bir yerinde kullanlmak zere oluturulmutur. kinci satrda "sayi1" adndaki deikenin deeri hemen o satrda = ifadesinden sonra verilmitir. Byle deiken tanmda yaplabilir. nc satrda ise deikenin karakter ifadesi olarak kullanmn gryoruz. Burada nemli olan karakter deikenlerin alnt " " ifadesinin arasnda kullanlmasdr. Her deikenden sonra ; iareti konulmaldr. Tarayc, bir baka komut satrna getiini bu yol ile anlar. imdi deikenlerle ilgili matematik ilemlerinin nasl olacan grelim. Bunu daha iyi aklayabilmek iin rnekler zerinde alalm. rnek: var sayi1=10; var sayi2=20; var sayi3=sayi1+sayi2; Birinci ve ikinci satrlarda deikenler oluturduk. nc satrdaki ise sayi3 deikeni ile dier iki deikeni topladk. Burada nemli olan ilem yapmak istediimizde deiken deerinin alnt " " iaretlerinin arasna konmamasdr. nc satr - ileride greceimiz write () fonksiyonu ile - taraycda yazdrrsak greceimiz deer 30'dur. imdi de deikenleri karakter olarak tanmladmzda neler olduuna bakalm. rnek: var sayi1="10"; var sayi2="20"; var sayi3= sayi1+sayi2 ;

6 :.

Bir nceki rnekten farkl olarak deiken deerlerinin alnt iaretleri ierisinde yazdk. Eer sayi3 adl deikeni taraycda bastrrsak greceimiz ifade 1020 ifadesidir. Yani tarayc karakter olarak tanmladmz deikenleri ardada ekledi. Burada unutulmamas gereken ey bunun sadece + ileminde geerli olmasdr. Dier ilem trlerinde bu tr bir sonu alnamaz. Deikenlere ad verirken uymamz gereken kurallar. 1) Deiken isimleri harf veya _ karakteri ile balayabilir. Rakam kullanmak istersek 2. karakterden sonra kullanabiliriz. Yani deikenin ilk karakteri rakam olamaz. Deiken isimlerine rnekler; var url="webteknikleri"; doru var _rakam=12; doru var a1=123; doru var 3uzler="zler" yanl 2) Deiken tanmlarken bir veya birden fazla boluk brakmak tanmlama asndan herhangi bir sorun tekil etmez. 3) Deiken ad verirken kullandmz harflerin byk veya kk olmas baz tarayclarda fark etmezken ou taraycda farkl bir deiken anlamndadr. Yani; var say=1; var Say=1; Birok taraycda farkl deikenler olarak alglanr.

Deikenlerin lem Operatrleri le Kullanm

Deikenlere ilem yaptrabilecek operatrleri ve zelliklerini inceleyelim. Operatrleri birka ksma ayrarak inceleyelim; o o o o Aritmetik operatrler Karlatrmak operatrleri Mantksal operatrler zel operatrler

Seval ZBALCI seval.ozbalci@bayar.edu.tr - Internet Programlama Ders Notu - CB Turgutlu MYO

.: 7

ARTMETK OPERATRLER
Her zaman kullandmz bu operatrler + , - , * , / , % 'dir.Deikenlerin eitli aritmetik operatrlerle kullanmna bir rnek verelim. rnek: var i=10; var j=11; var k=12; var m,n; m=i*j+k; n=i*(j+k); lk satrda deikenlerimizi hem tanmlayp hem de deer atadk. Drdnc satrda ise m ve n deikenlerini tanmlayp deer atamadk. Dier satrlarda ise m ve n deikenlerinden istenen ilemleri tanmladk. Buna gre son iki satrn sonular farkldr. nk parantezlerin ilem ncelii vardr. Beinci satrn cevab (10*11)+12 = 122 eklinde olacaktr. Son satrda ise sonu 10*(11+12) = 230 olacaktr. Dier bir ilem operatr olan % 'nin yapt ilemi u ekilde anlatabiliriz. % operatr % iaretinin solundaki deikeni sandaki deikene bler ve kalan verir. rnek olarak; var a=100; var b=9; var c=100%9; Burada c deikenin deeri 100/9'un kalan 1'dir. Yani c deikeninin deeri 1 olacaktr. Dier -(eksi) ve / (blme) operatrlerinin ilemleri kendilerine atanan kartma ve blme ilemidir. Bu operatrlerin ksa kullanm iinde Javascript bize kolaylk salar. Bu operatrleri sralamak istersek; -= : *= : /= : %= : ++ : -Bu operatrlerin ksa uzun ekilde yazllar ise aadaki gibidir. x+=y x=x+y x-=y x=x-y x*=y x=x*y x/=y x=x/y x%=y x=x%y x++ x=x+1 x-- x=x-1 Bu operatrlerin nasl ilem yaptn bir rnekte grelim. var x,y,z;

8 :.

x=10; y=20; z=30; x++; x+=y; z--; y*= z; imdi her zamanki gibi ilem satrlarnn cevaplarn birlikte bulalm.

x++ satr x=x+1 ileminin yaplmasn syler. Buna gre x deikeni 11 deerini alr. kinci satra geldiimizde x+=y satr x=x+y ileminin yaplmasn syler. Bir nceki satrdaki x'in deeri 11 idi. Bylelikle yeni x'in deeri 11+20=31 olacaktr. Dier satrda z-- ilemi sonucunda z'nin deeri 29 olacaktr. Son satrda ise y=y*z ilemi ile y deikeni 20*29= 380 deerini alacaktr.

KARILATIRMA OPERATRLER
Deikenlerin birbirleri ile karlatrlmak istendiinde kullanlan operatrlerdir. Bu operatrler ise; == operatr iki deikenin birbirine eitliini kontrol eder. != operatr iki deikenin birbirine eit olmad durumlarda kullanlr. < operatr bilindii zere kktr operatrdr. Soldaki deikenin

sadakinde kkln kontrol eder. <= soldaki deikenin sadaki deikene kk eitliini kontrol eder. > soldaki deikenin sadaki deikene gre byk olup olmadn kontrol eder. >= soldaki deikenin sadaki deikene byk eitliini kontrol eder.

MANTIKSAL OPERATRLER
ki deikene bal karlatrlmalarn yaplmak istendii durumlarda kullanlr. Operatrler && , || , ! operatrleridir. && And (ve) operatr iki deikenin de deeri doru olmas istendiinde kullanlr. || Or (veya) operatr iki deikenden en az birinin doru olmas durumu istediinde kullanlr. ! Not (deil) operatr deikenin deeri doru ise yanl , yanl ise doru olmas istendii durumlarda kullanlr.

ZEL KARILATIRMA OPERATR

Bu operatr iki deiken arasnda karlatrma yapmann en sade ve ksa yoludur. Operatrn kullanm biimi : deiken_1 [karlatrma operatr] deiken_2 ? deiken_3 : deiken_4
Seval ZBALCI seval.ozbalci@bayar.edu.tr - Internet Programlama Ders Notu - CB Turgutlu MYO .: 9

Bunu bir rnekle aklayalm. Deikenleri var ile tanmladmz farz ediyorum. Buna gre ; a<b?c:d Yukardaki satrda yaplmas istenen ilem; a deikeninin b deikeninden kk olup olmad karlatrlyor. Buna gre cevap doruysa ilemin sonucu c deikeninin deeri deilse d deikeni oluyor. imdi tm bu rendiklerimizi bir Javascript kodunda grelim. Bu bizim ilk Javascript kodumuz olacak. rnek : <script Language="JavaScript 1.2"> <! var i=1; var j=2; var k=3; var m=4; var n=5; var p=6; var q=7; i=+j; j++; k--; m=m+k; n=*j; i < j ? 3 : 1 ; k >= n ? 0 : 1 ; k=2 && j=5 ? p : q ; i=2 || j=3 ? m : n ; p!=2 ? k : 10 ; -- > </script> lk yedi satrda deikenlerimizi hem tanmladk hem de deer atadk. Byle bir yazm yapabileceimizi deikenleri anlatmaya balarken sylemitik. lem satrlarna getiimizde ise; i+=j; Bu ilem daha da nce grdmz gibi bize i=i+j ilemini yapmamz syler. Buna gre i deikeninin deeri 3 olacaktr. Hemen altndaki satrda bulunan j++ ilemi dolaysyla da j deikeni 3 deerini alacaktr. Dier ilem satrnda k--ilemi ile de k deikeni 2 deerini alr. Bir dier satrdaki m=m+k ilemi ile m(m=4) deikeni k(k=2) deikeni toplanarak 6 deerini alr. n=*j ilemi ile de n(n=5) deikeni 3*5=15 deerini alacaktr.

10 :.

imdi dier karlatrma ilemlerine gemeden nce deikenlerimizin ilem sonras ald deerleri yazalm. i=3 , j=3 , k=2 , m=6 , n=15 , p=6 , q=7 ; i < j ? 3: 1 ; Bu satrn 3 < 3 ileminin cevab doru ise 3 deilse 1 deeri alacan grebiliyoruz. Tabi ki ten kk olmad iin cevabmz 1 olacaktr. k>=n ? 0 : 1 ; Bu satrda ise 2>=15 ilemi gerekleir ki bunun cevab da yanltr ve ikinci deer ilem satrnn cevabdr yani 1 dir. imdiki karlatrma ilemimiz ise mantksal operatrlerle ilgili. Buna gre; k=2 && j=5 ? p : q ; lem bize ne sylyor ? K deikeni ve j deikeninin kesin olarak bir deere eit olup olmadn karlatrmamz sylyor. Bu iki deer de doruysa nk &&(and) mantksal operatrnn anlam bu ilem dorudur deilse yanltr. Buna gre k=2 'dir. Fakat buna karlk j'nin deeri 5 deildir. Bu yzden karlatrmann cevab yanltr. Dolaysyla ilem q yani 7 deerini alr. p!=2 ? k : 10 ; lemde istenilen p deikeninin deerinin ikiden farkl olmas durumdur. Yani 6!=2 bunun anlam dorudur. Gerektende 6=2 deildir. Bizde bu satrda bunu istiyorduk. O halde cevap dorudur. Bylelikle ilem k yani 2 deerini alr. imdi biz bu yaptklarmzla sadece javascript'te bir eyler hesap etmesini ve karlatrmasn syledik. Tarayc da bu ilemleri yapar ve hafzasnda tutar. Daha sonra reneceimiz komutlarla bunlar istersek taraycya yazdrabilir. Baka bir yerde kullanlmasn syleyebiliriz.

Internet Explorer & Netscape Fark

Giri ksmnda belirttiimiz gibi Javascript kodlarnda MSIE (Microsoft Internet Explorer) ve NN (Netscape Navigator) ynnden farkllk vardr. Bu taraycnn html dkman nasl modellediine baldr. Taraycnn nesne dkman modeli, bir Html sayfasndaki eitli elemanlarn tarayc tarafndan nasl alglanp yorumland ile ilgilidir. Javascript gerekte W3C (Web tekniklerinin standartlarn belirleyen kurum www.w3c.org) konsorsiyumu tarafndan belirlenen kodlardan olumamtr. Tarayc reten firmalar bu konular kendilerince yorumlayp tarayclarna yerletirmilerdir. Yani kendi nesne dkman modellerini oluturmulardr. Biz bu ksmda her iki taraycnnda nesne dkman modelini incelemeyeceiz. Bize gerekli olan ksmn reneceiz. imdi tarayc farknn nasl ayrt edilebileceini grelim.
Seval ZBALCI seval.ozbalci@bayar.edu.tr - Internet Programlama Ders Notu - CB Turgutlu MYO .: 11

ie4 = (document.all) ? true : false ; nn4 = (document.style) ? true : false ; Biz bu iki satrla bir nceki ders olan deikenler ve mantksal operatrler yardmyla iki taraycy da kontrol altna aldk. Bir dier rnekle yapy pekitirelim. <script language="Javascript"> <!-- // Kodlar eski srm tarayclardan saklayalm. ie4 = (document.all) ? true : false ; nn4 = (document.style) ? true : false ; if (ie4) { // MSIE 4.0 iin uygun kodlar buraya yazacaz } else { // NN 4.0 iin uygun kodlar buraya yazacaz. } //Saklamay bitir --> </script> imdi bu kodlar inceleyelim. Deiken tanmlama ksmnda anlamadnz bir ksm varsa 1. Deikenler ksmna tekrar geri dnmelisiniz. If (ie4) ve if (nn4) Burada ileriki derslerde reneceimiz koul ifadesini kullanyoruz. Bu kodlar Javascript'in anlay tarz u ekilde olacaktr. Eer nn4 , ie4 deikenlerinden doru olan ie4 ise -ki bunu true ve false deerlerinden alglar- alt satra geip ona uygun kodu uygulayacaktr. ayet ie4=false yani nn4=true ise dier if koulu yorumlanarak ileme konulacaktr. Bu da nn4 iin gerekli kodun altrlmas demektir. rnek Uygulama 1: <html> <head> <title>Tarayc kontrol</title> <head> <script language="Javascript"> <!-- // Kodlar eski srm tarayclardan saklayalm. function tarayici() { ie4 = (document.all) ? true : false ; nn4 = (document.style) ? true : false ; if (ie4) { // MSIE 4.0 iin uygun kodlar buraya yazacaz.
12 :.

window.location="ie.htm"; } else { // NN 4.0 iin uygun kodlar buraya yazacaz. window.location="nn.htm"; } } //Saklamay bitir --> </script> </head> <body onLoad=tarayici()> </body> </html> 1. Yukarda verilen kodlar herhangi bir editr (NotePad gibi) yardmyla yazp tara.htm olarak kaydedin. <html> <head> <title>MSIE tarayc kullanyorsunuz</title> </head> <body> <h3>Taraycnz Internet Explorer</h3> </body> </html> 2. Bu kodu ie.htm olarak kaydedin. <html> <head> <title>Netscpae tarayc kullanyorsunuz</title> </head> <body> <h3>Taraycnz Netscape Navigator</h3> </body> </html> 3. Bu kodu nn.htm olarak kaydedin. nemli! Bu Html dosyasnn da ayn klasrde olmas gereklidir. Tara.htm adl dosyada anlamadnz kodlar olduunu gryorsunuz. imdilik bu kodlar anlamanz gerekli deil. Yeri geldike bu kodlarn nerede ve nasl kullanlacan greceiz.
Seval ZBALCI seval.ozbalci@bayar.edu.tr - Internet Programlama Ders Notu - CB Turgutlu MYO .: 13

Ekrana kt Ve Klavyeden Bilgi Giri

Html zerinden klavye aracl ile ziyaretiden bilgi almay ve herhangi bir deiken vb. trde yazlarn html e nasl yazdrlacan greceiz.

PROMPT ()
Hemen balayalm. Ziyaretiden bilgi alma iki tr JavaScript komutuyla gerekleir. Birisi Prompt yani bizim burada bahsedeceimiz komut. Dieri ise Form yoluyla bilgi alnmas. Form yoluyla alnan bilgiler formun Html zerinde yer almas yznden Prompt komutu ile birbirinden ayrlr. Prompt komutu ile Html sayfasndan hari bir pencere alr. Alnmak istenen bilgi ziyaretiye bu yol ile sorulur ve hemen altndaki boluk yardmyla cevap alnr. imdi kodun nasl kullanldna bir gz atalm. prompt ("Sorulan soru" , "Cevap rnei") Bu komutun yorumlan u ekildedir. Html zerinde Html'den bamsz bir pencere a (bu prompt komutu ile yaplr). lk ift trnak ierisinde olan kelime veya kelime grubu, pencerenin st ksmnda ve deitirilemeyen ksmdr. Burada soru veya pencerenin niin ald ile ilgili bir aklama verilir. kinci ift trnakta ise doldurulacak olan cevap satrnn iinde seili bir haldedir. Bu ise genel olarak cevap rnei olarak ziyaretiye sunulur. Kullanlmas zorunlu deildir. Kullanlmadnzda undefined gibi tanmlanmam uyars alnr. prompt ("Taraycnzn trn giriniz ?" ,"ltfen cevab ie veya nn olarak veriniz"); imdi kullancdan nasl bilgi alnacan grdk fakat bu bilgiyi nasl

kullanabiliriz ? Bu sorunun cevab prompt komutunu var ile bir deikene atmak suretiyle kullanabiliriz olacaktr. Yani ; var tara=prompt ("Taraycnzn trn giriniz ?" ,"ltfen cevab ie veya nn olarak veriniz"); Biz bu satr ile ne yapm olduk? Ziyaretiden prompt komutu ile taraycs sorduk ve bunu var deiken tanmlama komutuyla tara deikenine atadk. Ziyaretiden aldmz bu bilgi sonucunda tara deikeni ya ie yada nn deerini alacaktr. Biz daha sonraki satrlarda bu deikeni belli bir koul koyarak kullanabiliriz. Mesela daha nceki rneklerimizde olduu gibi ie ise u sayfay a nn ise u sayfay a.
Bir neri: Bu tip tarayc tanma yntemi olduka yanl bir yntemdir. nk ziyaretiden alnan bilgi ile bizim daha sonra kullandmz koul ifadeleri uyumayabilir. Bu yzden kodumuz doru almaz.

14 :.

WRTE()
Html dosyasna yaz yazdrma komutu ise write dr. Bu kodun yazm kurallarn inceleyecek olursak ; document.write ("grntlenmek istenenler" , deiken_ismi ); Kodu inceleyelim: Javascript html zerinde yaz yazmak istediinde write komutunu tek bana kullanamaz. Bunun iin document fonksiyoneli (yardmcs manasnda) ile birlikte kullanlr. document.write komutundan sonra parantez alr. Daha sonra yazlmak istenen sraya gre deiken ismi veya grntlenmek istenenler yazlr. Deikenler ift trnak ierisinde yazlmazlar. Sadece grntlenmek istenenler ift trnak ierisinde yazlr. imdi prompt komutu ile write komutunu birletirerek bir kod hazrlayalm. Bu kodumuzda prompt araclyla ziyaretiye adn sorup ad deikenine atyoruz. Daha sonra bu deikeni write komutu yardmyla ziyaretiye Merhaba diyoruz. imdi kodlara geelim. rnek : <html><head><title>Prompt , write rnei </title></head> <body> <!-- //Kodlar eski tarayclardan gizliyoruz var isim = prompt ("sminizi Giriniz " , "Kk harf veya byk harf kullanabilirsiniz" ); document.write ("Merhaba " , isim , " !" ); // Saklamay bitir --> </script> </body> </html> Eski kodlarmza gre bu kodun biraz farkl olduu rahatlkla grlebilir. Javascript kodumuz <head> etiketleri arasnda kullanlmaz. Daha ncede deindiimiz ekilde uygulanmas istenen sraya bal olarak kodlar yerini almtr. Biz aslnda Html'de font kurallarn kullanarak yaz da yazdrabiliriz. Hibir kural uygulamadnzda taraycnn standart (default) deerleri kullanlr. rnein, Merhaba dedikten sonra alnan ismin bir alt satrda grntlenmesini istiyorsak bunu Javascript'e u ekilde yaptrabiliriz (<br> trnde Html etiketlerinin tmn Javascript'e yaptrabilirsiniz). document.write ("Merhaba" , "<br>" , isim)

Seval ZBALCI seval.ozbalci@bayar.edu.tr - Internet Programlama Ders Notu - CB Turgutlu MYO .: 15

KOUL VE DNGLER
Bilgisayar bilgisayar yapan konular bunlardr. nk hibir bilgisayar kendi kriterleriyle yorum yapamaz. Bizim koullar ve dngler ile verdiimiz, nceden belirlenmi kstaslar gz nnde bulundurarak gerekli seimleri yapar.

Koul Yaplar
Javascript'in en nemli zelliklerinden biri koul yaplardr. Aslnda bu konu sadece Javascript'in deil bilgisayarn da en nemli konusudur. imdi konunun inceliklerine bir gz atalm.

IF (EER)
Javascript'te ou dilde olduu gibi koul yapsnn kodu If (eer) komutudur. Yazlm ekli ise u ekildedir. If (a==b) //koul doru ise ilk satr ileme konulur // koul doru deilse ilk satrn altndaki komut satr ileme konulur. imdi kodumuzu biraz inceleyelim : Koul komutu yani if ile ileme balyoruz. Daha sonra karlatrlacak deikenler veya baka nesneler parantez ierisinde sorgulanyor. Dikkat ederseniz ift eittir kullandk. nk tek eittir iareti deer atama ilemidir. ift deiken ile koul yaps salanr. Eer koul doruysa hemen altndaki satr ileme konulur. Eer koul yanl ise ikinci satr ileme konulur. Yok ben koul doru ise 2 ve daha ok ilem yaptrmak istiyorsanz bunun cevab yaplmas istenen ilemlerin { } arasnda yer almasdr. Yani : If (a==b) { // 1.ilem //2. lem ... ... }

IF .. ELSE (EER ... DELSE)

Bu blmde ise If koul ifademize Else komutunu ekleyerek koul yaps rneklerle aklanacaktr.

16 :.

If ( a==b ) { // unlar unlar yap } else { //deilse unlar yap } Yani rnekten de anlald gibi if koulu ile a ile b nin eitlii karlatrlyor. Eer doruysa hemen altndaki ksm ileme konuluyor. Else ile yok deilse altndaki ksm ileme koy diyoruz. If (a==b) { //unlar yap } if (a==c) { //unlar yap } else { //unlar yap } imdi bu kod Javascript'e: a deikeni b deikenine eitse normal olarak alt satr ileme koymasn, eer bu karlatrma yanl ise altndaki ilemleri geerek a'nn c'ye eitliini kontrol etmesini ve bu da deilse (else) alt satrdaki ilemleri devreye koymasn bildirir. Else yaps genel olarak bir karlatrma sonucunda cevap yanl ise dier btn durumlarda u ii yap manasnda kullanlr. rnek Uygulama 2: <html> <head> <title>Koul yaplar </title> </head> <body> <script language="JavaScript"> <!-- //eski srm tarayclardan kodumuzu saklayalm var gun = prompt ("Bugn gnlerden ne ?" ,"ltfen kk harf kullannz"); if (gun=="pazar")
Seval ZBALCI seval.ozbalci@bayar.edu.tr - Internet Programlama Ders Notu - CB Turgutlu MYO .: 17

{ document.write ("Bugn gnlerden " , gun , " olduuna gre hatfa sonundayz" ,"<br>") document.write ("<b>" , "yi tatiller.." , "</b>") } else { document.write ("Bugn gnlerden pazar olmadna gre tatil gnnde deiliz !" ,"<br>") document.write ("yi almalar..") } //saklamay bitir--> </script> </body> </html>

Dng Yaps
Javascript'te dier programlama dillerinde olduu gibi istediiniz ilemi 2 veya daha fazla kez yaptrmak iin belli program kodlar mevcuttur. Bu dier dillere ok benzer olan for dng komutudur. Bu komutun yapt ilem, istenilen fonksiyon veya fonksiyon paralarn istenilen deerde tekrar etmektir.

FOR DNGS
for ( deiken_balang_deerler1 , deiken_balang_deeri2 ; dng says ; deiecek_deiken_ad_ve_tr ) { yaplmas istenen ilemler } Burada parantezler ierisinde verilen deiken_balang_deerler ksm ve deiecek_deiken_ad_ve_tr ksmn yazmanz gerekmez. Dng ierisinde kullanlan deiken daha sonrada istenilen ekilde arttrlabilir veya azaltlabilir. Yap gznz korkutmasn hemen bir rnekle daha iyi anlayalm. for (a=0 , b=0 ; c<=3 ; c++) { yaplmas istenen ilemler } for ifadesi iin ksa yazlm : var a,b=0; for (;c<=3;c++) { yaplmas istenen ilemler } imdi bunu tam bir rnekle daha da pekitirelim. Varsalm ki elimizde bir arpm tablosu yapmak istiyoruz. Buna gre 5 says iin 1'den 10'a kadar saylar bir

18 :.

tablo ierisinde vereceiz. imdi bu durumda for dngsz 10 adet tablo yazmamz gerekecekti fakat biz for dngs ile ilemi 1 satra indirgeyeceiz. <html> <head> <title>for dngs</title> </head> <body> <script language="JavaScript"> <!-- //eski srm tarayclardan kodumuzu saklayalm var cevap=0; for ( sayi=0 ; sayi>=10 ;); { sayi--; var cevap = 5 * sayi ; document.write( "5 * " , sayi , " =" , cevap ,"<br>") } //saklamay bitir--> </script> </body> </html> Burada grdnz gibi ilem tek bir satra ingirdendi. imdi de for dngsnn yapmak istediimiz ilemlerde yetersiz kald durumlarda kullanabileceimiz yaplar grelim.

ARTLI DNG YAPISI WHLE

Javascript kodu yazarken -programda bir nceki rnekte olduu gibi- saya deikeninin her deeri iin istediiniz ilemi yapmasn istemeyebilirsiniz. Bunun iin while komutunu kullanrsnz ki bu Javascript'e "stediim ii u art salanyorsa yap !" demi olursunuz. While dngsnde for dngsnden farkl olarak dng ierisindeki deikenlerin tanmlanmas gerekir. imdi yazm kurallarna bir gz atalm. while ( dng art ) { art doruysa yaplacak ilemler} art doru deilse yaplacak ilemler

DO .. WHLE YAPISI
Do ... while yaps genel olarak bir dngnn yapsn eer art doruysa tekrar et manasndadr. Yani do ile balangta hibir koul olmadan ilem yaplr. Daha sonra while art doru ise tekrar do yapsnda geri dnlr. Bunu bir rnek ile aklamak gerekirse;

Seval ZBALCI seval.ozbalci@bayar.edu.tr - Internet Programlama Ders Notu - CB Turgutlu MYO .: 19

rnein bir ticari siteniz var. nsanlar sizden gelip istedikleri rnleri satn alyorlar. Bir rn iin siparilerini verdiler ve bizde bunun karl olarak cret + kargo + kdv miktarn hesapladk ve mterimize dedik ki istediiniz rn u fiyata u gn elinizde olur. Bu hesaplamalarn hepsini do yaps ile yap dedik. Ve sonra sorduk daha baka rnlerde almak istiyor musunuz? te bu da while yaps ile sorulur. ayet cevap evet ise do yaps tekrarlanr deilse do dng yapsnda klr. Bu tr bir rnek yapalm ; Bizim kitap, cd ve kaset sattmz varsayalm. Bizden de 2 kitap ve 3 cd aldn varsayarsak ; var kitap=2000000; var cd=3000000; var kaset=1500000; do { var kitapistek =prompt ("Ka tane kitap almak istiyorsunuz ?" , "ltfen rakam giriniz"); var cdistek= prompt ("Ka tane cd almak istiyorsunuz ?" , "ltfen rakam giriniz"); var kasetistek= prompt ("Ka tane kaset almak istiyorsunuz ?" , "ltfen rakam giriniz"); var kitaptutar=kitapistek*2000000; var cdtutar=cdistek*3000000; var kasettutar=kasetistek*1500000; var toplamtutar = kitaptutar+cdtutar+kasettutar; document.write (kitapistek ," tane kitap ", cdistek ," tane cd " , kasetistek , "tane kaset sipariiniz alnmtr ", "<br>"); document.write ("<br>" , "Aldnz rnlerin toplam tutar = " ,toplamtutar); var istek =prompt("Baka rnlerde satn almak istiyor musunuz ?", "e veya h giriniz"); } while (istek="e") document.write ("<br>" ,"Bizden alveri yaptnz iin teekkrler")

BREAK VE CONTNUE FADELER

While komutu ile art belirledikten sonra yaplan ilemin kesilmesi veya devam etmesi otomatik hale gelmektedir. For dngs ierisinde de bu tr bir olay break ve contine ifadeleri ile gerekletiririz. Javascript break ifadesini grd anda dng ilemini keser ve bir sonraki komut satrn ileme koyar. Continue ifadesinde ise dng break ifadesindeki gibi kesilir fakat ileme konulan satr bir sonraki satr deildir. Continue'de dng bana dnlr.

20 :.

rnek: for () {ilem1; ilem2; break; } Burada ilem2 ile verilen ksmda rnek olarak bir sorgu yaplabilir. Sorgu doru ise break ifadesine gelinir ve burada dng kesilir. for () { ilem1; ilem2; continue;} Burada yine ilem2 ile sorgu yaplrsa contine ifadesi ile dngnn devam srdrlr.
nemli : Break ve Continue ifadeleri her komutu kesmek veya devam ettirmek iin kullanlamaz. Mesela bir if (Eer) ifadesi art doru deilse break ile kes denilemez. Sadece dng ierisinde dngnn kesilmesi veya devam ettirilmesi iin kullanlabilir.

SWTCH-CASE FADES
Bu ifade genel olarak men kullanmnda veya sorgu ilemlerinde ie yarar. Swicht ile ifade alnr case ifadesi ile ilemler sorgulanarak yaplr. Yazm kurallarna bir gz atalm. switch (parametreler) { case "ifade1" : case "ifade2" : ... } Bir rnek verelim. Burada web sayfamzdaki herhangi bir ilemde kp kmak isteyip istemedii soruluyor. Cevap evet ise ilem istenilen ynde ynlendiriliyor. Cevap hayr ise dngden klmaktadr. Burada kendimizi ziyaretinin klavyesinde Caps Lock tuuna basl olup olmadn nemsemiyoruz. nk koul ifademizi hem kk harf hem de byk harfe gre yazyoruz. var sec; sec = prompt ("kmak istiyor musunuz " ,"Evet iin E veya e , Hayr iin H veya h giriniz") switch (sec) { case "e" : case "E" : document.write ("Tekrar hogeldiniz") //yaplmas istenen ilemler case "h": case "H" : document.write ("Bizi tercih ettiiniz in teekkrler") break //klmas istendii iin dngy kesmek iin break komutunu kullanyoruz.

Seval ZBALCI seval.ozbalci@bayar.edu.tr - Internet Programlama Ders Notu - CB Turgutlu MYO .: 21

FONKSYON KAVRAMI
ou zaman Javascript kodunuzda bir ilemin birden fazla yaplmas gerekebilir. Hatta kimi zaman Javascript'e bir ilem yaptrmadan nce baka bir ilemi yaptrmak istenebilir. te bu tr tekrarlanan iin yaplmas iin gerekli ilem ve komut gruplarna Fonksiyon ad verilir. Fonksiyonlar genelde, A isimli gruptaki ilemleri yap oradan bir deer al bunu B isimli gruba gtr gibi ilemler iin kullanlr. Bu tr komut sistemleri Javascript'te en ok kullanlan komut trlerindendir. Fonksiyonun yazm kurallar u ekildedir: function fonksiyon_ismi (parametre1 , parametre2 , .... ) { yaplmas istenen ilemler }

Fonksiyona Deer Gnderme ve Deer Alma

Bir fonksiyonun Javascript ierisindeki ilk nemli grevi dier fonksiyonlardan veya herhangi bir yerden bir deer alp onu kendi ierisinde iletip sonra istenilen fonksiyona veya yere gndermektir. Mesela herhangi bir muhasebe ileminin yaplp bize geri gnderilmesini istediimiz dnelim. Genel yap olarak kodumuz u ekilde olacaktr. Veri1 ve Veri2'nin ileme konulaca fonksiyonlarn tanmlanmas Veri1'in alnmas Veri2'in alnmas Veri1'in fonksiyona gnderilmesi Veri2'nin fonksiyona gnderilmesi Alnan verilerin ekrana yazdrlmas imdi bu genel kodu Javascript'te nasl yapacamz grelim : <html> <head> <script language="JavaScript"> <!-- //eski srm tarayclardan kodu gizleyelim function veri1(ilkveri) { var ilktoplam = (ilkveri * 30 )/100 ; return ilktoplam ; } function veri2 (ikinciveri) { var ikincitoplam = (ikinciveri * 45 )/100; return ikincitoplam; } -- > </script> </head> <body> <script language="JavaScript"> <!
22 :.

var data1 = prompt ("Birinci miktar giriniz" ,"rakam gir"); var data2 = prompt ("kinci miktar giriniz" , "rakam gir"); document.write ("lk ileminizin sonucu = " , veri1(data1) ); document.write ("kinci ilemin sonucu = " , veri2(data2) ); -- > </script> </body> </html> lk satrlarn function tanmlama olduunu gryorsunuz. Burada veri1 , veri2 adl iki tane fonksiyonu tanmladk. Dier satrlarda prompt komutu ile klavyeden bilgi girii saladk. Daha sonra bu verileri fonksiyonlara gndererek istediimiz ilemi yaptrdk ve daha sonrada bunu return yntemiyle geri aldk. Bu ksma kadar yaptmz fonksiyona bir deer gndermekti. veri1(data1) komutuyla prompt yoluyla aldmz data1 deikenini veri1 adl fonksiyona gnderdik. Yani function veri1(ilkveri) eklindeki fonksiyona biz data1 deikenin gnderdik. Fonksiyon bu deeri yani data1 deikenin aldnda otomatik olarak ilkveri deikenine atad. Bylelikle ilkveri=data1 oldu. Daha sonra istenilen ilemler yapld. Ve ardndan return ilktoplam deeri geri gnderildi. Bu deer daha sonra ekrana yazdrld. Dier veri2 adl deiken iin de ayn tr bir ilem szkonusudur.

Seval ZBALCI seval.ozbalci@bayar.edu.tr - Internet Programlama Ders Notu - CB Turgutlu MYO .: 23

NESNELER VE ZELLKLER
Gnmzde biliim Teknolojileri ile ilgilenen hemen herkesin duyduu bir terim var: Nesneye Ynelik Programlama (OOP). Nedir bu Nesneye Ynelik Programlama? Bu tip programlamada kullanlan her e bir nesne olarak kabul edilir. Bu nesnelerin zelliklerini kullanarak onlar deitirerek program yazlr. Javascript'te bu tr bir programlama dilidir. rnein webde srf yaparken herkesin karsna kan formlar birer nesnedir. Bu nesnelerin tepkiye gre cevap vermesi gibi zellikler de onun yani nesnenin zellikleridir. rnein imdiye kadar ou kez kullandmz document.write komutu aslnda bir nesnenin zelliine atfta bulunmaktan baka bir ey deildir. Yani document nesnesinin write zelliini kullanarak html sayfamza yaz yazdryoruz.

Window Nesnesi
Genel olarak pencere zellikleri ile ilgili bir nesnedir.

PENCERE AMAK VE KAPAMAK

Birok deitirme yerde ite grdnz bu pencere nesne ama pencerelerin yardmyla eitli zelliklerini

yaplmaktadr.

imdi bu nesneyi nasl kontrol edeceiz onu grelim. Pencere amak iin : window.open("Url_ad" , "pencere_ad" , "pencere_zellikleri"); Pencere kapatmak iin : window.close(); Pencere kapatmak iin window.close() komutu vermek yeterlidir. Burada kapatlan pencere o anda kullanlmakta olan penceredir. Pencere aarken ise, window.open ile pencerenin almak istendii belirtilir. Parantez ierisinde verilenler ise almas istenen pencerenin zelliklerini belirtir. Url_ad : Buraya yazlacak dosya ismi alacak pencerenin ierisinde olacaktr. rnek : window.open("http://webteknikleri/owp/index.htm") veya ;
24 :.

window.open("index.html") Pencere_ad : Bu alacak pencerenin adn belirtir. Birden ok pencere ile ilemler

yapyorsanz hangi pencereye bir komut gnderdiinizin belli olmas iin gereklidir. rnek : Window.open("index.html" , "ana"); Pencere_zellikleri : Bu zellikte adndan belli olduu lde pencerenin zellikleri ile ilgilidir. Bir pencerenin deitirilebilir zellikleri unlardr : o menubar : Tarayclarn en st ksmnda bulunan File(Dosya) , Edit(Dzen) vb. menlerin bulunduu satrdr. o toolbar : Tarayclarda st ksmda Back(Geri) , Forward(leri) vb. tularn bulunduu ksmdr. o location : Tarayclarda ziyaret etmek istediiniz web adresini yazdnz ksm. o status : Tarayclarn en alt ksmnda hangi dosyann yklendii ile ilgili bilgi veren ksmdr. o o scrollbars : Sa tarafta bulunan srg ubuklardr. resizable : Pencerenin boyutlarnn kullancya braklmas veya kesin deerler almasyla ilgilidir. o o o width : Alacak olan pencerenin piksel cinsinden geniliidir. height : Alacak olan pencerenin piksel cinsinden boyudur. left : Alacak olan pencerenin ekrann sol tarafndan ka piksel uzaklkta olacan belirler. o Top : Alacak olan pencerenin ekrann stnden ka piksel aada olacan belirler. Eer pencere zellikleri ksmnda deimesini istemediiniz bir zellik varsa onu yazmanza gerek yoktur. Bu deerler taraycnn standart(default) deerlerinden alnr.

Seval ZBALCI seval.ozbalci@bayar.edu.tr - Internet Programlama Ders Notu - CB Turgutlu MYO .: 25

rnek: imdi bir pencere aalm. Atmz pencerede dosya, dzen ve ileri, geri tu takm olmasn. Pencerenin boyutlar 200x300 piksel olsun. imdi buna gre kodumuz: window.open ("http://webteknikleri/owp/index.htm", "webteknikleri" , " menubar=no, toolbar=no, scrollbars=yes, location=yes, width=200, heigt=300";)

WNDOW.LOCATON.PROTOCOL
Window nesnesinin location.protocol nesnesi ise yklenen dosyann sabit diskten mi yoksa internetten mi yklendiini gsterir. o o http: ile dosyann internetten yklendiini belirtir. file: ile dosyann sabit diskten yklendiin belirtir.

Mesela yle bir rnekle dosyann nerden yklendiini kontrol edelim. if (window.location.protocol == "http:" ) { document.write ("Bu belge Internet'ten geliyor.") } else { document.write ("Bu belge sabit diskten geliyor") }

WNDOW.HSTORY.GO
Window'un histrory zellii ile bir nceki sayfaya eriim salanabilir. rnein kullanc herhangi bir formu doldurmad ve ilem yaplamad bu durumda bir hata mesaj ile kullancy uyardktan sonra history nesnenisin kullanarak bir nceki sayfaya kullancy gnderebilirsiniz. Bunun iin gerekli kod yazm u ekildedir. Window.history.go(-1) Bir nceki sayfaya -1 ile ulaabilirsiniz. Bu deeri arttrarak daha nceki sayfalara da ulaabilirsiniz.

26 :.

STATUS BAR KULLANIMI

Status bar window nesnesinde belirttiimiz gibi tarayclarn en alt ksmnda yer alan hangi dosyaya gidilecei veya yklendii ile ilgili bilgi veren ksmdr. Status bar deitirmek iin u kodlar yazmalyz. window.status="Webteknikleri'nden Merhaba !"; Bu ekilde kullandmz bir status kodu ile sayfa ak kald srece Webteknikleri'nden Merhaba ! yazs karmzda olacaktr.

Tarayc Nesnesi
Tarayclar Javascript tarafndan bir nesne olarak alglanr. Bu nesnenin zelliklerini yle sralayabilir. o o o o <html> <head><title>Tarayc zellikleri</title></head> <body> <script language="javascript1.2"> <! document.write("u anda kullandnz taraycnn zellikleri :" , "<br>"); document.write(navigator.appname + navigator.appVersion + navigator.appCodeName + navigator.useAgent ) ; --> </script> </body> </html> appname Tarayc ad appVersion Taraycnn Versionu appCodeName Taraycnn kod ad userAgent Taraycnn anamakinaya(server) kendini tantrken verdii isim

ereve (Frame) Nesnesi

ereve baknz. Javascript asndan her bir ereve bir pencere saylr. Bunlarn ieriini kontrol etmek iin belli komut stilleri vardr. imdi onlar grelim:
Seval ZBALCI seval.ozbalci@bayar.edu.tr - Internet Programlama Ders Notu - CB Turgutlu MYO .: 27

teknii

bir

web

sayfas

zerinde

birden

fazla

web

sayfas

grntlenmek istendiinde kullanlr. Daha ayrntl bilgi iin HTML adl blmmze

o o o

Top : En st pencere (Yani taraycnn kendisi) Parent : Herhangi bir ereveyi oluturan dzenleyici blm Self : erevenin kendisi

Javascript ereve dzenleyicileri (FrameSet) ierisindeki dier alt ereveleri 0dan balayarak numaralandrr. Bu numaralar yardmyla ereve zelliklerini deitirebiliriz. rnein iki tane ereveye sahip bir sayfada birinci ereve parent.frames[0] dieri ise parent.frames[1] olarak adlandrlr. rneini verdiimiz gibi iki ereveli bir web sayfamz olduunu varsayalm. Ana sayfamz ki bu sayfa taraycya sayfann iki html sayfasnda olutuunu syleyen, ereve dzenleyicisinin olduu sayfann kodlar u ekilde olsun. 1. lk sayfay frame.html olarak kaydedin. <html> <head><title>Frame (Cerceve)</title></head> <!-- frames --> <frameset cols="50%,*"> <frame name="sol" src="sol.html"> <frame name="sag" src="sag.html"> </frameset> </html> Bu sayfay sol.html olarak kaydedin. <html> <head><title>Sol Frame</title></head> <body> <script language="javascript1.2"> <! parent.frames[0].document.write("Herhangi bir hesaplama vb.unsur icin kullanilacak kod turu", "<br>" , "SOL taraf icin"); --> </script> </body> </html> 2. Aadaki sayfay sag.html olarak kaydedin. <html> <head><title>Sag Frame</title></head> <body> <script language="javascript1.2">

28 :.

<! parent.frames[1].document.write("Herhangi bir hesaplama vb.unsur icin kullanilacak kod turu", "<br>" , "SAG taraf icin" ); --> </script> </body> </html>

Form Nesnesi
Javscript asndan Html'in en nemli nesneleri Formlardr. nk ziyareti ile etkilemede en byk unsurlardan birisi Formlardr. Html kendi form nesnesini kendisi oluturabilir. Bu bakmdan Javascript'e den bir gre yoktur. Javascript form verilerinin yorumlanmas ve ilenmesinde devreye girer. imdi form unsurlarn tanyalm : o o o o Name : Formun ismi Action : Formun ilenecei perl veya cgi programnn tanmlanaca etiket Enctype : Formun kodlanma tr Method : Formun gnderme(post) mi yoksa alma(get) ilemi greceini belirler. o o Target : Pencere ismi OnSubmit : Gnderme metodunun ismi

Bunlardan yararlanarak bir form nesnesinin kodunu yazalm. <form name="mail" action="http://www.webteknikleri.com/cgi-bin/mail.pl" method="POST"> Form unsurlar </form> imdi biz bu kodda "Form Unsurlar" diye bir eyden sz ettik. Bu form unsurlar ziyaretiden nasl bilgi alnacan belirleyen unsurlardr. Bunlar bir metin alan veya aa dmeli bir men olabilir. Form etiketi ierisindeki tm unsurlar element adl dizi-deiken ierisine yazlrlar ve form unsurlar kullanlrken bu tip bir atfta bulunmanz gerekir.

Seval ZBALCI seval.ozbalci@bayar.edu.tr - Internet Programlama Ders Notu - CB Turgutlu MYO .: 29

TEXT ALANI
Text alan form unsurlarnn en nemlilerindendir. Ziyaretilerden bilgi almak amacyla kullanlr. Kullanm u ekildedir. <input type="text"> eklinde kullanlr. Bu nesnenin kullanlan etiketleri : o o o Name : text alannn ismi Size : text alannn web sayfasnda grlecek ksmnn bykl Maxlenght : text alanna en fazla ka karakter girilebileceini belirler.

te bir tam teekkll text alan : <form name="mail" action="http://www.webteknikleri.com/cgi-bin/mail.cgi" method = POST> <input type="text" name="email" size=15 maxlenght=40> </form> Buraya kadar iimiz Html ile hallettik. imdi bu form nesnesinin zelliklerini Javascript araclyla nasl deitirilebileceini grelim. o o document.form_ismi.elements[numara]. deitirilmek_istenen zellik. numara : deitirilmek istenen elemann numarasdr.

Deitirilmek istenen zellikler unlar olabilir. o o o value : ierisindeki deer lenght : nesnenin uzunluu name :ismi

imdi bir rnek verelim (bu rnek bir nceki form iindir). document.mail.elements[0].lenght=20

FRE ALANI
Bu alanlar ifreli bilgi almak iin kullanlr. Bu alana bir bilgi girildiinde karakterler gzkmez onun yerine asteriks * iareti grlr. rnek: <form action="http://" name="mail">
30 :.

<input type="Password" name="sifre" > </form> Bu tr form unsurlarna eriimde text alan gibi ayn ekildedir.

BUTONLAR
Form unsuru olarak iki tr buton vardr. Bunlar form unsurlarn form grevine gre gndermeye veya almaya ynelik Gnder (Submit) dmesi bir dieri ise Form unsurlarnn tmnn ilk halini almasn salayan Sil (Reset) dmesidir. imdi bunlarn nasl kullanldklarn grelim. <form action="http://" name="mail"> <input type="Submit" name="gonder" value="GONDER"><br> <input type="Reset" name="sil" value="SIL"> </form>

RADYO (RADO) DMELER

Bu tr dmelerin en byk zellii radyo dmeleri gibi olmasdr. Yani herhangi bir men zerinde sadece bir seim yaptrmak istiyorsanz bu tr form elerini kullanrsnz. imdi bunun ile ilgili bir rnek yapalm. <HTML> <HEAD> <TITLE>Radio</TITLE> <SCRIPT LANGUAGE = "JavaScript1.2"> function sorgu (secim) {var deger = null for (var i=0; i<secim.length; i++) {if (secim[i].checked) { deger = secim[i].value break } } return deger } </SCRIPT> </HEAD> <BODY> <FORM name="form1"> <p> <input type=radio name="firma" value="Bilemediniz Yazilim">Microsoft</p> <p><input type=radio name="firma" value="Bilemediniz Yazilim">Borland</p> <p><input type=radio name="firma" value="BilemedinizYazilim">Adobe</p> <p><input type=radio name="firma" value="Tebrikler Bildiniz">Copmaq</p>
Seval ZBALCI seval.ozbalci@bayar.edu.tr - Internet Programlama Ders Notu - CB Turgutlu MYO .: 31

<input type=button value="Bunlardan hangisi bilgisayar ureticisidir" onClick="alert(sorgu(this.form.firma))"> </FORM> </BODY> </HTML> Grdnz gibi bu form unsuruna da(esi) dier form unsurlar gibi ayn ekilde ulalr. Fakat dierlerinden farkl olarak burada checked(seilmi) yardmc etiketini kullandk. Burada Javascript ile bir dng oluturarak hangi nesnenin seili(checked) olduunu kontrol ediyoruz. Ve alert ile sorulan sorunun cevabnn doruluunu ziyretiye bildiriyoruz.

SELECT UNSURU
Select esi form nesnelerimizden men yoluyla ziyareti ile etkileme yollarndan bir tanesidir. Bu bir tr seme kutusudur. Aa dmeli kutu sayesinde kutu ierisindekilerden birisini seebilirsiniz. Name , Multiple ve Size zelliklerine sahiptir. Bu nesnemizde nesnenin ynelendirilmesi asndan onBlur, OnFocus, OnChange zellikleri kullanlabilir. Nesnenin zelliklerine ulam iin en ok kullanlan etiket yardmcs ise value(deer) dr. Radyo kutularnda yaptmz rnei imdide Select esine uygulayalm. <HTML> <HEAD> <title>Select</title> <SCRIPT LANGUAGE = "JavaScript1.2"> function secim(secilen) { return secilen.options[secilen.selectedIndex].value } </SCRIPT> </HEAD> <BODY> <FORM name="soru"> <p><SELECT NAME="firma"> <OPTION value="Bilemediniz Yazilim">Microsoft</OPTION> <OPTION value="Bilemediniz Yazilim">Borland</OPTION> <OPTION value="Bilemediniz Yazilim">Adobe</OPTION></P> <OPTION value="Tebrikler Bildiniz">Compaq</OPTION></P><br> <input type=button value="Bunlardan hangisi bilgisayar ureticisidir" onClick="alert(secim(this.form.firma))"> </FORM> </BODY> </HTML>

32 :.

OLAYLAR
Ziyaretiye sunulan bir web sayfas zerinde ziyaretinin yapt her tr hareket bir balanty tklamas , bir resmin zerine gelmesi , resmin zerinde ayrlmas , bir formu yanl doldurup hataya yol amas hep bir olaydr.

onClick
Web sayfas zerinde bir nesnenin mosue ile zerine tklanmas sonucu onClick olay gerekleir. Olayn gereklemesi iin nesneni tklanp braklmas gereklidir. Yani mouse tuuna basldnda onClik olay gereklemi olmaz. onClick olay tua baslp brakldktan sonra gerekleir. Balantlar, resimler, form dmeleri tklanabilecek nesneler arasndadr. OnClick ynlendiricisine bu durumda ne yapacan Html etiketleri arasnda bildirmeniz gerekir. rnek: <html><head><title>onClick</title> <script language="javascript1.2"> <! function merhaba() {alert ("beni tikladiniz"); } --> </script></head> <body> <input type="button" name="tikla" value="tikla" onClick=merhaba()> </body> </html> Burada yaptmz ilem html etiketleri arasnda yer verdiimiz bir butona tklama (onClick) ile ne yapacan merhaba fonksiyonuna git diyoruz. Fonksiyonda ekrana bir uyar ile beni tkladnz diye bir uyar mesaj geiyor. imdi burada alert nesnesini de grm olduk. Alert nesnesi ziyaretiye herhangi bir durumda uyar vermek amacyla kullanlr. Grld zere parantez ierisinde ift trnak iine uyar yazs yazlr. OnDblClick olay da onClick olay ile yap olarak ayndr. onClick'ten fark nesneye ift tklandnda almasdr. Dier yntemler onClick ile ayndr.

Seval ZBALCI seval.ozbalci@bayar.edu.tr - Internet Programlama Ders Notu - CB Turgutlu MYO .: 33

onMouseOver , onMouseOut
Bu tr nesne olaylar ingilizce ad (onMouseOver = mouse iaretisi/imle zerindeyken , onMouseOut = mouse iaretisi zerinden ayrldnda) zerinde olmakla birlikte mouse-un nesnenin zerinde olup olmad ile ilgilenir. rnek: <html> <head><title>onMouseOver ve onMouseOut </title> <script language="javascript1.2"> <! function uzerinde() {window.status="Tklayn ve Webteknikleri.com adresine gidin" } function disinda() {window.status="Webteknikleri.com baglantisina tklayn" } --> </script></head> <body> <a href="http://www.webteknikleri/index.htm" onMouseOver = uzerinde() onMouseOut =disinda()> Webteknikleri.com </a> </body> </html> onMouseOver ve onMouseOut metodu ile ilgili bir dier rnek: <html> <head><title>OnMouseOver</title> <script language="javascript1.2"> <! function altavista() {document.web.mesaj.value="En unlu web motorlarindan biri" } function altavistasil() { document.web.mesaj.value="" } function yahoo() { document.web.mesaj.value="En unlulerden bir tane daha" } function yahoosil() {document.web.mesaj.value="" } function hotbot() {document.web.mesaj.value="Ve bir tanesi daha" } function hotbotsil() {document.web.mesaj.value="" } --> </script></head> <body>

34 :.

<a href="www.altavista.com" onMouseOver="altavista()" onMouseOut = "altavistasil()"> Altavista</a><br> <a href="www.yahoo.com" onMouseOver="yahoo()" onMouseOut="yahoosil()">Yahoo</a><br> <a href="www.hotbot.com" onMouseOver="hotbot()" onMouseOut="hotbotsil()">Hotbot</a><p> <form name="web"> <input type="text" name="mesaj" size="50"> </form> </body> </html>

onSubmit
Web zerinde srf yaparken ounlukla karmza kan formlar biz

doldurduktan sonra sayfann bal bulunduu server (ana makine) ya gnderilir. Fakat biz bu onSubmit olay ile form gnderilmeden nce formun dzgn doldurulup doldurulmadn kontrol edebiliriz. Bunu rnek bir kod ile aklayalm. Html sayfamzda body etiketleri arasnda doldurulmasn istediimiz bir form var ve ilgili kodun balangc yle : <form action="mail.pl" method="post" onSubmit="dogrula()"> Bu satr ile formun gnderilmesiyle (onSubmit) dogrula fonksiyonunu

aryoruz. dogrula fonksiyonu da u ekilde olabilir (Bu fonksiyon head etiketleri arasnda olan script etiketleri arasnda olmaldr). function dogrula() { confirm ("Formu dzgn doldurduysanz OK'i tklaynz'); } Bu fonksiyonda kullandmz confirm nesnesi ile kullancya OK ve Cancel tular ile Emin misin ? Form Gnderiliyor! denilmektedir.

onReset
Bu olay ile web sayfanzda bulunan formdaki yazdklarnzn tamamen silinir. Yani yazdnzn yanl olduunu farkettiniz bu durumda Sil (Reset) tuunu tklarsnz ve size bo bir form gelir. Yalnz burada bireyi belirtmek isterim. Reset(Sil) tuuna tkladktan sonra taraycnn back(geri) dmesini tkladnzda formunuzda yazdklarnz tekrar geri gelmez. Fakat siz onReset olay ile bu durum iin son bir ziyaretiye seenek sunabilirsiniz. rnek:
Seval ZBALCI seval.ozbalci@bayar.edu.tr - Internet Programlama Ders Notu - CB Turgutlu MYO .: 35

<html> <head><title>onReset</title> <script language="javascript1.2"> <! function sil() { return confirm('Silmek istediginize emin misiniz?'); } --> </script> </head> <body> <form onReset="return sil()"> <input type="text" name="mail"> <input type="reset" value="sil"> </form> </body> </html>

onChange
Web sayfas zerinde ziyaretinin deitirebilecei tr alan vardr. Bunlar text (metin) textarea (geni metin alan) select (seim alan) dr. Mouse u bu alanlar zerine getirip tkladnzda onChange(deiti) olayn gerekletirmi olursunuz. imdi bunu select yntemi ile nasl olduunu grelim. rneimizde aa dmeli bir men tasarlayacaz ve eili durumda olan web sayfasna gnderme yapacaz. <html> <head><title>OnChange</title> <script language="javascript1.2"> <! function degisti() { window.open("www.altavista.com"); } --> </script> </head> <body> <form method="post"> <p><select name="degistir" size="1" onChange="degisti()"> <option>Adresi tikla <option>Altavista </select> </form> </body>

36 :.

</html>

onLoad, onUnLoad
Bu olaylar web bize sayfann yklenmeye balamasnda (onLoad) sayfadan

ayrlncaya (onUnLoad) kadar olan yaplacak ilemler iin gereklidir. Bir Javascript fonksiyonun makine sayfas yklenmeye yaplmak baladnda otomatik olarak almasn yapyorsa onLoad olaynda da sayfa istiyorsak onLoad olayn kullanrz. Eski DOS'ular bilirler Autoexec.bat dosyas nasl aldnda istenenleri yklenmeye baladnda nelerin otomatik olarak balatlacan belirleyebiliriz. Mesela sayfa yklenmeye baladnda (onLoad) ziyaretiye Web sitemiz ho geldiniz diyebiliriz. Sayfadan ayrldnda (onUnLoad) ise yi srfler diyebiliriz. rnek kodlara gemeden nce unu belirtmekte yarar var. Bildiiniz zere web sayfas kod asndan iki ksma ayrlr. Bunlar head ve body ksmdr. Tarayc asndan body ksm asl ksmdr. Head ksmnda sayann nasl grntlenecei gibi blmler yer alr. Bu yzden onLoad ve onUnload ksm body etiketleri arasnda yer alr. rnek: <html><head><title>onLoad onUnLoad</title> <script language="javascript1.2"> <! function hosgeldiniz() { alert("Web Sitemize Hosgeldiniz") } function gulegule() { alert("Iyi sorfler..") } --> </script> </head> <body onLoad="hosgeldiniz()" onUnload="gulegule()"> </body> </html>

onError, onAbort
Ziyareti sayfay herhangi bir neden yznden tam haliyle ykleyememi olabilir. Bu nedenler aktarm hz veya taraycnn Javascript kodunu tam manasyla yorumlayamam olmasdr. te bu durumda Error(hata) oluur. Html zerinde oluan en sk error(hata) resim haritalarnn (image-map) tam anlamyla yklenmemesinden
Seval ZBALCI seval.ozbalci@bayar.edu.tr - Internet Programlama Ders Notu - CB Turgutlu MYO .: 37

kaynaklanr. nk bu durumda resim tam yklenmemitir. Bu da ziyaretinin resim zerinde tklayaca yerlerin yorumlanmamasn dourur. rnek: <img src="resim.gif" onError="alert("Resim dosyas tam olarak yklenemedi')"> Ziyareti resimlerin yklenmesi ok uzun srp yklemeyi stop(dur) tuu ile kestiyse bu durumda onAbort olay gerekleir. Bunun sonucu olarak ziyaretiye bir hata mesaj verebilirsiniz. Bu durum daha nce bahsettiimiz image-map ler iindir. <img src="resim.gif" onAbort="alert("Resim harita dosyas tam olarak yklenemedi. lgili resim bir harita olduu iin yklenmesini tavsiye ederiz.')">

JAVASCRPT LE DHTML
Bu ksmda Javascript ile Katman (layer) zelliklerinin nasl deitirilebileceini greceiz. Javascript bize Html sayfamz oluturan nemli unsurlardan biri olan layer(katman) larn tm zelliklerini deitirmemize olanak salar. Ayrca hemen her yerde grdnz resim deitirme tekniini de greceiz.

Katman zelliklerini Deitirme

e katman nedir sorusuyla balayalm. Katman ad zerinde sayfamzn zerinde ne sayfadan bamsz ne de her ynyle sayfamza bal bir unsurdur. Katman kullanarak istediimiz herhangi bir yapy (yaz,resim,video,form) sayfamzn istediimiz yerine koordinatlar vermek koulu ile yerletirebiliriz. Zaten katmann kullanm alan en ok budur. imdi bir katman oluturalm ve deitirilebilir zelliklerini grelim. <html> <head><title>Layer</title></head> <body> <div id="denem" style="position:absolute ; left:100px ; top:200px; width:300px ; height:400px ; visibility:visible" > Su anda bir katman(layer)in icerisindeyim </div> </body> </html> Layer oluturmak istediinizde <div> etiketi ile balar </div> etiketi ile kodunuz tamamlarsnz. imdi katman zelliklerine geelim :

38 :.

o o o o o o o o

id : Katmann ismi style : Katmann zelliklerini belirtir absolute : Katmann koordinatlarnn kesin olacan belirler left : Katmann soldan ka piksel sonra balayacan belirler top : Katmann stten ka piksel sonra balayacan belirler width : Katmann ka piksel geniliinde olacan belirler height : Katmann ka piksel boyunda olacan belirler visibility : Katmann grnr m grnmez mi olacan belirler

Internet Explorer ve Netscape tarayclarnn dokman nesne modelleri farkl olduundan katmana ulama teknikleri de farkldr. Internet Explorer kod teknii: katman_ad.style.deitirilmesi_istenen_zellik=yeni_deer; rnek : deneme.style.left=50px; Netscape Navigator kod teknii: document.katman_ad.deitirilmesi_istenen_zellik=yeni_deer; rnek : document.deneme.left=50px; rnek (katmann yerinin deitirilmesi): <html><head><title>Katman</title> <script language="javascript1.2"> <! function tara() { var tarayici= navigator.appName if (tarayici=="Netscape") degisim = document.katman; if (tarayici=="Microsoft Internet Explorer") degisim = katman.style; } function hareket1() { degisim.left=100 degisim.top=100 } function hareket2() { degisim.left=300 degisim.top=300 } -->
Seval ZBALCI seval.ozbalci@bayar.edu.tr - Internet Programlama Ders Notu - CB Turgutlu MYO .: 39

</script></head> <body onLoad="tara()"> <div id="katman" style="position:absolute ; left:400px; top:10px"> Bu katmanin yeri degisecek </div> <p><p><p> <a href="javascript:hareket1()">Buray tklayn ve katmannz 100x100'e gitsin</a><br> <a href="javascript:hareket2()">Burayi tklayn ve katmannz 300x300' gitsin</a> </body></html> Buradaki rnekte olduu gibi sizde katmann dier zelliklerini (width,height) deitirebilirsiniz. Fakat grnebilirlik zellii iin zel bir durum vardr. Katman zelliklerine eriimde olduu gibi bu zellikte de Internet Explorer ve Netscape Navigator farkllklar vardr. Internet Expolorer iin Grnebilirlik zellii; Katman grnebilir klmak iin: katman_ad.style.visibility="visible" Katman gizleyebilmek iin: katman_ad.style.visibility="hidden" Netscape Navigator iin Grnebilirlik zellii Katman grnebilir klmak iin: document.katman_ad.visibility="show" Katman gizleyebilmek iin: document.katman_ad.visibility="hide" imdi de bununla ilgili bir rnek yapalm. <html><head><title>Katman</title> <script language="javascript1.2"> <! function sakla() { var tarayici= navigator.appName if (tarayici=="Netscape") document.katman.visibility="hide" if (tarayici=="Microsoft Internet Explorer") katman.style.visibility="hidden" } function goster() { var tarayici= navigator.appName
40 :.

if (tarayici=="Netscape") document.katman.visibility="show" if (tarayici=="Microsoft Internet Explorer") katman.style.visibility="visible" } --> </script></head> <body> <div id="katman" style="position:absolute ; left:400px; top:10px"> Bu katmanin tikladiginizda yok olacak </div><p><p><p> <a href="javascript:sakla()">Burayi tiklayin ve katmaniniz yok olsun</a><br> <a href="javascript:goster()">Burayi tiklayin ve katmaniniz geri gelsin</a> </body></html> rnekte de grld gibi onMouseOver ve onMouseOut olay ynlendiricilerini de kullanarak ok daha gzel eyler retebilirsiniz.

Seval ZBALCI seval.ozbalci@bayar.edu.tr - Internet Programlama Ders Notu - CB Turgutlu MYO .: 41