آموزش طراحی وب سایت (آموزش JQuery – قسمت اول)

چهارشنبه, ۲۸ام مرداد , ۱۳۸۸ | ۲۹ دیدگاه

اگر به شغل شریف طراحی و یا برنامه نویسی وب مشغول هستید یا در حال یاد گرفتن بوده و در آینده نزدیک میخواهید به این گروه عظیم پیوست بخورید (:دی) حتما اسم جاوا اسکریپت (JavaScript) رو شنیده اید. پس فرض رو بر این میگیریم که میدونیم جاوا اسکریپت چی هست و به  چه کاری میاد و دیگه توضیحی در اون مورد نمیدم.

jQuery به زبان خیلی ساده، مجموعه ای از دستورات و توابعی هست که با جاوا اسکریپت نوشته شده و داخل یک فایل قرار گرفته شده. حالا به چه دردی میخوره؟
استفاده از این کتابخونه (Library) از پیش ساخته شده به ما کمک میکنه تا در استفاده از جاوا اسکریپت، خیلی کار ها رو خیلی ساده تر از قبل انجام بدیم، کدهای تکراری ننویسیم و قابلیتEvent Handling (یعنی کنترل رویدادها مثل  کلیک شدن یک دکمه)  و انیمیشن در صفحه به سادگی در اختیار ما قرار بگیره و یکی از موارد اصلی کاربرد اون، ارتباط بسیار ساده و سریع با اجرا صفحه (DOM) هست و البته یکی از قابلیت های مهم وب سایت های امروزی یعنی AJAX ، تنها با چند خط نوشتن کد توسط ما انجام پذیر هست و بقیه کارها در پشت صحنه توسط کتابخونهjQuery انجام میشه.

jQuery کاملا رایگان میباشد و قابل دریافت از سایت خودش یعنی : http://jQuery.com
اما چون قسمت کد سایت گوگل (code.google.com) چشم دیدن ما ایرانی ها رو نداره،  اگر از اونجا نتونستید فایل رو دانلود کنید، میتونین از لینک زیر، فایل اصلی و در واقع همون کتابخونهjQuery رو دانلود کنید:
jQuery Version 1.3.2 (بهتره رایت کلیک کنید و “سیو تارگت از” رو انتخاب کنید :دی)
بعد از دانلود، فایل رو باید unzip کنید تا برسید به یک فایل با پسوند js که در واقع همون فایل اصلی کتابخونه jQuery هست.

خوب حالا یک قدم پیشرفت کردیم. یه مقداری فهمیدیم jQuery چیه و فایل کتابخونه رو هم حالا روی کامپیوتر خودمون داریم. مرحله بعد استفاده از این فایل و چند تا مثال کوچک  میباشد.

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

<script type=”text/javascript” src=”jQuery1.3.2.js”></script>

و حتما باز هم میدونید که این کد رو باید در قسمت <head> قرار بدید  و در بخش src باید آدرس فایل jQuery رو داد.

بسیار خوب، حالا ما کتابخونه رو نصب کردیم و میتونیم از قابلیت هاش استفاده کنیم. اما قبل از مثال ها، ممکنه این سوال پیش بیاد که وجود این فایل، حجم صفحه رو سنگین نمیکنه ؟ خوب این فایل حدودا ۶۰kb حجم داره و نمیشه گفت حجم زیادیه، مخصوصا  در این زمان که حتی سرعت های بالاتر از ۱۲۸kb، سرعتهای معمول و استاندارد  در اینترنت شناخته شده اند. البته در کشور ما، هنوز خیلی از دوستان هستند که از خطوط ۵۶K استفاده میکنند. اما خوب نکته اینجاست، که این فایل فقط یک بار، بار اولی که صفحه دیده میشه، روی هارددیسک بازدیدکننده دانلود میشه و در دفعات بعدی که از سایت شما بازدید میشه، این فایل از روی  هارد دیسک بازدیدکننده فراخونی میشه ( یعنی همون Cache )  و در کل شاید ۲ تا ۳ ثانیه سرعت لود شدن سایت شما در دفعه اول پایین بیاد که میشه از اون چشم پوشی کرد و البته همونطور که گفتم در سرعتهای بالا که این حجم فایل اصلا چیزی نیست که قابل بحث باشه، و حجم این کتابخونه، به هیچ وجه از نکات منفی اون به حساب نمیاد!

خوب بریم سر قسمت مثال ها. اول از همه باید ببینیم که چجوری میشه jQuery رو صدا زد تا بیاد و کار ما رو انجام بده.
بعد از تگ body باید یک تگ script باز کنید و به صورت زیر عمل کنید:

<script type=”text/javascript”>
$(document).ready(function() {
//کدهای شما در اینجا
});
</script>

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

خوب، این تا اینجا. اما جریان اون علامت $ چیه ؟  علامت $ در کد jQuery به مفهوم استفاده از اجزا صفحه در دستورات هست.  مثلا برای دسترسی به تگ لینک که <a> هست میگیم:  (“a”)

و در ادامه کد هم گفتیم که وقتی صفحه ما آماده شد. function رو اجرا کن. که کدهای مربوطه رو داخل اون مینویسیم.
در مثال زیر، بعد از document.ready میایم و تگ a رو فراخونی میکنیم و رویداد کلیک رو براش کد مینویسیم. خیلی راحته نه؟
نکته ای که بهش باید دقت کنید باز و بسته کردن پرانتز ها () و آکولاد {} هاست. قاطی نکنید با هم.
نکته دیگه ای که باید بهش توجه بشه اینه که در تگ لینک a ما هیچ کد جاوا اسکریپتی مثلonclick = function ننوشتیم و این در واقع قدرت jQuery هست که میتونه به صورت مستقیم با اجزا صفحه در ارتباط باشه.

مثال زیر رو ببینید و بعدش منتظر باشید تا قسمت های بعدی..
البته سایت jquery.com در زمینه آموزش فوق العاده کامل و غنی هست، میتونین از اونجا کلی چیز میز یاد بگیرید :دی

<html>
<head><title>jQuery</title>
<script type=”text/javascript” src=”jQuery1.3.2.js”></script>
</head>
<body>

<script type=”text/javascript”>
$(document).ready(function(){

$(“a”).click(function(){
alert(“Helo World”);
});

});

</script>
<a href=”#”>Click me!</a>
</body>
</html>

بر گرفته از وب سایت    mytoolbox.ir

Be Sociable, Share!


۲۹ دیدگاه


  1. بهزاد
    ۱ شهریور ۱۳۸۸

    سلام کامران جان
    درسته که jQuery میتونه خیلی کارو راحت کنه و در وب سایت های کوچک کارساز و مفید باشه ولی تو وب سایت های بزرک که حتی ۱ کیلو هم ارزش داره،اون موقع لود کردن هسته jQuery خیلی زیاد حساب میشه!
    ولی خوب تو وب سایت های کوچک خیلی مفید




  2. کامران
    ۱ شهریور ۱۳۸۸

    بهزاد جان این مطلب و امیر جان نوشته :ی
    نمیدونم چرا به من میگی :d
    اما تو هر وب سایتی و با هر عظمتی اگر لازم بدونن و بدنن که استفاده از jQuery کاری رو ساده تر و یا قشنگتر میکنه این ریسک رو میکنن. در هر صورت ممنون از نکته ای که گوشزد کردی




  3. پیمان
    ۲ شهریور ۱۳۸۸

    میشه ساخت منوی باز شو عمودی رو با استفاده از jquery آموزش بدید لطفا؟




  4. امیر
    ۲ شهریور ۱۳۸۸

    خواهش میکنم؟ممنون از نظرات.
    در قسمت بعدی خودآموزهای JQuery این مطلب رو می زارم.




  5. مرتضی
    ۷ شهریور ۱۳۸۸

    جالب بود.
    میشه نحوه دسترسی ( انتخاب ) Button ها رو شرح بدید.
    مرسی




  6. محمدرضا
    ۱۱ شهریور ۱۳۸۸

    @بهزاد
    خیلی از سایت های بزرگ هم اکنون دارن از این مدل کتابخونه ها استفاده میکنن
    و البته اونها از تکنیک هایی استفاده میکنن که دانلود شدن این کتابخونه روی سیستم شما به کمترین زمان ممکن کاهش پیدا کنه




  7. امیر
    ۱۱ شهریور ۱۳۸۸

    ممنون محمدرضا جان.البته صاحب اصلی این پست شمایی.منتظر قسمت های بعدی این خودآموز هستسم.




  8. بهزاد
    ۱۱ شهریور ۱۳۸۸

    بله همینطوره که محمد رضا میگه راههایی وجود داره .ولی!
    کسی میتونه که توانایی ویرایش هسته رو داشته باشه و اونهایی رو که نیاز نیست رو حذف کند . تنها راهش اینه نه این که خودمونو مجبور به استفاده از تکنیک برای کاهش حجم کنیم. اون راه آخره.
    من مخالف jQuery نیستم .فقط نباید هرجا استفاده کرد.
    در آخر هم از امیر تشکر میکنم که برای سایت زحمت میکشند.




  9. امیر
    ۱۲ شهریور ۱۳۸۸

    از شما هم ممنونم بهزاد جان. نظر لطفته.




  10. جواد
    ۱۹ مهر ۱۳۸۸

    خیلی خوب بود. با تشکر




  11. مهدی
    ۸ آبان ۱۳۸۸

    اگر امکان داره منوی عمودی را آموزش بدید ، ممنون




  12. Qty
    ۲ دی ۱۳۸۸

    لطفا نحوه دستیابی به intelicence را هم بگویید و اینکه در صفحه master چگونه است یعنی به عناصر master page دستیابی بیدا کنیم و ازjquery استفاده کنیم




  13. soha
    ۲۱ اردیبهشت ۱۳۸۹

    سلام
    واقعا خسته نباشید.
    از آموزش های jquery استفاده کردم عالی بودن. ممنون
    ولی تا روز نهم بیشتر نبود!!!!!!!!!!!!!!!!!!!!!!!
    ۶تا دیگشو از کجا بخونم؟؟؟؟




  14. mostapha
    ۱۸ تیر ۱۳۸۹

    مرسی




  15. سوسن
    ۲۴ مرداد ۱۳۸۹

    خیلی خوب بود چون با بیانی ساده و روان توضیح دادید کاملا قابل فهمه
    امیدوارم ادامه داشته باشه




  16. zashesh
    ۳۱ مرداد ۱۳۸۹

    سلام من می خوام به وسیله ی jqdrag-dropرو یاد بگیرم لطف کن این اموزش رو هم بزار

    سایت فوتبال ۳ نمونه خوبی هست




  17. .M.N.Z
    ۵ آذر ۱۳۸۹

    سبک کردن هسته ی JQuery کار ساده ایه و بهترین روش برای کاهش حجم در هستست.
    فقط قسمت هایی رو که نیاز ندارید پاک کنید.




  18. soha
    ۷ آذر ۱۳۸۹

    باسلام
    میشه خواهش کنم zoom in و zomm out روی تصویر رو آموزش بدید. ممنون




  19. محمدرضا
    ۱۸ آذر ۱۳۸۹

    سلام من iScript رو دانلود کردم جالب بود یک سری توایع پر کردبرد توش وجود داره




  20. omid
    ۲۶ بهمن ۱۳۸۹

    mer30




  21. tzb
    ۱۱ فروردین ۱۳۹۰

    ممنون از شما دوست عزیز
    فقط من قسمتهای بعدی آموزش رو نمی بینم!
    ادامه ندادین ؟




  22. بهزاد
    ۲۵ تیر ۱۳۹۰

    مرسی




  23. amir
    ۹ مرداد ۱۳۹۰

    مرسی , مختصر مفید




  24. morteza
    ۱۷ مرداد ۱۳۹۰

    دمت گرم دوست عزیز مطالب سایت خیلی کاربردی من که حال کردم باهاشون.
    برام خیلی خیلی مفید بود!




  25. niloo
    ۱۷ مرداد ۱۳۹۰

    یه سوال
    اگه تو یه مرورگر اومده باشن و javascript رو غیر فعال کرده باشن چیزهای که با jquery نوشتیم رو هم نشون نمی ده درسته؟




  26. حامد
    ۲۹ مرداد ۱۳۹۰

    سلام
    دوست عزیز مطلب جالبی بود.
    سپاسگذارم




  27. ملیحه
    ۲۷ مهر ۱۳۹۰

    سوال من خیلی خنده داره من نمیدونم کدهای javascriptرو باید توی چه محیطی بنویسم میشه راهنمایی کنید
    از مطالبتون در jqueryخیلی استفاده کردم ممنونم




  28. yamin
    ۲۸ فروردین ۱۳۹۱

    سلام من دارم سیمفونی کار میکنم و به شدت به jquery احتیاج داشتم
    توضیحاتتون خیلی مفید بود
    مرسی 🙂



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