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ğiş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.

Events (Olaylar)

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!
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. Event (olaylar) dersi için bu kadar 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 :-))

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.



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:

"javascript" adında bir pencere açalım

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

İ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,resizable")

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.

Dom Teorisi (Document Object Model)

DOM, Javascriptin sayfaları tanımlama ve tarif etme şeklidir. 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 e olabilirdi. Bu ve bir çok sorunun cevabı DOM'da (Document Object Model) gizlidir. Daha sonra bu konuyu ç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).