Java Script Giriş Konu: 5

Konu: Java Script Giriş Konu: 5 C.tesi Ekim 23, 2010 8:01 am

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. Daha yüksek programlama dillerine, örneğin C++, Delphi veya Java gibi dillerle program yazmışsanız, programcı olarak başka bir programın modeli ile sınırlı olmadığınızı, hatta işletim sisteminin programlar için sağladığı arayüzle (API) kendinizi sınırlı hissetmeyebileceğinizi bilirsiniz. Fakat Javascript dahil tüm Script dilleri, Browser’ın sunduğu hiyerarşik nesne modeli ile sınırlıdır. Aşağıda Netscape’in modelini görüyorsunuz. Gerçi Internet Explorer çok daha fazla nesneyi kontrol etmenize imkan veriyor; fakat IE’nin geniş alanına giren nesnelere yönelik Javascript programı, Netscape kullanan ziyaretçilerin bilgisayarında işleyemeyebilir:

Javascript’te “document” nesnesi kavramını öğrenirken, ilk kavranması gereken unsur, “container” (içinde tutan, kap) meselesidir. 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(“<H1>Merhaba Dünya!</H1>”

Burada kullandığımız write()metodu, “document” nesnesine, o da Browser’ın “window” (pencere) nesnesine aittir. “window” nesnesini zikretmiyoruz; çünkü zaten onun içindeyiz. Ama yeni bir Browser penceresi açtırmak istersek, bunu da açıkça belirtmemiz gerekir. Aşağıdaki kodu, düz yazı programınızda yazarak, yenipencere.htm adıyla kaydederseniz ve Browser’ınızda açarsanız, size yeni bir “window” nesnesi oluşturma imkanı verecektir:

<HTML>

<HEAD>

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

<TITLE>Javascript'te Yeni Pencere</TITLE>

<SCRIPT LANGUAGE = "Javascript1.2">



</SCRIPT>

<BODY OnUnload="kapaPencere()">

<H1>Bu düğmeyi tıklarsanız, yeni pencere açılır.</H1>

<FORM>

<INPUT Type="button" Value="Yeni Pencere Aç" OnClick="yeniPencere()" </INPUT>

</FORM>

</BODY>

</HTML>

Burada “windowNesnesi” adlı değişkinin değerine dikkat ediyor musunuz: Browser’ın kendi içinde bulunan “window.open()” metodunu kullanarak, araç çubuğu bulunmayan, eni 300 yüksekliği 150 piksel ve ziyaretçi tarafından ölçüleri değiştirilebilen bir yeni Browser penceresi açıyor. Aslında bu noktada windowsNesnesi adlı değişken, bu nesnenin buradaki temsilcisi sayılır; yeni nesneye ne yaptırtmak isterseniz, burada, windowNesnesi değişkinini kullanarak yapabilirsiniz. Bir başka dikkat edilmesi gereken nokta, yeni Window nesnesini oluşturduktan sonra bir daha “window” nesne adını kullanmıyoruz, sadece document adlı container’in (kabın) adına referans yapıyoruz.

Yukarıdaki şemada gördüğümüz nesnelerin HTML karşılıkları şöyledir:

Javascript Nesnesi HTML Karşılığı

Pencere (Window) Yok

Çerçeve (Frame) <FRAME>

Belge (Document) <BODY>

Form <FORM>

Düğme <INPUT TYPE=”button”>

İşaretleme Kutusu <INPUT TYPE=”checkbox”>

Gizli (Hidden) <INPUT TYPE=”hidden”>

Dosya Çıkart (file upload) <INPUT TYPE=”file”>

Parola (password) <INPUT TYPE=”password”>

Radyo düğmesi (Radio) <INPUT TYPE=”radio”>

Başa dön (Reset) <INPUT TYPE=”reset”>

Seç (Select) <SELECT>

Gönder (Submit) <INPUT TYPE=”submit”>

Metin (Text) <INPUT TYPE=”text”>

Metin Alanı (Textarea) <TEXTAREA>

Bağ (Link) <A HREF=””>

Bağlantı (Anchor) <A NAME=””>

Applet <APPLET>

Resim (Image) <IMG>

Plugin <EMBED>

Alan (Area) <MAP>

Bu nesneleri ve metodları ile yanıt verdikleri Window olayları (event) konusuna geçmeden önce bir iki noktayı belirtelim:

Window nesnesinin HTML karşılığı bulunmamakla birlikte BODY etiketinin onLoad ve unonLoad olaylarında işleyen bir fonksiyonla yeni window nesnesi oluşturmanız (yukarıdaki örnekte olduğu gibi) daima mümkündür. Ayrıca, içinde bulunduğunuz veya yeni açmak istediğiniz bir Browser penceresinin alt çervesindeki Status (durum) mesajı alanına istediğiniz mesajı yazdırabilirsiniz:

window.status = ’Benim sayfama hoş geldiniz!’

Internet, HTML sayfası ve bağlı belgelerle bilgisayar dosyalarını alıp vermek demektir. Mahal (Location) nesnesi, Browser’ın görüntülediği belgenin nereden geldiğini gösterir. Gerçi, HTML size görüntülediği belgenin nereden geldiğini bildirmez, ama Browser, bunu “window.location.protocol” nesnesi olarak tutar. Bu değer ya “http:” ya da “file:” (ikisi de küçük harf ve sonlarında iki nokta üstüste var) olur. Örneğin:

if (window.location.protocol == “http:” {

alert (“Bu belge Internet’ten geliyor.”) }

Else { alert (“Bu belge sabit diskten geliyor.”)}

şeklinde bir kodla, belgenin mahallini araştırmak mümkündür.

Tarih (History) nesnesi ise, her iki Browser’ın, ziyaret edilen siteler ve sayfalar listesinde ileri veya geri gitmekte kullandığı nesnedir. HTML’de bu listeye erişmeyi sağlayan etiket bulunmamakla birlikte Javascript bu listeyi kullanabilir. Örneğin:

function gerigit() { window.history.go(-1) }

şeklindeki bir fonksiyon ve bu fonksiyonu çağıran bir düğme (onClick=gerigit() gibi) Tarin nesnesinden yararlanmasını sağlayabilir.

Olaylar
Browser programları, olaylı bir yaşama sahiptir! Ya bilgisayar sistemi, ya da kullanıcı (ziyaretçi), sürekli bir takım olayların (Event) oluşmasına sebep olurlar. Ya Mouse’un bir düğmesine basılır “Click” adı verilen olay oluşur; ya klavyede bir tuşa basılır, “KeyDown” olayı oluşur. Bir HTML sayfasının yüklenmesi biterse “Load,” sayfadan çıkma işlemi tamamlanırsa “unLoad” olayı olur.

Her Pencere, Browser veya Kullanıcı olayına karşılık, Javascript’in bir Olay Yönlendiricisi (Event Handler) vardır. Olay Yönlendirici, olayın adını taşır. Örneğin, kullanıcının Mouse’un bir düğmesini tıklaması, Click, bu olayı karşılayan ve yönlendiren metod ise onClick (tıklandığında, tıklama halinde) adını taşır. Javascript programcısı olarak bu olayların tümü bizi ilgilendirmediği gibi, nesnelerimiz de çoğunlukla bu olaylara ilgi göstermezler. Bizi yakından ilgilendiren nesneler ve onların olaylarla ilgisini ...... tabloda görebilirsiniz.

Event Handler’ları, bir tür adlandırılmış ama içi boş fonksiyonlar gibi düşünebilirsiniz. Programcı olarak bize düşen, bu olay karşısında olay yöndendiricisinin ne yapmasını istediğimi belirtmekten ibarettir. Event Handler’lar, daha önceden hazırladığımız bir fonksiyonu göreve çağırabilir; veya hemen oracıkta bir Javascript metodunu da devreye sokabiliriz. Mesela:

<INPUT TYPE=”text” SIZE=50 MAXLENGTH=100 NAME=”soyadi” onChange=”denetle(this)”>

Ziyaretçi bu INPUT kutusuna soyadını yazdığında, kutunun içeriği değişmiş olacak ve bu Change (değişiklik) olayı, kendisini yöndendiren onChange sayesinde, önceden hazırladığımız “denetle()” isimli fonksiyonu çağıracaktır. Burada gördüğünüz “this” (bu) kelimesi, Javascript’e fonksiyonun istediği değer kümesi olarak bu nesnenin içeriğini vermesini bildiriyor. İlerde örneklerde bunu sık sık kullandığımızı göreceksiniz.

Şimdi sık kullandığımız olayları ve yönlendirilcilerini daha yakından tanıyalım:

onClick
Ziyaretçinin, Mosue işaretçisi tıklanabilir bir nesne üzerinde iken Mouse’nun düğmesine basması, Click olayını doğurur; bu olayı onClick yönlendirir. Düğmeler, işaretleme kutuları, radyo düğmeleri ve bağlantılar tıklanabilir. Olayın oluşması için varsayılan Mouse düğmesinin basılması ve bırakılması gerekir. Düğme basılı durursa, Click olayı gerçekleşmiş olmaz.

onClick yönlendiricisine, “Click” olayı halinde ne yapmasını istediğinizi ait olduğu nesnenin HTML etiketi içinde bildirmeniz gerekir. Aşağıdaki kodu düz yazı programınızda yazar ve onClick01.htm adıyla kaydederseniz, onClick yönlendiricisi için program yazmış olacaksınız:

<HTML>

<HEAD>

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

<TITLE>JavaScript'te onClick</TITLE>

<SCRIPT LANGUAGE="JavaScript1.2">



</SCRIPT>

</HEAD>

<BODY>

<H1>Düğmelerden birini tıklayınız!</H1>

<INPUT TYPE="button" NAME="Resim1" VALUE="Resim 1" onClick=resim1()>

<INPUT TYPE="button" NAME="Resim2" VALUE="Resim 2" onClick=resim2()>

</BODY>

</HTML>

Bu kodda adı geçen resim1.htm ve resim2.htm adını vereceğimiz ve iki küçük resim içeren sayfaları da oluşturalım (Elinizde hazır bir grafiğin adını verebilirsiniz).

<html>

<head>

<title>Resim 1[veya Resim 2]</title>

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

</head>

<body>

<h1>Resim 1[veya Resim 2]</h1>

<p><img src="resim1.gif" width="151" height="278" alt="uzayli.tif (4942 bytes)"></p>

</body>

</html>

Bu üç sayfayı oluşturduktan sonra onClick.htm’de sırayla her iki düğmeyi de tıklayın; her Click olayında onClick yönlendiricisinin farklı fonksiyonları çağırdığına dikkat edin.

Kimi zaman onClick yönlendiricisi, bağlantı nesnesi ile doğrudan kullanılabilir. Bağlantı nesnesi olan <A HREF=....> etiketi, bir bağlantı protokolü adresi (URL) verilmesini ister. Ancak HTTP veya FILE protokolü yerine buraya doğrudan JavaScript’in adını ve icra etmesi istenen fonksiyonu yazabilirsiniz. Örneğin, <A HREF=”javascript:resim1()”> şeklinde bir ifade, protokol olarak Javascript’i göstermemizi sağlayabilir.

onClick01.htm’de INPUT etiketleri yerine, şu iki satırı yazarak, onClick02.htm adıyla kaydedip, Browser’da açın. Düğmelerin yerini bağlantılı iki kelimenin aldığını göreceksiniz; fakat sayfanın işlevi değişmeyecek. onClick, bu kez düğmenin Click olayını değil, bağlantının Click olayını karşılıyor:

<A HREF=”javascript:resim1()”>Resim 1</A>

<A HREF=”javascript:resim1()”>Resim 1</A>

onSubmit
Javascript’in, HTML’i tamamladığı noktaların başında Form ve Form yoluyla elde edilecek bilgilerle ilgili işlemler gelir. Bu işlemlerin başında ise Form’daki bilgilerin Server’a gönderilmeden önce, daha Browser’da iken doğrulanması ve hatalardan arındırılması vardır. Javascript, bunu ziyaretçinin formda, Submit (Gönder) olayına yol açan herhangi bir düğmenin tıklanması halinde yapar. Bir form, ziyaretçi tarafından türü Submit olan bir düğmenin tıklanması halinde, Browser tarafından HTTP protokolü ile Server’a gönderilir. Javascript, onSubmit yönlendiricisi ile bu olaya ilişkin işler yapabilir, fonksiyonlar icra edebilir. Fakat burada dikkat edeceğiniz nokta, “Submit” olayına engel olmamak veya bu işlemi şarta bağladı iseniz, bu şartın yerine gelmesini sağlamaktır. Bunu bir örnek üzerinde görelim. Diyelim ki, HTML sayfanızda, şuna benzer bir FORM etiketi var:

<FORM ACTION=”form_islem.pl” METHOD=”post” onSubmit=”onayla()”>

Burada adı geçen “onayla()” fonksiyonu HTML’in HEAD bölümünde yer alıyor ve şuna benzer komutlar içeriyor:

//onSubmit olayını yönlendirme fonksiyonu

function onayla() {

confirm(‘Bu siparişi vermek istediğinizden emin misiniz?’);

}

İlk bakışta böyle bir “tuzak,” formun bir kere daha onaylandıktan sonra gönderileceğini düşündürebilir. Burada gördüğünüz “confirm” komutu, Javascript’e, Browser’ın kullanıcıdan OK (Tamam) ve Cancel (İptal) yazılı bir kutu ile onay almasını sağlar. Kullanıcı OK düğmesini tıklarsa, Browser, Javascript’e “true” (doğru), kullanıcı Cancel (İptal) düğmesini tıklarsa “false” (yanlış) değeri gönderecektir; sanılabilir ki, Javascript’e “true” değeri dönerse formu gönderilecek, fakat “false” değeri dönerse form gitmeyecektir.

Bu doğru değil! Her iki değerde de form gidecektir; çünkü, yukarıdaki kodda Browser’ın Confirm kutusunun oluşturacağı değerin türü ile onSubmit olay yönlendiricisi arasında bir bağ kurulmuyor; başka bir deyişle onSumbit’e kendisine dönmesi gereken bir sonuç olduğu bildirilmiyor. Bunu “return” anahtar kelimesiyle sağlarız. “return” (anlamı: geri dön) kelimesi, bir fonksiyona kendisini göreve çağıran unsura mutlaka bir değer göndermesi gerektiğini bildirir. “return” kelimesini kullanarak, Form etiketini şöyle yazabiliriz:

<FORM ACTION=”form_islem.pl” METHOD=”post” onSubmit=”return onayla()”>

Dolayısıyla “onayla()” fonksiyonuna da kendisini göreve çağıran komuta bir sonuç ulaştırması gerektiğini bildtirmemiz gerekir:

//onSubmit olayını yönlendirme fonksiyonu

function onayla() {

return confirm(‘Bu siparişi vermek istediğinizden emin misiniz?’);

}

Bu durumda kullanıcı/ziyaretçi “confirm” kutusunun OK (Tamam) düğmesini tıklarsa onSubmit yönlendiricisi Form’u belirtilen CGI programına, işlenmek üzere, gönderecek; Cancel (İptal) düğmesi tıklanırsa, onSubmit yönlendiricisi submit olayını durduracaktır.

onReset
Formlara koyduğunuz Reset (Başa dön) düğmesi, bir Form’daki bütün bilgilerin silinmesini sağlar; Browser’ın Geri düğmesini tıklamak dahil, hiç bir eylem ziyaretçinin yanlışlıkla bastığı Sil düğmesinin sildiğini geri getiremez. Fakat programcı olarak siz böyle bir hatayı önleyebilirsiniz. Çünkü Sil düğmesinin oluşturduğu “reset” olayını yönlendiren onReset, size bu imkanı verir. Tıpkı onSubmit’teki gibi FORM etiketinize onReset tarafından devreye sokulacak bir doğrulama fonksiyonu koyabilirsiniz. Form etiketiniz şöyle olabilir:

<FORM ACTION=”form_islem.pl” METHOD=”post” onReset=”return sahiMi()”>

Bu fonksiyonu da HTML’in HEAD bölümünde şöyle yazabilirsiniz:

//onReset olayını yönlendirme fonksiyonu

function sahiMi() {

return confirm(‘Bu formdaki büktün bilgileri silmek istediğinizden emin misiniz?’);

}

Ziyaretçiniz doldurduğu formda, Gönder yerine yanlışlıkla Sil’i tıkladıysa, böylece bir şansa daha kavuşmuş olur.

onChange
HTML sayfanızda olabilecek tek değişiklik, ziyaretçinin içine bir şeyler yazabildiği veya bazı işaretler koyabildiği üç alandır: Text (Metin), Textarea (Metinalanı) ve Select (Seç) etiketleri. Metin ve metinalanın içini tıklayarak Browser Penceresi’nin odak noktasını buraya getiren ziyaretçi klavyesine basarak, bu alanlara metin girebilir; bu HTML sayfasında “change” (değişiklik) olması anlamına gelir Select etiketinin sağladığı şıklardan birini seçen ziyaretçi de sayfada değişiklik olayına yol açar. “change” olayı halinde, onChange bu olayı yönlendirir. Javascript programcısı olarak siz bu yönlendiriciye belirli bir fonksiyonu çalıştırmasını bildirebilirsiniz.

Bunu da bir örnekle ele alalım. Diyelim ki Frame (Çerçeve) esasına dayanan bir ana sayfanız var; ziyaretçinin bir çerçevedeki “select” etiketinin seçeneklerinden birini seçmesi halinde bir diğer çerçevenin içeriği değişsin istiyorsunuz. Ana sayfanızda bir FRAMESET var ve bu üç çerçeveli bir sayfa oluşturuyor. Burada Browser’ın “document” (sayfa) hiyerarşisi içinde Frameset “Parent” (ebeveyn; çünkü diğer bütün Frame'leri o doğuruyor!) ve “Frame 0” (1’nci çerçeve) “Frame 1” (2’nci çerçeve) ve “Frame 2” (3’ncü çerçeve) vardır. “document” nesnesi çerçeveleri bir dizi-değişken içinde tuttuğu ve Array (dizi değişken) numaralanmaya 0'dan başladığı için çerçevelerimiz 0’dan itibaren numaralanıyor. Buna göre sağ Frame'in içeriğini değiştireceğimiz zaman bu çerçeveye "Frame 2" adıyla gönderme yapmalıyız. Frame 1'e şöyle bir FORM koyarsak, daha sonra bu formun değişiklik olayını onChange ile sağ çerçevenin içeriğini değiştirmeye yönlendirebiliriz:

<FORM METHOD="post">

<P><SELECT NAME="hedef" SIZE="1" onChange="parent.frames[2].location.href=this.form.hedef.options[this.form.hedef.selectedIndex].value">

<OPTION>Seç bakalım

<OPTION VALUE="test1.htm">Test 1

<OPTION VALUE="test2.htm">Test 2

<OPTION VALUE="test3.htm">Test 3

</SELECT>

</FORM>

Burada, SELECT nesnesinin içeriği, ziyaretçinin herhangi bir seçeneği seçmesi halinde değişmiş oluyor; bu “change” olayı üzerine bu olayı yönlendirmek üzere kullandığımız onChange ise karşısındaki Javascript komutunu icra etmeye başlıyor. Bu uzun kodda, “this” (bu) anahtar kelimesinin yeniden kullanıldığını görüyorsunuz. Bu kelime, herhangi bir Javascript fonksiyonuna (adı fonksiyon olmamakla birlikte burada yazdığımız kod da bir fonksiyonun görevini yapıyor) ihtiyacı olan bilgileri bu nesneden almasını bildiriyor. “Bu” diye nitelediğimiz nesne, içinde bulunduğumuz FORM’un SELECT ögesidir. SELECT ögesinin OPTION’ları, bu nesnenin OPTIONS dizi-değişkeninde numaralanır ve seçilen OPTION’ın numarası “selectedIndex,” içeriği ise “.value” adıyla adlandırılır. Nesneleri ve özelliklerini ele aldığımız bölümde bu konuya yeniden döneceğiz.

onFocus, onBlur
Bilgisayarda bir program açıkken, Mouse ile programın başlık çubuğunu tıklayın; çubuğun renginden işletim sisteminin dikkatinin bu programın penceresinde yoğunlaştığını göreceksiniz. Bir de masaüstünde boş bir yeri tıklayın; bu pencere sistemin odak noktası olmaktan çıkacaktır. HTML sayfasında da Browser’ın Focus’unu (dikkat odağını) üzerinde topladığı veya odağın çekildiği üç nesne olabilir: Text (Metin), Textarea (Metinalanı) ve Select (Seç) etiketleri. Çünkü ziyaretçinin sadece bu etiketlerin oluşturduğu nesnelere klavyenin dikkatini çekme hakkı vardır. Bu nesnelerden biri tıklanınca Browser’ın focus’u bu nesneye dönmüş, yani “focus” olayı olmuş demektir; bu durumda, biz de bu olayı yönlendiren onFocus’u kullanabiliriz. Aynı mantıkla, ziyaretçi Browser’ın focus’unu bu nesneden başka bir yere çektiği zaman bu nesne focus’u kaybeder, “blur” (netlikten çıkma, flulaşma) olayı olur. Bunu da onBlur ile yönlendiririz. Bu iki yönlendiricinin birlikte kullanıldığı şu örnek kodu, onFocus.htm adıyla kaydederseniz ve Browser’da ekrandaki talimatları izlerseniz, her iki yönlendiriciyi de kullanmış olacaksınız:

<HTML>

<HEAD>

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

<TITLE>JavaScript'te onFocus ve onBlur</TITLE>

<SCRIPT LANGUAGE="JavaScript1.2">



</SCRIPT>

</HEAD>

<BODY>

<BR>

<FORM NAME="isimForm">

<P>Lütfen adınızı yazın ve sayfa üzerinde başka bir yeri tıklayın:

<BR><INPUT TYPE="text" NAME="ad" VALUE="Adınızı buraya yazınız" SIZE=25 onBlur="goster()">

<P>Şimdi de aşağıdaki kutuya mesleğinizi yazın:

<BR><INPUT TYPE="text" NAME="meslek" VALUE="Mesleğinizi buraya yazınız" SIZE=25 onFocus="uyar()">

</FORM>

</BODY>

</HTML>

Javascript, üstteki kutuya adınızı yazdıktan sonra başka bir yeri tıkladığınızda olan iş, “ad” isimli metin kutusunun “blur” olayına onBlur’ün çağırdığı goster() fonksiyonu ile; alttaki kutuyu mesleğinizi yazmak üzere tıkladığınız anda “meslek” kutusunda olan “focus” olayına da uyar() fonksiyonu ile karşılık veriyor.

onMouseOver, onMouseOut
Javascript dünyasında en çok kullanılan iki “event” varsa, birincisi Mouse işaretçisinin bir nesnenin üzerine gelmesi (“MouseOver” olayı), ikincisi ise Mouse iuşaretçisinin bir nesnenin üzerinden çekilmesi (“MouseOut” olayı) sayılabilir. Bu iki olayı onMouseOver ve onMouseOut yönlendiricileri ile karşılayabiliriz. Gerçekte bu iki olayla, Mouse işaretçisi bir bağlantı satırı veya grafiğinin ve bir grafik haritasının (Map, Area) üzerine geldiği veya üzerinden çekildiği zaman ilgilenebiliriz; çünkü diğer HTML unsurları ve Javascript nesneleri ile Mouse işaretçisinin işaretleme ilişkisi yoktur.

Bu olayı ve yönlendirilmesini, şu küçük programda görebiliriz:

<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>

<A HREF="http://pcworld.com.tr" NAME="bag" onMouseOver="return faregelince()" onMouseOut="return faregidince()">PC World-Türkiye</A>

</BODY>

</HTML>

Bu kodu onMouseOver.htm adıyla kaydeder ve Mouse işaretçisini PCWORLD-TÜRKİYE bağlantısının üzerine getirirseniz, Browser’ınızın alt çerçevesindeki statü mesajı yerinde "En güzel site için burayı tıklayın!", geri çektiğinizde de "En güzel siteye gitme fırsatını kaçırdınız!" mesajını göreceksiniz.

onLoad, onUnLoad
Javascript açısından Browser’ın bir HTML sayfasını görüntülemeyi bitirmesi sayfanın “load” (yükleme), başka bir sayfaya geçilmesi ise önceki sayfanın “unload” (yüklenmişlikten çıkması) sayılır; ve bu iki olayı onLoad ve onUnLoad yönlendiricileri ile karşılayabiliriz. HTML dosyasının iki bölüm (HEAD ve BODY) olduğunu biliyorsunuz. Browser açısından asıl sayfa, BODY bölümüdür; HEAD bölümündeki komutlar sayfanın nasıl görüntüleneceğine ilişkin komutlar içerir.

Bir sayfa Browser’a yüklenirken yapabileceğimiz bir çok işten birisi, ziyaretçinin Browser’ının türünü yoklamak olabilir. O halde, BODY etiketini şöyle yazarsak;

<BODY onLoad=”hangiBrowser()”>

ve HTML’in HEAD bölümüne bu fonksiyonu koyarsak, sayfamız yüklenirken bize ziyaretçinin Netcape mi, yoksa Internet Explorer mı kullandığını bildirebilir. Bu bilgiyi nasıl değerlendirebileceğimiz ise ayrı bir konu. “hangiBrowser()” fonksiyonu şöyle olabilir:

// hangiBrowser fonksiyonunu tanımlayalım:

var Browser=navigator.appName + " " + navigator.appVersion;

var getkey=Browser.substring(0, 12);

function hangiBrowser()

{

if (Browser.substring(0, 8)=="Netscape")

window.location="netscape4.htm";

if (Browser.substring(0, 9)=="Microsoft")

window.location="ie.htm";

if ( (Browser.substring(0, 8)!="Netscape") && (Browser.substring(0, 9)!="Microsoft") )

window.location="belirsiz.htm";

}

// -->

Bu iki kodu içeren sayfanızı onLoad.htm adıyla kaydeder ve aynı dizine, içinde “Netscape kullanıyorsunuz! yazılı ve adı “netscape.htm”; içinde “IE kullanıyorsunuz!” yazılı ve adı “ie.htm”, ve içinde “Ne tür Browser kullandığınızı anlamadık!” yazılı ve adı “belirsiz.htm” olan üç HTML dosyası koyarsanız, onLoad.htm’i açmak istediğinizde kullandığınız Browser hangisi ise (onLoad.htm’in değil) diğer üç dosyadan birinin açıldığını göreceksiniz.

Bir sayfada başka bir sayfayı işaret eden bir bağlantıyı tıkladığınızda, Browser açık olan HTML kodunu silecek, yani sayfayı yüklenmemiş hale getirecektir. Bu Javascript açısından bir UnLoad olayıdır. O halde, BODY etiketimize onUnLoad yönlendiricisini harekete geçiren bir fonksiyonu çağırmasını söyleyebiliriz.

Aşağıdaki HTML konudu onUnLoad.htm, ve bir HTML sayfasına da sadece “Güle Güle.. Yine Bekleriz!” yazarak, gulegule.htm adıyla kaydederseniz sayfanız kapanırken ziyaretçinize veda etme imkanınız olur. (Ama çoğu ziyaretçinin bundan hoşlanmayacağına emin olabilirsiniz!)

<HTML>

<HEAD>

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

<TITLE>JavaScript'te onUnLoad</TITLE>

<SCRIPT LANGUAGE="JavaScript1.2">



</script>

</head>

<body onUnLoad="gulegule()">

Bu sayfa size güle güle diyecek!!

<A HREF="test1.htm">Baska sayfa</A>

</body>

</html>

Buradaki BODY etiketi, Browser başka sayfaya geçmek üzere mevcut sayfayı sildiği anda, Browser’a yeni bir pencere açarak, bu pencerede gulegule.htm’i görüntülemesini sağlayacaktır.

onError, onAbort
Ziyaretçinin Browser’ı açmak üzere olduğu sayfayı transfer hatası yüzünden açamaz, HTML veya Javascript kodunu doğru yorumlayamazsa, Error (hata) olayı oluşur. Javascript, sadece kendisine ilişkin hata durumlarını onError ile yakalayabilir.

Javascript’in Browser penceresiyle ilgili hatasını yakalamak istediğiniz kod, HTML’in HEAD bölümünde, SCRIPT etiketleri içinde ve “window.onerror” kelimeleri küçük harfle yazılmış olarak bulunmalıdır:

window.onerror=hataHalinde()

function hataHalinde (message, url, lineNumber)

{

messageList = new Array()

urlList = new Array()

lineNumberList = new Array()

messageList[messageList.length] = message

urlList[urlList.length] = url

lineNumberList[lineNumberList.length] = lineNumber

alert(messageList[0] +

"\ndosya adı " + urlList[0] +

"\nsatır sayisi " + lineNumberList[0])

return true

}

Bu kodu üzerinde çalıştığınız Javascript kodu içeren bir HTML sayfasına yerleştirdiğiniz taktirde olabilecek hatalar bir Uyarı kutusuyla size bildirilir. Sayfanın ve Javascript’in hatasız çalıştığını anladıktan sonra bu kodu kaldırabilirsiniz.

Javascript, sayfalarınızdaki grafik unsurların da hata halini yakalayabilir. HTTP iletişiminde, en sık görülen transfer hatası grafik unsurların aktarılması sırasında olur; ayrıca HTML tasarımı sırasında grafik dosyalarının sayfaya veya sitenin kök dizinine göre göreli adresinin yazılmasında sık yapılan hatalar, grafik unsurların aktarılmasını engeller. Bu tür hatalarda ziyaretçinizi şu Javascript koduyla uyararabilirsiniz:

<IMG NAME=”resim01” SCR=”resim1.gif” orError=”alert(‘resim1.gif aktarılamıyor; özür dileriz’)”>

Sayfalarınıza koyduğunuz grafik unsurlar ziyaretçilerinizin sabrını taşırır da, grafiklerin sonuna kadar aktarılmasını beklemeden Browser’ın Stop düğmesini tıklarlarsa, bunun sayfanız için kötü sonuçları olabilir. Grafik unsurlara bağlantı belirten alan haritaları (AREA, MAP) etiketleri koymuş olabilirsiniz. Ziyaretçinin Browser’ının Stop düğmesini tıklaması, Javascript açısından abort (yarıda kes) olayının doğması demektir; bunu onAbort ile yönlendirebilirsiniz. Bu yönlendiriciden yararlanarak ziyaretçiye sayfanın eksik olduğunu bildirmeniz yerinde olur. Bunun için IMG etiketini şöyle yazabilirsiniz:

<IMG NAME=”resim01” SCR=”resim1.gif” onAbort=”alert(‘Sayfanının bütün unsurları aktarılamadı; beklediğiniz sonucu alabilmek için bütün unsurların aktarılması yerinde olur’)”>

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