آموزش جی کوئری در پانزده روز : روز اول

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

امروز اولین روز از سری ” آموزش جی کوئری در پانزده روز ” در خدمتتون هستم. اگر از روند این سری آموزشی چیزی نمی دانید پیشنهاد می کنم مقدمه ای بر آموزش جی کوئری در پانزده روز را بخوانید.خب همونطور که قول داده بودم شما می توانید دمو ی هر جلسه را ببینید ، کد ها را در یک فایل زیپ دانلود کنید .

امروز چه کار خواهیم کرد :

  1. دریافت فریم ورک جی کوئری
  2. ساختن فایل HTML
  3. قرار دادن فایلHTML  و جی کوئری در یک فولدر
  4. لینک کردن فریم ورک جی کوئری در فایل HTML
  5. ساختن جعبه و ظاهر سازی آن توسط CSS
  6. محو کردن جعبه توسط کد های جی کوئری

مرحلۀ اول دریافت فریم ورک جی کوئری :

برای این کار کافیست به سایت جی کوئری بروید و فریم ورک را دانلود کنید. دقت کنید که برای دانلود دو تا گزینه دارید. PRODUCTION  و DEVELOPMENT تفاوت چندانی با هم ندارند. در آینده سر فرصت تفاوت این دو را برایتان خواهم گفت. ما برای آموزش از نسخۀ پانزده کیلوبایتی PRODUCTION استفاده می کنیم.

نکته : سایت جی کوئری هنگام دانلود شما را به سایت گوگل ( که ایران را تحریم کرده ) لینک می کند و ممکن است شما موفق به دریافت فریم ورک نشوید ، در این صورت آن را از سرور ما دانلود کنید.

مرحلۀ دوم لینک کردن فریم ورک جی کوئری در فایل HTML :

شما می توانید با هر برنامۀ ادیتِ متنی که می خواهید کد ها را ویرایش کنید.   Aptana برنامۀ تخصصی کار با کدهای جاوا اسکریپت است ولی شما می توانید با  Dreamweaverیا  Visual Studio و حتی Notpad کار کنید. پیشنهاد من Dreamweaver است. خب ، شما باید در ابتدا یک فایل با پسوند .htm  بسازید و اسم آن را Index  بگذارید و فریم ورکی که دانلود کردید در فولدری که فایل  Index  هست قرار دهید سپس  کدهای زیر را در فایل Index  وارد کنید :

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

</head>
<body>
</body>
</html>

البته اگر شما از برنامه های ویرایش کد استفاده می کنید هنگام شروع کار با یک فایل HTML تمام کد های بالا به صورت پیش فرض درون فایل شما وجود دارد. برای لینک کردن فریم ورک در فایل Index کافیست کد پایین را زیر تگ قرار دهید.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

مرحلۀ سوم ساختن جعبه :

خب الان قسمت شیرین قضیه شروع میشه. ما قصد داریم یک جعبۀ قرمز بسازیم که محو بشه  ! حتماً می دونید که برای شکل دادن و کلاً ظاهر عناصر هر صفحۀ وب سایت نیاز به کدهایCSS  هست. ما می توانیم کد ها را در یک فایل جدا با پسوند  CSSبنویسم و به فایل Index لینک کنیم یا اینکه در خود فایل Index کد های CSS را قرار دهیم. اینجا به دلیل کم بودن کد ها ما آنها را در فایل Index می نویسیم ولی برای ساختن وب سایت به دلیل حجم زیاد کد های CSS  ، این کار باعث کند شدن سرعت سایت خواهد شد.

برای شروع احتیاج به یک جعبه و یک لینک داریم که وقتی روی آن کلیک می کنیم جعبه حرکت کند :

<div id="box"></div>
<a href="#"> Click Here To Fade out !</a>

و برای قرمز کردن و ابعاد جعبه کد CSS زیر را بین تگ head قرار میدهیم :

<style type="text/css">
#box  }
	height: 320px;
	width: 320px;
	background-color: #F00;
{
</style>

مرحلۀ چهارم محو کردن جعبه :

تا کنون ما یک جعبه با ابعاد ۳۲۰ در ۳۲۰ به رنگ قرمز داریم که زیر آن لینکی هست که نوشته شده Click Here To Fade out ! . چون بحث از حرکت و محو شدن است سراغ جی کوئری و کد های جاوا می رویم. در این مرحله من توضیحات بیشتری خواهم داد چون بحث یاد گرفتن کد های همین مرحله است. کدهای زیر را دقیقاً زیر کدهای بالا قرار دهید :


<script type="text/javascript">

		   $(function() {
		        $('a').click(function() {
				     $('#box').fadeOut(5000);
		        });
		   });
</script>

هم اکنون شما با کلیک بر روی Click Here To Fade out ! میبینید که جعبۀ قرمز در ۵ ثانیه محو می شود.

توضیحات :

  • کد های جاوا اسکریپ با علامت دلار شروع می شوند $ .
  • هر پرانتز یا برکتی که باز می شود باید در انتها بسته شود.
  • کدهای جاوا اسکریپ با نقطه ویرگول تمام می شوند.
  • ما باید کدهایی که با زبان جاوا اسکریپت نوشته می شوند را بین تگ زیر قرار دهیم.
</script><<script type="text/javascript

  • کدهای جی کوئری برای اجرا باید جای X در این کد قرار بگیرند. ( کد زیر )
$(function() { XXXX });

  • کد زیر یعنی اگر روی a کلیک کردم X را اجرا کن.
$('a').click(function() { X });

  • کد زیر نشان می دهد روی چه شیئی چه تابعی در چه بازۀ زمانی انجام شود. یعنی حالا که روی a  کلیک کردم این تابع را اجرا کن. حالا این تابع چیه ؟ تابع   FadeOut را روی شئ#box  اجرا کن در پنج هزار میلی ثانیه که میشه ۵ ثانیه.
$('#box').fadeOut(5000);

  • جی کوئری یک سری کد به صورت تعریف شده دارد که می توانید از آنها در تابع ثانیه استفاده کنید. برای مثال slow , normal , fast . به صورت زیر
$('#box').fadeOut('fast');

  • دقت کنید هنگام استفاده از این توابع زمانی باید آنها را بین ‘ ‘  قرار دهید.
  • توجه داشته باشید کلمۀ fadeout  یک کلمۀ کلیدیست. اگر مثلاً آن را با F بنویسید این function  اجرا نمی شود.

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

Be Sociable, Share!


۵۹ دیدگاه


  1. امین
    ۹ دی ۱۳۸۸

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




  2. کامران
    ۹ دی ۱۳۸۸

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




  3. مجتبي
    ۹ دی ۱۳۸۸

    مثل همیشه عالی بود
    ممنون




  4. Hesam
    ۹ دی ۱۳۸۸

    fadeOut در واقع یک افکت هست ؟ که به کوچک بودن حساس هست




  5. abbas
    ۹ دی ۱۳۸۸

    سلام بر دوستان عزیز

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




  6. مسیح
    ۹ دی ۱۳۸۸

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

    # حسام : منظورت رو نفهمیدم حسام جان. Fadeout یک base Effect هست ، یعنی با این افکت ها و افکت هایی که جلسات بعد می گم تو می تونی یه چیزی مثل اسلاید شو ها رو درست کنی . چیزی که صفحۀ اصلی سایت من میبینی مثلاً.

    # کامران : ممنونم ! یه لطفی کن گوشی یا هو مسنجرت و بردار کار دارم به خدا D:




  7. Mort3ZA
    ۱۰ دی ۱۳۸۸

    خسته‌نباشی برادر مسیح. حتما ادامه بده تا آخرین قطره (؟) گوش میدم
    فقط یه چیزی، توی فید (گوگل ریدر) کدها به هم ریخته، نمیشه درستش کرد که دیگه وارد سایت نشیم؟




  8. کامران
    ۱۰ دی ۱۳۸۸

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




  9. نیما
    ۱۱ دی ۱۳۸۸

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




  10. مسیح
    ۱۱ دی ۱۳۸۸

    # مرتضی : متاسفانه نمیشه. من خودم از گوگل ریدر استفاده می کنم و اصولاً مطالب آموزشی رو می رم تو سایت میبینم. حالا یه هفته یه بار بیا اینجا یه سر به ساید بار هم بزن :دی

    # نیما : ممنون نیما جان. ببین راستش من الان تا جلسۀ پنجم رو آماده کردم. چون روند پست گذاشتن اینجا اصول خاصی داره من هم طیق اون قاعده پست می ذارم. بابا این همه tutrial هست تو وب . اگه وقت آزاد داری برو تو این چند روز اونا رو یاد بگیر به ما هم یاد بده :دی




  11. نیما
    ۱۲ دی ۱۳۸۸

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




  12. حمید
    ۱۳ دی ۱۳۸۸

    واقعا عالی بود.لطف کنید حتما ادامه بدین.من که واقعا با jQuery! حال می کنم.




  13. مسیح
    ۱۴ دی ۱۳۸۸

    # نیما : ایشالا یه روز تو هم یه آموزش مشتی می نویسی برامون …
    # حمید : حتماً ادامه میدم چون منم مثل خودت شدیداً با جی کوئری حال می کنم و جدیداً هر سایتی که می رم جی کوئری چشمم و می گیره سریع . بعد از این آموزش ها کلی افکت برای آموزش دارم که همشون جالب هستن. با ما باش




  14. مهدی
    ۱۶ دی ۱۳۸۸

    من از جی کوئری چیزی نمیدونم اما میخواستم در asp.net 2 با زبان c شارپ یک کدی بنویسم که ۴ سؤال در مقابل ۴ جواب باشه بعدش ما جواب دادن رو با drag&drop انجام بدیم…بهم گفتن با جی کوئری میشه انجام داد میتونید کمکم کنید؟!..




  15. عاطفه
    ۲۸ دی ۱۳۸۸

    سلام، ممنون از آموزش خوبتون
    ممکنه بگید فریم ورک رو از کجا باید دانلود کنیم؟




  16. کامران
    ۲۸ دی ۱۳۸۸

    عاطفه جان اگر سورس رو دانلود کنی داخل فایل زیپ هست این فریم ورک و نامش هم هست : jquery-1.3.2.min



  17. […] اینجا تا افکتهارو کاملا متوجه بشید…..اموزشهایی که مسیح شروع کرده نسبتا خوبه که میتونید از اونجا اشناییتون رو […]




  18. حمید رضا
    ۳ بهمن ۱۳۸۸

    با سلام و خسته نباشید بابت آموزش های عالی.
    در این درس تنها سوالی که برایم پیش آمد متغیر ها بودند. در کد بین تگ جاوا اسکریپ بخش ‘a’ اشاره به هر لینکی در صفحه می کند؟ اگر جواب سوال بله می باشد چگونه می توان تنها برای یک لینک اختصاصی این کار را کرد؟




  19. مسیح
    ۴ بهمن ۱۳۸۸

    # مهدی : راست گفتن ! با جی کوئری خیلی راحت می شه قابلیت drag & drop رو انجام داد و خاصیت شرطی کردن که اگر جواب درست یا غلط بود دستوری اجرا بشه کمی کار می بره . ولی اونم شدنیه و اگر به مشکل خوردین می تونم روش کار کنم. خاصیت درگ هم با دستور کوتاه draggable به راحتی انجام میشه. پیشنهاد می کنم دو لینک پایین رو نگاه کنید :
    .
    http://tinyurl.com/nqx2d2
    .
    http://tinyurl.com/mmhegg
    .
    # حمیدرضا : ممنون از شما که پیگیرید و ممنونم از لطفتون. راجع به سئوالتون ، جواب مثبته . همۀ لینکها در صفحه الان عمل fade out رو انجام میدن. اگر بخوایم این عمل اختصاص به یک لینک خاص داشته باشه کافیه برای لینک یک Id تعریف کنیم به نام BOX و در کد جر کوئری به جای a بنویسیم a#BOX . همین




  20. ارش
    ۱۳ بهمن ۱۳۸۸

    با سلام
    و تشکر از وبسایت پر محتوای شما و مطالب ارزنده و پر بارتون
    من روی سایتم یک منوی جی کوئری دارم که این منوها به سمت پائین باز میشن چپطور میشه کاری کرد که جهت بازشوی منو ها به سمت بالا تغییر کنند
    ممنون میشم کمکم کنید




  21. کامران
    ۱۴ بهمن ۱۳۸۸

    با ایمیل مسیح تماس بگیرید آرش جان




  22. مسیح
    ۱۴ بهمن ۱۳۸۸

    # سلام و علیک
    منم از کامران و تمام مطالب ارزندۀ سایت تشکر می کنم D:
    من تا نبینم نمتونم کمکتون کنم با اطلاعاتی که دادید. از طریق سایتم تماس بگیرید با من




  23. کامران
    ۱۴ بهمن ۱۳۸۸

    آدرس سایت مسیح : masih32.com




  24. محسن
    ۱۵ بهمن ۱۳۸۸

    اگه من بخوام این کد جاوا اسکریپت رو تو یه فایل js جدا بنویسم ، اون وقت باید اون فایل رو توی تگ body فراخوانی کنم یا تگ head
    ؟؟؟؟؟؟؟؟؟؟؟




  25. مسیح
    ۱۵ بهمن ۱۳۸۸

    head



  26. […] آموزش جی کوئری در پانزده روز : روز اول […]




  27. مهسا
    ۱۹ بهمن ۱۳۸۸

    این متنی که نوشتین اشتباهه:
    “کد های جاوا اسکریپ با علامت دلار شروع می شوند $”
    کدهای jQuery با علامت دلار شروع میشن نه کدهای جاوا اسکریپت!




  28. مسیح
    ۱۹ بهمن ۱۳۸۸

    # مهسا : باز هم ممنون از ایرادی که گرفتید. اصلاح می کنم




  29. مهسا
    ۲۰ بهمن ۱۳۸۸

    خواهش می کنم مسیج جان. در کمک به اهداف کسایی که به مرذم وطنم خدمت می کنند دریغ نمی کنم.




  30. Asghar
    ۴ اسفند ۱۳۸۸

    salam masih jan avval bayad bebakhshi ke daram finglish minevisam be khatere ine ke felan be keyboarde farsi dastresi nadaram dovvom ham mikhastam khahesh konam qesmataye dovvom va sevvome amuzesh ro kami vazehtar tozih bedin yani man nafahmidam ke codhaye jquery ro chetor tu file khodam vared konam neveshti zire tag ama kodum tag uno naneveshti badesham man nafahmidam chetor bayad be framework link bedam



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