Nesneler :
Javascript ile yazacağımız programlar, Netscape veya Internet Explorer programlarının belge nesne modeli (Document Object Model) denen kurallar içinde hareket etmek zorundadır. Javascript dahil tüm Script dilleri, Browser’ın sunduğu hiyerarşik nesne modeli ile sınırlıdır
Hatırlayacağınız gibi, yukarıdan beri Javascript’e ekrana bir şey yazdıracağımız zaman, şuna benzer bir komut veriyoruz:
document.write(“Merhaba Dünya!”)
Burada kullandığımız write()metodu, “document” nesnesine, o da Browser’ın “window” (pencere) nesnesine aittir. “window” nesnesini yazmıyoruz, çünkü zaten onun içindeyiz. Ama yeni bir Browser penceresi açtırmak istersek, bunu da açıkça belirtmemiz gerekir.
Tarayıcının Nesneleri :
Tarayıcının JS deki adı Navigator dur. Tarayıcınız ne olursa olsun JS ona Navigator diyecektir.
Pencere Nesnesi :
width Navigator’ın sayfanın görüntülenmesi için ekrandaki temiz alanının piksel olarak genişliği.
height Navigator’ın sayfanın görüntülenmesi için ekrandaki temiz alanının piksel olarak yüksekliği.
toolbar Navigator’ın araç çubuğunun gösterilmesi (=1) veya gizlenmesi (=0).
menubar Navigator’ın menü çubuğunun gösterilmesi (=1) veya gizlenmesi (=0).
scrollbars Navigator’ın sağ ve alt kenardaki kaydırma çubuklarının gösterilmesi (=1) veya gizlenmesi (=0).
resizable Navigator penceresinin büyütülebilir-küçültülebilir olması (=1) veya olmaması (=0).
status Navigator penceresinin alt kenarındaki mesaj çubuğunun gösterilmesi (=1) veya gizlenmesi (=0).
location Navigator penceresinin URL adres çubunun gösterilmesi (=1) veya gizlenmesi (=0).
directories Netscape’de ikinci araç çubunun gösterilmesi (=1) veya gizlenmesi (=0).
copyhistory Mevcut Navigator penceresinin history kaydının (daha önce ziyaret edilen URl adreslerinin tutulduğu çizelgenin) yeni pencereye de kopyalanması.
outerWidth Navigator penceresinin piksel olarak genişliği.
outerHeight Navigator penceresinin piksel olarak yüksekliği.
left Navigator penceresinin ekranın sol kenarından piksel olarak uzaklığı.
top Navigator penceresinin ekranın üst kenarından piksel olarak uzaklığı.
alwaysRaised Navigator penceresinin masaüstünde açık bütün pencerelerin üzerinde kalmasını sağlar. (Sadece Windows ve MacOS’de işler.)
z-lock Navigator penceresinin içi tıklansa bile masaüstünde açık bütün pencerelerin altında kalmasını sağlar. (Sadece Windows ve MacOS’de işler.)
Buradaki “1” veya “0” lar yerine “yes” veya “no” da kullanılabilir.
Javascript’in yeni Navigator penceresi açma metodu, window.open() şeklinde yazılır:
yeniPencere = window.open(“yenisayfa.htm”, “YeniPencereAdı”, “toolbar=1, menubar=yes, resizable=no”);
Bu arada, Browser’ın kendisinin bazı özellikleri ile Javascript açısından nesne olduğunu tekrarlayalım. Bu açıdan Browser’ın Javascript için şu özellikleri vardır:
appname Browser’ın adı
appVersion Browser’ın sürümü
appCodeName Browser’ın kod adı
userAgent Browser’ın Server’a kendisini tanıtırken verdiği isim.
function ...() {
var BrowserAdi = ""
BrowserAdi += "Browser: " + navigator.appName + "\r"
BrowserAdi += "Sürümü:" + navigator.appVersion + "\r"
BrowserAdi += "Kod Adı: " + navigator.appCodeName + "\r"
BrowserAdı += "userAgent: " + navigator.userAgent + "\r"
alert(BrowserAdi)
}
Mesaj Kutuları :
Navigator penceresi, üç tür mesaj kutusu açabilir. Bunlar basit bilgi verme kutusu (alert), doğrulama kutusu (confirm) ve kullanıcının bilgi girme kutusudur (prompt).
Bunların genel yazım kuralı şöyledir:
window.alert(mesaj)
degisken = window.confirm(mesaj) //Evet (Yes) cevabı verilmişse True Hayır (NO) cevabı verilmişse False döndürür.
degisken = window.prompt(mesaj, varsayılanCevap) //degisken degiskenine kutuya girilen değeri döndürür.
Bu üç mesaj kutunun çeşitli kullanım şekillerini daha önceki örneklerde gördük..
Çerçeve Nesnesi
Bir Navigator penceresinde birden fazla HTML belgesi görüntüleme imkanı veren çerçeve (Frame) tekniği denir. Javascript açısından her bir çerçeve bir pencere sayılır.
top En üst pencere. yani Browser’ın kendisi.
parent Herhangi bir Frame’i oluşturan Frameset. Çerçeve çerçeve içinde ise, bir çerçevenin içinde bulunduğu çerçeve parent sayılır. Sayfada bir Frameset varsa, bütün çerçeveler için “top” aynı zamanda “parent” sayılır.
self Çerçevenin kendisi.
Çerçeve tekniği çok kapsamlı olduğundan sadece genel bilgi verilerek geçilmiştir.
Belge Nesnesi :
Web sayfasının Javascript dilinde adı Belge’dir. Bir HTML dökümanındaki bir form elemanının adı “bilgisayarForm” ise JS için bu form elemanı “document.bilgisayarForm” dur. Bu formun doldurulmuş halinin sunucuya yollanması işlemi yani “submit” işlemi de JS için “document.bilgisayarForm.submit()” methodu ile ifade edilir.
Not : Geri kalan nesnelere ilerideki HTML elemanlarında devam edeceğiz.
Olaylar :
Bir tarayıcı penceresinde kullanıcıdan yada tarayıcının kendisinden gelen bir sürü olay oluşabilir. Örneğin kullanıcının farenin tuşuna basma olayı “click”, bir objenin üstüne fare ile gelmesi olayı “onMouseOver” veya tarayıcının sayfayı yüklemesi olayı “onLoad” yada sayfanın bir şekilde kapanması olayı “onUnload” gibi olaylar oluşturur. Bu gibi olaylar tarayıcının olayları olduğundan aşşağıda tarayıcıda oluşabilicek olaylar ve tarayıcının elemanlarını bulabilirsiniz: tarayıcının elemanlarını ilerleyen konularda göreceğiz.
onblur
Odaklanmanın kaybedilmesi durumunda oluşur.
<BUTTON>,
<INPUT>,
<LABEL>,
<SELECT>,
<TEXTAREA>
onchange
İçindeki değerin değiştirilmesi durumunda ya da odaklamanın kaybedilmesi durumunda oluşur.
<INPUT>,
<SELECT>,
<TEXTAREA>
onclick
Tıklandığında oluşur.
Birçok eleman için geçerli.
ondblclick
Çift tıklanıldığında oluşur.
Birçok eleman için geçerli.
onfocus
Odaklanıldığında.Alanın aktifleştirilmesi
<BUTTON>,
<INPUT>,
<LABEL>,
<SELECT>,
<TEXTAREA>
onkeydown
Bir tuşa basıldığında.
Birçok eleman için geçerli.
onkeypress
Bir tuşa basıldığında ve bırakıldığında.
Birçok eleman için geçerli.
onkeyup
Bir tuşun bırakılması durumunda.
Birçok eleman için geçerli.
onload
Pencerenin ya da dokümanın yüklemesi durumunda.
<BODY>,
<FRAMESET>
onmousedown
Bir fare düğmesine tıklanması durumunda.
Birçok eleman için geçerli.
onmousemove
Farenin hareket ettirilmesi durumunda.
Birçok eleman için geçerli.
onmouseout
Farenin odaklandığı elemandan ayrılması.
Birçok eleman için geçerli.
onmouseover
Farenin bir eleman üzerine odaklanması.
Birçok eleman için geçerli.
onmouseup
Bir fare düğmesinin bırakılması durumunda.
Birçok eleman için geçerli.
onreset
RESET düğmesine tıklanarak form alanlarının temizlenmesi durumunda.
<FORM>
onselect
Metinin seçilmesi durumunda.
<INPUT>,
<TEXTAREA>
onsubmit
SUBMIT düğmesine tıklanarak formun sunucuya gönderilmesi durumunda.
<FORM>
onunload
Tarayıcının var olan dokümanı ya da penceresi serbest bırakması durumunda.
<BODY>,
<FRAMESET>
HTML elemanları
Form Elemanı :
Ziyaretçiden web sitesine bilgi akışı sadece form larla mümkün olabilir. HTML in kendi “<form>” etiketi olduğu için JS nin bu duruma müdahale etmesi gerekmemektedir.
HTML de bir standart bir form nesnesi :
<form name=”form1” action=”http://www.google.com /form.asp” method=”post”></form>
form elemanın içinde barındırdığı input tiplerinin özel bir durumu olan butonlar a bazı diğer JS ler bağlanabilir.(Örneğin : onClick) buton tiplerinin “submit” (sayfayı paketle ve server deki form etiketinin “action” ın da yazılan dosyaya yolla) özelliği olanları için JS ile form etiketi bazı özellikler eklenebilir.(örneğin “onSubmit=return denetle();” gibi). form elemanının içinde olan elemanları ve bunları nasıl kullanacağımızı yukarıdaki tablodan bulabilirsiniz. (bu konu ile ilgili örnekleri örnekler bölümünde bolca bulabilirsiniz.)
ÖRNEKLER
Zaten JS yi size anlatırken bir sürü örnek yaptık. Ama yinede ileride işinize yarayabilicek bazı hazır kalıpları ve fonksiyonları burada bulabilirsiniz.
Not : Genellikle sadece “<script>” etiketleri yazılmıştır. Fonksiyonları “<head>”etiketinin içinde de yazmanız. İçinde document.write gibi yazılar var ise yazdırılmasını istediğiniz yere yazdırmanız önerilir.
Örnek 1 : siteye istemcinin tarihini Türkçe yazırmak.
<script>
LDay = new Array(Pazar, Pazartesi, Salı, Çarşamba, Perşembe, Cuma, Cumartesi);
LMonth = new Array(Ocak, Şubat, Mart, Nisan, Mayıs, Haziran, Temmuz, Ağustos, Eylül, Ekim, Kasım, Aralık);
var dateString = new Date();
var year = dateString.getYear();
var month = dateString.getMonth();
var w_day = dateString.getDay();
var m_day = dateString.getDate();
document.write(m_day + " " + LMonth[month] + " " + year + ", " + LDay[w_day]);
</script>
Örnek 2 : JS ile pencere açmak.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function PencereAc() {
msg=open("","msj","toolbar=no,directories=no,menubar=no");
msg.document.write("<HEAD><TITLE>Hey!</TITLE></HEAD>");
msg.document.write("<CENTER><h1><B>Yeni Pencere</B></h1></CENTER><br>");
msg.document.write("<FORM><INPUT TYPE=\"submit\" VALUE=\"Kapat\" onClick=self.close()></FORM></CENTER><BR>");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" NAME="Button1" VALUE="Buraya Tıklayın" onCLick="PencereAc()">
</FORM>
</BODY>
</HTML>
Örnek 3 : Sayfa yüklenirken Karşılama
<HTML>
<HEAD>
</HEAD>
<BODY onLoad="alert(Sitemize Hoş Geldiniz);">
</BODY>
</HTML>
Örnek 4 : Sayfa yüklenirken Otomatik pencere açtırma
<HTML>
<HEAD>
</HEAD>
<BODY onLoad="window.open(sayfa.html,Popup,directories=no,menubar=no,toolbar=no,resizable=no,scrollbars=yes,width=200,height=300);">
</BODY>
</HTML>
Örnek 5 : İleri ve geri gitme.
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" VALUE=" < " onCLick="JavaScript:history.back()">
<INPUT TYPE="button" VALUE="Ana Sayfa" onClick="location=index.html">
<INPUT TYPE="button" VALUE=" > " onCLick="JavaScript:history.forward()">
</FORM>
</BODY>
</HTML>
Not : Ya da history.back() için history.go(-1) ve history.forward() için history.go(1) de yazabilirsiniz.
Örnek 6 : Bir linkin üstüne fare ile gelindiğinde o linkle ilgili açıklamayı status barda gösterme ve fareyi çekince silinmesi.
<HTML>
<HEAD>
<SCRIPT Language="JavaScript">
function yazi(txt) {
window.status = txt;
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="index.html" onMouseover="yazi(Ana Sayfa);return true;"
onMouseout="yazi(); return true;">Link</A>
</BODY>
</HTML>