Javascript Dersleri
Javascript Dersleri 1
Javascript'e Giriş
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:
<script language="JavaScript">
<!--function yey(){
alert('Vay bee! JavaScriptde neymiş böyle!')
}//-->
</script>
Bu yey() fonksiyonunu tarifeden 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">
<!-- yazdığınız JavaScript buraya//-->
</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>
Javascript Dersleri 2
Frames (Çerçeveler)
Javascript'te 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:
<a href="#" onClick="parent.benimsayfam.location.href = 'http://www.herhangibir.com'">Herhangibir.com</a>
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="top.htm" name="top_frame">
<frame src="target.htm" name="target">
</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('Bakkkkk!! !')">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 "Bakkkkk!!!" çıkar
Javascript Dersleri 3
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.
Bu dersimizde Javascript'in 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">
<!--
// 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<sup>2</sup>");
document.writeln("Hacmi ise: "+ hacim +"cm<sup>3</sup>");
// -->
</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ğişkenleri 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<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 çift tı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.
//-->
</script>