Programlama

Javascript (Nesneler)

Yazar

23 Temmuz 2011

1.344 görüntülenme

Nesneler ve Özellikleri

Günümüzde bilişim Teknolojileri ile ilgilene hemen herkesin duyduğu bir terim var. Nesneye Yönelik programlama. Nedir bu Nesneye Yönelik programlama ? Bu tip programlamada kullanılan her öğe bir nesne olarak kabul edilir. Bu nesnelerin özelliklerini kullanarak onları değiştirerek program yazılır. Javascript’te bu tür bir programlama dilidir. Örneğin webde sörf yaparken herkesin karşısına çıkan formlar birer nesnedir. Bu nesnelerin tepkiye göre cevap vermesi gibi özellikler de onun yani nesnenin özellikleridir.

Örneğin şimdiye kadar çoğu kez kullandığımız document.write komutu aslında bir nesnenin özelliğine atıfta bulunmaktan başka bir şey değildir. Yani document nesnesinin write özelliğini kullanarak html sayfamıza yazı yazdırıyoruz.

7.1 Window Nesnesi

Genel olarak pencere özellikleri ile ilgili bir nesnedir.

7.1.1 Pencere açmak ve kapamak

Birçok yerde gördüğünüz pencere açma pencerelerin çeşitli özelliklerini değiştirme işte bu nesne yardımıyla yapılmaktadır.

Şimdi bu nesneyi nasıl kontrol edeceğiz onu görelim.

Pencere açmak için:

window.open(“Url_adı” , “pencere_adı” , “pencere_özellikleri”);

Pencere kapatmak için:

window.close();

Pencere kapatmak için window.close() komutu vermek yeterlidir. Burada kapatılan pencere ona kullanılmakta olan penceredir.

Gelelim pencere açma işine. Burada window.open ile pencerenin açılmak istendiği belirtilir. Parantez içerisinde verilenler ise açılması istenen pencerenin özelliklerini belirtir.

Url_adı: Buraya yazılacak dosya ismi açılacak pencerenin içerisinde olacaktır.

Örnek :

window.open(“http://webteknikleri/owp/index.htm”)

veya;

window.open(“index.html”)

Pencere_adı: Bu açılacak pencerenin adını belirtir. Birden çok pencere ile işlemler yapıyorsanız hangi pencereye bir komut gönderdiğinizin belli olması için gereklidir.

Örnek:

Window.open(“index.html” , “ana”);

Pencere_özellikleri: Bu özellikte adından belli olduğu ölçüde pencerenin özellikleri ile ilgilidir. Bir pencerenin değiştirilebilir özellikleri şunlardır :

menubar: Tarayıcıların en üst kısmında bulunan File(Dosya) , Edit(Düzen) vb. menülerin bulunduğu satırdır.

toolbar: Tarayıcılarda üst kısımda Back(Geri) , Forward(İleri) vb. tuşların bulunduğu kısımdır.

location: Tarayıcılarda ziyaret etmek istediğiniz web adresini yazdığınız kısım.

status: Tarayıcıların en alt kısmında hangi dosyanın yüklendiği ile ilgili bilgi veren kısımdır.

scrollbars: Sağ tarafta bulunan sürgü çubuklarıdır.

resizable: Pencerenin boyutlarının kullanıcıya bırakılması veya kesin değerler almasıyla ilgilidir.

width: Açılacak olan pencerenin piksel cinsinden genişliğidir.

height: Açılacak olan pencerenin piksel cinsinden boyudur.

left: Açılacak olan pencerenin ekranın sol tarafından kaç piksel uzaklıkta olacağını belirler.

top: Açılacak olan pencerenin ekranın üstünden kaç piksel aşağıda olacağını belirler. Eğer pencere özellikleri kısmında değişmesini istemediğiniz bir özellik varsa onu yazmanıza gerek yoktur. Bu değerler tarayıcının banko(default) değerlerinden alınır.

Şimdi bir pencere açalım. Açtığımız pencerede dosya,düzen ve ileri,geri tuş takımı olmasın. Pencerenin boyutları 200×300 piksel olsun. Bizi www.webteknikleri.com adresine göndersin.

Şimdi buna göre kodumuz :

window.open
(“http://webteknikleri/owp/index.htm”, “webteknikleri” ,” menubar=no, toolbar=no, scrollbars=yes, location=yes, width=200, heigt=300″;)

7.1.2. window.location.protocol

Window nesnesinin location.protocol nesnesi ise yüklenen dosyanın sabit diskten mi yoksa internetten mi yüklendiğini gösterir.

http: ile dosyanın internetten yüklendiğini belirtir.

file: ile dosyanın sabit diskten yüklendiğin belirtir.

Mesela şöyle bir örnekle dosyanın nerden yüklendiğini kontrol edelim.

if (window.location.protocol == “http:” )
{ document.write (“Bu belge Internet’ten geliyor.”) }
else
{ document.write (“Bu belge sabit diskten geliyor”) }

7.1.3. window.history.go

Window’un history özelliği ile bir önceki sayfaya erişim sağlanabilir. Örneğin kullanıcı herhangi bir formu doldurmadı ve işlem yapılamadı bu durumda bir hata mesajı ile kullanıcıyı uyardıktan sonra history nesnenisin kullanarak bir önceki sayfaya kullanıcıyı gönderebilirsiniz. Bunun için gerekli kod yazımı şu şekildedir.

Window.history.go(-1)

Bir önceki sayfaya -1 ile ulaşabilirsiniz. Bu değeri arttırarak daha önceki sayfalara da ulaşabilirsiniz.

7.1.4. Status Bar kullanımı

Status bar window nesnesinde belirttiğimiz gibi tarayıcıların en alt kısmında yer alan hangi dosyaya gidileceği veya yüklendiği ile ilgili bilgi veren kısımdır.

Status barı değiştirmek için şu kodları yazmalıyız.

window.status=”Webteknikleri’nden Merhaba !”;

Bu şekilde kullandığımız bir status kodu ile sayfa açık kaldığı sürece Webteknikleri’nden Merhaba ! yazısı karşımızda olacaktır.

7.2 Tarayıcı Nesnesi

Tarayıcılar Javascript tarafından bir nesne olarak algılanır. Bu nesnenin özelliklerini şöyle sıralayabilir.

appname Tarayıcı adı
appVersion Tarayıcının Versionu
appCodeName Tarayıcının kod adı
userAgent Tarayıcının anamakinaya(server) kendini tanıtırken verdiği isim

<html>
<head><title>Tarayıcı Özellikleri</title></head>
<body>
<script language=”javascript1.2″>
<!–
document.write(“Şu anda kullandığınız tarayıcının özellikleri :” , “<br>”);
document.write(navigator.appname + navigator.appVersion + navigator.appCodeName + navigator.useAgent ) ;
–>
</script>
</body>
</html>

7.3 Çerçeve (Frame) Nesnesi

Çerçeve tekniği bir web sayfası üzerinde birden fazla web sayfası görüntülenmek istendiğinde kullanılır. Daha ayrıntılı bilgi için HTML adlı bölümümüze bakınız.

Javascript açısından her bir çerçeve bir pencere sayılır. Bunların içeriğini kontrol etmek için belli komut stilleri vardır.

Şimdi onları görelim:

Top: En üst pencere (Yani tarayıcının kendisi)

Parent: Herhangi bir çerçeveyi oluşturan düzenleyici bölüm

Self: Çerçevenin kendisi

Javascript çerçeve düzenleyici(FrameSet)leri içerisindeki diğer alt çerçeveleri 0 ‘dan başlayarak numaralar. Bu numaralar yardımıyla çerçeve özelliklerini değiştirebiliriz. Örneğin iki tane çerçeveye sahip bir sayfada birinci çerçeve parent.frames[0] diğeri ise parent.frames[1] olarak adlandırılır. Örneğini verdiğimiz gibi iki çerçeveli bir web sayfamız olduğunu varsayalım.

Ana sayfamız ki bu sayfa tarayıcıya sayfanın iki html sayfasında oluştuğunu söyleyen , çerçeve düzenleyicisinin olduğu sayfanın kodları şu şekilde olsun.

! Uyarı: Bu sayfayı frame.html olarak kaydedin.

<html>
<head><title>Frame (Cerceve)</title></head>
<!– frames –>
<frameset cols=”50%,*”>
<frame name=”sol” src=”sol.html”>
<frame name=”sag” src=”sag.html”>
</frameset>
</html>

Bu sayfayı sol.html olarak kaydedin.

<html>
<head><title>Sol Frame</title></head>
<body>
<script language=”javascript1.2″>
<!–
parent.frames[0].document.write(“Herhangi bir hesaplama vb.unsur icin kullanilacak kod turu”, “<br>” , “SOL taraf icin”);
–>
</script>
</body>
</html>

Bu sayfayı sag.html olarak kaydedin.

<html>
<head><title>Sag Frame</title></head>
<body>
<script language=”javascript1.2″>
<!–
parent.frames[1].document.write(“Herhangi bir hesaplama vb.unsur icin kullanilacak kod turu”, “<br>” , “SAG taraf icin” );
–>
</script>
</body>
</html>

7.4 Form Nesnesi

Javscript açısından Html’in en önemli nesneleri Formlardır. Çünkü ziyaretçi ile etkileşmede en büyük unsurlardan birisi Formlardır. Html kendi form nesnesini kendisi oluşturabilir. Bu bakımdan Javascript’e düşen bir göre yoktur. Javascript form verilerinin yorumlanması ve işlenmesinde devreye girer. Şimdi form unsurlarını tanıyalım:

Name : Formun ismi
Action : Formun işleneceği perl veya cgi programının tanımlanacağı etiket
Enctype : Formun kodlanma türü
Method : Formun gönderme(post) mi yoksa alma(get) işlemi göreceğini belirler.
Target : Pencere ismi
OnSubmit : Gönderme metodunun ismi

Bunlardan yararlanarak bir form nesnesinin kodunu yazalım.

<form name=”mail” action=”http://www.webteknikleri.com/cgi-bin/mail.pl” method=”POST”>
Form unsurları
</form>

Şimdi biz bu kodda “Form Unsurları” diye bir şeyden söz ettik. Bu form unsurları ziyaretçiden nasıl bilgi alınacağını belirleyen unsurlardır. Bunlar bir metin alanı veya aşağı düşmeli bir menü olabilir. Form etiketi içerisindeki tüm unsurlar element adlı dizi-değişken içerisine yazılırlar ve form unsurları kullanılırken bu tip bir atıfta bulunmanız gerekir.

7.4.1 Text Alanı

Text alanı form unsurlarının en önemlilerindendir. Ziyaretçilerden bilgi almak amacıyla kullanılır. Kullanımı şu şekildedir.

Şeklinde kullanılır. Bu nesnenin kullanılan etiketleri :

Name : text alanının ismi
Size : text alanının web sayfasında görülecek kısmının büyüklüğü
Maxlenght : text alanına en fazla kaç karakter girilebileceğini belirler.

İşte bir tam teşekküllü text alanı:

Buraya kadar işimizi Html ile hallettik. Şimdi bu form nesnesinin özelliklerini Javascript aracılığıyla nasıl değiştirilebileceğini görelim. document.form_ismi.elements[numara]. değiştirilmek_istenen özellik. numara : değiştirilmek istenen elemanın numarasıdır

Değiştirilmek istenen özellikler şunlar olabilir. value : içerisindeki değer

lenght: nesnenin uzunluğu
name: ismi

Şimdi bir örnek verelim.(bu örnek bir önceki form içindir)

document.mail.elements[0].lenght=20

7.4.2 Şifre Alanı

Bu alanlar şifreli bilgi almak için kullanılır. Bu alana bir bilgi girildiğinde karakterler gözükmez onun yerine asteriks * işareti görülür.

Bir örnek:

Bu tür form unsurlarına erişimde text alanı gibi aynı şekildedir.

7.4.3 Butonlar

Form unsuru olarak iki tür buton vardır. Bunlar form unsurlarını form görevine göre göndermeye veya almaya yönelik Gönder (Submit) düğmesi bir diğeri ise Form unsurlarının tümünün ilk halini almasını sağlayan Sil (Reset) düğmesidir. Şimdi bunların nasıl kullanıldıklarını görelim.

7.4.4 Radyo (Radio) Düğmeleri

Bu tür düğmelerin en büyük özelliği radyo düğmeleri gibi olmasıdır. Yani herhangi bir menü üzerinde sadece bir seçim yaptırmak istiyorsanız bu tür form öğelerini kullanırsınız. Şimdi bunun ile ilgili bir örnek yapalım.

<HTML>
<HEAD>
<TITLE>Radio</TITLE>
<SCRIPT LANGUAGE = “JavaScript1.2″>
function sorgu (secim)
{var deger = null
for (var i=0; i<secim.length; i++)
{if (secim[i].checked)
{ deger = secim[i].value
break } }
return deger }
</SCRIPT>
</HEAD>
<BODY>
<FORM name=”form1″> <p>
<input type=radio name=”firma” value=”Bilemediniz Yazilim”>Microsoft</p>
<p><input type=radio name=”firma” value=”Bilemediniz Yazilim”>Borland</p>
<p><input type=radio name=”firma” value=”BilemedinizYazilim”>Adobe</p>
<p><input type=radio name=”firma” value=”Tebrikler Bildiniz”>Copmaq</p>
<input type=button value=”Bunlardan hangisi bilgisayar ureticisidir” onClick=”alert(sorgu(this.form.firma))”>
</FORM>
</BODY>
</HTML>

Gördüğünüz gibi bu form unsuruna da(öğesi) diğer form unsurları gibi aynı şekilde ulaşılır. Fakat diğerlerinden farklı olarak burada checked(seçilmiş) yardımcı etiketini kullandık. Burada Javascript ile bir döngü oluşturarak hangi nesnenin seçili(checked) olduğunu kontrol ediyoruz. Ve alert ile sorulan sorunun cevabının doğruluğunu ziyretçiye bildiriyoruz.

7.4.5 Select Unsuru

Select öğesi form nesnelerimizden menü yoluyla ziyaretçi ile etkileşme yollarından bir tanesidir. Bu bir tür seçme kutusudur. Aşağı düşmeli kutu sayesinde kutu içerisindekilerden birisini seçebilirsiniz. Name , Multiple ve Size özelliklerine sahiptir. Bu nesnemizde nesnenin yönelendirilmesi açısından onBlur , OnFocus , OnChange özellikleri kullanılabilir. Nesnenin özelliklerine ulaşım için en çok kullanılan etiket yardımcısı ise value(değer) dır.

Radyo kutularında yaptığımız örneği şimdide Select öğesine uygulayalım.

<HTML>
<HEAD>
<title>Select</title>
<SCRIPT LANGUAGE = “JavaScript1.2″>
function secim(secilen)
{ return secilen.options[secilen.selectedIndex].value }
</SCRIPT>
</HEAD>
<BODY>
<FORM name=”soru”>
<p><SELECT NAME=”firma”>
<OPTION value=”Bilemediniz Yazilim”>Microsoft</OPTION>
<OPTION value=”Bilemediniz Yazilim”>Borland</OPTION>
<OPTION value=”Bilemediniz Yazilim”>Adobe</OPTION></P>
<OPTION value=”Tebrikler Bildiniz”>Compaq</OPTION></P><br>
<input type=button value=”Bunlardan hangisi bilgisayar ureticisidir” onClick=”alert(secim(this.form.firma))”>
</FORM>
</BODY>
</HTML>