JavaScript öğrenme (alıntıdır)

Evet, artık sanırım derslere başlamanın zamanı geldi. Önümüzdeki birkaç gün içerisinde herzamanki gibi keyifli bir biçimde Javascript öğrenmeye başlayacağız. Bu lisanın esaslarını bazı hoş örneklerle çeşitlendireceğiz. Merak etmeyin size yapacak bir çok iş düşüyor. Derslerin çoğunu kendiniz kafa yorarak çözmeye çalışacaksınız. Gene NotePad veya başka bir editör programıyla (artık sanırım beni tanıdığınız gibi editör programlarını da öğrenmişsinizdir ) )

Bu gereksiz tanıtımdan sonra haydi Javascript öğrenmeye:

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ı) 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:

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:

yazdığınız JavaScript buraya

Bütün scriptler bu şekilde başlamalı, biraz daha irdeleyelim:

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!..

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.

Bunun anlamı kendinden menkul herhalde. Artık başında "/" olan etiketin ne olduğunu sizin gibi HTML'yi yutmuş, Javascript'in kapısını zorlayanlara belirmenin gerekli olduğunu sanmıyorum.

Bitti!. Bu derste bütün Javascriptlerin esaslarını öğrendik. Birinci ders için bukadar yeter. Yaptıklarımıza kısaca bakarsak:


Javascript nedir?
Javascript eski tarayıcılardan (browser) nasıl saklanır
Bir scriptin içinde nasıl yorumlarda bulunabiliriz
Her script nasıl başlamalı

Değ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:

// En, boy ve yüksekliği belirten değişkenler
var yuk = 50;
var en = 35;
var boy = 15;

// Alan ve hacimi hesaplayan denklemler
var alan = en * boy;
var hacim = alan * yuk;

// 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²");
document.writeln("Hacmi ise: "+ hacim +"cm³");

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.

// 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 şart 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²");
document.writeln("Hacmi ise: "+ hacim +"cm³");

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.

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.

Artık bunun ne olduğunu biliyoruz değil mi?

Değişkenlere Metin (text) atamak

Gayet eğlenceli biçimde bir Javascriptin kodu kısım kısım inceledik ve interaktiv olarak bayağı bir şey öğrendik sanırım. Bu dersi biraz daha teorik yapmak isterim. Konumuz stringlerindeğişken olarak kullanılması. Meraklanmayın, olabildiğince kısa yapacağım. Teori okumanın nedemek olduğunu bilirim. Okul hayatım boyunca yeterince okudum zaten.

Önceden dediğim gibi, bir evvelki örnekte değişken olarak sadece sayıları gördük, fakat metnide değişken olarak atayabiliriz. Örneğin:

var kemal = "bütün gün PC başında bana Javascript öğretir"

document.writeln("Kemal iyi birisidir. Kendisi ")
document.writeln(kemal)

Güzel değil mi? Ama interaktif değil. Bunu biraz daha dinamik hale getirmek isitiyorsak, kullanıcıya soru sormanız lazım. Bunuda prompt() fonksiyonu ile yapabiliriz. Şöyle:

var javascript = prompt("Javascripti kim öğretti?", "Kemal Ünsal");

Yukardaki kod ile "javascript" değişkenine içerikleri atıyorsunuz. Bu metin yada rakam gibi herhangi bir şey olabilir. Eğer kullanıcının yazdığını kullanmak isterseniz aşağıdaki gibi yapmalısınız:

document.writeln(javascript)

Elbette bu sizin için çocuk oyuncağı değil mi?
Ne yaptığımızı özetlersek:

Değişkenler nasıl tarif edilir,
Kaynağa yazmasını
JavaScript ile hesap yapma
Ziyaretçiye soru sorma
Değişken olarak metnin saklanması
Bayağı bir şey değil mi? Bir sonraki derste gene eğlenceli biçimde Text yani metnin bazı özelliklerinin ustalıkla kullanılmasını öğreneceğiz.

3--If-Then-Else

If-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 şartlar 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 ( şart ) 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 şartları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





Soru:
Eğer iki şarttan birinin doğru olup olmadığını sorgulasaydık ne yazacaktık?
Örnekler.

if (feedback == "evet" || feedback == "evet çok")

İlk satır herhangi birinin doğru olabileceği bir şartı göstermekte. Bunu 2 tane " || " işareti ile yapmakta. Çocuk oyuncağı değil mi? :-

4--Events(olay)
Events

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!

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:



İlk satırla başlayalım:

Resimin bir ismi olması çok önemlidir.

Şimdi "onMouseOver" ile kodu genişletelim

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ç:



Ş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:

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.



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ı?
Umarım,

... Olaylar fonksiyonları tetikler
... Olaylar statementleri tetikler
... böylece resim kaynağı (src) değişir
... Javascripti dikkatli kullanıp, hatalardan kaçınmayı
Öğrendiniz.

5--Teori: DOM
Teori: DOM

Biliyorum, bu sizin için bir şok olabilir ama, anlatmadan olmayacak: Bu ders %100 teoridir.! Şimdiye kadar biraz eğlendik ve tüm gayretimle sizi Javascripte ısındırmaya çalıştım. Farkındaysanız başından beri gerçekte anlamadığınız şeyleri yapageldik, şimdi soralım:

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 şart 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).



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.

Çok doğru, katılıyorum...

Nerede kalmıştık? Evet: "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 ***ürür. Bunun hepsi önceden tasarlanmıştır. Aniden writeln() komutunu yazamazsınız, önceden nesnesini ve yerini belirtmelisiniz.

Sonun da bitti, artık bundan sonra geri kalanında teori yok. Biraz değişik örnekler çözüp bitireceğiz. Takılmaya devam edin.

Bu derste:

Teori (hıh!)
Document Object Model (kısaca: DOM)
Object-Orientated (nesnel yönelimli) Programlama
Objects, Properties and Metodların arasındaki farkı
Objectlerin özellikleri, Objectlerin kendileri olabilir.
window varsayılan nesne olup isterseniz kullanmayabilirsiniz.

6--Prompts & Opening Windows (soru sorma ve pencere açma)
Prompts & Opening Windows (soru sorma ve pencere açma)

Bu derste iki şey yapacağız:


Ziyaretçiye sorular sorup, değerleri değişken olarak saklamasını
JavaScript ile yeni pencere açmasını
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.

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 "http://www.testleronline.com" 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:

"javascript" adında bir pencere açalım
"javascript"'in içine giren yeni bir HTML sayfası açalım

Anladınız mı? Her iki örneğin kodu aşağıdadır:

İ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ı) 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.

Alıştırma için değişik özelliklerde pencereler açınız, böylece diziler ve döngüler hakkındaki bir sonraki derse ısınmış olursunuz.

Dersi gözden geçirirsek:

Soru sormasını
Cevapları nasıl halledeceğimizi
JavaScript kullanarak pencere açmasını
features parametresini değişik özelliklerini öğrenmiş olduk.

8--Frames (Çerçeveler)

Frames (Ç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 = 'http://www.herhangibir.com'. Gördünüz mü? nekadar kolay. Eğer, benimsayfam adlı frame a link verecek bir javascript isterseniz, şöyle yazacaksınız:

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:

Ş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:

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.
Çok şükür bu derste bitti. Bu arada bir kısmınız yahu bu frame de nedir diyebilir, tamam tamam, onlar için de bir Frame dersleri hazırlamaya başlayacağım, sanırım bu çok hızlı halimle Kasım sonu Aralık başı hazır olur. (aceleniz mi var? hıh!..)

Bugünün marifetleri...


... JavaScript kullanarak linkleri bağlamayı
... Frame içeriğinin yazılması
Öğrendik

9--Fonksiyonlar (Functions)

Fonksiyonlar (Functions)

Javascriptin sözdizimini kavrayıp ciddi program yapmak üzere devam etmeden önce fonksiyonları anlamanız gereklidir. Fonksiyonlar bütün programlama lisanlarında vardır. Fonksiyonları her seferinde tekrar tekrar kod yazmaya gerek olmadan çağrılabilen programlar olarak düşünün. Fonksiyonlar pencerenin içinde gerçekleşen olaylar tarafından icra edilirler.

Herzaman olduğu gibi şimdi de pratik olmayan ama öğretici bir örnekle başlayalım ) . Kullanıcıya nasıl olduğunu soran bir script yazalım. Eğer cevap olumlu olursa, "Tebrikler", olumsuz ise neşelenmesini öğütleyen bir alert-box çıksın. Önceden tahmin edebileceğiniz gibi, biraz kod yazmak gerekli. Şimdi siz bu scriptin sayfanızın 4 ayrı noktasından erişilebilir olmasını istiyorsunuz. Sanırım bir defa kodu yazıp, 3 defa da kes-yapıştır yapmaktan daha pratik bir yol sizi hayli memnun edecektir. İşte şöyle:

Kırmızı ile yazılı olanlar yeni öğreneceğimiz fonksiyonlardır. Geri kalanını anlatmaya gerek olduğunu sanmıyorum. Şimdi neden fonksiyon yarattığıma gelelim. Bir fonksiyona herhangi bir zamanda, sayfanın herhangi bir noktasından ulaşabilirsiniz (fonsiyonun önceden yüklendiğini farzedersek). Ayrıca ne sıklıkta kullanmanız gerektiğinde hiç bir kısıtlama da yoktur (en azından saniyede 1000 kerelik bir döngüye sokup kullanıcının CPUsunu çökertmediyseniz). Her lazım olduğunda bir fonksiyonu kes yapıştır yapacağınıza, bir sefer <HEAD> etiketlerinin arasına yerleştirin ve tamam. Ek bir avantaj, ilerde scripti değiştirmek istediğinizde, teker teker her koyduğunuz yerde değiştireceğinize, yalnız <HEAD> etiketleri arasındaki kodu değiştinizmi tamamdır. Şimdi fonksiyonların özelliklerine bakalım. Önce, genel "görünüm":

Her fonksiyonun bir isme ve ismin sonunda 2 tane () ihtiyacı vardır. 2 () sayasinde scripte parametreler geçirilir. Bu konuda, ilerde daha da açıklayıcı notlar yazarız. Fonksiyonun içinde kod 2 tane {} parantez tarafından sarılır. Sanırım şimdi vurgulamanın tam zamanı, daha önce yazdığımız bir çok kodun aksine, bir fonksiyon okunduğu zaman icra edilmez, sadece dışardan tetiklenince icra edilir.

Şimdilik fonksiyonların nasıl yaratıldığını biliyoruz, birde nasıl çağıracağımızı görelim..

Çağırma fonksiyonu iki şekilde olabilir:

Sanırım çok karışık görünmüyor, değil mi? Şimdiden fonksiyonu nasıl yaratacağınızı ve erişebileceğinizi öğrendiniz. Ama fonksiyonlar hakkında bir şey daha var: Fonksiyonun isminin sonundaki parantezlere dikkat ettiniz mi? Hatırlarsanız önceki derslerde metodlarla uğraşırken parantezlerin içine metodların nasıl olması gerektiği hakkında bilgiler yazmıştık. Şimdi fonksiyonlarda ise parametreler o parantezlerin içine yerleştirilir. Parametreler ise, fonksiyonlar icra edilmeye başlandığında değişken olarak kabul edilirler. Böylece hatir_sor(berbat) diye bir fonksiyon aşağıdaki gibi kodlanır ve soruyu atlayabilirsiniz!

Gördüğünüz gibi, fonksiyon hatirsorusu değişkenine bir parametre atar.

Fakat bu tekniğin amacı nedir? Şöyle düşünelim, siz ziyaretçiye HTML ile bir soru soarsınız ve opsiyon olarak 2 tane link verirsiniz. Bir "iyi" diğeri "berbat" der. Ziyaretçiye bir kez daha sormanın bir anlamı yoktur aktık değil mi? böylece direkt olarak "iyi" veya "berbat" değişkenin değerini atayabilirsiniz. Bu kodu bir fonksiyona indirir ki diğer çözümde 3 tane yazmak gerekir (biri soru sormak için, biri "iyi" biride "berbat" linkleri için) aynen aşağıdaki gibi:


Tetikleyici:
fonksiyon_adı(parameter)

Fonksiyon:
function fonksiyon_adi(parametreyi_saklamak_için_değişken) {
}
Sırası gelmişken, bir fonksiyona birkaç parametre atayabilirsiniz: :

Tetikleyici:
fonksiyon_adi(parameter,parameter2)


Fonksiyon:
function fonksiyon_adi(degisken_parameter1,degisken_paramet er2) {
}

Fonksiyonlar için bu kadar yeter.

Bugün yaptıklarımızı özetlersek:


Javascript sözdiziminin son halkası: Fonksiyonlar
Parametresiz fonksiyonlar
Bir parametreli fonksiyonlar
Birkaç parametreli fonksiyonlar

maşallah maşallah ne bu valla 10 saati mi alır okumam
ee özrenmede hayatımı
______________
aşk bitti....
www.arabeskdamar.tr.gg

hergün 1 sayfa oku anca biter