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

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

جاوا اسکریپت چیست؟

یک زبان برنامه نویسی سطح بالاست که در کنار html و css در سمت کلاینت در مرورگر قابل اجراست (طبق آموزش جلسه اول) بنابراین درون کدهای html قرار می گیرد و بر روی مرورگر قابل نمایش است. همانطورکه قبلا گفتیم css که نقش مدیریت نمای سایت را دارد، تغییراتش به صورت ایستا اعمال می شود ولی جاوا اسکریپت یک زبان برای انجام وظایف پویا است.
یعنی از طریق این زبان می توان به اشیا داخل کلاس دسترسی داشت و آن ها را تغییر داد بنابراین برای پویانمایی در سمت کاربر از این زبان استفاده می شود. می توان کاربرد جاوا اسکریپت را در مواردی مثلا در کادر جستجو ، انیمیشن ها ، انجام محاسبات ریاضی،نمایش اخطار به کاربران،عکس العمل به واکنش های کاربران و …. مشاهده کرد.

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

در مثال فرم ثبت نام، اگر بخواهیم به کاربر بفهمانیم که نام کاربری (یا هر فیلد دیگر) خالی است یا تکرار رمز اشتباه است یا …. از جاوا اسکریپت باید استفاده کنیم.

  • ما همان برنامه فرم ثبت نام را باز می کنیم. کدهای php به شکل زیر است:

<!doctype html>

<html>
<head>
<meta charset=”utf-8″>
<title>عضویت</title>
<link rel=”stylesheet” type=”text/css” href=”test.css”/>
</head>
<body>
<div align=”center” id=”bold”><b>فرم عضویت</b></div>               

<form method=”post”>

                <table border=”0″ align=”center” dir=”rtl” class=”font”>

                               
                                <tr><td>نام کاربری</td><td><input type=”text” id=”username” name=”username”/></td></tr>                              
                                <tr><td>ایمیل</td><td><input type=”email” id=”mail” name=”mail”/></td></tr>                              
                               <tr><td>رمز ورود</td><td><input type=”password” id=”pass” name=”pass”/></td></tr>
                                <tr><td>تکرار رمز</td><td><input type=”password” id=”pass-2″ name=”pass-2″/></td></td></tr>
                                <tr>
                               <td>جنسیت</td>
                               <td>
                                <label>مرد<input type=”radio” id=”gender” name=”gender”/></label>
                                <label>زن<input type=”radio”  id=”gender2″ name=”gender”/></label>
                                </td>
                                </tr><br>
                                <tr>
                                <td>شهر</td>
                                <td>
                                <select id=”sel”>
                                                <option value=”0″>لطفا شهر خود را انتخاب کنید</option>
                                                <option value=”1″>تهران</option>
                                                <option value=”2″>یزد</option>
                                                <option value=”3″>اصفهان</option>
                                </select>
                               </td>
                                </tr>
                                <tr>
                                                <td>قوانین</td>
                                                <td><textarea readonly=”readonly”>از جعل هر گونه اطلاعاتی خودداری فرمایید </textarea></td>
                                </tr>
                                <tr>
                                                <td><label>قوانین را قبول دارم<input type=”checkbox”                                                                  id=”check” name=”check”/></label></td>
                                </tr>
                                <tr><td colspan=”2″ align=”center”><input type=”submit” id=”sub”                                                                    name=”sub”  value=”ارسال”/></td></tr>
                </table>
</form>
</body>
</html>

  • روی File در نوار منو بالا دریم ویور کلیک کرده New را انتخاب کنید در پنجره باز شده JavaScript را انتخاب کنید و Create را بزنید.

جاوا اسکریپت-ایجاد فایل javascript

  • بهتر است همین الان آن را ذخیره کنیم. اما کجا؟ بله …همانطور که CSS را در پوشه ای که قبلا ساخته بودیم و فایل php را در آن ذخیره کرده بودیم، الان فایل جاوا اسکریپت هم باید همانجا ذخیره شود.(ما در اینجا نام فایل را javascript قرار دادیم)
  • حالا باید یک لینک در فایل php قرار بدهیم تا فایل جاوا اسکریپت را به فایل php متصل کند.برای اینکار از تگ <script> استفاده می کنیم.

<script type=”text/javascript” language=”javascript” src=”نام فایل جاوا اسکریپت.js”></script>

جاوا اسکریپت -ایجاد لینک به فایل javascript

در ادامه به بررسی اطلاعات وارد شده توسط کاربر می پردازیم:

آیا کاربر نام کاربری را وارد کرده است؟

  • می خواهیم در فرم ثبت نام این شرط را اضافه کنیم که اگر کاربر نام کاربری را وارد نکرده بود ، یک هشدار به کاربر داده شود.

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

function sabtenam(){
                //تعریف متغیر
                var n=document.getElementById(“username”);
//تعریف شرط 
                if(n.value==””)
{
                                alert(“لطفا نام کاربری را وارد کنید”);
                                n.focus();
                                return false;
                }
}

توضیح کدها

ابتدا یک تابع تعریف کردیم به نام sabtenam. سپس یک متغیر به نام n تعریف کردیم و متغیری که id آن username هست را به آن نسبت دادیم. این یعنی هر کار اینجای روی متغیر n انجام بدهیم روی متغیری که در فایل php، آی دی آن usaername هست اعمال می شود.
سپس یک شرط تعریف می کنیم و می گوییم اگر مقدار متغیر n (یعنی username) مساوی خالی بود، هشدار بدهد که “لطفا نام کاربری خود را وارد کنید”. سپس focus اشاره گر روی usename قرار بگیرد. در نهایت مقدار false را برگرداند چون مقداری برای نام کاربری وارد نشده بوده.

  • حالا وارد فایل php خود می شویم و در تگ form خصوصیت onSubmit را برای با مقدار برگشتی تابع sabtenam قرار می دهیم. این یعنی وقتی کاربر روی دکمه submit را کلیک کرد تا اطلاعاتش ارسال شود ، تابع sabtenam چک می شود و اگر مقدار username خالی بود هشدار می دهد.

<form method=”post” onSubmit=”return sabtenam();”>

یک بار برنامه را اجرا می کنیم تا خروجی را با هم ببینم:

جاوا اسکریپت-اجرای برنامه

آیا کاربر ایمیل را درست وارد کرده است؟

اگر بخواهیم کاربر را وادار کنیم تا ایمیل را به فرمت صحیح وارد کند ، ابتدا یک متغیر به نام e تعریف می کنیم و ایمیل (آی دی: mail) را به آن نسبت می دهیم. یک متغیر دیگر با نام دلخواه filter تعریف می کنیم و فرمت استاندارد ایمیل را به آن میدهیم:

 var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

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

تعریف متغیر:

var e=document.getElementById(“mail”);

سپس باید مقدار فیلد ایمیل که توسط کاربر وارد شده با متغیر filter تست شود و اگر مطابق با فرمت تعریف شده در متغیر filter نبود ، هشدار بدهد. به شکل زیر:
تعریف شرط:

else if(!filter.test(e.value)){

                                alert(“ایمیل را درست وارد کنید”);
                               e.focus();
                                return false;
}

نکته: از else if استفاده می کنیم تا اگر بعد از بررسی شرط مربوط به نام کاربری ، این شرط را بررسی کند.

اجرای برنامه:

جاوا اسکریپت - اجرای برنامه

آیا کاربر تکرار رمز را درست وارد کرده است؟

  • حالا می خواهیم شرطی اضافه کنیم که اگر مقدار رمز با تکرار رمز برابر نبود هشدار بدهد. برای این کار ابتدا دو متغیر تعریف می کنیم به نام های p1 و p2. سپس رمز(آی دی:pass) و تکرار رمز(آی دی:pass-2) را به آنها نسبت می دهیم. سپس در دستور شرطی می گوییم اگر مقدار p1 با مقدار p2 برابر نبود هشدار بده:

تعریف متغیرها:

var p1=document.getElementById(“pass”);
var p2=document.getElementById(“pass-2”);

تعریف شرط:

else if (p1.value != p2.value){

                                alert(“رمز درست وارد نشده است”);
                                p1.focus();
return false;      

                }

آیا کاربر جنسیت را وارد کرده است؟

  • اگر جنسیت انتخاب نشده بود چگونه هشدار بدهیم؟ باز دو متغیر به نام های m و f تعریف می کنیم و جنسیت مرد(آی دی:gender) و زن (آی دی: gender2) را به آن نسبت می دهیم. سپس در دستور شرطی if می گوییم اگر m چک نخورده بود و f هم چک نخورده بود هشدار بده:
    تعریف متغیر:

var m=document.getElementById(“gender”);
var f=document.getElementById(“gender2”);

       تعریف شرط:

else if(!m.checked && !f.checked){

                                alert(“جنسیت را انتخاب کنید”);
                                m.focus();
return false;      

                }

آیا کاربر شهر را از لیست کشویی کرده است؟

در فایل php برای انتخاب شهر یک تگ select تعریف کردیم  و داخل آن تگ های option نوشتیم و هر شهری را داخل هر option تعریف کردیم.به این صورت یک لیست کشویی شامل شهرها ایجاد شد. سپس برای هر option یک خصوصیت value تعریف کردیم و برای option مربوط به مقدار “لطفا شهر خود را انتخاب کنید” value را صفر قرار دادیم.بنابراین در جاوا اسکریپت بعد از تعریف متغیر در قسمت شرط می گوییم اگر مقدار select برابر با صفر است یعنی شهری انتخاب نشده بنابراین هشدار بده:

تعریف متغیر:

var sh=document.getElementById(“sel”);

تعریف شرط:

else if(sh.value==”0″){

                                alert(“شهر را وارد کنید”);
                                sh.focus();
                                return false;                               

                }

آیا کاربر تیک قوانین را قبول دارم را زده است؟

برای اینکه متوجه شویم checkbox مربوط به “قوانین را قبول دارم” تیک خورده است یا خیر، یکی متغیر تعریف میکنیم و id مربوط به چک باکس(check) را به آن نسبت می دهیم و سپس در شرط می گوییم اگر تیک نخورده بود هشدار بده.
تعریف متغیر:

var c=document.getElementById(“check”);

تعریف شرط:

 

ارتباط بین css و جاوا اسکریپت

حتما تا به حال در فرم های ثبت نام اینترنتی دیده اید که اگر فیلدی را وارد نکنید یا اشتباه وارد کنید به جای اینکه پیغام بدهد یک ستاره قرمز رنگ کنار آن فیلد ظاهر می شود.
در اینجا می خواهیم یک نمونه از این مورد را کار کنیم. در مورد نام کاربری ،اگر کاربر وارد نکرده بود به جای هشدار یک ستاره قرمز رنگ کنار کادر ظاهر شود. ابتدا در فایل php یک ستون به ردیف نام کاربری اضافه می کنیم و در آن یک ستاره قرار می دهیم به شکل زیر:

<tr><td>نام کاربری</td><td><input type=”text” id=”username” name=”username”/></td><td>*</td></tr>

قبلا گفتیم که برای مدیریت ظاهر سایت از css استفاده می کنیم و می توانیم به سه روش استایل دهی انجام بدهیم. (آموزش جلسه قبل)  در اینجا از id برای دادن استایل به فرم استفاده می کنیم. یک id با نام star در فایل  css. می سازیم :

.star{
                color: red;
               display: none;
}

همانطور که می بینید این استایل رنگ را قرمز تعیین می کند و با display مشخص می کند که المنتی که این id به آن داده می شود،چطور نمایش داده شود:

  • اگر برابر با none باشد یعنی نمایش نده
  • اگر برابر با block باشد یعنی نمایش بده

حالا آی دی  star را به ستونی که ستاره در آن است می دهیم:

<tr><td>نام کاربری</td><td><input type=”text” id=”username” name=”username”/></td><td id=”star”>*</td></tr>

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

حالا در فایل جاوا اسکریپت، در قسمت شرط مربوط به نام کاربری، می گوییم اگر نام کاربری وارد نشده بود به جای هشدار دادن(alert) ستاره ظاهر شود:

if(n.value == “”){

                                s.style.display=”block”;
                                n.focus();
                                return false;                      

                }

با دستور موجو در if  به خصوصیت display موجود در css اشاره می شود که مقدارش به block تغییر یابد و ستاره نمایش داده شود.

جاوا اسکریپت

به صورت کلی کدهای جاوا اسکریپت به صورت زیر هستند:

function sabtenam(){
//تعریف متغیرها
var n=document.getElementById(“username”);
var e=document.getElementById(“mail”);
var p1=document.getElementById(“pass”);
var p2=document.getElementById(“pass-2”);
var m=document.getElementById(“gender”);
var f=document.getElementById(“gender2”);
var s=document.getElementById(“star”);
var sh=document.getElementById(“sel”);
var c=document.getElementById(“check”);

//تعریف اعتبار سنجی برای ایمیل
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

// تعریف شرط ها

//شرط برای نام کاربری
if(n.value == “”){
s.style.display=”block”;
n.focus();
return false;
}
//شرط برای ایمیل
else if(!filter.test(e.value)){
alert(“ایمیل را درست وارد کنید”);
e.focus();
return false;
}
//شرط برای پسورد
else if(p1.value != p2.value){
alert(“رمز درست وارد نشده است”);
p1.focus();
return false;
}
//شرط برای جنسیت
else if(!m.checked && !f.checked){
alert(“جنسیت را انتخاب کنید”);
m.focus();
return false;
}
//شرط برای انتخاب شهر
else if(sh.value==”0″){
alert(“شهر را وارد کنید”);
sh.focus();
return false;
}
//شرط برای چک کردن قوانین
else if(!c.checked){
alert(“قوانین را بخوانید”);
c.focus();
return false;

}
}

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

مدرسمدرس: مهندس مهدی نیکخواه

به این مقاله چند تا ستاره میدی؟
[تعداد رای: 11 امتیاز: 4.5]