arşiv

‘Javascript’ kategorisi için arşiv

JavaScript ile HTML İşleme – 3

Cumartesi, 21 Mar 2009 Soner Gönül View Comments

Merhabalar..Yazının 3. kısmında açılır kutulardan, metin alanlarının işlenmesinden  bahsedeceğim.

  • Açılır Kutuların İşlenmesi

Bu kutularla ilgili en önemli özellik selectedIndex’tir. Bu özellik hangi açılır kutu değerinin seçildiğini belirler ve değeri sıfırdan başlayarak toplam seçenek sayısının 1 eksiği kadardır.

Bu kutuların çalıştırdığı en önemli olay onchange’dir. Bu açılır kutudaki seçenek her değiştirğinde meydana gelir.

  1. <html>
  2. <head>
  3. <script type=”text/javascript”>
  4. function acilirtest(acilirkutu)
  5. {
  6. deger = acilirkutu.value;
  7. alert (“Açılır kutu değeri ” + deger);
  9. for (i=0; acilirkutu.length; i++)
  10. alert (acilirkutu[i].value);
  11. }
  12. </script>
  13. </head>
  14. <body>
  15. <form name=”form1″>
  16. <select name=”iller” onchange=”acilirkutu(this)”>
  17. <option value=”6″>Ankara</option>
  18. <option value=”22″ selected>Edirne</option>
  19. <option value=”34″>İstanbul</option>
  20. <option value=”39″>Kırklareli</option>
  21. </select>
  22. <input type=”button” value=”Ankara”
  23. onclick=”document.form1.iller.selectedIndex=0″>
  24. <input type=”button” value=”Edirne”
  25. onclick=”document.form1.iller.selectedIndex=1″>
  26. <input type=”button” value=”İstanbul”
  27. onclick=”document.form1.iller.selectedIndex=2″>
  28. <input type=”button” value=”Kırklareli”
  29. onclick=”document.form1.iller.selectedIndex=3″>
  30. </form>
  31. </body>
  32. </html>

Yukarıdaki kodun çıktısı ağaşıdaki gibi olur.

Biz hangi butona basarsak açılır kutuda o butonun onclikc olayı çalışacağından o ili gösterecektir.

  • Metin Alanlarının İşlenmesi

Metin alanlarında value özelliği kulanılarak metin kutusu içerisindeki değer rahatlıkla okunabilir ya da üzerinde değişiklik yapılabilir.

  1. <html>
  2. <head>
  3. <script type=”text/javascript”>
  4. function oku()
  5. {
  6. metin=document.form1.soz.value;
  7. alert (“Metin alanı içindeki değer ” + metin);
  8. }
  9. function yaz()
  10. {
  11. document.form1.soz.value=”Soner Gönül ” + “www.sonergonul.com”;
  12. }
  13. </script>
  14. </head>
  15. <body>
  16. <form name=”form1″>
  17. <textarea name=”soz”>Haydi şimdi bütün eller havaya!</textarea>
  18. <input type=”button” value=”Test” onclick=”oku()”>
  19. <input type=”button” value=”Metin Ekle” onclick=”yaz()”>
  20. </form>
  21. </body>
  22. </html>

Yukarıdaki kodun çıktısı aşağıdaki gibi olur.

Test butonuna tıkladığımızda metin alanındaki mesajı ekranda mesaj kutusunda gösterir. Metin ekle butonuna tıklanıldığında ise yaz() fonksiyonu çalışarak metin kutusuna yaz fonksiyonunun içindeki değerler yazdırılır.


Related posts
Categories: Javascript Tags: , ,

JavaScript ile HTML İşleme – 2

Çarşamba, 18 Mar 2009 Soner Gönül View Comments

Javascript’te butonların işlenmesi çok basit bir konudur. HTML’de de submit, normal ve reset olmak üzere 3 farklı tür buton var. Bu butonların tıklanmasıyla oluşabilecek olaylar ise ; onclick, onsubmit ve onreset olaylarıdır.

  1. <html>
  2. <body>
  3. <form name=”form1″ action=”ornek1.html” method=”POST”
  4. onsubmit=”alert(‘OnSubmit Olayı’)”
  5. onreset=”alert(‘OnReset Olayı’)”>
  6. a:<input type=”text” name=”a” value=”"><br>
  7. b:<input type=”text” name=”a” value=”">
  8. <input type=”submit”  value=”Gönder”
  9. onclick=”alert(‘Submit Butonu’)”>&nbsp;
  10. <input type=”reset”  value=”Temizle”
  11. onclick=”alert(‘Reset Butonu’)”>&nbsp;
  12. <input type=”button”  value=”Düğme”
  13. onclick=”alert(‘Normal Buton’)”><br>
  14. </form>
  15. </body>
  16. </html>

Yukarıdaki kodun çıktısı aşağıdaki gibi görünür.

  • Radyo Butonların İşlenmesi

Bunlara ulaşmak için dizi şeklinde form nesnelerinden faydalanılır. Radyo butonun değer value ile, işaretli olup olmadığı ise checked özelliğinden faylanarak bulunabilir. Örneğin;

  1. <html>
  2. <head>
  3. <script type=”text/javascript”>
  4. function radyotest(radyo)
  5. {
  6. if (document.form1.c[0].checked== true)
  7. alert(‘Erkek İşaretlendi’);
  8. else
  9. alert(‘Kadın İşaretlendi’);
  11. deger = radyo.value;
  12. alert (“Seçilen değer” + deger);
  13. }
  14. </script>
  15. </head>
  16. <body>
  17. </form name=”form1″>
  18. <input type=”radio” name=”c” value=”E”
  19. onclick=”radyotest(this)”>Erkek
  20. <input type=”radio” name=”c” value=”K”
  21. onclick=”radyotest(this)”>Kadın
  22. <br>
  23. <input type=”button” value=”Erkek”
  24. onclick=”document.form1.c[0].checked = true;”>
  25. <input type=”button” value=”Kadın”
  26. onclick=”document.form1.c[1].checked = true;”>
  27. </form>
  28. </body>
  29. </html>

Yukarıdaki kodta hangi radyo buton işaretleneckese o butonun checked özelliği true yapılmıştır.

  • Onay Kutularının İşlenmesi

Radyo butonlardan biraz farklı olarak bunlarda taşıdığı değer value ile, işaretli olup olmadığı ise checked özelliği ile belirlenir. Ayrıca checked özelliği ile herhangi bir onay kutusunun işaretlenmesi sağlanabilir.

  1. <html>
  2. <head>
  3. <script type=”text/javascript”>
  4. function onaytest(onaykutu)
  5. {
  6. deger = onaykutu.value;
  7. if (onaykutu.checked == true)
  8. alert (“Seçilen değer ” + deger);
  9. }
  10. </script>
  11. </head>
  12. <body>
  13. </form name=”form1″>
  14. <input type=”checkbox” name=”kitap” value=”oyku”
  15. onclick=”onaytest(this)”>Öykü
  16. <br>
  17. <input type=”checkbox” name=”kitap” value=”roman”
  18. onclick=”onaytest(this)”>Roman
  19. <br>
  20. <input type=”checkbox” name=”kitap” value=”hikaye”
  21. onclick=”onaytest(this)”>Hikaye
  22. <br>
  23. <input type=”button” value=”Öykü”
  24. onclick=”document.form1.kitap[0].checked=true”>
  25. <input type=”button” value=”Roman”
  26. onclick=”document.form1.kitap[1].checked=true”>
  27. <input type=”button” value=”Hikaye”
  28. onclick=”document.form1.kitap[2].checked=true”>
  29. </form>
  30. </body>
  31. </html>

Yukarıdaki kodun çıktısı şu şekilde olur.

Şimdilik bu kadar. Yazının 3. bölümünde açılır kutuların, metin alanların ve JavaScript’le HTML formları dışında nasıl kullanılabileceğine değineceğim.

Esenliklerle kalın ;)

Related posts
Categories: Javascript Tags: ,

JavaScript ile HTML İşleme – 1

Pazartesi, 16 Mar 2009 Soner Gönül View Comments

Şu aralar PHP ile birlikte öğrenmeye çalıştığım teknolojilerden biri Javascript. Javascript, bir kullanıcının web taracıyılarında çalışan bir script dili. HTML kodları içerisine gömülebildiği için de çok hızlı çalışır. Ve JavaScript kodlarının çalıştırılabilmesi için sadece bir web tarayıcısına ihtiyaç duyarız.

JavaScript kişi ile etkileşimi olay yönelimli programlama ile olur. Peki nedir bu olaylar bir kaç örnek verelim;

  • Bir Butona tıklamak
  • Bir Formu göndermek
  • HTML gövdesinin yüklenmesi
  • Bir Metin Kutusundaki değeri değiştirmek

Bu tür olaylar gerçekleştirildiğinde kod veya fonksiyonlar tetiklenir. Nasıl çalıştığından bahsettikten sonra biraz da kodlamaya geçelim ;) 

<html>
<head>
<title> İlk Javascript Programımız</title>
</head>
<body>
<script type="text/javascript">
alert("Hello JavaScrit!!");
</script>
</body>
</html>

Yukarıdaki kodu çalıştırdığımızda karşımızdaki browser’da “Hello JavaScript” mesajı alırız.

Bunun dışında dışarıdan bir JavaScript dosyası çağırarakta HTML içinde bu kodları çağırabiliriz. Örneğin yukarıdaki kod parçasında <script> </script> tagları arasındaki kodları deneme.js dosyasına yazıp daha sonra da html dosyası içerisinde;

<script type="text/javascript" src="deneme.js">

şeklinde yazıp kullanabiliriz.

HTML formlarını işlerken ise herhangi bir forma bağlı nesneye ulaşmak için document.formadı.nesneadı şeklinde bir erişim söz konusudur.

  • Metin Kutularını İşleme

Metin kutularında en önemli özellik value’dir. Bu özellikle metin kutusunun değerleri alınır ya da değiştirilir. Burada fonksiyon çağırırken en fazla kullandığımız olaylar ise onkeypress ve onchange‘dir. Onkeypress olayı metin kutusu içinde herhangi bir tuşa basıldığında, onchange olayı ise metin kutusundaki değer her değiştiğinde meydana gelir. 

<html>
<head>
<script type="text/javascript">
function sondeger (txt)
{
alert("Metin kutusundaki son değer" + txt);
}
</script>
</head>
<body>
<form name="form1">
Adi <input type="text" name="adi" value="" 
onchange="sondeger(this.value)">
Soyadi <input type="text" name="soyadi" value="" 
onkeypress="sondeger(this.value)">
</form>
</body>
</html>

Burada adi metin kutusundan çıktığımız anda son değeri mesaj ile bize verir. Fakat soyadi değişkenimizde olan her değişiklik bir mesaj kutus ile gösterilir.

Bu olaylar dışında onfocus ve onblur olayları vardır. Onfocus metin kutusu aktif olduğunda, onblur ise metin kutusundan çıkıldığında meydana gelir.

<html>
<head>
</head>
<body>
<form name="form1">
Adi <input type="text" name="adi" value=""
 onfocus="alert('Metin Kutusu Aktif');">
Soyadi <input type="text" name="soyadi" value=""
 onblur="alert('Metin Kutusu Pasif');">
</form>
</body>
</html>

Burada da metin kutusu içerisine yazı yazarken “metin kutusu aktif”, metin kutusu dışarıdayken ise “metin kutusu pasif” mesajı yazdırılır.

Şimdilik bu kadar. 2. yazıda butonların nasıl işlenildiğine değineceğim.

Esenlikler dilerim :)

Related posts
Categories: Javascript Tags: , , ,