Java Script Giriş Konu: 3

Konu: Java Script Giriş Konu: 3 C.tesi Ekim 23, 2010 8:02 am

Javascript’te Fonksiyon
Javascript, klasik HTML’in yapamadığı şeyler yapabilir; ziyaretçiden veya ziyaretçinin Browser programından alacağı bir bilgiyi değerlendirerek bir dizi işlem yapabilir; ziyaretçiyi sitemizde belli bir sayfaya yönlendirebilir; kısaca sayfalarımıza ziyaretçi ile etkileşme imkanı kazandırır.

Yukarıdaki çeşitli örneklerde gördüğünüz işlerin çoğu bir kere başvurulan işlerdi; fakat çoğu zaman sayfanızdaki bir Javascript işleminin defalarca yapılması gerekebilir. Hatta öyle işlemler olur ki, Javascript, başka bir işi yapmadan önce, mutlaka bu işlemi yapmak isteyebilir.

Bu tür tekrarlanan işleri, bu işin yapılması için gerekli bilgi kümesi ve komutlarla birlikte bir grup haline getirsek ve bu gruba bir isim versek; sonra bu iş kümesine ihtiyaç olduğu yerde Javascript’e “Filanca isimli grubu al; içinde belirtilen işleri yap, sonra sonucu bu noktaya bildir!” desek; acaba işlerimiz daha kolay hale gelmez mi?

İşte bu tür, bir isim altında toplanmış işlem paketlerine Function (işlev) adı verilir; Javascript kendisine “Şu fonksiyonu yap!” dediğiniz noktada yapmakta olduğu durdurur ve fonksiyon paketindeki işleri yapar; bu paket ortaya bir değişken veya sonuç çıkartıyorsa, o bilgiyi edinmiş olarak fonksiyon için yarım bıraktığı işleme geri döner. Fonksiyon yazmanızdaki birinci sebep, büyük bir ihtimalle, Javascript’e, Fonksiyon’un sağlayacağı bilgiyi kazandırmaktır.

Genel hatlarıyla fonksiyon, şu formüle göre yazılır:

function fonksiyonun_adı (argüman1, argüman2, ... argümanN){

işlemler

}

Fonksiyonlar mutlaka SCRIPT etiketinin içinde yer alır. Daha sonra kullanılacak (çağrılacak) olsa da bütün fonksiyonlarınını HTML dosyasının HEAD bölümüne koymanız, Browser’ın Javascript yorumlayıcısı bakımından sürat sağlar. İyi bir programlama tekniği, bir sayfada gerekli bütün fonksiyonları, altalta, HTML’in HEAD bölümünde yer alacak bir SCRIPT etiketi içinde beyan etmek; sonra ihtiyaç olduğu yerde yeni bir SCRIPT etiketi koyarak bu fonksiyonu göreve çağırmaktır.

Bir fonksiyon, kendisini göreve çağıran komuttan veya fonksiyondan veri kümesi (argument) alabilir. Buna bir değerin fonksiyona geçirilmesi, ulaştırılması, verilmesi denilir. Bir fonksiyon, bir ya da daha fazla argüman alabilir. Fonksiyonun argümanları, bir isim altında toplanır ve bu bilgi kümesinin bölümlerine bu isimle atıfta bulunulur.

Fonksiyona değer gönderme ve değer alma
Bir fonksiyon ile Javascript programının diğer işlemlerinin ilk ilişkisi fonksiyona bir değer gönderme ve ondan bir değer almaktır. Bir fonksiyon, yaptığı işin sonucu olarak, kendisini göreve çağıran komuta veya fonksiyona kendi adıyla bir değer verebilir.

Bir örnek üzerinde düşünmeye başlayalım. Ziyaretçinizden telefon numarasını yazmasını istiyorsunuz. Ziyaretçi de sayfada bir INPUT kutusuna veya PROMPT diyalog kutusuna telefon numarasını yazıyor. Bu numarayı, sayfada başka bir programda veya bölümde kullanmadan önce, gerçekten doğru yazılıp yazılmadığını irdelemek istiyorsunuz. Ziyaretçinin verdiği telefon numarasını bir fonksiyona havale edebilirsiniz; bu fonksiyon telefon numarası arzu ettiğimiz biçimde yazılmışsa olumlu, yazılmamışsa olumsuz yanıt verebilir. Bütün yapacağımız şey, ziyaretçiden alacağımız bilgiyi, bu fonksiyona argüman olarak geçirmekten ibaret; fonksiyonun sonuç olarak verdiği değer doğru ise işleme devam edeceğiz, değilse ziyaretçiyi uyararak, doğru bilgiyi girmesini isteyeceğiz.

Şimdi düz yazı programınızda şu kodu yazıp, fonksiyon1.htm adıyla kaydedin:

<HTML>

<HEAD>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">

<TITLE>Javascript'te Fonksiyon</TITLE>

<SCRIPT LANGUAGE="Javascript1.2">



</SCRIPT>

</HEAD>

<BODY>

<PRE>

<SCRIPT LANGUAGE = "Javascript1.2">



</SCRIPT>

</PRE>

</BODY>

</HTML>

Bu sayfada, önce "if(dogruMu(numara))" şeklindeki ifadeye dikkat edelim. Javascript, bu noktada “dogruMu” fonksiyonu çağıracak, bunu yaparken de fonksiyona “numara” adı altında bir değer geçirecektir. (Bu değeri, çeşitli şekillerde elde edebiliriz; bir Form nesnesinde INPUT kutusundan alabileceğimiz gibi, burada olduğu gibi PROMPT diyalog kutusuyla da alabiliriz.) Fonksiyondan bütün beklediğimiz “if” sorgulamasına “true” (doğru) veya “false” (yanlış) şeklinde bir karşılık vermesidir. Yukarıda “if” döngüsünü ele alırken, yanıtın doğru olması halinde ilk bölümdeki, yanlış olması halinde “else” bölümündeki komutların uygulandığını görmüştük. Şimdi burada dogruMu() fonksiyondan “true” sonucu dönerse, sayfaya teşekkür mesajı ve bilgi notu iki satır halinde yazılacak; “false” sonucu dönerse, ziyaretçi numarayı doğru yazması için uyarılacaktır. (Bu örnekte program bu noktada kesiliyor, oysa gerçek hayatta bu noktada ziyaretçiye bilgi girme aracının yeniden sunulması gerekir.)

Şimdi fonksiyona dönebiliriz. dogruMu() fonksiyonu, kendisine görev verecek işlemden veya fonksiyondan mutlaka bir argüman verilmesini istiyor. “numara” adıyla işleme sokulacak olan bu argüman, fonksiyon için bir nesnedir. Bu arada fonksiyonumuz kendi işleri için bir değişken oluşturuyor (karakter), ve içine boş değer koyuyor (null); daha sonra kendisinden beklenen değeri içine koyacağı bir değişken oluşturuyor ve içine varsayılan değer olarak “true” kelimesini koyuyor. Aksi kanıtlanmadığı taktirde, fonksiyonu göreve çağıran “if” döngüsüne bu değer bildirilecektir.

Fakat önce fonksiyonun gerçekten kendisine verilen bilgilerin, arzu edilen biçime uygun olup olmadığını sınaması gerekir. Bu bilgiyi tutan “numara” nesnesi, nesne olduğu için bazı özelliklere sahiptir; bu özelliklerden biri de uzunluğudur. Önce bu uzunluğun 13 karakter olup olmadığına bakıyoruz. Ziyaretçi, telefon numarasını yazdığı halde parantezleri veya kesme çizgisini unuttuysa, verdiği bilgilerin uzunluğu 13 karakterden az olacaktır, yani “numara.length” 13 olmayacak, “durum” değişkenin değeri “false” olarak değiştirilecektir. Yok, numaranın karakter sayısı 13 ise, fonksiyonumuz 13 karakteri, bir “for” döngüsü çerçevesinde tek tek irdelemeye başlayacaktır.

charAt(i)
Fonksiyonlarda ve diğer tür işlemlerde kullanabileceğimiz bir Javascript kısaltması, "filanca yerdeki karakter" diyebileceğimiz charAt(i)" ifadesidir. Burada i yerine herhangi bir rakamı yazabilirsiniz. Bu kısaltma ancak sayı ya da alfanümerik değer içeren değişkene veya nesneye uygulanabilir.

Buradaki örneğimizde, Javascript, karakter adını verdiği ve içini boş bıraktığı değişkenin değeri olarak, "numara" nesnesinin o anda, o adımda irdelediği karakterini atamaktadır. Şimdi kendimizi Javascript’in yerine koyalım, ve buradaki "for" döngüsünün birinci adımında ne yapacağımızı belirtelim:

"Hımm.. karakter değişkeninin değeri olarak numara nesnesinin i’nci karakterini atamam isteniyor. Peki i nedir? 0. O halde karakter, nesnenin 0 numaralı ögesi olacaktır. Nedir bu: Açılan parantez. Güzel. O halde, karakter eşittir açılan parantez. Sonra, eğer i değişkeni sıfır ve karakter açılan parantez ise devam etmeliymişim! İkisi de doğru; o halde devam. O da ne? Devam etmem gereken yerde “continue” komutu var. Yani, işi burada kes, "for" döngüsünün başına git ve yeniden başla diyorlar. Peki, hadi en başa dönelim. i’yi bir adet arttıralım, 2 yapalım; 2, 12 olmadığı ve 12’den küçük olduğuna göre devam edelim.."

İkinci adımda Javascript, karakter değişkeninin değeri olarak numara nesnesinin ikinci karakterini atayacak ve, i artık sıfır olmadığı için ilk continue’den geri dönmeyecek ve birinci Else’i izleyen işi yapacaktır. Bu işin ilk şartı i’nin dört olmasıdır. i bu anda 2 olduğuna göre, Javascript bu kez hiç bir "continue"dan geri dönmeyecek ve en sondaki parseInt() işlemlerine ulaşacaktır. Ne zaman 1’nin değeri dört olursa, ikinci if’in ikinci şartı olan dördüncü karakterin kapanan parantez olup olmadığı irdelenecektir. Ziyaretçinin verdiği telefon numarasında dördüncü karakter kapanan parantez değil ise, fonksiyon kesilecek ve durum değişkeninin değeri "false" olacak ve bu değer, fonksiyonu göreve çağıran if döngüsüne bildirilecektir. Fonksiyon aynı sorguyu, dokuzuncu karakterin kesme çizgisi olup olmadığını belirlemek için de yapacaktır.

parseInt(i,n)
Fonksiyona dikkat ederseniz, 0, 4 ve 9’ncu karakterlerdeki açılan ve kapanan parantez ve kesme çizgisi irdelemelerinde başa dönmeyen döngülerde, Javascript en sonda if ile başlayan parseInt() şeklinde bir ifadeyi icra ediyor.

Javascript, kendisine alfanümerik olarak verilen bir değişken değerini tamsayı (integer) veya kesirli sayıya (float) çevirebilir. Alfanümerik değerleri tam veya kesirli sayıya çevirmek için, parseInt ve parseFloat ifadelerini kullanırız. (Javascript’in sayı olarak verilen değişkeni alfanümerik değere (string) çevirmesi için kullanılmaya hazır bir metod yoktur; bunun için toplama işlemi içeren bir fonksiyon yazmanız gerekir.) Her iki metotta da, çevirme işleminin 10 tabanlı (decimal), 8 tabanlı (octal) veya 16 tabanlı (hexadecimal) olymasını istediğinizi, çevrilmesini istediğiniz alfanümerik değerden (veya bu değeri temsil eden değişkenin adından) sonra bir virgül koyarak, 10, 8 veya 16 rakamı ile belirtmeniz gerekir.

parseInt() metodu ile bazı çevirme işlemlerine örnek verirsek, parseInt(“123456.3333”), 123456 sonucunu verir. Çünkü bu metod kendisine verdiğiniz alfanümerik değerin içinde rakam ile artı ve eksi işaretlerinden başka bir şey gördüğü noktada durur; o noktaya kadar gördüğü unsurları bir tamsayı değişkeni olarak size geri verir.

parseFloat() metoduna da bir örnek verirsek, parseFloat(“123456.3333”), 123456.3333 sonucunu verir. Çünkü bu metod kendisine verdiğiniz alfanümerik değerin içinde rakam ile artı ve eksi işaretlerinin yanı sıra nokta işaretinden başka bir şey gördüğü noktada durur; o noktaya kadar gördüğü unsurları bir kesirli sayı değişkeni olarak size geri verir.

Her iki metod da, çevirme işlemini başarıyla yaparlarsa, kendilerini görevlendiren işleme (bizim örnekte bunu bir if döngüsü yapıyor) 1, başarıyla yapamazlarsa 0 değeri döndürürler. Yani, if döngüsü, parsInt() metodu başarılı olursa 1, başarılı olamazsa 0 sonucunu alacaktır. Biliyoruz ki, if açısından 1, true-doğru, 0 ise false-yanlış demektir.

Buradaki örnek kodda, 1, 2, 3, 5, 6, 7, 8, 10, 11, 12 ve 13’ncü karakterler, parseInt() metodu ile sayıya çevriliyor ve elde edilen sayının 0 ile 9 arasında olup olmadığına bakılıyor; sonuç doğru ise döngü bir sonraki karakteri almak üzere başa dönüyor; sonuç yanlış ise döngü o naktada break ile kesiliyor, durum değişkenin değeri “false” yapılıyor ve fonksiyon bu sonucu kendisini görevlendiren işleme teslim ederek, kapanıyor.

Fonksiyon ile HTML unsarlarının ilişkisi
Javascript açısından, yukarıdaki gibi uzun fonksiyon ile tek satırlık bir metod’un farkı yoktur: ikisi de kendisinden beklenen bir değeri, bu değeri bekleyen işleme teslim etmek zorundadır. Bunu ister 150 satırlık komut kümesiyle yapsınlar, isterse tek satırlık bir komutla, Javascript, isteyen bütün fonksiyonlara ve metodlara kendi nesnelerini ve onların metodlarını kullanma imkanı verir; hatta bilgisayarın kaynaklarından yararlanmalarını bile sağlar.

Böylece Javascript açısından Browser ve onun görüntülediği HTML belgesinin nesne olarak özelliklerine ve bilgisayarın kaynaklarını kullanmaya biraz daha yaklaşmış oluyoruz.

Şimdi yeni bir fonksiyon yazarak, Browser’ın, bilgisayarın işletim sisteminden saat ve tarih bilgisi edinerek, Javascript’e ulaştırmasını sağlayalım. Bunun için düz yazı programınızda şu kodu yazın ve fonksiyon2.htm adıyla kaydedin.

<HTML>

<HEAD>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">

<TITLE>Javascript'te Fonksiyon</TITLE>

<SCRIPT LANGUAGE="Javascript1.2">



</SCRIPT>

</HEAD>

<BODY onLoad="tarihsaat()">

<FORM method="POST" name="saatForm">

Şu anda saat: <input type=text size=50 maxlength=50 name="saatkutusu">

</FORM>

</BODY>

</HTML>

Bu Javascript kodunda tanımladığımız değişkenin, Javascript’in otomatik bir metodundan değişken elde ettiğini görüyorsunuz.
Date(): getYear(), getMonth(), getDate(), getDay(), getTime(), getHours(), getMinutes(), getSeconds()
Bu metod, Javascript’in Browser’dan, Browser’ın işletim sisteminden, işletim sisteminin de bilgisayarın temel girdi/çıktı işlemlerini yapan (BIOS) çipinden, saati ve tarihi içeren bilgiyi almasını sağlar. Gerçi metod Date (günün tarihi) adını taşıyor, ama Date(), Javascript açısından class (sınıf) sayılır ve edinilen bilgi sadece ay, gün ve yıl bilgisini değil, o andaki saati, dakikayı ve saniyeyi de içerir.

“saat” adını verdiğimiz bu değişken, Date() metodunun sağladığı bütün bilgileri içerdiği için, içinden saate ilişkin bilgiyi söküp almamız gerekir. Date() sınıfının sağladığı bilgiyi, get... yoluyla alırız.

Burada önce biraz, hem İngilizce’den hem de Javascript dilinden Türkçe’ye tercüme yapalım:

Year: Yıl (1900’den sonra)

Month: Ay (0=Ocak - 11=Aralık)

Date: Gün (1-31)

Hours: Saat (0-23)

Minutes: Dakika (0-59)

Seconds: Saniye (0-59)

Time: Zaman (Bu bilgilerin tümü: Gün, Ayın Adı, günün tarihi, saat:dakika:saniye, Yaz saati/kış saati ve yıl)

Bu durumda getYear(), size bilgisayarın BIOS’nun ayarlı oluduğu yılı (örneğin 1999) değerini; getHours() ise bu komutun icra edildiği andaki saati (örneğin, 19) kazandıracaktır. Gördüğünüz gibi, getTime() metodu, bize olağanüstü zengin bilgi kazandırabilir.

Bizim örnek kodumuzda, “saat” değişkeninin içinden getTime() yöntemi ile, hemen her türlü tarih ve saatle ilgili bilgi demetini alıyoruz; ve bunu bir başka metod’un işlemine tabi tutuyoruz.

toString(), toLowerCase(), toUpperCase()
Javascript’in kullanılmaya hazır işlevleri (metodları) arasında Date (Tarih) nesnesine uygulanabilecek olanlarından biri toString() metodudur. Kelime anlamı String’e çevir, alfanümerik’e çevir olan bu metodla, saat nesnesinin tamamen kendine özgü biçimi, Javascript tarafından HTML’in anlayabileceği şekle çevrilmiş olur. Buradaki örnek kodda, “saat” değişkeninin içeriğini toString() metoduna tabi tutarak, alfanümerik değere çeviriyoruz ve bunu, HTML sayfasındaki Form nesnesinin “saatkutusu” isimli INPUT ögesinin içeriği haline getiriyoruz.

Javascript’te, çevirme amaçlı iki metod daha vardır. toString() metodu sadece Date nesnesine uygulanabilir, ama toLowerCase() (küçük harfe çevir) ve toUpperCase() (büyük harfe çevir) metodları bütün alfanümerik değerlere uygulanabilir. Nesneleri daha ayrıntılı ele aldığımız bölümde, alfanümerik değerlere uygulanabilecek, kullanılmaya hazır fonksiyonlar diyebileceğimiz başka metodlar bulunduğunu da göreceğiz ve hepsini birarada inceleyeceğiz.

setTimeout(“fonksiyonun_adı”, milisaniye)
Örnek fonksiyonumuza dönersek; çevirme ve bulunan alfanümerik değeri HTML’in Form nesnesinin bir ögesinin içeriği olarak atama işleminden sonra, “kronometre” adını verdiğimiz bir değişken görüyoruz; fakat bu değişkenin değeri oldukça farklı bir ifade içeriyor: setTimeout().

setTimeout(), Javascript’in 1.2 sürümüyle gelen ve kendi kendisinin zamanlamasını belirleyen bir metoddur. Buradaki örnekte, “kronometre” değişkeninin değeri olarak, “tarihsaat” fonksiyonumuzun, her 1000 milisaniyede bir yenilenmesini istiyoruz. Bunun sonucu, Javascript, fonksiyonu her bin milisaniyede bir çalıştıracak, ve bunun sonucu olarak HTML sayfasındaki formda saatkutusu isimli kutunun değeri sürekli yenilenecektir.

Bu metoddan yararlanarak, Javascript’e, sözgelimi her sabah 6:30’da bir iş yaptırabiliriz. Bunun için, söz gelimi setTimeout metodunu içeren değişkeni, şöyle bir döngü içine koyabiliriz:

if ((saat.getHours() == 6) && (saat.getMinutes() == 30))

{

//burada ne gibi işler yapılacaksa o işe ait komutlar olabilir, örneğin:

document.saatForm.saatkutusu.value = saat.toString()

//sonra setTimeout metodunu içeren zamanlama ifadesi gelir:

kronometre = setTimeout("tarihsaat()",10000)

}

Böyle bir döngü içine alındığı zaman kronometre sadece sabah 6:30’da saati ve tarihi gösterecektir.

Değişkenleri Değerlendirme (Eval)
Buradaki örneğimizde yer almamakla birlikte bu bölümü bitirmeden bir metoddran daha söz edelyim. Javascript’in kendi hazır fonksiyonları içinde en az kullanılanı hangisidir diye sorarlarsa Değerlendirme Fonksiyonu olan eval()’dir derseniz, yanılmamış olursunuz. Buna karşılık, Javascript’in hemen hemen en kullanışlı fonksiyonlarından biri de eval() fonksiyonudur.

Bir kere, eval(), programcıyı satırlarca kod yazmaktan kurtarır. Diyelim ki, Javascript programınızın bir yerinde

var toplamTutar = “((siparisMiktarı * fiyatTL) * vergi)”

if (vergiYok) {

toplamTutar = “(siparisMiktarı * fiyatTL)”

}

.......

şeklinde bir kodunuz var. Daha sonra programın herhangi bir yerinde,

document.write(eval(toplamTutar))

demekle, bütün bu üç-dört satırlık kodu yazmış olursunuz. eval() sizin için değişkenlerin değerlerini bulup, sonucu değerlendirip, arzu ettiğiniz yere yazacak veya iletecektir. Bu fonksiyondan ilerde yararlanacağız.

Javascript’in Nesneleri, Olayları ve Özellikleri
Bilgisayar programcılığı da giyim-kuşam dünyası gibidir: modayı takip eder. Günümüzde programcılığın en moda unsuru Nesneye Yönelik programcılıktır dersek, gerçeği ifade etmiş oluruz.

Javascript programcılığında nesne (object), ve nesnenin özellikleri (properties), genellikle HTML belgesinin adı (name) ve değeri (value) olan herşeydir. Bir HTML unsurunun etiketinde NAME ve VALUE bölümleri varsa, bu unsur, Javascript için nesne sayılır.

Bu tanıma göre Form, Javascript için bir nesnedir. Ayrıca Form nesnesinin bir ögesi olan INPUT, kendisi de ad ve değer alabildiğine göre, Javascript için bir nesne sayılır; fakat bu nesneye daima içinde bulunduğu nesne “dolayısıyla” atıfta bulunabilirsiniz. Bu tür atıflarda bulunurken, şu kurala uymanız gerekir:

nesneAdı.özellikAdı

Bir nesnenin durumunu, değerini veya bir özelliğini değiştiren Javascript’in kendi içinde kullanılmaya hazır işlevleri; tarih gibi, Browser’ın masaüstündeki penceresinin bir özelliği gibi değerleri belirleyen otomatik işlevleri; nesnelerin değerlerini belirli bir düzen içinde arttıran veya azaltan süreçleri; ve Javascript’in hazır şablonlarından yeni bir nesne üreten işlemleri, metod adı altında toplarız. Her nesnenin kendine ait bir metodu olabilir; bir metod birden fazla nesne ile birlikte kullanılabilir. Bu gibi ifadeleri şöyle yazarız:

nesneAdı.metodAdı (argüman)

Javascript ve niteliklerini etkilediği HTML, bir işletim sistemi ortamında, Grafik Kullanıcı Arayüzü (GUI) ile çalışan bir Browser programının içinde yer alırlar. Browser programları kendiliklerinden veya GUI sonucu, öyle bazı olaylara (örneğin Mouse işaretçisinin bir nesnenin üzerine gelmesi veya bilgisayar kullanıcısının Mouse’un veya klavyenin bir düğmesini tıklaması gibi) yol açarlar ki, bu olay işletim sistemi-GUI-Browser yoluyla HTML belgesi (ve dolayısıyla Javascript) açısından önem taşıyabilir. Bunlara Event (olay) denir, ve Javascript’e bu olayın olması halinde icra edilmek üzere özel emirler verilebilir. Bu tür komutların yazılmasında şu yöntem izlenir:

event=”fonksiyon_veya_metod (argüman)”

Aslında yukarıda özetlediğimiz üç unsuru, nesne, nesne özelliği ve Browser olaylarını buraya kadar bir çok örnekte gördük ve kullandık. Bu bölümde, bu kitapçığın elverdiği ölçüde her üçünü ayrı ayrı ve ayrıntılı ele alacağız.

» Java Script Giriş Konu: 5
» Java Script Giriş Konu: 4
» Java Script Giriş Konu: 2
» Java Script Giriş Konu: 1
» Java Script Nedir ? Ne İşe yarar ?