تخفیف نوروزی پی استور

کد تخفیف: PR1404

شامل تمامی آثار
روز
ساعت
دقیقه
ثانیه

با خرید اشتراک ویژه ، با هزینه بسیار کمتر به فایل های پاورپوینت دسترسی داشته باشید!

مشاهده پلن ها
تدریس در پی‌استور

آموزش جاوا اسکریپت پروژه محور – طراحی کاربردی فرم اعتبارسنجی با جاوا اسکریپت در ۱۰ مرحله

  • 3.24k بازدید
  • آخرین بروزرسانی: 27 دی 1403
  • جاوا اسکریپت
  • زمان مطالعه: 16 دقیقه
آموزش جاوا اسکریپت پروژه محور - طراحی کاربردی فرم اعتبار سنجی با جاوا اسکریپت در 10 مرحله
در این پست از آموزش‌های پی استور به آموزش جاوا اسکریپت پروژه محور می‌رسیم. این آموزش برای افراد مبتدی و علاقمند به جاوا اسکریپت مناسب می‌باشد. همانطور که می‌دانید جاوا اسکریپت کاربردهای فراوانی دارد که یکی از آن‌ها اعتبارسنجی است. اگر به پیاده‌سازی فرم اعتبارسنجی با جاوا اسکریپت علاقمند هستید این پست می‌تواند راهنمای خوبی برای شما باشد. در ادامه آموزش با ما همراه باشید.

فهرست مطالب

معرفی جاوا اسکریپت

جاوا اسکریپت زبان برنامه نویسی شیءگرا و چند پلتفرمی است. جاوا اسکریپت به زبان مترجمی که در مرورگر جاسازی شده است، ترجمه می‌شود. این مترجم، وظیفه ترجمه جاوا اسکریپت برای مرورگر وب را بر عهده دارد. با جاوا اسکریپت می‌توان برنامه‌های کاربردی وب مدرن ساخت و صفحات وب را به شکل کاربرپسندی پویا نمایی کرد.

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

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

 ویژگی‌های جاوا اسکریپت

جاوا اسکریپت ویژگی‌هایی دارد که به چند مورد اشاره می‌کنیم:

  • همه مرورگرهای وب که محبوب هستند از جاوا اسکریپت به دلیل فراهم کردن محیط‌های اجرایی داخلی پشتیبانی می‌کنند.
  • جاوا اسکریپت از ساختار زبان برنامه نویسی C پیروی می‌کند. جاوا اسکریپت یک زبان برنامه نویسی ساخت یافته است.
  • زبان برنامه نویسی جاوا اسکریپت یک زبان برنامه نویسی شیءگرا است که به جای اینکه از کلاس‌ها برای وراثت استفاده کند، از نمونه های اولیه استفاده می‌کند.
  • جاوا اسکریپت یک زبان تفسیر شده و سبک وزن است که به حروف کوچک و بزرگ حساس است.
  • جاوا اسکریپت در چندین سیستم عامل مثل ویندوز، مک و غیره پشتیبانی می‌شود.

کاربردهای جاوا اسکریپت

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

  • وبسایت‌ها: طراحان وب با استفاده از جاوا اسکریپت صفحات وب خود را به جای استاتیک، پویا می‌سازندکه موجب زیبایی هرچه بیشتر وب‌سایت می‌شود. با استفاده از جاوا اسکریپت می‌توانید یک نفس تازه به صفحه وب دهید و از عملکرد بی‌نظیر وب‌سایت در مرورگر لذت ببرید.
  • تکنولوژی ایجکس: تکنولوژی ایجکس یا آژاکس (Ajax) که با ترکیب جاوا اسکریپت کار می‌کند یک بروزرسانی جزئی ایجاد می‌کند. احتمالاً در برخی فرم‌ها یا امتیازدهی دیده‌اید که بخشی از صفحه رفرش می‌شود و اطلاعات بروزرسانی می‌شوند. استفاده از این تکنولوژی باعث می‌شود تا از بروزرسانی کل صفحه جلوگیری شود و در زمان و هزینه صرفه جویی گردد.
  • برنامه‌های کاربردی وب: با پیشرفت مرورگرها و کامپیوترهای شخصی، جاوا اسکریپت توانایی ایجاد برنامه‌های کاربردی وب را فراهم می‌سازد.
  • ارائه یا Presentaton: یکی از کاربردهایی که در بین کاربران محبوب است ایجاد Presentaton به عنوان وب سایت است. با استفاده از HTML و CSS این کار آسان‌تر می‌شود.
  • وب سرورها: با استفاده از Node سرورهای قوی‌تری مثل Express.js ایجاد می‌شود.
  • ساخت بازی: مرورگرها برای ساخت بازی قدرتمندتر شده‌اند. با اضافه شدن بوم HTML5، سطح پیچیدگی که در بازی های مبتنی بر مرورگر امکان پذیر است به طور تصاعدی افزایش یافته است.
  • اعتبارسنجی فرم: معمولاً از جاوا اسکریپت برای اعتبار سنجی فرم‌ها در صفحات وب استفاده می‌شود که بسیار بین طراحان وب رایج است.

اعتبارسنجی چیست؟

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

وقتی شما یک فرم ایجاد می‌کنید و انتظار دارید کاربر موارد خواسته شده از فرم را به درستی پر کند، دریافت داده‌های نامعتبر قطعاً مشکل ساز خواهد بود. گاهی اوقات هم ممکن است کاربران بدون دقت و تأمل شروع به پر کردن فرم کنند و در این صورت است که مشکلات تازه شروع می‌شوند.

اعتبار سنجی جاوا اسکریپت چیست؟

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

شروع به کار با HTML

ابتدا یک ویرایشگر باز کنید (پیشنهاد ما به شما استفاده از ویرایشگر VS Code می‌باشد). برای شروع کار یک فایل HTML ایجاد کنید. در فایل HTML کدهای مربوط به طراحی فرم را می‌نویسیم.

نکته: برای شروع باید آشنایی تقریبی با HTML و CSS داشته باشید.

کدهای html زیر را در فایل HTML قرار دهید.

<!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset="UTF-8">
<title>Form validation - programstore.ir</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form name="contactForm" onsubmit="return validateForm()">
    <h2>فرم اعتبار سنجی</h2>
    <div class="row">
        <label>نام</label>
        <input type="text" name="name">
        <div class="error" id="nameErr"></div>
    </div>
    <div class="row">
        <label>ایمیل</label>
        <input type="text" name="email">
        <div class="error" id="emailErr"></div>
    </div>
    <div class="row">
        <label>شماره موبایل</label>
        <input type="text" name="mobile" maxlength="10">
        <div class="error" id="mobileErr"></div>
    </div>
    <div class="row">
        <label>کشور</label>
        <select name="country">
            <option>انتخاب</option>
            <option>آذربایجان</option>
            <option>آمریکا</option>
            <option>ایران</option>
            <option>ترکیه</option>
               <option>عراق</option>
               <option>فرانسه</option>
               <option>هند</option>
        </select>
        <div class="error" id="countryErr"></div>
    </div>
    <div class="row">
        <label>جنسیت</label>
        <div class="form-inline">
            <label><input type="radio" name="gender" value="male"> زن</label>
            <label><input type="radio" name="gender" value="female"> مرد</label>
        </div>
        <div class="error" id="genderErr"></div>
    </div>
    <div class="row">
        <label>علایق <i>(اختیاری)</i></label>
        <div class="form-inline">
            <label><input type="checkbox" name="hobbies[]" value="sports"> ورزش</label>
            <label><input type="checkbox" name="hobbies[]" value="movies"> فیلم</label>
            <label><input type="checkbox" name="hobbies[]" value="music"> موسیقی</label>
        </div>
    </div>
    <div class="row">
        <input type="submit" value="ارسال">
    </div>
</form>
<script src="script.js"></script>
</body>
</html>

همانطور که می‌بینید تنها کدهای HTML در این فایل قرار داده می‌شود. با استفاده از کد زیر (در خط ۶) فایل CSS را به HTML پیوند داده‌ایم.

<link rel="stylesheet" href="style.css">

و در ادامه (خط ۶۰) در انتهای کد قبل از <body/> فایل JS را به HTML پیوند داده‌ایم.

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

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

ایجاد فایل CSS

یک فایل جدید ایجاد کنید و آن را با نام style.css ذخیره کنید. در این فایل کدهای مربوط به استایل دهی فرم نوشته می‌شود. کدهای زیر را در فایل CSS خود قرار دهید.

body {
    font-size: 16px;
    background: white;
    font-family: "Segoe UI";
}
h2 {
    text-align: center;
}
form {
    width: 300px;
    background: white;
    padding: 15px 40px 40px;
    border: 1px solid gray;
    margin: 50px auto 0;
    border-radius: 5px;
}
label {
    display: block;
    margin-bottom: 5px
}
label i {
    color: gray;
    font-size: 80%;
}
input, select {
    border: 1px solid gray;
    padding: 10px;
    display: block;
    width: 100%;
    box-sizing: border-box;
    border-radius: 2px;
}
.row {
    padding-bottom: 10px;
}
.form-inline {
    border: 1px solid gray;
    padding: 8px 10px 4px;
    border-radius: 2px;
}
.form-inline label, .form-inline input {
    display: inline-block;
    width: auto;
    padding-right: 15px;
}
.error {
    color: red;
    font-size: 90%;
}
input[type="submit"] {
    font-size: 110%;
    background: #006dcc;
    border-color: #016BC1;
    box-shadow: 0 3px 0 #0165b6;
    color: #fff;
    margin-top: 10px;
    cursor: pointer;
}
input[type="submit"]:hover {
    background: #0165b6;
}

پیش‌نمایش فرم طراحی شده تا به اینجا اینگونه خواهد بود.

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

ایجاد فایل JS

یک فایل جدید ایجاد کنید و نام آن را script.js قرار دهید. در این بخش از کدنویسی کدهای مربوط به اعتبارسنجی فرم نوشته خواهند شد.

مرحله اول – تعریف یک تابع برای نمایش پیغام خطا

برای اینکه بتوانیم پیفام خطا در زیر هر بخش نمایش دهیم ابتدا یک تابع به نام printError تعریف می‌کنیم که در ادامه کار این تابع فراخوانی خواهد شد. در ابتدا کدهای زیر را به فایل JS خود اضافه کنید.
function printError(elemId, hintMsg) {
    document.getElementById(elemId).innerHTML = hintMsg;
}

مرحله دوم – تعریف یک تابع برای اعتبارسنجی فرم و بازیابی مقادیر عناصر فرم

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

کدهای نوشته شده پس از هر توضیحات را به فایل JS خود اضافه کنید. دقت کنید که تابع بسته نشده است. در انتهای کد و در مرحله ۱۰ تابع را خواهیم بست.

function validateForm() {
    var name = document.contactForm.name.value;
    var email = document.contactForm.email.value;
    var mobile = document.contactForm.mobile.value;
    var country = document.contactForm.country.value;
    var gender = document.contactForm.gender.value;
    var hobbies = [];
    var checkboxes = document.getElementsByName("hobbies[]");
    for(var i=0; i < checkboxes.length; i++) {
        if(checkboxes[i].checked) {
            hobbies.push(checkboxes[i].value);
    }
}

مرحله سوم – تعریف متغیرهای خطا با مقدار پیش‌فرض

در ابتدای کار اگر کاربر بر روی دکمه ارسال کلیک کند، باید از ارسال فرم جلوگیری شود. بنابراین باید متغیرهایی با مقدار true تعریف کنیم تا در صورت نامتعبر بودن داده وارد شده (و یا وارد نشده) خطا نمایش داده شود.

var nameErr = emailErr = mobileErr = countryErr = genderErr = true;

مرحله چهارم – اعتبارسنجی نام

طبیعتاً یک نام نمی‌تواند خالی باشد. ممکن است افراد مختلف نام خود را به انگلیسی یا فارسی وارد کنند. بنابراین تنها اعتبارسنجی که لازم است انجام دهیم این است که از کاربر بخواهیم کادر نام را خالی نگذارد. در صورتی که کادر خالی باشد خطا نمایش داده می‌شود و در غیر این صورت مقدار پیش‌فرض متغیر که در مرحله قبل true تنظیم کرده‌ایم، با مقدار false جایگزین خواهد شد.

if(name == "") {
    printError("nameErr", "لطفا یک نام وارد کنید");
} else {
        printError("nameErr", "");
        nameErr = false;
}

مرحله پنجم – اعتبارسنجی ایمیل

همانطور که می‌دانید یک ایمیل سینتکس مخصوص خود را دارد و از چند بخش تشکیل شده است. بنابراین اگر بخواهیم بر روی یک ایمیل اعتبار سنجی انجام دهیم تنها کافیست به شکل کلی آن توجه کنیم. درصورتی که کادر خالی باشد خطا نمایش داده می‌شود و در صورتی که ایمیل وارد شده با شکل کلی تعیین شده مغایرت داشته باشد خطا “ایمیل وارد شده معتبر نیست!” نمایش داده می‌شود. در نهایت در صورتی که ایمیل وارد شده معتبر باشد مقدار پیش‌فرض متغیر که در مرحله سوم true تنظیم کرده‌ایم، با مقدار false جایگزین خواهد شد.

if(email == "") {
        printError("emailErr", "لطفا یک ایمیل وارد کنید");
    } else {
        // تعریف شکل معتبر یک ایمیل
        var regex = /^\S+@\S+\.\S+$/;
        if(regex.test(email) === false) {
            printError("emailErr", "ایمیل وارد شده معتبر نیست!");
        } else{
            printError("emailErr", "");
            emailErr = false;
    }
}

مرحله ششم – اعتبارسنجی شماره موبایل

یک شماره موبایل معتبر دارای ۱۰ رقم عدد می‌باشد. بنابراین در این مرحله از کاربر خواسته می‌شود یک داده با ۱۰ رقم (از ۰ تا ۹) در کادر وارد کند. درصورتی که از کاراکتر یا حروف در شماره موبایل استفاده شود خطا با محتوای “شماره موبایل وارد شده معتبر نیست” نمایش داده می‌شود و در صورتی که شماره موبایل معتبر باشد مقدار متغیر خطا با false جایگزین می‌شود.

if(mobile == "") {
        printError("mobileErr", "لطفا شماره موبایل خود را وارد کنید");
    } else {
        var regex = /^[0-9]\d{9}$/;
        if(regex.test(mobile) === false) {
            printError("mobileErr", "شماره موبایل وارد شده معتبر نیست!");
        } else{
        printError("mobileErr", "");
        mobileErr = false;
    }
}

مرحله هفتم – اعتبارسنجی کشور

در این مرحله یک کادر combo box قرار داده شده است تا کاربر کشور محل زندگی خود را انتخاب کند. در صورتی که همچنان گزینه “انتخاب” تغییر نکرده باشد خطا نمایش داده می‌شود.

if(country == "انتخاب") {
    printError("countryErr", "لطفا کشور خود را انتخاب کنید");
} else {
    printError("countryErr", "");
    countryErr = false;
}

مرحله هشتم – اعتبارسنجی جنسیت

در این بخش نیز کاربر باید یکی از گزینه‌های موجود در فرم را انتخاب کند، در صورتی که هیچ کدام از radio buttonها انتخاب نشده باشد خطا نمایش داده خواهد شد. در غیر این صورت مقدار پیش‌فرض متغیر خطا به false تغییر خواهد کرد.

if(gender == "") {
    printError("genderErr", "لطفا جنسیت خود را انتخاب کنید");
} else {
    printError("genderErr", "");
    genderErr = false;
}

مرحله نهم – جلوگیری از ارسال فرم درصورت وجود خطا

در آخرین مرحله باز هم یک مقایسه خواهیم داشت تا مطمئن شویم تمامی متغیرهای خطا با مقدار false برابر هستند. در صورتی که حتی یک از متغیرها با مقدار true برابر باشد فرم ارسال نخواهد شد.

اگر مایل به یادگیری جاوا اسکریپت به صورت آموزش ویدیویی و گام به گام هستید پیشنهاد می‌کنیم از ویدیوهای آموزشی جاوا اسکریپت فرادرس استفاده نمایید.

if((nameErr || emailErr || mobileErr || countryErr || genderErr) == true) {
    return false;
}

پیش‌نمایش فرم در صورت وارد نکردن داده در کادرها بدین صورت خواهد بود.

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

مرحله دهم – ارسال فرم و نمایش داده‌های وارد شده

در صورتی که مرحله نهم با مقدار false برابر باشد، امکان ارسال فرم وجود خواهد داشت. بنابراین می‌خواهیم کد مرحله نهم را اینگونه ویرایش کنیم و یک مرحله دیگر به آن اضافه کنیم.

if((nameErr || emailErr || mobileErr || countryErr || genderErr) == true) {
    return false;
} else {
    var dataPreview = "شما موارد زیر را در فرم وارد کرده‌اید: \n" +
                    "نام : " + name + "\n" +
                    "ایمیل : " + email + "\n" +
                    "شماره موبایل : " + mobile + "\n" +
                    "کشور : " + country + "\n" +
                    "جنسیت : " + gender + "\n";
    if(hobbies.length) {
        dataPreview += "علایق : " + hobbies.join(" ، ");
    }
    alert(dataPreview);
    }
};

در نهایت یک پیش‌نمایش برای نشان دادن داده‌های وارد شده تنظیم می‌کنیم و مقادیر مورد نظر را فراخوانی می‌کنیم. بدین ترتیب موفق شدیم یک اعتبارسنجی فرم انجام دهیم و از ارسال داده‌های نامعبتر جلوگیری کنیم.

سورس کد نهایی فرم

کدهای طراحی شده در این پروژه به صورت کاملاً عملی تست شده‌اند. می‌توانید سورس کد را در انتهای مطلب از باکس دانلود به صورت رایگان دریافت کنید. برای استفاده از فرم تنها کافیست فایل index موجود در پوشه دانلود را باز کنید و از فرم طراحی شده استفاده کنید. این فایل قابلیت ویرایش با توضیحات (به صورت کامنت) در فایل JS می‌باشد. اگر در ابتدای کار هستید و می‌خواهید جاوا اسکریپت را از صفر یاد بگیرید پیشنهاد می‌کنیم مجموعه آموزش‌های جاوا اسکریپت (رایگان) را حتماً مطالعه نمایید تا با نحوه شروع به کار با جاوا اسکریپت آشنا شوید.

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

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

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

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

مقالات مرتبط با موضوع

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *