JavaScript Örnekleri PDF 1

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="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

{
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");
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;
PROGRAM KODU
<!doctype html>
<html>
<head>
</head>
<style>
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="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

{
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 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>
</head>
<style>
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="button" id="hesapla" value="Hesapla" onclick="topla()" >
<div id="sonuc"> </div>
<script>
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");
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>
<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">
</div>
<div id="sonuc">0</div>
<script>
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>
<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="ŞİFRE KONTROL">
</td>
</tr>
</table>
<div id="sonuc"></div>
<script>
var t1=document.getElementById("t1");
var t2=document.getElementById("t2");
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>
<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/

JavaScript Örnekleri PDF 1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

JavaScript Örnekleri PDF 1

Uploaded by

Copyright:

Available Formats

5 JavaScript örneği ve bu örneklerin

//basılan tuşların sayı olup olmadığını kontrol edecek javascript fonksiyonu

//basılan tuşların sayı olup olmadığını kontrol edecek javascript fonksiyonu

<input type="button" id="hesapla" value="Hesapla" onclick="topla()" >

Topla fonksiyonu içinde çalışan kod;

You might also like