img
img
img
img
shape
shape
دوشنبه ۱۰ بهمن

برنامه نویسی

دفعات بازدید ۵۵۶

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

۱

آموزش برنامه نویسی پروژه ای
ساخت ماشین حساب جلسه اول
برای یادگیری برنامه نویسی شاید انجام پروژه تستی بهترین راهکار برای آموزش باشد. در نتیجه سعی داریم در ادامه یادگیری برنامه نویسی روی یک پروژه را تمرین کنیم و مطالب بیشتری هم در خلال آموزش یادبگیریم.
در این قسمت میخواهیم یک ماشین حساب بسازیم و کم کم آن را پیشرفته تر کنیم.

مرحله اول ساخت html

در این مرحله برای ماشین حساب دو عدد ورودی از کاربر میگیریم و سپس برای هر کدام از عملیات یک دکمه در نظر میگیریم.

<head>
    <title>ماشین حساب</title>
</head>
<body>
    <lablel for="first"> مقدار اول</label>
    <input type="number" id="first"/>
    <label for="second">مقدار دوم </label>
    <input type="number" id="second">
    <button>جمع</button>
    <button>تفریق</button>
    <button>ضرب</button>
    <button>تقسیم</button>
    <span id="result">نتیجه</span>
</body>
ماشین حساب مقدار اول نتیجه

حالا برای قسمت محاسبات توابع مورد نیاز را می نویسیم.

function add(a,b){
    return a+b
}
function sub(a,b){
    return a-b
}
function multiply(a,b)
{
    return a*b
}
function division(a,b)
{
    return a/b
}

حالا باید این دو قسمت را به هم متصل کنیم. یعنی به هر کدام از کلید هایی در صفحه است باید یک تابع بدهیم.
برای این کار هر کدام از تگ ها یک ویژگی دارند به اسم onClick این ویژگی تعیین می کند که با کلیک کردن روی هر کدام از این دکمه ها چه کاری انجام دهد. تنها کافی است تابع مورد نیاز را برای هر دکمه بنویسیم.

<head>
<title>ماشین حساب</title>
<script>
function add(a,b){
    return a+b
}
function sub(a,b){
    return a-b
}
function multiply(a,b)
{
    return a*b
}
function division(a,b)
{
    return a/b
}
</script>
</head>
<body>
<lablel for="first"> مقدار اول</label>
<input type="number" id="first"/>
<label for="second">مقدار دوم </label>
<input type="number" id="second">
<button onClick="add()">جمع</button>
<button onClick="sub()">تفریق</button>
<button  onClick="multiply()">ضرب</button>
<button onClick="division()">تقسیم</button>
<span id="result">نتیجه</span>
</body>
ماشین حساب مقدار اول نتیجه

حالا باید مقادیر نوشته شده توسط کاربر را بتوانیم به دست بیاوریم تا بتوانیم با آن ها کارکنیم. برای این کار و دسترسی به html از سمت js باید از آبجکتی به اسم document استفاده کرد. این که کلاس چیست را به صورت پرانتز می گوییم.

class

در گذشته برنامه نویسی به صورت structral بوده . یعنی کد ها از بالا به پایین اجرا می شدند اما هیچ نوع متغیری غیر از مواردی که گفته شده بود وجود نداشت. اما پس از مدتی به این نیاز شد که برنامه نویسی مانند جهان پیرامون باشد. در نتیجه مفهومی به نام شی گرایی ایجاد شد. به این منظور که امکان تعریف نوع های جدید نیز وجود داشت. برای این کار مفهوم class و object تعریف شد. کلاس یعنی شما یک مفهومی که در جهان پیرامون وجود دارد را در برنامه نویسی تعریف می کنید. برای مثال یک خودرو را میخواهید در برنامه خود داشته باشید. این مفهوم یعنی خودرو یک کلاس می شود. این کلاس خودرو مانند جهان پیرامون ویژگی های خاصی دارد که نوع خودرو را مشخص می کند. برای مثال هر خودرو مدل - شرکت - تعداد چرخ ها - وزن - تعداد در - رنگ - سرعت حداکثر - تعداد دنده - حجم باک و … وجود دارد . همچنین این خودرو کار های مختلفی می تواند انجام دهد مانند روشن شدن - حرکت کردن به جلو - حرکت به عقب - ترمز کردن.
در نتیجه اینگونه شما می توانید مفهوم خودرو که در جهان خارج است را در زبان برنامه نویسی وارد کنید.

Class car
{
    model='206'
    company='pego'
    wheels=4
    weight=1000
    doors=4
    color='white'
    maxSpeed=220
    gear=5
    gasolineCapacity=60
    
    ignite()
    {
    }
    
    moveForward()
    {
    }
    
    moveBackward()
    {
    }
    
    stop(){
    }
}

object

خوب با مفهوم کلاس آشنا شدیم. حالا باید با مفهوم شی آشنا شویم. هر شی در حقیقت یک نمونه از کلاس است. در مثال بالا ما یک کلاس خودرو داریم. ولی در جهان پیرامون هزاران خودرو وجود دارد ، هر کدام از این خودرو های واقعی یک شی از کلاس خودرو هستند. هر کدام از این اشیا با یکدیگر متفاوت هستند. برای ساخت یک شی از یک کلاس از کلمه کلیدی new استفاده می کنیم مانند زیر.

let myCar =new Car()

حالا یک شی از کلاس خودرو داریم و می توانیم از آن استفاده کنیم.

myCar.model='405'
myCar.maxSpeed=160
myCar.moveForward()
myCar.ignite()

همان طور که در بالا می بینیم برای دسترسی به متغیر ها و توابع اشیا می توانیم از عملگر نقطه استفاده کنیم.اگر بخواهیم مقدارش را تغییر دهیم مساوی میگذاریم و مقدار جدیدش می نویسیم.
خوب این ها را گفتیم که بگوییم چگونه می توانیم به مقدار هایی که کاربر وارد کرده است دسترسی پیدا کنیم. از جاوااسکریپت با شی document و تابع getElementById استفاده می کنیم و آیدی شی مورد نظر را به آن میدهیم.

Var element=document.getElementById('first')

حالا که به المان مورد نظر دسترسی داریم می توانیم مقداری که کاربر در آن وارد کرده را با عبارت value می گیریم .
در نتیجه برای مقدار های اول و دوم ماشین حساب به کد زیر احتیاج داریم.

let firstValue=document.getElementById('first').value
let secondValue=document.getElementById('second').value

حالا در هر تابع محاسباتی مقدار ها را میگیریم و محاسبات را انجام میدهیم.

function add(){
    let firstValue=document.getElementById('first').value
    let secondValue=document.getElementById('second').value
    return firstValue+secondValue
}
function sub(){
    let firstValue=document.getElementById('first').value
    let secondValue=document.getElementById('second').value
    return firstValue-secondValue
}
function multiply()
{
    let firstValue=document.getElementById('first').value
    let secondValue=document.getElementById('second').value
    return firstValue*secondValue
}
function division()
{
    let firstValue=document.getElementById('first').value
    let secondValue=document.getElementById('second').value
    return firstValue/secondValue
}

حال باید بتوانیم نتیجه محاسبه را در صفحه نمایش دهیم برای این کار یک span قرار داده ایم در صفحه . برای اینکه بتوانیم به این المان دسترسی پیدا کنیم و مقدار داخلش را عوض کنیم از مقدار innerHTML استفاده می کنیم مانند زیر.

document.getElementById('result').innerHTML='result'

در نتیجه کد js به صورت زیر به روز می شود.

function add(){
    let firstValue=document.getElementById('first').value
    let secondValue=document.getElementById('second').value
    let result firstValue+secondValue
    document.getElementById('result').innerHTML=result
}
function sub(){
    let firstValue=document.getElementById('first').value
    let secondValue=document.getElementById('second').value
    let result= firstValue-secondValue
    document.getElementById('result').innerHTML=result
}
function multiply()
{
    let firstValue=document.getElementById('first').value
    let secondValue=document.getElementById('second').value
    let result= firstValue*secondValue
    document.getElementById('result').innerHTML=result
}
function division()
{
    let firstValue=document.getElementById('first').value
    let secondValue=document.getElementById('second').value
    let result= firstValue/secondValue
    document.getElementById('result').innerHTML=result
}

الان این کد باید کاملا کار کند. ولی نیاز به تمیز تر شدن کد است.
به تمیز کردن کد و رفع اشکالات احتمالی refactor کردن می گویند. این کار باعث تمیز تر شدن کد و راحت تر شدن نگهداری کد در طولانی مدت می شود. همان طور که می بینید تکرار کد بسیار مشهود است. به این معنی که خیلی از موارد تکراری وارد شده است.برای این کار یک فانکشن می نویسیم که کد های تکراری را در آن قرار می دهیم. به این معنی که می توانیم با یک دستور switch کار همه اینها را انجام دهیم. نتیجه می شود مانند زیر.

<!DOCTYPE html>
<html >
<head>
<title>ماشین حساب</title>

</head>
<body>
<label for="first"> مقدار اول</label>
<input type="number" id="first"/>
<label for="second">مقدار دوم </label>
<input type="number" id="second">
<button onClick="calc('+')">جمع</button>
<button onClick="calc('-')">تفریق</button>
<button  onClick="calc('*')">ضرب</button>
<button onClick="calc('/')">تقسیم</button>
<span id="result">نتیجه</span>
<script>
function calc(operand){
    let firstValue=document.getElementById('first').value*1
    let secondValue=document.getElementById('second').value*1
	let result=''
	switch(operand)
	{
		case '+':
		    result =firstValue+secondValue
		break;
		case '-':
		    result =firstValue-secondValue
		break;
		case '*':
		    result =firstValue*secondValue
		break;
		case '/':
		    result =firstValue/secondValue
		break;
		default:
		console.log('invalid operand')
		return 
		break;
	}
    document.getElementById('result').innerHTML=result
}
</script>
</body>
</html>
ماشین حساب نتیجه

چند توضیح لازم است بدهیم. مقادیر اول ودوم را پس از گرفتن در یک ضرب کرده ایم.علت این کار این است که علامت + هم برای جمع کردن است.
و هم برای چسباندن دو نوشته. در نتیجه به جای انجام عملیات جمع دو مقدار را به هم می چسباند. یعنی حاصل ۲ +۲ نمی شود ۴ بلکه می شود ۲۲.
در نتیجه برای اینکه به برنامه بفهمانیم این ها عدد هستند آن را در یک ضرب می کنیم. این کار باعث می شود. نوشته به عدد تبدیل شود.

مطلب قبلی

جلسه ۶ برنامه نویسی زبان js متود ها و sc...

مطلب بعدی

جلسه ۸۹ کلبه کرامت دکتر عباسی در مورد فر...

نظرات (۰)

پاسخ

دسته بندی ها

آخرین مطالب

برچسب های مورد علاقه

آموزشgitcssjshtmlبرنامه نویسی

اینستاگرام