آشنایی با جاوا اسکریپت و آژاکس

۱- جاوا اسکریپت JavaScript
شاید در این دوره شما نیازی به درگیر شدن جاوا اسکریپت و نحوه استفاده از آن نداشته باشید. برای همین به ذکر پاره ای کلیات در مورد این زبان کارآمد وب می پردازیم تا اگر روزی خواستید از برخی فرم ها و برنامه های آماده آن استفاده کنید، دچار سردرگمی نشوید.

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

نکته: توجه داشته باشید که زبان جاوا اسکریپت به کلی متفاوت از زبان جاوا بوده و تفاوت ماهوی با آن دارد. بنابراین هیچ وقت از کلمه «جاوا» به جای «جاوا اسکریپت» استفاده نکنید. این دو ارتباطی با همدیگر ندارند!

 

برخی کاربردهای جاوا اسکریپت

• شناسایی مرورگر: با استفاده از جاوا اسکریپت می توانید نوع مرورگر بیننده سایت تان را تشخیص دهید. سپس صفحات ویژه ای که برای آن مرورگر طراحی شده اند را برای وی به نمایش بگذارید.
• کوکی ها: هنگامی که کاربر به سایت شما مراجعه می کند، می توانید اطلاعات مورد نیاز را بر روی کامپیوتر وی ذخیره کنید تا در مراجعات بعدی وی به سایت، از آنها استفاده کنید.
• کنترل مرورگر ها: می توانید باز شدن پنجره های جدید مرورگر و اینکه دارای چه اجزایی را باشد، کنترل کنید.
• تایید اعتبار فرم ها: برای کاهش ترافیک سایت و راحتی بیشتر کاربران، می توانید صحت اطلاعات ورودی در هر کادر را قبل از ارسال آنها به سرور و پاسخ گویی آن، در مرورگر و روی کامپیوتر کاربر بسنجید. مثلا وقتی در کادری ایمیل وارد می شود، قبل از اینکه به سرور ارسال شود، کنترل می شود که شکل صحیح ایمیل و علامت @ را داشته باشد تا سرور به آن ایراد نگیرد. 
• واکنش نشان دادن به اتفاقات: می توانید جاوا اسکریپت را  به گونه ای تنظیم کنید که نسبت به اتفاقاتی که در صفحه وب اتفاق می افتد واکنش نشان دهد. مثلا هنگامی که صفحه کامل لود می شود یا بر روی لینک یا بخش خاصی از صفحه کلیک می شود، پنجره یا پیام خاصی را نشان دهد یا هر کار دیگری انجام دهد. 

نکته: همانطور که احتمالا در برخی وبلاگ ها و سایت ها دیده اید، برخی از کدهای جاوا اسکریپت برای افکت های ویژه ای مانند ستاره در کنار موس، ساعت در کنار موس یا تغییر شکل موس استفاده می شود. برخی هم با استفاده از این کدها، پنجره های خودکار با پیام های خاص مانند سلام و خداحافظی را فعال می کنند. توجه داشته باشید که بهتر است از این موارد استفاده نکنید چرا که باعث دردسر و کلافگی کاربران و نهایتا ترک وب سایت یا وبلاگ شما خواهد شد.

 

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

تگ کدنویسی جاوا اسکریپت در اچ تی ام ال، script است. تمامی کدهای جاوا اسکریپتی که قرار است در صفحه استفاده شوند را میان دو تگ باز و بسته اسکریپت می گذارند. ضمنا اغلب اوقات یک کد جاوا اسکریپت به صورت دو تکه مورد استفاده قرار می گیرد که درون فایل HTML، بخشی از آن در هد و بخشی در بادی گذارده می شود.

برای مثال ممکن است چیزهایی مانند این در بخش head ببینید:

<script type="text/javascript" src="http://www.darsnameh.com/js/js_pUi7SMDemA4A2k3_hlAWRM.js"></script>

و کدهایی شبیه این را هم احتمالا درون body صفحه اچ تی ام ال مورد نظر خواهید یافت:

<script type="text/javascript">

 (function() { po.src = 'https://apis.google.com/js/plusone.js';

               var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);

                  })();

</script>

 

 

۲-  آژاکس  AJAX
هنگامی که با یک صفحه اچ تی ام ال خالی و یا مخلوطی از اچ تی ام ال و جاوا اسکریپت کار می کنید، برای هرگونه تبادل اطلاعات میان سایت و سرور آن، صفحه باید یک بار دیگر به صورت کامل بارگذاری (لود) شود. اما داستان آژاکس، به روز کردن بخش هایی از اطلاعات صفحه با سرور، بدون بارگذاری مجدد صفحه است. با این کار علاوه بر بالا رفتن سرعت کار در سایت و کاربر پسندتر بودن آن، ترافیک سرور را بسیار پایین آورده و پایداری و کارایی آن را به شکل قابل توجهی افزایش می دهد.

کلمه AJAX مخفف عبارت Asynchronous JavaScript and XML یا جاوا اسکریپت و ایکس ام ال غیر همزمان است. یعنی اینکه کدهای موجود در صفحه به صورت جداگانه با سرور در ارتباط هستند و اطلاعات شان را با بانک اطلاعاتی سایت همسان سازی می کنند. با این کار همیشه صفحات وب سریع و پویایی در اختیار خواهید داشت.

در صفحات وب کلاسیک، داستان اینگونه بود که برای تبادل اطلاعات هر بخش صفحه، باید تمام آن برای سرور ارسال می شد، سرور اطلاعات را با پایگاه داده کنترل می کرد و پاسخ را در یک صفحه کاملا جدید برای کامپیوتر کاربر ارسال می کرد.

از جمله برنامه های تحت وب و سایت های مشهوری که از آژاکس استفاده می کنند، می توان به گوگل مپ، جیمیل، یوتیوب یا فیس بوک اشاره کرد. اگر عضو فیس بوک باشید، احتمالا دیده اید که صفحه پیام ها و یا نظرات، بدون بارگذاری دوباره کل صفحه باز می شود و پس از نوشتن نظرتان، تنها همان بخش نظرات دوباره لود شده و نظر شما نشان داده می شود. یا در صفحه جیمیل، بدون اینکه صفحه به صورت کامل از ابتدا بارگذاری شود، ایمیل های جدید در لیست اینباکس شما ظاهر می شوند.

مورد بسیار ملموس تر استفاده از آژاکس، که اتفاقا باعث ترویج و شیوع استفاده از آن در صفحات وب شد، پیشنهادات بخش جستجوی گوگل است. اگر دقت کرده باشید، وقتی عبارتی را در باکس جستجوی گوگل می نویسید، منویی باز شده و پیشنهادات گوگل در خصوص پرکاربردترین ترکیبات آن عبارت را در اختیارتان می گذارد. خب، چگونه گوگل می تواند با سرور ارتباط برقرار کرده و سریعا پرکاربردترین عبارات مشابه را دریافت کرده و به شما نشان دهد؟ بدون اینکه شما کوچکترین تغییری در صفحه ای که مشاهده می کنید احساس کنید.

تنها نکته ای باقی می ماند این است که کدهای آژاکس هم درون صفحه، تقریبا شبیه کدهای جاوا اسکریپت نوشته می شوند و در همان تگ script قرار می گیرند.

 

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