آموزش طراحی وب سایت (آموزش JQuery – قسمت اول)
منبع ( که البته خودش هم از mytoolbox.ir گرفته)
اگر به شغل شریف طراحی و یا برنامه نویسی وب مشغول هستید یا در حال یاد گرفتن بوده و در آینده نزدیک میخواهید به این گروه عظیم پیوست بخورید (:دی) حتما اسم جاوا اسکریپت (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>
قسمت دوم آموزش در این لینک
نقل قول: آموزش طراحی وب سایت (آموزش JQuery – قسمت اول)
این کد که اجرا نشد البته من JQuery را از خود سایتش دانلود کردم و تو تگ اسکریپت هم نام مورد نظر را درست کردم خودش را هم که داخل فایلی که صفحه HTML داخلش بود کپی کردم به نظرتون مشکل از کجاست
نقل قول: آموزش طراحی وب سایت (آموزش JQuery – قسمت اول)
نقل قول:
نوشته شده توسط
m.soleimani
این کد که اجرا نشد البته من JQuery را از خود سایتش دانلود کردم و تو تگ اسکریپت هم نام مورد نظر را درست کردم خودش را هم که داخل فایلی که صفحه HTML داخلش بود کپی کردم به نظرتون مشکل از کجاست
شاید مشکل از علامت ” باشه که باید با " عوض بشه!
نقل قول: آموزش طراحی وب سایت (آموزش JQuery – قسمت اول)
کد ” از e book بوده.
به " تغییر بدید.
نقل قول: آموزش طراحی وب سایت (آموزش JQuery – قسمت اول)
نقل قول:
نوشته شده توسط
raziee
کد ” از e book بوده.
به " تغییر بدید.
بله مشکل از همین بود و چون من ide خودم را با فونت italic استفاده می‌کردم متوجه این موضوع نشدم در ضمن اگر اون ebook که استفاده می‌کنید مشکل warez نداره همین‌جا برای من آپلود کنید یا لینک بدین اگر هم داره به وسیله پیغام خصوصی به هر حال ممنونم و موفق باشید
نقل قول: آموزش طراحی وب سایت (آموزش JQuery – قسمت اول)
نقل قول:
اگر اون ebook که استفاده می‌کنید مشکل warez نداره همین‌جا برای من آپلود کنید یا لینک بدین اگر هم داره به وسیله پیغام خصوصی
دوست من ، این مقاله رو من ننوشتم. منبع رو که ذکر کردم:
1 ضمیمه
نقل قول: آموزش طراحی وب سایت (آموزش JQuery – قسمت اول)
نمونه رو هم میتونید دانلود کنید.
نقل قول: آموزش طراحی وب سایت (آموزش JQuery – قسمت اول)
برای چی توی فایر فاکس کار نمی کنه؟
نقل قول: آموزش طراحی وب سایت (آموزش JQuery – قسمت اول)
نقل قول:
برای چی توی فایر فاکس کار نمی کنه؟
مطمئنید؟
چون هم خودم امتحان کردم هم اینکه در سایت jquery.com نوشته که ff رو هم ساپورت میکنه.
به هر حال دوباره تست کردم.
مشکلی نداره!
نقل قول: آموزش طراحی وب سایت (آموزش JQuery – قسمت اول)
با سلام لینکی که برای آموزش ویدویی گذاشتید هیج کدام قابل مشاهده و دریافت نمی باشد اگه لطف کنید این ویدو ها رو از طریق دیگری که قابل دریافت باشند در دسترس بگذارید بی نهایت سپاسگزار خواهم بود آدرس ایمیل اینجانب نیز :
BBDD1376@Gmail.com
نقل قول: آموزش طراحی وب سایت (آموزش JQuery – قسمت اول)
