به جاوااسکریپت سلام کنید

نسخه های قدیمی تر مرورگر اینترنت اسکپلورر از جاوااسکریپت دوست داشتنی یک غول بی شاخ و دم برای طراحان وب ساخت. البته شاید اگر منصفانه به این قضیه بنگریم استفاده نابجا و ناصحیح کاربران و وبمستران (که البته در آن دوره بیشتر میزبان سیستم های وبلاگ دهی بودند) باعث ایجاد این ذهنیت شد. تا حدی که فراگیری غیر فعال کردن امکان جاوااسکریپت در مرورگر اینترنت اکسپلورر یکی از مهارت های عمومی کاربران وب به شمار می رفت. بگذریم…

در حال حاضر طراحی صفحات وب پیشرفت قابل توجهی داشته و آن ذهینت کاملاً محو شده است ولی هنوز بسیاری از طراحان علاقه ای به فراگیری آن ندارند و به استفاده صرف از پلاگین های موجود بسنده می کنند.امروز روز فراگیری جاوا اسکریپت است و ما یک سری آموزشی برای انتشار در آی تی پورت محیا نموده ایم.پیشنهاد می کنم با ما همراه شوید و قدم به قدم مهارت های لازم را برای استفاده از این زبان اسکرپیتی فرا بگیرید.

• جاوا و جاوااسکریپت

دوستان عزیزم زبان برنامه نویسی جاوا را به هیچ وجه با زبان اسکریپتی جاوااسکریپت اشتباه نگیرید. لوگوی فنجان قهوه مربوط به زبان جاوا است. 🙂

• پیشنیاز و سطح آموزش

پیش نیاز این مطلب تسلط نسبتاً خوب روی HTML و CSS می باشد. در صورت آشنایی کلی با این موضوعات نیز می توانید جاوااسکریپت را فرا بگیرید ولی حقیقت امر این است که تا زمانی که به جاوااسکریپت نیاز پیدا نکنید دل به یادگیری نخواهید سپرد. به هر حال از همراهی با این آموزش مشمول ضرر نخواهید شد.

سطح آموزش : مبتدی به همراه بیان نکات کاربردی حرفه ای

• تاریخچه جاوااسکریپت

به تاریخچه جاوااسکریپت کاری نداریم چون اصلاً به درد ما نمی خورد. ما فقط می خواهیم این زبان را فرا بگیریم، پس زمان را از دست نمی دهیم.

• چرا به جاوا اسکریپت نیاز داریم؟

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

• قابلیت های جاوااسکریپت

جاوااسکریپت در گروه زبان های برنامه نویسی سمت کاربر (Client side) قرار می گیرد. یعنی در سمت کاربر یا همان مرورگر کاربر پردازش و اجرا می شود نه در سرور. شما یک تابع جاوااسکریپت را در قالب یک فایل HTML می توانید اجرا کنید. برای پردازش و اجرای جاوااسکریپت از منابع سیستم کاربر (پردازنده و حافظه) استفاده می شود. این نکته بسیار مهم است. از همین الان به شما اخطار می دهم، اسکریپت های طولانی با پردازش سنگین ننویسید و به فکر کاربرانی که منابع سیستم بالایی ندارند هم باشید. در طول آموزش به نکاتی اشاره خواهیم کرد که باعث می شود زمان و حجم پردازش توابع شما کاهش پیدا کند.

جاوااسکریپت توانایی هایی دارد زیادی دارد که می توان مهمترین آنها را در چند دسته کلی قرار دارد:

دستکاری درخت DOM (پیمایش و انتخاب ، افزودن ، تغییر ، حذف)

بلاشک واژه DOM یا درخت DOM را شنیده اید (Document Object Model) و منظور از آن را می دانید. در فراگیری جاوااسکریپت شناخت کامل درخت DOM بسیار به شما کمک خواهد کرد.

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

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

منظور از تغییر در المان تغییر محتوای متنی و خصوصیات (مثلا  … , class , style , href , title , alt) می باشد.

دوستانی که با برنامه نویسی سمت سرور(Server side) آشنایی دارند احتمالاً متوجه شباهت قابلیت جاوااسکریپت و زبان سمت سرور (مثلا php) شده اند. در یک زبان سمت سرور شما می توانید یک رکورد را در جداول دیتابیس جستجو کنید ، آنرا تغییر دهید (ویرایش) ، حذف کنید و یا یک رکورد جدید بیافزایید. در جاوااسکریپت نیز قابلیت مشابه را در درخت DOM دارید.

قابلیت دستکاری درخت دام از گسترده ترین و مهمترین توانایی های این زبان است.

پردازش رشته ها

در جاوااسکریپت نیز مانند هر زبان دیگری توانایی پردازش رشته های متنی و یا عددی را دارید.

به عنوان مثال می توانید یک عملیات ریاضی انجام دهید یا اینکه یک رشته متنی را چک کنید و مطمئن شوید که یک ایمیل است یا آدرس وب سایت.

عکس العمل نسبت به رخدادها (… , Hover , click , focus , submit )

رخدادها در صفحه وب توسط کاربر ایجاد میشن. به عنوان مثال کلیک کردن روی یک تگ (خواه تگ anchor باشد یا هر تگ دیگه ای) یک رخداد است. مرورگرها نسبت به بعضی از رخدادهای خاص عکس العمل های پیش فرض خود را دارند. مثلاً همه ی مرورگرها در قبال رخداد click روی تگ anchor که خصوصیت href برای آنها قید شده باشد (یا به عبارت ساده تر کلیک کردن روی یک لینک) :

<a href=”http://itport.ir”>ITPORT </a>

صفحه ایی با لینک مورد نظر رو باز خواهند کرد. و یا در قبال رخداد hover برای یک تگ anchor که خصوصیت title برای آن تعریف شده باشد، مقدار خصوصیت title رو در یک باکس شناور کنار نشانگر موس نشان می دهند.

<a href=”http://itport.ir” title=” visite our awesome website”>ITPORT</a>

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

به عنوان مثال با کلیک بر روی یک لینک از رفتار پیش فرض مرورگر (رفتن به صفحه ی هدف لینک) جلوگیری نموده و در عوض مقدار خصوصیت title آن را زیر آن در یک تگ پاراگراف نمایش دهیم. یادتان که نرفته جاوااسکریپت توانایی افزودن یک تگ خاص (در اینجا p) به موقعیت مشخص در درخت DOM را دارد.

یا اینکه در قبال رویداد hover برای لینک ها مقدار خصوصیت title آنها را در یک باکس استایل دهی شده خاص توسط طراح نمایش دهیم (اساس پلاگین tooltip که حتماً نمونه ی آن را در بسیاری از کارها مشاهده نموده اید).

افکت ها وانیمیشن ها

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

به عنوان مثال با تغییر ارتفاع یک باکس (که یک مقدار عددی است) در مدت زمان ۵۰۰ میلی ثانیه یک انیمیشن ایجاد کرده اید. در صورتی که تغییر تصویر بک گراند یک باکس (که یک مقدار عددی نیست) نمی تواند در یک مدت زمان تعیین شده به آهستگی اجرا شود و بصورت آنی انجام خواهد شد.

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

دسترسی به BOM

به احتمال قوی با نام BOM آشنایی ندارید (Browser Object Model). در صورتی که با مبحث شی گرایی در برنامه نویسی آشنا نباشید توضیح این قسمت اندکی مشکل خواهد بود.

در جاوا اسکریپت می توان با شی پنجره مرورگر (شی window)ارتباط برقرار کرد. به عبارت ساده تر جاوااسکریپت از طریق BOM با مرورگر ارتباط برقرار می کند. BOM در همه ی مرورگرها پشتیبانی می شود ولی هنوز بصورت رسمی به استاندارهای مرورگرها افزوده نشده است.

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

تکنیک ایجکس (AJAX)

از مهمترین توانایی های جاوااسکریپت ایجکس است. البته این قابلیت به گونه ای زیر مجموعه BOM می باشد .

برای درک توضیحات فنی در مورد ایجکس شما به پیشنیاز آشنایی با یک زبان سمت سرور نیاز دارید. همانطور که می دانید برای اجرای یک اسکریپت سمت سرور ابتدا باید یک درخواست (Request) به سرور ارسال شود تا روی همان سرور پردازش می شود و نتیجه پردازش در قالب یک سند HTML به مرورگر ارسال و تفسیر می شود و نتیجه همان صفحه ای است که مشاهده می شود.

تکنیک ایجکس این روند را برای شما بصورت کامل به انجام می رساند بدون اینکه صفحه وب شما ریفرش (Refresh) شود.

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

استفاده از این تکنیک مزایای زیادی دارد و البته استفاده نابجای آن اشکالات دیگری را بوجود خواهد آورد. همه ی این مسائل را بصورت جزیی و فنی در آموزش های آتی بررسی خواهیم نمود.

دیگر قابلیت ها

جاوااسکریپت در عین سادگی گستردگی بالایی دارد. مواردی که ذکر شد قابلیت های اولیه و خام این زبان هستند. بسیاری از توابع ، پلاگین ها و فریم ورک هایی که تاکنون برای این زبان نوشته شده اند به گونه ای خود قابلیت (کاربرد) جدیدی به این زبان افزوده اند که کمابیش به آنها اشاره خواهد شد.

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

دیدگاه ها و ایده های خود را برای بهبهود انتشار قسمت های بعدی این سری آموزشی از ما دریغ نفرمایید.