جاوااسکريپت نامحسوس
در بخش قبل 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> صفحه خود نيز وارد کنيد:
<SCRIPT TYPE="TEXT/JAVASCRIPT">
WINDOW.ONLOAD = FUNCTION() {
DOCUMENT.GETELEMENTBYID('TESTBUTTON').ONCLICK = MAKEITRED;
};
FUNCTION MAKEITRED() {
DOCUMENT.GETELEMENTBYID('XYZ').STYLE.COLOR = 'RED';
}
</SCRIPT> |
با اسفاده از اين اسکريپت ما در زمان بارگذاري صفحه کنترل تابع ()makeItRed را در اختيار دکمه مورد نظر قرار مي دهيم تا در رويداد کليک دکمه عنصري که در صفحه با نام xyz مشخص شده است را به رنگ قرمز نمايش داده شود. دقت کنيد که در اين اسکريپت ما ابتدا از وجود عنصر دکمه اي که با نام testButton در صفحه مشخص کرده ايم در هنگام بارگذاري صفحه اطلاع پيدا مي کنيم و سپس تابع ()makeItRed را به آن نسبت مي دهيم.
اگر اين مثال کمي براي شما تازگي داشت ، نگران نباشيد ، در بخش هاي بعدي و با ارائه مثال هاي ديگر مي توانيد اطلاعات خوبي در اين زمينه کسب کنيد ، در آينده شما فرا خواهيد گرفت jQuery چگونه به شما کمک خواهد کرد که حتي اسکريپتي که در مثال بالا به آن اشاره شد را کوتاهتر و ساده تر کنيد.
ادامه دارد....
منبع:روزنامه جام جم
/خ