Makale Özeti

Asp.Net te veya herhangi bir şekilde Web Programcılığı yapıyorsanız bilmeniz gereken JavaScript i hızlı öğrenmeniz için bir döküman

Makale

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.

Olay

Açıklama

 HTML elemanı

 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>

Makale ile ilgili her türlü sorularınız için aşağıdaki mailimi kullanabilirsiniz.

 

Levent Cenk Çağlar

cenkc@yazgelistir.com