{كاربردي} آشنایی با جاوا اسکریپت و آژاکس

[محمدسلیمانی]

جاوا اسکریپت 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 قرار می گیرند.

خوب شما در این درس با دو فناوری مهم و بسیار پرکاربرد در اینترنت آشنا شدید.

قرار نیست کد جاوا اسکریپت و آژاکس بنویسید اما حداقل حالا می دانید که آنها چیستند و به چه کاری می آیند.

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

[تیم اسان وب]

حتماً تا به حال با صفحاتی مواجه شده اید که به زبان فارسی نوشته شده اند، اما وقتی از آنها بازدید می کنید با کلماتی به هم ریخته و غیر قابل فهم مواجه می شوید. دلیل این مشکل ناسازگار بودن Encoding انتخاب شده در مرورگر با زبان فارسی است.

این ناسازگاری ممکن است به دلیل کامل نشدن بارگزاری صفحه ایجاد شده باشد یا به دلیل اینکه در هنگام طراحی Encoding متناسب با زبان فارسی انتخاب نشده باشد یا اصلاً در طراحی صفحه هیچگزینه ای برای Encoding صفحه در نظر گرفته نشده باشد.

در اکثر مواقع می توانید صفحه مورد نظر را به روش زیر به صورت فارسی مشاهده کنید:

مرورگر اینترنت اکسپلورر در ویندوز (Microsoft Internet Explorer) :
از منوی view گزینه Encoding را انتخاب کنید و گزینه utf-8 را کلیک کنید. در صورتی که در لیست اولیه کد پیجهای مختلف نتوانستید utf-8 را مشاهده کنید نشانگر ماوس خود را روی گزینه More نگهدارید و utf-8 را از بین کد پیجهای مختلف پیدا کرده و روی آن کلیک کنید.
در سایر مرورگر ها هم به همین روش باید عمل کنید فقط مسیر منو ها کمی تفاوت دارد. می توانید مسیر های زیر را دنبال کنید.
مرورگر فایر فوکس : (Firefox)
view --> Character Encoding --> unicode (utf-8)
یا
view --> Character Encoding --> More Encodings --> Unicode --> Unicode (utf-8)
مرورگر اپرا : (Opera)
view --> Encoding --> Unicode --> UTF-8

البته اگر به این روش مشکل صفحه مورد نظر شما حل نشد به دلیل این است که صفحه با پیج کد دیگری نوشته شده است. می توانید گزینه هایی مثل (Arabic(Windows رانیز امتحان کنید.

برای اینکه یک صفحه فارسی طراحی کنیم دو چیز را باید مد نظر قرار دهیم:
راست به چپ بودن صفحه

برای اینکه یک صفحه راست به چپ طراحی کنیم می توانیم به چند طریق عمل کنیم.

استفاده از شناسه "dir="rtl در تگ
از این شناسه در بسیاری از تگهای HTML می توان استفاده نمود. در صورتی که صفحه ای راست به چپ باشد و بخواهیم از قسمتهای چپ به راست نیز در آن صفحه استفاده کنیم می توانیم از شناسه "dir="ltr استفاده کنیم.
استفاده از CSS برای تعیین direction صفحه
مثلاً استفاده از یک استایل خارجی یا در بخش HEAD متن یا استفاده از شناسه "style="direction: rtl در تگهایی که می خواهیم به صورت راست به چپ نمایش داده شود

تنظیم Encoding در هنگام طراحی صفحه

برای تنظیم Encoding صفحه باید از یک متاتگ در بخش HEAD متن استفاده کنیم. این متاتگ برای کد پیج utf-8 که بیشترین سازگازی را با صفحات فارسی دارد به صورت زیر است:

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