همانطور که در HTML با استفاده از <!.. ..> و در CSS با /* */ کامنتهای خود را گذاشتیم، میتوانیم در فایل JavaScript خود نیز این کار را انجام دهیم؛ در اینجا میتوانیم یادداشتهای خود را با عبارت // آغاز کنیم (همانطور که در کد بالا مشاهده کردید)، اگر هم میخواهید چندین کامنت را در داکیومنت .js خود ثبت کنید میتوانید از /* */ استفاده کنید.
در ادامه به سراغ ورودیهای فرم خود رفته و به هر کدام از آنها یک مقدار پیشفرض میدهیم. بیایید با فیلد نام کار خود را شروع کنیم:
$("#contactname").val("Please enter your full name");
توجه داشته باشید که این فیلد به وسیله مقدار id خود رفرنس شده (#contactname)
و مقداری که میخواهیم به آن بدهیم درون پرانتز و بین علامتهای نقل قول قرار گرفته است. این خط را دقیقا مانند آنچه به شما نشان دادیم بنویسید و آن را درون
$(document).ready(function(){ });
قرار دهید.
حالا فایل را ذخیره کرده و مرورگر خود را رفرش نمایید؛ خواهید دید که فیلد اول فرم ما از متن راهنمایی که برای آن در نظر گرفتیم برخوردار شده است (عکس 11.4).
عکس 11.4: فرم ما با متون راهنمای پیشفرض بارگذاری شده است
حالا میتوانیم به تمامی فرم خود متنهای راهنمای پیشفرض اضافه کنیم:
$(document).ready(function(){
$("#contactname").val("Please enter your full name");
$("#telephone").val("Incl local dialling code");
$("#eventdate").val("Format DDMMYYYY");
$("#details").val("The more you can enter here, the less we have
to check with you :)");
});
فایل common.js را ذخیره کرده و صفحه contact us را رفرش کنید. بررسی کنید که تمامی فیلدهای فرم سایت از متنهای راهنما برخوردار شده باشند (نتیجه کار را در عکس 11.5 مشاهده نمایید).
عکس 11.5: اضافه کردن متن راهنما برای کمکرسانی به کاربر در پر کردن فرم
تغییر جدید با تمام ویژگیهای خوبی که به فرم ما اضافه میکند تعدادی نکته منفی هم دارد: برای وارد کردن اطلاعات در هر یک از فیلدها، کاربر باید متن پیشفرض را حذف کرده و یا آن را مارک کرده، با مشخصات خود جایگزین نماید؛ با اضافه کردن کدهای زیر این مشکل را برطرف خواهیم کرد:
$(document).ready(function(){
$("#contactname").val("Please enter your full name");
$("#telephone").val("Incl local dialling code");
$("#eventdate").val("Format DDMMYYYY");
$("#details").val("The more you can enter here, the less we have
to check with you :)");
$("input, textarea").focus(function(){
$(this).select();
});
});
با استفاده از دستور $("input, textarea")توانستیم تگهای input و textarea را همزمان انتخاب کنیم. علامت کاما دقیقا همان نقشی را ایفا میکند که پیشتر در انتخابکنندههای CSS دیده بودیم؛ کاما به معنی "یا" میباشد.
حال زمانی که کاربر بر روی هرکدام از فیلدها کلیک میکند متن پیشفرض درون آنها به طور خودکار مارک شده و کاربر میتواند به راحتی آن را حذف کرده و یا متن خود را جایگزین آن نماید (عکس 11.6).
عکس 11.6: با استفاده از jQuery میتوان به راحتی متن مورد نظر را با متن راهنما جایگزین کرد
اگر در این بخش ایرادی در کد شما به وجود آمده و به نتیجه مورد نظر خود نرسیدید نگران نباشید، توجه کنید که JavaScript نسبت به HTML و CSS سختگیرتر است.
