Text kutusu içine girilen yazıyı Div içine aktarma,Text kutusuna girilen yazıyı select nesnesine option olarak ekleme;Text kutusu boşsa formu göndermeyi iptal etme;JavaScript ile img ekiketindeki resimleri değiştirme……
JavaScript ile Text kutusu içine girilen yazıyı div içine aktarma
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>TEXT KUTUSUNA GİRİLEN YAZIYI DİV İÇİNE YAZDIRMA</title> </head> <style> </style> <body> <input type="text" id="yazi" value=""> <div id="goster"></div> <script> var yazi=document.getElementById("yazi"); var goster=document.getElementById("goster"); yazi.onkeyup=function(){ goster.innerHTML=yazi.value; } </script> </body> </html> |
JavaScript ile Text kutusu boşsa formu göndermeyi iptal etme;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Form boşsa gönderme</title> </head> <style> </style> <body> <form action="kaydet.html" method="post"> <input type="text" id="yazi" value=""> <input type="submit" id="gonder" value="formu kaydet"> </form> <script> var yazi=document.getElementById("yazi"); var gonder=document.getElementById("gonder"); gonder.onclick=function(e){ if(yazi.value=='') { e.preventDefault();//varsayılan işlemi önlemek. buradaki işlem submit nesnesinin çalışması onu engellemiş olduk //return false; //bu tanımlama da doğrudur. } } </script> </body> </html> |
JavaScript ile Text kutusuna girilen yazıyı select nesnesine option olarak ekleme;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>select nesnesine option ekleme</title> </head> <style> </style> <body> <form action="#" method="post"> <input type="text" id="yazi" value=""> <input type="button" id="kaydet" value="TAKIM EKLE"> </form> <select id="takim"> </select> <script> var yazi=document.getElementById("yazi"); var kaydet=document.getElementById("kaydet"); var takim=document.getElementById("takim"); kaydet.onclick=function(e){ var yeniOpt=document.createElement("option"); yeniOpt.value=yazi.value; yeniOpt.innerHTML=yazi.value; takim.add(yeniOpt);//select nesnesine yeni bir öge eklenmiştir. } </script> </body> </html> |
JavaScript ile img ekiketindeki resimleri değiştirme;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>range nesnesi ile resimleri değiştirme</title> </head> <style> </style> <body> <form action="#" method="post"> <input type="range" id="resim-no" max="4" min="0"> </form> <img src="" id="resim" width="300"> <script> /* range nesnesindeki toplam adım 5 tir. 0,1,2,3,4,5 bu adımlar dizideki 00,01,02,03,04,05 resimleri ile eşlerek range nesnesi kaçta ise resimler dizisindeki resim yollarını src içine aktarılacaktır. Unutmayın:resim klasörü içinde dizi içindeki resim dosyaları olmak zorundadır. */ var resimler=["resim/r00.jpg","resim/r01.jpg","resim/r02.jpg","resim/r03.jpg","resim/r04.jpg"]; var resimNo=document.getElementById("resim-no"); var resim=document.getElementById("resim"); resimNo.onchange=function(e){ resim.src=resimler[resimNo.value]; } </script> </body> </html> |
Butona Tıklayınca Sayıyı Arttırma / Azaltma
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!doctype html> <html> <head> <meta charset="utf-8"> <style> input[type="button"]{ width: 200px; height: 200px; border:none; font-size:3em; background: #FF6766; color:#E7E7E7; } </style> <title>YAZILIM BİLİŞİM</title> </head> <body> <input type=button onclick="arttir()" value="+"> <input type=button onclick="azalt()" value="-"> <input type=button id="sonuc" value="0"> <script> function arttir(){ var sonuc=document.getElementById("sonuc"); sonuc.value=Number(sonuc.value)+1; } function azalt(){ var sonuc=document.getElementById("sonuc"); sonuc.value=Number(sonuc.value)-1; } </script> </body> </html> |
Textarea Nesnesine Girilen Karakter Sayısını Bulma
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>JS01</title> </head> <style> textarea{ width: 300px; height: 300px; } </style> <body> <textarea id="yazi"></textarea> <br> Kalan Karakter:<input type="button" id="sayac" value="140"> <script> var yazi=document.getElementById("yazi"); var sayac=document.getElementById("sayac"); yazi.onkeypress=function(){ if(yazi.value.length>=160) return false; } yazi.onkeyup=function(e){ sayac.value=(160-yazi.value.length); } </script> </body> </html> |
Select Nesnesindeki Seçili Olan Alanların Toplamını Hesaplama
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>:) JavaScript Örnekleri</title> </head> <style> select{ width:200px; height: 300px; } option{ height: 27px; background: #E7E7E7; border:solid 1px #25373D; } option:checked, option:hover{ color:#E7E7E7; background:#282830; } #sonuc{ position: absolute; left:250px; top:0px; width: 300px; height: 300px; line-height: 300px; font-size: 3em; background: #FEC606; color:#60646D; text-align: center; } </style> <body> <select id="sayilar" multiple> <option value="10">10</option> <option value="20">20</option> <option value="30">30</option> <option value="40">40</option> <option value="50">50</option> <option value="60">60</option> <option value="70">70</option> <option value="80">80</option> <option value="90">90</option> <option value="100">100</option> </select> <div id="sonuc">0</div> <script> var sonuc=document.getElementById("sonuc"); var sayilar=document.getElementById("sayilar"); sayilar.onclick=function(){ var toplam=0; /* tüm option nesnenleri üzerinde dönüş yapıyoruz.*/ for (var i=0, uzunluk=this.options.length; i<uzunluk; i++) { opt = this.options[i]; /*seçili olan option nesnelerini öğreniyoruz.*/ if ( opt.selected ) { /*seçili olan option nesneleri üzerinde toplama işlemi yapıyoruz.*/ toplam+=Number(opt.value); } } sonuc.innerHTML=toplam; } </script> </body> </html> |
başka işiniz yok mu
web site yapımı facebook gibi görünümü olacak lütfen yardim proje ödevim
başka arzunuz var mı otur araştır
[…] 7.1 Form İşlemleri […]
[…] JavaScript Dersleri 14: Form İşlemleri […]
[…] Diğer JavaScript Form Örnekleri […]