5 JavaScript örneği ve bu örneklerin çalışan uygulamaları JavaScript Örnekleri PDF www.yazilimbilisim.net..
İçindekiler Tablosu Javascript Text Kutusuna Sadece Sayı Girdirme... 2 PROGRAM KODU... 3 Javascript Text Kutusuna Sadece Sayı Girdirme(Olayın JavaScript Tarafında Yazılmış Hali)... 4 PROGRAM KODU... 5 İki Text Kutusuna Girilen Sayıların Toplamını Div İçinde Gösterme... 6 PROGRAM KODU... 7 Butona tıklandığında, tıklanan butondaki sayıları toplayan program... 8 PROGRAM KODU... 9 İki text kutusuna girilen şifreyi kontrol eden javascript örneği;... 10 PROGRAM KODU... 10 Text kutusuna girilen sayılara göre ekrandaki div nesnesini hareket ettirme;... 11 ÖRNEKLERİN UYGULAMA DOSYALARI... 12
Javascript Text Kutusuna Sadece Sayı Girdirme Aşağıdaki kodları verilmiş olan uygulamada text kutularına girilen değerlerin sadece sayı olmasına izin vermektedir. HTML kodu içindeki return dönüş ifadesi sayikontrol fonksiyonundan dönen değeri kontrol edecektir. event tuş basılması ile ilgili olayı takip eden özel bir anahtar ifadedir. <input type="text" id="sayi1" onkeypress="return sayikontrol(event)"> sayikontrol metodu event ile gönderilen değeri fonksiyonu içinde olay adı ile karşılamaktadır. Gerçekleşen olay içinde charcode özelliği basılan tuşun ASCII kodunu döndürmektedir. 0-9 arasındaki rakamların ASCII kodları 48-57 arasındadır. sayikontrol metodu içinde de basılan karakter 47den büyük ve 58den küçük mü kontrolü yapılarak 0-9 arasında rakama basıp basmadığı tespit edilir. Basılan tuşun kodu bu aralıktaysa return true değerini döndürecek ve tuşu text kutusuna yazacaktır. Basılan tuş aralıkta değilse return false ifadesini döndürecek ve tuş text kutusuna yazılmayacaktır. function sayikontrol(olay){ if(olay.charcode>=48 && olay.charcode<57) { return true; else { return false;
PROGRAM KODU <!doctype html> <html> <head> <meta charset="utf-8"> </head> <title>yazilimbilisim.net</title> <style> #sayi1,#sayi2,#hesapla{ display: block; width: 300px; height: 30px; line-height: 30px; margin:5px; border:none; box-sizing: border-box; #sayi1,#sayi2{ background: #3498db; padding-left:20px; color:#fff; font-weight: bold; </style> <body> <input type="text" id="sayi1" onkeypress="return sayikontrol(event)"> <input type="text" id="sayi2" onkeypress="return sayikontrol(event)"> <input type="button" id="hesapla" value="hesapla" > <script> //Javascript Text Kutusuna Sadece Sayı Girdirme //basılan tuşların sayı olup olmadığını kontrol edecek javascript fonksiyonu function sayikontrol(olay){ if(olay.charcode>=48 && olay.charcode<57) { return true; else { return false; </script> </body> </html>
Javascript Text Kutusuna Sadece Sayı Girdirme(Olayın JavaScript Tarafında Yazılmış Hali) Aynı örneği html ve JavaScript kodlarının bir birinden tamamen ayrılmış örneği; Örneğin bu şekilde yazılmasındaki amaç HTML kodu ile Programlama kodunun bir birinden ayrışmasını sağlamak. Gelelim kodların nasıl çalıştığına; JavaScript tarafında etiketlere ulaşmak için etiketlerin id isimlerini kullanarak onları aşağıdaki kod ile onları bir değişkende tuttuk(sayi1,sayi2 değişkenleri) var sayi1=document.getelementbyid("sayi1"); var sayi2=document.getelementbyid("sayi2"); ilk örnekte onkeypress olaynı html içinde yazmıştık ve olaya bir fonksiyon tanımlamıştık. JavaScript tarafında ise olaylara fonksiyonları adını özellik olarak ekliyoruz. Fonksiyon tetiklendiğinde sayikontrol olayını çalıştıracak.( sayikontrol metodunun çalışması yukarıdaki örnekle aynı) sayi1.onkeypress=sayikontrol; sayi2.onkeypress=sayikontrol;
PROGRAM KODU <!doctype html> <html> <head> <meta charset="utf-8"> </head> <title>yazilimbilisim.net</title> <style> #sayi1,#sayi2,#hesapla{ display: block; width: 300px; height: 30px; line-height: 30px; box-sizing: border-box; margin:5px; border:none; #sayi1,#sayi2{ background: #3498db; padding-left:20px; color:#fff; font-weight: bold; </style> <body> <input type="text" id="sayi1" > <input type="text" id="sayi2" > <input type="button" id="hesapla" value="hesapla" > <script> //Javascript Text Kutusuna Sadece Sayı Girdirme var sayi1=document.getelementbyid("sayi1"); var sayi2=document.getelementbyid("sayi2"); sayi1.onkeypress=sayikontrol; sayi2.onkeypress=sayikontrol; //basılan tuşların sayı olup olmadığını kontrol edecek javascript fonksiyonu function sayikontrol(olay){ if(olay.charcode>=48 && olay.charcode<57) { return true; else { return false; </script> </body> </html>
İki Text Kutusuna Girilen Sayıların Toplamını Div İçinde Gösterme JavaScript tarafına nesneleri id isimleri ile almak için alağıdaki kodları yazdık. var sayi1=document.getelementbyid("sayi1"); var sayi2=document.getelementbyid("sayi2"); var sonuc=document.getelementbyid("sonuc"); button nesnesine tıkladığımızda topla adında fonksiyonun çalışması için gerekli kod; <input type="button" id="hesapla" value="hesapla" onclick="topla()" > Topla fonksiyonu içinde çalışan kod; innerhtml açılıp kapatılan etiketlerin içini doldurmak için kullanılır. Sonuc divinin içine işlem sonucunu yazmak için innerhtml özelliğini kullandık. İnput etiketlerinin içindeki değerleri okumak içinse value değerleri kullanılmaktadır. Sayi1.value dediğimizde sayi1 içine yazılanlar anlamına gelmektedir. Burada Numberın kullanılmasının sebebi ise input nesnelerindeki tüm string türünde olmasıdır. String turunde toplama olmayacağı için Number türüne çevirip toplam yaptık. sonuc.innerhtml=number(sayi1.value)+number(sayi2.value);
PROGRAM KODU <!doctype html> <html> <head> <meta charset="utf-8"> </head> <title>yazilimbilisim.net</title> <style> #sayi1,#sayi2,#hesapla{ display: block; width: 300px; height: 30px; line-height: 30px; box-sizing: border-box; margin:5px; border:none; #sayi1,#sayi2{ background: #3498db; padding-left:20px; color:#fff; font-weight: bold; #sonuc{ width: 300px; height: 30px; line-height: 30px; font-size: 2em; </style> <body> <input type="text" id="sayi1" > <input type="text" id="sayi2" > <input type="button" id="hesapla" value="hesapla" onclick="topla()" > <div id="sonuc"> </div> <script> var sayi1=document.getelementbyid("sayi1"); var sayi2=document.getelementbyid("sayi2"); var sonuc=document.getelementbyid("sonuc"); function topla(){ sonuc.innerhtml=number(sayi1.value)+number(sayi2.value); </script> </body> </html>
Butona tıklandığında, tıklanan butondaki sayıları toplayan program Nesneleri id isimleri ile javascript tarafında elde etmek için aşağıdaki kodlar yazdık. var b1=document.getelementbyid("t1"); var b2=document.getelementbyid("t5"); var b3=document.getelementbyid("t10"); var b4=document.getelementbyid("t50"); var sonuc=document.getelementbyid("sonuc"); her butonun click olayını topla fonksiyonunu ekledik. Buton nesnelerine tıkladığında topla fonksiyonu tetiklenecek ve topla fonksiyonu çalışacaktır. b1.onclick=topla; b2.onclick=topla; b3.onclick=topla; b4.onclick=topla; Aşağıdaki kodda innerhtml div etiketinin içinde değer yazmak için kullanılmaktadır. Basılan butonu tespit etmek için this anahtarı kullanılmıştır. Basılan butonun içindeki değeri okumak için this.value ifade kullanılmıştır. innerhtml ve value olan değerler metinsel ifadelerdir Number ile bu ifadeleri sayısal değere çevirip toplama işlemini gerçekleştirip innerhtml özelliği ile div içine tekrar yazdırdık. sonuc.innerhtml=number(sonuc.innerhtml)+number(this.value);
PROGRAM KODU <!doctype html> <html> <head> <meta charset="utf-8"> <title>js01</title> </head> <style> input[type="button"]{ width:50px; height: 50px; line-height: 50px; #butonlar{ text-align: center; #sonuc{ background: #12123a; color:#efefaa; font-size:2em; padding:10px; margin:10px; text-align: center; </style> <body> <div id="butonlar"> <input type="button" id="t1" value="1"> <input type="button" id="t5" value="5"> <input type="button" id="t10" value="10"> <input type="button" id="t50" value="50"> </div> <div id="sonuc">0</div> <script> var b1=document.getelementbyid("t1"); var b2=document.getelementbyid("t5"); var b3=document.getelementbyid("t10"); var b4=document.getelementbyid("t50"); var sonuc=document.getelementbyid("sonuc"); b1.onclick=topla; b2.onclick=topla; b3.onclick=topla; b4.onclick=topla; function topla(){ sonuc.innerhtml=number(sonuc.innerhtml)+number(this.value); </script> </body> </html>
İki text kutusuna girilen şifreyi kontrol eden javascript örneği; PROGRAM KODU <!doctype html> <html> <head> <meta charset="utf-8"> <title>js01</title> </head> <style> </style> <body> <table> <tr> <td>şifre:</td><td><input type="password" id="t1"></td> </tr> <tr> <td> Şifre Tekrar: </td><td> <input type="password" id="t2"> </td> </tr> <tr> <td colspan="2"> <input type="button" id="kontrol" value="şifre KONTROL"> </td> </tr> </table> <div id="sonuc"></div> <script> var t1=document.getelementbyid("t1"); var t2=document.getelementbyid("t2"); var sonuc=document.getelementbyid("sonuc"); document.getelementbyid("kontrol").onclick=function(){ if(t1.value==t2.value) sonuc.innerhtml="doğru Giriş Yapabilirsiniz"; else sonuc.innerhtml="şifreler HATALI! Tekrar Kontrol edin"; </script> </body> </html>
Text kutusuna girilen sayılara göre ekrandaki div nesnesini hareket ettirme; <!doctype html> <html> <head> <meta charset="utf-8"> <title>js01</title> </head> <style> #kutu{ top:0px; left: 0px; width: 300px; height: 300px; position: absolute; background: #3498db; z-index: -1; </style> <body> <input type="text" id="x" value="0"> <input type="text" id="y" value="0"> <div id="kutu"></div> <script> var x=document.getelementbyid("x"); var y=document.getelementbyid("y"); y.onkeyup=function(){ kutu.style.top=y.value+"px"; kutu.style.left=y.value+"px"; x.onkeyup=function(){ kutu.style.top=y.value+"px"; kutu.style.left=x.value+"px"; </script> </body> </html>
ÖRNEKLERİN UYGULAMA DOSYALARI http://www.yazilimbilisim.net/javascript/javascript-ornekleri-uygulama-dosyasi/