Konuyu Değerlendir
  • 0 Oy - 0 Ortalama
  • 1
  • 2
  • 3
  • 4
  • 5
Javascript (Kapsamlı Anlatım/Eğitim)
#11
Fonksiyon ile HTML Unsarlarının İlişkisi

[hide]
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.

Kod:
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<TITLE>Javascript'te Fonksiyon</TITLE>
<SCRIPT LANGUAGE="Javascript1.2">
<!--Javascript kodunu eski sürüm Browserlardan saklayalim
// fonksiyonu tanimlayalim:
function tarihsaat()
      {
var saat = new Date()
saat.getTime()
document.saatForm.saatkutusu.value = saat.toString()
kronometre = setTimeout("tarihsaat()",1000)
      }
//-->
</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:dakikaConfusedaniye, 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:

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

Kod:
var toplamTutar = “((siparisMiktarı * fiyatTL) * vergi)”
if (vergiYok) {
toplamTutar = “(siparisMiktarı * fiyatTL)”
      }
.......

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

Kod:
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.
[/hide]
Wink Web Üstadı Cool
Bul
Alıntı
#12
Javascript’in Nesneleri, Olayları ve Özellikleri

[hide]
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:

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

Kod:
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.


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:

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

Kod:
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<TITLE>Javascript'te Yeni Pencere</TITLE>
<SCRIPT LANGUAGE = "Javascript1.2">
<!-- Javascript kodunu eski sürüm Browserlardan saklayalım
var windowNesnesi
function yeniPencere()
      {
windowNesnesi = window.open("", "YeniPencere", "toolbar=0, width=300, height=150, resizable=1")
windowNesnesi.document.write("<H2>İşte yeni Pencereniz.. Tebrikler!</H2>")
      }
function kapaPencere()
      {
windowNesnesi.close()
      }
// -->
</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:

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

Kod:
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.


Javascript açısından Browser Nesneleri ve karşılık verdikleri Browser ve GUI Olayları (Event).

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:

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

Kod:
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<TITLE>JavaScript'te onClick</TITLE>
<SCRIPT LANGUAGE="JavaScript1.2">
<!-- Javascript kodunu eski sürüm Browserlardan saklayalim
//onClick icin fonksiyonlar
function resim1()
      {
resim1Pencere = window.open("resim1.htm", "Resim1", "toolbar=0, width=200, heigth=400,resizeable=0");
      }
function resim2()
      {
resim2Pencere = window.open("resim2.htm", "Resim2", "toolbar=0, width=200, heigth=400,resizeable=0");
      }
// -->
</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).

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

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

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

Kod:
//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:


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

Kod:
//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:

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

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

Kod:
//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:

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

Kod:
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<TITLE>JavaScript'te onFocus ve onBlur</TITLE>
<SCRIPT LANGUAGE="JavaScript1.2">
<!-- Javascript kodunu eski sürüm Browserlardan saklayalim
// fonksiyonları tanimlayalim
function goster()
      {
document.isimForm.ad.value="Adınız kayda geçmiştir."
      }
function uyar()
      {
document.isimForm.ad.value="Lütfen yanlışlık yapmayınız!"
      }
// -->
</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:

Kod:
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<TITLE>JavaScript'te Fonksiyon</TITLE>
<SCRIPT LANGUAGE="JavaScript1.2">
<!-- Javascript kodunu eski sürüm Browserlardan saklayalim
// fonksiyonu tanimlayalim:
function faregelince()
      {
       window.status = "En güzel site için burayı tıklayın!";
       return true
      }
function faregidince()
      {
       window.status = "En güzel siteye gitme fırsatını kaçırdınız!"
       return true
      }
// -->
</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;

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


Kod:
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!)

Kod:
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<TITLE>JavaScript'te onUnLoad</TITLE>
<SCRIPT LANGUAGE="JavaScript1.2">
<!-- Javascript kodunu eski sürüm Browserlardan saklayalim
// gulegule fonksiyonunu tanimlayalim:
function gulegule()
      {
gulegulePencere = window.open("gulegule.htm", "GuleGule", "toolbar=0, width=200, heigth=400,resizeable=0");
}// -->
</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:

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

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


Kod:
<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’)”>

[/hide]
Wink Web Üstadı Cool
Bul
Alıntı
#13
Nesneleri ve Olayları Birleştirelim
[hide]
Şimdi Javascript açısından Browser nesnelerinin neler olduğunu biliyoruz; Browser’ın Javascript açısından ne gibi olaylar oluşturduğunu ve bu olayları nasıl kullandığımızı küçük örneklerle gördük. Olaylardan yararlanarak Javascript’le nesneleri etkileyen programlar yazabiliriz; fakat bunun için nesnelerin ne gibi özellikleri olduğunu ve bunları nasıl etkileyebileceğimizi de bilmemiz gerekir. Bu bölümde nesnelerin Javascript ile etkilenebilir özelliklerinin neler olduğunu ele alacağız.


Nesnelerin ayrıntılarına girmeden önce bir noktaya açıklık getirelim: Javascript ile bir HTML unsurunu etkileyebilmek, örneğin bir çerçevenin (Frame) içeriğini değiştirebilmek için mutlaka o nesnenin bir olaya karşılık verir olması gerekmez. Çerçeveler HTML etiketleri ile şekillenirler; herhangi bir olaya karşılık vermezler. Dolayısıyla olaylara yanıt vermeyen nesneleri, olaylara yanıt veren nesneler yoluyla etkileyebiliriz; bunun için de bir çok HTML nesnesinin özellikleri bilmemiz gerekir.

Bu açıdan bakınca, olaylara yanıt versin-vermesin, HTML nesnelerimizi, Browser Nesneleri, Belge Nesneleri, Form Nesneleri ve Javascript Dil nesneleri olarak dört ana gruba ayıracağız.


[/hide]
Wink Web Üstadı Cool
Bul
Alıntı
#14
Browser Nesneleri
[hide]
Browser’ın Javascript dilinde adı Navigator’dır. Ziyaretçinin Browser programı ister Netscape Navigator olsun, isten Internet Explorer olsun, Javascript için Navigator’dır; nesnelerine de Navigator Nesneleri denir. Bunların başında, Browser’ın pencereleri ve Çerçeveler gelir.
Pencere (window)

Şu ana kadar yazdığımız bir çok Javascript kodunda Navigator penceresinin bazı özelliklerini kullandık: width (genişlik), height (yükseklik), toolbar (araç çubuğu) gibi. Şimdi bu özellikleri toplu olarak sıralayalım:

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

(Evet-Hayır anlamına değer alan özellikleri 1 ve 0 ile belirtebileceğiniz gibi yes (evet) ve no (hayır) ile de belirtebilirsiniz.)
Javascript’in yeni Navigator penceresi açma metodu, window.open() şeklinde yazılır:
yeniPencere = window.open(“yenisayfa.htm”, “YeniPencereninAdı”, “toolbar=1, menubar=yes, resizable=no”)
Burada, yeni pencereye vermek istediğiniz adın tek kelime olduğuna, özelliklerin bir çift-tırnak içinde toplandığına dikkat edin.

Navigator pencereleri, xxxx.close() metodu ile kapatılır. xxxx yerine açık pencerenin adını yazmanız gerekir. Aksi taktirde Javascript komutunu icra ettiğiniz pencerenin kendisi (yani Browser) kapanır. (Bazı Browser’ların bazı sürümleri Javascript tarafından açılmamış Navigator pencerelerinin Javascript ile kapatılmasına izin vermezler.)
Bu nesnenin ve her iki metodun da kullanımını daha önce gördük. Mevcut bir HTML belgesinin adını vermeden, yeni pencereyi açtırıp, içine Belge nesnesini kullanarak HTML komutları yazdırmayı, aşağıda Belge Nesnesi bölümünde ele alacağız.

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.

Şu kısa kodu browser.htm adıyla kaydeder ve farklı Browser’larla açarsanız, Netscape ve IE hakkında bilgileri bir kutu içinde görebilirsiniz:

Kod:
<HTML>
<HEAD>
<SCRIPT LANGUAGE = "JavaScript">
function siziTaniyalim () {
       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)         
      }
</SCRIPT>
<BODY>
<H1>Browser’ınızı Tanıyor Musunuz?</H1>
<FORM>
<INPUT Type="button" Value="Browser Hakkında Bilgi Ver" OnClick="siziTaniyalim()"
</INPUT>
</FORM>
</BODY>
</HTML>

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)
return window.confirm(mesaj)
return window.prompt(mesaj, varsayılanCevap)

Bu üç kutunun çeşitli kullanım şeklini, başka vesilelerle, 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, tasarım açısından kolaylık sağlar. Bununla birlikte halâ bazı Web ziyaretçilerinin çerçeveden hoşlanmadıkları da gerçektir.
Çerçevelerin, Navigator açısından nasıl bir hiyerarşı işlediğini daha önce gördük. Javascript açısından her bir çerçeve bir pencere sayılır; bunlara atıfta bulunurken şu adlandırma uygulanı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.

Daha önce de belirttiğimiz gibi, Javascript, bir parent (ebeveyn) Frameset’in yavru çerçevelerini 0’dan itibaren numaralar. Yani, sayfanızda iki çerçeveniz varsa, birincisi “parent.frames[0]” ikincisi ise “parent.frames[1]” adıyla bilinir. Herhangi bir çerçevenin içeriğini dinamik biçimde belirlemenin bir örneğini yukarıda gördük. Burada write() metodunu kullanarak, aynı işi nasıl yapabileceğimizi ele alalım.
Şimdi, iki çerçeveli bir Frameset için şu HTML kodunu “anacerceve.htm” adıyla kaydedin:

Kod:
<html>
<head>
<title>Dinamik Cerceve</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
</head>
<frameset cols="40%,*">
<frame SRC="doc1.htm" NAME="cerceve1">
<frame SRC="doc2.htm" NAME="cerceve2">
</frameset>
<noframes>
<body>
</body>
</noframes>
</frameset>
</html>
Sonra, bu Frameset’in çağrıda bulunduğu “doc1.htm” olarak, şu kodu kaydedin:
<html>
<head>
<title>Cerceve 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<script LANGUAGE="JavaScript1.2">
<!-- Javascript kodunu eski sürüm Browserlardan saklayalim
//fonksiyonumuzu tanimlayalim
function belgeYazdir()
      {
parent.frames[1].document.clear();
parent.frames[1].document.write("<HTML><HEAD>" +
       "<TITLE>Dinamik Güncelleme Örnegi</TITLE>");
parent.frames[1].document.write(" </HEAD><BODY BGCOLOR=\"" +
       document.form1.bginput.value + "\">");
parent.frames[1].document.write("<H1>Güncellenmiş sayfa</H1>");
parent.frames[1].document.write("Bu sayfayı güncelleştiren unsur:" + document.form1.input1.value);
parent.frames[1].document.write("</BODY></HTML>");
parent.frames[1].document.close();
      }
// -->
</script>
</head>
<body>
<form NAME="form1">
<input type="hidden" name="bginput" value="white">
<p><input TYPE="text" NAME="input1" size="20"></p>
<p>Bir zemin rengi seçiniz:<br>
<input TYPE="radio" NAME="radio1" VALUE="white" CHECKED
onClick="document.form1.bginput.value=&quot;white&quot;">Beyaz<br>
<input TYPE="radio" NAME="radio1" VALUE="red"
onClick="document.form1.bginput.value=&quot;red&quot;">Kırmızı<br>
<input TYPE="radio" NAME="radio1" VALUE="blue"
onClick="document.form1.bginput.value=&quot;blue&quot;">Mavi<br>
<input TYPE="radio" NAME="radio1" VALUE="green"
onClick="document.form1.bginput.value=&quot;green&quot;">Yeşil<br>
<br>
<input TYPE="button" VALUE="Çerçeve 2'yi güncelle" onClick="belgeYazdir()"> </p>
</form>
</body>
</html>
“doc2.htm” ise oldukça basit:
<html>
<head>
<title>Çerçeve 2</title>
</head>
<body>
<p>Bu sayfa güncellenecek</p>
</body>
</html>

Burada, document.write() metoduyla, hedef çerçevemiz olan iki numaralı çerçevenin (parent.frames[1]) birinci çerçevedeki formdan aldığımız unsurları kullanarak, zemin rengini ve içeriğini değiştiriyoruz. Buradaki örnekten hareketle, çerçevelerinizin içeriğini, bir diğer çerçevede yapılan tercihlere, yapılan arama sonuçlarına veya veri-yönlendirmeli sonuçlara ayırabilir ve dinamik olarak değiştirebilirsiniz.

Belge (Document) Nesneleri

Web sayfasının Javascript dilinde adı Belge’dir. İster metin, ister sadece Javascript kodu, ister sadece grafik içersin, <HTML> diye başlayan ve </HTML> diye biten herşey, Javascript gözüyle belgedir.

Javascript’in gözüyle dünyaya bakarsanız, dünyayı içiçe kaplardan ibaret görürsünüz. En dış kabın adı, Navigator; içindeki ikinci kabın adı Belge’dir. Belge’nin içinde ise, yine birbirinin içinde olmak şartıyla, HTML ile oluşturulan nesneler vardır. Sayfanızda örneğin faturaForm adlı bir form varsa, bu Javascript için document.faturaForm demektir, ziyaretçinin doldurduğu bilgilerle Server’a gönderilmesi için document.faturaForm.submit() metodunun kullanılması gerekir. Bu bölümde bir belgedeki Javascript kodu ile yeni bir belge oluşturup, ya içinde bulunduğumuz sayfanın yerine, ya da yeni bir pencereye yollama yolunu ve HTML nesnelerinin özelliklerini Javascript aracılığıyla nasıl etkileyeceğimize bakalım.

Javascript, içinde bulunduğu HTML belgesi yerine sizin arzu ettiğiniz başka bir belgeyi görüntülüyebilir. Bu belgenin içeriği, ziyaretçinin bir önceki sayfada yaptığı bazı tercihleri yansıtabilir; ziyaretçinin Browser türünden veya kullandığı bilgisayar işletim sisteminin türünden kaynaklanabilir. Aşadığıdaki örnekte, Javascript ziyaretçinin Browser türünü algılayıp, ona göre bir içerik sunuyor. Bu içerik burada olduğu gibi sadece bir hoşgeldin mesajı olmayabilir, Browser türüne uygun içerik olabilirdi. Bu dosyayı, yenibelge01.htm adıyla kaydedip, Browser’ınızda açarsanız, Browser’ınıza uygun mesajı göreceksiniz:

Kod:
<html>
<head>
<title>Yeni Belge</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
</head>
<SCRIPT LANGUAGE = "JavaScript1.2">
var Browser = navigator.appName
document.open()
if (Browser == "Netscape") {
document.write("<h2>Sayın <a href='http://home.netscape.com'>Netscape</a> kullanıcısı</h2><p><p>")}
else {
if (Browser == "Microsoft Internet Explorer") {
document.write("<h2>Sayın <a href='http://www.microsoft.com'>Microsoft</a> Internet Explorer kullanıcısı</h2><p><p>") }
else {
document.write("<h1>Hoş geldiniz! Ne tür Browser kullandığınızı anlayamadık!</h1><p><p>")
}
}
document.write("Sitemize hoş geldiniz.<p><p>")
document.write("Kullandığınız Browser türünü anladık diye şaşırdınız mı?")
document.close()
</SCRIPT>
<body>
</body>
</html>

Burada olduğu gibi, yeni belge mevcut belgenin yerine açılmak yerine, Frameset ile oluşturduğunuz çerçeveli bir sayfada arzu ettiğiniz bir çerçevenin içeriğini de oluşturabilir. Bunun için, yukarıda olduğu gibi document.write() metodu yerine,

parent.form[0].document.write()

metodunu kullanmanız gerekir. Burada, birinci çerçeve için köşeli parantez içine 0, ikinci çerçeve için 1, üçüncü çerçeve için 2 yazmanız gerektiğini daha önce belirtmiştik.

Javascript ile oluşturacağınız yeni belge, tamamen başka ve hatta yeni bir Browser penceresi içinde de görüntülenebilir. Bu teknikten, sayfalarınızda açıklayıcı bilgi ve yardım bilgisi vermekte yararlanabilirsiniz; hatta reklam amacıyla bile bu yöntemi kullanabilirsiniz. Aşağıdaki kodu, yenibelge02.htm adıyla kaydederseniz, ziyaretçinin Mouse işaretçisini bağlantılı gibi görünen kelimelerin üzerine getirdiğinde, Javascript anında yeni bir pencere açacak, ve içine arzu ettiğiniz metni yazacaktır:

Kod:
<html>
<head>
<title>Yeni Belge</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<script LANGUAGE="JavaScript1.2">
function acYardim01(){
yeniPencere = window.open("", "yardim01", "height=300,width=400")
yeniPencere.document.write("<h2>Bu pencerede Konu 1 ile ilgili ek bilgiler olacak</h2>")
yeniPencere.document.write("<p>Tabii birisi zahmet edip, yazarsa!</p>")
yeniPencere.document.write("<p><font size=-1><a href=\"javascript:self.close()\">Mevzuya Donmek Icin Tiklayin</a></font>")
yeniPencere.document.close()
}
function acYardim02(){
yeniPencere = window.open("", "yardim02", "height=300,width=400")
yeniPencere.document.write("<h2>Bu pencerede Konu 2 ile ilgili ek bilgiler olacak</h2>")
yeniPencere.document.write("<p>Tabii birisi zahmet edip, yazarsa!</p>")
yeniPencere.document.write("<p><font size=-1><a href=\"javascript:self.close()\">Mevzuya Donmek Icin Tiklayin</a></font>")
yeniPencere.document.close()
}
function acYardim03(){
yeniPencere = window.open("", "yardim03", "height=300,width=400")
yeniPencere.document.write("<h2>Bu pencerede Konu 3 ile ilgili ek bilgiler olacak</h2>")
yeniPencere.document.write("<p>Tabii birisi zahmet edip, yazarsa!</p>")
yeniPencere.document.write("<p><font size=-1><a href=\"javascript:self.close()\">Mevzuya Donmek Icin Tiklayin</a></font>")
yeniPencere.document.close()
}
</script>
</head>
<body>
<h1>Sitemizdeki yeni konular aşağıdadır:</h1>
<h2>Konular hakkinda daha fazla bilgi almak icin Mouse isaretcisini konunun uzerine getirin.</h2>
<p><a HREF="#" onMouseOver="acYardim01()">Yeni konu 1</a></p>
<p><a HREF="#" onMouseOver="acYardim02()">Yeni konu 2</a></p>
<p><a HREF="#" onMouseOver="acYardim03()">Yeni konu 3</a></p>
</body>
</html>


Böyle bir pencerede görüntülemek istediğiniz metin, Javascript fonksiyonu ile yazdırılamayacak kadar uzun ise, yeni pencere açtırma kodunuzda şöyle bir değişiklik yapabilirsiniz:


Kod:
function acYardim01(){
yeniPencere = window.open("yardim01.htm", "yardim01", "height=300,width=400")
}


Bu durumda, Javascript, yeni pencerenin içeriğini kendisi document.write() metodu ile kendisi yazmayacak, pencere içeriği olarak örneğin yardım01.htm adlı dosyayı görüntüleyecektir.
Bu konuyu kapatmadan; yukarıdaki örnek kodda, Javascript’in yeni pencerenin içeriğini kendisi yazdığı acYardim01 adlı fonksiyonda kullandığımız şu koda dikkat edin:


Kod:
yeniPencere.document.write("<p><font size=-1><a href=\"javascript:self.close()\">Mevzuya Donmek Icin Tiklayin</a></font>")

yeniPencere.document.close()


Burada kullandığımız yerel Javascript kodundaki “self.close()” metodu, Javascript’e belgenin içinde bulunduğu kendi penceresini kapattırmaktadır. (self, kendisi anlamına geliyor.)

Kodumuzu biraz daha geliştirebiliriz. Sözgelimi, MouseOver olayı ile açtığımız ikinci penceresi, MouseOut olayı ile kapatabiliriz. Bunun için, tabiî önce yeni pencere açan fonksiyonlarımızdan sonra bir de pencere kapatan fonksiyon yazmamız gerekir:

Kod:
function kapat() {
yeniPencere.close();
      }


Sonra, yardım pencerelerini açtığımız onMouseOver yönlendirisiyle ilgili kodun hemen arkasına, bu kez kapat() fonksiyonunu çağıran onMouseOut yönlendiricisini yazacağız. Bu örnekteki üç satırdan biri, şöyle olabilir:

Kod:
<p><a HREF="#" onMouseOver="acYardim01()" onMouseOut="kapat()">Yeni konu 1</a></p>

Bu durumda, açılan yeni pencerelerin içindeki kendi kendisini kapatan kodu iliştirdiğimiz satırı tıklama imkanınız hiç olmayacağı için (neden?), bu kodun satırını, acYardim01() diğer fonksiyonlarımızdan çıkartmamız yerinde olur. Bu yeni şekliyle kodunuzu yenibelge03.htm adıyla kaydedebilirsiniz.



[/hide]

Wink Web Üstadı Cool
Bul
Alıntı
#15
 Form Nesneleri
[hide]
Javascript’in icad edilme nedenlerinin başında, ziyaretçi ile etkileşme gelir; ziyaretçi ise Web tasarımcısı olarak size bilgileri ancak ve sadece Form ile ulaştırabilir. Bu sebeple Javascript açısından HTML’in en önemli nesneleri, Form nesneleridir.

HTML, kendi formunu kendisi oluşturur; bu bakımdan Javascript’e bir görev düşmez. Javascript formdaki bilgilerin işlenmesi sırasında devreye girer. Önce Form nesnesinin özelliklerini hatırlayalım:

Kod:
<FORM
          NAME=formun_adı
          ACTION=CGI_programı
          ENCTYPE=kodlama_türü
          METHOD= GET veya POST
          TARGET= pencere_adı
          onSubmit=”metodun_adı”>
</FORM>


Bu durumda, tam teşekküllü bir form etiketi şöyle olabilir:

Kod:
<FORM NAME=”form1” ACTION=”http://www.kitleseldikta.com/cgi-bin/form.pl” METHOD= GET></FORM>

Bu, gerçek bir bilgi derleme formu örneği. Fakat Form nesnesi, Server’a bilgi göndermek amacı dışında da kullanılabilir; bir form nesnesi olan IPNUT’un bir türü olan düğmeleri (button) farklı amaçlı Javascript fonksiyonlarına bağlanabilir.

Form, gerçek amacıyla kullanıldığı durumlarda, Javascript, formdaki bilgilerin Server’a gönderilmeden önce sınanmasını sağlayabilir. Bunun bir örneğini, ziyaretçinin telefon numarasını doğru biçimde yazıp yazmadığını sınadığımız kodda görmüştük. Burada kısaca, Javascript açısından form nesnesinin unsurlarını nasıl tanıyabileceğimizi ele alalım. Benzeri sınama kodları yazarken, bu unsurlara referans yapacağınız zaman, bu unsurların adlarını ve değerlerini bulma yöntemini bilmeniz gerekir.

Form etiketi içindeki bütün unsurlar element adlı dizi-değişkenin içine yazılırlar ve içerikleri form.element[i].value (i, unsurun sıra numarası olmak üzere) metoduyla bilinirler. Diyelim ki “bilgiForm” adlı formunuzun birinci unsuru “<INTPUT TPYE=”text” NAME=”musteriAdi”...> şeklinde bir etiket. Bu etiketin oluşturacağı kutuya ziyaretçinin yazacağı isim, Javascript açısından bilgiForm.elements[0].value veya bilgiForm.musteriAdi.value şeklinde bilinir.

Formun unsurları

Şimdi bir form içeren sayfa örneği yapalım; Javascript ile formun tamamen doldurulmuş olup olmadığını sınayalım. Böylece ziyaretçinin göndereceği formun eksik olduğunu anlamakta geç kalmamış oluruz. Aşağıdaki kodu, form01.htm adıyla kaydedip, Browser’da bir yerini eksik olarak duldurun ve Gönder düğmesini tıklayın.

Kod:
<html>
<head>
<title>Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<script LANGUAGE="JavaScript1.2">
function denetle() {
var num = document.form1.elements.length
var dogruMu = true
       for (var i=0; i<num; i++) {
              if ((document.form1.elements[i].value == null ||
               document.form1.elements[i].value == "") &&
               (typeof document.form1.elements[i] != 'submit' ||
               typeof document.form1.elements[i] != 'reset'))
{
                     dogruMu = false
                     alert("Formdaki " + document.form1.elements[i].name +
                           " alanı doldurulmamış bulunuyor. Lütfen doldurunuz!")
                     break }
             }
       return dogruMu
      }
// -->
</script>
</head>
<body>
<form name="form1" method="POST" onSubmit="return denetle()">
<h2>Abone Formu</h2>
<p>Adınız:<br>
<input type=text size=25 maxlength=256 name="Abone_Adı"><br>
İlgi Alanı:<br>
<input type=text size=25 maxlength=256 name="İlgi"><br>
<strong>Oturduğunuz İl: <br></strong>
<input type=text size=25 maxlength=256 name="İl"><br>
<strong>Elektronik Posta Adresiniz: <br></strong>
<input type=text size=25 maxlength=256 name="ElektronikAddress"></p>
<input type=submit value="Gönder"> <input type=reset value="Sil">
</form>
</body>
</html>


Daha önceki örneklerden hatırlıyorsunuz; formun içerdiği bilgilerin gerçekten Server’a gitmesi için gerekli “submit” olayının önünü kesebilmek için kullandığımız “onSubmit” olayına bağlı fonksiyonun “return” ifadesiyle, kendisini görevlendiren olay-yönlendiriciye bir sonuç bildirmesini sağlamak zorundayız. Fonksiyonu biraz irdelersek, başta tanımladığımız Boolean değişkeni “dogruMu” bize doğru-yanlış türü bir sonuç vermek zorunda; ziyaretçi herşeyi doldurmuşsa (yani her alana hiç değilse bir harf yazmışsa!) bu değişkenin değeri değişmiyor. Fakat “if” sorgulamasında düğme olmayan unsurlardan birinin değeri boşsa (yani null veya "" ise) değişkenin değeri false olacaktır. “if” sorgulamasını kaç kere yapacağız? Bu sayıyı, belgenin form elemanlarının yazıldığı dizi-değişkenin büyüklüğünden (document.form1.elements.length) öğreniyoruz, ve num adlı değişkene yazıyoruz. Dolayısıyla Forma yeni alanlar da eklesek, fonksiyonu yeniden yazmamıza gerek yok. Sonra, i adını verdiğimiz bir sayaç, num değişkeninin değerine eşit oluncaya kadar, elements dizi-değişkenindeki (submit ve reset dışındaki) bütün elemanların değerlerin boş olup olmadıklarına bakıyoruz. Bu değerlerden herhangi biri boş ise, if döngüsü o noktada kesiliyor ve ziyaretçiye bir uyarı kutusu ile formu doldurmasını hatırlatıyoruz. Bu arada uyarı kutumuz, boş olan alanın adını da bildiriyor. Bunu, if döngüsü kesildiği andaki i değişkeni değerindeki form elemanının adını alarak yapıyoruz.

Buradaki örnekte düğme (button) nesnesinin Click olayını onClick yönlendiricisi ile yakaladık. Form nesnesindeki diğer nesnelerden metin (text) ve metin alanı (textarea) nesneleri, onBlur, onChange, onFocus, onSelect yönlendiricileri ile; işaret kutusu (checkbox) ve radyo düğmesi (radio) onClick yönlendiricisi ile, seçme listesi (select) onBlur, onChange ve onFocus yönlendiricileri ile fonksiyon çağırabilirler.
Javascript fonksiyonlarımızda Form nesnesinin işaretleme kutularından hangisinin işaretlenmiş olduğunu belirlemek işaretli unsurun değerlerini bulabilmek, değiştirebilmek veya başka bir yerde kullanabilmek için önem taşır. Browser, ele aldığı bir HTML sayfasındaki Form nesnesinin unsurlarını ve burada CHECKBOX nesnesini bir dizi-değişkenin içinde tutar; bunlardan işaretlenmiş olanın CHECKED (işaretli) özelliğini True (doğru) yapar. Bu durumdan yararlanarak istediğimiz kutunun işaretli olup olmadığını sorgulayabiliriz. Burada nesnenin “.value” özelliği işe yaramaz; çünkü kutu işaretli olsa da olmasa da “.value” özelliği aynıdır. İşaretleme kutularında bilmek istediğimiz husus, bu nedenle işaretli olup olmadıklarıdır. Örneğin, sayfamızda, “form1” adlı bir formda “isaret01” adlı bir işaret kutusu varsa, bu kutunun işaretli olup olmadığını şu if döngüsü sınayabilir:
if (document.form1.isaret01.checked) {
.......
Bu ifade, kutu gerçekten işaretli arzu ettiğimiz bir işi yapar, değilse yapmaz.

Radyo Düğmesi (Radio)

Ziyaretçinin bir HTML sayfasında bir çok şık’tan birini seçmesini sağlayan radyo düğmesi (radio) isimli işaretleme yönteminde ise, aynı adı taşıyan bütün radyo düğmelerinden biri işaretlenince, Browser diğerlerini işaretlenmemiş hele getirir; dolayısıyla bu düğmenin değeri (.value özelliği) kullanılabilir. Aşağıdaki kodu yazar ve radyo.htm adıyla kaydederek, Browser’da açarsanız, seçtiğiniz radyo düğmesinin değerinin uyarı kutusunda kullanıldığını göreceksiniz.

Kod:
<HTML>
<HEAD>
<TITLE>Radyo Dugmesi Örnegi</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=windows-1254">
<SCRIPT LANGUAGE = "JavaScript1.2">
function radyoDegeri(radyoNesnesi) {
var deger = null
for (var i=0; i<radyoNesnesi.length; i++) {
if (radyoNesnesi[i].checked) {
deger = radyoNesnesi[i].value
break }
}
return deger
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="form1">
<p><input type=radio name="sanatci" value="Türkü">Neşet Ertaş</p>
<p><input type=radio name="sanatci" value="Şarkı">Zeki Müren</p>
<p><input type=radio name="sanatci" value="Pek anlamadım!">Sezen Aksu</p>
<input type=button value="Ne tür müzik seviyorum?" onClick="alert(radyoDegeri(this.form.sanatci))">
</FORM>
</BODY>
</HTML>


HTML kuralları gereği, bir grup oluşturan radyo düğmeleri aynı adı taşırlar. Burada “this” anahtar kelimesi ile içinde bulunduğumuz yani “bu formun,” “sanatcı” dizi-değişkeninin tümüyle fonksiyona gönderilmesini sağlıyoruz. “radyoDegeri” adlı fonksiyonumuz zaten böyle bir öbek bilgi bekliyor ve aldığı tüm radyo düğmesi nesnesine “radyoNesnesi” adını verip, önce büyüklüğüne bakıyor. Bir dizi-değişkenin büyüklüğü eleman sayısıdır; ki bu bizim örneğimizde üçtür. “i” sayacı 0, 1 ve 2 değerleri için sınanıyor ve bunlardan birinin işaretli olması bekleniyor. İşaretli radyo düğmesi bulunduğu anda değeri “deger” değişkenine yazılıyor ve döngü kesiliyor (break). Gerisi, uyarı kutusunun “değer” değişkeni ziyaretçiye göstermesinden ibaret.

Select

Form nesnelerimizden bir diğeri ise SELECT etiketiyle oluşturduğumuz seçme kutusu. NAME, SIZE, ve MULTIPLE özelliklerine sahip olan bu nesne, onBlur, onChange, onFocus olay-yönlendiricileri ile kullanılabilir. SELECT nesnesinin değeri, kendisinin ayrılmaz parçası olan OPTION etiketinin VALUE özelliğinden gelir. Yukarıdaki radyo.htm kodunu, aşağıdaki şekilde değiştirip, sec01.htm adıyla kaydedin:

Kod:
<HTML>
<HEAD>
<title>Seçme Kutusu Ornegi</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<SCRIPT LANGUAGE = "JavaScript1.2">
function secDegeri(secNesnesi) {
return secNesnesi.options[secNesnesi.selectedIndex].value
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="form1">
<p><SELECT NAME="sanatci" SIZE=1>
<OPTION value="Türkü">Neset Ertas</OPTION>
<OPTION value="Sarki">Zeki Müren</OPTION>
<OPTION value="Pek anlamadim!">Sezen Aksu</OPTION></P>
<input type=button value="Ne tür müzik seviyorum?" onClick="alert(secDegeri(this.form.sanatci))">
</FORM>
</BODY>
</HTML>


Burada ziyaretçi açısından seçme işlemi, seçme kutusunun sağındaki seçme okuna basarak yapılıyor; fakat bizim açımızdan da önemli bir değişiklik var. Seçilen unsur, SELECT nesnesinin dizi-değişkenine değil, “selectedIndex” adlı endeksin değer (.value) özelliğine yazılıyor. Dolayısıyla, bir if döngüsü ile arama yapmak gerekmiyor; bu değeri uyarı kutusuna sadece ayıklama işlemiyle belirleyip geri gönderiyoruz. Burada dikkat edeceğiniz husus, fonksiyona verilen “bu form” nesnesinin “sanatcı” adlı SELECT nesnesinin bilgi kümesi içinde sadece biri, “selectedIndex” adlı endekse sahiptir. Fonksiyon bu bilgi kümesini “secNesnesi” adıyla ele alıyor ve içindeki “options” dizi-değişkenin ziyaretçinin seçtiği ve dolayısıyla sıra numarası “selectedIndex” olarak işaretlenmiş olanın değerini (.value) alıyor ve bunu doğruca Uyarı kutusuna gönderiyor.

Fakat, HTML’den biliyorsunuz ki, SELECT etiketine MULTIPLE anahtar kelimesini koyarak, ziyaretçinin birden çok seçme yapmasına izin verebilirsiniz. Bu durumda “selectedIndex” işaretini kullanabilir miyiz? Hayır; bu bir değişken olduğuna göre sadece bir değer (seçilen ilk OPTION’ın sıra numarasını) tutacaktır. Fakat SELECT nesnesinin bir de “selected” özelliği vardır ki içinde seçilen bütün OPTION’ların numarası yazılıdır. Son kod örneğimizi bu kez şöyle değiştirelim ve sec02.htm adıyla kaydedelim.

Kod:
<html>
<head>
<title>Seçme Listesi Ornegi</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<SCRIPT LANGUAGE = "JavaScript1.2">
function secDegeri(secilenIsim) {
var liste = ""
for (var i=0; i<secilenIsim.length; i++) {
       if (secilenIsim.options[i].selected) {
       liste += secilenIsim.options[i].text + "<p>"
             }
      }
yeniPencere = window.open ("", "Seçtikleriniz", "height=200, width=200")
yeniPencere.document.write("<H2>Şu şarkıları seçtiniz:</H2><P><P>")
yeniPencere.document.write(liste)
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="form1">
<p><SELECT NAME="sanatci" SIZE=4 MULTIPLE>
<OPTION>Neset Ertas</OPTION>
<OPTION>Zeki Müren</OPTION>
<OPTION>Sezen Aksu</OPTION>
<OPTION>Kayahan</OPTION>
<OPTION>Mustafa Sandal</OPTION>
<OPTION>Müşerref Tezcan</OPTION>
</P>
<input type=button value="Hangilerini seçtim?" onClick="secDegeri(this.form.sanatci)">
</FORM>
</BODY>
</HTML>


Burada seçilenlerin listesini yeni bir pencerede açtığımız belgeye yazdırıyoruz. Bu size, bir formun unsurlarını elde ettiğiniz listeyi daha sonraki bir sayfada, HTML unsuru olarak kullanabileceğinizi gösteriyor. Kodu kısaca irdelersek; fonksiyonumuz, for döngüsünün içindeki if döngüsü ile, kendisine ulaşan bilgi kümesinde “selected” olarak işaretlenenleri seçmekte ve bunların metnini (.text), liste değişkenine, aralarına <P> etiketi koyarak yazıyor.

Password

Form nesnesinin Javascript yoluyla mutlaka kullanmak isteyeceğiniz bir ögesi, Password (Parola) nesnesidir. Ziyaretçinin, Password olarak nitelediğiniz INPUT kutusuna yazdığı metin, kendisine * olarak görünür; fakat Browser ve dolayısıyla Javascript bu metni bilir.
Javascript’in ilk sürümlerinde Password nesnesinin değeri Javascript tarafından bilinemezdi; fakat 1.1 sürümü ile Javascript bu nesnenin de bütün kontrolünü ele geçirdi. Aşağıdaki kodu parola.htm adıyla kaydederseniz, Password nesnesinin de değerini elde ederek, kullanabileceğinizi göreceksiniz.

Kod:
<html>
<head>
<title>Parolayı Görüntüle</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<SCRIPT LANGUAGE = "JavaScript1.2">
function parolaNedir()
      {
alert("\nisim --->" + document.form1.gizli.name +
"\ndeger --->" + document.form1.gizli.value)
      }
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form1">
<BR>
<B>Lütfen parola olarak herhangi bir kelime yazıp düğmeyi tıklayın:</B>
<BR><BR>
<INPUT TYPE="password" NAME="gizli" SIZE="15">
<INPUT TYPE="button" NAME="goster" VALUE="Metni görmek için tiklayin"
onClick="parolaNedir()">
</FORM>
</BODY>
</HTML>


Burada herhangi bir form unsuru gibi, form1’in “gizli” adlı nesnesinin değerini alarak Uyarı kutusunda gösteriyoruz. Gerçek bir programda, bu değeri bir liste ile karşılaştırarak, kullanabilirsiniz. Ancak bu karşılaştırma işleminin ziyaretçinin bilgisayarında değil, Server’da yapılması gerekir; bunun için Password nesnesinin değerinin bir CGI programında veya ASP uygulamasında değerlendirilmesi gerekir. Browser’lar bunu bildikleri için Password nesnesini daima Server’a yollarlar. Bunu sınamak istiyorsanız, yukarıdaki kod Browser’ınızda açıkken, düğmeyi tıklamayın, klavyede Enter tuşuna basın!

Gizli Nesneler (Hidden)

HTML’in INPUT etiketiyle sayfanıza türü Hidden (Gizlenmiş) olan değişkenler koyabilirsiniz. Hidden etiketi, NAME ve VALUE özelliklerine sahiptir. Bu etiketten, genellikle ziyaretçinin Form verilerini değerlendirirken, ziyaretçi sayfa değiştirdiği halde Server’da değeri sabit kalan değişken olarak yararlanabiliriz.


[/hide]
Wink Web Üstadı Cool
Bul
Alıntı
#16
Javascript Nesneleri
[hide]
Bu noktaya kadar ele aldığımız bütün nesneler, Javascript’e HTML ve Browser tarafından sunuluyordu. Fakat Javascript, kendi kendisine nesneler de oluşturabilir. Örneğin, Javascript bir alfanümerik değişkeni ele aldığı anda bu onun için bir String nesnesi olur; ve dolayısıyla, bir değişkenden öte bazı özellikler ve metodlar kazanır. Dizi-değişkenler de oluşturuldukları anda Array nesnesi olurlar; yeni özellikleri ve metodları olur.

String Nesnesi

Javascript kodunuzun ya HTML’in HEAD bölümünde genel nitelikli, ya da herhangi bir fonksiyonun içinde yerel nitelikli bir değişken tanımladığınız zaman bu türüne göre bir String (alfanümerik, karakter) değişken olur. Örneğin:

var kitabınAdi = “Gazap Üzümleri”
ifadesi bize içeriği “Gazap Üzümleri” olan bir değişken kazandırır. İçeriğinin niteliği nedeniyle bu değişken, String değişkendir. Fakat şu aşağıdaki ifadeye bakarsanız, Javascript’e yeni bir String nesnesi oluşturması için de emir verebiliriz:
var kitabinAdi = new String(“Gazap Üzümleri”)


“new,” (=yeni) hatırlıyorsanız, Javascript‘e yeni bir nesne oluşturması için verdiğimiz komuttu. Burada Javascript’e yeni bir String nesnesi oluşturmasını; bunun içeriğini “Gazap Üzümleri” yapmasını, ve bu nesneyi, “kitabinAdi” isimli değişkene atamasını söylüyoruz. değişken oluşturma açısından ikisi arasında hiç bir fark olmamakla birlikte, bu ikinci yöntem bize, alfanümerik değişkenlerin özel niteliğini, nesne olduklarını gösteriyor. Bu sayede alfanümerik değişkenlerin (yani String nesnelerinin) bazı ilave özelliklerinden yararlanabiliriz. Bu özelliklerin sık kullanılanlarını şöyle sıralayabiliriz:


length                     Nesnenin uzunluğunu belirtir. Örneğin kitabinAdi.length, bize 14 değerini verir.
charAt(i)                 i ile belirttiğiniz pozisyondaki karakteri verir. kitabınAdi.charAt(1) bize “a” değerini verir.
indexOf(nnn)           nnn ile belirttiğiniz karakterlerin String içinde ilk geçtiği konumun endeksini verir. kitabınAdı.indexOf(“za”) ifadesi, 2 değerini verir. (G, 0 olmak üzere saymaya başlayın!)
lastIndexOf(nn)        nnn ile belirttiğiniz karakterlerin String içinde geçtiği son konumun endeksini verir. kitabınAdi.lastIndexOf(“a”), bize 3 değerini verir.
substring(i,j)            String nesnesinin i’de başlayan ve j’de biten bölümünü verir. kitabinAdi.subtring(0,3) ifadesi bize “Gaz” değerini verir.
Bu özellikler, sadece bir alfanümerik değişken veya öğrendiğimiz yeni adıyla String nesnesinde değil, String olabilecek herhangi bir metinde de vardır. Örneğin “Gazap Üzümleri”.length, 14; “Gazap Üzümleri.charAt(1) ise “a” değerini verebilir.
String nesnelerinin kendilerine özgü metodları da vardır. Bunları da kısaca ele alalım:
.bold()                    Bağladığınız String nesnesini koyu yapar. Örneğin kitabınAdi.bold(), size “<B>Gazap Üzümleri</B>” metnini verir.
.fontcolor(“renk”)     String nesnesinin görüntülenme rengini belirler. Örneğin kitabınAdi.fontcolor(“red”) size “<FONT COLOR=”red”>Gazap Üzümleri</FONT>” değerini verir.
.fontsize(“ölçü”)       String nesnesinin görüntülenmesinde harf büyüklüğünü belirler. Örneğin kitabınAdi.fontsize(“24”) size “<FONT SIZE=”24”>Gazap Üzümleri</FONT>” değerini verir.
.italics()                  String nesnesinin itelik harfle görüntülenmesini sağlar. Örneğin kitabınAdi.italics() size “<I>Gazap Üzümleri</I>” değerini verir.
.toLowerCase()        String nesnesinin görüntülenmesi sırasında bütün harflerinin küçük harf olmasını sağlar. Örneğin kitabınAdi.toLowerCase () size “gazap üzümleri“ değerini verir.
.toUpperCase()         String nesnesinin görüntülenmesi sırasında bütün harflerinin büyük harf olmasını sağlar. Örneğin kitabınAdi.toLowerCase () size “GAZAP ÜZÜMLERİ “ değerini verir.

Javascript ile Dinamik HTML

Bu kadar uğraşıp, Javascript öğrenmemizin, iki amacı olabilir; ziyaretçi ile etkileşme ve HTML yapılması imkanı bulunmayan görsel etkileri oluşturma. Ziyaretçinin Form yoluyla size vereceği bilgileri, yapacağı tercihleri ve bunları tutan değişkenlerin değerlerini nasıl belirleyeceğimizi ve kullanabileceğimizi ana hatlarıyla gördük. Buraya kadar edindiğimiz bilgilerden yararlanmak ve bunları sayfalarımızın içeriğine bağlı olarak gerçek durumlara uygulamak tabir yerinde ise kolay. Javascript’in Browser ve HTML olaylarını (MouseOver, Click, Change gibi) yönlendirmekte kullandığı yönlendiricilerinden (onMouseOver, onClick, onChange gibi) yararlanarak, sayfalarımızda belki de Javascript’i icad edenlerin hiç de niyet etmedikleri bir tarzda da kullanabiliriz. Bu bölümde Javascript ile oynayabileceğimiz görsel oyunları veya Javascript-Layer ve Javascript-CSS ilişkilerini ele alacağız.

Fakat önce kısaca Dinamik HTML’in (DHTML) imkan ve yeteneklerinden söz edelim. HTML ile DHTML arasındaki fark, ikincisinin stil komutları, iki boyutlu tasarıma üst üste yığılan katmanları ekleyerek üçüncü boyutu getiren ve veritabanı ile çoklu-ortam ürünleri ile klasik Web unsurları arasında bağ kuran teknolojiler içermesidir. DHTML, HTML’e ek etiket getirmez; mevcut etiketlere ilave özellik ve nitelik kazandırır. Bunu CSS (Cascading Style Sheets) teknolojisi sağlar. Ayrıca DHTML yoluyla, HTML’in bilinen etiketlerinin bilinen özellikleri, ziyaretçinin sayfanızda yapacağı tercihlere, tutum ve davranışlarına göre dinamik olarak değişmesini programlayabilirsiniz. Başka bir deyişle, DHTML, HTML etiketlerinin program yoluyla dinamik hale getirilmesi demektir.

Browser dünyasında IE, bir HTML sayfasındaki bütün unsurların programlanmasına imkan veren ve adına Element Modeli denen bir yöntem uygulayabilir. Fakat bunu yaptığınızda, bu kez Netscape’in bu modeli tanımayan yorum tarzına takılabilirsiniz. Başka bir ifadeyle, IE için bir sayfanın tümü, programlandığı belirtilmeden programlanabilir. Bir örnek verelim. H1 etiketini tanırsınız ve sürekli kullanırsınız; H1 olarak etiketlenmiş bir metnin MouseOver olayı ile ilgisi olamaz, diye düşünebilirsiniz. O halde şu kodu herhangi bir sayfaya yerleştirin:

Kod:
<H1 onMouseOver=”this.style.color = ‘red’;” onMouseOut=”this.style.color = ‘black’;” >Beni Kırmızı Yap!</H1>

Sonra bu sayfayı önce IE ile sonra Netscape ile açın; her ikisinde de Mouse işaretçisini “Beni Kırmızı Yap!” kelimelerinin üzerine getirin ve geri çekin. Bu deneyden sonra hayalkırıklığına kapılmayın; aynı etkiyi Netscape ile de sağlamanız mümkün; fakat bunu Javascript programı ile yapabilirsiniz.

Şimdi bu tür Javascript programlarının örneklerini görelim.

Düğme Grafiği Animasyonu

Cascading Style Sheets (Yığılmalı Stil Sayfaları) denen ve HTML’in kendi önceden-tanımlanmış stil etiketlerinin (H1, H2, P gibi) biçimini değiştirmek dahil, kendi stil etiketlerinizi tanımlamanıza imkan veren ek imkana geçmeden önce, şu ana kadar öğrendiğimiz Javascript komutlarını ve HTML olaylarını kullanarak, kendimize bir Anime (Hareketli) İleri-Geri düğmesi içeren sayfa yapalım. Hatırlayacaksınız, HTML’in Anchor etiketi, Mouse işaretçisinin üzerine gelmesi (MouseOver) ve geri çekilmesi (MouseOut) olaylarına karşı hassastı; ve biz iki olayı onMouseOver ve onMouseOut yönlendiricileri ile istediğimiz fonksiyona bağlıyabiliyorduk. Aşağıdaki kodun mantığı, buna dayanıyor; önce fonksiyonumuzda kullanmak üzere dört değişken tanımlıyoruz ve bunlara düğmelerimizin adlarını ve boyutlarını değer olarak veriyoruz. Bu alıştırmayı yapmaya başlamadan önce aynı boyda dört grafiğiniz olması gerekir: (1) İleri düğmesinin Mouse işaretçisi üzerine geldiği sıradaki görüntüsü (ileri_on.gif), (2) İleri düğmesinin Mouse işaretçisi üzerinden çekildiği sıradaki görüntüsü (ileri_out.gif), (3) Geri düğmesinin Mouse işaretçisi üzerine geldiği sıradaki görüntüsü (geri_on.gif), ve (4) Geri düğmesinin Mouse işaretçisi üzerinden çekildiği sıradaki görüntüsü (geri_out.gif). Konumuz grafikçilik değil, ama düğme grafiklerinizde yazı ve diğer unsurların yerlerinin aynı olması ve “on” ve “out” türleri arasında dikkat çekici bir derinlik (boyut) farkı bulunması yerinde olur.

“dugmeDegistir” isimli fonksiyonumuz, onMouseOver ve onMouseOut yönlendiricilerinden iki küme bilgi almaktadır: işlemin ileri mi geri olduğuna ilişkin “ileri” veya “geri” kelimesini ve bu bu halde kullanması gereken değişkenin adını. Fonksiyonumuz, bu bilgileri kullanarak kullanacağı değişkenin adını elde edecektir. Bunu eval() fonksiyonu ile yapıyoruz. Hatırlayacaksınız, eval() ile, Javascript’in, bir kaç değişkenin içeriğini değerlendirip, bize arzu ettiğimiz bir biçimde sunmasını sağlıyoruz. Burada eval(), “goruntuNesne” adını verdiğimiz değişken-değerini alacak (“goruntuNesne,” fonksiyonun onMouseOver veya onMouseOut’tan aldığı ikinci küme bilgi, yani ya “ileri_onDugme,” ya “ileri_outDugme,” ya “geri_onDugme,” ya da “geri_outDugme”) ve buna “.scr” metodunu harekete geçirecek kelimeyi ekleyecek. Bu metod ise fonksiyona, Javascript ‘e düğmenin kaynağını (source) bulması için yol gösterecek.

Aşağıdaki kodu animeDugme.htm adıyla kaydeder ve bir yerde saklarsanız, daha sonra bir çok düğme veya grafik animasyonunda size yol gösterebilir:

Kod:
<HTML>
<HEAD>
<SCRIPT LANGUAGE= "JavaScript1.2">
<!-- Javascript kodunu eski sürüm Browserlardan saklayalim
// grafiklerimizi tanimlayalim
var geri_outDugme = new Image( 54, 44 );
geri_outDugme.src = "geri_out.gif";
var geri_onDugme = new Image( 54, 44 );
geri_onDugme.src = "geri_on.gif";              
var ileri_outDugme = new Image( 54, 44 );
ileri_outDugme.src = "ileri_out.gif";
var ileri_onDugme= new Image( 54, 44 );
ileri_onDugme.src = "ileri_on.gif";            
// degisiklik fonksiyonunu tanimlayalim
function dugmeDegistir(nereye, goruntuNesne) {
       document.images[nereye].src = eval( goruntuNesne + ".src" )
      }             
//-->
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<A HREF="javascript:history.back()"
onMouseOver = "dugmeDegistir( 'geri', 'geri_onDugme' );window.status='Geri';return true;"
onMouseOut = "dugmeDegistir( 'geri', 'geri_outDugme' );window.status='';return true;">
<IMG SRC="./geri_out.gif" BORDER=0 WIDTH=52 HEIGHT=42 NAME="geri">
</A>         
<A HREF="javascript:history.forward()"
onMouseOver = "dugmeDegistir( 'ileri', 'ileri_onDugme' );window.status='Ileri';return true;"
onMouseOut = "dugmeDegistir( 'ileri', 'ileri_outDugme' );window.status='';return true;">
<IMG SRC="ileri_out.gif" BORDER = 0 WIDTH = 52 HEIGHT = 42 NAME = "ileri"></A>
</CENTER>
</BODY>
</HTML>


Katman Tekniği (DIV, LAYER)

Katman, HTML’e, kendi içindeki bütün unsurların bir bütün olarak ele alınmasını bildirir. Tabir yerinde ise, DIV veya LAYER etiketi ile oluşturacağınız katman ile HTML sayfasının üzerine, altını gösteren bir parşömen kat koymuş oluyorsunuz. CSS tekniklerini kullanarak Layer unsurlarını sayfada diğer herhangi bir HTML unsurundan daha büyük ölçüde ve çok daha hassas şekilde biçimlendirebilir; hatta hareket özelliği kazandırabilirsiniz. Javascript, katmanların bu özelliklerini, çeşitli olaylardan yararlanarak, olay-yönlendiricilerine ve metodlara bağlayabilir.

Ne var ki, katman oluşturmakta kullanabileceğimiz etiketlerden biri olan LAYER Netscape tarafından tanınır fakat IE tarafından tanımaz. Bu sebeple sayfalarımızda katmanları LAYER yerine DIV ile oluşturarak, iki Browser’a da hitabedebiliriz. DIV etiketi de LAYER gibi katmanlar yapar; özellikleri ve metodları da LAYER gibidir. Aralarındaki tek fark, DIV ile oluşturulacak katmanların biçim ve konum özellikleri kendi STYLE komutları ile kazandırmak zorundasınız; oysa LAYER’ın çok daha kestirme kendi biçim özellikleri vardır. Bununla birlikte STYLE metodunu kullanmakla DIV etiketine Javascript ile biçimlendirilecek daha çok “özellik” kazandırabiliriz. önce, etiketini yakından tanıyalım:

<DIV
ALIGN=CENTER, LEFT, RIGHT      Sayfada veya tablo içinde bulunduğu yere göre, ortaya, sola veya rağa hizalanmasını sağlar.
CLASS=sınıf_adı                        Uygulanan stil sınıfı varsa, burada belirterek bütün DIV’in aynı stili almasını sağlarız.
DATAFLD=sütun_adı                   DIV’e bir veritabanının değeri veriliyor, verilerin geleceği sütunun adı burada belirtilir.
DATAFORMATAS=HTML , TEXT     Bağlanan veritabanının HTML olarak mı, yoksa düz yazı olarak mı yorumlanacağını belirtmeye yarar.
DATASRC=#ID                          Varsa, bağlanan veritabanının kimliği
ID=değer                                 Bu DIV’in kimliği
LANG=dil                                 ISO standartlarına göre bu bölümde yer alacak metnin yorumlanmasında uygulanacak dil kodu
LANGUAGE=dil                          JAVASCRIPT, JSCRIPT, VBS veya VBSCRIPT. Bu DIV etiketinin içindeki Script’in dili. Hiç bir değer belirtmezseniz, JavaScript varsayılır.
STYLE=css1-özellikleri                Bu etiketin unsurlarına uygulanacak stil komutları
TITLE=başlık                             Bilgi için kullanılır; Bu unsurun değeri onMouseOver halinde araç bilgi notu olarak görüntülenir.
>...</DIV>

DIV ile oluşturacağınız katman nesnesinin Görünürlük veya Pozisyon belirleme özelliklerini de stil unsurları ile belirtebilirsiniz. Örneğin bir DIV unsurunun HTML sayfası açıldığında görünmemesini istiyorsanız, bunu DIV etiketinin içine koyacağınız şöyle bir stil komutu ile sağlarsınız:

Kod:
“STYLE="visibility:hidden;position:absolute;top:0; left:0; z-index:-1"

Fakat, ne yazık ki, Javascript, DIV’i bir “sayfa unsuru” olarak ele alarak, Browser’a talimat vermeye kalktığında söylediklerini ya Netscape anlamayacaktır; ya da IE. Çünkü iki Browser’ın DIV ve stil belirlemelerinde şart koştukları referans biçimi farklıdır. Örneğin, Netscape, document.layers[1].visibility= “hide” şeklindeki bir Javascript ifadesi üzerine, sayfanızda ikinci katmanı görünmez hale getirirken, IE, size “document.layers1 Nesne Değil!” şeklinde hata mesajı verecektir. IE, sayfanın unsurlarına “document.all.nesne” (nesne kelimesinin yerine nesnenin adı girecek) şeklinde referans yapılmasını ister.

Her iki Browser’ın anlayacağı şekilde Javascript ile katman ve CSS komutları vererek Dinamik HTML sayfaları yapmanın bir yolu, söz gelimi, MacroMedia firmasının DreamWeaver gibi, kendi Javascript kodunu kendini oluşturan ve bunu her iki Browser’ın anlayacağı dilde yazabilen HTML editörü yazılımlar kullanmak olabilir. Ayrıca Scott Isaacs’in (scott@insideDHTML.com) DHTML Library Version 2.0b5 adlı Javascript programını (dhtmlLib.js), http://www.insideDHTML.com adresinden indirerek, HTML sayfalarınızda kullanabilirsiniz. Bu tür “haricî Javascript belgesi” bir HTML sayfasında HEAD bölümüne şu komutla bağlanır:

Kod:
<SCRIPT scr=”dhtmlLib.js” language=”JavaScript”> </SCRIPT>

427 satırlık bu Javascript belgesi programcı olarak size, Javascript stil komutlarnızı ister sadece Netscape’in, ister sadece IE’nin anlayacağı şekilde yazma imkanı veriyor. Bu belge, Browser IE ise Netscape’in anlayacağı komutları IE için, Browser Netscape ise IE’in anlayacağı komutları Netscape için tabir yerinde ise “tercüme” ediyor.

Böyle bir “tercüme” fonksiyonu, ana hatlarıyla şöyle olabilir:

Kod:
function Is() {
var agent = navigator.userAgent.toLowerCase();
this.major = parseInt(navigator.appVersion);
this.minor = parseFloat(navigator.appVersion);
this.ns = ((agent.indexOf('mozilla')!=-1) && ((agent.indexOf('spoofer')==-1) && (agent.indexOf('compatible') == -1)));
this.ns2 = (this.ns && (this.major == 2));
this.ns3 = (this.ns && (this.major == 3));
this.ns4 = (this.ns && (this.major >= 4));
this.ie = (agent.indexOf("msie") != -1);
this.ie3 = (this.ie && (this.major == 2));
this.ie4 = (this.ie && (this.major >= 4));
this.op3 = (agent.indexOf("opera") != -1);
}
var is = new Is()
       if(is.ns4) {
       doc = "document";
       sty = "";
       htm = ".document"
      }
       else if(is.ie4) {
       doc = "document.all";
       sty = ".style";
       htm = ""
      }


Bu kodu, söz gelimi tercume.js adıyla kaydeder “haricî Javascript belgesi” olarak HTML sayfanızda HEAD bölümüne şöyle bir komutla bağlayabilirsiniz:

Kod:
<SCRIPT scr=”tercume.js” language=”JavaScript”> </SCRIPT>

Bu fonksiyonu doğruca HTML belgenizin HEAD bölümüne de koyabilirsiniz. Her iki durumda da Javascript’e DIV nesneleriyle ilgili bütün stil komutlarınızı, bir değerlendirmeden geçirerek uygulamasını şöyle bir komutla bildirirseniz;

Kod:
golgeVer = eval(doc + '["golgeKatmani"]');

Javascript, diyelim ki başlıklara gölge veren “golgeKatmani” adlı bir katmanınız varsa, ve katmanın alacağı “golgeVer” gibi bir değişkeniniz bulunuyorsa bu değişkeni

Netscape için:

          golgeVer = document.golgeKatmani

IE için ise:

          golgeVer = document.all.golgeKatmani

diye belirtecektir. HTML sayfanıza böyle bir “haricî Javascript dosyası” iliştirmek yerine, kendi kodunuzu kendiniz yazmak isteyebilirsiniz. Şimdi böyle bir örneği birlikte yapalım.

Bu sayfada, soldaki spiral süsü, üstte de üç sekme olan bir kitap ya da defter esprisinin hâkim olduğunu görüyorsunuz. Özellikle işletim sistemlerinin ve programların grafik arayüzleri, Internet ziyaretçilerinize sekmeleri tıklama alışkanlğı kazandırmış olmalı. Bu sebeple, bu sayfa ziyaretçiler açısından nerede ne olduğu kolay anlaşılan bir sayfa sayılabilir. Ziyaretçi birinci sekmeyi tıkladığında, bu sekmeyle ilgili bilgilerin bulunduğu sayfaya gidecek, ve belli ki bu sayfa da burada, kapağın bulunduğu alanda görüntülenecektir. Daha teknik ifade edersek, sayfamız açıldığında milimetrik olarak birbirinin üzerinde bulunan dört DIV’den (Kapak, Sekme1_zemin, Sekme2_zemin, Sekme3_zemin) sadece Kapak DIV’i görünür (visible) durumda olacaktır. Ziyaretçi diyelim ki Sekme1’i tıkladığında, Javascript Kapak DIV’ini görünmez (hidden) hale, Sekme1’in sayfasını içeren DIV’i görünür hale (visible) getirecektir. Ziyaretçinin diğer sekmelerden sonra Sekme1’i yeniden tıklayabileceğini hesaba katarak, Sekme1’e sadece Kapak DIV’ini değil, emniyette olabilmek için Sekme2 ve Sekme3’ün içerik DIV’lerini de görünmez hale getirtmemiz uygun olur. Diğer sekmeler de, kendi sayfalarını açarken, diğer sayfaları ve Kapak’ı, görünmez hale getireceklerdir. Görünmez halde olan bir DIV’i yeniden görünmez hale getirmenin Javascript veya Browser açısından bir sakıncası yoktur.
Bu sayfada sekmelerin içeriklerini tutan DIV’ler ziyaretçinin sekmeleri tıklamasının oluşturacağı Click olayının onClick ile yönlendirilmesi suretiyle değiştirilecektir. HTML’de DIV’lere ilişkin etiketi yazarken uygulayacağınız sıranın hiç önemi yoktur; Browser, DIV’lerin z-index sayısına bakarak hangisinin altta hangisinin üstte olduğunu belirler. Fakat yine de iyi programcılık gereği, DIV’leri en alttan en üste doğru yazmaktır. Şimdi, daha sonra sekmeler.htm adıyla kaydedeceğimiz kodumuzu adım adım birlikte yazalım. Tabiî, önce standart unsurlarımızla sayfanın çatısını çatalım:

Kod:
<HTML>
<HEAD>
<TITLE>Sekmeler</TITLE>
<META HTTP-EQUIV="Content-Type" content="text/html; charset=windows-1254">
<SCRİPT LANGUAGE="JavaScript">
<!-- Eski Browserlardan gizleyelim
.......................
//-->
</SCRİPT>
</HEAD>
<BODY bgcolor="#FFFFFF">
........................
<p>Sekmeli sayfamıza hoş geldiniz!</p>
<p>&nbsp;</p>
</BODY>
</HTML>

Burada nokta-noktalı yerlerin birincisine Javascript fonksiyonumuz, ikincisine ise DIV etiketlerimiz girecek. Fonksiyonu inşa etmeye başlamadan önce, tıklamayla değişmeyecek DIV’lerin etiketlerini yazalım. İşe Spiral’den başlayalım; ikinci noktalı yere şunları yazalım:

Kod:
<div id="Spiral"
       style="position:absolute;
       left:13;
       top:141px;
       width:64px;
       height:288;
       z-index:1;
       background-image: url(spiral.gif);
       layer-background-image: url(spiral.gif);
       border: 1px none #000000;
       visibility: visible">
</div>


Bu örneği böyle satır satır yazmamızın sebebi, DIV etiketinin bölümlerinini açıkça görmeniz içindir: dikkat ettiyseniz, Spiral adlı bu DIV’e CSS ile tayin edebileceğimiz bütün pozisyon özelliklerini kazandırıyoruz. Zemin grafiği olarak spiral.gif diye bir resim kullanıyoruz. Kapak adını verdiğimiz diğer DIV ise şöyle oluşacak:

Kod:
<div id="Kapak" style="position:absolute; left:73; top:141; width:290; height:288px; z-index:2; visibility: visible; background-image: url(kapak01.gif); border: 1px none #000000"><h1 align="center"><b><font face="Arial, Helvetica, sans-serif">KİTABIN İÇİNDEKİLERİ GÖRMEK İÇİN SEKMELERİ TIKLAYINIZ!</font></b></h1></div>

Bu iki DIV’in dinamik hiç bir özelliği olmadığı için içeriklerinde onClick veya başka bir yönlendirici yok. Şimdi dinamik DIV’ler olan Sekme1, Sekme2 ve Sekme3 adını verdiğimiz üç sekmeyi oluşturalım; bunların içinde, onClick’in çağıracağı fonksiyonu ve bu fonksiyona vereceğimiz argümanlar (parametreler) bulunacaktır.

işte Sekme1’in DIV’i:

Kod:
<div id="Sekme1"
       style="position:absolute;
              left:73px;
              top:95px;
              width:96;
              height:46;
              z-index:3;
              visibility: visible">
       <a href="#" onClick="katmanGizleGoster(
              'document.layers[\'Sekme1Zemin\']','document.all[\'Sekme1Zemin\']','show',
              'document.layers[\'Sekme2Zemin\']','document.all[\'Sekme2Zemin\']','hide',
              'document.layers[\'Sekme3Zemin\']','document.all[\'Sekme3Zemin\']','hide',
              'document.layers[\'Kapak\']','document.all[\'Kapak\']','hide')">
       <img src="sekme1.gif" width="96" height="46" border="0">
       </a>
</div>


DIV etiketi genellikle böyle yazılmaz; fakat neyin-ne olduğunu tartışabilmek için birinci Sekme DIV’imizi açıkça yazıyoruz. DIV’in adından sonra stil komutu ve görünür olup olmadığına ilişkin visibility özelliği belirtiliyor. Sonra, bu DIV’in içine koyacağımız resme “#” bağlantısı kazandırıyor. Bu bağlantı tıpkı bir sayfa veya site bağlantısı gibi, bir metne veya grafiğe A etiketinin özelliklerini kazandırır. Hatırlarsanız, DIV etiketinin olayları arasında en azından 3 ve 4’ncü sürüm Browserlar açısından hemen hiç bir olay (Click, MouseOver gibi) olmadığını, bu nedenle DIV’in onClick, onMouseOver gibi yönlendiricilerle yönlendirilemeyeceğini söylemiştik. Bu sebeple, DIV’in içine bir resim koyarak, bu resme Anchor etiketi bağlayıp (“#” şeklindeki bu Link tıklandığında Browser hiç bir yere gitmeyecektir!) bu etiketin Click olayına cevap verme özelliğinden yararlanabiliriz. Daha sonra yazacağımız katmanGizliGoster() adlı fonksiyonumuz, onClick halinde, yapılmasını istediğimiz işlere dair parametreleri (argümanları, arguments) üçerli gruplar halinde alacak: birinci grup bilgi Netscape için kullanılacak, ikinci grup bilgi IE için kullanılacak, üçüncü grup bilgi ise hedef katmanın görünür hale mi geleceğini, yoksa gizleneceğini mi belirtmek için kullanılacak Burada görünmesini istediğimiz katman için “göster” anlamına Show, gizlenmesini istediğimiz katman için “gizle” anlamına Hide kelimelerini İngilizce kullanıyoruz; çünkü bu kelimeleri daha sonra fonksiyonda Netscape için komut olarak kullanacağız. Bir sekme tıklandığında, Javascript dört iş birden yapsın istiyoruz: Kapak ve diğer iki sekmenin sayfaları gizlensin; tıklanan sekmenin sayfası gösterilsin. O halde, fonksiyona dört ayrı üçerli bilgi kümesini parametre olarak vereceğiz. Buraya gelmişken, diğer iki sekmenin DIV etiketlerini de yazalım:

Kod:
<div id="Sekme2" style="position:absolute; left:169; top:95; width:95; height:46; z-index:4; visibility: visible"><a href="#" onClick= "katmanGizleGoster('document.layers[\'Sekme1Zemin\']', 'document.all[\'Sekme1Zemin\']','hide','document.layers[\'Sekme2Zemin\']', 'document.all[\'Sekme2Zemin\']','show','document.layers[\'Sekme3Zemin\']', 'document.all[\'Sekme3Zemin\']','hide','document.layers[\'Kapak\']', 'document.all[\'Kapak\']','hide')"><img src="sekme2.gif" width="95" height="46" border="0"></a></div>

<div id="Sekme3" style="position:absolute; left:266; top:95; width:97; height:46; z-index:5; visibility: visible"><a href="#" onClick= "katmanGizleGoster('document.layers[\'Sekme1Zemin\']', 'document.all[\'Sekme1Zemin\']','hide','document.layers[\'Sekme2Zemin\']', 'document.all[\'Sekme2Zemin\']','hide','document.layers[\'Sekme3Zemin\']', 'document.all[\'Sekme3Zemin\']','show','document.layers[\'Kapak\']', 'document.all[\'Kapak\']','hide')"><img src="sekme3.gif" width="97" height="46" border="0"></a></div>


Bu satırların hemen arkasından, sekmeler tıklandığında görüntülenecek olan sekme sayfalarını oluşturacak DIV etiketleri gelecektir. Onların kodları ise şöyle:

Kod:
<div id="Sekme1Zemin" style="position:absolute; left:73px; top:141px; width:289px; height:288px; z-index:6; visibility: hidden; background-image: url(sekme1_zemin.gif); layer-background-image: url(sekme1_zemin.gif); border: 1px none #000000"><p>&nbsp;</p><h2><b>Burada Sekme 1'in bilgileri var...</b></h2></div>
<div id="Sekme2Zemin" style="position:absolute; left:73; top:141; width:289; height:289; z-index:7; visibility: hidden; background-image: url(sekme2_zemin.gif); layer-background-image: url(sekme2_zemin.gif); border: 1px none #000000"><p>&nbsp;</p><h2><b>Burada Sekme 2'nin bilgileri var...</b></h2></div>
<div id="Sekme3Zemin" style="position:absolute; left:73; top:141; width:289; height:289; z-index:8; visibility: hidden; background-image: url(sekme3_zemin.gif); layer-background-image: url(sekme3_zemin.gif); border: 1px none #000000"><p>&nbsp;</p><h2><b>Burada Sekme 3'ün bilgileri var...</b></h2></div>


DIV’lerimizi tamamladığımıza göre HTML sayfamızda başa dönerek, fonksiyonumuzu yazabiliriz. Birinci nokta-noktalı yere şu kodu yazalım; sonra ayrıntılarına bakalım:

Kod:
<script language="JavaScript">
<!--
function katmanGizleGoster() {
      var i, gorunurluk, parametreler, Nesne;
      parametreler = katmanGizleGoster.arguments;
      for (i=0; i<(parametreler.length-2); i+=3) {
           gorunurluk = parametreler[i+2];
           if (navigator.appName == 'Netscape' && document.layers != null) {
                Nesne = eval(parametreler[i]);
                if (Nesne) Nesne.visibility = gorunurluk;
           }
                else if (document.all != null) {
           if (gorunurluk == 'show') gorunurluk = 'visible';
           if (gorunurluk == 'hide') gorunurluk = 'hidden';
                Nesne = eval(parametreler[i+1]);
           if (Nesne) Nesne.style.visibility = gorunurluk;
           }
      }
}
//-->
</script>


katmanGizleGoster() fonksiyonu aldığı argümanlardan bir parametreler dizi-değişkeni yapıyor; ve oluşturacağı nesneyi bulunduğu Browser Netscape ise bunlardan “document.layers” diye başlayanlarını seçerek; bulunduğu Browser IE ise, “document.all” diye başlayan argümanları seçerek oluşturuyor; ve Browser IE ise ve hedef katman gösterilecekse “visibility” özelliği “visible,” gösterilmeyecekse “hidden”; Netscape için bizim verdiğimiz Show ve Hide kelimeleri aynen kullanılıyor.
Kodları girdikten sonra sayfanızı sekmeler.htm adıyla kaydederseniz ve Browser’ınızda açarsanız, her sekme için verdiğiniz metnin görüntülendiğini, diğer sekmelerin gizlendiğini göreceksiniz.
[/hide]
Wink Web Üstadı Cool
Bul
Alıntı
#17
Sonuç

Anlatacaklarımızın hepsi bu kadar; ama tabii Javascript bu kadar değil. Özellikle Belge Nesne Modeli (DOM) konusunda, Javascript yoluyla sayfalarınıza veri bağlama konusunda, daha bir çok unsuru görmedik. IE5’in Browser dünyasına getirdiği yeni yeni olaylara nasıl Script yazılabileceğine değinmedik. Ama bu kitapçıkta amacımız Javascript’in bu ileri aşamalarına hazırlanmanız için gerekli temel bilgileri vermekti. Bu amaca ulaşmak için önemli bir nokta kaldı:hatasız Script yazmak.

İster başlangıç düzeyinde, ister ileri düzeyde, hangi düzeyde olursa olsun, hatasız Javascript programı yazmak için dikkat etmeniz gerekenleri belirtelim:

1. Browser’ın Javascript yorumlayıcısı (belki de şimdilik) programcının ne demek istediğini anlama imkanına sahip değildir; bu sebeple onun anlayacağı şekilde, yani nasıl yazılması gerekiyorsa, öyle yazın. Daktilo hatası yapmayın. Bir değişkeni nasıl tanımlamışsanız, baştan sona o yazılışla yazın. Bazı daktilo hataları HTML’e aittir; Javascript sizi uyarmaz bile. Hele daktilo hatası yüzünden HTML’in mantığı ve akışı bozulmuyorsa, Browser da hata mesajı vermez! Bu sebeple, programlarınızı sınadığınız Browser’a değil, kendinize güvenin ve kodlarınızı satır satır, kelime kelime okuyun.

2. Açtığınız etiketin kapanması gerekiyorsa kapatın. Özellikle </SCRIPT> etiketini unutmayın. Javascript programcının en çok hata yaptığı nokta büyüktür, küçüktür işaretleri arasında satırlar dolusu kod varsa, açtığı etiketi kapatmamaktır.

3. Parantezleri, özellikle fonksiyonların süslü parantezlerini kapatmayı unutmayın. Çift-tırnak ve tek-tırnak işaretlerinin kapatılması da çok kolaylıkla unutulur. Bir metnin içinde Javascript açısından ayraç işareti sayılan tırnakla, metne ait alıntı işareti sayılan tırnağı birbirinden ayırmanız gerekir. Hatırlıyorsanız, Javascript’e “Bu sana ait değil; bu metnin parçasıdır!” demek istediğiniz tırnakları ters bölü işareti ile \” ve \’ şeklinde yazıyoruz.

3. Tam veya kesirli sayı değişkenlerine alfanümerik (karakter, String) değişkeni muamelesi yapmayın. Örneğin, (.bold gibi) metin biçimlendirme metodları sayı tutan değişkenlere uygulanamaz; sayı olmayan değişkenler de içlerinde rakam olsa bile aritmetik işlemden geçirilemez. Sayı bekleyen fonksiyona karakter, karakter bekleyen fonksiyona sayı verirseniz; Javascript’in öfkesine sebep olabilirsiniz!

4. Javascript, işlem mantığı hatasını bulamaz. Mesela bir dörtgenin alanını bulurken, kenarlardan birinin yüzde 20’sini alıp, diğer kenarla çarpıyorsanız, Javascript’in “Dörtgen alanı öyle hesaplanmaz!” demesini boşuna beklersiniz. İşlemlerinizin mantık akışı ve matematik doğruluğunu sağlamak sizin görevinizdir.

5. Programın yazılma aşamasında değişkenlerin belirli bir noktada ne değeri aldığını Javascript’e uyarı kutularıyla size göstermesini bildirin. Sonra bu uyarı kutularını kaldırabilirsiniz. Örneğini gördüğümüz “window.onerror()” metodu da programın geliştirilme aşamasında hata yakalamaya yarar.

6. Kaynaklara başvurmaktan çekinmeyin. Javascript için en zengin kaynak, fabrikasıdır: http://home.netscape.com/computing/webbu...pting.html. Ayrıca adı her ne kadar Javascript değil de JScript bile olsa, Microsoft’un da zengin bir Javascript öğretim alanı vardır: http://msdn.microsoft.com/scripting/default.htm.

7. Sınayıp, yanılmaktan daha iyi öğrenme yöntemi yoktur; hata yapmaktan korkmayın. Sınayın; yanlışı düzeltin; bir daha sınayın.
Ve bol bol Script yazın.
Wink Web Üstadı Cool
Bul
Alıntı


Konuyu Paylaş

Foruma Git:


Bu konuyu görüntüleyen kullanıcı(lar): 2 Ziyaretçi