سورس کد و آموزش ساخت ماشین حساب ساده با js


? سلام دوستان بنده محمدمهدی نویدی هستم امروز با شما هستم تا یک ماشین حساب با js , html بزنیم ?

? هدف اصلی یادگیری ساخت ماشین حساب با java script هست

? ما در این آموزش از css استفاده نمیکنیم و شما میتوانید به عنوان تمرین به ماشین حساب استایل بدید

خب در ابتدا کد های html رو مینویسیم

<html>

<head>

<body>

<p id="result"></p><br>

num 1 : <input type="number" id="num1"><br><br>

num 2 : <input type="number" id="num2"><br><br>

<input type="button" value="+" ="math();">

</body>

</html>


خب اینجا ما دوتا اینپوت با نام های num1 و num2 ایجار کردیم تا کاربر بتونه دو مقدار خودش رو وارد کنه


بعد 1عدد input دوباره زدیم با تایپ button که کاربر بر روی اون کلیک کنه میتونه جمع کنه


میریم سراغ کد جاوا اسکریپت


دوستان اگه به input + دقت کرده باشید میدونید که ما یک زدیم روی اون و کاربر وقتی روی اون کلیک کنه تابع math() رو صدا میزنه


function math(){

var num1 = document.getElementById('num1').value;

var num2 = document.getElementById('num2').value;

// دوستان ما در کد های بالا با گرفتن مقادیر از فرم انهارا داخل متغیر ها ذخیره کردیم



var num1 = parsefloat(num1);

var num2 = parsefloat(num2);

// دوستان اگه دو کد بالا رو نزاریم جاوا اسکریپت با انها همانند string عمل میکنه

// ما اگر از تابع parsint استفاده بکنیم او رو ساده میکنه مثلا اگه کاربر 1.3 رو وارد کنیم اون رو به 1 ساده میکنه عدد اعشاری رو حساب نمیکنه

// اما اگر کلا از تابع parseFloat کاملا سالم کار میکنه و دیگ مشکلی ایجاد نمیکنه


var result = num1 + num2;

// خب در کد بالا ما مقدار های num1 و num2 رو که به int تبدیل کردیم رو با هم جمع می کنیم


if(! num2 == "" || ! num1 == "" ){

اگر هردو فیلد پر شده باشه خروجی نمایش داده میشه

document.getElementById('result')=result;

}else{

// کد بالا یه شرط هستش که چک میکنه مقادیر mmn1.2 خالی نباشند و اگر باشید کد زیر اجرا میشه

var error = "تمامی فیلد ها را وارد کنید";

document.getElementById('result')=error;

}


}



اگر کد هارو خوب درک کرده باشید به راحتی میتونید ضرب و تقسیم و... رو اضافه کنید


? نوشته شده توسط : محمدمهدی نویدی

❤ کامنت و لایک یادتون نره ❤

? موفق باشید.