2,440 okumalar

HTML ve JavaScript Kullanarak Basit Bir Hesap Makinesi Oluşturmanın En İyi Yolu

ile Shuseel Baral5m2023/08/01

Çok uzun; Okumak

Tamsayı tamsayılar üzerinde basit aritmetik işlemleri yapabilen, HTML ve JavaScript kullanarak basit bir hesap makinesi yapma adımları aşağıda verilmiştir.

featured image - HTML ve JavaScript Kullanarak Basit Bir Hesap Makinesi Oluşturmanın En İyi Yolu

HTML ve JavaScript kullanarak basit bir hesap makinesi oluşturmak, yeni başlayan web geliştiricileri için eğlenceli ve eğitici bir iş olabilir.

Kullanıcı arayüzü tasarımı için HTML'nin ve hesaplama yönetimi için JavaScript'in yeteneklerini birleştirerek, doğrudan tarayıcınızda etkileşimli ve işlevsel bir hesap makinesi oluşturabilirsiniz.

Bu yazıda, sıfırdan temel bir hesap makinesi oluşturmanın adım adım sürecinde size yol gösterecek ve aynı zamanda web programlamanın ilkelerini de keşfedeceğiz.

Başlamak için öncelikle proje ortamını oluşturmalıyız. Hesap makinemizin temelini oluşturacak temel HTML çerçevesini oluşturacağız. Ayrıca hesap makinesini görsel olarak daha çekici hale getirmek için CSS kullanarak görünümünü ayarlayacağız.

Son olarak hesap makinemize işlevsellik eklemek için JavaScript ortamını yapılandıracağız.

İçindekiler

Basit bir hesap makinesi oluşturma adımları HTML ve JavaScript kullanarak
- 1. Kullanıcı Arayüzünün Tasarlanması
- 1. Kullanıcı Girişini Yönetme
- 1. Hesaplamanın Gerçekleştirilmesi
Basit HTML hesaplayıcı için tam HTML kodu
Basit HTML hesaplayıcısının önizlemesi
Çözüm

HTML ve JavaScript Kullanarak Basit Bir Hesap Makinesi Oluşturma Adımları

Tamsayı tamsayılar üzerinde basit aritmetik işlemlerini gerçekleştirebilen, HTML ve JavaScript kullanarak basit bir hesap makinesi yapma adımları aşağıda verilmiştir.

Metin ve düğme girişleri bir form öğesi içindeki bir tabloda kullanılır ve OnClick olayı, düğme değerlerini ekrana yerleştirmek veya sayıları değerlendirmek için kullanılır.

1. Kullanıcı Arayüzünün Tasarlanması

Kullanıcı arayüzü (UI) hesap makinesinin ön yüzüdür. Giriş ve sonuçları görüntülemek için temiz bir ekran oluşturacağız. Tamsayılar ve operatörler için etkileşimli düğmeler de sağlayacağız. Amacımız hesap makinesi kullanıcılarını her açıdan zenginleştiren sezgisel ve kullanıcı dostu bir tasarım üretmektir.

Hesap makinesinin kullanıcı arayüzünü tasarlamak için aşağıdaki adımları kullanın.

Adım 1. Başlangıçta, aşağıda gösterildiği gibi <form> öğesi ve <body> etiketiyle birlikte <html> etiketini oluşturun.

 <html> <head><title>A Simple Calculator Using HTML</title></head> <body> <h3>A Simple Calculator Using HTML</h3> <form Name="calc"> </form> </body> </html>

Adım 2. Şimdi, <table> …..</table> etiketini kullanarak <form>……</form> etiketi içerisinde bir tablo oluşturun ve <tr kullanarak tablo satırının tablo verilerine iki tür Giriş metni ve düğme ekleyin. ><td>….</td></tr> etiketi.

 <table id="calc" border=2> <tr> <td colspan=5><input id="btn" name="display" type="text"></td> <td style="display:none"><input name="M" type="number"></td> </tr> </table>

3. Adım. Daha sonra <input> etiketini kullanarak butonlar oluşturun ve <tr><td>….</td></tr> etiketlerinin bulunduğu tablo satırında bu butonların “id” ve “value” değerlerini de şu şekilde ayarlayın: aşağıda sunulmuştur.

 <tr> <td><input id="btn" type=button value="MC"></td> <td><input id="btn" type=button value="0"></td> <td><input id="btn" type=button value="1"></td> <td><input id="btn" type=button value="2"></td> <td><input id="btn" type=button value="+"></td> </tr> <tr> <td><input id="btn" type=button value="MS"></td> <td><input id="btn" type=button value="3"></td> <td><input id="btn" type=button value="4"></td> <td><input id="btn" type=button value="5"></td> <td><input id="btn" type=button value="-"></td> </tr> <tr> <td><input id="btn" type=button value="MR"></td> <td><input id="btn" type=button value="6"></td> <td><input id="btn" type=button value="7"></td> <td><input id="btn" type=button value="8"></td> <td><input id="btn" type=button value="x"></td> </tr> <tr> <td><input id="btn" type=button value="M+"></td> <td><input id="btn" type=button value="9"></td> <td><input id="btn" type=button value="±"></td> <td><input id="btn" type=button value="="></td> <td><input id="btn" type=button value="/"></td> </tr> <tr> <td><input id="btn" type=button value="1/x"></td> <td><input id="btn" type=button value="."></td> <td><input id="btn" type=button value="x2"></td> <td><input id="btn" type=button value="√"></td> <td><input id="btn" type=button value="C"></td> </tr>

Adım 4. Son olarak aşağıdaki CSS kodunu <style>…..</style> etiketli hesap makinesinin tasarımını verecek şekilde ekleyin.

 <style> #calc{width:300px;height:250px;} #btn{width:100%;height:40px;font-size:20px;} </style>

2. Kullanıcı Girişini Yönetme

Hesap makinesinin kullanıcı arayüzünü tasarlamak için aşağıdaki adımları kullanın.

#Aşama 1. Hesaplamanın girişini ve sonucunu görüntülemek için oluşturulan bir görüntüleme düğmesine aşağıda gösterildiği gibi bir “onkeypress” olayı atayın.

 <tr> <td colspan=5><input id="btn" name="display" onkeypress="return event.charCode >= 48 && event.charCode <= 57" type="text"></td> <td style="display:none"><input name="M" type="number"></td> </tr>

Adım 2. Sayıların ve aritmetik operatörlerin bulunduğu tüm butonlara aşağıda verildiği gibi bir OnClick olayı atayın.

 <tr> <td><input id="btn" type=button value="MC" OnClick="calc.M.value=''"></td> <td><input id="btn" type=button value="0" OnClick="calc.display.value+='0'"></td> <td><input id="btn" type=button value="1" OnClick="calc.display.value+='1'"></td> <td><input id="btn" type=button value="2" OnClick="calc.display.value+='2'"></td> <td><input id="btn" type=button value="+" OnClick="calc.display.value+='+'"></td> </tr> <tr> <td><input id="btn" type=button value="MS" OnClick="calc.M.value=calc.display.value"></td> <td><input id="btn" type=button value="3" OnClick="calc.display.value+='3'"></td> <td><input id="btn" type=button value="4" OnClick="calc.display.value+='4'"></td> <td><input id="btn" type=button value="5" OnClick="calc.display.value+='5'"></td> <td><input id="btn" type=button value="-" OnClick="calc.display.value+='-'"></td> </tr> <tr> <td><input id="btn" type=button value="MR" OnClick="calc.display.value=calc.M.value"></td> <td><input id="btn" type=button value="6" OnClick="calc.display.value+='6'"></td> <td><input id="btn" type=button value="7" OnClick="calc.display.value+='7'"></td> <td><input id="btn" type=button value="8" OnClick="calc.display.value+='8'"></td> <td><input id="btn" type=button value="x" OnClick="calc.display.value+='*'"></td> </tr>

3. Hesaplamanın Yapılması

Tüm aritmetik operatörler için bir OnClick olayı atayın, Clear(C) düğmesi için boşluk (“”) içeren çift tırnak sağlayın ve OnClick olayındaki sayıları aşağıda verildiği gibi değerlendirmek için eval() işlevini kullanın.

 <tr> <td><input id="btn" type=button value="M+" OnClick="calc.M.value=(Number(calc.M.value))+(Number(calc.display.value))"></td> <td><input id="btn" type=button value="9" OnClick="calc.display.value+='9'"></td> <td><input id="btn" type=button value="±" OnClick="calc.display.value=(calc.display.value==Math.abs(calc.display.value)?-(calc.display.value):Math.abs(calc.display.value))"> </td> <td><input id="btn" type=button value="=" OnClick="calc.display.value=eval(calc.display.value)"></td> <td><input id="btn" type=button value="/" OnClick="calc.display.value+='/'"></td> </tr> <tr> <td><input id="btn" type=button value="1/x" OnClick="calc.display.value=1/calc.display.value"></td> <td><input id="btn" type=button value="." OnClick="calc.display.value+='.'"></td> <td><input id="btn" type=button value="x2" OnClick="calc.display.value=Math.pow(calc.display.value,2)"></td> <td><input id="btn" type=button value="√" OnClick="calc.display.value=Math.sqrt(calc.display.value)"></td> <td><input id="btn" type=button value="C" OnClick="calc.display.value=''"></td> </tr>

Basit bir HTML Hesaplayıcı için Tam HTML Kodu

 <html> <head></head> <body> <h3>Simple Calculator</h3> <br/> <style> #calc{width:300px;height:250px;} #btn{width:100%;height:40px;font-size:20px;} </style> <form Name="calc"> <table id="calc" border=2> <tr> <td colspan=5><input id="btn" name="display" onkeypress="return event.charCode >= 48 && event.charCode <= 57" type="text"></td> <td style="display:none"><input name="M" type="number"></td> </tr> <tr> <td><input id="btn" type=button value="MC" OnClick="calc.M.value=''"></td> <td><input id="btn" type=button value="0" OnClick="calc.display.value+='0'"></td> <td><input id="btn" type=button value="1" OnClick="calc.display.value+='1'"></td> <td><input id="btn" type=button value="2" OnClick="calc.display.value+='2'"></td> <td><input id="btn" type=button value="+" OnClick="calc.display.value+='+'"></td> </tr> <tr> <td><input id="btn" type=button value="MS" OnClick="calc.M.value=calc.display.value"></td> <td><input id="btn" type=button value="3" OnClick="calc.display.value+='3'"></td> <td><input id="btn" type=button value="4" OnClick="calc.display.value+='4'"></td> <td><input id="btn" type=button value="5" OnClick="calc.display.value+='5'"></td> <td><input id="btn" type=button value="-" OnClick="calc.display.value+='-'"></td> </tr> <tr> <td><input id="btn" type=button value="MR" OnClick="calc.display.value=calc.M.value"></td> <td><input id="btn" type=button value="6" OnClick="calc.display.value+='6'"></td> <td><input id="btn" type=button value="7" OnClick="calc.display.value+='7'"></td> <td><input id="btn" type=button value="8" OnClick="calc.display.value+='8'"></td> <td><input id="btn" type=button value="x" OnClick="calc.display.value+='*'"></td> </tr> <tr> <td><input id="btn" type=button value="M+" OnClick="calc.M.value=(Number(calc.M.value))+(Number(calc.display.value))"></td> <td><input id="btn" type=button value="9" OnClick="calc.display.value+='9'"></td> <td><input id="btn" type=button value="±" OnClick="calc.display.value=(calc.display.value==Math.abs(calc.display.value)?-(calc.display.value):Math.abs(calc.display.value))"> </td> <td><input id="btn" type=button value="=" OnClick="calc.display.value=eval(calc.display.value)"></td> <td><input id="btn" type=button value="/" OnClick="calc.display.value+='/'"></td> </tr> <tr> <td><input id="btn" type=button value="1/x" OnClick="calc.display.value=1/calc.display.value"></td> <td><input id="btn" type=button value="." OnClick="calc.display.value+='.'"></td> <td><input id="btn" type=button value="x2" OnClick="calc.display.value=Math.pow(calc.display.value,2)"></td> <td><input id="btn" type=button value="√" OnClick="calc.display.value=Math.sqrt(calc.display.value)"></td> <td><input id="btn" type=button value="C" OnClick="calc.display.value=''"></td> </tr> </table> </form> </body> </html>