BİRSEY.COM

   

JAVASCRİPT

HTML__icon.gif (2655 bytes)

KONULAR

satir_arasi.gif (41 bytes)

JAVA'YA GİRİŞ

satir_arasi.gif (41 bytes)

TEMEL İLKELERİ

satir_arasi.gif (41 bytes)

DEGİŞKENLER

satir_arasi.gif (41 bytes)

İŞLEMLER  (OPERATOR) 1

satir_arasi.gif (41 bytes)

İŞLEMLER  (OPERATOR) 2

satir_arasi.gif (41 bytes)

PROG.AKİŞ DENETİMİ

satir_arasi.gif (41 bytes)

FONKSİYON

satir_arasi.gif (41 bytes)

FONSİYOLA HTML İLİŞKİSİ

satir_arasi.gif (41 bytes)

NESNELER

satir_arasi.gif (41 bytes)

OLAYLAR

satir_arasi.gif (41 bytes)

DİNAMİK HTML İLE JAVASCRİPT

satir_arasi.gif (41 bytes)

JAVA DERSİ MUSTAFA OZKAN

                                 Nesneler ve Özellikleri

Günümüzde bilisim Teknolojileri ile ilgilene hemen herkesin duydugu bir terim var. Nesneye Yönelik programlama. Nedir bu Nesneye Yönelik programlama ? Bu tip programlamada kullanilan her öge bir nesne olarak kabul edilir. Bu nesnelerin özelliklerini kullanarak onlari degistirerek program yazilir. Javascript'te bu tür bir programlama dilidir. Örnegin webde sörf yaparken herkesin karsisina çikan formlar birer nesnedir. Bu nesnelerin tepkiye göre cevap vermesi gibi özellikler de onun yani nesnenin özellikleridir.

Örnegin simdiye kadar çogu kez kullandigimiz document.write komutu aslinda bir nesnenin özelligine atifta bulunmaktan baska bir sey degildir. Yani document nesnesinin write özelligini kullanarak html sayfamiza yazi yazdiriyoruz.

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ügünüz pencere açma pencerelerin çesitli özelliklerini degistirme iste bu nesne yardimiyla yapilmaktadir.

Simdi bu nesneyi nasil kontrol edecegiz onu görelim.

Pencere açmak için:

window.open("Url_adi" , "pencere_adi" , "pencere_özellikleri");

Pencere kapatmak için:

window.close();

Pencere kapatmak için window.close() komutu vermek yeterlidir. Burada kapatilan pencere ona kullanilmakta olan penceredir.

Gelelim pencere açma isine. Burada window.open ile pencerenin açilmak istendigi belirtilir. Parantez içerisinde verilenler ise açilmasi istenen pencerenin özelliklerini belirtir.

Url_adi: Buraya yazilacak dosya ismi açilacak pencerenin içerisinde olacaktir.

Örnek :

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

veya;

window.open("index.html")

Pencere_adi: Bu açilacak pencerenin adini belirtir. Birden çok pencere ile islemler yapiyorsaniz hangi pencereye bir komut gönderdiginizin belli olmasi için gereklidir.

Örnek:

Window.open("index.html" , "ana");

Pencere_özellikleri: Bu özellikte adindan belli oldugu ölçüde pencerenin özellikleri ile ilgilidir. Bir pencerenin degistirilebilir özellikleri sunlardir :

menubar: Tarayicilarin en üst kisminda bulunan File(Dosya) , Edit(Düzen) vb. menülerin bulundugu satirdir.

toolbar: Tarayicilarda üst kisimda Back(Geri) , Forward(Ileri) vb. tuslarin bulundugu kisimdir.

location: Tarayicilarda ziyaret etmek istediginiz web adresini yazdiginiz kisim.

status: Tarayicilarin en alt kisminda hangi dosyanin yüklendigi ile ilgili bilgi veren kisimdir.

scrollbars: Sag tarafta bulunan sürgü çubuklaridir.

resizable: Pencerenin boyutlarinin kullaniciya birakilmasi veya kesin degerler almasiyla ilgilidir.

width: Açilacak olan pencerenin piksel cinsinden genisligidir.

height: Açilacak olan pencerenin piksel cinsinden boyudur.

left: Açilacak olan pencerenin ekranin sol tarafindan kaç piksel uzaklikta olacagini belirler.

top: Açilacak olan pencerenin ekranin üstünden kaç piksel asagida olacagini belirler. Eger pencere özellikleri kisminda degismesini istemediginiz bir özellik varsa onu yazmaniza gerek yoktur. Bu degerler tarayicinin banko(default) degerlerinden alinir.

Simdi bir pencere açalim. Açtigimiz pencerede dosya,düzen ve ileri,geri tus takimi olmasin. Pencerenin boyutlari 200x300 piksel olsun. Bizi www.webteknikleri.com adresine göndersin.

Simdi buna göre kodumuz :

window.open
("http://birsey/owp/index.htm", "birsey.com" ," 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 dosyanin sabit diskten mi yoksa internetten mi yüklendigini gösterir.

http: ile dosyanin internetten yüklendigini belirtir.

file: ile dosyanin sabit diskten yüklendigin belirtir.

Mesela söyle bir örnekle dosyanin nerden yüklendigini 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 özelligi ile bir önceki sayfaya erisim saglanabilir. Örnegin kullanici herhangi bir formu doldurmadi ve islem yapilamadi bu durumda bir hata mesaji ile kullaniciyi uyardiktan sonra history nesnenisin kullanarak bir önceki sayfaya kullaniciyi gönderebilirsiniz. Bunun için gerekli kod yazimi su sekildedir.

Window.history.go(-1)

Bir önceki sayfaya -1 ile ulasabilirsiniz. Bu degeri arttirarak daha önceki sayfalara da ulasabilirsiniz.

7.1.4. Status Bar kullanimi

Status bar window nesnesinde belirttigimiz gibi tarayicilarin en alt kisminda yer alan hangi dosyaya gidilecegi veya yüklendigi ile ilgili bilgi veren kisimdir.

Status bari degistirmek için su kodlari yazmaliyiz

window.status="Webteknikleri'nden Merhaba !";

Bu sekilde kullandigimiz bir status kodu ile sayfa açik kaldigi sürece Webteknikleri'nden Merhaba ! yazisi karsimizda olacaktir.

7.2 Tarayici Nesnesi

Tarayicilar Javascript tarafindan bir nesne olarak algilanir. Bu nesnenin özelliklerini söyle siralayabilir.

appname Tarayici adi
appVersion Tarayicinin Versionu
appCodeName Tarayicinin kod adi
userAgent Tarayicinin anamakinaya(server) kendini tanitirken verdigi isim

<html>

<head><title>Tarayici Özellikleri</title></head>

<body>

<script language="javascript1.2">

<!--

document.write("Su anda kullandiginiz tarayicinin özellikleri :" , "<br>");

document.write(navigator.appname + navigator.appVersion + navigator.appCodeName + navigator.useAgent ) ;

-->

</script>

</body>

</html>

7.3 Çerçeve (Frame) Nesnesi

Çerçeve teknigi bir web sayfasi üzerinde birden fazla web sayfasi görüntülenmek istendiginde kullanilir. Daha ayrintili bilgi için HTML adli bölümümüze bakiniz.

Javascript açisindan her bir çerçeve bir pencere sayilir. Bunlarin içerigini kontrol etmek için belli komut stilleri vardir.

Simdi onlari görelim:

Top: En üst pencere (Yani tarayicinin kendisi)

Parent: Herhangi bir çerçeveyi olusturan düzenleyici bölüm

Self: Çerçevenin kendisi

Javascript çerçeve düzenleyici(FrameSet)leri içerisindeki diger alt çerçeveleri 0 'dan baslayarak numaralar. Bu numaralar yardimiyla çerçeve özelliklerini degistirebiliriz. Örnegin iki tane çerçeveye sahip bir sayfada birinci çerçeve parent.frames[0] digeri ise parent.frames[1] olarak adlandirilir. Örnegini verdigimiz gibi iki çerçeveli bir web sayfamiz oldugunu varsayalim.

Ana sayfamiz ki bu sayfa tarayiciya sayfanin iki html sayfasinda olustugunu söyleyen , çerçeve düzenleyicisinin oldugu sayfanin kodlari su sekilde olsun.

! Uyari: Bu sayfayi 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 sayfayi 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 sayfayi 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çisindan Html'in en önemli nesneleri Formlardir. Çünkü ziyaretçi ile etkilesmede en büyük unsurlardan birisi Formlardir. Html kendi form nesnesini kendisi olusturabilir. Bu bakimdan Javascript'e düsen bir göre yoktur. Javascript form verilerinin yorumlanmasi ve islenmesinde devreye girer. Simdi form unsurlarini taniyalim:

Name : Formun ismi
Action : Formun islenecegi perl veya cgi programinin tanimlanacagi etiket
Enctype : Formun kodlanma türü
Method : Formun gönderme(post) mi yoksa alma(get) islemi görecegini belirler.
Target : Pencere ismi
OnSubmit : Gönderme metodunun ismi

Bunlardan yararlanarak bir form nesnesinin kodunu yazalim.

<form name="mail" action="http://www.birsey.coml" method="POST">

Form unsurlari

</form>

Simdi biz bu kodda "Form Unsurlari" diye bir seyden söz ettik. Bu form unsurlari ziyaretçiden nasil bilgi alinacagini belirleyen unsurlardir. Bunlar bir metin alani veya asagi düsmeli bir menü olabilir. Form etiketi içerisindeki tüm unsurlar element adli dizi-degisken içerisine yazilirlar ve form unsurlari kullanilirken bu tip bir atifta bulunmaniz gerekir.

7.4.1 Text Alani

Text alani form unsurlarinin en önemlilerindendir. Ziyaretçilerden bilgi almak amaciyla kullanilir. Kullanimi su sekildedir.

<input type="text">

Seklinde kullanilir. Bu nesnenin kullanilan etiketleri :

Name : text alaninin ismi
Size : text alaninin web sayfasinda görülecek kisminin büyüklügü
Maxlenght : text alanina en fazla kaç karakter girilebilecegini belirler.

Iste bir tam tesekküllü text alani:

<form name="mail" action="http://www.kahkaha.com/cgi-bin/mail.cgi" method = POST>

<input type="text" name="email" size=15 maxlenght=40>

</form>

Buraya kadar isimizi Html ile hallettik. Simdi bu form nesnesinin özelliklerini Javascript araciligiyla nasil degistirilebilecegini görelim. document.form_ismi.elements[numara]. degistirilmek_istenen özellik. numara : degistirilmek istenen elemanin numarasidir

Degistirilmek istenen özellikler sunlar olabilir. value : içerisindeki deger

lenght: nesnenin uzunlugu
name: ismi

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

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

7.4.2 Sifre Alani

Bu alanlar sifreli bilgi almak için kullanilir. Bu alana bir bilgi girildiginde karakterler gözükmez onun yerine asteriks * isareti görülür.

Bir örnek:

<form action="http://" name="mail">

<input type="Password" name="sifre" >

</form>

Bu tür form unsurlarina erisimde text alani gibi ayni sekildedir.

7.4.3 Butonlar

Form unsuru olarak iki tür buton vardir. Bunlar form unsurlarini form görevine göre göndermeye veya almaya yönelik Gönder (Submit) dügmesi bir digeri ise Form unsurlarinin tümünün ilk halini almasini saglayan Sil (Reset) dügmesidir. Simdi bunlarin nasil kullanildiklarini görelim.

<form action="http://" name="mail">

<input type="Submit" name="gonder" value="GONDER"><br>

<input type="Reset" name="sil" value="SIL">

</form>

7.4.4 Radyo (Radio) Dügmeleri

Bu tür dügmelerin en büyük özelligi radyo dügmeleri gibi olmasidir. Yani herhangi bir menü üzerinde sadece bir seçim yaptirmak istiyorsaniz bu tür form ögelerini kullanirsiniz. Simdi bunun ile ilgili bir örnek yapalim.

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

<p><input type="button" value="Bunlardan hangisi bilgisayar ureticisidir"

onClick="alert(sorgu(this.form.firma))"> </p>

</form>

</body>

</html>

Gördügünüz gibi bu form unsuruna da(ögesi) diger form unsurlari gibi ayni sekilde ulasilir. Fakat digerlerinden farkli olarak burada checked(seçilmis) yardimci etiketini kullandik. Burada Javascript ile bir döngü olusturarak hangi nesnenin seçili(checked) oldugunu kontrol ediyoruz. Ve alert ile sorulan sorunun cevabinin dogrulugunu ziyretçiye bildiriyoruz.

7.4.5 Select Unsuru

Select ögesi form nesnelerimizden menü yoluyla ziyaretçi ile etkilesme yollarindan bir tanesidir. Bu bir tür seçme kutusudur. Asagi düsmeli kutu sayesinde kutu içerisindekilerden birisini seçebilirsiniz. Name , Multiple ve Size özelliklerine sahiptir. Bu nesnemizde nesnenin yönelendirilmesi açisindan onBlur , OnFocus , OnChange özellikleri kullanilabilir. Nesnenin özelliklerine ulasim için en çok kullanilan etiket yardimcisi ise value(deger) dir.

Radyo kutularinda yaptigimiz örnegi simdide Select ögesine uygulayalim.

<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" size="1">

<option value="Bilemediniz Yazilim">Microsoft</option>

<option value="Bilemediniz Yazilim">Borland</option>

<option value="Bilemediniz Yazilim">Adobe</option>

</select></p>

<p><select size="1">

<option value="Tebrikler Bildiniz">Compaq</option>

</select></p>

<p><br>

<input type="button" value="Bunlardan hangisi bilgisayar ureticisidir"

onClick="alert(secim(this.form.firma))"> </p>

</form>

</body>

</html>

 

İLERİ

©2001 BİRSEY.COM