Bu örneğimizde 2 adet text girişinden kullanıcı tarafından girilen sayıları alan ve basılan butona göre toplama, çıkarma,çarpma ya da bölme işlemini gerçekleştireceğiz. Sayfamızda form içinde 2 adet text ve 4 adet button oluşturacağız. Her bir button için gerekli javascript kodlarını oluşturacağız. Örneğimizi 2 farklı yöntemle gerçekleştireceğiz.
1.Yöntem:
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 | <!DOCTYPE html> <html> <head> <title>www.yazilimkodlama.com</title> <meta charset="utf-8"> </head> <body> <h1>JavaScript Dört İşlem</h1> <form name="toplam"> <label>1. Sayı : </label> <input type="text" id="sayi1"><br><br> <label>2. Sayı : </label> <input type="text" id="sayi2"><br><br> <input type="button" id="btnTopla" value="TOPLA"> <input type="button" id="btnCikar" value="ÇIKAR"> <input type="button" id="btnCarp" value="ÇARP"> <input type="button" id="btnBol" value="BÖL"> </form> <br> <div id="kutuSonuc"></div> <script> //Toplama var btn_Topla=document.getElementById("btnTopla"); btn_Topla.onclick=function(){ var s1=Number(document.getElementById("sayi1").value); var s2=Number(document.getElementById("sayi2").value); var sonuc=s1+s2; document.getElementById("kutuSonuc").innerHTML="Sonuç : "+sonuc; } //Çıkarma var btn_Cikar=document.getElementById("btnCikar"); btn_Cikar.onclick=function(){ var s1=Number(document.getElementById("sayi1").value); var s2=Number(document.getElementById("sayi2").value); var sonuc=s1-s2; document.getElementById("kutuSonuc").innerHTML="Sonuç : "+sonuc; } //Çarpma var btn_Carp=document.getElementById("btnCarp"); btn_Carp.onclick(){ var s1=Number(document.getElementById("sayi1").value); var s2=Number(document.getElementById("sayi2").value); var sonuc=s1*s2; document.getElementById("kutuSonuc").innerHTML="Sonuç : "+sonuc; } //Bölme var btn_Bol=document.getElementById("btnBol"); btn_Carp.onclick(){ var s1=Number(document.getElementById("sayi1").value); var s2=Number(document.getElementById("sayi2").value); var sonuc=s1/s2; document.getElementById("kutuSonuc").innerHTML="Sonuç : "+sonuc; } </script> </body> </html> |
2.Yöntem:
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 | <!DOCTYPE html> <html> <head> <title>www.yazilimkodlama.com</title> <meta charset="utf-8"> </head> <body> <h1>JavaScript Dört İşlem</h1> <form name="toplam"> <label>1. Sayı : </label> <input type="text" id="sayi1"><br><br> <label>2. Sayı : </label> <input type="text" id="sayi2"><br><br> <input type="button" id="btnTopla" value="TOPLA" onclick="Toplama()"> <input type="button" id="btnCikar" value="ÇIKAR" onclick="Cikarma()"> <input type="button" id="btnCarp" value="ÇARP" onclick="Carpma()"> <input type="button" id="btnBol" value="BÖL" onclick="Bolme()"> </form> <br> <div id="kutuSonuc"></div> <script> //Toplama function Toplama(){ var s1=Number(document.getElementById("sayi1").value); var s2=Number(document.getElementById("sayi2").value); var sonuc=s1+s2; document.getElementById("kutuSonuc").innerHTML="Sonuç : "+sonuc; } function Cikarma(){ var s1=Number(document.getElementById("sayi1").value); var s2=Number(document.getElementById("sayi2").value); var sonuc=s1-s2; document.getElementById("kutuSonuc").innerHTML="Sonuç : "+sonuc; } function Carpma(){ var s1=Number(document.getElementById("sayi1").value); var s2=Number(document.getElementById("sayi2").value); var sonuc=s1*s2; document.getElementById("kutuSonuc").innerHTML="Sonuç : "+sonuc; } function Bolme(){ var s1=Number(document.getElementById("sayi1").value); var s2=Number(document.getElementById("sayi2").value); var sonuc=s1/s2; document.getElementById("kutuSonuc").innerHTML="Sonuç : "+sonuc; } </script> </body> </html> |
yukarıdaki kodları yazdığımız html sayfasını açtığımızda her iki yöntemdede sonuç değişmeyecektir.
Ekran Çıktısı:
JavaScript’ te Radio Button ile seçim yaparak Dört İşlem Örneği için Tıklayın.
Diğer Örnekler:
- JavaScript Hipotenüs Hesaplama Örneği
- JavaScript Sayısal Loto Örneği
- JavaScript Varmısın Yokmusun Örneği
- JavaScript Dizi İçindeki En Büyük En Küçük Sayıyı Bulma Örneği
- JavaScript Dikdörtgen Alan ve Çevre Hesaplama Örneği
- JavaScript Asal Sayı Kontrol Etme Örneği
- JavaScript Daire Alanı ve Çevresini Hesaplama Örneği
- JavaScript Faktoriyel Hesaplama Örneği
- JavaScript While Döngüsü Örnekleri
- JavaScript Metin İçinde Arama Yapma Örneği
- JavaScript Switch Case Kullanımı Örneği
- JavaScript Rastgele Sayı Üretme Örneği
- JavaScript Girilen Sayının Negatif Pozitif Olduğunu Bulan Örnek
- JavaScript Sayfa Arkaplan Rengini Rastgele Değiştirme Örneği
- JavaScript Dizi Metotları Örnekleri
- JavaScript Km-Mil Çevirme Örneği
- JavaScript Derece-Fahrenayt Çevirme Örneği
- JavaScript Gün İsmini Ekrana Yazdırma Örneği
- JavaScript Sayı Tahmin Oyunu Örneği
- JavaScript Console Log Kullanımı
- JavaScript Kürenin Hacmini Hesaplama Örneği
- JavaScript Üçgenin Alanını Hesaplama Örneği
- JavaScript Çarpım Tablosu Örneği
- JavaScript 3′ e ve 5′ e Tam Bölünebilme Örneği
- JavaScript Karenin Alanı ve Çevresini Hesaplama Örneği
- JavaScript Yazılı Ortalaması Hesaplama Örneği
- JavaScript Try-Catch-Finally Kullanımı Örneği
- JavaScript Div İçeriğini Temizleme Örneği
- JavaScript Switch-Case Kullanımı Örneği
- JavaScript Buttona tıklandığında Kod Çalıştırma Örneği
- JavaScript events(olay) kullanımı Örnekleri
- JavaScript For Döngüsü Karışık Örnekler
- JavaScript Tarih ve Saat Yazdırma Örneği
- JavaScript Fonksiyon Kullanımı Örneği
- JavaScript Vize Final Hesaplama Örneği
- JavaScript onInput Olay Kullanımı Örneği
- JavaScript Kayan Yazı Örneği
- JavaScript Kombinasyon Hesaplama
- JavaScript radio Kullanarak Dört İşlem Örneği
- JavaScript Toplama Çıkarma Çarpma Bölme Örneği
- JavaScript Sayfayı Tam Ekran Yapma Örneği
- JavaScript Fare Konumunu Öğrenme Örneği
- JavaScript Object Kullanımı Örneği
- JavaScript Kalan Karakter Bulma- Karakter Sayma Örneği
- JavaScript Mükemmel Sayı Kontrol Etme Örneği