| Çevrimdışı
Kullanıcıların profil bilgileri misafirlere kapatılmıştır.
|
Ders-4: OlaylarEvents Bugünün dersi Events yani olaylar hakkýnda. Eðer sitenizin epeyi bir interaktiv olmasýný istiyorsanýz kesinlikle Event’lere ihtiyacýnýz var. Events yani olaylarý Javascriptin bir kýsýmlarýný tetikleyenler olarak görünüz. Eðer birisi faresini linklerin üzerinde gezdirirse, "onMouseOver" özelliði ateþlenmiþ olur. Eðer linki týklarsa, bu sefer önce "onMouseDown", sonra ise "onMouseUp" ve "onClick" ateþlenmiþ olur. Derslerin en baþýndaki Javascript örneðini hatýrlarsanýz (Alert-box) orada "onMouseOver" yani "farenin üzerinden gezmesi" eventi karþýlýðýnda o fonksiyon ateþlenmiþ oldu. "onMouse" diye baþlayan event’ler bol biçimde deðiþik menü yapýmýnda kullanýlabilir. Düðmelerin renkleri, yada resimlerin deðiþmesi gibi efektler. Ve iþte ilk örnek:
Move your mouse here! <b onMouseOver="yey()">Move your mouse here!</b> Gördünüz mü? Bir kere fare üzerine geldiðinde ("onMouseOver") ’yey()’ fonksiyonu çaðrýlýyor. "yey()" fonksiyonu ile daha önceden sayfanýn üst kýsmýnda Alert-Box açýlmasý þeklinde tarif edilmiþti. Event (olay) tetiklenince hemen Alert-boxda açýlmýþ oldu. Çok yaygýn bir örnekte, resim deðiþiklikleridir. Bugün çok basit bir tanesini göreceðiz. Aþaðýdaki 2 resmi ve "onMouseOver" ile "onMouseOut" efektleri ile aþaðýdaki 2 resimde uygulayacaðýz:
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.
Ýlk satýrla baþlayalým: <img src= "image1.gif"> Resimin bir ismi olmasý çok önemlidir. Þimdi "onMouseOver" ile kodu geniþletelim. <img src= "image1.gif" name="image1" onMouseOver="document.image1.src= "image2.gif’";> Olayý bir diyalog gibi hayal edini: - Git ismi "image1" olan resmi bul.
- Tamam efendim,
- Þimdi "image1"in "src"sini "image2.gif" ile deðiþtir,
- Oda tamam efendim, görev bitmiþtir.
- Aferin, güzel iþ!
- Teþekkür ederim!. Sanýrým anladýnýz. Þimdiye kadar ki ile sonuç:
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.
Þimdi diyeceksiniz ki, resmi nasýl eski haline getirebiliriz. Azýcýk nefes alýn yahu, nefesinizi tutmuþ buraya bakýyorsunuz. Gidin iki tane kahve kapýnda gelin bakalým. Kahvenizi aldýysanýz devam edelim, þimdi artýk ikinci event olan "onMouseOut" kullanma zamaný geldi. (yani fare resmi terkedince orijinal haline dönme iþlemi). Þimdi yukardaki koda gerekli ilaveyi yapalým: <img src= "image1.gif" name="image1" onMouseOver="documents.image1.src= "image2.gif’"; onMouseOut="document.image1.src= "image1.gif’";> Sanýrým deminki diyalog gibi bir senaryo yazmamýza gerek yok, siz manzarayý çakmýþsýnýzdýr artýk. Olan bir önceki efektin tam tersidir.
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.
Event (olaylar) dersi için bukadar yeter sanýrým. Bu gün bir resmin kaynaðýnýn nasýl deðiþtirildiðini öðrendiniz. Dersin özetini çýkarmadan önemli noktalarý belirtmek istiyorum. - Nesnelere kesinlikle ayný isimi vermeyin. Ayný isimli 2 resmin javascriptin çalýþmasýna bir zararý olmaz (hata mesajý vermez) sadece bir tanesini belirtmemiþ olursunuz. Eðer moseover effekti isterseniz, bu sefer ikisi birden deðiþir :-))
- Yukardaki örnekte ’image1.gif’ etrafýnda tek týrnak, geri kalan heryerde "" vardý. Eðer "" içinde tekrar týrnak gerekirse, içerde ’ kullanmanýz gerekir. Þöyle: " ’ Örnek ’ " veya ’ " Örnek " ’ olabilir.ama kesinlikle " ’ Örnek " ’ veya " " Örnek " " olmamalý. Tamammý?
Ders-5: Teori: DOMTeori: DOM document.writeln() ne demektir? Siz ne iþe yaradýðýný ve ne zaman kullanmanýz gerektiðini biliyorsunuz, ama neden document.writeln() diye adlandýrýlmýþtýr? Halbuki print_into_source() gibi daha çok anlam ifade eden bir deyim de olabilirdi. Bu ve bir çok sorunun cevabý DOM’da (Document Object Model) gizlidir. DOM Javascriptin sayfalarý tanýmlama ve tarif etme þeklidir. Daha sonra bu konuyu açacaðýz. DOM hakkýnda konuþmaya baþlamadan önce, object-orientated (nesne-yönlendirilmeli) programlamayý tartýþmalýyýz. Biliyorum, bu biraz teknik elemanlarýn anlayacaðý þeyler gibi duruyor ama öyle deðil. Object-orientated programlamanýn en azýndan Javascript tarafýný çözmek için fazla teknik olmaya gerek yok. Object-orientated programlamanýn ardýndaki esas fikir, bilginin nesnel terimler halinde saklanmasýdýr. Örneðin, window bir object’dir (nesne). Daha da açacak olursak: Object’ler objectlerin nasýl davranacaklarýný tarif eden özelliklere sahiptirler. Bu özellikler, objectlerden bir "." (nokta) ile ayrýlmýþtýr. Ne demek istediðimi anladýnýz deðil mi? Bir örnek: window.status = "Hey, orada neler oluyor?!"; Bu browser penceresinin status-bar’ýna (pencerenin altýndaki gri satýr) Hey, orada neler oluyor?! diye yazacaktýr. Gördüðünüz gibi "window" burada object oluyor, "status" ise özelliði. Metnin string’i ( Hey, orada neler oluyor?! ) ise özelliði tarif ediyor. Özelliklere ilave olarak nesnelerin bir de metodlarý vardýr. Bu metodlar da neyin nesi, bunlarý öðrenmemiz þ
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.
mý? diyebilirsiniz. Metodlara örnek, alert(), writeIn() veya open(). Özellikler (properties) gibi metodlar da objectlerden bir "." (nokta) ile ayrýlýrlar. document.writeln(’I know JavaScript!’) Property (özellik) ve metodlar arasýndaki esas fark, metodlar her zaman 2 tane parantez tarafýndan takip edilirler. Parantezlerin içine ise parametreleri koyarsýnýz. Örneðin alert() parantezlerinin içine alert-boxda çýkmasýný istediðiniz yazýlarý koyarsýnýz. writeln() metodu parantezi içine yazýlan string ise HTMLye yazdýrýlýr. Devam etmeden önce son bir þey: window herzaman varsayýlan object’dir. Örneðin window.status yazmayla sadece status yazmak arasýnda bir fark yoktur. Gerçek programcýlar genelde yalnýz status yazarlar, ama biz ilerde kaybolmamak için uzun haliyle yazsak daha iyi olur sanýrým. Özetlersek: Þimdiye kadar object’lerin görünümlerini tarif eden properties (özellikleri) olduðunu öðrendik. Ayrýca biliyoruz ki metodlar bir þeyin nasýl yapýlacaðýný tarif ederler. Sonra window’un varsayýlan object olduðunu öðrendik, istersek window’u kodumuza dahil etmeyebiliriz. Kýsa özet için bu kadar yeter. Þimdi baþka bir ilginç yanýna bakalým: Objectlerin özellikleri de object olabilir!.. Bir önceki derste resimlerin dönüþümünü hatýrlýyormusunuz? "image1"in kaynaðýný window.document.image1.src = ’whatever.gif’ þeklinde göstermiþtik. Dikkat ederseniz, document gerçekte bir property (özellik) olamaz, çünkü özellikler kendilerini tarif eden bir þey tarafýndan takip edilmelidir. Aynýsý image1 içinde geçerlidir. Sanýrým artýk tahmin etmiþsinizdir yukardaki örnekte src’un property (özellik) olduðunu. Gördüðünüz gibi document ve image1 her ikiside nesne içinde nesnedirler. Anladýnýz sanýrým (kýsa içeriðin uzun tarifi).
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.
Umarým yukardaki resmin nedemek istediðini anladýnýz, yeterince Ýngilizce gördüðümüz için etiketleri Türkçeleþtirmedim. Çok profesyonel bir reesim deðil ama, resimde DOM’u bir aðaç þeklinde görüyorsunuz, window nesnesi ise aðacýn kökünde oluyor. - Ýyi ama sen bize window nesnesine gerek yok demiþtin
- Evet ama bu window nesnesinin DOM’da olmadýðý anlamýna gelmez.
- Peki kullanmak zorunda deðilsem neden DOM’un içerisinde?
- Çok basit, þöyle düþün: Aþaðýdaki resim güzel durur mu? Onun için window’u keþfettiler.:-)
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.
"window nesnesi köktür". Oradan, ilk özellikler, metodlar ve nesneler grubuna týrmanýrýz. Daha yukarý týrmanmak bizi bir baþka özellikler, metodlar ve nesneler grubuna götürür. Bunun hepsi önceden tasarlanmýþtýr. Aniden writeln() komutunu yazamazsýnýz, önceden nesnesini ve yerini belirtmelisiniz.
Devamı ALtta ..
|