آموزش JavaScript برای ساخت فرم های ساده مالی

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

مراحل ساخت فرم مالی با JavaScript

برای شروع، یک فایل HTML ایجاد کنید و عناصر فرم مورد نیاز خود را اضافه کنید. این عناصر شامل فیلدهای ورودی برای داده ها (مانند مبلغ وام، نرخ بهره، مدت زمان وام) و یک دکمه برای محاسبه نتایج خواهد بود.

1. ساختار HTML

کد HTML زیر یک ساختار اولیه برای یک فرم محاسبه وام ایجاد می کند:

        
            <form id="loanForm">
                <label for="loanAmount">مبلغ وام:</label><br>
                <input type="number" id="loanAmount" name="loanAmount" required style="width: 200px; padding: 5px; margin-bottom: 10px;"><br>

                <label for="interestRate">نرخ بهره (سالانه %):</label><br>
                <input type="number" id="interestRate" name="interestRate" step="0.01" required style="width: 200px; padding: 5px; margin-bottom: 10px;"><br>

                <label for="loanTerm">مدت زمان وام (ماه):</label><br>
                <input type="number" id="loanTerm" name="loanTerm" required style="width: 200px; padding: 5px; margin-bottom: 10px;"><br>

                <button type="button" onclick="calculateLoan()" style="background-color: #4CAF50; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer;">محاسبه</button>
            </form>

            <div id="result" style="margin-top: 20px;"></div>
        
    

2. افزودن JavaScript

اکنون باید منطق جاوااسکریپت را برای محاسبه اقساط وام اضافه کنید. کد زیر را به یک فایل JavaScript جداگانه اضافه کنید (مثلاً `script.js`) و آن را در فایل HTML خود لینک کنید:

        
            function calculateLoan() {
                let loanAmount = document.getElementById("loanAmount").value;
                let interestRate = document.getElementById("interestRate").value;
                let loanTerm = document.getElementById("loanTerm").value;

                let monthlyInterestRate = interestRate / 100 / 12;
                let monthlyPayment = (loanAmount * monthlyInterestRate) / (1 - Math.pow(1 + monthlyInterestRate, -loanTerm));

                if (isNaN(monthlyPayment)) {
                    document.getElementById("result").innerHTML = "لطفاً اطلاعات را به درستی وارد کنید.";
                } else {
                    document.getElementById("result").innerHTML = "قسط ماهانه: " + monthlyPayment.toFixed(2);
                }
            }
        
    

سپس فایل جاوااسکریپت را به HTML خود لینک کنید:

        
            <script src="script.js"></script>
        
    

توجه: این کد را قبل از تگ بسته </body> قرار دهید.

توضیحات کد

• `document.getElementById()`: این تابع برای دریافت عناصر HTML با استفاده از ID آنها استفاده می شود.
• `.value`: این ویژگی برای دریافت مقدار وارد شده در یک فیلد ورودی استفاده می شود.
• `isNaN()`: این تابع برای بررسی اینکه آیا یک مقدار NaN (Not a Number) است استفاده می شود.
• `.toFixed(2)`: این تابع برای گرد کردن یک عدد به دو رقم اعشار استفاده می شود.

سایر کاربردها

با استفاده از جاوااسکریپت، می توانید فرم های مالی پیچیده تری نیز ایجاد کنید، مانند:

• فرم های محاسبه مالیات
• فرم های بودجه بندی
• فرم های محاسبه بازنشستگی

سوالات متداول (FAQ)

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