Javascript_Nesne_yapisi3.htm

Bu programı inceleyerek javaScriptin nesne kullanımını görelim.
 

Öncelikle bir html belgesi açıyoruz. <html> şeklinde. Bu bizim web sayfamızın girişidir. JavaScript için html belgesinin document nesnesi olduğlunu biliyoruz.
 

Öncelikle form bölümünden bahsedelim. <form name="bilgi"> şeklinde bir kullanımla forma bilgi adını verdik. Bu formun javaScript için document.bilgi adını alır. Sonra isim için bir text kutucuğu açtık. <input type="text" name="adiniz" size="20"> Burada bu kutucuğun adının adiniz olduğunu görüyoruz. Bu kutucuk javaScript için  

document.bilgi.adiniz dir. Bu kutucuğun içerisindeki bilgi ise document.bilgi.adiniz.value dir.
 

Diğer kutucukları da aynı şeklide javaScript isimlendirir.
 

document.bilgi.e_mail
document.bilgi.yas
 

Bir buton tanımladık. Bu buton da formun bir parçasıdır. Butonu <input type="button" value="tamam" name="but1" onClick="tamam()"> şeklinde tanımlıyoruz. Butonumuzun bir adı var. but1 birde görevi. Görevi derken javaScriptin hareketler üzerine kurulduğunu tekrar hatırlatalım.
 

Event(hareket, olay), burada onClick eventini görüyoruz. Bu event butona tıklandığında harekete geçer. Kısaca eventi tanımlama gerekirse ki ilerde ayrıntılı olarak göreceğiz; event bir olayın meydana gelmesidir. Mesela bir butona basılaması, bir dosyanın yüklenmesi, bir kutunun işaretlenmesi, bir linkin üzerine gelmesi gibi.
 

Bizim butonumuz onClick eventini bekliyor. Yani butona tıklanmasını. Butona tıklandığında tamam() fonksiyonunu çağırıyor.
 

Butonumuz javaScript açısından document.bildi.but1 dir.
S

onucun basılması için sonuc adında bir text kutusu açtık. Bu kutu javaScript için document.bilgi.sonuc dur. Bu kutucuğun içeriğine document.bilgi.sonuc.value ile ulaşırız.
 

Formumuzu kapatıyoruz.

Programımıza dönelim. Program değişken tanımlamaları ile başlıyor.

var adiniz;
var e_mailiniz;
var yasiniz;
var dogumYili;
var kontrol=0;

Burada ki değişkenlere form verilerini gireceğiz. dogumYili değişkenine yasiniz değişkeni ile elde edceğimiz doğum yılı hesaplamasının sonucunu gireceğiz. kontrol değişkeni ise bizim program akışımızı denetlemek için kullanacağız.
tamam() fonksiyonu ilk olarak kontrol değişkenini bir birim artırarak başlıyor. kontrol++
Ardından değişkenlerimiz form verileri aktarılıyor.

adiniz=document.bilgi.adiniz.value;
e_mailiniz=document.bilgi.e_mail.value;
yasiniz=document.bilgi.yas.value;

adiniz değişkenine document.bilgi.adiniz.value; ile girilen ismi atıyoruz. e_mailiniz değişkenine ise document.bilgi.e_mail.value ile girilen e-mail adresini atıyoruz.
 

yasiniz değişkeninin değerini de atdıktan sonra dogumYili değişkeninin değerininin değerinin hesaplıyoruz.

dogumYili=1999-yasiniz; aslında bu yöntem yetersiz kalıyor. Çünkü yıl değişimin de yanlış hesap yapacaktır. Fakat programı basitleştirmek için bulunulan yılın her zaman 1999 olduğunu var sayıyoruz.
 

Atama işlemleri yapıldıktan sonra bir sonuç değişkeni elde ettik. sonuc değişkenine sonuc="sayın "+adiniz+" doğum tariyi "+dogumYili; şeklinde bir atma yapıyoruz. Burada ismin ahmet, doğum ylının 1972 olduğunu var sayarsak socun değişkenine sayın ahmet doğum yının 1972 şeklinde bir değer vermiş oluruz.
 

Şimdi javaScriptin form nesnelerine nasıl etki edebileceğini göreceğiz.
 

Öncelikle document.bilgi.sonuc.value nesnesine sonuc değişkenini aktaralım;
 

document.bilgi.sonuc.value=sonuc; yapmamız gereken bu. Artık sonuc kutucuğunun içeriği "sayın ahmet dogum yının 1972" şeklinde değişmiş oldu.
 

Bunla yetinmiyoruz. Bir kontrolümüz var burada kontrol değişkeninin neden kullanıldığını anlatalım. Bu fonksiyon üç adımda çalışıyor. Üç ayrı işlem yapıyor. Hangi adımda bulunulduğunu javaScripte anlatmak için kullanıyoruz.
 

if(kontrol==1) document.bilgi.but1.value=" doğru mu? "; ilk adımda isek butonumuzun üzerine "doğru mu?" yaz. Bu kontrolümüzün yaptığı iş bu. Buradan buton üzerindeki yazıyıda javaScript ile kontrol edebileceğimizi anlıyoruz.

Bunun için
document.bilgi.but1.value="atanacak değer"; şeklinde bir kullanım yeterli oluyor.
 

Yine bir kontrolümüz var; if(kontrol==2) eğer kontrol değişkeni iki değerine işitse. Yani fonksiyon ikinci adımda ise sonuc kutucuğuna "bilgileri durum çubuğuna yazdırıyorum." şeklinde bir yazı yazdırıyoruz. Ayrıca but1'e ile "tamam mı?" yazdırıyoruz.
Bunları :

{
document.bilgi.sonuc.value="bilgileri durum çubuğuna
yazıyorum.";
document.bilgi.but1.value="tamam mı?";
}

şeklinde yazdırıyoruz.
 

Burada sorduğumuz "tamam mı?" sorusunun tek cevabı var "evet" bunuda butona tıklayarak ulaşıyoruz. Butona tıkladığımızda ilk yapılacak iş tamam() fonksiyonu çalışacak ve kontrol değişkeni bir birim artırılacak, yani üçüncü adım olduğundan kontrol değişkeninin değeri üç(3) olmuştur.
 

Bir kontrolümüz daha var; if(kontrol==3) kontrol üçe eşit ise. Burda şu mantığa dikkat etmek gerekir. tamam fonksiyonu her işleyişinde bütün kontrol bölümleri çalışır, fakat sadece şartın doğru olduğu if kontrolünün bloğu harekete geçer. Burada da aynı sadece üçüncü adımda bu kontrol doğru sonoc verir ve blok işlemeye başlar.

{
document.bilgi.sonuc.value="Yeni bilgileri giriniz";
document.bilgi.but1.value="tamam";
document.bilgi.adiniz.value="";
document.bilgi.e_mail.value="";
document.bilgi.yas.value="";
window.status="Adı : "+adiniz+" E-Mail : "+
e_mailiniz+" D.yılı : "+dogumYili;
kontrol=0;
}

Sırasıyla sonuc nesnesine "Yeni bilgileri giriniz", but1 nesnesine "tamam"; adiniz ve e_mail nesnesnelerine "" boş bir değer; atıyoruz.
 

Burada birde browser nesnesi kullanıyoruz. Bu nesneyi kullanmamızın sebebi bütün her şeyin olduğu browser nesnesinin elemanlarının nesıl kullanıldığının görmektir.
 

window.status="Adı : "+adiniz+" E-Mail : "+e_mailiniz+" D.yılı : "+dogumYili; işte browserin durum çubuğuna yazı yazmanın kolaylığını gördünüz. Sadece pencerenin adından bahsedip nereye ne yapacağımıza karar veriyoruz.
 

pencerenin.durumçubuğunu="Bu değere eşitle"; aslında yaptığımızın Türkçesi bu; javaScript ise window.status="Bu değere eşitle"; söyleminden anlıyor.
 

Burada dikkat edeceğimiz konu bir nesnenin bir özelliğine hitap ederken, sondan başa doğuru; özellik+nesne adı+nesnenin bulunduğu nesne+document şeklinde bir yazım kullanıyoruz. Bu şuna benzer evdeki televizyonun kumandasının ses artırma dümesine bas. İşte size nesnesel bir söylem. Bu söylemi kısaca

ev.televizyon.kumanda.ses.artır(); şeklinde yazabiliriz.
 

Programımız statusa mesajı geçtikten sonra kontrol değişkenini sıfırlayıp sona eriyor

 

Yardım İçin Sadece Bir Tık Yeter
 
Sponsor
 
.tk
 
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol