DERS 3: VBSCRİPT VE JAVASCRİPT TEMELLERİ

Dersin sonunda yapabilecekleriniz:

-VBScript dilini tanımlamak.

-VBScript ile programlamanın temellerini açıklamak.

-JavaScript dilini tanımlamak.

-Olayları açıklamak.

I. VBSCRİPT DİLİ

VBScript, Visual Basic programlama dillerinin yeni bir üyesidir. Özellikle Web sayfaları için dinamik içerik yaratmak için geliştirilmiştir. Microsoft Internet Explorer 3.0’den itibaren tarayıcılar, HTML belgelerindeki VBScript kodlarını yorumlarlar. VBScript kullanarak, form verilerini kontrol edebilir ya da özel sayfalar geliştirebilirsiniz. Visual Basic ya da Visual Basic for Applications dillerini de biliyorsanız, VBScript size çok kolay gelecektir.

VBScript, istemci ve sunucu taraflı script yazmak için kullanılmaktadır. Sunucu taraflı script yazma işleminde yazılan kod sunucuda çalışır. ASP programlamasında özellikle kullanıcı arabirimini etkin hale getirmek için ve HTML'nin kısıtlamalarından kurtulup etkileşimli kontroller yaratabilmek için istemci taraflı script yazmak için VBScript kullanılır.

Örnek : Düğme Kullanımı

Aşağıdaki VBScript kodu sayfa üzerindeki düğmeye tıklanarak bir mesaj kutusu ekrana çıkarılır. Script kodunun HTML belgesi içinde ayrı bir yere yazıldığına dikkat ediniz.

<HTML>

<HEAD>

<TITLE> Örnek Script </TITLE>

<!-- düğme tıklayınca çalışacak yordam

Sub Button1_OnClick

MsgBox "Ne haber"

End Sub

-->

</SCRIPT>

</HEAD>

<BODY>

<FORM>

</FORM>

</BODY>

</HTML>

A. ASP İÇİNDE VBSCRİPT KULLANMAK

ASP kodlaması içinde VBScript kodlaması <SCRIPT> etiketleri arasında yapılır. Bu blok kod genellikle HTML içinde ve başlık kısmında olur.

Script bloğu içinde özellikle HTML formu üzerindeki kullanıcı etkileşimi sağlanır. Örneğin bir metin kutusuna girilen alanın değerinin kontrolü gibi.

Aşağıdaki örnekte ekrandan alınan bilgilerin kontrolünü yapmak için bir VBScript kodu yazılmıştır. Burada kontrol edilen olay submit olayıdır. Submit olayı, ziyaretçinin Submit düğmesine basarak formu göndermesi işlemidir. Bu işlem de <FORM ACTION ="kayit.asp" METHOD=POST NAME=ariza> gibi satırlarda belirtilir.

Örnek: Veri girişinin kontrolü için script yazmak:

<HTML>

<HEAD>

<TITLE> ARIZA FORMU </TITLE>

</HEAD>

Function Frmariza_OnSubmit()

'--- forma alanlari tamamlanincaya kadar izin verme

Frmariza_OnSubmit = False

Set theForm = Document.Frmariza

If Not IsDate(theForm.txttarih.Value) Then

MsgBox "Lütfen tarihi anlamli girin", vbCritical, "Giris Gerekiyor."

theForm.txttarih.Focus

Else

'--- adi alanini kontrol et.

If Trim(theForm.txtadi.Value) = "" Then

MsgBox "adini girin.", vbCritical, "Giris Gerekiyor"

theForm.txtadi.Focus

Else

If Trim(theForm.txtadres.Value) = "" Then

MsgBox "Adres girin.", vbCritical, "Giris Gerekiyor"

theForm.txtadres.Focus

Else

If Trim(theForm.txttelefon.Value) = "" Then

MsgBox "telefon girin.", vbCritical, "Giris Gerekiyor"

theForm.txttelefon.Focus

Else

If Trim(theForm.Chktur.Value) = 0 Then

MsgBox "Ariza türünü girin", vbCritical, "Giris Gerekiyor"

theForm.Chktur.Focus

Else

'--- son olarak gönderme

Frmariza_OnSubmit = True

End If

End IF

End Function

Sub cmdkontrol_onclick

Msgbox "deneme",3,32

End Sub

Function tarihgetir()

Document.Frmariza.txttarih.value = date() & time()

Msgbox str(hour)

End Function

</SCRIPT>

<CENTER><H1> Ariza Takip Formu </H1></CENTER>

<TD> <font color=#SS00CC> TARIH: </font></TD>

</TR>

<TD> ARIZAYI BILDIREN: </TD>

</TR>

<TD> ARIZA TÜRÜ: </TD>

<TD>

<Input type=checkbox Name="Chktur" VALUE="0" Checked> TEKNIK

<Input type=checkbox Name="Chktur" VALUE="1"> YAZILIM

<Input type=checkbox Name="Chktur" VALUE="2"> DONANIM

<Input type=checkbox Name="Chktur" VALUE="3"> M-MEDYA

<Input type=checkbox Name="Chktur" VALUE="4"> NETWORK

<Input type=checkbox Name="Chktur" VALUE="5"> DIGER

</TD>

</TR>

<TD> AÇIKLAMA </TD>

</TD>

</TR>

<TD> ACILIYET DURUMU: </TD>

<TD>

<OPTION SELECTED VALUE="0">NORMAL</OPTION>

</SELECT>

</TD>

</TR>

<TD> ISTENDIGI YER </TD>

<TD>

<Input type=Radio Name="RdYer" VALUE="0" Checked> Kendi Yerinde

<Input type=Radio Name="RdYEr" VALUE="1"> Serviste

</TD>

<TD> ADRES: </TD>

</TR>

<TD> TELEFON: </TD>

</TR>

</TABLE>

<BR>

<INPUT TYPE="SUBMIT" VALUE ="KAYDET">&nbsp

<INPUT TYPE="BUTTON" NAME ="cmdkontrol" VALUE ="KOTROL" >&nbsp

</CENTER>

</FORM>

</BODY>

</HTML>

II. JAVASCRİPT DİLİ

İstemci taraflı script yazmak için kullanılan diğer bir dil ise JavaScript dilidir. JavaScript özellikle bütün tarayıcılar tarafından desteklendiği için tercih edilir.

A. OLAYLAR

JavaScript ve VBScript programlamasında olaylar çok önemlidir. Çünkü script kullanıcıyla etkileşim için yazılır. Örneğin ziyaretçinin faresiyle bir düğmeye tıklaması Click olayının oluşmasına neden olur.

Bir olay, bir olay tutucuyu tetikler. Yani dugme1 adlı bir düğmeye tıklandığında dugme1_OnClick olay tutucusu tetiklenir.

Tablo : Olaylar ve oluştukları yer

Olay Açıklama HTML elemanı

onblur Odaklanmanın kaybedilmesi durumunda oluşur. <BUTTON>, <INPUT>, <LABEL>,

onchange İçindeki değerin değiştirilmesi durumunda ya da

odaklamanın kaybedilmesi durumunda oluşur. <INPUT>, <SELECT>, <TEXTAREA>

onclick Tıklandığında oluşur. Birçok eleman için geçerli.

ondblclick Çift tıklanıldığında oluşur. Birçok eleman için geçerli.

onfocus Odaklanıldığında. Alanın aktifleştirilmesi gibi. <BUTTON>, <INPUT>, <LABEL>,

onkeydown Bir tuşa basıldığında. Birçok eleman için geçerli.

onkeypress Bir tuşa basıldığında ve bırakıldığında. Birçok eleman için geçerli.

onkeyup Bir tuşun bırakılması durumunda. Birçok eleman için geçerli.

onload Pencerenin ya da dokümanın yüklemesi durumunda. <BODY>, <FRAMESET>

onmousedown Bir fare düğmesine tıklanması durumunda. Birçok eleman için geçerli.

onmousemove Farenin hareket ettirilmesi durumunda. Birçok eleman için geçerli.

onmouseout Farenin odaklandığı elemandan ayrılması. Birçok eleman için geçerli.

onmouseover Farenin bir eleman üzerine odaklanması. Birçok eleman için geçerli.

onmouseup Bir fare düğmesinin bırakılması durumunda. Birçok eleman için geçerli.

onreset RESET düğmesine tıklanarak form alanlarının

temizlenmesi durumunda. <FORM>

onselect Metinin seçilmesi durumunda. <INPUT>, <TEXTAREA>

onsubmit SUBMIT düğmesine tıklanarak formun sunucuya

gönderilmesi durumunda. <FORM>

Onunload Tarayıcının var olan dokümanı ya da penceresi

serbest bırakması durumunda. <BODY>, <FRAMESET>

Örnek: Alan Kontrolü.

Yukarıdaki satırda, ziyaretçi metin alanına veri girdiğinde alankontrol() adlı fonksiyon çalıştırılır.

<HEAD>

function alankontrol() {

alert ("alan değeri geçersiz")

}

</script>

</HEAD>

<BODY>

<form>

</form>

OnClick Olayı

Ziyaretçinin tarayıcı üzerindeki bir düğmeyi tıklaması durumunda Click olayı oluşur.

Örnek 20: Olaya Göre Fonksiyonun Çağırmak

<HEAD>

function mesaj() {

alert ("mesaj")

}

</script>

</HEAD>

<BODY>

<form>

</form>

</BODY>

OnSubmit Olayı

Submit olayı yine bir düğme türünden ortaya çıkar ve istemci bilgilerini sunucuya gönderir. Submit olayını kontrol etmek için bir form yapısı gerekiyor. Ve genellikle istemci tarafında çalışan bir bilgi formunun ardından, sunucu tarafında çalışan bir karşılık formunu işleme sokan Submit düğmesi kullanılır.

Örnek : Submit Olayı

Submit sırasında alanların kontrolü

OnSubmit="return (alankontrol())"

Yukarıdaki örnekte formun Submit edilmesiyle birlikte alankontrol fonksiyonu devreye girer.

Örnek:

<HTML>

<HEAD>

<TITLE>JavaScript ornegi </TITLE>

<!--

function testadi(form)

{

if (form.adi.value == "")

{

alert("adinizi girmediniz");

return false;

}

else

return true;

}

function testEmail(form)

{

if (form.email.value == "" ||

form.email.value.indexOf('@',0) == -1)

{

alert("E-mail yanlis");

return false;

}

else

return true;

}

function testalanlar(form)

{

if (testadi(form) && testEmail(form))

form.submit();

else

return false;

}

// -->

</SCRIPT>

</HEAD>

<BODY>

<H1>JavaScript Form Alan Kontrolü </H1>

</CENTER>

Name: <INPUT TYPE="TEXT" NAME="adi"><BR>

E-mail: <INPUT TYPE="TEXT" NAME="email"><BR>

<BR>

<INPUT TYPE="SUBMIT" NAME="Send" VALUE="Gönder"

onClick="testalanlar(test)">

</FORM>

</BODY>

</HTML>

OnReset Olayı

Reset olayı ise formdaki bütün bilgilerin silinmesini sağlar. Bu işlem genellikle bilgi girişi sırasında yapılan yanlışlardan dolayı form üzerindeki alanları silinmesini sağlar.

NOT: Bu dokümanlar Faruk Çubukçu tarafından hazırlanmıştır. Burada adı geçen ticari ünvanlar ve markalar bilgi amaçlı kullanılmışlardır ve kendi imtiyazlarına sahiptirler. Bu dokümanlar ticari amaçlı olarak kullanılmaz. Daha fazla bilgi için www.farukcubukcu.com adresine bakınız.

Örnek : OnReset Oayı

<HEAD>

function kontrol()

{

return confirm ('silmek istiyormusunuz?')

}

</script>

</HEAD>

<BODY>

</form>

</BODY>

III. UYGULAMALAR

Şirketimiz Web sayfasını için aşağıdaki alanları olan bir anket formu tasarlayın:

Ardından alanlara girişleri kontrol edecek bir script yazın. Alanlar boş geçilmesin, geçildiğin de uyarılsın.

Form yapısı:

Şirketimiz Hakkındaki Görüşleriniz:

ADI SOYADI:

MESLEĞİ:

ADRESİ:

İLİ:

ŞİKAYETİ:

TARİH:

VARSA EK BİLGİLER:

IV. GÖZDEN GEÇİRME

1. HTML belgesi içinde Script yazmanın yararı nedir?

2. Hangi Script dillerini kullanabiliriz?

3. Form validation nedir? Nasıl yapılır?

4. Olay (event) nedir? Tarayıcı üzerindeki olayları açıklayın.