محاسبه درصد (به همراه کُدنویسی) - بخش اول

سلام دوستان :) امیدوارم که حالتون خوب باشه...

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

امروزه افراد زیادی در ارز دیجیتال و بازار های مالی فعالیت می‌کنند ( حتی ممکنِ خودِ شما هم دستی بر آتش داشته باشید ) ممکن هست بخواهید حساب کنید که چه درصدی از کل سرمایه‌تون رو ریسک می‌کنید.

فرض کنید یک میلیون تومان پول داریم، حالا شخصی به ما پیشنهاد میده و میگه اگر سرمایه‌ات رو به من بدی می‌تونم در یک ماه 30 درصد بهت سود بدم، حالا منِ سرمایه دار ? می‌خوام حساب کنم که سرِ ماه در حسابم چقدر پول دارم.

برای تبدیل درصد به تعداد (یا همون مبلغِ حاصل از سود) از این فرمول استفاده می‌کنیم:

Count = (Percent * ALL) ÷ 100
Count: جواب نهایی
Percent: مقدار درصدی که می‌‌خواهیم
ALL: اصلِ سرمایه

(30 * 1,000,000) / 100 = 300,000

به این صورت ما 300 هزار تومان سود داریم.

الان می‌خوام همین فرمول رو با زبان جاوا اسکریپت بنویسم، برای شروع به دوتا تگ input و یک button نیاز داریم:

<input type=&quottext&quot id=&quotbalance&quot> 
<input type=&quottext&quot id=&quotpercent&quot>
<button type=&quotbutton&quot   = &quotPe2Co()&quot>محاسبه</button>

برای هر تگ اینپوت از خصوصیت id استفاده کردم که در بخش کد نویسی جاوااسکریپت بتونم به مقدار ورودی کاربر دسترسی داشته باشم و همچنین برای دکمه محاسبه از رویداد که برای پارامتر ورودی اون نام تابعی (Pe2Co) که وظیفه محاسبه درصد رو برعهده داره می‌نویسیم. این تابع رو در کد های جاوا اسکریپت تعریف میکنیم.

تا الان صفحه ما به شکل زیر در اومده

خب در ادامه برای نوشتن کدهای جاوااسکریپت درون صفحه باید این کد هارو بین تگ Script بنویسیم:


       // Your Code..!

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

قدم اول) ابتدا برای نوشتن تابع در زبان جاوااسکریپت از کلمه کلیدی function و پس از آن نام تابع استفاده می‌کنیم.

قدم دوم) برای دسترسی به مقادیر ورودی کاربر از توابع HTML DOM استفاده می‌کنیم ( اگر این مورد براتون آشنا نیست میتونید از اینجا راجع بهش مطالعه کنید + )

const balance = Number( document.getElementById(&quotbalance&quot).value );

توضیحی که برای خط بالا بخوام بدم این هست که درون صفحه ما به دنبال عنصری با آی‌دی balance میگرده و پس از پیدا کردن این عنصر، متد value فراخوانی میشه که مقدار وارد شده توسط کاربر رو به عنوان خروجی پاس میده، این مقدار به صورت رشته (String) هست و برای انجام محاسبات ریاضی باید اون رو به عدد (با استفاده از تابع Number که از توابع خودِ جاوااسکریپت هست استفاده می‌کنیم) تبدیل کنیم.

برای ذخیره این مقدار از متغییری با نوع const و نام balance استفاده می‌کنیم. (انواع دیتا تایپ ها در جاواسکریپت + )

از همین خط کد برای ورودی دوم کاربر استفاده می‌کنم:

const percent = Number( document.getElementById(&quotpercent &quot).value );

قدم سوم) انجام محاسبه درصد گیری:

let res = ( percent * balance ) / 100;

قدم چهارم) برای نمایش خروجی در صفحه باید مقدار نهایی رو درون یک تگ بریزیم، که برای اینکار من از یک تگ پاراگراف با آی‌دی result استفاده کردم.

<p id=&quotresult&quot></p>

و همانند قدم دوم این عنصر رو دریافت می‌کینم و با استفاده از متد innerHTML به درون تگ دسترسی پیدا می‌کنیم و جواب نهایی (متغییر res ) رو به اون اضافه میکنیم.

document.getElementById('result') = res ;

همه کد های بالا باید به صورت زیر نوشته بشه:

<input type=&quottext&quot id=&quotbalance&quot>
<input type=&quottext&quotid=&quotpercent &quot>
<button type=&quotbutton&quot  =&quotPe2Co()&quot>محاسبه</button>
<p id=&quotresult&quot></p>


        function Pe2Co(){
                const balance = Number(document.getElementById(&quotbalance&quot).value);
                const percent = Number(document.getElementById(&quotpercent &quot).value);
                let res = ( percent * balance ) / 100;
                document.getElementById('result') = res ;
        }

خروجی نهایی به صورت زیر هست