Javascript’in en önemli özelliklerinden biri ziyaertçi ile etkileşim kurma olanağı vermesidir. Ziyaretçi size bilgileri ancak ve sadece form ile ulaştırabilir. Bu sebeple javascript açısından html in en önemli nesneleri, form nesneleridir.

Form html etiketleri ile oluşturulur.Bu bakımdan javascript e ihtiyaç yoktur.Javascript formdaki bilgilerin işlenmesi sırasında devreye girer.

Sayfadaki form nesnelerini, name parametresiyle tanımladığımız isimler aracılığıyla çağırabiliriz.Örneğin, document.formbilgileri gibi.Form komutlarını da bu kök üzerine yerleştiririz.

Bilgi giriş elemanlarının (düğme, metin kutusu, kontrol kutusu, radio vb.) yapısı ve parametreleri html derslerinde anlatmıştı.İstersek o parametreleri javaScript koduyla tanımlayabiliriz.Örneğin metin kutusunun uzunluğunu karakter cinsinden belirleyen size parametresini javaScript kodlarıyla tanımlayan bir örnek ile bunu görelim.

Diğer parametreleri de bu şekilde kullanabilirsiniz.Örneğin maksimum karakter girişini belirlemek için maxlength kodundan yararlanabiliriz.Örnek:document.Form1.mesaj.maxlength

Form araçlarında sıkça kullanılan value parametresi vardı.Bu parametre ile metin kutusuna yazı yazdırıyor yada düğmelere isim veriyorduk.JavaScript kodlarıyla bu parametreyi, metin kutusuna yazılı olan ifadeyi değişkenlere aktarmak için de kullanabiliriz.Kısacası metin kutusundaki ifadeyi value parametresi ile ifade ederiz.Bu değeri okurken veya değiştirirken value parametresinden faydalanırız.

Şimdi sizinde hoşunuza gidecek bir örnek yapalım.

Örnekte basit bir bilgi giriş formu yapıldı.Fakat, girilen bilgiler pencere kapatılınca yok oluyor. Buradan yola çıkarak şunu şöyleyebiliriz; javascript, bilgileri aktarmaya ve dönüştürmeye yarar ancak bilgileri saklamaya yaramaz.Bunun için veri tabanı gereklidir.


Kontrol kutularını seçmek için checked parametresini true değeri verebiliriz veya bunu JavaScript ile "document.form1.kontrolkutusu1.checked=true" şeklinde ifade edebiliriz. Radyo kutusunun işlevi gereği sadece birinin seçilmesi için, her kutuya aynı isim veriliyordu.Bu durumda yukarıda yazıldığı gibi name özelliğini kullanamayız ama id parametresini kullanarak bu sorunu halledebiliriz. Bunu size bir örnek ile açıklayalım.

Örnekte if(document.soru.rad1.checked==true) yerine if(document.soru.rad1.checked) şekline bir kullanımda yapılabilir.Javascript her ikisi içinde aynı sonucu veir.

Radyo kutuları üzerinde başka türlü bir çalışma yöntemi daha vardır.Bu yöntemde, radyo kutularında "id" leri değil "value" ları kullanırsınız.Hangi radyo kutusunun seçili olduğunu anlamak için ise, "radyoKutusu[i].checked" yapısını kullanabilirsiniz.

 

Html derslerinde seçenek kutusu ile ilgili bilgileri vermiştik şimdi ise seçenek kutusu ile ilgili uygulamaların nasıl yapıldığına bakalım.Seçenek kutusunda kullanıcının işaretlediği seçeneği selectedIndex komutuyla indeks (sıra) numarası cinsinden ifade ederiz.Şimdi basit örnek yapalım ve açıklamalarımıza sonra devam edelim.

Bu örnek, kullanıcının seçtiği seçeneğin sıra numarasını gösterir.selectedIndex komutu seçeneklere 0 (sıfır)dan başlayarak değer verdiği için, örnekte sıra numarasını i+1 şeklinde ifade ederek yazdırdık.

Seçenek kutusundaki seçenekler options isimli bir dizi oluşturur.İlk seçenek options[0] şeklinde belirtilir. options[0].text ise, ilk seçeneği metinsel değer olarak ifade eder. Önceki uygulamada kullanıcının seçtiği seçeneğin sıra numarasını ifade ediyorduk.Şimdi sıra numarası yerine, seçeneği doğrudan ifeda eden bir örnek yapalım.

Kullanıcının seçtiği seçenek sıra sayısı cinsinden, selectedIndex ile ifade edildi.Sonra seçilen sıra numarası options dizini ve text komutu sayesinde metinsel değere dönüştürüldü.Eğer text yerine index komutu kullansaydık, yine sıra numarası elde edilirdi.Bunu örnekte deneyebilirsiniz.


                        << Belge Nesneleri | Form Nesneleri | Javascript Nesneleri >>
Başa Dön
AnaSayfa | Html Dersleri | CSS Dersleri | İçerik
Dizayn & Tasarım : Mehmet KAYA