java script dersleri .. - IRCForumları - IRC ve mIRC Kullanıcılarının Buluşma Noktası

ReMEMBeR · 01 Şubat 2006, 12:31

Ders-1:
Javascript istemci (client based) tipte bir lisandýr. Yani ne yaparsanýz hepsi istemcinin (ziyaretçi) PCsindeki tarayýcý programda çalýþýr. Server-side (sunucu taraf&#253
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.
ise bunun tam tersi olup, server-side lisanlar ise web sunucularýnda çalýþýr, sonucu HTML’ye çevirip istemci (ziyaretçinin) tarayýcýsýna gönderir.
Javascriptle interactivite elde edersiniz. Mesela mouse-over efektleri gibi. Elbette verilebilecek örnekler çoðalabilir. CGI’ýn tem tersi olay burada hemen gördüðünüz ekranda biter. CGI ile her zaman bir þeyleri týklayýp, sunucudan bir reaksiyon gelmesini beklemek zorundasýnýz. Javascript tümüyle farklýdýr! Ziyaretçiniz bir þey yapýnca bunun karþýlýðýnda Javascriptte gelir karþýlýk verir. Her fare hareketi, klavyedeki herhangi bir butonu týklamanýz (kýsaca herþey) Javascript tarafýndan kontrol edilebilir.
Þimdi dilerseniz gidin klavyeden A harfini týklayýn, hooop hemen anasayfaya gidersiniz. Aman geri gelin hemen. Þimdi size daha cool bir Javascript örneði vermek isterim: Mouse’u aþaðýdaki metnin üzerinde gezdirin bakalým:
Mouse’u burada gezdirin!
Gördünüz mü? Fareyi gezdirmekle Event (olay) dedikleri þeyi çaðýrmýþ oldunuz. Elbette bu çok pratik bir þey deðildir. Düþünün karþýnýza çýkabilecek Vay bee! JavaScriptde neymiþ böyle! mesajlarýný :-) Þimdi bunun nasýl kodlandýðýný görelim:
<script language="JavaScript">

</script>
Bu yey() fonksiyonunu tarif eden kod idi. Fonksiyonlarýn ne olduðunu daha ilerde öðreneceðiz. Þu anda ilk ve son 2 satýra konsantre olunuz. Orta kýsýmda ise sadece alert-box çaðýran ve içinde ne olmasý gerektiðini söyleyen kod var. Aþaðýda ayýklanmýþ halini bulacaksýnýz:
<script language="JavaScript">

</script>
Bütün scriptler bu þekilde baþlamalý, biraz daha irdeleyelim:

<script language="JavaScript>

Burada yalnýz HTML vardýr. <SCRIPT> etiketleri tarayýcýya bir script ile karþý karþýya olduðunu belirtirken language (lisan) özelliði ise bu script-lisanýný belirtir. Þimdilik varsayýlan Javascript kabul ediliyor, ama siz siz olun, her etikette belirtin, çünkü belli mi olur standartlar deðiþir, hoppaaa yeni bir scripting-language bulunur!..

<!--

Bunu bir yerden hatýrlýyorsunuz deðil mi? Evet, doðru, bu HTML yorum satýrýnýn baþlangýcý. Burada ne iþi var diye sorarsýnýz þimdi. Cevabý basit, <SCRIPT> etiketini desteklemeyen eski tarayýcý programý olan vatandaþlar hala bir yerlerde kalmýþtýr sanýrým. Böylece eski tarayýcýlar <SCRIPT> etiketi yerine HTML yorum iþaretlerini deðerlendirirler. Yani saðda solda gördüðünüz Hiding from older browsers dedikleri olay bu iþte. JavaScript kabul edenler bu etiketi dikkate almadan devam ederler.

// -->

Bu satýrda ise anlatýlacak 2 þey var (satýr o kadar uzun deðil ama çok önemli þeyler içeriyor :-) .)
1.) Burada "//" yorum olarak kullanýlýyor. "//" ardýndan gelen herþey Javascript çalýþýrken dikkate alýnmaz. Bu yorumlarý bolca kullanýn ki birkaç hafta sonra yazdýðýnýz scripte bakýnca neyi niçin koyduðunuzu anlayýnýz.
2.) "-->" etiketi daha önce baþlamýþ yorumun bittiðini iþaret eder.

</script>

Ders-2: DeðiþkenlerDeðiþkenler (Variables)
Buraya kadar her bir Javascriptin nasýl olmasý gerektiðini öðrendiniz, nasýl yorumlar koyabileceðinizi de öðrendiniz. Þimdilerde hiç bir iþe yaramayan "alert box" örneðini de gördünüz. Çok fazla bir þey deðil, ama meraklanmayýn. Bundan sonra artýk az laf çok iþ. Direk dersimize dalýyoruz. Þimdi derin bir nefes alýn, hatta gidin kendinize bir fincan çay, kahve yapýn, mevsim meyvalarý bile olabilir. Uyanýk ve ayýk kalmaya gayret edin.
Bugün Javascriptin bilgiyi nasýl sakladýðýný ve ondan nasýl " kod " yarattýðýný öðreneceðiz. Merak etmeyin, bu bir bilim deðil, sadece sabýr iþi. Yalnýz bu derste okuduklarýnýzýn hepsini anlamanýz gerekiyor. Burada görecekleriniz daha sonraki derslerde ve ilerde kendi programlarýnýzý yazarken lazým olacak þeyler.
Deðiþkenler
Matematikte kullanýldýðý gibi, deðiþkenler sayýlarý ve "string"leri saklarlar. ( "string" terimi size þimdilik sýkýntý vermesin, daha sonra anlatacaðýz.) Þöyle düþünebilirsiniz: Bir karenin alanýný hesaplamak istiyorsunuz. Geniþliði "a", uzunluðu "b" olarak tarif ediyorsunuz. Þimdi, eðer a=50 ve b=25 olursa, alaný 1250 cm2 olur. Size basit bir örnek:
<script language="JavaScript">

</script>
Yukarýda gördüðünüz bir sürü deðiþik kod var, ne olduðunu ise az sonra adým adým öðreneceðiz.

<script language="JavaScript">
<!--

Eminim bu size bir yerden tanýdýk geliyordur; Yok hiç tanýþmadýk derseniz hemen Giriþ sayfasýna geri dönüp okuyun :-))

// En, boy ve yüksekliði belirten deðiþkenler
var yuk = 50;
var en = 35;
var boy = 15;
Gördüðünüz gibi ilk satýr sadece bir yorum, yorumda takip eden satýrlarda nelerin yazýlý olduðunu belirtiyor, gerçek scriptin üzerinde hiç bir etkisi yok. Yorum satýrna "Cindy Crawford" yazsanýz bile tarayýcý durup, "Hani, Cindy Crawford neredeymiþ?" diye aramaz (bir kýsmýmýzýn bakacaðý gibi). Dikkate almadan devam ederler (bu tarayýcý programlarda gerçekten zevksiz þeyler, deðil mi? :-)
Þimdi, bundan sonraki satýrlar bayaðý enteresan. Deðikenleri tarif ediyorlar. Deðiþkenleri belirlerken takip etmeniz birkaç kuralý ise hemen aþaðýya sýraladýk:
Deðiþkenler var diye baþlarlar.
Gerçekte bu &#254
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.
deðil ama kodu okumanýzý kolaylaþtýrýyor. Ýlla yeni bir deðiþken belirlerken var diye baþlamaya mecbur tutmuyorum, ama sanýrým var diye baþlamak bayaðý iyi bir fikir.
Deðiþkenler küçük harfle yazýlmalý
JavaScriptler deðiþkenlerin küçük-büyük harfli olmasýna ayrý reaksiyon verirler. Genel kural, sadece küçük harfli deðiþkenler kullanma þeklinde oluþmuþtur. Dilerseniz hepsini büyük harf yapabilirsiniz yada karýþýk kullanabilirsiniz, fakat kodlama esnasýnda yapýlabilecek hatalarýn önüne geçmek için ve sinirlerinizin selameti açýsýndan gelin hepsini küçük harf yapýn gitsin -- böylece programcýlarýn %99 ile uyum saðlamýþ olursunuz.
Deðiþkenler bir harf ile baþlamalýdýr
Þimdi scriptin "!deðiþkeni"ni neden tanýmadýðýný anladým.
Satýrý noktalý virgül ile sona erdirin
Dikkat ederseniz satýr sonlarýnda birer tane " ; " var. Her Javascript satýrýnýn sonuna mutlaka bir tane " ; " koyuverin. Bu þekilde hatalarýn önüne geçmiþ olursunuz.

// Alan ve hacimi hesaplayan denklemler
var alan = en * boy;
var hacim = alan * yuk;
Biraz hesaplama. Javascript bu satýrlarý icra ettikten sonra "alan" deðiþkeni " en " (50) ve " boy " (15) deðiþkenlerinin çarpýmlarýnýn sonucunu bulunduracaktýr. Artýk Javascript bundan sonra nezaman bu deðiþkeni görürse 50 ile 15 in çarpýmý ile elde edilen sonuçla yer deðiþtirtecektir. Aynýsý ikinci satýr için de geçerlidir.
Eveeet, deðiþkenler için bu kadar yeter. Ama Javascriptle iþimiz henüz bitmedi!.. Anlatmaya bir sonraki bölümde devam ediyoruz.
Sayfalara Yazdýrmak:

// Sonuçlarýn çýktýsýnýn alýnmasý
document.writeln("Yüksekliði ");
document.writeln(yuk);
document.writeln("cm ve boyu "+ boy +"cm olan bir alanýn yüzölçümü "+ alan +"cm<sup>2</sup>");
document.writeln("Hacmi ise: "+ hacim +"cm<sup>3</sup>");
Burasý Javascriptin enteresan noktasý. Önce deðiþkenleri yarattýk yada deðiþtirdik, þimdi ise web sayfasýnýn kaynaðýna yazdýrýyoruz, böylece insanlar uykusuz gecelerinizin ürününü görme þansýna kavuþuyorlar...:-)
Þimdi istesem " document.writeln() " nedir, nedemektir, sonsuza kadar yazabilirim, ama kýsaca denilebilecek bir þey varsa, scriptin bu kýsmý, kesinlikle <BODY> ve </BODY> etiketleri arasýnda bulunmalýdýr, hatta sonucun sayfanýzda yazýlmasýný istediðiniz noktasýnda bulunmalýdýr. Çünkü Javascript çalýþmýþ, bir çýktý üretmiþ, artýk tarayýcý program sizin belirleyeceðiniz noktaya yazdýracaktýr. "document.writeln()" için bu kadar yeter. Unutmadan, eðer sayfanýza Javascriptinizle ilgili bir HTML yazdýrmak istiyorsanýz, bu iþi document.writeln() yapacaktýr.
Þimdi ise document.writeln() deki () parantezlere konsantre olmanýzý istiyorum.
document.writeln("Yüksekliði "); ilk satýr
Ýlk satýrdaki parantezlerin içindeki çifttýrnaklarý " " görüyormusunuz? Ýþte "" arasýnda ne yazýlý ise Javascript onu HTML olarak düþünür ve sayfanýzýn kaynaðýna yazar. Örnekte ( " ) kullandým ama, dilerseniz siz ( ’ ) kullanabilirsiniz. Her ikiside birbirinin yerine kullanýlabilir.
Devamı ALtta ..

ReMEMBeR · 01 Şubat 2006, 12:32

document.writeln(yuk); Ýkinci satýr Þimdi ise 2ci satýra iyi bakýn: Hiç " " iþareti yok. " " içine alýnmamýþ karakterler deðiþken olarak düþünülür. Dikkat ederseniz yuk bizim daha önce belirttiðimiz bir deðiþken. Sanýrým olan biten biraz anlam kazanmaya baþlamýþtýr. Javascript deðiþken olup olmadýðýný kontrol eder, eðer deðiþken bulursa, onu deðiþkenin deðeri ile deðiþtirir.

document.writeln("cm ve boyu "+ boy +"cm olan bir alanýn yüzölçümü "+ alan +"cm2"); üçüncü satýr
Sanýrým 3cü satýr içlerinde en enteresan olaný olsa gerek. 1 ve 2ci satýrlarýn özelliklerini bir arada bulundurmakta. + iþareti kullanarak deðiþkenleri ve stringleri bir arada kullanmakta. (Dilerseniz + iþareti kullanýp daha fazla deðiþkeni de iþin içine katabilirsiniz) Gördüðünüz gibi, herþey bir çift týrnak " ile baþlýyor. Sonra bir kaç kelime var. Tekrar bir çift týrnak iþareti " ile sona eriyor. Bu stringin bittiðinin iþareti. Buradan sonra Javascript kapama parantezi beklerken biz ona + iþareti veriyoruz. Þu sýrada javascript herþeyi hiç " yokmuþ gibi düþünüyor! Fýrsattan istifade ederek bizde parse edilecek deðiþkeni bildiriyoruz. (parse’ýn Türkçe karþýlýðý nedemek ise?) Böylece deðiþken doðru rakamla deðiþtirilip devam edip gidiyor. Sonraki + ile Javascript kodu gibi iþlenecek kýsmýn bitiþini bildiriyoruz. Artýk sýra yeniden " iþareti ile HTML olarak yazýlacak kýsmýn baþladýðýný söylüyoruz. Bu aynen bir daha tekrarlayýp ve bir çift týrnakla son buluyor. Basit deðil mi? :-)
En enteresan þeylerden biride son iki satýrdaki <sup> etiketi. <sup> etiketi bir karakteri Superscript (yani üssü) þeklinde yazdýrýr. Ama merak etmeyin o etiketin oraya konmasýný sebebi, araya HTML kodu girebileceðinizi göstermek içindi. Ama dikkat ettiyseniz, HTML etiketleri " " içerisinde yer alýyor, dýþýnda deðil.
// -->
</script>

Ders-3: If-Then-ElseIf-Then-Else
Temel prensiplerini anladýktan sonra, artýk deðiþkenleri de kullanarak bir þeyler üretmenin zamaný geldi denebilir. Bu ders If-Then-Else ifadeleri hakkýnda olacaktýr. "If-Then-Else" kullanarak programýnýzý ziyaretçinin girdiði verilere göre farklý reaksiyon gösterir hale getirebilirsiniz. "If-Then-Else"in esas formatý þöyle olur:
if (eðer &#254
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.
lar doðruysa)

{

bu satýrý uygula;
bu satýrý da uygula;
birde bu satýrý uygula;

} else {

bu satýrý uygula

}
Yukardaki örnekle ilgili önemli bir nokta:

if-the-else cümlesini baþlatmak için "if" ile baþlamalýsýnýz. If küçük harfle yazýlmalýdýr. Dilerseniz "IF" yazýn bakýn browser hemen $&%#|!* demeye baþlar.
Parantezlerin içinde bir koþul ( &#254
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.
) bulunmalýdýr. Artýk "kýzkardeþim beni seviyor" veya "internet baðlantým çok yavaþ" demiyoruz. Bunlarýn yerine kizkardes == "seviyor" veya internet_hizi == "yavas" (burada "kizkardes" ve "internet_hizi" deðiþkenler oluyor. "seviyor" ve "yavas" ise deððþkenlere atanmýþ deðerler oluyor.)

Þimdi biraz daha detay ile devam edelim. Bunu hemen bütün javascriptlerde kullanmak zorundasýnýz. Ben kullanýlmayan bir tane olduðunu sanmýyorum.

var feedback = prompt("Þimdiye kadar bu derslerden memnunmusunuz?", "evet veya hayir");
if (feedback == "evet") {
alert("teþekkür ederim!");
} else {
alert ("kimse sizi okumaya zorlamýyor, artýk okumayýn lütfen!");
}

Sanýrým ilk satýrý geçen dersten hatýrlarsýnýz, ziyaretçiye bir soru soruyorsunuz ve cevabýda deðiþken olarak saklýyorsunuz.
Bu scriptin ikinci satýrý epeyi ilginç. Gördüðünüz gibi Javascripti sorgulamaktayýz. Sorumda diyorum ki "aldýðýn deðer ’evet’e eþitmidir?" Dikkat edilecek bir kaç nokta var burada: Bakýn, cevapta " " iþareti yok ama evet de var. Unutmayýn stringleri yazdýrýrken, string’te " " iþareti olmalý, ama deðiþkenlerde gerek yok. Ýkincisi 2 tane == iþaretinin kullanýmýna dikkat. 1 tane = herhangi bir þeyi tanýmlamak için kullanýlýr. Fakat bir þeyi sorguluyorsanýz yana yana 2 tane = iþareti kullanmanýz lazým. Eðer yukardaki örnekte 1 tane = iþareti kullanýrsanýz, ya hata verecektir, veya deðerleri birbirinin üzerine yazacaktýr. Aþaðýda &#254
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.
larýn listesi de verilmiþtir:

x == y
Eðer x eþittir y
x != y
Eðer x eþit deðil y
x < y
Eðer x küçük y
x > y
Eðer x büyük y
x <= y
Eðer x küçük eþit y
x >= y
Eðer x büyük eþit y

Devamı ALtta ..

ReMEMBeR · 01 Şubat 2006, 12:34

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 &#254
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 ..

ReMEMBeR · 01 Şubat 2006, 12:35

Ders-6: Pencere Açma
Prompts & Opening Windows (soru sorma ve pencere açma)
Ziyaretçilere soru sorma
Deðiþkenleri öðrendiðimiz zamaný hatýrlýyormusunuz? Deðiþkenler bilgileri saklamada kullanýlýyordu. Örnek ve alýþtýrmalarda deðiþkenlerin ’statik’ tariflerini gördünüz, yani browser deðiþkenin deðerini Javascripti çöalýþtýrmadan bildiði durumlar. Halbuki prompt() metodu ile browsere ziyaretçiye soru sormasýný ve cevaplarý deðiþken olarak saklamasýný söyleyebiliriz. Bunun hepsi karmaþýk görünsede esasýnda tek satýrda iþ biter.
var durum = prompt("Kendinizi nasýl hissediyorsunuz?","iyi yada hasta");
Nasýl cevap verdiðiniz önemli deðil, çünkü deðiþkenle ilgili bir þey yapmadým henüz. durum deðiþkeni þu anda Javascript tarafýndan ulaþýlabilir durumda deðil. Eðer sayfa yüklenmeden sizi cevaplamaya mecbur býraksaydým ulaþýlabilir olurdu. Þimdi sayfa yüklendi ve artýk deðiþkenler yerleþtiremezsiniz. Eðer deðiþkene þimdi ulaþmaya çalýþsaydým "object undefined" hatasý alýrdýk. (Evet, deðiþkenler de nesnedir.)
Þimdi kýsaca parantezlerin içindekilerin ne yaptýðýný anlatacaðým. Önceki dersten hatýrlarsýnýz, parantez içinde metodlarýn parametreleri vardýr. Parametreler metodlarýn ne yapmalarý gerektiðini etraflýca anlatýrlar. prompt() metodunun 2 tane parametreye ihtiyacý vardýr. Birincisi soru, ikincisi varsayýlan cevaptýr. Her iki parametrede " " ile sýnýrlanýp virgülle ayrýlýr. Aman dikkat " ve , arasýnda boþluk olmamalýdýr.
Þimdiye kadar çok iyi gidiyoruz,Sorularýn nasýl sorulacaðýný öðrendik. Þimdi ise, bir script ile ziyaretçiye soru sorup, ziyaretçinin cevabýna göre Alert-box içinde selam verelim. Bu þekilde cevaplarý iþleyip geçerli kýlmasýný öðreniriz.
<SCRIPT language="JavaScript">

</script>
Kolay deðil mi? if-then-else sanýrým tanýdýk gelmiþtir, deðil mi? Böyle oynamak eðlenceli oluyor mu?
Þimdi bir sonraki bölüme geçelim:
Javascriptle pencere açma
HTML ile pencere açmak rutin bir iþtir, ama bir takým sýnýrlamalarý vardýr. HTML ile pencerelerin neye benzediðini kontrol imkanýnýz yoktur. Hangi özellikler olmalý (scroll bar, status bar, üst menu v.s.) veya pencerenin ölçüleri gibi. Fakat Javascript ile open() metodunu kullanarak bunlarýn hepsini uygulayabilirsiniz. Aynen þöyle:
window.open("URL","isim","özellikler");
Yukardaki kod ile yeni bir pencere açýp, ilk parametre olarak yer belirtirsiniz. Bu örnekte "URL", fakat gerçekte "
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.
diye bir þey yazmanýz lazým.
Metodun ikinci parametresi ise pencerenin adýdýr. Bu sizin ayný pencereye deðiþik sayfalar yüklemenizi saðlar. Örneðin, Javascript kullanarak content.htm dosyasýný yükleyen "content" adýnda yeni bir pencere açalým. Daha sonra ise content2.htm dosyasýný ayný pencereye yüklemeye çalýþalým. Böylece ayný ismi kullanarak yeni bir pencere açmadan, mevcut "content" adýndaki pencerenin içeriðini deðiþtirmiþ olursunuz. Bir örnek verelim:
[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]
[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]
Anladýnýz mý? Her iki örneðin kodu aþaðýdadýr:
<a href= "#" onClick=’window.open("examples/page1.htm","javascript");’>"javascript" adýnda bir pencere açalým</a><br>
<a href= "#" onClick=’window.open("examples/page2.htm","javascript");’>"javascript"’in içine giren yeni bir HTML sayfasý açalým</a>
Ýlk linki týklayýnca javascript adýndaki pencere açýlýr examples/page1.htm sayfasý içine konulur.
Ýkinci link ise ilk linkin açtýðý pencereye yeni bir HTML sayfasý yerleþtirir. Þimdiye kadar iyi gidiyor. Þimdi birazda features parametresini irdeleyelim!.
Features parametresi açýlan pencerenin hangi özellikleri taþýmasýný istiyorsanýz onlarý dahil eder. Eðer features (özellikler) parametresinde herhangi bir özellik dahil ederseniz, yazýlý olmayanlarý uygulamaz, sadece belirttiðiniz parametreleri olan bir pencere açar. Örneðin:
window.open("URL","name","status,scrollbars,resiza ble")
böyle yazarsanýz, status bar, scrollbar (kaydýrma çubuklar&#253
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.
ve ölçüleri ayarlanabilir bir pencere elde edersiniz. Dikkat ederseniz, stringde hiç boþluk býrakýlmamýþtýr. Boþluk býrakýrsanýz, bir takým browserlarda hata mesajý alýrsýnýz. Þimdi ise sadece yükseklik ve geniþliði belirten tarif eden bir örnek göreceksiniz:
window.open("URL","name","height=250,width=640")
Unutmayýn boþluk býrakmak yok! Ayrýca HTML’den alýþkýn olduðunuz " " iþaretleri de yok!. Bu biraz karýþýk olabilir, ama bir kere anladýnýz mý tamamdýr.
Aþaðýda kullanabileceðiniz Feature (Özellik) listesi:

height
Pencerenin yüksekliði (pixel olarak)
width
Pencerenin geniþliði (pixel olarak)
status
Sayfanýn altýndaki mesaj çubuðu
menubar
Sayfanýn üstünde Dosya, Düzen Sýk Kullanýlanlar gibi þeylerin olduðu kýsým
scrollbars
Eðer gerekiyorsa kaydýrma çubuklarý görünsün
toolbar
Üstünde Geri, Ýleri, Anasayfa, gibi buttonlarýn olduðu gezinme çubuðu
location
Þu anda bulunduðunuz sayfanýn URLsini gösteren kutu
directories
Bu sadece Netscape için geçerli. "Yenilikler" butonu gibi butonlar...
resizable
Ziyaretçilerin pencere ölçülerini deðiþtirmesine izin veriyorsanýz yazýn
Bunlardan sadece birini yazarsanýz, öbürlerini istemediðiniz anlamýna gelir. Eðer hiç bir þey yazmazsanýz standart bir pencere açýlýr. Hangi özellikleri istiyorsanýz onlarý yazýnca pencere istediðiniz özelliklerde (feature) açýlýr.
Ders-7: ÇerçevelerFrames (Çerçeveler)
Javascriptte frameler pencerelerle eþit iþlem görür. Sanýrým bir pencerenin içeriðinin nasýl deðiþtiðini hatýrlarsýnýz. Hepsi frameler içinde geçerlidir. Basit anlatýmla, her frame ayrý bir pencere olmalýdýr. Eriþim þekli haricinde baþka hiç bir fark yoktur.
Frameler arasý komünikasyon
Buda ayný HTMLde olduðu gibi çalýþýr. Prensip aynýdýr. HTML ile, baþka bir frame’e baðlanmak için target="frameadý" kullanýrsýnýz, javascript ile parent.framename.location.href = ’[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]. Gördünüz mü? nekadar kolay. Eðer, benimsayfam adlý frame a link verecek bir javascript isterseniz, þöyle yazacaksýnýz:

<a href= "#" onClick="parent.benimsayfam.location.href = ’
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.
face="Verdana"> Anlaþýldý mý? Þimdi gerçekten frameler arasý komünikasyona baþlayalým. Bir frameden öbürüne bir kaç kelime yazalým. Tetikleyen de bir link olsun. Framesetin kodu þöyle:

<frameset rows="50%,50%">
<frame src= "><frame src= "></frameset>

Þimdi, target.htm yi yapýnýz fakat içi boþ olsun, hatta <HTML> etiketleri bile olmasýn.
Gelelim top.htm ye. Herhangi bir linki tetikleyici olarak kullanýyorum. þöyle:

<a href= "#" onClick="parent.target.document.writeln(’Heeeeyyy! !!’)">Acaba çalýþacak mý?!</a>

Yukardaki satýr uygulanmaya baþladýðý zaman, Javascript target adýndaki frame’e ulaþýr. Daha önceden dediðimiz gibi frame bir pencere gibi düþünüldüðü için, document özelliklerine sahiptir. Nerede document var ise orada writeln() metodu vardýr ve oda frame’in içeriðinin üzerine yazar ve "Heeeeyyy!!!" çýkar.
Kaynak : [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

Umarım işinize yarar ..

Benzer Konular
Konu	Konuyu Başlatan	Forum	Cevaplar	Son Mesaj
JAVA Dersleri Tek Başlık (Doküman)	SeckiN	Java	2	13 Temmuz 2013 22:54
Java Script ile URL bilgisinin alınması	YazılımMimarı	HTML/CSS/JavaScript	0	13 Ocak 2013 19:15
Sorun söyleyeyim (Java,JSP,ASP.NET(C#),PL/SQL,jQuery,Java Script,Ajax)	J2EE123	Java	2	03 Kasım 2011 12:57
Java Script Arşivi	DoStNaMe	HTML/CSS/JavaScript	12	13 Eylül 2007 07:57

Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)

5846 sayılı Fikir ve Sanat Eserleri Kanunu gereğince sitemizde telif hakkı bulunan mp3,video v.b. eserlerin paylaşımı yasaktır. Yasal işlem olması halinde paylaşan kişi yada kişilerin bilgileri gerekli kuruma verilecektir.