TAHA
10-29-2009, 10:28 AM
در بخش قبل jQuery را معرفی کردیم و توضیحاتی در مورد اینکه چرا در کار های خود jQuery را انتخاب می کنیم نیز ارائه کردیم.اما بگذارید تا توضیحات بیشتری درباره خاصیت های جاوااسکیپت و jQuery بدهیم.
شاید بعضی از شما روز های بد طراحان وب را که قبل از ارائه Css وجود داشت ، به خاطر بیاورید ، زمانی که طراحان مجبور بودند فرم دهی های لازم عناصر صفحه را در خود بدنه صفحه HTML مورد نظرایجاد کنند.
هر کسی که یک صفحه وب را با صرف وقتی زیاد از طرق روشی که به آن اشاره شد طراحی کرده باشد با یک صفحه وب که با صرف وقتی کمتر و فرم دهی با استفاده از Css آن را طراحی باشد ، مقایسه کند می تواند به خوبی تفاوت طراحی در روش استفاده از Css را درک کند. اضافه شدن Css به ابزارهای توسعه دهنده وب طراحان را قادر ساخت تا فرم دهی های لازم در طراحی یک صفحه وب را از ساختار صفحه جدا کنند و استفاده از برخی از تگ های HTML نظیر <font> را کاملا محدود کند.
البته فقط جدا سازی روش های فرم دهی به عناصر یک صفحه از ساختار آن باعث آسانتر ساختن مدیریت آن صفحه برای طراحان وب نشد ، بلکه این قدرت را به طراحان وب داد تا طراحی و فرم دهی یک صفحه را با تغییر دادن فایل Css مربوطه و یا افزودن فایلی دیگر به کلی تغییر دهند و صفحه مورد نظر خود را به شکلی دیگر در کوتاهترین زمان ممکن نمایش دهند.
امروزه تعداد کمی از طراحان وب به صورت عمدی از روش های منسوخ و قدیمی استفاده از فرم دهی عناصر در بدنه صفحه HTML استفاده می کنند ولی هنوز هم استفاده از روش زیر کاملا رایج و عمومی است.
کد:
<BUTTON>
TYPE="BUTTON"
ONCLICK="DOCUMENT.GETELEMENTBYID('XYZ').STYLE.COLOR='RED';">
کلیک کنید
</BUTTON>
به سادگی می توان دید که نمی توان در فرم دهی به این دکمه به خصوص در عنوان آن از تگ <font> و یا موارد مشابه دیگر استفاده کرد ولی با پیروی از قوائد Css می توان این کار را انجام داد. اما باید به این نکته توجه کرد که در این روش ، فرم دهی های انجام شده با ساختار عنصر دکمه همراه نمی شوند بلکه با رفتار این عنصر با استفاده از دستورات جاوااسکریپت و خاصیت DOM(Document Object Model) در هنگام فشردن این دکمه اجرا می شود. با استفاده از این دستور و هنگام کلیک کردن بر روی این دکمه ، عنصری که با نام xyz در صفحه مشخص شده است ، به رنگ قرمز نمایش داده می شود.
با توجه به دلایلی که در جدا سازی فرم دهی های لازم از بدنه اصلی صفحه HTML ، به آنها اشاره شد ، بسیار سودمند خواهد بود تا رفتار های یک عنصر را نیز از ساختار آن جدا کنیم. این تغییرات را در اصطلاح “جاوااسکریپت نامحسوس” می گویند و سازندگان jQuery توجه زیادی را به این بخش اختصاص داده اند تا کتابخانه ای از دستورات ایجاد کنند و به صاحبان و سازندگان صفحات وب کمک کند تا این جدا سازی را به سادگی در صفحات خود ایجاد و استفاده کنند.
جاوااسکریپت نامحسوس توسط گروهی از دستورات که آن را jQuery هوشمند می نامیم باعث می شود که هر عبارت منطقی جاوااسکریپت و یا وضعیتی که در تگ <body> صفحه HTML جا سازی شده باشد را تحت تاثیر خود قرار دهد ، البته باید توجه کرد که استفاده از هر کدام از صفت های رویدادی یک عنصر مانند (onclick) در یک اسکریپت ، در صورت استفاده در داخل تگ <body> باعث بروز خطا در صفحه ساخته شده می شود.
ممکن است این سوال در ذهن شما ایجاد شود که: “چگونه ممکن است که از رویداد یک عنصر دکمه بدون استفاده از مشخصه onclick استفاده کرد؟”
با استفاده از توضیحاتی که به آن اشاره کردیم ، پاسخ بسیار ساده است ، با ایجاد تغییرات در عنصر دکمه می توان به هدف خود رسید:
کد:
<button type="button" id="testButton">کلیک کنید</button>
البته باید اسکریپتی به بخش <head> صفحه خود نیز وارد کنید:
[
کد:
CODE]<SCRIPT TYPE="TEXT/JAVASCRIPT">
WINDOW.ONLOAD = FUNCTION() {
DOCUMENT.GETELEMENTBYID('TESTBUTTON').ONCLICK = MAKEITRED;
};
FUNCTION MAKEITRED() {
DOCUMENT.GETELEMENTBYID('XYZ').STYLE.COLOR = 'RED';
}
</SCRIPT>
[/CODE]
با اسفاده از این اسکریپت ما در زمان بارگذاری صفحه کنترل تابع ()makeItRed را در اختیار دکمه مورد نظر قرار می دهیم تا در رویداد کلیک دکمه عنصری که در صفحه با نام xyz مشخص شده است را به رنگ قرمز نمایش داده شود. دقت کنید که در این اسکریپت ما ابتدا از وجود عنصر دکمه ای که با نام testButton در صفحه مشخص کرده ایم در هنگام بارگذاری صفحه اطلاع پیدا می کنیم و سپس تابع ()makeItRed را به آن نسبت می دهیم.
اگر این مثال کمی برای شما تازگی داشت ، نگران نباشید ، در بخش های بعدی و با ارائه مثال های دیگر می توانید اطلاعات خوبی در این زمینه کسب کنید ، در آینده شما فرا خواهید گرفت jQuery چگونه به شما کمک خواهد کرد که حتی اسکریپتی که در مثال بالا به آن اشاره شد را کوتاهتر و ساده تر کنید.
ادامه دارد....
منبع:روزنامه جام جم
شاید بعضی از شما روز های بد طراحان وب را که قبل از ارائه Css وجود داشت ، به خاطر بیاورید ، زمانی که طراحان مجبور بودند فرم دهی های لازم عناصر صفحه را در خود بدنه صفحه HTML مورد نظرایجاد کنند.
هر کسی که یک صفحه وب را با صرف وقتی زیاد از طرق روشی که به آن اشاره شد طراحی کرده باشد با یک صفحه وب که با صرف وقتی کمتر و فرم دهی با استفاده از Css آن را طراحی باشد ، مقایسه کند می تواند به خوبی تفاوت طراحی در روش استفاده از Css را درک کند. اضافه شدن Css به ابزارهای توسعه دهنده وب طراحان را قادر ساخت تا فرم دهی های لازم در طراحی یک صفحه وب را از ساختار صفحه جدا کنند و استفاده از برخی از تگ های HTML نظیر <font> را کاملا محدود کند.
البته فقط جدا سازی روش های فرم دهی به عناصر یک صفحه از ساختار آن باعث آسانتر ساختن مدیریت آن صفحه برای طراحان وب نشد ، بلکه این قدرت را به طراحان وب داد تا طراحی و فرم دهی یک صفحه را با تغییر دادن فایل Css مربوطه و یا افزودن فایلی دیگر به کلی تغییر دهند و صفحه مورد نظر خود را به شکلی دیگر در کوتاهترین زمان ممکن نمایش دهند.
امروزه تعداد کمی از طراحان وب به صورت عمدی از روش های منسوخ و قدیمی استفاده از فرم دهی عناصر در بدنه صفحه HTML استفاده می کنند ولی هنوز هم استفاده از روش زیر کاملا رایج و عمومی است.
کد:
<BUTTON>
TYPE="BUTTON"
ONCLICK="DOCUMENT.GETELEMENTBYID('XYZ').STYLE.COLOR='RED';">
کلیک کنید
</BUTTON>
به سادگی می توان دید که نمی توان در فرم دهی به این دکمه به خصوص در عنوان آن از تگ <font> و یا موارد مشابه دیگر استفاده کرد ولی با پیروی از قوائد Css می توان این کار را انجام داد. اما باید به این نکته توجه کرد که در این روش ، فرم دهی های انجام شده با ساختار عنصر دکمه همراه نمی شوند بلکه با رفتار این عنصر با استفاده از دستورات جاوااسکریپت و خاصیت DOM(Document Object Model) در هنگام فشردن این دکمه اجرا می شود. با استفاده از این دستور و هنگام کلیک کردن بر روی این دکمه ، عنصری که با نام xyz در صفحه مشخص شده است ، به رنگ قرمز نمایش داده می شود.
با توجه به دلایلی که در جدا سازی فرم دهی های لازم از بدنه اصلی صفحه HTML ، به آنها اشاره شد ، بسیار سودمند خواهد بود تا رفتار های یک عنصر را نیز از ساختار آن جدا کنیم. این تغییرات را در اصطلاح “جاوااسکریپت نامحسوس” می گویند و سازندگان jQuery توجه زیادی را به این بخش اختصاص داده اند تا کتابخانه ای از دستورات ایجاد کنند و به صاحبان و سازندگان صفحات وب کمک کند تا این جدا سازی را به سادگی در صفحات خود ایجاد و استفاده کنند.
جاوااسکریپت نامحسوس توسط گروهی از دستورات که آن را jQuery هوشمند می نامیم باعث می شود که هر عبارت منطقی جاوااسکریپت و یا وضعیتی که در تگ <body> صفحه HTML جا سازی شده باشد را تحت تاثیر خود قرار دهد ، البته باید توجه کرد که استفاده از هر کدام از صفت های رویدادی یک عنصر مانند (onclick) در یک اسکریپت ، در صورت استفاده در داخل تگ <body> باعث بروز خطا در صفحه ساخته شده می شود.
ممکن است این سوال در ذهن شما ایجاد شود که: “چگونه ممکن است که از رویداد یک عنصر دکمه بدون استفاده از مشخصه onclick استفاده کرد؟”
با استفاده از توضیحاتی که به آن اشاره کردیم ، پاسخ بسیار ساده است ، با ایجاد تغییرات در عنصر دکمه می توان به هدف خود رسید:
کد:
<button type="button" id="testButton">کلیک کنید</button>
البته باید اسکریپتی به بخش <head> صفحه خود نیز وارد کنید:
[
کد:
CODE]<SCRIPT TYPE="TEXT/JAVASCRIPT">
WINDOW.ONLOAD = FUNCTION() {
DOCUMENT.GETELEMENTBYID('TESTBUTTON').ONCLICK = MAKEITRED;
};
FUNCTION MAKEITRED() {
DOCUMENT.GETELEMENTBYID('XYZ').STYLE.COLOR = 'RED';
}
</SCRIPT>
[/CODE]
با اسفاده از این اسکریپت ما در زمان بارگذاری صفحه کنترل تابع ()makeItRed را در اختیار دکمه مورد نظر قرار می دهیم تا در رویداد کلیک دکمه عنصری که در صفحه با نام xyz مشخص شده است را به رنگ قرمز نمایش داده شود. دقت کنید که در این اسکریپت ما ابتدا از وجود عنصر دکمه ای که با نام testButton در صفحه مشخص کرده ایم در هنگام بارگذاری صفحه اطلاع پیدا می کنیم و سپس تابع ()makeItRed را به آن نسبت می دهیم.
اگر این مثال کمی برای شما تازگی داشت ، نگران نباشید ، در بخش های بعدی و با ارائه مثال های دیگر می توانید اطلاعات خوبی در این زمینه کسب کنید ، در آینده شما فرا خواهید گرفت jQuery چگونه به شما کمک خواهد کرد که حتی اسکریپتی که در مثال بالا به آن اشاره شد را کوتاهتر و ساده تر کنید.
ادامه دارد....
منبع:روزنامه جام جم