محاسبه موجودی کاربر با استفاده از جاوااسکریپت (پروژه شماره یک)

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

let userAccount = {
id : 23,
fullName : "amir javanmir",
inCome : 0,
outCome : 0
}

let userAccount = {

id : 23,

fullName : "amir javanmir",

inCome : 0,

outCome : 0

}

مقادیر inCome برابر با درآمد و outCome برابر با هزینه که در ابتدا مقدار پیش فرض آنها را ۰ قرار میدهیم.
سپس نیاز به دو تابع داریم. یکی از توابع درآمد را دریافت و به موجودی کاربر اضافه می‌کند.
تابع دیگر مقدار هزینه کاربر را دریافت و به اکانت آن اضافه می‌کند.
تابع دیگری را نیاز داریم که مقدار موجودی کاربر را نمایش می‌دهد.

ایجاد تابع درآمد کاربر

تابعی به نام addIncome ایجاد می‌کنیم که این تابع دو ورودی دارد. نخست اکانت موردنظر و دوم مقدار درآمد است.

نحوه نوشتن:

let addIncome = function(account, amount){
account.inCome += amount;
}

let addIncome = function(account, amount){

account.inCome += amount;

}

در کد بالا مقدار amount دریافت شده و مقدار درآمد به کاربر موردنظر که از طریق account دریافت شده اضافه گردیده است.

فراخوانی تابع:

برای فراخوانی تنها کافیست نام تابع addIncome را صدا زده و دو پارامتر userAccount و مثلا مقدار ۵۰۰۰ را وارد کنیم. این تابع به اکانت موردنظر مقدار ۵۰۰۰ را بعنوان درآمد اضافه می‌کند.

مثال:

addIncome(userAccount, 5000);
console.log(userAccount.inCome);
//5000

addIncome(userAccount, 5000);

console.log(userAccount.inCome);

//5000

ایجاد تابع هزینه کاربر

تابع دیگری در کنار addIncome به نام addOutcome ایجاد می‌کنیم که این تابع دو ورودی دارد. نخست اکانت موردنظر و دوم مقدار هزینه است.
نحوه نوشتن:

let addOutcome = function(account, amount){
account.outCome += amount;
}

let addOutcome = function(account, amount){

account.outCome += amount;

}

در کد بالا مقدار amount دریافت شده و مقدار هزینه به کاربر موردنظر که از طریق account دریافت شده اضافه گردیده است.

فراخوانی تابع:

برای فراخوانی تنها کافیست نام تابع addOutcome را صدا زده و دو پارامتر userAccount و مثلا مقدار ۲۰۰۰ را وارد کنیم. این تابع به اکانت موردنظر مقدار ۵۰۰۰ را بعنوان هزینه اضافه می‌کند.

مثال:

addOutcome(userAccount, 2000);
console.log(userAccount.outCome);
//2000

addOutcome(userAccount, 2000);

console.log(userAccount.outCome);

//2000

حال با استفاده از تابع getInfoAccount مقدار موجودی کاربر را محاسبه می کنیم.این تابع تنها اکانت را بعنوان پارامتر دریافت می کند.

نحوه نوشتن:

let getInfoAccount = function (account){
return account.inCome - account.outCome;
}
console.log(`account ${userAccount.fullName} is ${getInfoAccount(userAccount)} amount`);
//account amir javanmir is 3000 amount

let getInfoAccount = function (account){

return account.inCome - account.outCome;

}

console.log(`account ${userAccount.fullName} is ${getInfoAccount(userAccount)} amount`);

//account amir javanmir is 3000 amount

حال برای اینکه کد نوشته شده مقداری داینامیک شود با استفاده از html یک‌ فرم ایجاد کرده که در داخل آن کاربر میتواند مقدار خود را وارد کنند.

ساخت فایل html

در ابتدا یک فایل با پسوند html. و به نام credit به شکل زیر ایجاد می کنیم.در این فایل تگ های ابتدایی را قرار می دهیم.

کد:
<!DOCKTYPE html>
<html>
<head>
<title>check credit dejavan.ir</title>
</head>
<body>

</body>
</html>

کد:

<!DOCKTYPE html>

<html>

<head>

<title>check credit dejavan.ir</title>

</head>

<body>

</body>

</html>

سپس با استفاده از تگ form و فیلد input یک فرم ایجاد می کنیم.
نوع input حالت number است و تنها عدد دریافت می کند.یک دکمه هم از نوع button ایجاد کرده ایم که اطلاعات فرم را در سمت کاربر ارسال می کند.

مثال:

<!DOCKTYPE html>
<html>
<head>
<title>check credit by dejavan.ir</title>
</head>
<body>

<form>
<input type="number" />
<input type="button" value="ارسال" />
</form>

</body>
</html>

<!DOCKTYPE html>

<html>

<head>

<title>check credit by dejavan.ir</title>

</head>

<body>

<form>

</form>

</body>

</html>

در این سند باید به نحوی عمل کنیم که در همان ابتدا به کاربر مقدار درآمد نمایش داده شود.بنابراین در قالب سند خود در زیر فرم یک تگ p با آی دی showCredit ایجاد کرده و مقدار دارایی کاربر را درون span نمایش می دهیم.
مثال:

<!DOCKTYPE html>
<html>
<head>
<title>check credit by dejavan.ir</title>
</head>
<body>

<form>
<input type="number" />
<input type="button" value="ارسال" />
</form>
<p id="showCredit">مقدار موجودی شما:<span></span> ریال است.</p>
</body>
</html>

<!DOCKTYPE html>

<html>

<head>

<title>check credit by dejavan.ir</title>

</head>

<body>

<form>

</form>

<p id="showCredit">مقدار موجودی شما:<span></span> ریال است.</p>

</body>

</html>

حال کد زیر را برای دریافت دارایی کاربر درون تگ اسکریپت وارد می کنیم.
مثال:

<!DOCKTYPE html>
<html>
<head>
<title>check credit by dejavan.ir</title>
</head>
<body>

<form>
<input type="number" />
<input type="button" value="ارسال" />
</form>
<p id="showCredit">مقدار موجودی شما:<span></span> ریال است.</p>

<script>
let userAccount = {
id : 23,
fullName : "amir javanmir",
inCome : 0,
outCome : 0
}

let getInfoAccount = function (account){
return account.inCome - account.outCome;
}

document.querySelector("#showCredit span").innerHTML = getInfoAccount(userAccount);
</script>
</body>
</html>

<!DOCKTYPE html>

<html>

<head>

<title>check credit by dejavan.ir</title>

</head>

<body>

<form>

</form>

<p id="showCredit">مقدار موجودی شما:<span></span> ریال است.</p>

let userAccount = {

id : 23,

fullName : "amir javanmir",

inCome : 0,

outCome : 0

}

let getInfoAccount = function (account){

return account.inCome - account.outCome;

}

document.querySelector("#showCredit span").innerHTML = getInfoAccount(userAccount);

</script>

</body>

</html>

حال حالت رویداد را بر روی دکمه فرم فعال میکنیم. برای اینکار با استفاده از listener به دکمه ثبت گوش میدهیم.

در این حالت شرطی را قرار می دهیم که در صورت وارد نکردن عدد توسط کاربر خطای “لطفا مقدار عددی وارد کنید” داده شود.

در صورتی که مقدار بیشتر از ۰ باشد تابع addIncome فراخوانی شده و مقدار نهایی در خروجی نمایش داده شود.

در صورتی که مقدار کمتر از ۰ باشد تابع addOutcome فراخوانی شده و مقدار نهایی در خروجی نمایش داده شود.

مثال:

<!DOCKTYPE html>
<html>
<head>
    <title>check credit by dejavan.ir</title>
</head>
<body>
<div class="container">
    <form>
        <input type="number" />
        <input type="button" value="ارسال" />
    </form>
    <p id="showCredit">مقدار موجودی شما:<span></span> ریال است.</p>
</div>
<script>
    let userAccount = {
    id : 23,
    fullName : "amir javanmir",
    inCome : 0,
    outCome : 0
}

let getInfoAccount = function (account){
        console.log(account.inCome,account.outCome);
        let res = (account.outCome < 0) ?  (account.inCome - Math.abs(account.outCome)): account.inCome;
        return res;
}

let addIncome = function(account, amount){
    account.inCome += amount;
}

let addOutcome = function(account, amount){
    account.outCome += amount;
}

let showCredit = document.querySelector("#showCredit span");
let inputVal = document.querySelector("form input[type=number]");

showCredit.innerHTML = getInfoAccount(userAccount);

document.querySelector("form input[type=button]").addEventListener('click',function (){
    if(inputVal.value != ''){
        if(inputVal.value < 0){
            addOutcome(userAccount, parseInt(inputVal.value));
            console.log(userAccount.outCome);
            showCredit.innerHTML = getInfoAccount(userAccount);
        }
        if(inputVal.value > 0){
            addIncome(userAccount, parseInt(inputVal.value));
            showCredit.innerHTML = getInfoAccount(userAccount);
        }
    }else{
        alert("لطفا مقدار عددی وارد کنید");
    }
});
</script>
</body>
</html>

<!DOCKTYPE html>

<html>

<head>

<title>check credit by dejavan.ir</title>

</head>

<body>

<form>

</form>

<p id="showCredit">مقدار موجودی شما:<span></span> ریال است.</p>

</div>

let userAccount = {

id : 23,

fullName : "amir javanmir",

inCome : 0,

outCome : 0

}

let getInfoAccount = function (account){

console.log(account.inCome,account.outCome);

let res = (account.outCome < 0) ? (account.inCome - Math.abs(account.outCome)): account.inCome;

return res;

}

let addIncome = function(account, amount){

account.inCome += amount;

}

let addOutcome = function(account, amount){

account.outCome += amount;

}

let showCredit = document.querySelector("#showCredit span");

let inputVal = document.querySelector("form input[type=number]");

showCredit.innerHTML = getInfoAccount(userAccount);

document.querySelector("form input[type=button]").addEventListener('click',function (){

if(inputVal.value != ''){

if(inputVal.value < 0){

addOutcome(userAccount, parseInt(inputVal.value));

console.log(userAccount.outCome);

showCredit.innerHTML = getInfoAccount(userAccount);

}

if(inputVal.value > 0){

addIncome(userAccount, parseInt(inputVal.value));

showCredit.innerHTML = getInfoAccount(userAccount);

}

}else{

alert("لطفا مقدار عددی وارد کنید");

}

});

</script>

</body>

</html>

حال برای سند دستورات css را وارد می کنیم.

مثال:

<!DOCKTYPE html>
<html>
<head>
    <title>check credit by dejavan.ir</title>
</head>
<body>
<style>
    body{
        direction: rtl;
        font-family: Tahoma;
    }
    .container{
        margin: auto;
        max-width: 300px;
        padding: 50px 0;
    }
    form input{
        padding: 7px;
        border: 1px solid #eaeaea;
    }
    form input[type='number']{
        width: 80%;
    }
    p span{
        direction: ltr;
    }
    form input[type='button']{
        width: 18%;
    }
    p{
        text-align: center;
    }
</style>
<div class="container">
    <form>
        <input type="number" />
        <input type="button" value="ارسال" />
    </form>
    <p id="showCredit">مقدار موجودی شما:<span></span> ریال است.</p>
</div>
<script>
    let userAccount = {
    id : 23,
    fullName : "amir javanmir",
    inCome : 0,
    outCome : 0
}

let getInfoAccount = function (account){
        console.log(account.inCome,account.outCome);
        let res = (account.outCome < 0) ?  (account.inCome - Math.abs(account.outCome)): account.inCome;
        return res;
}

let addIncome = function(account, amount){
    account.inCome += amount;
}

let addOutcome = function(account, amount){
    account.outCome += amount;
}

let showCredit = document.querySelector("#showCredit span");
let inputVal = document.querySelector("form input[type=number]");

showCredit.innerHTML = getInfoAccount(userAccount);

document.querySelector("form input[type=button]").addEventListener('click',function (){
    if(inputVal.value != ''){
        if(inputVal.value < 0){
            addOutcome(userAccount, parseInt(inputVal.value));
            console.log(userAccount.outCome);
            showCredit.innerHTML = getInfoAccount(userAccount);
        }
        if(inputVal.value > 0){
            addIncome(userAccount, parseInt(inputVal.value));
            showCredit.innerHTML = getInfoAccount(userAccount);
        }
    }else{
        alert("لطفا مقدار عددی وارد کنید");
    }
});
</script>
</body>
</html>

<!DOCKTYPE html>

<html>

<head>

<title>check credit by dejavan.ir</title>

</head>

<body>

<style>

body{

direction: rtl;

font-family: Tahoma;

}

.container{

margin: auto;

max-width: 300px;

padding: 50px 0;

}

form input{

padding: 7px;

border: 1px solid #eaeaea;

}

form input[type='number']{

width: 80%;

}

p span{

direction: ltr;

}

form input[type='button']{

width: 18%;

}

text-align: center;

}

</style>

<form>

</form>

<p id="showCredit">مقدار موجودی شما:<span></span> ریال است.</p>

</div>

let userAccount = {

id : 23,

fullName : "amir javanmir",

inCome : 0,

outCome : 0

}

let getInfoAccount = function (account){

console.log(account.inCome,account.outCome);

let res = (account.outCome < 0) ? (account.inCome - Math.abs(account.outCome)): account.inCome;

return res;

}

let addIncome = function(account, amount){

account.inCome += amount;

}

let addOutcome = function(account, amount){

account.outCome += amount;

}

let showCredit = document.querySelector("#showCredit span");

let inputVal = document.querySelector("form input[type=number]");

showCredit.innerHTML = getInfoAccount(userAccount);

document.querySelector("form input[type=button]").addEventListener('click',function (){

if(inputVal.value != ''){

if(inputVal.value < 0){

addOutcome(userAccount, parseInt(inputVal.value));

console.log(userAccount.outCome);

showCredit.innerHTML = getInfoAccount(userAccount);

}

if(inputVal.value > 0){

addIncome(userAccount, parseInt(inputVal.value));

showCredit.innerHTML = getInfoAccount(userAccount);

}

}else{

alert("لطفا مقدار عددی وارد کنید");

}

});

</script>

</body>

</html>

مشاهده و دانلود از github

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

محاسبه موجودی کاربر با استفاده از جاوااسکریپت (پروژه شماره یک)

آموزش پروژه محور جاوااسکریپت

ایجاد تابع درآمد کاربر

فراخوانی تابع:

ایجاد تابع هزینه کاربر

فراخوانی تابع:

آخرین آموزش ها

دیدگاه خود را بیان کنید لغو پاسخ

امیر جوان میر

طراح، گرافیست و توسعه دهنده وب

گواهینامه دوره آموزش جاوااسکریپت

آموزش پروژه محور جاوااسکریپت

دسترسی سریع

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

محاسبه موجودی کاربر با استفاده از جاوااسکریپت (پروژه شماره یک)

آموزش پروژه محور جاوااسکریپت

ایجاد تابع درآمد کاربر

فراخوانی تابع:

ایجاد تابع هزینه کاربر

فراخوانی تابع:

آخرین آموزش ها

دیدگاه خود را بیان کنید لغو پاسخ

امیر جوان میرطراح، گرافیست و توسعه دهنده وب

گواهینامه دوره آموزش جاوااسکریپت

آموزش پروژه محور جاوااسکریپت

امیر جوان میر

طراح، گرافیست و توسعه دهنده وب