پلاگین jquery validation

29 08 2009

با استفاده از پلاگین validation شما می توانید به راحتی فورم هایتان را چک کنید. یعنی لازم نیست کاربر فورم را پر کند سپس بر روی submit کلیک کند و کمی صبر کند و با پیغامی شبیه » لطفا یک ایمیل صحیح وارد کنید » رو به رو شود.

برای شروع ابتدا پلاگین را از اینجا دانلود کنید

به مثال زیر توجه کنید:
ابتدا در هدر سایت jquery و سپس jquery validator را لود کنید(توجه کنید که حتما باید اول jquery لود شود و سپس پلاگین:

<script type="text/javascript" src="PATH TO JQUERY"></script>
<script type="text/javascript" src="PATH TO VALIDATE PLUGIN"></script>

یک فرم html ساده برای مثال ورود به سیستم آماده می کنیم:

<form id="myForm"> email: <input name="email" type="text" />
password: <input name="password" type="password" />
<input type="submit" value="submit" />
</form>

حالا با jquery فورم رو انتخاب کرده و برای اون تعیین می کنیم هر فیلدی چه خصوصیاتی داشته باشه:

<script type="text/javascript">
$("#myForm").validate({
rules:{
email:{
required:true,
email:true
},
password:{
required:true,
minlength:5,
maxlength:20
}
}
})
</script>

به کد بالا دقت کنید ابتدا فورم را انتخاب کرده ایم و سپس تابع validate را روی آن اعمال می کنیم. به عنوان آرگومان یک کلاس را برای آن ارسال می کنیم . که در خصیصه ی rules نام هر input را قرار می دهیم و در آن خصوصیات هر input را معرفی می کنیم. در اینجا از خصوصیات بسیار ساده ی پلاگین استفاده کرده ایم . برای  مشاهده ی خصوصیات بیشتر به اینجا مراجعه کنید.

دیدید چه سادست؟؟ با این پلاگین دیگه لازم نیست دونه دونه بشینین اینپوت ها رو چک کنین !!

Advertisements




debug کردن جاوا اسکریپت توسط firebug

11 02 2009

firebug ابزار بسیار قدرت مندی برای طراحان وب می باشد. به طوری در عصر حاضر هیچ کس حاضر نیست بدون آن به طراحی وب مشغول شود.

یکی از ابزار هایی که firebug در اختیار ما می گذارد debug کردن javascript می باشد.

جاوا اسکریپت کار ها بدون استفاده از چنین ابزار هایی برای debug کردن کد خود باید در حین برنامه از alert استفاده کنند(حداقل خود من قبل از کار با firebug همین کار رو می کردم!! هی هی هی عجب روزگاری بود!!)

برای debug کردن . firebug شی ای را در اختیارتان قرار می دهد که می توانید در کدتان استفاده کنید.!‌ مثلا با قرار دادن console.log(var1); در داخل کدتان هنگام اجرای برنامه مقدار متغیر var1 در console فایر باگ چاپ می شود. console.dir(obj) شی obj را به صورت درختی در console چاپ می کند.

console.time(«message start») را در اول کد دل خواهتان قرار دهید و سپس console.timeEnd(«message end») را در آخر کدتان قرار دهید!! مثلا اول و آخر یک تابع قرار دهدید. بعد از اجرا زمان پردازش را در console چاپ می کند. از console.profile() در ابتدای کد و از console.profileEnd() در آخر کد استفاده کنید تا تمامی اتفاق هایی که در این هنگام افتاده است را گزارش کند.

حتی می توانید از console.dir(OBJ) برای نشان دادن تمامی اطلاعات و اعضای شی OBJ استفاده کنید.

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

ابزار های دیگری نیز در اختیار شما قرار می دهد.

در پنجره ی فایر باگ در تب console در پایین یک console ای وجود دارد که در آن هر دستوری (از زبان javascript) را که وارد کنید برایتان پردازش می کند. مثلا با اجرای دستور زیر مقدار یک تگ را چاپ می کند:

document.getElementById(«tagname»).innerHTML;

از دیگر امکانات آن می توان breakpoint را نام برد. در تب script در کنار هر خط از دستور ها که می خواهید debug را انجام دهید یا فکر می کنید اشکال برنامه در انجاست کلیک کنید تا دایره ای روشن شود.(همانند شکل رو به رو) و صفحه را refresh firebugsmallکنید. پس از refresh کردن برنامه تا آنجایی که breakpint گذاشته اید پردازش را انجام می دهد و سپس exit می کند ! در سمت راست exception ها و سایر اطلاعات این خط را نشان می دهد.

firebug1

از محمد قیومی به خاطر راهنمایی من در این زمینه کمال تشکر را دارم.





چند نکته در جاوا اسکریپت

12 12 2008

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

۱. هرگز نام متغیر هاتون رو یکسان با نام آی دی المان در صفحه قرار ندهید . فرض کنید در صفحه تون المانی دارید که id اون هست testing1 دقت کنید که در کد جاوا اسکریتتون هرگز از متغیر testing1 استفاده نکنید یا حتی آن را تعریف نکنید . چون در اینترنت اکسپلورر به آن ایراد می گیره !! و هیچ ارور مشخصی هم نمیده . در نتیجه مجبور میشید ساعت ها در کدتان بگردید تا به خطایتان پی ببرید.

۲. شی گرای جاوا اسکریپت را هیچ گاه فراموش نکنید. همیشه اطلاعات موقت را در شی ذخیره کنید و هیچ گاه اطلاعات را به طور موقت درون input ها ذخیره نکنید (کاری که من خیلی می کردم و اصلا نتایج خوبی نداشت -باعث شلوغ شدن کد می شد)

۳. سعی کنید همیشه کدتان به کمترین حجم ممکن برسد چون جاوا اسکرپت در کلاینت پردازش می شود در نتیجه بهتره حجم آن کم باشد. پیشنهاد می کنم از yui compressor استفاده کنید.

۴. از فریم ورک ها و کتابخانه هایی نظیر prototype و JQuery و … استفاده کنید تا حجم کدتان کم شود و خودتان راحت تر برنامه بنویسید. من قبلا هم بر این عقیده بودم که فریم ورک ها اصلا به درد نمی خورن و خودم برنامه رو می نوشتم ولی بعد از مدتی فهمیدم فریم ورک ها عجب نعمت هایی هستند.





فشرده سازی فایل های جاوااسکریپت و css

20 11 2008

آیا تا به حال به این فکر کرده اید که چگونه می توان فایل های جاوا اسکریپت را کم حجم کرد؟؟ چگونه کامنت ها و خط های اضافی را حدف کرد؟؟

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

توسط ابزاری به نام YUI compressor که شرکت یاهو آن را تولید کرده است می توانید این کار را انجام بدهید.

برای دانلود  برنامه و اطلاعات بیشتر به  این آدرس بروید: http://developer.yahoo.com/yui/compressor/

می توانید از ابزاری آنلاین ( که از yui compressor استفاده شده است) نیز این کار را انجام دهید:  http://refresh-sf.com/yui/