Hesap Makinesi Javascript

hesap makinesi javascript

JavaScript bir yazılım dilidir. JavaScript, istemci taraflı bir kod yazma dilidir. Bunun meali ise, yazdığınız kodların internet tarayacısı içinde çalıştığı anlamına gelir. JacaScript’in çalışma mantığı biraz gariptir. Bir Web sayfasında JavaScript kodları kullanırsanız, tarayıcı sayfayı yüklediğinde, tarayıcının sayfada bulduğu JavaScript kodlarını okuyan ve çalıştıran yerleşik yorumlayıcılar bulunur.

Javascript

Web sayfası tasarlayan insanlar JavaScript’i çok fazla amaçla kullanır. En yaygın olanlardan biri, bir formda alan doğrulaması yapmaktır. Girdiğimiz çoğu web sitesinde formlar görürüz. Bunlar kullanıcılardan bilgi toplanmasını sağlar. JavaScript bu girilen bilgilerin doğrulanmasında yardımcı olabilir. Örnek verecek olursak bir site sizden yaşınızı istediğinde ve siz öylesine bir sayı girmeye çalıştığınızda “örnek olarak” JavaScript burada girilecek yaş aralığını kısıtlayabilir.

Web tasarımcılarının JavaScript ile yapabileceği bir başka şey ise hesap makinesidir. İşte size birkaç hesap makinesi örneği:

RPN calculator
MegaConverter – Hesap makinelerinin yapabileceği işlevlerin tamamı burada.
Personal Finance calculators

İşte size internet sitesi yaparken kullanabileceğiniz Fahrenheit’dan Santigrat’a dönüştürmenizi sağlayan basit bir JavaScript kodu:

<html>

<head>

<!&#; hide this script from old browsers

function temp(form)

{

var f = parseFloat(funduszeue.info, 10);

var c = 0;

c = (f &#; ) * / ;

funduszeue.info = c;

}

// done hiding from old browsers &#;>

</script>

</head>

<body>

<FORM>

<h2>Fahrenheit to Celsius Converter</h2>

Enter a temperature in degrees F:

<p>

Click this button to calculate the temperature

in degrees C:

<INPUT NAME=&#;calc&#; VALUE=&#;Calculate&#; TYPE=BUTTON

onClick=temp(funduszeue.info)>

<p>

Temperature in degrees C is:

</FORM>

</body>

</html>

Eğer daha önce html öğrenmeye çalıştıysanız bu kodlar size tanıdık gelir. Fakat bilmeyenler için açıklama yapmak gerekirse web sitelerinin en temel yapıları aşağıya yazacağım kodlardır. Biz bu kodlar arasında işlem yaparız. En azından HTML’de.

<html>

<head>

</head>

<body>

</body>

</html>

Başlıkta bahsettiğim gibi dönüştürücü olan kodu ise buraya atıyorum:

<head>

<!&#; hide this script from old browsers

function temp(form)

{

var f = parseFloat(funduszeue.info, 10);

var c = 0;

c = (f &#; ) * / ;

funduszeue.info = c;

}

<!&#; done hiding from old browsers &#;>

</script>

</head>

Tabii ki de böyle kodları atıp işin içinden sıyrılmayacağın. Dilimin döndüğünce neyin ne olduğunu açıklayacağım.

Javascript

Buradaki kullandığım temp fonksiyonu, celcius sıcaklığını hesaplamak için gerekli JavaScript kodlarını içerir. Web sitesini açtığımız zaman karşımıza çıkan işlemleri gösteren sayfanın –bir diğer deyişle front-end-kodları ise şöyledir:

<FORM>

<h2>Fahrenheit to Celsius Converter</h2>

Enter a temperature in degrees F:

<p>

Click this button to calculate the temperature

in degrees C:

<INPUT NAME=&#;calc&#; VALUE=&#;Calculate&#; TYPE=BUTTON

onClick=temp(funduszeue.info)>

<p>

Temperature in degrees C is:

</FORM>

Buradaki kilit nokta şu kod:

<INPUT NAME=&#;calc&#; VALUE=&#;Calculate&#; TYPE=BUTTON

onClick=temp(funduszeue.info)>

Bu bir düğme yaratmanızı sağlar. Kullanıcı bu düğmeye bastığında sayfanın başındaki fonksiyonu çağırır.

Programlama dillerinde biraz mesafe kat ettiyseniz JavaScript öğrenmeye çalışmanızda sıkıntı yoktur. JavaScript ortalama zorlukta bir dildir. Eğer zaten programlamadan anlıyorsanız kodları nasıl yazacağınızı öğrenmek çok da zor bir şey değildir. Programlamada yeniyseniz JavaScript başlamak için çok uygun bir değildir. Eğer kendinizi geliştirmek isterseniz ise bu örnek kodu değiştirmek ve başka hesap makineleri yapmak olabilir.

Daha detaylı bilgi için buralara bakabilirsiniz:

Meriç ÇAPAR

Bunlar da ilginizi çekebilir

C Programlama Dili Öğrenmek Size Nasıl Fayda Sağlayacak?

Her Web Geliştiricisinin ’de Sahip Olması Gereken 15 VSCode Uzantısı

Hayatımızdan Çıkmayacak 5 Programlama Dili

Python Nedir, Ne Değildir? Python Nasıl Çalışır?

Yazıda JavaScript basit hesap makinesi yapımı, hesap makinesi kodları ile hesap makinesinin nasıl yapıldığı anlatılmıştır.

JavaScript ile hesap makinesi yapımı için çeşitli yöntemler mevcut.

Biz kolay bir yöntem olan JavaScript eval fonksiyonunu kullanacağız.

Hesap makinesi yapımı için öncelikle görsel bir ara yüz yapılması iyi olacaktır.

Yapacağımız hesap makinesi, basit işlemler için kullanılabilecek, dört işlem yapan bir hesap makinesi olacağından fazla bir buton ihtiyacımız olmayacak ayrıca yazılan rakamların ve sonucun görüneceği ekran görevi gören bir veri giriş alanı olacak.

Yapacağımız hesap makinesinin daha iyi görünmesi için çeşitli stil tanımlamaları yapalım.

Hesap makinesi için görsel ara yüz oluşturduktan sonra JavaScript kodlarını yazabiliriz.

Tüm butonların tıklama (onclick) olayını bir fonksiyona bağlamamız, tüm işlemleri bir fonksiyon üzerinden yapmak iyi olacaktır.

Seçim işlemini document nesnesine ait getElementsByTagName metodu ile yapabiliriz.

Seçim işleminden sonra bir döngü ile tüm butonların tıklama olayına yazacağımız fonksiyonun adını yazıyoruz.

Tüm butonları yazacağımız hesapla isimli fonksiyona bağladık.

Şimdi hesaplama işleminin yapılacağı hesapla isimli fonksiyonu yazabiliriz.

Fonksiyon gördüğünüz gibi son derece basit bir şekilde gelen tıklanan butonun değerini alıyor.

Tıklanan buton değeri, hesaplama işlemi (=) ise eval fonksiyonu ile işlemi yaparak sonucu ekran görevi gören veri giriş alanına yazıyor.

Değer hesaplama işlemi (=) değilse buton değerini veri giriş alanına ekliyor.

Örnek hesap makinesi kodlarını incelemek için tıklayın.

Hesap makinesine daha fazla işlem eklemek istersek bir buton ve hesapla isimli fonksiyon içerisinde eklenen işleme özel hesaplamalar yaptırabilirsiniz.

JavaScript Derslerine buradan ulaşabilirsiniz&#;

Hayırlı günler dilerim.

Şimdiki JavaScript örneğimizde basit bir hesap makinesi yapacağız. Hesap makinesi yapımı örneği ile JavaScript ile fonksiyon kullanımı, JavaScript ile form nesnelerine buton,text erişim konularını pekiştirmiş olacağız. ilk olarak hesapmakinesi isminde bir form açıp aşağıdaki ekran görüntüsünü oluşturuyoruz.
jshesapmakinesi
daha sonra text kutusuna rakamlara basıldıkça sayıların eklenmesi için sayiyaz fonksiyonunu ve islemleri hesaplamak içinde islem fonksiyonunu yazıyoruz Javascript hesap makinesi örneğinin kodları ve çalışan hali aşağıda&#;

<html> <head> <title>funduszeue.info Hesap Makinesi</title> <script language="javascript"> <!-- // ******************************************************************** // funduszeue.info // ************* var rakamekle = false var oncekisonuc = 0 var islem = "=" function temizle() { funduszeue.info = 0 oncekisonuc = 0 rakamekle = false islem = "=" } // funduszeue.info function hesapla(yeniislem) { var yenisayi = eval(funduszeue.info) if (islem == "+") { oncekisonuc = oncekisonuc + yenisayi } else if (islem == "-") { oncekisonuc = oncekisonuc - yenisayi } // funduszeue.info else if (islem == "/") { oncekisonuc = oncekisonuc / yenisayi } else if (islem == "*") { oncekisonuc = oncekisonuc * yenisayi } else if (islem == "=") { oncekisonuc = yenisayi } else { oncekisonuc = yenisayi } funduszeue.info = oncekisonuc rakamekle = false islem = yeniislem } function sayiyaz(rakam) { if (rakamekle) { funduszeue.info += rakam }// funduszeue.info else { funduszeue.info

[wp-js-fiddle url=&#;funduszeue.info&#; style=&#;width%; heightpx; border:solid #A0 1px;&#;]
adresinden uygulamayı test edebilirsiniz.

Bu İçeriğe Tepkin Ne Oldu?

hesaphesap makinesiJavascriptJavascript derslerijavascript dört işlemjavascript hesap makinesiJavascript örneklerimakinesi

Javascript Basit Hesap Makinesi

<!DOCTYPE html>
<html>
<head>
<title>Hesap Makinesi</title>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=">
<style>
input[type=button] {
background-color:aqua;
width: 40px;
}
#Ekran {
text-align: right;
border:2px solid deeppink;
background-color: black;
color: white;
font-sizepx;
}

.TusBuyuk {
width: px !important;
background-color: chocolate !important;
border:1px solid gold !important;
}

td {
text-align: center;
}

table {
margin:auto;
}
</style>
</head>
<body>

<tableborder="0">
<tr>
<tdcolspan="4">
<inputtype="text"value="0"id="Ekran"/>
</td>
</tr>
<tr>
<td><inputtype="button"value="1"id="Tus1"onclick="Yazici(1)"/></td>
<td><inputtype="button"value="2"id="Tus2"onclick="Yazici(2)"/></td>
<td><inputtype="button"value="3"id="Tus3"onclick="Yazici(3)"/></td>
<td><inputtype="button"value="+"id="TusArti"onclick="Islem('+')"/></td>
</tr>
<tr>
<td><inputtype="button"value="4"id="Tus4"onclick="Yazici(4)"/></td>
<td><inputtype="button"value="5"id="Tus5"onclick="Yazici(5)"/></td>
<td><inputtype="button"value="6"id="Tus6"onclick="Yazici(6)"/></td>
<td><inputtype="button"value="-"id="TusEksi"onclick="Islem('-')"/></td>
</tr>
<tr>
<td><inputtype="button"value="7"id="Tus7"onclick="Yazici(7)"/></td>
<td><inputtype="button"value="8"id="Tus8"onclick="Yazici(8)"/></td>
<td><inputtype="button"value="9"id="Tus9"onclick="Yazici(9)"/></td>
<td><inputtype="button"value="x"id="TusCarpi"onclick="Islem('*')"/></td>
</tr>
<tr>
<tdcolspan="2"><inputtype="button"value="C"id="TusSil"class="TusBuyuk"onclick="Islem('C')"/></td>
<tdcolspan="2"><inputtype="button"value="="id="TusEsittir" class="TusBuyuk"onclick="Islem('=')" /></td>
</tr>
</table>

<script>
var Sayi1, Sayi2, MatIslem;
var EkranDegeri = funduszeue.infomentById("Ekran");

function Yazici(GelenDeger) { //alert(GelenDeger);
if (funduszeue.info == 0) {
funduszeue.info = "";
}
funduszeue.info += GelenDeger;
//funduszeue.infomentById("Ekran").value += GelenDeger;
}

function Islem(GelenDeger) {
if (GelenDeger == 'C') {
funduszeue.info = 0;
}
if (GelenDeger == '+') {
Sayi1 = funduszeue.info; //simdiye kadar yazılanları Sayi1 e at
funduszeue.info += '+'; //islemi yaz
MatIslem = '+';
//Islem('C'); //Ekranı sil
}
if (GelenDeger == '-') {
Sayi1 = funduszeue.info; //simdiye kadar yazılanları Sayi1 e at
funduszeue.info += '-'; //islemi yaz
MatIslem = '-';
//Islem('C'); //Ekranı sil
}
if (GelenDeger == '*') {
Sayi1 = funduszeue.info; //simdiye kadar yazılanları Sayi1 e at
funduszeue.info += '*'; //islemi yaz
MatIslem = '*';
//Islem('C'); //Ekranı sil
}
if (GelenDeger == '=') {
Sayi2 = funduszeue.info(MatIslem)[1]; //simdiye kadar yazılanları Sayi1 e at
switch (MatIslem) {
case '+' :
funduszeue.info = parseInt(Sayi1) + parseInt(Sayi2);
break;
case '-' :
funduszeue.info = parseInt(Sayi1) - parseInt(Sayi2);
break;
case '*' :
funduszeue.info = parseInt(Sayi1) * parseInt(Sayi2);
break;
}
}
}
</script>
</body>
</html>

nest...

40572 40573 40574 40575 40576