Javascript Nedir?

Bu bağlantıyı tıkladığınıza göre artık şu işi kes-yapıştırdan ileri götürmek istiyorsunuz. Bizim de amacımız bu. Size JavaScript'in genel özelliklerini ana hatlarıyla vermek. Bundan sonrası size kalmış. Genel yazım kurallarını öğrendikten sonra yapılabilecek en güzel şey diğer web-cilerin yazdıkları javascript kodlarını incelemektir. Herhangi bir problemle karşılaştığınızda bizden de yardım alabilirsiniz. Bu konu ile ilgili olarak maillerinizi bekliyoruz.

Gelelim JavaScript'in genel bazı özelliklerine. Başlangıçta bazı konulara açıklık getirelim. Java ile JavaScript oldukça fazla derecede karıştırılmakta. Java Sun firması tarafından Pascal ve Delphi dillerinden esinlenerek yazılmış bir programlama dilidir. Sonuçta tarayıcıdan bağımsız bir program elde edersiniz. Yani bir exe veya com uzantılı dosya vardır elinizde. Fakat JavaScript bu tür bir programlama dili değildir. Yorumlanması için bir tarayıcıya ihtiyaç duyar. Bu yüzden script dilidir. Html dosyasını içine gömülüdür. Sonuçta elinizde exe veya com uzantılı bir dosya yoktur. Javascript , Netscape firması tarafından C dilinden esinlenilerek yazılmıştır. Yazılma amacı Html'in sahip olmadığı bazı özelliklerin web sayfalarında kullanılmak istenmesidir. Yani ziyaretçi ile etkileşim gibi önemli unsurlar Html'de yok veya oldukça az kapasitede diyebiliriz. Netscape firması bu konuya ağırlık vererek JavaScript script dilini internet ortamına kazandırmıştır.

Gelelim Netscape ve Internet Explorer tarayıcılarının JavaScript kodundaki farklı anlayışa. Bu gerçekten doğrudur. Netscape firması JavaScript dilini hazırladığında Microsoft firması bu dilin özelliklerini veya yazılım tarzını tam anlamıyla Internet Explorer'a eklemedi. Kendi yazım kurallarını belirledi. Bu yüzden biz JavaScript kodu yazarken bu iki tarayıcı özelliklerini de göz önünde bulundurmalıyız. Fakat bu her kodda karşımıza çıkmaz. Biz derslerimizde gerektiği yerde bu konuya yer vereceğiz.

Java Script'in bazı genel özellikleri :

Javascript kodlarını yazmak için Windows kullanıcıları için NotePad, Mac. kullanıcıları için Simple Text yeterlidir.
JavaScript kodları etiketi ile biter.
etiketi JavaScript'i anlamayan eski sürüm tarayıcıların bu kısmı geçmeleri içindir.
Genellikle yazım tarzı

şeklindedir.

İyi bir programcı kod satırlarında açıklama yapar. Bu satır şu işlemi gerçekleştiriyor gibi açıklayıcı bilgiler yazar kodlarının yanına. JavaScript'te bu tür açıklama // ile başlar ve // ile biter. Eğer açıklamanız bir satırdan fazla ise /* ile başlar */ ile biter.

Örnek:

// bu satır kullanılacak değişkenlerin tanımlanması
/* açıklama satırı 1
açıklama satırı 2
açıklama satırı 3 */

JavaScript kodları Html kodların arasında yer alır. Veya uzantısı js olan dosyalarda saklanarak yine Html içerisinden çağırılır. Java Appletleri gibi Html'den ayrı bir unsur değildir. Javascript Html'in bir parçasıdır.
Kullanılacak yere göre Html'in içerisinde kullanılır. Fakat genelde <head>...</head> etiketleri arasında kullanılır.
Javascript kodları bittiğinde elinizde asla kendi başına çalışan uzantısı exe veya com olan bir dosya olmaz. Her zaman için tarayıcı tarafından yorumlanması gerekir. Yorumlanması demek Javascript kodunun çalışması anlamındadır.
Nesne ve buna uygulanan olaylar ile ilgili bir takım görevleri vardır. Javascript kullandığı her unsuru nesne olarak algılar. Siz bu nesneleri tıklamak, üzerine gelmek, üzerinde çıkmak gibi olaylar ile çalıştırırsınız ki bu da Javascript'in ziyaretçi ile etkileşmesi demektir.
Genel öğrenim yapımız diğer programlama dillerine nazaran biraz farklı olacaktır. Bu Javascript'in bir script dili olmasında ileri gelir.

Şimdi öğrenmeye geçiş aşamasında konu başlıklarına şöyle bir göz atalım.

1. Değişkenler :

Bu derste Javascript'te oldukça yoğun olarak kullanılan değişkenlerin nasıl bir yazım kuralı ile oluşturulduğunu ve kullanımı anlatılmaktadır.

2. Internet Explorer ve Netscape tarayıcı farkları :

Bu derste JavaScript kodlarının daha önceden belirtilen nedenlerden dolayı farklı kod ihtiyacını nasıl giderilebileceğini göreceğiz.

3. Ekrana çıktı ve klavyeden bilgi girişi :

Bu derste istenilen bir uyarı veya değişkenin html sayfasında gösterilmesini ve klavyeden bilginin nasıl alınması gerektiğini göreceğiz.

4. Koşul Yapıları :

Bu derste if .. then yapısı yani istenilen bir olayın koşula nasıl bağlandığını göreceğiz.

5. Döngü Yapısı :

Bu derste istenilen bir işlemin birden fazla yapılması istendiği durumlarda for döngüsünün nasıl kullanıldığına yer vereceğiz.

6. Fonksiyon kavramı :

Bu derste Javascript'in önemli bir kısmı olan fonksiyonları inceleyeceğiz. Fonksiyonlar aslında birer Javascript program parçacıklarıdır. Bunların neden ve nasıl kullanıldığı gibi konular dersin içeriği arasındadır.

7. Nesneler ve Özellikleri :

Bu derste Javascript'i script dili haline getiren nesneleri ve özelliklerini inceleyeceğiz.

8. Olaylar :

Bu derste Nesneleri yönlendirmekte kullanılan olayları inceleyeceğiz.

9. Javascript ile DHTML :

Bu derste Javascript'in DHTML üzerinde nasıl etkili olabileceğini göreceğiz.

Bu yazının öğrenme açısından kullanım şekli şu şekilde olmalıdır. Her konuyu şöyle bir okuyup hemen ardından uygulmalısınız. Yalnız her kod örneği (değişkenler konusu gibi) kendi başına bir iş yapmaz. Diğer birtakım kodlarada ihtiyaç duyar. Bu yüzden bu tip konuları sadece bilginiz olması amacıyla okuyup geçiniz. Bu bölümler diğer kısımlarda kullanacağınız kodlara yabancı olmamanız için verilmiştir.

ASP

Derslere başlamadan önce, dersleri yarıda bırakıp da kaçmamanız için size bazı gerçeklerden bahsetmem gerektiğini düşünüyorum.. :)

Herhalde bunun bir şaka olduğunu anladınız.. ASP sandığınız kadar zor bir iş değil. Yapmanız gereken karar vermek ve PWS kurulumunu yapmak.
Eğer buraya gelmeden önce başka yerlerde, başka kişilerden ASP öğrenimine başladı iseniz korkmaya gerek yok.. Siz zaten en önemli işi yapmış karar vermişsiniz.. Gerisi siz istemeseniz de gelecektir.. Buna inanın..

Ben burada biraz da ASP öğrenirken yaşadığım deneyimleri yazacağım.. Sanıyorum böylece siz benim düştüğüm hatalara düşmeyecek daha kolay ve çabuk bir şekilde öğreneceksiniz ASP'yi..

Yeni bir dil öğrenmek nasıldır bilirsiniz. Önce konuşmayı bilmeli, ardından yeni diliniz için alıştırmalar yapmalısınız... Yani ben burada sizin HTML bildiğinizi varsayıyorum... ASP ve diğer web programlama dilleri HTML kodları içine yazılır.. Yani onlar da HTML'in bir parçalarıdır.

Öncelikle neden ASP öğrenmek istediğinizi sorun kendinize.. Neden olabilir?
Artık HTML size yetmiyor olabilir. Daha interaktif sayfalar yapma isteği var içinizde. Sayfamda formlar olsun, ziyaretçi ile bir bütün olan sayfalarım olsun istiyorum diyorsanız.. Ya da sayfanız da üyelik sistemi olsun kim geliyor kim gidiyor kontrol edeyim diyorsanız.

Bu nokta da ben size yardım etmeye çalışacağım...

Bu arada bir şeye dikkatinizi çekmez istiyorum, benim size örnek olarak yazdığım kodları kopyalamaz kendiniz yazarsanız daha çok başarılı olursunuz. Hata olduğu taktirde örneklerden yararlanabilirsiniz. Unutmayın, kodları kendiniz yazacaksınız.

Kodları yazarken HTML kodlarını kırmızı , ASP ve VBScript kodlarını yeşil olarak yazıyorum ki ayırmamız kolay olsun..

Karar verdiyeniz şimdi başlayabiliriz..

Önce PWS (Personel Web Server) kuralım.

Ardından ASP'ye giriş yapalım...

REQUEST nesnesi hakkında... (.Form ve .QueryString)

Artık ASP hakkında Temel Bilgileri öğrendiğimize göre isteğimiz daha ileri konuları öğrenmek olacaktır. Şimdi ASP ile formlarla neler yapabileceğimize bir bakalım.

Request

Request 'in İngilizce karşılığı -talep, -istek demektir.
Biz ASP sayfalarımızdan ne isteyebiliriz? 1 buçuk porsiyon acılı Adana kebabı isteyemeyeceğimize göre Form' dan bilgi isteriz. Ya da Veritabanından veri isteriz.
Request nesnesinin içinde de 4 ana nesne vardır. Bunları tanıyalım:

Query String ve Form

Web ziyaretçimizden bize doğru gelen her şey QueryString koleksiyonunu oluşturur. Bu bir formun gönder düğmesine basarak gönderilen bir bilgi yumağı olabilir. Formdan gelen her türlü bilgi olabilir.
Form' un oluşturduğu bilgileri Get yöntemi ile alırsak çevre değişkenlerinden Query_String değişkeninin içine yazılır. Bir başka deyişle Server' da Query_String değişkeninin değeri olarak yazılır. Form' dan bilgileri Post yöntemi ile alıyorsak bunlar Request nesnesinin Form kolleksiyonunun içinde Form'un değişken adları ve ziyaretçilerin bu değişkenler için sağladığı değerler olarak ayrı ayrı yazılır. Get ile sınırlı Post ile sınırsız veri alabiliriz. (Get ve Post yolu ile bilgi almayı bir sonraki dersimizde bulabilirsiniz.)
QueryString ile bilgi alırız demiştik. Bu bilgilerin şu özelliklerini kullanabiliriz:

Content_Length: Bir Form' dan gelen bilgilerin tümünün Byte olarak boyutudur.

Remote_Host: Ziyaretçinin IP adresini verir, ancak İnternet' e çevirmeli ağ ile bağlanan ziyaretçilerimiz her seferinde farklı bir IP bildirebilir. Bu yüzden bu bilgiyi ziyaretçinin kimliği sayamayız.

Request_Method: Form' da kullandığımız Get veya Post metodunu bildirir. Yani Form'u göndermekte kullandığımız yöntem Get mi? yoksa Post mu? bize bildirir.

Script_Name: O anda çalışmakta olan ASP sayfasının adını verir.

Request nesnesi ve onunla birlikte kullanacağımız 4 ana nesneyi öğrendik.. Yavaş yavaş iyi bir Asp programcısı olma yolunda ilerliyoruz. Adımlarınızı emin ve sağlam atın..

GET metodu ile veri alma

Derslere başlamadan önce, sizin HTML bildiğinizi varsayıyorum demiştim. Asp kodlarını yazdığımız sayfalarda Html gerekli, çünkü Web'in dili Html.
Html biliyorsanız Form göndermekte kullanılan iki yöntem olduğunu da bilirsiniz. Bunlardan birisi Get diğeri ise Post metodudur.
Bir önceki dersimizde formdan Get yöntemi ile sınırlı, Post yöntemi ile sınırsız bilgi alabiliriz demiştik.
Şimdi biz sınırlı bilgiyi inceliyeceğiz. Yani konumuz, Form' dan Get yöntemi ile bilgi alma.

Form' dan Get methodu ile QueryString olarak bilgi alabiliriz. Şimdi bir örnek yapalım ve hem bir önceki dersimizde gördüğümüz QueryString' e daha yakından bakalım, hem de formdan Get metodu ile bilgi alalım. Bu kodlamaların oluşturacağı sayfayı get.asp adı ile kaydedin:

<% @LANGUAGE=VBScript %>
<%
Dim strAdi, strSoyadi, Hambilgi, islenmisBilgi

If Request.ServerVariables("QUERY_STRING") <> "" Then

strAdi = Trim(Request.QueryString("adi"))

strSoyadi = Trim(Request.QueryString("soyadi"))

Hambilgi = Trim(Request.QueryString("mesaj"))

islenmisBilgi = Replace(Hambilgi, vbcrlf, "<br>" & vbcrlf)
%>

<html>
<head>
<title>Form' dan Get Yöntemi ile bilgi alma </title>
</head>
<body>
Fomdan bilgi ulaştı <br><br>
Gelen bilgiler: <br>
adı: <%= strAdi %> <br><br>
soyadı : <%= strSoyadi %> <br><br>
Ham Bilgi: <%= Hambilgi %><br><br>
İşlenmiş Bilgi: <%= islenmisBilgi %> <br><br>
"Query_String" olarak gelen bilgi: <br>
<%= Request.ServerVariables("QUERY_STRING") %>
</BODY>
</HTML>

<%
Else
%>

<html>
<body>
Bilgi verir misiniz? <br>
<form action= "<%= Request.ServerVariables("SCRIPT_NAME") %>" mtehod="Get">
Adınız: <input type="text" name="adi"><br>
Soyadınız: <input type="text" name="soyadi"><br>
Mesajınız: <textarea name="mesaj"> Mesajınızız buraya yazın! </textarea><br>
<input type="submit" name="gönder" value="gönder">
</form>
</html>
<% End If %>

Uzunca bir kodlamanın ardından şimdi yazdıklarımıza daha yakından bakalım. Ama önce bu sayfayı çalıştırın. Bir form çıkacaktır karşınıza bunu doldurun ve Gönder deyin. Şimdi bakalım kodlamada neler yazmışız?
Öncelikle en başta bu sayfanın VBScript' le yazılacağını bildirmemiz gerekiyor. Yani bu sayfada VBScript kullanılacak dedik.. Değişkenlerimizi tanımladık, 4 tane değişkenimiz vardı. If deyimimiz ile kontrolü ele geçiriyoruz. Orada ServerVariables diye bir deyim görüyoruz. Bunu sonraki derslerimizde göreceğiz. Ama kısaca açıklamak gerekirse ServerVariables server'ın değişkenleridir. Biz bu değişkenlerden QUERY_STRING olanı kullanacağız. QueryString nesnesini bir önceki dersimizde görmüştük. Şimdi onun nasıl kullanıldığını görüyoruz. Şu satırda:

strAdi = Trim(Request.QueryString("adi"))

strAdi adlı değişkenimize formdan adi olarak gelecek bilgiyi ata diyoruz. Yani adi isminde gelecek olan bilgiyi talep ediyoruz. Request -talep demekti biliyorsunuz. Burada tam olarak demek istediğimiz; Formdan adi isminde QueryString olarak gelecek bigiyi strAdi değişkenine atıyorum ve yanındaki boşlukları da temizliyorum. Biliyorsunuz ki Trim metin düzenleme fonksiyonlarındandır.
Bu kodlarımızı html ve body bölümlerinden önce yazdık. Html ve Body' den sonra Form' dan gelen bilgileri sayfaya yazdırdık. Bunu da Form' dan gelen bilgileri atadığımız değişkenler ile yapıyoruz. Şu satırda ise:

<%= Request.ServerVariables("QUERY_STRING") %>

QueryString olarak gelen yani işlenmemiş olan bilgiyi bize göstermesini istedeğimiz ServerVariables yani Server değişkenlerini kullanıyoruz. Html ve Body bölümlerini bitiriyoruz. Neden? diyeceksiniz. Çünkü burada html sayfasını bitiriyor ve yeni bir sayfa yapıyoruz. <% else %> deyimini görmüş olmalısınız. Bu deyimden sonra bir form sayfası yazmışız. Bu demek oluyor ki, eğer form yazılmışsa gelen bilgileri göster, form yazılmamışsa form sayfasını göster. Bu yüzden sayfayı ilk açtığımızda karşımıza form sayfası çıkıyor. Bu kadar basit!
Form'un action bölümünü oluşturan Şimdi şu satıra da dikkat edelim:

<%= Request.ServerVariables("SCRIPT_NAME") %>

Burada formumuzun işleneceği sayfanın adını yazmamız gerekiyordu. Biz Server Değişkenlerini kullandık. Server Değişkenleri hakkında daha geniş bilgiyi sonraki derslerimizde bulabilirsiniz...

Bu derste Form' dan Get yöntemi ile bilgi almayı öğrendik.. Bir taraftan da Request ve QueryString nesnelerinin ne işe yaradığını daha iyi kavramış olduk..

POST metodu ile bilgi alma

Bir önceki dersimizde Form'dan Get methodu ile bilgi almayı öğrenmiştik. Şimdi ise konumuz Form'dan Post yöntemi ile bilgi alma.
Post metodunun Get metodundan farkı daha öncede söylediğimiz gibi Get ile sınırlı Post ile sınırsız bilgi alabilmemizdir. Get yöntemi ile sadece QueryString olarak gelen bilgileri alabiliriz. Ama Post yönteminde böyle değil.
Şimdi bir örnek yapalım ve olaya daha yakından bakalım. Yazacağımız kodları post.asp adı ile kaydedin:

<% @LANGUAGE=VBScript %>
<%
Dim Adi, Soyadi, Bilgi

If Request.ServerVariables("CONTENT_LENGTH") <> 0 Then

Adi = Trim(Request.Form("adi"))

Soyadi = Trim(Request.Form("soyadi"))

Bilgi = Trim(Request.Form("mesaj"))

Bilgi = Replace(Bilgi, vbcrlf, "<br>" & vbcrlf)

%>
<html>
</head>
<title>Form' dan Post Methodu ile Bilgi alma </title>
</head>
<body>
<b>
Form'dan gelen bilgi:<br>
Adı: <%= Adi %> <br>
Soyadı: <%= Soyadi %> <br>
Mesaj: <%= Bilgi %><br>
</b>
</html>

<%
Else
%>

<html>
<body>
Bize bilgi verir misiniz?<br>
<form action="<% Request.ServerVariables("SCRIPT_NAME") %>" method="post">
Adınız: <input type="text" name="adi"><br>
Soyadınız: <input type="text" name="soyadi"><br>
Mesajınız: <textarea name="mesaj">Mesajınızı buraya yazın!</textarea><br>
<input type="submit" name="Gönder" value="Gönder">
</form>
</html>

<% End If %>

Şimdi bu formu çalıştırın. Gönder deyin..
Bir önceki dersimizde yazdığımız formdan pek farkı yok diyebiliriz. Rutin form işlemleri. Ama tek fark bu Form Post yöntemi ile gönderiliyor ve QueryString olarak gelen bilgi yok. İleride formdan gelen bu bilgileri browser penceresine değil bir metin dosyasına ya da bir veritabanına yazacağız. Böylece şimdiki gibi uçup giden değil kalıcı veriler elde etmiş olacağız..
Şimdi yazdığımız sayfnın kodlarına bir bakalım. Yine sayfamızda VBScript kodları kullanacağız dedik. Sonra değişkenlerimizi tanımladık. If deyimimiz var. Bu If deyimi server değişkenlerinden CONTENT_LENGTH 'in içi boş mu değil mi? Ona bakıyor. Yani değeri 0 ' mı değil mi? diye kontrol ediyor. Daha sonra değişkenlerimize değer atadık. Yani Form' dan gelecek bilgileri değişkenlerimize değer yaptık. Normal Html sayfamızı yazdık ve bitirdik! Else deyimini ve yeni bir Html sayfası yazdık. Bunun nedeni, sayfa ilk açıldığında Form haliyle boş olacaktır. Böylece ilk olarak form sayfası görüntülenecek daha sonra forma gönderdiğimiz bilgiler görüntülenecektir.
Burada If deyiminin ne kadar önemli ve işe yarar olduğunu anlıyoruz.

<% End If %>

İle sayfamızı bitiriyoruz!

Sanıyorum şimdi Get ve Post yöntemleri arasındaki farkı daha iyi anladık.. Form işlemleri Asp sayfalarımızda en sık kullanacağımız unsurlardan bir tanesi. Bunları iyi öğrenmekte yarar var..

Formdan gelen verilerin
güvenlik kontrolünün yapılması

İleride Form' dan gelen bilgileri böyle Browser penceresine değil de ya bir metin dosyasına ya da Veritabanına kaydedeceğiz demiştim. Hal böyle olunca, internet ortamında Pollyanna gibi her zaman iyi niyetli, iyi düşünen insanlar olmadığını da varsayarak Form'larımızda güvenlik kontrolü yapmamız gerekecektir. Bu neden gereklidir? Hemen onu da açıklayayım. Dedik ya, hep iyi insanlar çıkmaz karşımıza diye. Bu iyi olmayan (aslında iyi olan ama çizgi filmlerde hep kötü insanlara özenen kişilerdir bunlar!) kişiler Form' dan bize gönderdiği bilgilerin içine bazı kodlar yazarlar ve bu kodlar ile bizim sitemizi bulunduğu Server' dan alıp başka bir yere yönlendirme bile yaparlar.. Biz de bunları düşünerek hep iyi niyetli olamalıyz. Tedbirimizi almalıyız değil mi? Şimdi bir örnek yapalım. Daha sonra söylecek çok sözümüz var! Önce bir form sayfası yapalım, daha sonra hem bu formun içindekiler işleyen hem de denetim yapan bir asp sayfası yazalım.. Buyrun:

<html>
<head>
<title>Asp ile Avcılık </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-9"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
</head>
<body>
<p>
<b> Merhaba Form Sayfamıza Hoşgeldiniz.. Lütfen Form'u eksiksiz doldurun! </b>
</p>
<form action="denetle.asp" method="post">
<p> <input type="text" name="adi"> </p>
<p> <input type="text" name="soyadi"> </p>
<p> <textarea name="mesaj">Mesajınızı buraya yazın. </textarea> </p>
<p> <input type="submit" name="Gönder" value="Gönder"> </p>
</form>
</body>
</html>

Bu basit form sayfasını form.htm adı ile kaydedin.. Şimdi de bu Form' dan gelecek bilgileri denetleyecek olan asp sayfamızı yazalım:

<% @LANGUAGE=VBScript %>
<html>
<head>
<title>Asp ile Avcılık</title>
<%
Function avla(byval hedef)
hedef = replace(hedef, "'","''")
hedef = replace(hedef,"_","")
hedef = replace(hedef,"*","")
hedef = replace(hedef,"?","")
hedef = replace(hedef,"%","")
hedef = replace(hedef,"<","")
hedef = replace(hedef,">","")
hedef = replace(hedef,"'","''")
hedef = replace(hedef,"chr(13)","<br>")
avla=trim(hedef)
End Function
%>

<%
bos=""
Adi = Trim(Request.Form("adi"))
Adi = avla(Request("adi"))
if adi="" then bos=bos + "İsminizi girmemişsiniz. <br>"

Soyadi = Trim(Request.Form("soyadi"))
Soyadi = avla(Request("soyadi"))
if soyadi = "" then bos=bos + "Soyadınızı girmemişsiniz. <br>"

Bilgi = Trim(Request.Form("mesaj"))
Bilgi = avla(Request("mesaj"))
if Bilgi = "" then bos=bos + "Mesajınızı yazmamışsınız. <br>"
Bilgi = Replace(Bilgi, vbcrlf, "<br>" & vbcrlf)

if bos <> "" then
bos=bos + "<br><a href=javascript:history.back()> << Geri Dönmek içinTıklayınız.</a>"
bos = "LÜTFEN AŞAĞIDAKİ EKSİKLİKLERİ DOLDURUP, FORMU YENİDEN GÖNDERİNİZ...<br> <br>" + bos
%>
</head>
<body>
<% Response.Write (bos) %>
<% else %>
<b>
Form'dan gelen bilgi:<br>
Adı: <%= Adi %> <br>
Soyadı: <%= Soyadi %> <br>
Mesaj: <%= Bilgi%><br>
</b>
</body>
</html>
<% End If %>

Uzuunca bir kodlamanın ardından bu sayfayı denetle.asp adı ile kaydedin. Zaten form.htm sayfamızın action bölümünde bunu belirtmiştik. Yani denetle.asp sayfasına git demiştik.. Şimdi form.htm sayfasını Web Server' da çalıştırın ve boş olarak gönder deyin.. Sonuç?
Şimdi kodlarımızı inceleyebiliriz.
form.htm sayfasında incelenmeye değer pek birşey yok.. Her zamanki form sayfası.. Önemli olan bu form sayfasında gelen bilgileri işleyecek olan aynı zamanda bir de denetleyecek olan denetle.asp sayfasıdır. Bakalım denetle.asp sayfasında neler yapmışız?
Öncelikle sayfanın en başına bu sayfada VBScript kodları yazacağız dedik. <html> <head> ve <title> satırlarını geçtikten sonra head ' ı kapatmadan denetlemeye başlıyoruz. Bunu bir fonksiyon (function) ile yapıyoruz. Fonksiyonumuzun adı avla. Bize zarar verebilecek karakterleri avlıyoruz. Hedefleri belirliyoruz. Mesela hedefimiz bir " < " küçüktür ya da ">" büyüktür işareti olabilir. Html kodları bunların arasında yazıldığından bize zarar verebilirler. (Çok karamsar olduk çook!)
Hedefleri ve avlamamız gereken işaretleri belirledikten sonra fonksiyonumuza son veriyoruz.

End Function

Daha sonra formdan gelen bilgileri hem işliyor hem de denetliyoruz. Adi isimli değerimizi ele alırsak:

Adi = Trim(Request.Form("adi"))
Adi = avla(Request("adi"))
if adi="" then bos=bos + "İsminizi girmemişsiniz. <br>"

Burada öncelikle adi olarak gelecek bilginin yanlarındaki boşlukları temizliyoruz. Daha sonra avla fonksiyonunu kullanarak bir denetleme yapıyoruz. If deyimi ile de adi alanının boş olup olmadığını sınıyoruz. Eğer boş ise sayfaya "İsminizi girmemişsiniz" yazdırıyoruz.
Aynı şeyleri diğer alanlarımzı için de tekrarlıyoruz. Amacımız alanların boş olmaması ve istemediğimiz karakterlerden arındırılması..
Alanları kontrol ettikten sonra formu dolduran kişi eğer formu doldurmadan gönder demişse ya da istemediğimiz karakterleri yaptıysa form işleme işlemi duracak ve şu hata mesajını verecek: "LÜTFEN AŞAĞIDAKİ EKSİKLİKLERİ DOLDURUP, FORMU YENİDEN GÖNDERİNİZ..."
Formu dolduran kişi o anda hatasını anlayacaktır ve geri dönüp formu doldurmak isteyecektir. Biz de bir önceki sayfaya gitmek için bir link yazıyoruz.
Formu dolduran kişi bu sefer formu eksiksiz doldurduğunda ve gönder dediğinde form normal bir şekilde işlenecek ve formu dolduran kişinin bize verdiği bilgileri sayfaya yazacaktır.

Bu derste akıllı bir form işleme sayfası yazdık. Bu bile VBScript ile yazılan Asp sayfalarının ne kadar akıllı olduğunun kanıtı olabilir. Ama bu akıl biz olmadan hiç birşeye yaramaz.. Bu yüzden bu aklı çalıştırmak için mümkün olduğu kadar çok araştırmalı ve öğrenmeliyiz.. Unutmayın bu aklın bize ihtiyacı var...

Veritabanına nasıl bağlanırız? (ADODB.Connection)

Artık Asp öğrenim merdivenimizde bir basamak daha yukarı çıkıp Profesyonelliğe adım atmak üzereyiz. Asp ve onun ayrılmaz parçası olan VBScript ile yapacağımız bir çok şeyi öğrendik.. Bundan sonra daha ileriye gidiyoruz. Bu derste Veritabanına bağlantıyı öğreneceğiz.. Böylece formdan gelen bilgileri Veritabanına yazacak, bu bilgileri tekrar veritabanından okuyabileceğiz. Şimdi veritabanına bağlantı için bize neler gerekli şöyle bir göz atalım:

Öncelikle ActiveX ve Veri Erişim ADO nesnelerinden söz edelim.

ADO gerçekten bir ASP nesnesi olmaktan çok Server Component'i (server bileşeni) sayılır. Bu bileşene biz ASP içinden bir ActiveX nesnesi ile ulaşırız.
Yani daha anlaşılır biçimde söylemek gerekirse, ADO bir Server Bileşeni ve bu bileşene ulaşmak için bir ActiveX nesnesini kullanırız..
PWS kurulumu yaparken Custom / Özel seçeneği seçin ve şunları yapın demiştik:

"açılacak yeni diyalog kutusunda Microsoft Data Acces Components (MS Veri Erişim Bileşenleri) satırına işaret koyarak Alt Bileşenleri Göster düğmesini tıklayın. Açılacak seçme kutusunda ise ADO Documentation satırına işaret koyun. Bu belgelerden daha sonra veri-yönlendirmeli Web uygulaması yaparken yararlanacağız.. "

Burada veri-yönlendirmeli web uygulaması dediğimiz olay, veritabanına veri ekleyip, veritabanından veri çekerek yapacağımız Web Uygulamalarıdır.

ODBC işliyor mu?

ASP sayfaları geliştirme ortamımızda, ODBC (Open Database Connectivity, Açık Veritabanı Bğlantısı) olması gerekir.
Windows 95, 98 veya NT4 işletim sisteminizde Denetim Masasında ODBC, ODBC32 veya "ODBC Veri Kaynakları (32 Bit)" adlı bir simge görüyor olmalısınız. Bunu açın, Sistem DSN sekmesini ve açılan pencerede göreceğiniz Ekle döğmesini tıklayın. Buradaki Access, dBase, Exel, FoxPro, Paradox sürücüleri 4.00.3711.08 veya daha büyük mü? Değilse Microsoft'un sitesinden (http://www.microsoft.com/data/download.htm) Microsoft Data Acces Components (sürüm 2.1.1.3711.11 GA, 6.2 MB) güncelleme dosyasını indirin ve sisteminizi güncelleştirin. Windows 2000 kurulu sistemlerde bunu yapmaya gerek yok. Böylece sisteminiz, ileride yazacağımız veri-yönlendirmeli Web uygulamaları için hazır hale gelmiş olacaktır.

Burada küçük bir ayrıntı olan ODBC ' nin işleyip işlemediğine baktık. ODBC veritabanına bağlanmamız için gerekli olan açık veritabanı bağlantısıdır.

Şimdi bu önemli bilgileri öğrendikten sonra bir veritabanı dosyası oluşturalım. Daha sonra o veritabanı dosyasına bağlanıp içindekileri okuyalım.. Hadi bakalım..

Veritabanı dosyasını istediğiniz bir veritabanı programı ile oluşturabilirsiniz. Bu konuda en çok kullanılan program Access' tır. Siz isterseniz Excel de kullanabilirsiniz.. Burada vereceğimiz örnekler Access veritabanı programına göre olacaktır..

Şimdi Access ile bir veritabanı oluşturalım. Veritabanımızın ismi ornekler olsun. İçinde adres isimli bir tablo bulunsun.. Şimdi adres tablosunun içindeki alanları belirleyelim:

adres

id	Otomatik Sayı (birincil anahtar)
isim	metin
telNo	metin
adres	metin (100)

ornekler isimli veritabanımızın adres isimli tablosundaki alanları belirledik. Bu alanları istediğiniz gibi doldurabilirsiniz. Ben alanlara gerçek olmayan veriler girdim.. Ne de olsa örnek bir tablo..

adres isimli tablodaki alanlar...

Veritabanı dosyamız hazır olduğuna göre şimdi sıra onu kullanmakta. (Veritabanımızı .asp dosyaları ile aynı yere, yani Web Server'ın kök dizinine koyduk değil mi?)
Şimdi Denetim Masasını açın. Oradan ismi ODBC (ya da ODBC 23 bit veya ODBC veri kaynakları, sizin bilgisayarınızda hangisi varsa!) onu açın. İkinci sekme olan Sistem DSN' ti tıklayın. Açılacak bölümdeki Ekle / Add düğmesini tıklayın. Burada veritabanınıza uygun sürücüyü seçin.. Biz burada Access ' ı kullandığımız için birinci seçeneği işaretleyip son diyoruz.

Şimdi sıra veritabanını tanıtmakta.

Veri kaynağı adı olarak ornek dedik. Açıklama olarak da bir deneme olduğunu belirttik. Daha sonra aşağıdaki butonlardan "Seç" düğmesine basarak veritabanımızı seçtik.

Ve sonuç:

Sonuç olarak ornek isimli veritabanımızın başarılı bir şekilde tanıtıldığını görüyorsunuz. Şimdi bunu Asp sayfalarımızda kullanabiliriz. Ama kendi bilgisayarımızda. Peki ya İnternet ortamında ne yapacağız? Bunun cevabını biraz sonra vereceğiz.. Şimdi veritabanına bağlanalım.

Veritabanına bağlantı

Ado' dan söz etmiştik. Veritabanına bağlanırken kullanacağımız Ado'nun Connection nesnesidir. Bu nesne ile veritabanına bağlantı sağlarız. Kullanımı şöyledir:

<%

Dim Veriyolu

Set Veriyolu = Server.CreateObject("ADODB.Connection")

Veriyolu.Open "Veri_Adi"

%>

Önce değişkenimizi tanımladık, ardından Veritabanına bağlantıyı sağladık. Daha sonra veritabanına bağlandığımız değişkenle veritabanını açtık: Veriyolu.Open "Veri_Adi" . Veri_Adi yerine tanıttığımız veritabanının adını yazarız. Biz ornek diye tanıttık. O zaman bu bağlantı bize göre şöyle olmalı:

<%

Dim Veriyolu

Set Veriyolu = Server.CreateObject("ADODB.Connection")

Veriyolu.Open "ornekler"

%>

İşte bu kadar kolay..

Biraz önce Internet ortamında veritabanını bu şekilde nasıl tanıtacağız? dedik. Bunun için Ole-DB türü bağlantıyı kullanacağız. Yani bu işlerle uğraşmadan Veritananının doğrudan adresini vererek. Konuyu biraz daha ayrıntılı ele alalım.

OLE-DB türü Veritabanı bağlantısı

Biraz önce öğrendiğimiz veritabanına bağlantı türü DSN' li Veri bağlantısı idi. Şimdi Ole-DB türü yani DSN' siz veritabanı bağlantısını öğreneceğiz. Bunun için veritabanının yolunu tam olarak yazmalıyız. Bir örnek vermek gerekirse:

Dim veriYolu, veriDeyim

Set veriYolu = server.CreateObject("ADODB.Connection")

veriDeyim = "Provider=Microsoft.Jet.OLEDB.4.0;" &_

" Data Source= C:\inetpub\wwwroot\ornek.mdb"

server.mapPath("ornek.mdb")

veriYolu.open (veriDeyim)

Bu örneği biraz geniş olarak ele alalım.
İki tane değişkenimiz var. Önce onları tanımladık. ADO ' nun Connection nesnesi ile veritabanımıza bağlantıyı sağladık, bu bağlantıyı sağlarken Microsoft' un Jet sürücüsünü kullanacağımızı ve sürümünü belirttik.

veriDeyim = "Provider=Microsoft.Jet.OLEDB.4.0;" &_

(Çok küçük bir ayrıntı , deyimin sonundaki "&_" işareti kafanızı karıştırmasın. Bu işaret bir alt satıra indiğimizi belirtiyor. ASP sayfalarında çok uzun deyimleri bu işaret kullanarak bir alt satıra bölebiliriz.)
Daha sonra dosya yolunu verdik. (Sizin dosyanız nerede ise onun yolunu bildirmelisiniz. Ama unutmayın, veritabanı dosyası Web Server'ın kök dizininde olmalı. )

" Data Source= C:\inetpub\wwwroot\ornek.mdb"

Son olarak veritabanımızı açtık..

veriYolu.open (veriDeyim)

Bir sonraki dersimizde veritabanındaki kayıtları sayfada göstereceğiz.. Böylece veritabanı bağlantımızın olup olmadığını da sınamış olacağız...

Veritabanından nasıl bilgi alırız?
(SQL:SELECT ve ADODB.Recordset)

Bir önceki dersimizde veritabanına nasıl bağlanacağımızı öğrenmiştik. Şimdi bağlantığımız bu veritabanından nasıl veri çekeceğimizi yani veritabanının içindeki bilgileri nasıl sayfaya yazdıracağımzı öğreneceğiz.

Önce SQL

Kısaca SQL' dan söz edelim. SQL veritabanından veri okumak, veri değiştirmek, silmek gibi işlemleri yapabilmemiz için geliştirilmiş bir dildir.
Biz burada SQL ' ın SELECT komutunu göreceğiz. Daha sonraki derslerde SQL'ın diğer fonksiyonlarından da söz edeceğiz. SQL' ın SELECT komutu ile kullanımı şöyledir:

sql = "SELECT adi, soyadi FROM adres"

Bu şekildeki bir kullanımda veritabanından adres isimli tablodan sadece adi ve soyadi alanlarından veri alabiliriz. Tablodaki bütün alanları seçmek için ya bütün alanların adını yazacağız ya da:

sql = "SELECT * FROM adres"

Gördüğünüz gibi " * " işareti ile tablodaki bütün alanları seçebiliriz.
Değişkenimizin adı sql ama bu zorunlu değil. Siz istediğiniz bir ismi değişken olarak atayabilirsiniz.

Recordset

Veritabanına bağlandıktan sonra verileri sayfaya yazdırmada bize yardımcı olacak nesne ADO' nun Recordset nesnesidir. Oluşturduğumuz veriyolundan sayfalarımıza bilgi gelmesi için .Execute (icra et) metodunu kullanırız. Bu komuta icra edecek bir komut SQL' dır.

Şimdi bir örnek yapalım. Önce veritabanına bağlanalım. Daha sonra veritabanındaki bilgileri sayfaya yazdıralım. Bu örneği baglanti.asp adı ile kaydedin:

<html>
<head>
<title>Veritabanından veri çekme</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-9">
</head>
<%
Dim veriYolu, sql, Kayitdizisi

'veritabanına bağlanalım

Set veriYolu = Server.CreateObject("ADODB.Connection")
veriYolu.Open "ornek"

'recordset nesnesini oluşturalım

Set Kayitdizisi = Server.CreateObject("ADODB.Recordset")

'sql kodlamasını yapalım

sql = "SELECT * FROM adres"

'son olarak verileri sayfaya yazdırmak için

Kayitdizisi.Open sql, veriYolu, aOpenStatic
%>

<body>
<p>
<table border="0" width="60%">

<tr>
<td><b>sıra:</b> </td>
<td><b>İsim:</b> </td>
<td><b>Telef. no: </b></td>
<td><b>Adres: </b></td>
</tr>

<% Do While Not Kayitdizisi.eof %>

<tr>
<td><%=Kayitdizisi("id") %> </td>
<td><%=Kayitdizisi("isim") %></td>
<td><%=Kayitdizisi("telNo") %></td>
<td><%=Kayitdizisi("adres") %></td>
</tr>

<% Kayitdizisi.MoveNext
Loop %>

</table>
</body>
</html>

Bu sayfayı kaydedip açtığınızda görüntü şöyle olmalıdır:

Gördüğünüz gibi veritabanındaki veriler sayfaya yazdırıldı..

Şimdi kodlamayı daha derinlemesine inceleyelim:

ASP kodlarının arasında önünde tek tırnak ( ' ) işareti olan satırlar açıklama satırlarıdır. Bu satırlar orada ne yapmak istediğimizi açıklıyor.

Her zamanki gibi ilk önce değişkenlerimizi tanımladık. İyi programcılar önce değişkenlerini tanımlarlar, tanımsız değişken kullanmazlar.
Daha sonra veritabanımıza bağlandık. (veritabanına bağlantı kurmayı bir önceki dersimizde görmüştük.)
Recordset nesnesini oluşturduk. Bu veritabanından verileri almamız için gerekli.
SQL kodlarımızı oluştururken "adres isimli tablodaki bütün verileri al" dedik.
Son olarak verileri sayfaya yazdırmak için Recordset nesnesini açtık.

Kayitdizisi.Open sql, veriYolu, aOpenStatic

Buradaki Kayitdizisi Recordset nesnesinin değişkeni. Bu değişkeni açıyoruz ve komut olarak sql, (SQL kodlaması), veriYolu (Veritabanı bağlantısı) ve aOpenStatic dedik. Burada aOpenStatic dememizin sebebi ise; .Open Recordset' in bir metodudur. Buradaki aOpenStatic, Static ( yani durağan) olarak veritabanındaki kayıtları al demektir. Böylece kayıtlar normal olarak sayfaya yazdırılacaktır. Veritabanındaki halleri gibi..
Recordset'in .Open ' dan başka .Update, .Delete ve .Addnew metodları da vardır. Bunları da göreceğiz.

Daha sonra bir tablo oluşturduk. Veritabanındaki verileri bu tabloya yerleştireceğiz.
Şu deyimle:

<% Do While Not Kayitdizisi.eof %>

Demek istediğimiz; Kayitdizisinin sonuna gelinmedi ise,

<% Kayitdizisi.MoveNext
Loop %>

kayıtları sayfaya yazdırmaya devam et. Bu iki deyimin arasında ise Recordset ile veritabanından aldığımız verilerin isimleri yazılı. Böylece Kayitdizisi yani veritabanındaki verilerin sonuna gelene kadar veriler sayfaya yazdırılmaya devam edilecek. Biliyorsunuz ki bu bir döngüdür. (Döngüleri daha önceki deslerimizde görmüştük.)
Verilerin sayfaya yazdırılmasını sağlayan:

<%=Kayitdizisi("id") %>

Bu komuttur. Burada Kayitdizisinden id isimli alanı göstermesini istiyoruz.

Veritabanına bağlantı ve bu bağlantı ile verileri sayfaya yazdırmak çok önemli konulardır. Bu konuda bir çok deneme yapmalısınız.

Anlamadığınız bir nokta olduğunda bana (serenity@yasamdersleri.com) ya da Forum'a sorabilirsiniz. Mutlaka cevabını alacaksınız..

İlk N Kaydı Almak (SQL: SELECT TOP)

Bundan önceki dersimizde veritabanından veri çekmeyi öğrenmiştik. Veritabanımızdaki verileri çekip, onları sayfaya yazdırmıştık. Bu dersimizde ilk N kaydı almayı yani, belirli sayıda veriyi veritabanından çekmeyi öğreneceğiz. Genel kullanımı şöyledir:

sql = "SELECT TOP 5 * FROM adres"

Her zamanki sql kodunun "select" deyimin başına "TOP -gösterilecek kayıt sayısı-" yazıyoruz. Böylece ilk seferinde "adres" isimli tablodan ilk 5 kaydı çekmiş oluyoruz. 5 yerine istediğiniz bir sayıyı yazabilirsiniz. Şimdi bir küçük bir örnek yapalım ve bu konuyu derinlemesine incelemiş olalım:

<% @LANGUAGE = VBScript %>
<html>
<head>
<title> deneme </title>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-9">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
</head>

<%
Dim veriYolu, sql, veri

'veritabanına bağlanalım
Set veriYolu = Server.CreateObject("ADODB.Connection")
veriYolu.Open "ornek"

sql = "SELECT TOP 3 * FROM adres"
Set veri = veriyolu.Execute(sql)

%>

Şimdi bu basit örneğimizi inceleyelim.
Her zaman olduğu gibi ilk önce veritabanımıza bağlandık. Verileri çekmek için bu gerekli. Daha sonra basit SQL kodumuzu yazdık. Burada dikkat etmemiz gereken nokta sql kodunu yazarken SELECT deyiminden sonra TOP ... komutunu vermemiz. Bu TOP komutunun karşısına yazacağımız sayı sayfada göstermek istediğimiz kayıt sayısıdır. Biz bu örneğimizde;

sql = "SELECT TOP 3 * FROM adres"

dediğimiz için bizim sayfamızda adres isimli tablomuzdan gelen ilk 5 kayıt görüntülenecektir. Bu sayıyı eskiltmek ya da çoğaltmak sizin elinizde.

Verileri Sıralama (SQL: ORDER BY)

Eveet, sıradaki dersimiz verileri sıralama.
Bazen veritabanından veri çekerken verilerimizin belli bir sıraya göre dizilmesini isteriz. Kimi zaman verilerimizi A'dan Z'ye ya da tam tersi, kimi zaman da 1' den başlayıp sona doğru ya da tam tersi olarak sıralanması isteriz.
İşte bu noktada bize Sql sorgusu içindeki ORDER BY kelimesi yardımcı olur.
Şimdi ORDER BY kelimesini derinlemesine inceleyelim.

Yine şöyle bir veritabanımız olduğunu varsayalım:

tablo adı: ciceklerim

siraNO	cicek_adi	rengi
1	papatya	sarı
2	lale	kırmızı
3	orkide	beyaz

Bu varsaydığımız veritabanı tablomuz üzerinde denemelerimizi yapalım.

Örneğin:

ciceklerim tablomuzdaki çiçekleri alfebetik sırayla dizmek istiyoruz. O kadar çaresiziz ki. Birden aklımıza ORDER BY kelimesi geliyor. Bakalım ORDER BY bize nasıl yardım olacak?

dim sql, veri

sql = "SELECT * FROM ciceklerim ORDER BY cicek_adi"

Bu sorgu bize çiçek isimlerini alfabetik sıraya dizilmiş olarak verir. Bunu sayfaya yazdırırken:

Sıra NO

Çiçek Adı

Rengi

Bu tablodaki gibi verilerimizi sayfamıza bastığımızda çiçeklerimin alfabetik sırayla dizildiğini görebiliriz.

Bunun yanısıra veriler alfabetik sırayla dizilirken tam tersi bir sıralama yapmak isteyebiliriz. Yani veriler normalde A'dan Z'ye dizilir, biz Z'den A'ya doğru gitmesini isteyebiliriz.
O zaman da imdadımıza ORDER BY komutunun baş yardımcısı, sağ kolu DESC yetişir. desc sıralamayı tersine döndürür. Bunun da tersi ASC kelimesidir ki zaten veriler asc komutu verilmiş gibi sıralanır. Bu sefer verilerimizi siraNO 'suna göre dizelim. Ama baştan sona değil, sondan başa doğru:

dim sql

sql = "select * from ciceklerim order by siraNO desc"

Bu sorgu bize ciceklerim tablosundan alınan verileri siraNO satırına göre sondan başa doğru sıralama imkanı verir.

Yani şu şekilde:

3	orkide	beyaz
2	lale	kırmızı
1	papatya	sarı

Neden ORDER BY kullanmak isteriz?

Asp sayfalarımızda verilerimiz bir karmaşa içinde olmasın, liste halinde sunduğumuz veriler birbirine karışmasın diye sql sorgusu içindeki sıralama kelimesi ORDER BY kullanırız.
ORDER BY kullanılırken genelde birincil anahtar ve otomatik sayı olarak otomatik artan bir alana göre veriler dizilebilir. Örnek olarak bizim "ciceklerim" veritabanı tablosunu ele alırsak, verileri siraNO isimli sütuna göre sıralamamız çok akıllıca olacaktır.

Bu dersimizde SQL sorgusu içinde bize istediğimiz satıra göre sıralama imkanı veren ORDER BY kelimesinin işlevini öğrendik.
Çok işlevli, pek de yararlı ORDER BY kelimesinin her zaman size yardımcı olmasını dilerim..

Asp'de Kod Güvenliği
Asp Kodlarınızın Güvende olup olmadığından emin misiniz?

İlk soruyu soralım ve cevaplayalım ;

1 - Benim Scriptler Hosting Firmasında ne kadar güvendeler ?

Cevap : Belki çok, belki hiç kim bilir;

Şimdi sizin yazdığınız response'lar session'lar function ve sub'ların havalarda uçuştuğu scriptleriniz var değil mi ? (evet) Eğer yeni değilseniz yani "not defterinden bile adam şifresiz kodlarımızı okuyabiliyor" diyorsunuz sanırım...

Admin şifresini login sayfasına koysam desem, bana gülersiniz. Bir deneyelim bakalım... :)

Source Code Encoding ;

Türkçe'si kaynak kodu şifreleme... Sayfalarımızda asp kodlarımız herhangi bir müdahale etmeyeceğimiz halde olmalı yani tasarımı değişmeyecek (bitmiş olarak tabir ettiğimiz) olan sayfalar olmalı - Çünkü kaynak kodlarımızı şifreledikten sonra geri çeviremiyorsunuz.

Microsoft Vbasic Scripting Edition v5.0 ve Jscript 5.0 versiyonundan sonra Encoding desteklenmeye başladı. Eğer asp help dokümantasyonunu incelemişseniz bu konudan bahsedildiğini görmüşsünüzdür.

Microsoft'un Sitesinden veya aşağıda linki tıklayarak Scripting Encoder'i download edin.

Asp sayfalarımız ve encoder'i hazırladıktan sonra screnc10.exe adlı bir 16bit lik programınız oldu.
Encode edilecek olan dosyalarınızı Encoder'i kurduğunuz dizine kopyalıyorsunuz ve programın özelliklerine geçiyoruz.

Öncelikle .bat dosyası oluşturarak encoder'i sürekli başlat>çalıştır> şeklinde çağırmamak için şu satırları içeren bir text belgesi oluşturun.

Daha detaylı bilgi isterseniz de kurulum klasöründe bulunan Chm uzantılı yardım dosyasına bakınız ama en kullanışlı şekli bu olduğunu belirteyim.

şeklinde bir asp dosyanız olsun. şimdi bunu klasöre kopyalıyarak des.bat dosyasını çalıştırdığınızda kodlarınız aşağıdaki şekli alıcaktır.

Sanırım bu dosyayı okuyacak kadar bilgisayarlaşmış birileri yoktur :)

Ayrıca sitenizin yüklü olduğu hosting in Vbscript versionunu ve özelliklerinin bunu desteklediğini de öğrenebilmek için aşağıdaki kodları yazıp diag.asp adıyla kaydedin sonra ftp ile yollayıp internet üzerinden çalıştırarak Vbscript'in versionunu öğrenebilirsiniz.

Çıktısı şu şekilde olacak

Not : Bu Ekrana rağmen Eğer Encode ettiğiniz Scriptler Serverda Çalışmaz ise sayfaların başına

Etiketini Ekleyin. (Sayfanın 1. satırına )

Değişkenler

1.1 Genel Değişken Özellikleri

Değişkenler Javascript'te ve diğer programlama dillerinde olduğu gibi bilgi depolamak bu bilgiyi kullanmak amacıyla kullanılırlar. Değişkenler "var" komutu ile oluşturulurlar. Karakter olarak kullanıldıklarında işlem yapılamazlar. Nümerik olarak kullanıldıklarında ancak işlem yapabilirler. Kullanımına bir örnek verelim.

Örnek:

var sayi;
var sayi1=10;
var yazi1="10";

Burada birinci satırdaki "sayi" değişkeni script kodunun herhangi bir yerinde kullanılmak üzere oluşturulmuştur. İkinci satırda "sayi1" adındaki değişkenin değeri hemen o satırda = ifadesinden sonra verilmiştir. Böyle değişken tanımıda yapılabilir. Üçüncü satırda ise değişkenin karakter ifadesi olarak kullanımını görüyoruz. Burada önemli olan karakter değişkenlerin alıntı " " ifadesinin arasında kullanılmasıdır. Her değişkenden sonra ; işareti konulmalıdır. Tarayıcı, bir başka komut satırına geçtiğini bu yol ile anlar.

Şimdi değişkenlerle ilgili matematik işlemlerinin nasıl olacağını görelim. Bunu daha iyi açıklayabilmek için örnekler üzerinde çalışalım.

Örnek:

var sayi1=10;
var sayi2=20;
var sayi3=sayi1+sayi2;

Birinci ve ikinci satırlarda değişkenler oluşturduk. Üçüncü satırdaki ise sayi3 değişkeni ile diğer iki değişkeni topladık. Burada önemli olan işlem yapmak istediğimizde değişken değerinin alıntı " " işaretlerinin arasına konmamasıdır. Üçüncü satırı - ileride göreceğimiz write () fonksiyonu ile - tarayıcıda yazdırırsak göreceğimiz değer 30'dur.

Şimdi de değişkenleri karakter olarak tanımladığımızda neler olduğuna bakalım.

var sayi1="10";
var sayi2="20";
var sayi3= sayi1+sayi2;

Bir önceki örnekten farklı olarak değişken değerlerinin alıntı işaretleri içerisinde yazdık. Eğer sayi3 adlı değişkeni tarayıcıda bastırırsak göreceğimiz ifade 1020 ifadesidir. Yani tarayıcı karakter olarak tanımladığımız değişkenleri ardada ekledi. Burada unutulmaması gereken şey bunun sadece + işleminde geçerli olmasıdır. Diğer işlem türlerinde bu tür bir sonuç alınamaz.

Değişkenlere ad verirken uymamız gereken kurallar.

Değişken isimleri harf veya _ karakteri ile başlayabilir. Rakam kullanmak istersek 2. karakterden sonra kullanabiliriz. Yani değişkenin ilk karakteri rakam olamaz.

Değişken isimlerine örnekler;

var url="webteknikleri"; doğru
var _rakam=12; doğru
var a1=123; doğru
var 3uzler="üçüzler" yanlış

Değişken tanımlarken bir veya birden fazla boşluk bırakmak tanımlama açısından herhangi bir sorun teşkil etmez.
Değişken adı verirken kullandığımız harflerin büyük veya küçük olması bazı tarayıcılarda fark etmezken çoğu tarayıcıda farklı bir değişken anlamındadır.

var say=1;
var Say=1;

Farklı değişkenler olarak algılanır.

1.2 Değişkenlerin işlem operatörleri ile kullanımı

Değişkenlere işlem yaptırabilecek operatörleri ve özelliklerini inceleyelim. Operatörleri birkaç kısıma ayırarak inceleyelim;

Aritmetik operatörler
Karşılaştırmak operatörleri
Mantıksal operatörler
Özel operatörler

1.2.1 Aritmetik Operatörler

Her zaman kullandığımız bu operatörler + , - , * , / , % 'dir.Değişkenlerin çeşitli aritmetik operatörlerle kullanımına bir örnek verelim.

var i=10;
var j=11;
var k=12;
var m,n;
m=i*j+k;
n=i*(j+k);

Şimdi örneğimizi inceleyelim:

İlk üç satırda değişkenlerimizi hem tanımlayıp hem de değer atadık. Dördüncü satırda ise m ve n değişkenlerini tanımlayıp değer atamdık. Diğer satırlarda ise m ve n değişkenlerinden istenen işlemleri tanımladık. Buna göre son iki satırın sonuçları farklıdır. Çünkü parantezlerin işlem önceliği vardır.

Beşinci satırın cevabı (10*11)+12 = 122 şeklinde olacaktır. Son satırda ise sonuç 10*(11+12) = 230 olacaktır. Diğer bir işlem operatörü olan % 'nin yaptığı işlemi şu şekilde anlatabiliriz.% operatörü % işaretinin solundaki değişkeni sağındaki değişkene böler ve kalanı verir. Örnek olarak;

var a=100; var b=9; var c=100%9;

Burada c değişkenin değeri 100/9'un kalanı 1'dir. Yani c değişkeninin değeri 1 olacaktır. Diğer -(eksi) ve / (bölme) operatörlerinin işlemleri kendilerine atanan çıkartma ve bölme işlemidir.Bu operatörlerin kısa kullanımı içinde Javascript bize kolaylık sağlar. Bu operatörleri sıralamak istersek;

-= : *= : /= : %= : ++ : --

Bu operatörlerin kısa uzun şekilde yazılışları ise;

x+=y x=x+y
x-=y x=x-y
x*=y x=x*y
x/=y x=x/y
x%=y x=x%y
x++ x=x+1
x-- x=x-1

şeklindedir.

Bu operatörlerin nasıl işlem yaptığını bir örnekte görelim.

var x,y,z;
x=10; y=20; z=30;
x++; x+=y; z--; y*= z;

Şimdi her zamanki gibi işlem satırlarının cevaplarını birlikte bulalım.

x++ satırı x=x+1 işleminin yapılmasını söyler. Buna göre x değişkeni 11 değerini alır.İkinci satıra geldiğimizde x+=y satırı x=x+y işleminin yapılmasını söyler. Bir önceki satırdaki x'in değeri 11 idi. Böylelikle yeni x'in değeri 11+20=31 olacaktır. Diğer satırda z-- işlemi sonucunda z'nin değeri 29 olacaktır. Son satırda ise y=y*z işlemi ile y değişkeni 20*29= 380 değerini alacaktır.

1.2.2 Karşılaştırma operatörleri

Bu operatörler değişkenlerin birbirleri ile karşılaştırılmak istendiğinde kullanılır.

== operatörü iki değişkenin birbirine eşitliğini kontrol eder.
!= operatörü iki değişkenin birbirine eşit olmadığı durumlarda kullanılır.
< operatörü bilindiği üzere küçüktür operatörüdür. Soldaki değişkenin sağdakinde küçüklüğünü kontrol eder.
<= soldaki değişkenin sağdaki değişkene küçük eşitliğini kontrol eder.
> soldaki değişkenin sağdaki değişkene göre büyük olup olmadığını kontrol eder.
>= soldaki değişkenin sağdaki değişkene büyük eşitliğini kontrol eder.

1.2.3 Mantıksal Operatörler

Bu tip operatörler iki değişkene bağlı karşılaştırılmaların yapılmak istendiği durumlarda kullanılır.

Operatörler && , || , ! operatörleridir.

&& And (ve) operatörü iki değişkenin de değeri doğru olması istendiğinde kullanılır.
|| Or (veya) operatörü iki değişkenden en az birinin doğru olması durumu istediğinde kullanılır.
! Not (değil) operatörü değişkenin değeri doğru ise yanlış , yanlış ise doğru olması istendiği durumlarda kullanılır.

1.2.4. Özel karşılaştırma Operatörü

Bu operatör iki değişken arasında karşılaştırma yapmanın en sade ve kısa yoludur.

Operatörün kullanım biçimi :

değişken_1 [istenen karşılaştırma operatörü] değişken_2 ? değişken_3 : değişken_4

Bunu bir örnekle açıklayalım.

Değişkenleri var ile tanımladığımızı farz ediyorum. Buna göre;

a < b ? c : d

Yukarıdaki satırda yapılması istenen işlem;

a değişkeninin b değişkeninden küçük olup olmadığı karşılaştırılıyor. Buna göre cevap doğruysa işlemin sonucu c değişkeninin değeri değilse d değişkeni oluyor.

Şimdi tüm bu öğrendiklerimizi bir Javascript kodunda görelim. Bu bizim ilk Javascript kodumuz olacak.

Örnek :

İlk yedi satırda değişkenlerimizi hem tanımladık hem de değer atadık. Böyle bir yazımı yapabileceğimizi değişkenleri anlatmaya başlarken söylemiştik.

İşlem satırlarına geçtiğimizde ise;

i+=j;

Bu işlem daha da önce gördüğümüz gibi bize i=i+j işlemini yapmamızı söyler. Buna göre i değişkeninin değeri 3 olacaktır. Hemen altındaki satırda bulunan j++ işlemi dolayısıyla da j değişkeni 3 değerini alacaktır. Diğer işlem satırında k--işlemi ile de k değişkeni 2 değerini alır. Bir diğer satırdaki m=m+k işlemi ile m(m=4) değişkeni k(k=2) değişkeni toplanarak 6 değerini alır. n=*j işlemi ile de n(n=5) değişkeni 3*5=15 değerini alacaktır.

Şimdi diğer karşılaştırma işlemlerine geçmeden önce değişkenlerimizin işlem sonrası aldığı değerleri yazalım.

i=3 , j=3 , k=2 , m=6 , n=15 , p=6 , q=7 ; i < j ? 3: 1;

Bu satırın 3 < 3 işleminin cevabı doğru ise 3 değilse 1 değeri alacağını görebiliyoruz. Tabi ki üç üçten küçük olmadığı için cevabımız 1 olacaktır.

k>=n ? 0 : 1;

Bu satırda ise 2>=15 işlemi gerçekleşir ki bunun cevabı da yanlıştır ve ikinci değer işlem satırının cevabıdır yani 1 dir.

Şimdiki karşılaştırma işlemimiz ise mantıksal operatörlerle ilgili. Buna göre;

k=2 && j=5 ? p : q;

İşlem bize ne söylüyor ? k değişkeni ve j değişkeninin kesin olarak bir değere eşit olup olmadığını karşılaştırmamızı söylüyor. Bu iki değer de doğruysa çünkü &&(and) mantıksal operatörünün anlamı bu işlem doğrudur değilse yanlıştır. Buna göre k=2 'dir. Fakat buna karşılık j'nin değeri 5 değildir. Bu yüzden karşılaştırmanın cevabı yanlıştır. Dolayısıyla işlem q yani 7 değerini alır.

p!=2 ? k : 10;

İşlemde istenilen p değişkeninin değerinin ikiden farklı olması durumdur. Yani 6!=2 bunun anlamı doğrudur. Gerçektende 6=2 değildir. Bizde bu satırda bunu istiyorduk. O halde cevap doğrudur. Böylelikle işlem k yani 2 değerini alır.

Şimdi biz bu yaptıklarımızla sadece javascript'te bir şeyler hesap etmesini ve karşılaştırmasını söyledik. Tarayıcı da bu işlemleri yapar ve hafızasında tutar. Daha sonra öğreneceğimiz komutlarla bunları istersek tarayıcıya yazdırabilir. Başka bir yerde kullanılmasını söyleyebiliriz.

Internet Explorer & Netscape Farkı

Giriş kısmında belirttiğimiz gibi Javascript kodlarında MSIE (Microsoft Internet Explorer) ve NN (Netscape Navigator) yönünden farklılık vardır. Bu tarayıcının html dökümanı nasıl modellediğine bağlıdır. Tarayıcının nesne döküman modeli, bir Html sayfasındaki çeşitli elemanların tarayıcı tarafından nasıl algılanıp yorumlandığı ile ilgilidir. Javascript gerçekte W3C (Web tekniklerinin standartlarını belirleyen kurum www.w3c.org) konsorsiyumu tarafından belirlenen kodlardan oluşmamıştır. Tarayıcı üreten firmalar bu konuları kendilerince yorumlayıp tarayıcılarına yerleştirmişlerdir. Yani kendi nesne döküman modellerini oluşturmuşlardır.

Biz bu kısımda her iki tarayıcınında nesne döküman modelini incelemeyeceğiz. Bize gerekli olan kısmını öğreneceğiz. Şimdi tarayıcı farkının nasıl ayırt edilebileceğini görelim.

ie4 = (document.all) ? true : false;
nn4 = (document.style) ? true : false;

Biz bu iki satırla bir önceki ders olan değişkenler ve mantıksal operatörler yardımıyla iki tarayıcıyı da kontrol altına aldık. Bir diğer örnekle yapıyı pekiştirelim.

Şimdi bu kodları inceleyelim. Değişken tanımlama kısmının anlaşıldığını varsayarak geçiyorum. Anlamadığınız bir kısım varsa 1. Değişkenler kısmına tekrar geri dönün.

If (ie4) ve if (nn4)

Burada ileriki derslerde öğreneceğimiz koşul ifadesini kullanıyoruz. Bu kodları Javascript'in anlayış tarzı şu şekilde olacaktır. Eğer nn4 , ie4 değişkenlerinden doğru olanı ie4 ise -ki bunu true ve false değerlerinden algılar- alt satıra geçip ona uygun kodu uygulayacaktır. Şayet ie4=false yani nn4=true ise diğer if koşulu yorumlanarak işleme konulacaktır. Bu da nn4 için gerekli kodun çalıştırılması demektir.

Şimdi bu kodun tamamını vererek dersi bitirelim.

<html>
<head>
<title>Tarayıcı kontrolü</title>
<head>
<script language="Javascript">

</script>
</head>
<body onLoad=tarayici()>
</body>
</html>

Bu kodları herhangi bir editör (NotePad gibi) yardımıyla yazıp tara.htm olarak kaydedin.

<html>
<head>
<title>MSIE tarayıcı kullanıyorsunuz</title>
</head>
<body>
<h3>Tarayıcınız Internet Explorer</h3>
</body>
</html>

Bu kodu ie.htm olarak kaydedin.

<html>
<head>
<title>Netscpae tarayıcı kullanıyorsunuz</title>
</head>
<body>
<h3>Tarayıcınız Netscape Navigator</h3>
</body>
</html>

Bu kodu nn.htm olarak kaydedin.

Önemli!: Bu üç Html dosyasının da aynı klasörde olması gereklidir.

Tara.htm adlı dosyada anlamadığınız kodlar olduğunu görüyorsunuz. Şimdilik bu kodları anlamanız gerekli değil. Yeri geldikçe bu kodların nerede ve nasıl kullanılacağını göreceğiz.

Ekrana Çıktı ve Klavyeden Bilgi Giriş

Bu dersimizde Html üzerinden klavye aracılığı ile ziyaretçiden bilgi almasını ve herhangi bir değişken vb. Türde yazıların html e nasıl yazdırılacağını göreceğiz.

3.1 Prompt ()

Hemen başlayalım. Ziyaretçiden bilgi alma iki tür JavaScript komutuyla gerçekleşir. Birisi Prompt yani bizim burada bahsedeceğimiz komut. Diğeri ise Form yoluyla bilgi alınması. Form yoluyla alınan bilgiler formun Html üzerinde yer alması yüzünden Prompt komutu ile birbirinden ayrılır. Prompt komutu ile Html sayfasından hariç bir pencere açılır. Alınmak istenen bilgi ziyaretçiye bu yol ile sorulur ve hemen altındaki boşluk yardımıyla cevap alınır. Şimdi kodun nasıl kullanıldığına bir göz atalım.

prompt ("Sorulan soru" , "Cevap örneği")

Bu komutun yorumlanışı şu şekildedir. Html üzerinde Html'den bağımsız bir pencere aç. (bu prompt komutu ile yapılır) İlk çift tırnak içerisinde olan kelime veya kelime grubu, pencerenin üst kısmında ve değiştirilemeyen kısımdır. Burada soru veya pencerenin niçin açıldığı ile ilgili bir açıklama verilir. İkinci çift tırnakta ise doldurulacak olan cevap satırının içinde seçili bir haldedir. Bu ise genel olarak cevap örneği olarak ziyaretçiye sunulur. Kullanılması zorunlu değildir. Kullanılmadığınızda undefined gibi tanımlanmamış uyarısı alınır.

prompt ("Tarayıcınızın türünü giriniz ?" ,"lütfen cevabı ie veya nn olarak veriniz");

Şimdi kullanıcıdan nasıl bilgi alınacağını gördük fakat bu bilgiyi nasıl kullanabiliriz? Bu sorunun cevabı prompt komutunu var ile bir değişkene atmak suretiyle kullanabiliriz olacaktır. Yani;

var tara=prompt ("Tarayıcınızın türünü giriniz ?" ,"lütfen cevabı ie veya nn olarak veriniz");

Biz bu satır ile ne yapmış olduk ? Ziyaretçiden prompt komutu ile tarayıcısı sorduk ve bunu var değişken tanımlama komutuyla tara değişkenine atadık. Ziyaretçiden aldığımız bu bilgi sonucunda tara değişkeni ya ie yada nn değerini alacaktır. Biz daha sonraki satırlarda bu değişkeni belli bir koşul koyarak kullanabiliriz. Mesela daha önceki örneklerimizde olduğu gibi ie ise şu sayfayı aç nn ise şu sayfayı aç.

Bir öneri , bu tip tarayıcı tanıma yöntemi oldukça yanlış bir yöntemdir. Çünkü ziyaretçiden alınan bilgi ile bizim daha sonra kullandığımız koşul ifadeleri uyuşmayabilir. Bu yüzden kodumuz doğru çalışmaz.

3.2 Write()

Html dosyasına yazı yazdırma komutu ise write dır. Bu kodun yazım kurallarını inceleyecek olursak;

document.write ("görüntülenmek istenenler" , değişken_ismi );

Kodu inceleyelim. Javascript html üzerinde yazı yazmak istediğinde write komutunu tek başına kullanamaz. Bunun için document fonksiyoneli (yardımcısı manasında) ile birlikte kullanılır. document.write komutundan sonra parantez açılır. Daha sonra yazılmak istenen sıraya göre değişken ismi veya görüntülenmek istenenler yazılır. Değişkenler çift tırnak içerisinde yazılmazlar. Sadece görüntülenmek istenenler çift tırnak içerisinde yazılır.

Şimdi prompt komutu ile write komutunu birleştirerek bir kod hazırlayalım. Bu kodumuzda prompt aracılığıyla ziyaretçiye adını sorup ad değişkenine atıyoruz. Daha sonra bu değişkeni write komutu yardımıyla ziyaretçiye Merhaba diyoruz. Şimdi kodlara geçelim.

Örnek:

<html>
<head>
<title>Prompt , write örneği </title>
</head>
<body>


</script>
</body>
</html>

Eski kodlarımıza göre bu kod biraz farklı değil mi ? Hemen göze çarpıyor ki Javascript kodumuz <head> etiketleri arasında değil. Daha öncede dediğimiz gibi uygulanması istenen sıraya bağlı olarak kod yerini aldı.

Biz aslında Html'de font kurallarını kullanarak yazı da yazdırabiliriz. Eğer hiçbir kural uygulamadığınız tarayıcının banko (default) değerleri kullanılır. Örneğin Merhaba dedikten sonra alınan ismin bir alt satırda görüntülenmesini istiyorsak bunu Javascript'e şu şekilde yaptırabiliriz.

document.write ("Merhaba" , "
" , isim)

Bu tür (yani <br> türünde) Html etiketlerinin tümünü Javascript'e yaptırabilirsiniz. Hatta ileride göreceksiniz ki Javascript zerinden Html yazmadan web sayfası yapılabilir. Aslında Html yazmıyor değiliz fakat bunu <body> etiketlerinde yani Html dökümanı içerisinde yapmıyoruz. Bunu için Javascript'e emir veriyoruz. Bu normal olarak kimi zaman hissedilir derecede olmasa bile sayfanın yavaş yüklenmesine neden olur. Bu yüzden web sayfası üzerinde yaptığınız işleme göre kodunuzu yazın. Yani Sezar'ın hakkı Sezar'a...

Koşul Yapıları

Bu dersimizde Javascript'in en önemli özelliklerinden birine değineceğiz. Aslında bu konu sadece Javascript'in değil bilgisayarın da en önemli konusudur. Bilgisayarı bilgisayar yapan konu budur. Çünkü hiçbir bilgisayar kendi kafasına göre yorum yapamaz. Bizim verdiğimiz belli kıstasları göz önünde bulundurarak seçim yapar o kadar. Şimdi konunun inceliklerine bir göz atalım.

4.1 If (Eğer)

Javascript'te çoğu dilde olduğu gibi koşul yapısının kodu If (eğer) komutudur. Yazılım şekli ise şu şöyledir.

If (a==b)
//koşul doğru ise ilk satır işleme konulur
//koşul doğru değilse ilk satırın altındaki komut satırı işleme konulur.

Şimdi kodumuzu inceleyelim :

Koşul komutu yani if ile işleme başlıyoruz. Daha sonra karşılaştırılacak değişkenler veya başka nesneler parantez içerisinde sorgulanıyor. Dikkat ederseniz çift eşittir kullandık. Çünkü tek eşittir işareti değer atama işlemidir. Çift değişken ile koşul yapısı sağlanır. Eğer koşul doğruysa hemen altındaki satır işleme konulur. Eğer koşul yanlış ise ikinci satır işleme konulur. Yok ben koşul doğru ise 2 ve daha çok işlem yaptırmak istiyorsanız bunun cevabı yapılması istenen işlemlerin { } arasında yer almasıdır. Yani:

If (a==b)
{
// 1.işlem
//2. İşlem
...
...
}

Hatırlarsanız If koşul ifadesini 2. dersimizde tarayıcı yönlendirirken kullandık.

4.2 If .. Else (Eğer ... Değilse)

Bu bölümde ise If koşul ifademize Else komutunu ekleyerek koşul yapımızı güçlendiriyoruz. Şimdi bu ne demek. Hemen bir örnekle açıklayalım.

If ( a==b )
{
// şunları şunları yap
}
else
{
//değilse şunları yap
}

Yani örnekten de anlaşıldığı gibi if koşulu ile a ile b nin eşitliği karşılaştırılıyor. Eğer doğruysa hemen altındaki kısım işleme konuluyor. Else ile yok değilse altındaki kısmı işleme koy diyoruz. Şimdi diyeceksiniz ki bir öncekinden ne farkı var. Bu haliyle hiçbir farkı yok. Fakat şu örneğe bir bakalım.

If (a==b)
{
//şunları yap
}
if (a==c)
{
//şunları yap
}
else
{
//şunları yap
}

Şimdi bu kodda Javascript'e ne yapmasını söyledik. a değişkeni b değişkenine eşitse normal olarak alt satırı işleme koy. Eğer bu karşılaştırma yanlış ise altındaki işlemleri geçerek a'nın c'ye eşitliği kontrol edilecek. Bu da değilse (else) alt satırdaki işlemleri devreye koy.

Else yapısı genel olarak bir karşılaştırma sonucunda cevap yanlış ise diğer bütün durumlarda şu işi yap manasında kullanılır.

Dersi tam bir Javascript örneği ile bitirelim:

<html>
<head>
<title>Koşul yapıları </title>
</head>
<body>
<script language="JavaScript">

</script>
</body>
</html>

Döngü Yapısı

Javascript'te diğer programlama dillerinde olduğu gibi istediğiniz işlemi 2 veya daha fazla kez yaptırmak için belli program kodları mevcuttur. Bu diğer dillere çok benzer olan for döngü komutudur. Bu komutun yaptığı işlem , istenilen fonksiyon veya fonksiyon parçalarını istenilen değerde tekrar etmektir. Şimdi ayrıntılara geçelim.

for ( değişken_başlangıç_değerler1 , değişken_başlangıç_değeri2 ; döngü sayısı ; değişecek_değişken_adı_ve_türü )
{ yapılması istenen işlemler }

Burada parantezler içerisinde verilen değişken_başlangıç_değerler kısmı ve değişecek_değişken_adı_ve_türü kısmını yazmanız gerekmez. Döngü içerisinde kullanılan değişken daha sonra da istenilen şekilde arttırılabilir veya azaltılabilir. Yapı gözünüzü korkutmasın hemen bir örnekle daha iyi anlayalım.

for (a=0 , b=0 ; c<=3 ; c++)
{ yapılması istenen işlemler }
for ifadesi için kısa yazılım :
var a,b=0;
for (;c<=3;c++)
{ yapılması istenen işlemler }

Şimdi bunu tam bir örnekle daha da pekiştirelim.

Varsalım ki elimizde bir çarpım tablosu yapmak istiyoruz. Buna göre 5 sayısı için 1'den 10'a kadar sayıları bir tablo içerisinde vereceğiz. Şimdi bu durumda for döngüsüz 10 adet tablo yazmamız gerekecekti fakat biz for döngüsü ile işlemi 1 satıra indirgeyeceğiz.

<html>
<head>
<title>for döngüsü</title>
</head>
<body>
<script language="JavaScript">

</script>
</body>
</html>

Burada gördüğünüz gibi işlem tek bir satıra ingirdendi.

Şimdi de for döngüsünün yapmak istediğimiz işlemlerde yetersiz kaldığı durumlarda kullanabileceğimiz yapıları görelim.

5.2 Şartlı döngü yapısı while

Javascript kodu yazarken -programda bir önceki örnekte olduğu gibi- sayaç değişkeninin her değeri için istediğiniz işlemi yapmasını istemeyebilirsiniz. Bunun için while komutunu kullanırsınız ki bu Javascript'e "İstediğim işi şu şart sağlanıyorsa yap !" demiş olursunuz.

While döngüsünde for döngüsünden farklı olarak döngü içerisindeki değişkenlerin tanımlanması gerekir. Şimdi yazım kurallarına bir göz atalım.

while ( döngü şartı ) { şart doğruysa yapılacak işlemler}
şart doğru değilse yapılacak işlemler

5.3 Do .. while yapısı

Do ... while yapısı genel olarak bir döngünün yapısını eğer şart doğruysa tekrar et manasındadır. Yani do ile başlangıçta hiçbir koşul olmadan işlem yapılır. Daha sonra while şartı doğru ise tekrar do yapısında geri dönülür. Bunu bir örnek ile açıklamak gerekirse;

Örneğin bir ticari siteniz var. İnsanlar sizden gelip istedikleri ürünleri satın alıyorlar. Bir ürün için siparişlerini verdiler ve bizde bunun karşılığı olarak ücret + kargo + kdv miktarını hesapladık ve müşterimize dedik ki istediğiniz ürün şu fiyata şu gün elinizde olur. Bu hesaplamaların hepsini do yapısı ile yap dedik. Ve sonra sorduk daha başka ürünlerde almak istiyor musunuz ? İşte bu da while yapısı ile sorulur. Şayet cevap evet ise do yapısı tekrarlanır değilse do döngü yapısında çıkılır.

Bu tür bir örnek yapalım;

Bizim kitap, cd ve kaset sattığımız varsayalım. Bizden de 2 kitap ve 3 cd aldığını varsayarsak;

var kitap=2000000; var cd=3000000; var kaset=1500000;
do {
var kitapistek =prompt ("Kaç tane kitap almak istiyorsunuz ?" , "lütfen rakam giriniz");
var cdistek= prompt ("Kaç tane cd almak istiyorsunuz ?" , "lütfen rakam giriniz");
var kasetistek= prompt ("Kaç tane kaset almak istiyorsunuz ?" , "lütfen rakam giriniz");
var kitaptutar=kitapistek*2000000;
var cdtutar=cdistek*3000000;
var kasettutar=kasetistek*1500000;
var toplamtutar = kitaptutar+cdtutar+kasettutar;
document.write (kitapistek ," tane kitap ", cdistek ," tane cd " , kasetistek , " tane kaset siparişiniz alınmıştır ", "<br>");
document.write ("<br>" , "Aldığınız ürünlerin toplam tutarı = " ,toplamtutar);
var istek =prompt("Başka ürünlerde satın almak istiyor musunuz ?", "e veya h giriniz"); }
while (istek="e")
document.write ("<br>" ,"Bizden alışveriş yaptığınız için teşekkürler")

5.4 Break ve Continue İfadeleri

While komutu ile şartı belirledikten sonra yapılan işlemin kesilmesi veya devam etmesi otomatik hale gelmektedir. For döngüsü içerisinde de bu tür bir olayı break ve contine ifadeleri ile gerçekleştiririz.

Javascript break ifadesini gördüğü anda döngü işlemini keser ve bir sonraki komut satırını işleme koyar. Continue ifadesinde ise döngü break ifadesindeki gibi kesilir fakat işleme konulan satır bir sonraki satır değildir. Continue'de döngü başına dönülür.

Bir örnek verelim;

for ()
{işlem1; işlem2; break; }

Burada işlem2 ile verilen kısımda örnek olarak bir sorgu yapılabilir. Sorgu doğru ise break ifadesine gelinir ve burada döngü kesilir.

for ()
{ işlem1; işlem2; continue;}

Burada yine işlem2 ile sorgu yapılırsa contine ifadesi ile döngünün devamı sürdürülür.

Önemli: Break ve Continue ifadeleri her komutu kesmek veya devam ettirmek için kullanılamaz. Mesela bir if (Eğer) ifadesi şart doğru değilse break ile kes denilemez. Sadece döngü içerisinde döngünün kesilmesi veya devam ettirilmesi için kullanılabilir.

5.5 Switch-Case İfadesi

Bu ifade genel olarak menü kullanımında veya sorgu işlemlerinde işe yarar. Swicht ile ifade alınır case ifadesi ile işlemler sorgulanarak yapılır. Yazım kurallarına bir göz atalım.

switch (parametreler)
{ case "ifade1" :
case "ifade2" :
... }

Bir örnek verelim. Burada web sayfamızdaki herhangi bir işlemde çıkıp çıkmak isteyip istemediği soruluyor. Cevap evet ise işlem istenilen yönde yönlendiriliyor. Cevap hayır ise döngüden çıkılmaktadır. Burada kendimizi ziyaretçinin klavyesinde Caps Lock tuşuna basılı olup olmadığını önemsemiyoruz. Çünkü koşul ifademizi hem küçük harf hem de büyük harfe göre yazıyoruz.

var sec;
sec = prompt ("Çıkmak istiyor musunuz " ,"Evet için E veya e , Hayır için H veya h giriniz")
switch (sec)
{ case "e" : case "E" :
document.write ("Tekrar hoşgeldiniz")
//yapılması istenen işlemler
case "h": case "H" :
document.write ("Bizi tercih ettiğiniz çin teşekkürler")
break //Çıkılması istendiği için döngüyü kesmek için break komutunu kullanıyoruz.

Fonksiyon Kavramı

Çoğu zaman Javascript kodunuzda bir işlemin birden fazla yapılması gerekebilir. Hatta kimi zaman Javascript'e bir işlem yaptırmadan önce başka bir işlemi yaptırmak istenebilir.

İşte bu tür tekrarlanan işin yapılması için gerekli işlem ve komut gruplarına Fonksiyon adı verilir. Fonksiyonlar genelde , filanca isimli gruptaki işlemleri yap oradan bir değer al bunu filanca isimli gruba götür gibi işlemler için kullanılır. Bu tür komut sistemleri Javascript'te en çok kullanılan komut türlerindendir. Fonksiyonun yazım kuralları şu şekildedir:

function fonksiyon_ismi (parametre1 , parametre2 , .... )
{ yapılması istenen işlemler }

6.1 Fonksiyona Değer Gönderme ve Değer Alma

Bir fonksiyonun Javascript içerisindeki ilk önemli görevi diğer fonksiyonlardan veya herhangi bir yerden bir değer alıp onu kendi içerisinde işletip sonra istenilen fonksiyona veya yere göndermektir.

Mesela herhangi bir muhasebe işleminin yapılıp bize geri gönderilmesini istediğimiz düşünelim. Genel yapı olarak kodumuz şu şekilde olacaktır.

Veri1 ve Veri2'nin işleme konulacağı fonksiyonların tanımlanması
Veri1'in alınması
Veri2'in alınması
Veri1'in fonksiyona gönderilmesi
Veri2'nin fonksiyona gönderilmesi
Alınan verilerin ekrana yazdırılması

Şimdi bu genel kodu Javascript'te nasıl yapacağımızı görelim :

Burada yaptıklarımızı inceleyim.

İlk satırların function tanımlama olduğunu görüyorsunuz. Burada veri1 , veri2 adlı iki tane fonksiyonu tanımladık. Diğer satırlarda prompt komutu ile klavyeden bilgi girişi sağladık. Daha sonra bu verileri fonksiyonlara göndererek istediğimiz işlemi yaptırdık ve daha sonrada bunu return yöntemiyle geri aldık. Bu kısma kadar yaptığımız fonksiyona bir değer göndermekti.

Yeniden bir bakış.veri1(data1) komutuyla prompt yoluyla aldığımız data1 değişkenini veri1 adlı fonksiyona gönderdik. Yani function veri1(ilkveri) şeklindeki fonksiyona biz data1 değişkenin gönderdik. Fonksiyon bu değeri yani data1 değişkenin aldığında otomatik olarak ilkveri değişkenine atadı. Böylelikle ilkveri=data1 oldu. Daha sonra istenilen işlemler yapıldı. Ve ardından return ilktoplam değeri geri gönderildi. Bu değer daha sonra ekrana yazdırıldı. Diğer veri2 adlı değişken için de aynı tür bir işlem sözkonusudur.

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ı 200x300 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">

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

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

</script>
</body>
</html>

Bu sayfayı sag.html olarak kaydedin.

<html>
<head><title>Sag Frame</title></head>
<body>
<script language="javascript1.2">

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

Olaylar

Ziyaretçiye sunulan bir web sayfası üzerinde ziyaretçinin yaptığı her tür hareket bir bağlantıyı tıklaması, bir resmin üzerine gelmesi, resmin üzerinde ayrılması, bir formu yanlış doldurup hataya yol açması hep bir olaydır.

Şimdi bu olayları inceleyelim.

8.1 onClick

Web sayfası üzerinde bir nesnenin mouse ile üzerine tıklanması sonucu onClick olayı gerçekleşir. Olayın gerçekleşmesi için mouse'un nesneyi tıklayıp bırakması gereklidir. Yani mouse tuşuna basıldığında onClick olayı gerçekleşmiş olmaz. onClick olayı tuşa basılıp bırakıldıktan sonra gerçekleşir. Bağlantılar, resimler, form düğmeleri tıklanabilecek nesneler arasındadır.

OnClick yönlendiricisine bu durumda ne yapacağını Html etiketleri arasında bildirmeniz gerekir. Şimdi bunu bir örnekle açıklayalım.

<html>
<head><title>onClick</title>
<script language="javascript1.2">

</script></head>
<body>
<input type="button" name="tikla" value="tikla" onClick=merhaba()>
</body>
</html>

Burada yaptığımız işlem html etiketleri arasında yer verdiğimiz bir butona tıklama (onClick) ile ne yapacağını merhaba fonksiyonuna git diyoruz. Fonksiyonda ekrana bir uyarı ile beni tıkladınız diye bir uyarı mesajı geçiyor.

Şimdi burada alert nesnesini de görmüş olduk. Alert nesnesi ziyaretçiye herhangi bir durumda uyarı vermek amacıyla kullanılır. Görüldüğü üzere parantez içerisinde çift tırnak içine uyarı yazısı yazılır.

OnDblClick olayı da onClick olayı ile yapı olarak aynıdır. onClick'ten farkı nesneye çift tıklandığında çalışmasıdır. Diğer yöntemler onClick ile aynıdır.

8.2 onMouseOver , onMouseOut

Bu tür nesne olayları ingilizce adı (onMouseOver = mouse işaretçisi(imleç) üzerindeyken , onMouseOut = mouse işaretçisi üzerinden ayrıldığında) üzerinde olmakla birlikte mouse'un nesnenin üzerinde olup olmadığı ile ilgilenir.

Bir örnek ile açıklayalım:

<html>
<head><title>onMouseOver ve onMouseOut </title>
<script language="javascript1.2">

</script></head>
<body>
<a href="http://www.webteknikleri/index.htm" onMouseOver = uzerinde() onMouseOut =disinda()> Webteknikleri.com </a>
</body>
</html>

onMouseOver ve onMouseOut metodu ile ilgili güzel bir örnek daha :

<html>
<head><title>OnMouseOver</title>
<script language="javascript1.2">

</script></head>
<body>
<a href="www.altavista.com" onMouseOver="altavista()" onMouseOut = "altavistasil()"> Altavista</a><br>
<a href="www.yahoo.com" onMouseOver="yahoo()" onMouseOut="yahoosil()">Yahoo</a><br>
<a href="www.hotbot.com" onMouseOver="hotbot()" onMouseOut="hotbotsil()">Hotbot</a><p>
<form name="web">
<input type="text" name="mesaj" size="50">
</form>
</body>
</html>

8.3 onSubmit

Web-de sörf yaparken çoğunlukla karşımıza çıkan formlar biz doldurduktan sonra sayfanın bağlı bulunduğu server (ana makine) ya gönderilir. Fakat biz bu onSubmit olayı ile form gönderilmeden önce formun düzgün doldurulup doldurulmadığını kontrol edebiliriz.

Bunu örnek bir kod ile açıklayalım. Html sayfamızda body etiketleri arasında doldurulmasını istediğimiz bir form var ve ona ilişkin kod başlangıcı ise şöyle :

Bu satır ile formun gönderilmesiyle (onSubmit) dogrula fonksiyonunu çağırıyoruz.

dogrula fonksiyonu da şu şekilde olabilir.(Bu fonksiyon head etiketleri arasında olan script etiketleri arasında olmalıdır.)

function dogrula()
{ confirm ("Formu düzgün doldurduysanız OK'i tıklayınız'); }

Bu fonksiyonda kullandığımız confirm nesnesi ile kullanıcıya OK ve Cancel tuşları ile emin misin ? Gönderiyorum denilmektedir.

8.4 onReset

Bu olay ile web sayfanızda bulunan formdaki yazdıklarınızın tamamen silinir. Yani yazdığınızın yanlış olduğunu farkettiniz bu durumda Sil (Reset) tuşunu tıklarsınız ve size boş bir form gelir. Yalnız burada birşeyi belirtmek isterim. Reset(Sil) tuşuna tıkladıktan sonra tarayıcının back(geri) düğmesini tıkladığınızda formunuzda yazdıklarınız tekrar geri gelmez. Fakat siz onReset olayı ile bu durum için son bir ziyaretçiye seçenek sunabilirsiniz.

Bunun ile ilgili bir örnek yapalım :

<html>
<head><title>onReset</title>
<script language="javascript1.2">

</script>
</head>
<body>
<form onReset="return sil()">
<input type="text" name="mail">
<input type="reset" value="sil">
</form>
</body>
</html>

8.5 onChange

Web sayfası üzerinde ziyaretçinin değiştirebileceği üç tür alan vardır. Bunlar text (metin) textarea (geniş metin alanı) select (seçim alanı) dır. Mouse u bu alanlar üzerine getirip tıkladığınızda onChange(değişti) olayını gerçekleştirmiş olursunuz. Şimdi bunu select yöntemi ile nasıl olduğunu görelim. Örneğimizde aşağı düşmeli bir menü tasarlayacağız ve şeçili durumda olan web sayfasına gönderme yapacağız.

<html>
<head><title>OnChange</title>
<script language="javascript1.2">

</script>
</head>
<body>
<form method="post">
<p><select name="degistir" size="1" onChange="degisti()">
<option>Adresi tikla
<option>Altavista
</select>
</form>
</body>
</html>

8.6 onLoad , onUnLoad

Bu olaylar bize sayfanın yüklenmeye başlamasında (onLoad) sayfadan ayrılıncaya (onUnLoad) kadar olan yapılacak işlemler için gereklidir. Bir Javascript fonksiyonun web sayfası yüklenmeye başladığında otomatik olarak çalışmasını istiyorsak onLoad olayını kullanırız. Eski DOS'çular bilirler Autoexec.bat dosyası nasıl makine açıldığında yapılmak istenenleri yapıyorsa onLoad olayında da sayfa yüklenmeye başladığında nelerin otomatik olarak başlatılacağını belirleyebiliriz. Mesela sayfa yüklenmeye başladığında (onLoad) ziyaretçiye Web sitemiz hoş geldiniz diyebiliriz. Sayfadan ayrıldığında (onUnLoad) ise İyi sörfler diyebiliriz. Örnek kodlara geçmeden önce şunu belirtmekte yarar var. Bildiğiniz üzere web sayfası kod açısında iki kısıma ayrılır. Bunlar head ve body kısmıdır. Tarayıcı açısında body kısmı asıl kısımdır. Head kısmında sayanın nasıl görüntüleneceği gibi bölümler yer alır. Bu yüzden onLoad ve onUnload kısmı body etiketleri arasında yer alır.

Şimdi de bunun için gerekli kodlara bir göz atalım.

<html>
<head>
<title>onLoad onUnLoad</title>
<script language="javascript1.2">

</script>
</head>
<body onLoad="hosgeldiniz()" onUnload="gulegule()">
</body>
</html>

8.7 onError onAbort

Ziyaretçi sayfayı herhangi bir neden yüzünden tam haliyle yükleyememiş olabilir. Bu nedenler aktarım hızı veya tarayıcının Javascript kodunu tam manasıyla yorumlayamamış olmasıdır. İşte bu durumda Error(hata) oluşur. Html üzerinde oluşan en sık error(hata) resim haritalarının (image-map) tam anlamıyla yüklenmemesinden kaynaklanır. Çünkü bu durumda resim tam yüklenmemiştir. Bu da ziyaretçinin resim üzerinde tıklayacağı yerlerin yorumlanmamasını doğurur.

Örnek :

Ziyaretçi resimlerin yüklenmesi çok uzun sürüp yüklemeyi stop(dur) tuşu ile kestiyse bu durumda onAbort olayı gerçekleşir. Bunun sonucu olarak ziyaretçiye bir hata mesajı verebilirsiniz. Bu durum daha önce bahsettiğimiz image-map ler içindir.

Javascript ile DHTML

Bu kısımda Javascript ile Katman(layer) özelliklerinin nasıl değiştirilebileceğini göreceğiz. Javascript bize Html sayfamızı oluşturan önemli unsurlardan biri olan layer(katman) ların tüm özelliklerini değiştirmemize olanak sağlar. Ayrıca hemen her yerde gördüğünüz resim değiştirme tekniğini de göreceğiz.

9.1 Katman Özelliklerini Değiştirme

İşe katman nedir sorusuyla başlayalım. Katman adı üzerinde sayfamızın üzerinde ne sayfadan bağımsız ne de her yönüyle sayfamıza bağlı bir unsurdur. Katman kullanarak istediğimiz herhangi bir yapıyı (yazı,resim,video,form) sayfamızın istediğimiz yerine koordinatları vermek koşulu ile yerleştirebiliriz. Zaten katmanın kullanım alanı en çok budur. Şimdi bir katman oluşturalım ve değiştirilebilir özelliklerini görelim.

<html>
<head><title>Layer</title></head>
<body>
<div id="denem" style="position:absolute ; left:100px ; top:200px;
width:300px ; height:400px ; visibility:visible" >
Su anda bir katman(layer)in icerisindeyim
</div>
</body>
</html>

Layer oluşturmak istediğinizde <div> etiketi ile başlar </div> etiketi ile kodunuz tamamlarsınız. Şimdi katman özelliklerine geçelim :

id : Katmanın ismi
style : Katmanın özelliklerini belirtmek için
absolute : Katmanın koordinatlarının kesin olacağını belirler
left : Katmanın soldan kaç piksel sonra başlayacağını belirler
top : Katmanın üstten kaç piksel sonra başlayacağını belirler
width : Katmanın kaç piksel genişliğinde olacağını belirler
height : Katmanın kaç piksel boyunda olacağını belirler
visibility : Katmanın görünür mü görünmez mi olacağını belirler

Şimdi de Javascript komutlarıyla bu özelliklerin nasıl değiştirildiğini görelim.

Fakat burada karşımıza bir sorun çıkmakta. Internet Explorer ve Netscape tarayıcılarının doküman nesne modelleri farklı olduğundan katmana ulaşma teknikleri de farklıdır. Internet Explorer kod tekniği katman_adı.style.değiştirilmesi_istenen_özellik=yeni_değer;

Örnek :

deneme.style.left=50px;

Netscape Navigator kod tekniği:

document.katman_adı.değiştirilmesi_istenen_özellik=yeni_değer;

Örnek :

document.deneme.left=50px;

Şimdi bir örnekle bir katmanın yerinin nasıl değiştirilebileceğini görelim.

<html>
<head><title>Katman</title>
<script language="javascript1.2">

</script></head>
<body onLoad="tara()">
<div id="katman" style="position:absolute ; left:400px; top:10px">
Bu katmanin yeri degisecek
</div>
<p><p><p>
<a href="javascript:hareket1()">Burayı tıklayın ve katmanınız 100x100'e gitsin</a><br>
<a href="javascript:hareket2()">Burayi tıklayın ve katmanınız 300x300' gitsin</a>
</body></html>

Buradaki örnekte olduğu gibi sizde katmanın diğer özelliklerini (width,height) değiştirebilirsiniz. Fakat görünebilirlik özelliği için özel bir durum vardır. Katman özelliklerine erişimde olduğu gibi bu özellikte de Internet Explorer ve Netscape Navigator farklılıkları vardır.

Internet Expolorer için Görünebilirlik özelliği

Katmanı görünebilir kılmak için:

katman_adı.style.visibility="visible"

Katmanı gizleyebilmek için. katman_adı.style.visibility="hidden"

Netscape Navigator için Görünebilirlik özelliği Katmanı görünebilir kılmak için:

document.katman_adı.visibility="show"

Katmanı gizleyebilmek için:

document.katman_adı.visibility="hide"

Şimdi de bununla ilgili bir örnek yapalım.

<html>
<head><title>Katman</title>
<script language="javascript1.2">

</script></head>
<body>
<div id="katman" style="position:absolute ; left:400px; top:10px">
Bu katmanin tikladiginizda yok olacak
</div><p><p><p>
<a href="javascript:sakla()">Burayi tiklayin ve katmaniniz yok olsun</a><br>
<a href="javascript:goster()">Burayi tiklayin ve katmaniniz geri gelsin</a>
</body></html>

Sizde bu tıklama özelliklerin değil de onMouseOver ve onMouseOut olay yönlendiricilerini kullanarak çok daha güzel şeyler üretebilirsiniz.