yokyok

yokyok.isfun.net-anasayfa

web dersleri

JAVASCRIPT

Degiskenler (Variables)

Buraya kadar her bir Javascriptin nasil olmasi gerektigini ögrendiniz, nasil yorumlar koyabileceginizi de ögrendiniz. Simdilerde hiç bir ise yaramayan "alert box" örnegini de gördünüz. Çok fazla bir sey degil, ama meraklanmayin. Bundan sonra artik az laf çok is. Direk dersimize daliyoruz. Simdi derin bir nefes alin, hatta gidin kendinize bir fincan çay, kahve yapin, mevsim meyvalari bile olabilir. Uyanik ve ayik kalmaya gayret edin.

Bugün Javascriptin bilgiyi nasil sakladigini ve ondan nasil " kod " yarattigini ögrenecegiz. Merak etmeyin, bu bir bilim degil, sadece sabir isi. Yalniz bu derste okuduklarinizin hepsini anlamaniz gerekiyor. Burada görecekleriniz daha sonraki derslerde ve ilerde kendi programlarinizi yazarken lazim olacak seyler.

Degiskenler

Matematikte kullanildigi gibi, degiskenler sayilari ve "string"leri saklarlar. ( "string " terimi size simdilik sikinti vermesin, daha sonra anlatacagiz.) Söyle düsünebilirsiniz: Bir karenin alanini hesaplamak istiyorsunuz. Genisligi "a", uzunlugu "b" olarak tarif ediyorsunuz. Simdi, eger a=50 ve b=25 olursa, alani 1250 cm 2 olur. Size basit bir örnek:

Yukarida gördügünüz bir sürü degisik kod var, ne oldugunu ise az sonra adim adim ögrenecegiz.

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

    Eminim bu size bir yerden tanidik geliyordur; Yok hiç tanismadik derseniz hemen Giris sayfasina geri dönüp okuyun :-))

    // En, boy ve yüksekligi belirten degiskenler
    var yuk = 50;
    var en = 35;
    var boy = 15;

Gördügünüz gibi ilk satir sadece bir yorum, yorumda takip eden satirlarda nelerin yazili oldugunu belirtiyor, gerçek scriptin üzerinde hiç bir etkisi yok. Yorum satirna "Cindy Crawford" yazsaniz bile tarayici durup, "Hani, Cindy Crawford neredeymis?" diye aramaz (bir kismimizin bakacagi gibi). Dikkate almadan devam ederler (bu tarayici programlarda gerçekten zevksiz seyler, degil mi? :-)

Simdi, bundan sonraki satirlar bayagi enteresan. Degikenleri tarif ediyorlar. Degiskenleri belirlerken takip etmeniz birkaç kurali ise hemen asagiya siraladik:

Degiskenler var diye baslarlar.
Gerçekte bu sart degil ama kodu okumanizi kolaylastiriyor. Illa yeni bir degisken belirlerken var diye baslamaya mecbur tutmuyorum, ama sanirim var diye baslamak bayagi iyi bir fikir.

Degiskenler küçük harfle yazilmali
JavaScriptler degiskenlerin küçük-büyük harfli olmasina ayri reaksiyon verirler. Genel kural, sadece küçük harfli degiskenler kullanma seklinde olusmustur. Dilerseniz hepsini büyük harf yapabilirsiniz yada karisik kullanabilirsiniz, fakat kodlama esnasinda yapilabilecek hatalarin önüne geçmek için ve sinirlerinizin selameti açisindan gelin hepsini küçük harf yapin gitsin -- böylece programcilarin %99 ile uyum saglamis olursunuz.

Degiskenler bir harf ile baslamalidir
Simdi scriptin "!degiskeni"ni neden tanimadigini anladim.

Satiri noktali virgül ile sona erdirin
    Dikkat ederseniz satir sonlarinda birer tane " ; " var. Her Javascript satirinin sonuna mutlaka bir tane " ; " koyuverin. Bu sekilde hatalarin önüne geçmis olursunuz.

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

Biraz hesaplama. Javascript bu satirlari icra ettikten sonra "alan" degiskeni " en " (50) ve " boy " (15) degiskenlerinin çarpimlarinin sonucunu bulunduracaktir. Artik Javascript bundan sonra nezaman bu degiskeni görürse 50 ile 15 in çarpimi ile elde edilen sonuçla yer degistirtecektir. Aynisi ikinci satir için de geçerlidir.

Eveeet, degiskenler için bu kadar yeter. Ama Javascriptle isimiz henüz bitmedi!.. Anlatmaya bir sonraki bölümde devam ediyoruz.

Sayfalara Yazdirmak:

    // Sonuçlarin çiktisinin alinmasi
    document.writeln("Yüksekligi ");
    document.writeln(yuk);
    document.writeln("cm ve boyu "+ boy +"cm olan bir alanin yüzölçümü "+ alan +"cm<sup>2</sup>");
    document.writeln("Hacmi ise: "+ hacim +"cm<sup>3</sup>");

Burasi Javascriptin enteresan noktasi. Önce degiskenleri yarattik yada degistirdik, simdi ise web sayfasinin kaynagina yazdiriyoruz, böylece insanlar uykusuz gecelerinizin ürününü görme sansina kavusuyorlar...:-)

Simdi istesem " document.writeln() " nedir, nedemektir, sonsuza kadar yazabilirim, ama kisaca denilebilecek bir sey varsa, scriptin bu kismi, kesinlikle <BODY> ve </BODY> etiketleri arasinda bulunmalidir, hatta sonucun sayfanizda yazilmasini istediginiz noktasinda bulunmalidir. Çünkü Javascript çalismis, bir çikti üretmis, artik tarayici program sizin belirleyeceginiz noktaya yazdiracaktir. "document.writeln()" için bu kadar yeter. Unutmadan, eger sayfaniza Javascriptinizle ilgili bir HTML yazdirmak istiyorsaniz, bu isi document.writeln() yapacaktir.

Simdi ise document.writeln() deki () parantezlere konsantre olmanizi istiyorum.

document.writeln("Yüksekligi "); ilk satir

Ilk satirdaki parantezlerin içindeki çifttirnaklari " " görüyormusunuz? Iste "" arasinda ne yazili ise Javascript onu HTML olarak düsünür ve sayfanizin kaynagina yazar. Örnekte ( " ) kullandim ama, dilerseniz siz ( ' ) kullanabilirsiniz. Her ikiside birbirinin yerine kullanilabilir.

document.writeln(yuk); Ikinci satir

Simdi ise 2ci satira iyi bakin: Hiç " " isareti yok. " " içine alinmamis karakterler degisken olarak düsünülür. Dikkat ederseniz yuk bizim daha önce belirttigimiz bir degisken. Sanirim olan biten biraz anlam kazanmaya baslamistir. Javascript degisken olup olmadigini kontrol eder, eger degisken bulursa, onu degiskenin degeri ile degistirir.

document.writeln("cm ve boyu "+ boy +"cm olan bir alanin yüzölçümü "+ alan +"cm 2 "); üçüncü satir

Sanirim 3cü satir içlerinde en enteresan olani olsa gerek. 1 ve 2ci satirlarin özelliklerini bir arada bulundurmakta. + isareti kullanarak degiskenleri ve stringleri bir arada kullanmakta. (Dilerseniz + isareti kullanip daha fazla degiskeni de isin içine katabilirsiniz) Gördügünüz gibi, hersey bir çift tirnak " ile basliyor. Sonra bir kaç kelime var. Tekrar bir çift tirnak isareti " ile sona eriyor. Bu string in bittiginin isareti. Buradan sonra Javascript kapama parantezi beklerken biz ona + isareti veriyoruz. Su sirada javascript herseyi hiç " yokmus gibi düsünüyor! Firsattan istifade ederek bizde parse edilecek degiskeni bildiriyoruz. (parse'in Türkçe karsiligi nedemek ise?) Böylece degisken dogru rakamla degistirilip devam edip gidiyor. Sonraki + ile Javascript kodu gibi islenecek kismin bitisini bildiriyoruz. Artik sira yeniden " isareti ile HTML olarak yazilacak kismin basladigini söylüyoruz. Bu aynen bir daha tekrarlayip ve bir çift tirnakla son buluyor. Basit degil mi? :-)

En enteresan seylerden biride son iki satirdaki <sup> etiketi. <sup> etiketi bir karakteri Superscript (yani üssü) seklinde yazdirir. Ama merak etmeyin o etiketin oraya konmasini sebebi, araya HTML kodu girebileceginizi göstermek içindi. Ama dikkat ettiyseniz, HTML etiketleri " " içerisinde yer aliyor, disinda degil.

// -->
</script>

Artik bunun ne oldugunu biliyoruz degil mi? :-)

Degiskenlere Metin (text) atamak

Gayet eglenceli biçimde bir Javascriptin kodu kisim kisim inceledik ve interaktiv olarak bayagi bir sey ögrendik sanirim. Bu dersi biraz daha teorik yapmak isterim. Konumuz stringlerindegisken olarak kullanilmasi. Meraklanmayin, olabildigince kisa yapacagim. Teori okumanin nedemek oldugunu bilirim. Okul hayatim boyunca yeterince okudum zaten.

Önceden dedigim gibi, bir evvelki örnekte degisken olarak sadece sayilari gördük, fakat metnide degisken olarak atayabiliriz. Örnegin:

var kemal = "bütün gün PC basinda bana Javascript ögretir"

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

Güzel degil mi? Ama interaktif degil. Bunu biraz daha dinamik hale getirmek isitiyorsak, kullaniciya soru sormaniz lazim. Bunuda prompt() fonksiyonu ile yapabiliriz. Söyle:

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

Yukardaki kod ile "javascript" degiskenine içerikleri atiyorsunuz. Bu metin yada rakam gibi herhangi bir sey olabilir. Eger kullanicinin yazdigini kullanmak isterseniz asagidaki gibi yapmalisiniz:

document.writeln(javascript)

Elbette bu sizin için çocuk oyuncagi degil mi?

Ne yaptigimizi özetlersek: