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.    da yayınlandı Burada

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Get free Tech Tutorials Now!

Read My Stories

Bu ses hikayenin orijinal dilinde üretilmiştir!

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

About Author

YORUMLAR

ETİKETLERİ ASIN

BU YAZI

Related Stories

Başarılı Buluta Geçiş İçin Tam Kılavuz: Stratejiler ve En İyi Uygulamalar

Bu 18 Geliştirici Aracıyla Üretkenliğinizi Artırın 🚀🔥

AI/ML Datalake için Referans Mimarisi Oluşturmaya Yönelik Mimar Kılavuzu

Floki'den Valhalla Hindistan'ın Sri Lanka Turuna Yardımcı Sponsor Olarak Katıldı

Başarılı Buluta Geçiş İçin Tam Kılavuz: Stratejiler ve En İyi Uygulamalar

Bu 18 Geliştirici Aracıyla Üretkenliğinizi Artırın 🚀🔥

AI/ML Datalake için Referans Mimarisi Oluşturmaya Yönelik Mimar Kılavuzu

Floki'den Valhalla Hindistan'ın Sri Lanka Turuna Yardımcı Sponsor Olarak Katıldı

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps