T.C.

MLL ETM BAKANLII

BLM TEKNOLOJLER

BETK DL (JAVASCRPT)
482BK0139

Ankara, 2012

Bu modl, mesleki ve teknik eitim okul/kurumlarnda uygulanan ereve retim Programlarnda yer alan yeterlikleri kazandrmaya ynelik olarak rencilere rehberlik etmek amacyla hazrlanm bireysel renme materyalidir. Mill Eitim Bakanlnca cretsiz olarak verilmitir. PARA LE SATILMAZ.

KOD ALAN DAL/MESLEK MODLN ADI MODLN TANIMI SRE NKOUL YETERLK

482BK0139 Biliim Teknolojileri Web Programcl Betik Dili (JavaScript)

Bu modl, betik dili yardmyla web siteleri iin script oluturabilecek yeterliliklerin kazandrld bir renme materyalidir.
40/32

Programlama Temelleri dersi modllerini tamamlam olmak. Web sayfalar iin betik dili ile scriptler oluturmak
Genel Ama renci, bu modl ile gerekli ortam salandnda; betik dili yardmyla web siteleri iinde kullanlacak scriptleri oluturabilecektir. Amalar 1. Deikenleri ve mantksal ilem operatrlerini kullanabilecektir. 2. Ak kontrol ,dizi ve fonksiyon yaplarn kullanabilecektir. 3. htiyaca uygun script komutlarn kullanabilecektir. 4. Olay ve nesne ilemlerini yapabilecektir. Ortam: Biliim Teknolojileri laboratuvar, iletme ortam Donanm: Bilgisayar Modl iinde yer alan her renme faaliyetinden sonra verilen lme aralar ile kendinizi deerlendireceksiniz. retmen modl sonunda lme arac (oktan semeli test, doru-yanl testi, boluk doldurma, eletirme vb.) kullanarak modl uygulamalar ile kazandnz bilgi ve becerileri lerek sizi deerlendirecektir.

MODLN AMACI

ETM RETM ORTAMLARI VE DONANIMLARI

LME VE DEERLENDRME

Sevgili renci, nternet zerinde alan siteler, oyunlar ve bir ok zel uygulama betik dili ile hzl ve kolay bir ekilde yaplmaktadr. hazrladnz sayfalara dinamizm kazandrmak iin tasarlanm, farkl platformlarda ve nesne tabanl alabilen bir betik programlama dilidir. Script dili ile dinamik resim galerileri, kullanc formlar, oyunlar, duruma uygun alabilen uygulamalar hazrlayabilir internette yaynlayabilir kolayca kullanma sunabilirsiniz. Bu modl ile script dilinde deiken tanmlayabilecek deikenlerle ilemler yapabilecek, fonksiyon retip sahnede olan hereye hkmedebileceksiniz. internet sayfalarnz iin zel uygulamalar hazrlayp, nesneye ynelik programlama yapabileceksiniz. Yazdnz kodlara karar yaplar ekleyip artlara gre deien kod yaplar oluturabileceksiniz.

RENME FAALYET1
Bu faaliyet kullanabileceksiniz. sonunda deikenleri ve mantksal ilem operatrlerini

JavaScript eklinde arama yaparak, internet siteleri iin kullanlan hazr scriptleri aratrnz.

1. PROGRAMLAMA DL
1.1. Betik Dili (JavaScript)
Betik dili web sayfalarnda dinamik ierik salamak ve kullancyla iletiim kurmak iin kullanlan istemci tarafnda alan bir dildir. Html etiketleri arasnda tanmlanarak kullanlabilir. 1995 ylnda Brendan Eich tarafndan gelitirilmitir. Javascript dilini, c dilinin web sayfalarna uyarlanm basit srm olarak dnlebilirsiniz. Javascript dili isim benzerliine ramen java ile birbirinden bamsz, farkl dillerdir. Java gerek bir programlama dilidir. Javascript ise bir script dildir. Javascript dili C, Scheme, Java, Perl, Python,Self dillerinden etkilenmi ve gelitirilmitir. JScript, JScript .NET,Objective-J, TIScript dillerinin oluturulmas iin kullanlm ve gelimesine yardmc olmutur. Balangta sadece Netscape tarafndan desteklenen dil, imdi tm tarayclar tarafndan desteklenmekte ve kullanlmaktadr. Temel script komutlar her taraycda almasna ramen ileri dzey komutlar baz tarayclar tarafndan tam olarak desteklenmemektedir. Script komutlarnn browser zerinde alp almamasn gvenlik asndan kullancnn belirlemesi salanmtr. steyen browser ayarlarndan script kullanmn kapatabilir. Javascript dili 1.0 versiyonundan balayarak 1.8.5 versiyonuna ulamtr. Script kodlarn web editr uygulamasnda ya da notepad kullanarak oluturup dzenleyebilirsiniz.

1.1.1. HTMLe JavaScript Kodlarn Tantma

Script kodlarn htmle tantmak iin;

etiketleri kullanlr.

Type parametresi script bloklar arasnda yazlacak kodlarn trn belirtir. Language parametresi ile javascript kodlarnn srmn belirtir. Tm tarayclarda sorunsuz almas iin javascript semek doru olacaktr.

ekil 1.1: Javascript Srmleri

1.1.2. JavaScript Kodlarnn HTMLdeki Konumu

JavaScript kodlar sayfa ierisinde 3 blmde kullanlabilir. Birinci yol script kodlarn head etiketleri arasna yazarak kullanmaktr. Head etikletleri arasnda yazlan kodlar sayfa yklenmeden derlenecektir. Sayfamzda gerekleen olaylar karsnda (dme tklanmas vb.) kodlarn almasn istiyorsak gerekli fonksiyonlar ve deikenleri bu blmde yazmamz gereklidir.

 kinci yol script kodlarn body etiketleri arasna yazarak kullanmaktr. Body etiketleri arasna yazlan script kodlar sayfa yklendiinde otomatik olarak derlenip alacaktr.

ki ekildede sayfann kts ayn olacaktr. Script altrmann dier bir yolu *.js uzantl olarak kaydettiimiz harici bir js dosyasn sayfaya dahil edip kodlar altrmaktr. Web sayfasna harici javascript dosyas dahil etmek iin; Notepad programn aarak script kodlarn yazarak ilkKod.js eklinde masastne kaydedin.

ekil 1.2: Javascript Srmleri Web editr programn altrarak yeni bir html sayfas oluturun. Script komutunun src parametresini kullanarak oluturduunuz js dosyasn aadaki ekilde web sayfasna dahil ediniz.

 Oluturduumuz js dosyas ve html dosyas farkl klasrlerde ise js dosyasnn html dosyasna gre adresi src parametresi ierisinde belirtilmek gerekir. Html sayfasn altrdmzda, ekranda sola dayal olarak ilk JavaScript Kodlarm ifadesi yazdrlacaktr.

1.2. Yazm Kurallar

JavaScript kodlarn yazarken basit yazm kurallar vardr. Javascript kodlarn yazmamz salayan editrler kullanmadan hata bulmak ve dzeltmek ok fazla vakit alr. Javascript, html etiketleri gibi boluklar nemsemez. rnein sayi=10 ile sayi 10 ayn ekilde alacaktr. =

Komutlar ayn satr zerinde yazlyorsa noktal virgl (;) ile birbirinden ayrlr. Eer alt alta yazlyorsa noktal virgl kullanmaya gerek yoktur.

1.2.1. simlendirme
JavaScript dili byk kk harf duyarl bir dildir. JavaScript dilinde ad,Ad,AD,aD birbirinden farkl isimlerdir. JavaScript dilinde deikenler, fonksiyonlar vb. nesneler Say ile balayamaz Kelimeler arasnda boluk kullanlamaz Boluk yerine _ iareti kullanlr. JavaScript dili iin ayrlm kelimeler herhangi bir nesneye isim olarak verilemez.

break case catch continue default delete do

abstract

else finally for function if in instanceof

enum

new return switch this throw try typeof

int

var void while with

double import public short

boolean byte char class const debugger

export extends final float goto implements

interface long native package private protected

static super synchronized throws transient volatile

Tablo1.1: Ayrlm Kelimeler

1.2.2. zel aret Gsterimi

JavaScript kodlar ierisinde zel karakter kullanmak istersek / iaretini zel karakterin bana eklemek zorundayz. Eklenebilecek zel karakterler tablosu aadadr. Kod \' \" \& \\ \n \r \t \b \f kt Tek trnak ift trnak ve iareti ters taksim yeni satr satr ba tab backspace Besleme oluturmak Tablo1.2: zel iaretler

Yukardaki kodlarda volkan kelimesi iin ift trnak iareti kullanlmak istenmitir. ift trnak iareti ayn zamanda script ifadesinin bittiini gstermektedir. Bu yzden 12. nolu satr hata verecek ve script kodumuz almayacaktr.

\ ifadesi trnaklarn bana eklenerek bu hata ortadan kaldrlmtr. Sayfamz altrldnda aadaki ifade elde edilir.

1.2.3. Yorum Kodlar

Yazlan script kodlarna dier programclar yada kendiniz iin aklamalar eklemek isteyebilirsiniz. Yada istediiniz herhangi bir kodun almasn istemeyebilirsiniz. Bu durumlarda aklama satrlar eklemek ya da kodlar aklama satr haline getirmek faydal olacaktr. ki ekilde aklama satr eklenebilir. // simgesini kullanarak tek satr haline aklma satr eklenebilir. fade alt satra getiinde aklama satrndan km olur.

/* */ ifadeleri arasna yazlan her ey aklama olarak alnr. Satr snrlamas yoktur.

1.3. Deikenler
Programlama dillerinde belirlediimiz isimlerle olumu hafzada yer kaplayan alanlara deiken denir. Tm programlama dillerinde olduu gibi javaScript ierisinde de deiken tanmlamas yaplarak kullanlr.

1.3.1. Deiken Tanmlama ve Deiken Trleri

Deiken tanmlamak iin variable (deiken) kelimesinin ksaltlm olan var kelimesi kullanlr. Var kelimesinden sonra deiken ismi yazlarak deiken tanmlanm olur. Deiken tanmlanrken dikkat edilmesi gereken kurallar bulunmaktadr. Bu kurallardan isimlendirme bal altnda bahsetmitik bu kurallarn yannda Trke karakter kullanmak deikenler iin herhangi bir sorun oluturmasada, yazdnz kodlar altracak bilgisayarlarda ( rnein indeki bir bilgisayarda ) nasl alacan dnerek Trke iin kullanlan high-ASCII (, , , , , , , , , , , ) karakterlerini kullanmamamz daha uygun olacaktr.

Deiken tanmlamak iin kullanacamz kalp aadadr.

Deikenler iin kullanabileceimiz 3 temel deiken tr bulunur. Number veri tipi Saylar tutmak iin number veri tr kullanlr. Tm saylar iin tanmlanan deiken kullanlabilir. Boolean veri tipi Doru (true) ve yanl (false) olmak zere 2 adet lojik deer tutar. Genellikle karlatrma ilemlerinde kullanlr. String veri tipi Karakter,metin yada metin gruplarnda kullanlr. String ifadeler tanmlanrken trnak iareti kullanlr. Say deerleri trnak ierisinde tanmlanm ise string ifade olarak alnr ve matematiksel ilem yaplmazlar.

1.3.2. Deikenlere deer vermek

JavaScript dilinde tanmlanan deiken herhangi bir deer verilmediinde bo olarak bekleyecektir.

fadesi sayilar isminde bir deiken oluturmu fakat herhangi bir deer atamamtr. fade altrldnda alert komutu deikenin deerini uyar kutusu ierisinde gsterecektir.

ekil 1.3: Tanmsz uyars JavaScript dilinde deiken tanmlarken ayn satr ierisinde deikene deer verme imkan sunmutur. Bu sayede deiken tanmlanrken deer aktarlm olur.

Deikene eittir (=) ifadesi kullanlarak deer atanmtr. Eittir ifadesi atama opetatrdr, eitliin sa tarafndaki deeri sol taraftaki deikene aktarr. Deiken tanmlanrken unutmamz gereken kural deiken tanmlamann deiken kullanlmadan nce yaplmasdr. Ayn ilemi deikeni oluturduktan sonra deer vererek yapabiliriz.

11. satrda sayilar isminde bir deiken oluturulmu 12. satrda deikene deer atanmtr. Farkl trlerde deiken tanmlayarak deer vermek iin; Editr programn aarak yeni bir html sayfa oluturun.

 Kod blmne gelerek say ,string ve boolean trnde deikenler tanmlayp rastgele deerler verelim.

Tanmladmz deikenlerde isim deikeninde ift, cinsiyet deikeninde tek trnak kullanlmtr. levsellikte herhangi bir fark yoktur. Fakat kod okunurluu asndan i ie kullanmlarda farkl trnaklar kullanmak faydal olacaktr. Yas deikeni trnaklar arasna alnarak string ifadeye evrilmitir.

1.3.3. Tr dnmleri
Javascript dinamik bir dildir. Veri trlerini kendisi otomatik olarak yapabilir. Tanmlayp saysal deer verdiiniz bir deikene daha sonra string trnden deer atayabilirsiniz. Sayi isminde 50 deerinde bir deikenin deerini Merhaba yapmak iin; Editr programn aarak yeni bir html sayfas oluturun Sayi isminde bir deiken tanmlayarak 50 deerini verin.

Sayi deikeninin deerini Merhaba olarak deitirin.

JavaScript Number trn otomatik olarak string trne evirecektir.

1.3.4. Trler aras ilemler

Toplama ve kartma operatrleri ile farkl veri trleri arasnda ilemler yaplabilir. Toplama operatr ile yaplan ilemler

Yazi ve sayi deikenlerini toplatp sayfay altrdmzda sonu olarak

ktsn verecektir.

Boolean tr ile string trn topladmzda

ktsn verecektir.

Boolean tr ile number trn topladmzda say ile mantksal trn true (1) ve false (0) deerlerini toplar.

Sonu olarak 41 deerini verir.

False deeri yani 0 ile sayi trn topladmzda

40+0 = 40 deerini verecektir.

Fark operatr ile yaplan ilemler Say tr ile string tr arasnda fark ilemi yapldnda say deil ( NaN ) uyarsn verecektir.

Say tr ile Boolean tr arasnda ilem yapldnda

40-true(1)=39 deerini verecektir.

1.4. Operatrler ve ilem ncelik sras

1.4.1. Aritmetik Operatrler
Toplama operatr (+) Bu operatr, saysal ifadeleri ve mantksal ifadeleri, matematiksel olarak toplar.

Toplama operatr string ifadeleri yan yana yazdrr.

Fark operatr (-) Sadece matematiksel ifadelerde kullanlr. karma ilemi yaplr.

 arpma operatr(*) Matematiksel arpma ilemi yaplr.

Blme operatr (/) Blme ilemi yaplr.

Mod operatr (%) Blme ilemindeki kalan bulmak iin kullanlr.

Arttrma operatr (++) Saynn sonuna yada bana eklenmesi durumunda saynn deerini 1 arttrr.

 Azaltma operatr (--) Saynn sonuna yada bana eklenmesi durumunda saynn deerini 1 azaltr.

1.4.2. Atama Operatrleri

Atama Operatr (=) Sa taraftaki deeri sol taraftaki deikene atama ilemi yapar.

Ekle ve Ata Operatr(+=) Ymal toplam ilemi yapacaktr. Soldaki deikenin deerini sadaki deer kadar arttrp deikene yeni deer verir.

Bl ve ata(/ =) ,kar ve ata (- =), arp ve ata (* =), mod al ve ata( %=) operatrleride atama operatrleridir. alma ekli ekle ve ata ile ayndr.

1.4.3. Karlatrma Operatrleri

Deerleri karlatrp sonu olarak boolean bir deer retir. Ak denetimi yaparken sklkla kullanlr. < (kk), > (byk), <= (kk eit) , >= (byk eit) Karlatrma Operatrleri ki ifadenin karlatrmasn yapar sonu olarak boolean ifade elde edilir.

Eittir operatr = = Atama operatr ile olduka kartrlr. Matematikteki eitlik, programlamada = = ifadesi ile gsterilir. = = karlatrma operatrdr.

Eit deildir (!=) fadelerin eit olmamas durumunda true deerini dndrecektir.

1.4.4. Mantksal Operatrler

Mantksal VE Operatr (&&)

Koullardan hepsinin gereklemesi durumunu snar. Yani artlardan birisi gereklemezse yanl(false) deerini dndrecektir. Aadaki rnekte sayi1deikeninin deerinin 10 dan kk ve sayi2 deikenin deerinin 3 den byk olmas durumunda ekrana artlar doru ifadesi yazdrlacaktr.

Mantksal VEYA Operatr ( ||) Koullardan herhangi birisinin gereklemesi durumunu snar. artlardan birisinin gereklemesi doru (true) deerini dndrecektir.

Sayi1 ve sayi2 deikenin deerlerinden herhangi biri 5 den bykse true deerini dndrecektir.

Deil Operatr (!)

fadenin boolean karln tersine evirir.

1.4.5. lem ncelii

JavaScript kodlar altrlrken aadaki tabloya gre operatr ncelikleri belirlenir. Parantez ile bu nceliklerin srasn deitirebilirsiniz. Tablonun stten aaya doru en dk ncelikten en yksek ncelie doru sralanmtr. Operatr tr Operatrler virgl(comma) , atama = += -= *= /= %= <<= >>= >>>= &= ^= |= koul ?: mantksal-veya || mantksal-ve && bit dzeyinde-veya | bit dzeyinde-zel veya ^ bit dzeyinde-ve & eitlik == != === !== iliki < <= > >= in instanceof bit dzeyinde teleme << >> >>> ekleme/eksiltme +arpma/blme/mod */% etkisiz duruma getirme/ ! ~ + ++ arttrma typeof ,void ,delete arma/rnek yaratma ( ) new yelik . [] Tablo 1.3: Operatr ncelikleri

UYGULAMA FAALYET
Html dkman oluturmak , deiken tanmlamak, operatrleri deikenlerle kullanmak ve sayfay test etmek iin aadaki uygulamay yapnz. UYGULAMA FAUYGULAMA FAALYET lem Basamaklar Yeni html belgesi oluturun. html dkmanna script kodlarn yazmak iin gerekli etiketleri yaznz. ad, soyad deerlerini tutacak bir deiken ismi bulunuz. Veri tr olarak metinsel veri trn kullannz Deikene kendi isminizi deer olarak ataynz. Yanz bilgisini tutacak bir deiken ismi bulunuz. Ya bilgisi tutan deikene deer olarak yaz ile yazlm ya bilgisini veriniz. ki deikeni birbirine ekleyiniz. Sayi isminde bir deiken tanmlayp deerini bir arttrn. ad soyad,yas,sayi bilgisini tutan deikenleri sayfaya yazdrnz. Sayfay test ederek altrnz.

neriler Editr programlarn kullanabilirsiniz. <script></script> etiketleri arasna yazlan her trl kod javascript kodu olarak alglanr. Deiken ismi bulunurken Trke karakter kullanmamaya dikkat ediniz. ift trnak ierisine yazlan deiken deerleri deikeni string yapacaktr. Atama yaparken = operatrn kullannz. Deiken ismi belirlenirken en ksa ve en anlaml kelimeyi bulmaya alnz. yas="onyedi" eklinde otomatik tr dnm yaptrabilirsiniz. erisinde string ifade bulunan deikenleri + operatr ile birbirine ekleyebilirsiniz. ++ operatrlerini kullanarak ifadelere 1 ekleyebilirsiniz. write metodu ile sayfaya deikenleri yazdrabilirsiniz. Sayfay test etmeden kaydetmeyi unutmaynz.

KONTROL LSTES
Bu faaliyet kapsamnda aada listelenen davranlardan kazandnz beceriler iin Evet, kazanamadnz beceriler iin Hayr kutucuuna (X) iareti koyarak kendinizi deerlendiriniz. Deerlendirme ltleri Html sayfada script kodlarn altrabildiniz mi? Ayrlm kelimelerin neler olduunu biliyormusunuz? Deiken tanmlama kurallarn biliyormusunuz? String trnden ifadeleri deiken deeri olarak kullandnz m? Atama operatrn kullanarak isminizi deer olarak verdiniz mi? Yazdnz kodlar arasna aklama satrlar ekleyebildiniz mi? lem ncelii srasn rendiniz mi? Atama operatrnn nasl altn rendiniz mi? ++ operatrnn nasl altn rendiniz mi? Evet Hayr

1. 2. 3. 4. 5. 6. 7. 8. 9.

DEERLENDRME
Deerlendirme sonunda Hayr eklindeki cevaplarnz bir daha gzden geiriniz. Kendinizi yeterli grmyorsanz renme faaliyetini tekrar ediniz. Btn cevaplarnz Evet ise lme ve Deerlendirmeye geiniz.

LME VE DEERLENDRME
Aadaki cmlelerin banda bo braklan parantezlere, cmlelerde verilen bilgiler doru ise D, yanl ise Y yaznz. 1. 2. 3. 4. 5. 6. 7. ( ) Betik dili C,sheme,java,perl vb. dillerden etkilenmitir. ( ) Betikleri not defterinde dzenleyebilirsiniz. ( ) Script kodlar sayfa ierisinde 3 blmde kullanlr. ( ) Deiken tanmlarken deiken isimleri say ile balamak zorundadr. ( ) for ismini deiken ismi olarak kullanabiliriz. ( ) Yorum kodlar uygulamann akn deitirebilir. ( ) Deil operatr boolean deeri tersine evirir.

DEERLENDRME
Cevaplarnz cevap anahtaryla karlatrnz. Yanl cevap verdiiniz ya da cevap verirken tereddt ettiiniz sorularla ilgili konular faaliyete geri dnerek tekrarlaynz. Cevaplarnzn tm doru ise bir sonraki renme faaliyetine geiniz.

RENME FAALYET3
Bu faaliyet sonunda ak kontrol ,dizi ve fonksiyon yaplarn kullanabileceksiniz.

Ak diyagramlarnda kullanlan kontrol ve dng ilemlerini aratrnz.

1. KODLAMA YAPISI
1.1. Ak Denetimi
Programn akn karar ifadeleri ile denetleriz. Belli bir art sonucu, yazlan script kodlarnn istediimiz ekilde almasn salarlar.

1.1.1. if else Koul Deyimi

artn doru olup olmadn denetler art doruysa parantezler arasndaki kodlar altrr.

Normal parantezler arasndaki ifade true deerini dndryorsa, yani koul ifadesi doru ise ssl parantezler arasndaki kodlar alacaktr.

Birden fazla artn olduu durumlarda art says kadar if yazlabilir. Web sayfamzn ziyaretcilerine ,saate gre gnaydn, iyi lenler, iyi akamlar, iyi geceler, iyi uykular uyarlarn veren script yazmak iin;

Editr programn ap yeni bir html sayfas oluturun. Zaman isminde bir date nesnesi oluturun. Date nesnesini ilerleyen konularda
ayrntl ileyeceiz. Saat isminde bir deiken oluturup bilgisayarn sistem saatinden gelen saat bilgisini saat isimli deikene aktarnz.

Saat deikeninin deeri artk bilgisayarn sistem saatine gre belirlenmektedir. f

kontrol deyimleri ile sayfann alnda kullanclara iyi dileklerinizi iletebiliriz. art tablosunu oluturup script kodlarn yazmaya balayabilirsiniz. 06-11 Gnaydn 11-19 yi lenler 19-23 yi akamlar 23-06 yi geceler Tablo 2.1: art Tablosu

Birinci artm saat deikeninin 6 deerinden byk ve 11 den kk olmas.

artlarn birden fazla olduu durumlarda ve-veya operatrleri ile istediiniz kontrolleri yaptrabilirsiniz.

Dier artlar da tabloya uygun ekilde yazarak kodlarn yazmn tamamlyoruz.

 23 den sonra bilgisayar saati 0 deerini ald iin son artm olan 23-06 arasn 6
deerinden kk eklinde deitiriyor ve tek art olarak kontrol deyimi ierisine yazyoruz.

ki saydan byk olann bulan uygulamay hazrlamak iin;

Editr programn aarak, yeni bir html sayfas oluturun. ki sayy sayfa zerinden girmek iin promt komutunu kullanacaz. Sayfa
zerinden gireceimiz saylar sayi1 ve sayi2 deikenlerine atayacaz.

Girdiimiz saylar artk kontrol deyimleri ile kontrol edebiliriz.

Alert komutu ile uyar ekrannda hangi saynn byk olduunu yazdryoruz.

1.1.2. Ternary Operatr

f kontrol deyiminin yapt ilemi tek satrda yapmamz salar. Genellikle kyaslama ilemlerinde hzlca ve yerden tasarruf etmek iin kullanlr. Fakat kodlarda karmaa yaratt dnlerek ok tercih edilmez. Kullanm ok kolaydr.

Sayfadan girdiimiz saynn tek mi iftmi olduunu tespit eden script kodlarn yazmak iin;

Editr programnda yeni bir html sayfas an. Sayy kendimiz gireceimiz iin promt komutunu kullanmalyz. Prompt komutu ile
girilen sayy, sayi isminde bir deikene aktaralm.

Ternary operatrn kullanarak kodlarmz yazalm

Bir saynn ift olma art, saynn 2 ile tam blnmesidir. Bu yzden sayya mod2
ilemi yaptk, saynn mod2 ile sonucu 0 ise, say tam blnyor yani ift demektir.

1.1.3. "switch" Koul Deyimi

Birden fazla koul iin gerekli kontrol yapar fakat artn boolean bir ifade dndrmesine bakmaz deer ksmna yazlan ile kontrol ifadesinin ayn olup olmamas kontroln salar. Kullanm ve yaps ok basittir. stediimiz kadar kontrol ifadesi ekleyebiliriz.

Yazdmz yazy istediimiz renkle ekrana yazdran uygulama hazrlamak iin ;

Yeni bir html sayfas oluturun. ncelikle renk seimini kullancnn yapmasn salayalm. Promt komutu ile
kullancya seebilecei renklerin listesini hazrlayalm.

Kullanc istedii renk iin seim yapdktan sonra ekrana yazdrmak istedii yaz
iin yazi isminde bir deiken daha tanmlayn.

Switch kullanarak kullancdan gelen seime gre ekrana yazmz yazdralm.

 Document.write komutu parantezin ieriini ekrana yazdrmamz salar. Html etiketlerini yazdrmak istersek komutlar yazmamz yeterlidir. Etiketlerin parametrelerini yazarken tek trnak kullanmak hata olumasn engelleyecektir.

1.2. Dng Deyimleri

stediimiz sayda tekrar eden ilemleri bilgisayara yaptrmak iin kullandmz kodlara dng denir. rnein 1000 satrlk bir tabloyu oluturmak iin defalarca satr komutu yazmak yerine dng kurmak ok mantkl olacaktr.

1.2.1. "for" Dng Deyimi

Koul saland srece komutlarn tekrar tekrar altrlmasn salar. For dngs iin bir dng deiken tanmlamalyz. dng deikeninin balang deerinden itibaren deiken art miktar kadar deerini deitirir. Koul doru olduu srece dng alr.

Ekrana 1 den 10 a kadar olan saylar alt alta yazdran script kodlarn yazmak iin;

 Editr programn aarak yeni bir html sayfa oluturun. For dngmz iin 1 den balayarak 10 a kadar deeri deiecek bir deiken oluturmamz gerekli deikeni darda tanmlayabileceimiz gibi dng ierisinde de tanmlayabiliriz.

Alt alta yazdrmak iin <br> html etiketini kullandk. Bu ilemi yapmak iin 10 defa document.write komutunu kullanabilirdik . Fakat bizden 10 deilde 1000 say istenseydi 1000 defa komut yazmak ok zor olurdu.

Prompt komutu ile kullanc tarafndan girilen say kadar, kullancdan aldmz string ifadeyi yazdran script kodlarn yazmak iin; Kullancdan girmesini istediimiz sayy sayi deikenine string ifadeyide txt deikenine atayalm.

Dng deikeni olarak dd ksaltmasn kullanalm. Dd, 1 den balayarak girilen say kadar alsn.

Sayfay altrdmzda girilen say kadar girilen ifadey ekrana yazdracakr.

1.2.2. "While" Dng Deyimi

art salad srece while dngs alacaktr. Genellikle alma saysnn bilinmedii durumlarda while kullanlr.

eklinde kullanlr. Klavyeden 0 says girilene kadar, girilen saylar toplayan script kodlarn yazmak iin; Editr programn aarak yeni bir html sayfas oluturun. Saylarn toplamn tutmak iin toplam, ka saynn topland bilgisi iin say, girilen saylar tutmak iinde sayi deikenlerini tanmlayp ilk deerlerini verelim.

While ile dngmz kuralm artmz girilen saynn sfrdan farkl olmas, yani sayi deikeni sfrdan farkl olduu srece dng alsn.

Prompt komutu ile kullancya bir say girmesi iin iletiim penceresi oluturalm kanc sayy girmesi gerektiini say deikeni ile komutun ierisinde gstereceiz.

Girilen saylar ymal toplam yaparak toplam deikenin ierisine yazdracaz. Say deerini arttryoruz.

0 rakam girildiinde dngy bitirip ve ekranda saylarn toplamn yazdryoruz. Yazdrma komutunu dng ierisinde yazarsak her girilen saydan sonra sayfaya toplam yazdrr ama dng bittiinde yazlrsa tm saylar toplanp son toplam deeri sayfaya yazdrlacaktr.

1.2.3. Do-While Dng Deyimi

While dngsnden tek fark, artn kontrolnn altrlacak komutlarn en sonunda yaplmasdr. nce altrlacak komutlar altrlr, sonrada dng art kontrol edilecektir. Her artta dng en az bir kere alacaktr.

Sayfaya i deikeninin 20 den kk olduu srece ekrana merhaba yazdraca script kodlarn yazmak iin; Yeni bir html sayfas aarak kodlar yaznz. Documen.write ile sayfamza merhaba yazdracaz. Dikkat etmemiz gereken i deerinin balang deerini dngnn dnda vermek ve dngnn ierisinde i deerini arttrmak.

1.3. Diziler
Ayn trdeki verileri tek yerde saklamamz salayan deikenlerdir. lerinde birden fazla deeri tutabilirler.

1.3.1. Dizi Tanmlama

Dizi tanmlann birden fazla yolu bulunmaktadr. Bo bir dizi oluturup ieriini sonradan ekleyebilirsiniz.

Dizi tanmlamak iin var kelimesini daha sonra dizinin ismini yazmamz gereklidir. Yukardaki tanmlamada dizimizi oluturduk fakat ierisine herhangi bir dizi eleman atamadk. Gunler isminde bir dizi oluturup diziye deer girmek iin;

Komutlar gunler dizisini oluturdu, dizi elemanlarn tek tek 0.1.2. index numaral yerlere yerletirdik. Diziler 0. deerden balar. Dizilere deer vermenin ikinci yolu, diziyi olutururken deeri ayn satrda vermektir.

Deerler virgl ile birbirinden ayrlr. simler string deer olduu iin trnak ierisine alnarak yazlr. Diziye string,number,boolean veri trlerini kark olarak deer verilebilirsiniz. Dizi tanmlarken ve deer verirken tr snrlamas yoktur. Dizi tanmladktan sonra alert yada document snfnn write metodu ile diziyi kontrol edebilirsiniz.

Dizilerin eleman saysn bulmak iin lenght komutunu kullanabiliriz. Lenght komutu string ifadelerinde karakter saysn bulmak iin kullanlabilir.

1.3.2. ok Boyutlu Diziler

Dizilere eleman olarak deiik trde deerler atayabiliyorduk. Bir dizinin herhangi bir elemanna bir dizi deikeni atarsak ok boyutlu bir dizi elde etmi oluruz. rnein ogrenci isimli bir diziye iki dizi eleman ekleyelim

Dizi elemanna ulamak istersek alert komutunu kullanabiliriz. rnein renci dizisinin 1. Elemannn 0. Elemanna ulamak istersek

Komutunu kullanabiliriz.

1.3.3. Diziler zerinde lemler

Push( )

Dizinin sonuna yeni bir dizi eleman eklemek iin kullanlr.

 Pop( ) Dizinin sonundaki eleman kaldrmak iin kullanlr.

Unshift( ) Dizinin bana eleman ekler. Birden fazla eleman bir kerede eklenebilir.

Shift( ) Dizinin bandaki eleman kaldrr.

Delete Dizide istediimiz eleman silmek iin kullanlr. Delete komutu ile dizi eleman silinir fakat yeri dizi ierisinde kalr.

Dizinin 1 index numaral elemann iin silme komutu verdik. Dizinin 1 index numaral blmnn iini boaltm olduk. Dizi eleman kontrol edildiinde dizinin yine 4 elemanl olduunu grrz.

 Splice( ) Dizide istenilen blme eleman eklememizi yada eleman silmemizi salar. Dizi ierisinden eleman silmek iin

Komutlar kullanlr. Splice komutunda parantez ierisinde yazlan ilk rakam hangi dizi elemanndan sonra silinecei, ikinci rakam ise ka eleman silineceini belirtir. Yukardaki kullanmda ad dizisinde 0. elemanndan sonra 2 eleman siler. Eer ikinci rakam kullanlmasayd birinci rakamn gsterdii dizi elemanndan sonraki tm elemanlar silinecekti. Dizi ierine eleman eklemek iin;

Yukardaki kullanmda splice komutu ikinci elemandan sonra bir ve iki kelimelerini eklemek zere alacaktr. Eklemek ve silmek arasndaki fark ikinci rakamn 0 olarak belirlenmesidir. kinci rakam silinecek eleman saysn belirledii iin slice, kelimeleri eklemek iin alr. indexOf Dizi ierinde geen kelimeyi aramamz salar . Uzun dizilerde kelimenin, dizinin kanc eleman olduunu gsterir.

Alert komut 4 ktsn verecektir. Diziler 0 index numarasndan balar e nin bulunduu yer 4 index numaral yerdir. Aranlan kelime dizi ierisinde yok ise -1 deerini dndrecektir. Reverse ( ) Dizi elemanlarn ters evirmemizi salar.

Dizi reverse komutundan nce tanmland gibi ekrana yazdrlyor. Reverse komutu ile birlikte dizi elemanlar ters evrilip yeniden listeleniyor. Sort( ) Dizi elemanlarn sralamak iin kullanlr. Komut kullanldnda a-z, 0-9 aralklarnda sralama ilemini yerine getirir.

Dizilerin ieriini kontrol iin alert komutlarn kullanabiliriz.

1.4. Fonksiyonlar
Tekrarlanan iin yaplmas iin gerekli ilem ve komut gruplarna Fonksiyon ad verilir. Uygulama ierisinde bir komut yada komut grubunu tekrar tekrar kullanmak isteyebiliriz. Bu gibi durumlarda ayn satrlar defalarca yazmak zorunda kalabiliriz. Tekrar ettiimiz kodlarda belli bir deeri deitirmek istediimizde tm tekrar eden satrlar yeniden dzenlemek gerekecektir. Ksaca fonksiyonlar tekrar eden kod bloklarn alp paketlememize yarar. Uygulama ierisinde artk bu paketin ismini kullanarak istediimiz yerde bu kodlar altrabiliriz. Bu sayede daha sonra stne yaplacak deiiklikleri ve hata kontroln hzl bir biimde yapmamza imkan salar.

1.4.1. Fonksiyon Tanmlamak

Fonksiyon tanmlamak iin aadaki kalp uygulanr. Fonksiyon tanmlandnda editr penceresinin istenilen yerinde fonksiyon altrlabilir. Fonksiyonu tanmlamak iin :

 Fonksiyonu altrmak iin :

eklinde yazarak istenilen yerde fonksiyon altrlr. Sayfadan girilen ismi 20 defa alt alta yazdran fonksiyon hazrlamak iin; Editr programn aarak yeni bir Html sayfas oluturun. Fonksiyonumuzun ismi yazdir olsun. Prompt komutu ile dardan alnan ifadeyi tutmak iin isim deikenini kullanalm.

sim deikenini 20 defa alt alta yazdrmak iin for dngs kullanp fonksiyonu kapatalm.

Fonksiyonumuz artk hazr fonksiyonun ismi ile sayfada istediimiz yerde arp kullanabilir.

1.4.2. Fonksiyonlara Veri Gnderme-Alma

Yazdmz fonksiyonlara isteimize gre deer verip, ilenmi verinin sonucunu geri alabiliriz. Bylelikle fonksiyonlarmz anlk olarak verileri ileyip sonucu programa dahil edebilir.

Fonksiyona parametre gndermek iin yapmamz gereken fonksiyon isminden sonra parantez ierisine gelecek veri iin deiken ismi yazmak olacaktr. Kullancnn girdii ya bilgisine gre ka gn yaadn hesaplayan script kodlarn yazmak iin; Yeni html sayfas oluturun. fonksiyonumuzu head etiketleri arasnda tanmlayp body etiketleri arasnda kullanacaz. Kullancdan isim ve ya bilgilerini almak iin x ve y deikenlerini kullanacaz. Prompt komutunu kullanarak bilgileri deikenlere atayalm.

Fonksiyonumuzu head etiketleri arasnda yazmaya balayalm . fonksiyonumuz ad ve yas olarak 2 parametre alacak

Fonksiyona parametre olarak girilen yas bilgisini gn saysna eviriyoruz.

Write metodu ile sayfaya yazdryoruz ve fonksiyonu kapatyoruz.

Body etiketleri arasnda fonksiyonu ismi ile ararak almasn salyoruz.

Yukardaki rnekte fonksiyon kullancdan ald bilgileri ileyip ekrana kt olarak vermekte, fonksiyonun almas sonucu bir veri almak istiyorsak return kelimesini fonksiyon ierisinde kullanmak zorundayz. rnein girilen saynn karesini hesaplayan ve uygulamaya saysal deer olarak dahil eden bir fonksiyon yazalm.

 Script etiketleri arasnda karesi isminde bir fonksiyon tanmlayalm. Fonksiyonumuz dardan tek parametre alsn.

Dardan ald x deerini fonksiyon, kendi ierisinde kare alma ilemini yapsn.

Hesaplad kare deerini fonksiyon dna veri olarak gndermek iin return komutunu kullanalm.

Fonksiyonumuz kullanabiliriz.

hazr

artk

sayfada

istediimiz

ilemde

fonksiyonumuzu

1.4.3. Hazr Fonksiyonlar

PARSEINT( ) String ifadenin saysal ksmn alarak tam sayya evirir.

fade ondalkl ise parseInt fonksiyonu sadece tam olan ksmn alr.

String ifade saysal bir deer ile balamyorsa parseInt fonksiyonunun dndrecei deer NaN olacaktr.

PARSEFLOAT( ) parseInt fonksiyonundan fark saysal ifadeleri ondalkl olarakda alabilir.

STRING( ) fadeyi string ifade yapar.

NUMBER( ) String ifadeyi saysal deer yapar

UYGULAMA FAALYET
Web sayfasna hangi gnde olduumuzu yazdran fonksiyonu switch yapsn kullanarak hazrlaynz.

UYGULAMA FAUYGULAMA FAALYET lem Basamaklar neriler Yeni bir html sayfas oluturun. <script></script> etiketlerini kullannz. gnYaz isimli bir fonksiyon fonksiyon tanmlarken function komutunu tanmlayn kullanabilirsiniz. Gn bilgisini tutmak iin deiken gun deiken ismini kullanabilirsiniz. tanmlayn gun deikenine sistem saatinden Date nesnesinden getDay zellii ile gun gn numarasn ataynz deikenine deer atayabilirsiniz. switch deyimi gn deikenine gre gun deikenine gre ekrana gnleri almaldr. yazdracak switch deyimini yaznz. gun deerinin alaa deerler 0-6 aras olacaktr. deere gre alacak switch komutlarn yaznz. uygulama gun deeri 0 olduunda ekrana Pazar yazdrmaldr.

uygulamann son hali bu ekilde olmaldr.

switch deyimini dier gnler iin tamamlayp fonksiyonu kapatn.

 Fonksiyon ismini script ierisine yazp almasn salaynz.

sayfay kaydederek altrn.

Sayfada sistem saatinizin gsterdii gn grmelisiniz. Sistem tarihini deitirerek ekrandaki gn deerini deitirebilirsiniz. hazrladmz uygulama sunucu tabanl olsayd sunucu bilgisayara gre ilem yapar ve gn deerini sistem tarihi ile deitiremezdik.

KONTROL LSTES
Bu faaliyet kapsamnda aada listelenen davranlardan kazandnz beceriler iin Evet, kazanamadnz beceriler iin Hayr kutucuuna (X) iareti koyarak kendinizi deerlendiriniz. Deerlendirme ltleri f-else koul deyimine gre uygulamay ynlendirebiliyormusunuz? Switch deyimi ile uygulamay ynlendirebiliyormusunuz? Ternary operatrn kullanabiliyormusunuz? Uygulamay istenilen sayda tekrar ettirebiliyormusunuz? Uygulamay arta bal olarak tekrar ettirebiliyormusunuz? Dizi oluturup dizi elemanlar zerinde ilemler yapabiliyormusunuz? Fonksiyon tanmlayp veri gnderip alabiyormusunuz? Fonksiyonu uygulama ierisinde kullanabiyormusunuz? Hazr fonksiyonlar uygulama ierisinde kullanabiliyormusunuz? Evet Hayr

1. 2. 3. 4. 5. 6. 7. 8. 9.

DEERLENDRME
Deerlendirme sonunda Hayr eklindeki cevaplarnz bir daha gzden geiriniz. Kendinizi yeterli grmyorsanz renme faaliyetini tekrar ediniz. Btn cevaplarnz Evet ise lme ve Deerlendirmeye geiniz.

LME VE DEERLENDRME
Aadaki cmlelerin banda bo braklan parantezlere, cmlelerde verilen bilgiler doru ise D, yanl ise Y yaznz. 1.( ) Btn paralara ayrmak iin fonksiyonlar kullanabiliriz. 2.( )fonksiyon tanmlayarak ayn kod blounu hzl bir ekilde baka blmlerde kullanabiliriz. 3.( ) Ternary operatr ile if deyiminin yapt ileri yapabiliriz. 4. ( ) Switch tek koul iin alr. 5. ( ) delete ile dizi ierisinde istenilen eleman silinebilir. 6. ( ) fonksiyon tanmlamak iin function kelimesinden sonra fonksiyon ismi yazlmaldr. 7. ( ) ParseInt fonksiyonu ifadenin ondalkl ksmn alacaktr.

DEERLENDRME
Cevaplarnz cevap anahtaryla karlatrnz. Yanl cevap verdiiniz ya da cevap verirken tereddt ettiiniz sorularla ilgili konular faaliyete geri dnerek tekrarlaynz. Cevaplarnzn tm doru ise bir sonraki renme faaliyetine geiniz.

RENME FAALYET2
Olaylarla ilgili dzenlemeleri yapabilecek ve sahnede olaylar kontrol edebileceksiniz.

nternetdeki ActionScript ile yaplm oyun ve uygulamalar inceleyip klavye ve fareye verdikleri tepkileri inceleyiniz.

2. OLAYLAR ( EVENTS )
nternet sayfamzdaki her ey olaylarla gzlenebilir. Farenin herhangi bir yere tklamas klavyeden bir eyler yazlmas, sayfann yklenmesi vb. eylemler olaylarla kontrol edilebilir. Olaylarn gereklemesi ile yazlm fonksiyonlarn tetiklenmesi salanr. Olay yneticileri, olay gerekletiinde hazrladmz fonksiyonlar tetiklememizi salar. Kullanm basittir. Html etiketlerine olay yneticisi eklerken etiketi kapatmadan

komut satr eklenir. Html etiketlerinin neredeyse tamamna uygulanabilir. rnein <a> etiketine olay yneticisi eklersek yazm u ekilde olacaktr.

2.1. onClick Olay

html etiketlerinin stne tek tklandnda gerekleen olaylara onClick olaylar denir.

Sahneye eklediimiz dmeye tklama sonucu uyar veren script kodlarn yazmak iin; Yeni html sayfas oluturun. Head etiketleri arasna uyari fonksiyonunu tanmlayn.

Fonksiyonumuz ekrana dme tkland uyarsn versin.

Fonksiyonumuz hazr. Artk body etiketleri arasna dme oluturmak iin gerekli html komutlarn yazp olaymz dme etiketinin ierisinde tanmlayabiliriz.

Sayfay altrn. Sayfamzdaki dmeye tkladmzda fonksiyonumuz alacak ve uyar penceresinde Dme Tkland uyarsn verecektir. Ayn ilemi link etiketi ile yapalm.

Olaydan sonra fonksiyon yerine direk olarak script kodlarn yazabiliriz.

Yukarda hem sayfaya link salanyor hemde ekranda bir uyar penceresi olumu oluyor.

2.2. onDblClick Olay

html etiketlerinin stne ift tklandnda gerekleen olaylara onClick olaylar denir.

2.3. onLoad Olay

Sayfamzdaki herhangi bir nesnenin tamamiyle yklenme olayn temsil eder. Body,img,frame ve frameset etiketlerinde kullanlabilir.

Sayfa tam yklendiinde yklendi uyars veren onload olayn sayfann yklenme olay olduu iin body etiketi ierisine yazdk. Resim yklenmesine gre kontrol ettirseydik <img> etiketi ierisine yazmamz gerekirdi.

2.4. onUnLoad Olay

Nesnenin kaldrlmas olayn gzler. Body etiketi ierisine parametre olarak yazlrsa sayfann kapatlma olayn gzlemi oluruz.

2.5. onFocus Olay

sayfa zerinde html eleman ilem yaplmak zere seildiinde yani o nesneye odaklanldnda alan olay tipidir. rnein bir metin kutusu ierisine yaz yazlmak zere seildiinde uyar vermesini salayabiliriz. Yeni bir html sayfas aarak head etiketleri arasna olay gerekletiinde alacak fonksiyonu yazalm.

 Sayfann gvdesinde form elemann oluturup onFocus olayn gerekletirelim.

Metin kutusunun iine yaz yazmaya altmzda artk uyar verecektir.

2.6. onBlur Olay

Seilen html nesnesinin seilme zelliini kaybettiinde alan olaydr. Seilmi eleman seimden kartlmsa tetiklenir.

2.7. onMouseOver Olay

Html nesnesinin stne gelme olayn gzleyen olaydr. Sayfada bulunan foto.jpg isimli resmin zerine fare ile gelindiinde uyar veren script kodlar;

2.8. onMouseOut Olay

Farenin nesne zerinden ayrlmas olaydr.

2.9. onMouseMove Olay

Fare nesne zerinde gezdirildiinde meydana gelen olaydr.

2.10. onMouseDown Olay

Fare nesne zerinde basld anda gerekleen olaydr. Click ile fark click olaynn braklma eylemidir.

2.11. onMouseUp Olay

Farenin basl olan tuu brakma olaydr.

2.12. onKeyDown Olay

Klavyeden tua basma olaydr. Metin kutusu nesnesinde klavyeden tua basldnda olay dinleyicisi alr. Klavyeden baslan tuu ekranda gstermek iin; yeni bir html sayfas an. Klavyeden baslan tuu tespit etmek iin olayn event zelliini ve keyCode komutunu kullanacaz.

Event.keyCode baslan tuun ascii kodunu okuyacaktr. rnein boluk tuuna bastmzda keyCode bize 32 deerini verecektir. String.fromCharCode ile okunan ascii deeri tuun ismine evirecektir.

2.13. onSelect Olay

Metin kutular ierisindeki yaz seildiinde meydana gelen olaydr.

2.14. onResize Olay

Tarayc penceresinin boyutunu deitirdiinde gerekleen olaydr. Body etiketine yazlr.

AALYET
link ile sahneye eklenmi metin kutusunun ieriini onClick, onMouseOver, onMouseOut, onMouseDown olaylar ile deitiren uygulamay yapnz. lem Basamaklar Yeni bir html sayfas oluturun. Sayfaya id deeri durum olan bir metin kutusu oluturun Metin kutusunun altna link ekleyip onClick, onMouseOver, onMouseOut, onMouseDown olaylar iin gerekli komutlar yaznz. Olaylarn tetikleyecei fonksiyonlar oluturun neriler Notdefterini kullanabilirsiniz.

onClick olaynn tetikleyecei tiklandiVeBirakildi fonksiyonunu oluturun.

Fonksiyonlar <head></head> etiketleri arasnda oluturun. Tm fonksiyonlar script etiketleri arasna yazmalsnz. getElementById metodu bir sonraki renme faaliyetinde ayrntl ilenecektir. Id deeri durum olan nesnenin deerini deitirmek iin kullanlmaldr.

 onMouseOver olaynn tetikleyecei ustunde fonksiyonunu oluturun.

onMouseOut olaynn tetikleyecei ustundeDegil fonksiyonunu oluturun.

onMouseDown olaynn tetikleyecei tiklandi fonksiyonunu oluturun.

Aadaki sayfa grnm ile karlamalsnz. Sayfay kaydedip altrn.

KONTROL LSTES
Bu faaliyet kapsamnda aada listelenen davranlardan kazandnz beceriler iin Evet, kazanamadnz beceriler iin Hayr kutucuuna (X) iareti koyarak kendinizi deerlendiriniz. Deerlendirme ltleri Evet Hayr

1. Html etiketlerine olay yneticisi ekleyebildiniz mi? 2. onClick olayn kullanabildiniz mi? 3. onMouseOver olayn link etiketi ile kullanabildiniz mi? 4. onLoad olayn sayfa ierisinde kullanabildiniz mi? 5. onFocus olayn sayfa ierisinde kullanabildiniz mi? 6. onUnLoadolayn sayfa ierisinde kullanabildiniz mi? 7. onMouseOut olayn sayfa ierisinde kullanabildiniz mi? 8. onMouseMove olayn sayfa ierisinde kullanabildiniz mi? 9. onMouseDown olayn sayfa ierisinde kullanabildiniz mi? 10.onKeyDown olayn sayfa ierisinde kullanabildiniz mi?

DEERLENDRME
Deerlendirme sonunda Hayr eklindeki cevaplarnz bir daha gzden geiriniz. Kendinizi yeterli grmyorsanz renme faaliyetini tekrar ediniz. Btn cevaplarnz Evet ise lme ve Deerlendirmeye geiniz.

LME VE DEERLENDRME
Aadaki cmlelerin banda bo braklan parantezlere, cmlelerde verilen bilgiler doru ise D, yanl ise Y yaznz. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. ( ) OnkeyDown olay klavye tular ile ilgili olaylar gzler. ( ) onClick ve onMouseDown olaylar ayn ilemi yapar ( ) metin kutular ierisindekileri setiimizde onSelect olay meydana gelir. ( ) Fare nesnenin zerinde dolatrldnda onMouseMove olay meydana gelir. ( ) Fare nesne zerine tklandnda onClick olay meydana gelir. ( ) onLoad olay <a> etiketi iin kullanlabilir. ( ) Odaklanma meydana geldiinde onLoad olay meydana gelir. ( ) Olaylar sonucu sadece olaylar iin hazrladmz fonksiyonlar kullanlabilir. ( ) Tarayc penceresinin boyutunu onResize olay ile deitirebiliriz. ( ) Farenin basl olan tuu brakma olay onMouseUp olaydr.

DEERLENDRME
Cevaplarnz cevap anahtaryla karlatrnz. Yanl cevap verdiiniz ya da cevap verirken tereddt ettiiniz sorularla ilgili konular faaliyete geri dnerek tekrarlaynz. Cevaplarnzn tm doru ise bir sonraki renme faaliyetine geiniz.

RENME FAALYET3
Animasyon yazlmn kullanarak Snf (class) ilemlerini gerekletirebilirsiniz.

Nesneye ynelik programlama nedir? Aratrnz.

3. NESNELER
JavaScript tm web sayfalarn ve tarayclarn nesne olarak grr. Kendimiz nesne oluturabileceimiz gibi, bir ok ii kolayca yapabilmemiz iin bnyesinde hazr nesnelerde bulundurmaktadr. Dizi ilemleri iin array, tarih saat iin date , aritmetiksel ilemler iin math nesnesi vb. ilerinde birok zellii ve metodu barndrmaktadr. Bu sayede kolay ve hzlca ilemlerimizi yapabiliriz.

3.1.

Window Nesnesi
Tarayc ile ilgili zellik ve metodun bulunduu tarayc nesnesidir.

3.1.1. DefaultStatus zellii

Taraycnn alt ksmndaki, durum ubuunda gsterilen mesajdr. Script komutlar arasnda herhangi bir yere yazlabilir. Tarayclarn birksm bu zellii desteklememektedir.

ekil 4.1: DefaultStatus uyars

3.1.2. Alert Metodu

Daha nceki rneklerde defalarca kullandmz alert kullancy bilgilendirmek iin uyar pencereleri oluturur. Gereksiz yere kullanmaktan kanmak gerekir. Ekranda 10 defa uyar kutusu oluturacak script kodlar iin ; Editr penceresini aarak yeni bir html sayfas oluturun. Ekranda 10 kez uyar verecei iin for dngmz kurarak alert komutunu dngmz ierisine yazyoruz.

Sayfamz altrdmzda ekranda 10 adet uyar penceresi oluacak ve tek tek kapatmamz beklenecek.

3.1.3. Confirm Metodu

Yaplan ilem sonucu onay kutusu oluturur. Onay kutusunun sonucu bir boolean olarak geri dner. True yada false eklinde alnan cevap ile programn ak belirlenir. Sayfaya eklediimiz kapat dmesine basldnda sayfay kapatmak iin onay isteyen script kodlar iin; Editr programn aarak yeni bir html sayfas oluturun. Head etiketleri arasnda, dmeye basldnda almak zere bir fonksiyon oluturalm. Fonksiyonumuz dmeye bastnda bir onaylama penceresi olutursun. Kullancnn verecei cevaba gre sayfay kapatp kapatmamaya karar versin. Onaylama kutusu iin karar isminde bir boolean deiken oluturalm. Confirm kutusundan gelecek true yada false bilgisi bu deikene atanacak.

ekil 4.2: Onay penceresi Onay kutusunda tamam tkland takdirde, karar deikenimiz true, iptal tklandnda false deerini alacakdr. Karar deikenin alaca deere gre if kontrol deyimini kullanarak sayfann kapanp kapanmama ilemini gerekleitireceiz. Kullanc tamam dmesine basarsa ekranda yine bekleriz uyars kacak ve sayfa kendini kapatacaktr.

Kullanc iptal dmesine basarsa bizimle kaldnz iin teekkrler uyars ekranda kp kullancya teekkr ediyoruz.

Fonksiyonumuz hazr. Body etiketleri arasnda dmemizi oluturup fonksiyonumuzu dmemizin onclick olayna ekliyoruz.

Sayfamz altrarak test edelim.

3.1.4. Close Metodu

Aktif olan sayfay kapatmaya yarar.

3.1.5. Prompt Metodu

Uygulamaya dardan veri girmek iin kullanlr. Promt ile alnan bilgi string trndedir. Herhangi bir deer girilmedii takdirde dnecek deer null olacaktr.

3.1.6. Open Metodu

Yeni bir pencere amak iin kullanlr. Editr program betik dili destekledii iin nesnenin zellik ve metodlarna ulamak ok kolaylar. Window yazp nokta koyduunuzda tm metodlar karnza kacaktr.

Open metodu 3 adet parametre alr. URL parametresi :alacak sayfann adresini yazdmz blmdr. Name parametresi: alacak sayfann target zellii iindir. _blank,_self,_parent,_top ve kendi tanmladmz herhangi bir ismi verebiliriz. zellik parametresi: alacak sayfann zelliklerini belirlediimiz blmdr. Buradaki parametreler ile sayfann tam ekran almas, boyutunun deitirilip deitirilemeyecei, adres ubuunun gsterilip gsterilmeyecei gibi bir ok zellik deitirilebilir.

Buradaki parametreler birlikte kullanld gibi tek balarnada kullanlabilirler. rnein sadece link oluturmak iin URL parametresi kullanlabilir, yada bo bir sayfa amak iin zellik parametreleri tek balarna kullanlabilirler. Aadaki rnekte sadece tanmlanan balanty aan bir fonksiyon oluturulmutur.

Sayfaya eklenen dmeye onclick olay ile balanti fonksiyonu tanmlanmtr.

Open metodunun dier zellikleri aadaki tabloda verilmitir. fullscreen=yes|no|1|0 height=pixels left=pixels location=yes|no|1|0 menubar=yes|no|1|0 resizable=yes|no|1|0 scrollbars=yes|no|1|0 status=yes|no|1|0 titlebar=yes|no|1|0 toolbar=yes|no|1|0 top=pixels Sayfann tam ekran almasn salar Sayfann yksekliini belirler, piksel cinsindendir. Alan pencerenin sola gre mesafesini belirler Adres ubuunun gsterilip gsterilmeyeceini ayarlar. Men zerindeki araubuunun gsterilmesini belirler. Sayfann yeniden boyutlandrlmasn ayarlar Sayfadaki kaydrma ubuklarn ayarlar Durum ubuunun gsterilmesini ayarlar Balk ubuunun gsterilip gsterilmeyeceini ayarlar. leri,geri,dur dmelerinin gsterilmesini ayarlar Sayfann yukardan mesafesini ayarlar

width=pixels

Sayfann geniliini ayarlar, piksel cinsindendir. Tablo 4.1: Open metodu zellik tablosu

3.1.7. Print Metodu

Yazdrma penceresini amaya yarar.

3.1.8. Find Metodu

Arama penceresinin almasn salar. ou tarayc bu metodu desteklememektedir.

3.1.9. moveTo Metodu

Sayfay ekran zerinde istediimiz koordinata tamaya yarar. 200*200 px olarak atmz sayfay istediimiz yere gtrmemizi salayan script kodlar iin; Editr programn aarak yeni bir thml sayfas oluturun. Yeni pencere amak iin open metodundan faydalanacaz. Sayfaya eklediimiz bir dme ile yeni bir pencere aalm. Pencereyi aarken isim verirsek, dier nesneler ile etkileime sokmak kolay olacaktr. yeniPencere isimli bir pencere oluturduk.

 yeniPencere isimli nesnemize artk write metodu ile sayfa zerine yaz yazdrabiliriz. Sayfamza dme ekleyip oluturduumuz fonksiyonu dmeye event olarak atayalm.

Pencereyi tamak iin moveTo metodundan faydalanacaz. moveTo metodunu bir fonksiyon ierisinde tanmlayp dmeye fonksiyonu atayabiliriz. Ya da direkt olarak dmenin onclick olayna, kodlar tanmlayabiliriz.

3.2. Navigator Nesnesi

Tarayc hakknda kullancya bilgi verirler. 3.2.1. appName zellii
sayfann ald browser ismini verir.

eklinde kullanlr.

3.2.2. appCodeName zellii

Taraycnn kod adn verir.

3.2.3. appVersion zellii

Taraycnn versiyonunu verir.

3.2.4. BrowserLanguage zellii

Taraycnn dilini verir.

3.2.5. javaEnabled Metodu

Taraycda javann ak olup olmadn kontrol eder.

3.3. Document Nesnesi

Tm html dkman document nesnesi ile ifade edilmektedir. Sayfa ierisindeki herhangi bir elemana document nesnesi ile eriebilir zelliklerini deitirebiliriz.

3.3.1. getElementById metodu

sayfa ierisinde id zellii verilmi herhangi bir elemann zelliklerine ulamak iin kullanlr. Sayfada bulunan metin kutusunun ieriini istenilen ekilde deitiren script kodlar iin; Editr programn aarak yeni bir html sayfas oluturun.

 Metin kutusunu oluturun. Metin kutusu oluturulurken id etiketini vermemiz gereklidir. getElementByid metodunu kullanabilmemiz iin zellii deitirilecek html elemannn mutlaka bir id deeri olmas gerekir.

i bo bir metin kutusu oluturduk. Dme oluturup dmenin tklanma olayna metodu tanmlayalm. Metin kutusu ierisine yazlacak bilgiyi prompt ile kullancdan alalm.

24. Satrda dmemizi oluturduk ve onClick olayn yazmaya baladk. 25. Satrda id deeri txt_kutu olan elemann value deerini kullancdan prompt metodu ile alnan bilgi olarak deitirdik.

3.3.2. getElementByName metodu

getElementById ile ayn ekilde alr. Tek fark id bilgisi yerine name bilgisini kullanr. Baz html etiketleri grup olarak ayn ismi alr (radio dmeleri ,checkbox ) bu elemanlar iin kullanlrken item( ) metodu ile bu elemanlara ulalabilir.

3.3.3. Write( ) Metodu

Sayfaya metinleri ve html ieriklerini yazdrmak iin kullanlr.

3.4. Form Nesnesi

Kullancdan bilgi almak , kullanclarla etkileime gemek, sitemize dinamik bir yap katabilmek iin kullanlan html elemanlardr.

3.4.1. Action zellii

Hazrladmz form ile kullancdan alnan bilgilerinin gnderilecei ve ilenecei adres iin kullanlr. Genellikle sunucu tarafl programlama dilleri ile hazrlanm (ASP, PHP, ASP.NET, JSP, ColdFusion vb.) bir dosyasr.

3.4.2. Metod zellii

Form ierisinden girilen bilgilerin gnderilecei sayfaya nasl gnderileceini belirler. ki ekilde gnderim yapar. GET;ile gnderdiinde adres satrnda gnderilen bilgiler ak ekilde gsterilir. POST ile iletim yapldnda bilgiler gizli olarak iletilir. Get e gre olduka gvenlidir.

3.5. Date Nesnesi

Betik dili ile tarih ve saat ilemleri iin kullanlan metod ve zelliklerin bulunduu nesnedir. Date nesnesi oluturduktan sonra metodlarla nesne ierisinden bilgiler rahatlkla alnabilir.

3.5.1. getDate( ) metodu

Sistem saatinde ayn kanc gn olduu bilgisini verir.

alan kodlar sonucunda sistem saatine gre 1-31 aras bir deer ekrana yazdrlacaktr.

3.5.2. getDay( ) Metodu

Sistem saatine gre haftann kanc gn olduu bilgisini verir.

Pazar gn iin 0 deerinden balayarak cumartesi gn 6 deerinde son bulur.

3.5.3. getFullYear( ) Metodu

Sistem saatine gre yl bilgisini verir.

3.5.4. getHours( ) Metodu

0-23 aras saat bilgisini verir.

3.5.5. getMinutes( ) Metodu

0-59 aras dakika bilgisini verir.

3.5.6. getMonth( ) Metodu

0-11 aras ay bilgisini verir.

3.6. Math Nesnesi

Betik dilinin matematiksel ilemleri yapmak iin kulland metod ve zelliklerin bulunduu nesnedir.

3.6.1. Math Nesnesinin zellikleri

Matematikte kullanlan evrensel sabit deerleri verirler

3.6.2. Random( ) Metodu

0 ile 1 aras rastgele say retir.

3.6.3. Round( ) Metodu

Sayy yuvarlamak iin kullanlr.

3.6.4. Pow(x,y) Metodu

x saysnn y. kuvvetini bulur

3.6.5. Sqrt( ) Metodu

Saynn karekkn bulur.

UYGULAMA FAALYET-1
Sayfa yklendiinde sayfa ile birlikte baka sayfalarnda otomatik almasn salayan uygulamay yapnz. lem Basamaklar Yeni bir html sayfas oluturun Alacak sayfalar iin fonksiyon oluturun Fonksiyonun ismi sayfaac olsun fonksiyonumuz altnda http://www.meb.gov.tr -ve http:// mtegm.meb.gov.tr sayfalarn asn Sayfa yklendiindiinde fonksiyonu altrmas iin uygun olay yneticisini sayfaya ekleyin Sayfay kaydedip altrn Taraycnzn popup engelleyicisi aksa uygulamanz almayacaktr. neriler Tasarm editrlerini kullanabilirsiniz. Fonksiyonu head etiketlerini arasnda oluturun

onload olay yneticisini kullanmalsnz. onload olayn body etiketine eklemelisiniz. Tarayc ayarlarndan popup ayarlarn dzenleyebilirsiniz.

UYGULAMA FAALYET-2
Dmeye basldnda rastgele 1-49 aras 6 adet rastgele say reten uygulamay hazrlaynz. lem Basamaklar Yeni bir html sayfas oluturun Rastgele saylar iin fonksiyon oluturun Fonksiyonun ismi sayisal olsun fonksiyon altnda id deeri sayi1 olan html etiketinin ierisinde yazan deeri deitirsin 0-49 aras rastgele deer retin retilen sayy yuvarlatp tam say haline getirin innerHTML etiketin ieriini deitirmek iin kullanlr. neriler Tasarm editrlerini kullanabilirsiniz. Fonksiyonu head etiketlerini arasnda oluturun

Random metodu 0-1 aras deer retir. retilen sayy 49 ile arparsanz 49 kat bir say elde edersiniz. Round( ) metodunu kullanabilirsiniz. Etiketi body etiketleri arasna eklemeyi unutmayn

sayfaya id deeri sayi1-6 olan alt adet <p> etiketi ekleyin.

fonksiyon ierii aadaki gibi olmaldr.

fonksiyon ierisine 6 etiket iin alt ayr komut yazn.

Fonksiyonu tetiklemek iin dme kullann.

nput etiketi ile sayfaya dme ekleyebilirsiniz.

KONTROL LSTES
Bu faaliyet kapsamnda aada listelenen davranlardan kazandnz beceriler iin Evet, kazanamadnz beceriler iin Hayr kutucuuna (X) iareti koyarak kendinizi deerlendiriniz. Deerlendirme ltleri Evet Hayr

1. 2. 3. 4. 5. 6.

Window nesnesini sayfada kullanabildiniz mi? Math nesnesini sayfada kullanabildiniz mi? Date nesnesini sayfada kullanabildiniz mi? Navigator nesnesini sayfada kullanabildiniz mi? Document nesnesini sayfada kullanabildiniz mi? Form nesnesini sayfada kullanabildiniz mi?

DEERLENDRME
Deerlendirme sonunda Hayr eklindeki cevaplarnz bir daha gzden geiriniz. Kendinizi yeterli grmyorsanz renme faaliyetini tekrar ediniz. Btn cevaplarnz Evet ise lme ve Deerlendirmeye geiniz.

LME VE DEERLENDRME
Aadaki cmlelerin banda bo braklan parantezlere, cmlelerde verilen bilgiler doru ise D, yanl ise Y yaznz. 1. 2. 3. 4. 5. 6. ( )Tarayc ile ilgili zellik ve metotlarn bulunduu nesne document nesnesidir. ( ) Alert metodu uyar penceleri oluturur. ( ) Confirm metodu ile onay penceleri oluturulur. ( ) Uygulamaya dardan veri girmek iin close metodu kullanlr. ( ) Taraycnn versiyonunu appVersiyon zellii ile renebiliriz. ( ) Sayfa ierisinde id zellii verilmi bir etiketin ieriini getElementById metodu ile deitirebiliriz. ( ) GetDate metodu 1-24 aras deer retir. ( ) GetMounth metodu ile 0-11 aras deer retir. ( ) Random( ) metodu 0-100 aras deer retir. ( ) Round( ) metodu ile girilen saylarn karesi alnr.

7. 8. 9. 10.

DEERLENDRME
Cevaplarnz cevap anahtaryla karlatrnz. Yanl cevap verdiiniz ya da cevap verirken tereddt ettiiniz sorularla ilgili konular faaliyete geri dnerek tekrarlaynz. Cevaplarnzn tm doru ise bir sonraki renme faaliyetine geiniz.

MODL DEERLENDRME
Aadaki sorular dikkatlice okuyunuz ve doru seenei iaretleyiniz. 1. JavaScript yazlm aadaki hangi dilden etkilenmitir. A) .Net B) Jscript C) Perl D) Objective-j Aadakilerden hangisi uygun deiken ismidir ? A) case B) try C) tree D) const

2.

3. I. Say ile balayamaz II. kelimeler aras boluk kullanlamaz III. Boluk kullanlabilir Yukardakilerden hangisi ya da hangileri deiken oluturma kurallarndandr. A) Yalnz II B) I - II C) II - III D) I II - III 4. Yorum kodlar ile ilgili aadakilerden hangisi yanltr? A) Yorum kodlar uygulamann istediimiz yerine aklama eklememizi salar B) ki ekilde aklama satrlar eklenebilir. C) Yorum kodlar uygulamann ileyiini deitirir. D) /**/ ifadeleri ok satrl aklama satrlar oluturur.

5. I. Atama II. yelik III. iliki IV. eitlik V. koul Yukardaki operatrleri ncelik srasna gre yksek ncelikten dk ncelie doru sralaynz. A) II-III-IV-V-I B) I-II-III-IV-V C) II-III-V-IV-I D) IIIIII-V-IV

Aadaki cmlelerin banda bo braklan parantezlere, cmlelerde verilen bilgiler doru ise D, yanl ise Y yaznz. 6. 7. ( )Program akn karar ifadeleri ile denetleriz. ( )if-else kontrol deyiminde normal parantezler arasndaki ifade true deeri dndryorsa ssl parantezler aras kodlar alr. ( ) Ternary operatr if kontrol deyiminin yapt ii tek satrda yapar. ( ) Splice metodu ile dizi elemanlarn silme ve eklme yapabiliriz. ( ) .onBlur fare olaylarn kontrol eder. ( ) Confirm metodu ile boolean bir deer dner. ( ) Open metodu window nesnesine aittir. ( ) Location zellii ile sayfa tam ekran atrlabilir. ( ) Browser ismini appBrowser zellii ile renebiliriz. ( ) Math nesnesi ile trigonometrik ilemler yaplabilir.

8. 9. 10. 11. 12. 13. 14. 15.

DEERLENDRME

Cevaplarnz cevap anahtaryla karlatrnz. Yanl cevap verdiiniz ya da cevap verirken tereddt ettiiniz sorularla ilgili konular faaliyete geri dnerek tekrarlaynz. Cevaplarnzn tm doru ise bir sonraki modle gemek iin retmeninize bavurunuz.

RENME FAALYET-1 CEVAP ANAHTARI 1 2 3 4 5 6 7 RENME FAALYET-2 CEVAP ANAHTARI 1 2 3 4 5 6 7 D D D Y D D Y D D D Y Y Y D

RENME FAALYET-3 CEVAP ANAHTARI 1 2 3 4 5 6 7 8 9 10 D Y D D D Y Y Y D D

RENME FAALYET-4 CEVAP ANAHTARI

1 2 3 4 5 6 7 8 9 10

Y D D Y D D Y D Y Y

MODL DEERLENDRME CEVAP ANAHTARI

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 C C B C A D D D D Y D D Y Y D

KAYNAKA
http://www.w3schools.com/jsref/default.asp (03.05.2012/13.00) https://developer.mozilla.org/en/JavaScript/Reference (08.05.2012/13.00)