Gösterilen sonuçlar: 1 ile 4 Toplam: 4

Konu: JavaScript

  1. #1
    Onursal Üye dogangunes - ait Kullanıcı Resmi (Avatar)
    Üyelik tarihi
    Apr 2007
    Burç:
    Kova
    Cinsiyet
    Kadin
    Mesaj
    17.801
    Rep Gücü
    137443

    JavaScript

    Değişkenler

    Değişken, adı üstünde, Javascript yorumlayıcısı tarafından bilgisayarın belleğinde tutulan ve içerdiği değer programın akışına göre değişen bir unsurdur. Değişkenlerin bir adı olur, bir de değeri. Program boyunca beğişkenin adı değişmez; fakat içeriği değişebilir.

    Değişkenlere isim verirken Belirleyici isimleri kurallarına riayet etmeniz gerekir. Yani bir değişkenin adı rakamla veya alt çizgi (_) dışında bir işaretle başlayamaz. Javascript, büyük harf-küçük harf ayırt ettiği (case-sensitive olduğu) için, örneğin SONUC ve sonuc kelimeleri iki ayrı değişken gösterir. Bir değişkeni tanımlarken, büyük harf kullandıysanız, program boyunca bu değişkeni büyük harle yazmanız gerekir.

    Değişken tanımlamak, bilgisayar programcılarına daima gereksiz bir yük gibi görünür. Birazdan göreceğiz, Javascript sadece değişkenleri tanımlamayı zorunlu kılmakla kalmaz, fakat nerede tanımlandığına da özel bir önem verir. Javascript’e bir Belirleyici’nin değişken olarak kullanılacağını bildirmek için “var” anahtar-kelimesini kullanırsınız:

    var sonuc
    var adi, soyadi, adres, siraNo
    var i, j, k
    var mouseNerede, kutuBos, kutuDolu

    Gördüğünüz gibi, bir “var” satırında birden fazla değişken tanımlayabilirsiniz.

    Bazı diğer programlardan farklı olarak Javascript, size değişkenleri hem beyan, hem de içeriğini belirleme işini aynı anda yapma imkanı verir (initialization):

    var sonuc = ”Javascript yazmaya başlıyorum!”
    var adi = ”Yavuz Selim”, soyadi = ”Göktürk”
    var i = 100, j = 0.01, k = 135
    var kutuBos = false, kutuDolu = true

    Gerekiyorsa, bir değişkeni önce tanımlar, sonra değerini belirleyebilirsiniz:

    var kutuBos = false, kutuDolu
    kutuDolu = true

    Javascript, programcıya bir değişkeni tanımlamadan “initalize etme” (içine doldurma) imkanı da verir; bu durumda o değişken genel (global) nitelik kazanır. Buna birazdan değineceğiz; ama iyi programlama tekniği ve özellikle daha sonra hata arama zorunluğu sebebiyle, değişkenlerin açık-seçik tanımlanması en doğru yoldur.

    Bir değişkeni tanımlayarak içini doldurmadan (initialization’dan) önce içindeki değeri sorgulamaya kalkarsanız, Browser’ın Javascript yorumlayıcısı o noktada durur ve tanımlanmamamış (undefined) değişken hatası verir.

    Javascript programlarında beş tür değişken bulunabilir:


    1. Sayı (number): -14, 78, 87678

    Sayı türündeki değişkenler, tam sayı, ondalık sayı, pozitif sayı veya negatif sayı olabilir. Sayı değişkenlerle aritmetik işlemler yapılabilir.

    var eni = 9, boyu = 4
    var alani = eni * boyu
    document.writeln(alani)

    Bu kod örneği ile Javascript, Browser penceresi içindeki belgeye “alani” adlı değişkenin değerini (36) yazdıracaktır.


    2. Boolean değişken: true, false

    Javascript, tanımlanırken değeri “true” (doğru) veya “false” (yanlış) olarak belirtilen değişkenleri otomatik olarak Boolean değişken olarak sınıflandırır ve sorguladığınızda “true” için 1, “false” için 0 değerini verir.


    3. Alfanümerik (String) Değişken: “javascript!”

    Alfanümerik değişken, kendisine tek veya çift tırnak içinde verilen bütün karakterleri tutar, ve sorulduğunda aynen bildirir. Alfanümerik değişkenin içi boş olabilir (var adi = “”, soyadi = “”). Alfanümerik değişkenler, tabir yerinde ise “toplandığında” değişkenlerin değerleri sırayla birbirine eklenir:

    var adi = “Yavuz Selim”, soyadi = “Göktürk”

    var adisoyadi = adi + soyadi

    document.writeln(adisoyadi)

    Bu kod örneği ile Javascript, Browser penceresi içindeki belgeye “adisoyadi” adlı değişkenin değerini (OsmanHomek) yazdıracaktır.

    4. İşlev (Function) Değişken:

    Javascript’in hayatî noktası fonksiyonlardır. Javascript’e fonksiyonlarla iş yaptırırız. Kimi fonksiyonu, Javascript’i tasarlayanlar bizim için tanımlamışlardır; bunlara metod denir. Kimi fonksiyonları biz tanımlarız ve komutlarını biz veririz. Bunlara “Programlanan Fonksiyonlar” denir. Başlarda yazdığınız ve ornek02.html adıyla kaydettiğiniz dosyada biz “ornek()” adlı bir fonksiyon oluşturduk; sonra bu fonksiyona bir otomatik fonksiyon olan alert() metodunu kullanmasını bildirdik; bu otomatik fonksiyona da görevini yaparken kullanmasını istediğimiz değer belirtilmiştir

    5. Nesne (Object) değişkenleri: window, document

    Bu tür değişkenlere değişken adını vermek gerekmez; çünkü bunlar Browser’ın nesneleridir. Fakat Javascript kodlarımızda bu nesneleri de değişken gibi kullanabilirsiniz. Bu sınıfa giren özel bir değişken ise değerini “null” (içi boş) kelimesiyle belirlediğiniz değişkenlerdir.

    Sınıflamanın önemi, daha sonra, programın ileri bir aşamasında bir değişkenin değeri ile yaptıracağınız işlemde ortaya çıkacaktır. Bir değişken, kendi sınıfının yapamayacağı bir işleme veya sorgulamaya tabi tutulursa, Javascript bir hata mesajı ile değişkeni doğru kullanmadığınızı hatırlatır.

    Bununla birlikte bir fonksiyonda sayı olarak tanımlanmış ve doldurulmuş bir değişken, aynı fonksiyonda daha sonraki bir işlemde veya başka bir fonksiyonda alfanümerik değişken olarak tanımlanabilir ve doldurulabilir. Bu değişken sorgulandığında değerini, yetki alanı (scope) çerçevesinde bildirir.

    Değişkenlerin yetki alanı veya geçerli olduğu alan (scope), oluşturulmuş ve değeri belirlenmiş olduğu sahayı, yani kendisine atıfta bulunulduğu zaman bildireceği değerini ve bu değişkene nerelerden atıfta bulunulabileceğini gösterir. Şimdi, HTML dosyasının baş tarafında (HEAD etiketi içinde) bir değişkeni tanımladığınızı ve ona bir değer verdiğinizi düşünelim. Daha sonra yazacağınız bütün fonksiyonlarda veya değerini belirleyebileceğiniz otomatik fonksiyonlarda (metod’larda) bu değişkeni bir daha tanımlamaya ve değerini belirlemeye gerek kalmadan kullanabilirsiniz; çünkü Javascript açısından bu değişken genel (global) değişken sayılır. Daha sonra ayrıntılı olarak göreceğimiz gibi, HTML’in gövde kısmında (BODY etiketi içinde) bir fonksiyon yazdığımızı ve bu fonksiyonun içinde bir değişken tanımladığımızı düşünelim. Daha sonra yazacağınız bir fonksiyonda bu değişkeni kullanamazsınız; çünkü Javascript bir fonksiyonun içindeki değişkeni yerel (local) değişken sayar ve kendi yetki alanı (scope’u) dışında kullanmanıza izin vermez. Bir yerel değişken, ait olduğu fonksiyon çağrıldığı anda oluşturulur ve fonksiyonun icrası bittiği anda yok edilir. Dolayısıyla bir fonksiyon, başka bir fonksiyonun yerel değişkinini kullanmaya kalktığında “undefined” (tanımlanmamış) değişken hatasıyla karşılaşırsınız.

    Bir değişkeni bütün HTML sayfası boyunca kullanmayı düşünüyorsanız, bu değişkeni, HTML sayfasının başında içinde fonksiyon bulunmayan bir SCRIPT bölümünde tanımlamalı ve doldurmalısınız. İyi bir programlama tekniği, genel değişkenleri, açık-seçik tanımlamak ve bunu yorum satırıyla belirtmektir:



    <HTML>
    <HEAD>
    <meta http-equiv="Content-Type" *********"text/html; charset=windows-1254">
    <TITLE>Javascript ornek06!</TITLE>
    <SCRIPT LANGUAGE="Javascript1.2">
    <!-- Javascript kodunu eski sürüm Browserlardan saklayalim
    // genel değişken tanımları
    var metin1 = "Javascript!"
    var metin2 = "Gaziantep Üniversitesi..."
    var metin3 = "Gölbaşı Meslek Yüksek Okulu..."
    // -->
    </SCRIPT>
    </HEAD><center>
    <P>BURAYA ÇEŞİTLİ AMAÇLARLA HTML KODLARI GİREBİLİR!! SONRA TEKRAR SIRA JAVASCRIPT'E GELEBİLİR</P>
    <SCRIPT LANGUAGE="Javascript1.2">
    <!-- Javascript kodunu eski sürüm Browserlardan saklayalim
    //bu fonksiyon uyarı kutusu açar
    function ornek()
    {
    alert(metin1)
    alert(metin2)

    alert(metin3)

    }
    // -->
    </SCRIPT>
    </HEAD>
    <BODY>
    <B>Javascript</B><br>
    <FORM>
    <INPUT TYPE="SUBMIT" NAME="dugme1" VALUE="TIKLAYIN!" onclick="ornek()">
    </FORM>
    </BODY>
    </HTML>



    Bu kodu da ornek06.html adıyla kaydedebilirsiniz. Şimdi, ornek06’da ornek() fonksiyonunu şöyle değiştirin ve şu eki yapın:



    Function merhaba()
    {
    var metin1 = "Javascript sayfasına Hoş Geldiniz!"
    alert(metin1)
    }
    function hello()
    {
    alert(metin1)
    }





    Sonra, aynı dosyada mevcut düğme oluşturan INPUT satırının altına şu satırı ekleyin; sayfanızda iki düğme görünecektir:

    <INPUT TYPE="SUBMIT" NAME="dugme2" VALUE="TIKLAYIN!" onclick="hello()">

    Bu düğmelerden birincisi, ornek() fonksiyonunu, ikincisi hello() fonksiyonunu çağıracak. Genel olarak tanımladığınız ve değer verdiğiniz metin1 değişkeninin değerini ornek() fonksiyonunda değiştirdiniz; bu değişkenin yeni değeri “Javascript sayfasına Hoş Geldiniz!” şeklini aldı. Bu metni, ornek07.html adıyla kaydedip, Browser’da açtığınızda ve birinci düğmeyi tıkladığınızda, uyarı kutusunun içeriğinin metin1 değişkeninin genel değerini değil yerel değerini içerdiğini görülür. Yani metin1’in değeri değişmiş oldu.İkinci düğmeyi tıkladığınızda metin1’in değeri değişmemiş gibi, uyarı kutusunun genel tanımlamadaki değeri kullandığını göreceksiniz.

    Bu alıştırmada anlatılmak istenen: Bir genel değişken, bir fonksiyon içinde yerel olarak değiştirilebilir; ama onun genel değeri diğer fonksiyonlar için geçerli kalır. Javascript programlarınızı yazdığınız zaman genel değişkenleriniz beklediğiniz değeri vermiyorsa bu değeri bir fonksiyonun yerel olarak, sırf kendisi için, değiştirip değiştirmediğine bakmalısınız. Bu tür hatalardan kaçınmanın bir yolu, yerel değişkenlerinizle genel değişkenlerinize farklı isimler vermektir.

    Javascript, değişkenlerinizi isimlendirmede rakamla ve işaretle başlamamak dışında kural koymuyor; ama iyi programcılık tekniği, değişkenlere anlaşılır ve kullanıldığı yeni belli eden isimler vermektir. Örneğin, ”adi” şeklindeki bir değişken adı, çok değişkenli bir Javascript programında yanıltıcı olur. “musteri_adi” veya “musteriAdi” çok daha uygun olabilir. Ayrıca değeri “Evet” (=doğru, true) veya “Hayır” (=yanlış, false) olan Boolean değişkenlerin adlandırılmasında, örneğin, “doluMu,” “tamamMi,” “acikMi,” “bittiMi” gibi cevabı çağrıştıran değişken adlarının kullanılması daha doğru olur.


    Dizi-Değişken (Array)

    Javascript’in şu ana kadar ele aldığımız bütün değişkenleri, tekildir. Yani bu değişkenlerden Javascript bakımından sadece bir adet vardır; dolayısıyla bir adet de değeri bulunur.

    Oysa şimdi şöyle bir durum düşünelim: Evcil kuşları tanıttığınız bir site yapıyorsunuz. Ele alacağınız bütün kuşları ve özelliklerini bir tablo olarak düşünebilir misiniz? Kuş-1: Kanarya, Kuş-2: Bülbül, Kuş-3: Muhabbet Kuş-4: Papağan, gibi. Bunların hepsini tek tek tanımlamaya kalkarsak, daha sonra kullanım zorluğu doğabilirdi. Javascript, bize “dizi-değişken” (Array) yoluyla, örneğin bir “kuş” değişkeni oluşturup, bunun içine istediğimiz kadar değer koyma imkanı veriyor. Bir dizi-değişkenin bireylerinin değerlerini dizi-değişkenin endeksi ile çağırabilir veya belirlenebilir.

    Bir dizi-değişken oluşturmak aşsğıdaki gibidir:

    var dizinin_Adı = new Array(unsur1, unsur2, unsur3...unsurN)

    Bu formüle göre, kuş dizisini şöyle oluşturabiliriz:

    var kusDizi = new Array(bülbül, kanarya,muhabbet, papagan)

    Diziler (nedendir, bilinmez) sıfırdan itibaren numaralanır; yani örnek de dizinin birinci üyesi kusDizi[0], ikinci üyesi kusDizi[1], üçüncü üyesi kusDizi[2], dördüncü üyesi ise kusDizi[3] diye anılır. Burada örneğin kusDizi[2] değişkeni ”muhabbet” değerini taşır. İlerde bu değeri değiştirmek ve diyelim ki “Saka” yapmak istersek, Javascript kodumuzun uygun yerinde şunu yazarız:

    kusDizi[2]=”saka”

    Dizi-değişkenleri, özellikle ele almamızın bir nedeni, dizilerin Javascript açısından nesne sayılmasıdır. Dizi-değişkenlerin, nesne oldukları için özellikleri (property) vardır. Örneğin, oluşturulan dizi-değişkenin kaç üyesi olduğu, “kusDizi.length” özelliğinin içinde yazılıdır.

    Her Hakkım Saklıdır®
    |l|lllll|lll||ll||lll||ll||
    ³³°¹³²¹³ °¹²¹²²³
    © σяigiиαL-ρяσfiLє ®

    Supermeydan

  2. #2
    Onursal Üye dogangunes - ait Kullanıcı Resmi (Avatar)
    Üyelik tarihi
    Apr 2007
    Burç:
    Kova
    Cinsiyet
    Kadin
    Mesaj
    17.801
    Rep Gücü
    137443

    Cevap: JavaScript

    NESNELER

    Javascript ile yazacağımız programlar, Netscape veya Internet Explorer programlarının belge nesne modeli (Document Object Model) denen kurallar içinde hareket etmek zorundadır. Daha yüksek programlama dillerine, örneğin C++, Delphi veya Java gibi dillerle program yazmışsanız, programcı olarak başka bir programın modeli ile sınırlı olmadığınızı, hatta işletim sisteminin programlar için sağladığı arayüzle (API) kendinizi sınırlı hissetmeyebileceğinizi bilirsiniz. Fakat Javascript dahil tüm Script dilleri, Browser’ın sunduğu hiyerarşik nesne modeli ile sınırlıdır. Yukarıda Netscape’in modelini görüyorsunuz. Gerçi Internet Explorer çok daha fazla nesneyi kontrol etmenize imkan veriyor; fakat IE’nin geniş alanına giren nesnelere yönelik Javascript programı, Netscape kullanan ziyaretçilerin bilgisayarında işleyemeyebilir:

    Javascript’te “document” nesnesi kavramını öğrenirken, ilk kavranması gereken unsur, “container” (içinde tutan, kap) meselesidir. Hatırlayacağınız gibi, yukarıdan beri Javascript’e ekrana bir şey yazdıracağımız zaman, şuna benzer bir komut veriyoruz:

    document.write(“<H1>Javascript yazmaya Başlıyorum!</H1>”

    Burada kullandığımız write()metodu, “document” nesnesine, o da Browser’ın “window” (pencere) nesnesine aittir. “window” nesnesini zikretmiyoruz; çünkü zaten onun içindeyiz. Ama yeni bir Browser penceresi açtırmak istersek, bunu da açıkça belirtmemiz gerekir. Aşağıdaki kodu, düz yazı programınızda yazarak, yenipencere.html adıyla kaydederseniz ve Browser’ınızda açarsanız, size yeni bir “window” nesnesi oluşturma imkanı verecektir:


    <HTML>
    <HEAD>
    <meta http-equiv="Content-Type" *********"text/html; charset=windows-1254">
    <TITLE>Javascript'te Yeni Pencere</TITLE>
    <SCRIPT LANGUAGE = "Javascript1.2">
    <!-- Javascript kodunu eski sürüm Browserlardan saklayalım
    var windowNesnesi
    function yeniPencere()
    {
    windowNesnesi = window.open("", "YeniPencere", "toolbar=0, width=300, height=150, resizable=1")
    windowNesnesi.document.write("<H2>İşte yeni Pencereniz.. Tebrikler!</H2>")
    }
    function kapaPencere()
    {
    windowNesnesi.close()
    }
    // -->
    </SCRIPT>
    <BODY OnUnload="kapaPencere()">
    <H1>Bu düğmeyi tıklarsanız, yeni pencere açılır.</H1>
    <FORM>
    <INPUT Type="button" Value="Yeni Pencere Aç" OnClick="yeniPencere()" </INPUT>
    </FORM>
    </BODY>
    </HTML>



    Browser’ın kendi içinde bulunan “window.open()” metodunu kullanarak, araç çubuğu bulunmayan, eni 300 yüksekliği 150 piksel ve ziyaretçi tarafından ölçüleri değiştirilebilen bir yeni Browser penceresi açıyor. Aslında bu noktada windowsNesnesi adlı değişken, bu nesnenin buradaki temsilcisi sayılır; yeni nesneye ne yaptırtmak isterseniz, burada, windowNesnesi değişkinini kullanarak yapabilirsiniz. Bir başka dikkat edilmesi gereken nokta, yeni Window nesnesini oluşturduktan sonra bir daha “window” nesne adını kullanmıyoruz, sadece document adlı container’in (kabın) adına referans yapıyoruz.

    Yukarıdaki şemada gördüğümüz nesnelerin HTML karşılıkları şöyledir:


    Javascript Nesnesi HTML Karşılığı
    Pencere (Window)
    Yok

    Çerçeve (Frame)
    <FRAME>

    Belge (Document)
    <BODY>

    Form
    <FORM>

    Düğme
    <INPUT TYPE="button">

    İşaretleme Kutusu
    <INPUT TYPE="checkbox">

    Gizli (Hidden)
    <INPUT TYPE="hidden">

    Dosya Çıkart (file upload)
    <INPUT TYPE="file">

    Parola (password)
    <INPUT TYPE="password">

    Radyo düğmesi (Radio)
    <INPUT TYPE="radio">

    Başa dön (Reset)
    <INPUT TYPE="reset">

    Seç (Select)
    <SELECT>

    Gönder (Submit)
    <INPUT TYPE="submit">

    Metin (Text)
    <INPUT TYPE="text">

    Metin Alanı (Textarea)
    <TEXTAREA>

    Bağ (Link)
    <A HREF="">

    Bağlantı (Anchor)
    <A NAME="">

    Applet
    <APPLET>

    Resim (Image)
    <IMG>

    Plugin
    <EMBED>

    Alan (Area)
    <MAP>




    Window nesnesinin HTML karşılığı bulunmamakla birlikte BODY etiketinin onLoad ve unonLoad olaylarında işleyen bir fonksiyonla yeni window nesnesi oluşturmanız (yukarıdaki örnekte olduğu gibi) daima mümkündür. Ayrıca, içinde bulunduğunuz veya yeni açmak istediğiniz bir Browser penceresinin alt çervesindeki Status (durum) mesajı alanına istediğiniz mesajı yazdırabilirsiniz:

    window.status = ’Benim sayfama hoş geldiniz!’

    Internet, HTML sayfası ve bağlı belgelerle bilgisayar dosyalarını alıp vermek demektir. Mahal (Location) nesnesi, Browser’ın görüntülediği belgenin nereden geldiğini gösterir. Gerçi, HTML size görüntülediği belgenin nereden geldiğini bildirmez, ama Browser, bunu “window.location.protocol” nesnesi olarak tutar. Bu değer ya “http:” ya da “file:” (ikisi de küçük harf ve sonlarında iki nokta üstüste var) olur. Örneğin:

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

    şeklinde bir kodla, belgenin mahallini araştırmak mümkündür.

    Tarih (History) nesnesi ise, her iki Browser’ın, ziyaret edilen siteler ve sayfalar listesinde ileri veya geri gitmekte kullandığı nesnedir. HTML’de bu listeye erişmeyi sağlayan etiket bulunmamakla birlikte Javascript bu listeyi kullanabilir. Örneğin:

    function gerigit() { window.history.go(-1) }

    şeklindeki bir fonksiyon ve bu fonksiyonu çağıran bir düğme (onClick=gerigit() gibi) Tarin nesnesinden yararlanmasını sağlayabilir.

    Her Hakkım Saklıdır®
    |l|lllll|lll||ll||lll||ll||
    ³³°¹³²¹³ °¹²¹²²³
    © σяigiиαL-ρяσfiLє ®

    Supermeydan

  3. #3
    Onursal Üye dogangunes - ait Kullanıcı Resmi (Avatar)
    Üyelik tarihi
    Apr 2007
    Burç:
    Kova
    Cinsiyet
    Kadin
    Mesaj
    17.801
    Rep Gücü
    137443

    Cevap: JavaScript


    FORM NESNELERİ


    Javascript’in icad edilme nedenlerinin başında, ziyaretçi ile etkileşme gelir; ziyaretçi ise Web tasarımcısı olarak size bilgileri ancak ve sadece Form ile ulaştırabilir. Bu sebeple Javascript açısından HTML’in en önemli nesneleri, Form nesneleridir.

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

    <FORM

    NAME=formun_adı

    ACTION=CGI_programı

    ENCTYPE=kodlama_türü

    METHOD= GET veya POST

    TARGET= pencere_adı

    onSubmit=”metodun_adı”>
    </FORM>

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

    <FORM NAME=”form1” ACTION=”http://www1.gantep.edu.tr/golbasimyo/form.pl” METHOD= GET>

    </FORM>

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

    Form, gerçek amacıyla kullanıldığı durumlarda, Javascript, formdaki bilgilerin Server’a gönderilmeden önce sınanmasını sağlayabilir. Bunun bir örneğini, ziyaretçinin telefon numarasını doğru biçimde yazıp yazmadığını sınadığımız kodda görmüştük. Burada kısaca, Javascript açısından form

    nesnesinin unsurlarını nasıl tanıyabileceğimizi ele alalım. Benzeri sınama kodları yazarken, bu unsurlara referans yapacağınız zaman, bu unsurların adlarını ve değerlerini bulma yöntemini bilmeniz gerekir.

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

    Formun unsurları

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




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




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

    Buradaki örnekte düğme (button) nesnesinin Click olayını onClick yönlendiricisi ile yakaladık. Form nesnesindeki diğer nesnelerden metin (text) ve metin alanı (textarea) nesneleri, onBlur, onChange, onFocus, onSelect yönlendiricileri ile; işaret kutusu (checkbox) ve radyo düğmesi (radio) onClick yönlendiricisi ile, seçme listesi (select) onBlur, onChange ve onFocus yönlendiricileri ile fonksiyon çağırabilirler.

    Javascript fonksiyonlarımızda Form nesnesinin işaretleme kutularından hangisinin işaretlenmiş olduğunu belirlemek işaretli unsurun değerlerini bulabilmek, değiştirebilmek veya başka bir yerde kullanabilmek için önem taşır. Browser, ele aldığı bir HTML sayfasındaki Form nesnesinin unsurlarını ve burada CHECKBOX nesnesini bir dizi-değişkenin içinde tutar; bunlardan işaretlenmiş olanın CHECKED (işaretli) özelliğini True (doğru) yapar. Bu durumdan yararlanarak istediğimiz kutunun işaretli olup olmadığını sorgulayabiliriz. Burada nesnenin “.value” özelliği işe yaramaz; çünkü kutu işaretli olsa da olmasa da “.value” özelliği aynıdır. İşaretleme kutularında bilmek istediğimiz husus, bu nedenle işaretli olup olmadıklarıdır. Örneğin, sayfamızda, “form1” adlı bir formda “isaret01” adlı bir işaret kutusu varsa, bu kutunun işaretli olup olmadığını şu if döngüsü sınayabilir:

    if (document.form1.isaret01.checked) {
    .......

    Bu ifade, kutu gerçekten işaretli arzu ettiğimiz bir işi yapar, değilse yapmaz.

    Radyo Düğmesi (Radio)

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


    <HTML>
    <HEAD>
    <TITLE>Radyo Dugmesi Örnegi</TITLE>
    <META http-equiv="Content-Type" *********"text/html; charset=windows-254">
    <SCRIPT LANGUAGE = "JavaScript1.2">

    function radyoDegeri(radyoNesnesi) {

    var deger = null

    for (var i=0; i<radyoNesnesi.length; i++)

    {

    if (radyoNesnesi[i].checked)

    {

    deger = radyoNesnesi[i].valuebreak

    }

    }

    return deger

    }

    </SCRIPT>

    </HEAD>

    <BODY>

    <FORM name="form1">

    <p><input type=radio name="sanatci" value="Türkü">Neşet Ertaş</p>

    <p><input type=radio name="sanatci" value="Şarkı">Zeki Müren</p>

    <p><input type=radio name="sanatci" value="Pek anlamadım!">Sezen Aksu</p>

    <input type=button value="Ne tür müzik seviyorum?" onClick="alert(radyoDegeri(this.form.sanatci))">

    </FORM>

    </BODY>

    </HTML>



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


    Select

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


    <HTML>
    <HEAD>
    <title>Seçme Kutusu Ornegi</title>
    <meta http-equiv="Content-Type"*********"text/html; charset=windows-1254">
    <SCRIPT LANGUAGE = "JavaScript1.2">
    function secDegeri(secNesnesi) {
    return secNesnesi.options[secNesnesi.selectedIndex].value

    }
    </SCRIPT>

    </HEAD>

    <BODY>

    <FORM name="form1">
    <p><SELECT NAME="sanatci" SIZE=1>
    <OPTION value="Türkü">Neset Ertas</OPTION>

    <OPTION value="Sarki">Zeki Müren</OPTION>

    <OPTION value="Pek anlamadim!">Sezen Aksu</OPTION></P>

    <input type=button value="Ne tür müzik seviyorum?" onClick="alert(secDegeri(this.form.sanatci))">

    </FORM>

    </BODY>

    </HTML>


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

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


    <html>
    <head>
    <title>Seçme Listesi Ornegi</title>
    <meta http-equiv="Content-Type"*********"text/html;charset=windows-1254">
    <SCRIPT LANGUAGE = "JavaScript1.2">

    function secDegeri(secilenIsim)

    {

    var liste = ""
    for (var i=0; i<secilenIsim.length; i++)

    {
    if (secilenIsim.options[i].selected)

    {
    liste += secilenIsim.options[i].text + "<p>"
    }
    }
    yeniPencere = window.open ("", "Seçtikleriniz", "height=200, width=200")
    yeniPencere.document.write("<H2>Şu şarkıları seçtiniz:</H2><P><P>")
    yeniPencere.document.write(liste)
    }
    </SCRIPT>

    </HEAD>

    <BODY>

    <FORM name="form1">
    <p><SELECT NAME="sanatci" SIZE=4 MULTIPLE>
    <OPTION>Neset Ertas</OPTION>

    <OPTION>Zeki Müren</OPTION>

    <OPTION>Sezen Aksu</OPTION>
    <OPTION>Kayahan</OPTION>

    <OPTION>Mustafa Sandal</OPTION>

    <OPTION>Müşerref Tezcan</OPTION>
    </P><input type=button value="Hangilerini seçtim?" onClick="secDegeri(this.form.sanatci)">

    </FORM>

    </BODY>

    </HTML>



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

    Password

    Form nesnesinin Javascript yoluyla mutlaka kullanmak isteyeceğiniz bir ögesi, Password (Parola) nesnesidir. Ziyaretçinin, Password olarak nitelediğiniz INPUT kutusuna yazdığı metin, kendisine * olarak görünür; fakat Browser ve dolayısıyla Javascript bu metni bilir.

    Javascript’in ilk sürümlerinde Password nesnesinin değeri Javascript tarafından bilinemezdi; fakat 1.1 sürümü ile Javascript bu nesnenin de bütün kontrolünü ele geçirdi. Aşağıdaki kodu parola.html adıyla kaydederseniz, Password nesnesinin de değerini elde ederek, kullanabileceğinizi göreceksiniz.



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




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


    Gizli Nesneler (Hidden)

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

    alıntı

    Her Hakkım Saklıdır®
    |l|lllll|lll||ll||lll||ll||
    ³³°¹³²¹³ °¹²¹²²³
    © σяigiиαL-ρяσfiLє ®

    Supermeydan

  4. #4
    Üyecik
    Üyelik tarihi
    Nov 2010
    Mesaj
    1
    Rep Gücü
    8
    Paylaşım için cok teşekkürler..

Benzer Konular

  1. JavaScript kod bankası
    YukseLL Tarafından java scripts Foruma
    Yorum: 1
    Son mesaj: 29-09-2015, 01:58 AM
  2. Javascript Ders Notları
    dogangunes Tarafından java scripts Foruma
    Yorum: 0
    Son mesaj: 27-02-2008, 03:04 AM
  3. cross-frame - Javascript Çalıştırma
    nehir_nehir Tarafından java scripts Foruma
    Yorum: 0
    Son mesaj: 05-08-2007, 02:16 PM
  4. Kar yagdıran Javascript
    YukseLL Tarafından java scripts Foruma
    Yorum: 0
    Son mesaj: 29-11-2006, 10:46 PM
  5. JavaScript Collector v1.1
    Quarezma Tarafından Web Tasarım ve Google Foruma
    Yorum: 0
    Son mesaj: 14-03-2006, 10:30 PM
Yukarı Çık