Text kutusuna uzun,kısa kenarı ve yüksekliği girilen yamuğun alanını hesaplayıp ekrana uyarı olarak veren program:
Nesneye olay atayarak javascript ile yamuk alanını hesaplama;
document.getElementById ile nesne oluşturulduktan sonra oluşturulan nesnenin onclick niteliğine fonksiyon tanımlaması yaparak kullanma
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 |
<input type="text" id="kenar1" placeholder="Üst Kenar Uzunluğunu Girin"> <input type="text" id="kenar2" placeholder="Alt Kenar Uzunluğunu Girin"> <input type="text" id="yukseklik" placeholder="Yüksekliği Girin"> <input type="button" value="Hesapla" id="hesapla"> <script> function hesapla(){ //text kutusu içindeki değerleri okuyup sayi1,sayi2 değişkenine aktarıyoruz. var sayi1=document.getElementById("kenar1").value; var sayi2=document.getElementById("kenar2").value; var sayi3=document.getElementById("yukseklik").value; //text kutusuna girilen değerler metinsel türdedir. Hesaplama yapabilmek için sayıya çeviriyoruz. sayi1=Number(sayi1); sayi2=Number(sayi2); sayi3=Number(sayi3); // formül: (ustkenar+altkenar)*yukseklik/2 var alan=(sayi1+sayi2)*sayi3/2; alert("Yamuk alanı:"+alan); } //hesaplama yapması için hesap butonunu seçiyoruz. var hesapBtn=document.getElementById("hesapla"); //fonksiyonu olaya bağlıyoruz. hesapBtn.onclick=hesapla; </script> |
[divider]
HTML etiketinin onclick özelliğine fonksiyon tanımlayarak javascript ile yamuk alanını hesaplama;
Etiketin onclick niteliğine fonksiyon yazılarak kullanma
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 |
<input type="text" id="kenar1" placeholder="Üst Kenar Uzunluğunu Girin"> <input type="text" id="kenar2" placeholder="Alt Kenar Uzunluğunu Girin"> <input type="text" id="yukseklik" placeholder="Yüksekliği Girin"> <input type="button" value="Hesapla" id="hesapla" onclick="hesapla()"> <script> function hesapla(){ //text kutusu içindeki değerleri okuyup sayi1,sayi2 değişkenine aktarıyoruz. var sayi1=document.getElementById("kenar1").value; var sayi2=document.getElementById("kenar2").value; var sayi3=document.getElementById("yukseklik").value; //text kutusuna girilen değerler metinsel türdedir. Hesaplama yapabilmek için sayıya çeviriyoruz. sayi1=Number(sayi1); sayi2=Number(sayi2); sayi3=Number(sayi3); // formül: (ustkenar+altkenar)*yukseklik/2 var alan=(sayi1+sayi2)*sayi3/2; alert("Yamuk alanı:"+alan); } </script> |
[divider]
AddEventListener kullanarak javascript ile yamuk alanını hesaplama;
Nesne document.getElementById ile oluşturulduktan sonra nesnenin addEventListener işlevi ile tanımlayarak kullanma
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 |
<input type="text" id="kenar1" placeholder="Üst Kenar Uzunluğunu Girin"> <input type="text" id="kenar2" placeholder="Alt Kenar Uzunluğunu Girin"> <input type="text" id="yukseklik" placeholder="Yüksekliği Girin"> <input type="button" value="Hesapla" id="hesapla"> <script> function hesapla(){ //text kutusu içindeki değerleri okuyup sayi1,sayi2 değişkenine aktarıyoruz. var sayi1=document.getElementById("kenar1").value; var sayi2=document.getElementById("kenar2").value; var sayi3=document.getElementById("yukseklik").value; //text kutusuna girilen değerler metinsel türdedir. Hesaplama yapabilmek için sayıya çeviriyoruz. sayi1=Number(sayi1); sayi2=Number(sayi2); sayi3=Number(sayi3); // formül: (ustkenar+altkenar)*yukseklik/2 var alan=(sayi1+sayi2)*sayi3/2; alert("Yamuk alanı:"+alan); } //hesaplama yapması için hesap butonunu seçiyoruz. var hesapBtn=document.getElementById("hesapla"); //fonksiyonu olaya bağlıyoruz. hesapBtn.addEventListener("click",hesapla,false); </script> |
[divider]
window.prompt kullanarak javascript ile yamuk alanını hesaplama;
prompt ve alert metodları ile çalıştırma örneği
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> var ken1=Number(window.prompt('Üst Kenar Uzunluğunu Girin')); var ken2=Number(window.prompt('Alt Kenar Uzunluğunu Girin')); var ken3=Number(window.prompt('Yüksekliği Girin')); //alan hesaplama var alan=(ken1+ken2)*ken3/2; window.alert("Alan:"+alan); </script> |