Jan 01, 1970
2,075 okumalar
HTML ve JavaScript Kullanarak Basit Bir Hesap Makinesi Oluşturmanın En İyi Yolu
Ç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.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
- Kullanıcı Arayüzünün Tasarlanması
- Kullanıcı Girişini Yönetme
- 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>Basit HTML Hesaplayıcı Önizlemesi
HTML hesaplayıcısını InfoTechSite'da yayınlanan orijinal makaleden görebilir ve kullanabilirsiniz.
HTML hesaplayıcısını görüntülemek için burayı tıklayın.
Burada da yayınlandı
L O A D I N G
. . . comments & more!
. . . comments & more!
About Author
ETİKETLERİ ASIN
Languages
BU YAZI...
İLGİLİ ÖYKÜLER
I bought Forbse.com #growth-hacking
Jan 01, 1970
