آموزش جاوا اسکریپت – فصل اول – معرفی و مقدمه | راهکاری‌نو

جاوا اسکریپت چیست؟

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

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

نکته: جاوا اسکریپت با اینکه نامی مشابه با جاوا دارد اما بطور کلی با آن متفاوت است.

دلیل نام گذاری جاوا اسکریپت چیست؟

اوایل که زبان برنامه نویسی جاوا اسکریپت معرفی شد نامش لایو اسکریپت -LIVE SCRIPT- بود. در آن زمان زبان جاوا از محبوبیت و معروفیت زیادی برخوردار بود. تصمیم بر آن شد که نام لایو اسکریپت بعنوان برادر کوچکتر جاوا به JAVAscript تغییر کند.

اما طی سال های اخیر و پس از توسعه زبان برنامه نویسی جاوا اسکریپت، بطور کلی یک زبان مستقل شد و نامش به اکما اسکریپت -ECMA script- تغییر یافت.

اجرای زبان جاوا اسکریپت:

امروزه جاوا اسکریپت نه تنها می تواند در مرورگرهای کلاینت اجرا شود بلکه می تواند روی سرور (یا هر برنامه ای که شامل javascript engine باشد) نیز اجرا شود.

البته در مرورگرهای مختلف این موتور جاوا اسکریپت نام های متفاوتی دارد:

– V8: در مرورگر گوگل کروم و اپرا

– SpiderMonkey: در مرورگر موزیلا فایرفاکس

– Chakra: در تمام نسخه های اینترنت اکسپلورر

و…

نکته: دانستن لغات فوق می تواند مفید باشد زیرا ممکن است در ادامه مقاله آموزشی جاوااسکریپت بعنوان مثال بگوییم فلان ویژگی فقط در موتور V8 پشتیبانی می شود. یعنی فقط در مرورگرهای کروم و اپرا اجرا می شود.

منابع آموزشی معتبر جاوااسکریپت:

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

مرجع آموزش جاوا اسکریپت MDN (شرکت موزیلا):

یک راهنمای جامع و کاربردی در زمینه آموزش جاوا اسکریپت می باشد که مثال های زیادی دارد. موزیلا در آموزش جاوا اسکریپتی که دارد بطور مفصل و عمیق تمام توابع و متدهای جاوا اسکریپت را معرفی کرده و آموزش داده است.
در صورتی که در مبحث خاصی از javascript سوال دارید (مثلا parseInt) می توانید بصورت زیر سرچ کنید:
https://www.google.com/search?q=MDN+parseInt

مرجع آموزشی MSDN (شرکت مایکروسافت):

شامل آموزش های بسیاری در زمینه های مختلف می باشد و یکی از آموزش ها javascript می باشد. همچنین می توان سوال موردنظر خود را بصورت RegExp MSDN از گوگل بپرسید.

سازگاری جاوا اسکریپت با مرورگرها:

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

Can I use?

برای مشاهده پشتیبانی مرورگرها و پلتفرم های مختلف از یک ویژگی خاص در جاوا اسکریپت می توانید بصورت http://caniuse.com/#feat=cryptography جستجو کنید.

Kangax github

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

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

جاوا اسکریپت درون مرورگرها چه کاری می تواند انجام دهد؟

جاوا اسکریپت مدرن یک زبان برنامه نویسی امن -safe- است. دسترسی سطح پایین یا low-level برای رم و سی پی یو فراهم نمی کند. زیرا یک مرورگر نیازی ندارد به منابع سخت افزاری دسترسی داشته باشد.

قابلیت ها و امکانات جاوا اسکریپت بشدت به محیط اجرای آن وابسته است. بعنوان مثال Node.js از توابعی پشتیبانی می کند که اجازه دسترسی به فایل ها و تغییر آنها، اجرای درخواست های شبکه و غیره را فراهم می کند.

javascript می تواند تمام کارهایی را که مرتبط با تغییر یک صفحه وب، تعامل با کاربر و مرورگر و غیره را براحتی انجام دهد.

بعنوان مثال جاوااسکریپت درون مرورگرها (in-browser javascript) قادر است که:

یک HTML جدید به صفحه وب اضافه کند، محتوای فعلی صفحه را تغییر دهد، استایل ها را دستکاری کند و…
به رفتار و اکشن های کاربران واکنش نشان دهد. مثلا در رویدادهای Mouse-Click و Key-Up و…
درخواست ها را از طریق شبکه به سرور ارسال کرده و داده و فایل های لازم را از آن دریافت کند.
کوکی کلاینت را دریافت کند، از کاربر سوال بپرسد، پیغام های موردنظر را به کاربر نمایش دهد و…
داده را روی مرورگر کاربر -client side- ذخیره کند. که نامش local storage است.

جاوا اسکریپت درون مرورگرها چه کاری نمی تواند انجام دهد؟

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

برخی از محدودیت های جاوااسکریپت درون مرورگرها عبارتند از:

قادر نیست فایل های داخل هارد سیستم کاربران را بخواند، تغییر دهد و یا برنامه ای را اجرا کند. در واقع هیچگونه دسترسی مستقیمی به سیستم عامل ندارد.
مرورگرهای مدرن دسترسی محدودی به فایل های افراد بازدیدکننده وب سایت دارند. آن هم فقط در مواقعی که کاربر فایلی را از طریق drag & drop به صفحه وب می اندازد یا از طریق تگ input فایلی را از روی هارد سیستم انتخاب می کند.
روش های برای کار با میکروفن، دوربین و سایر راه های تعامل با کاربران وجود دارد. اما تنها درصورتی توسط جاوا اسکریپت قابل استفاده هستند که خود کاربر مجوز دسترسی به آنها را به مرورگر بدهد. بنابراین جاوا اسکریپت درون مرورگر بطور پیش فرض نمی تواند وب کم لپ تاپ کاربر را روشن کرده و فیلم بگیرد یا از طریق میکروفن لپ تاپ اقدام به ضبط صدای کاربر کند و…
تب یا زبانه های مختلف مرورگر در حالت عادی و پیش فرض یکدیگر را نمی بینند و دسترسی به هم ندارند. مثلا اگر در تب اول سایت sample.com باز باشد و در تب دوم سایت example.com ، این دو سایت طبق قانون Same Origin Policy نمی توانند به یکدیگر دسترسی داشته باشند و داده ها را مشاهده کنند. این هم مجددا بدلیل حفظ امنیت کاربران است.
جاوا اسکریپت براحتی می تواند از طریق شبکه به سرور دسترسی داشته باشد و درخواست ارسال و پاسخ دریافت کند. اما دسترسی آن به سایر دامین ها و سایت ها محدود است و نیاز به دریافت اجازه از سایت مقصد دارد که در بخش HTTP header تعریف می شود.

این محدودیت هایی که ذکر کردیم تنها در جاوااسکریپت درون مرورگرها وجود دارد و اگر از زبان javascript در سمت سرور استفاده شود این محدودیت ها را نخواهد داشت. مرورگرهای مدرن برای دریافت مجوز دسترسی های فوق از کاربران، افزودنی یا extension مرتبط آن را دارند.

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

حداقل 3 ویژگی عالی درباره جاوا اسکریپت وجود دارد:

تعامل و هماهنگی کامل با HTML/CSS
کارهای ساده بسادگی انجام پذیرند.
توسط تمام مرورگرها پشتیبانی می شود و بطور پیش فرض فعال است.

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

شایان ذکر است که از جاوا اسکریپت همچنین می توان برای تولید اپلیکیشن های موبایل، برنامه های سمت سرور و غیره استفاده کرد.

زبان های جانبی JAVASCRIPT:

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

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

ابزارهای مدرنی که وجود دارد باعث شدند که این عملیات ترنسپایل و تبدیل به جاوااسکریپت خیلی سریع و نامحسوس انجام شود. در زیر نمونه هایی از این زبان ها را می بینیم:

CoffeeScript: کافی‌اسکریپت syntax کوتاه تری نسبت به جاوااسکریپت دارد و امکان کدنویسی دقیق تر و تمیزتر را به توسعه دهندگان می دهد. معمولا برنامه نویسان Ruby به آن بیشتر علاقه دارند.
TypeScript: تمرکز تایپ اسکریپت روی strict data typing است و سیستم ها و ساختارهای پیچیده و سنگین را ساده سازی می کند. توسط شرکت مایکروسافت ارائه شده است.
Flow: فلو هم مثل تایپ اسکریپت از strict data typing پشتیبانی می کند و توسط فیسبوک معرفی شده است.
Dart: یک زبان برنامه نویسی مستقل است که موتور مختص خودش را برای اجرا در پلتفرم هایی مانند موبایل دارد. می تواند به جاوااسکریپت کامپایل شود و توسط گوگل ارائه شده است.

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

ویرایشگر کد (Code Editor):

ویرایشگر کد محیطی است که یک توسعه دهنده و برنامه نویس اکثر زمان خود را در آن سپری می کند. دو نوع ویرایشگر کد داریم. IDE و ویرایشگرهای سبک. اغلب برنامه نویسان IDE محبوب خود را دارند.

IDE (Integrated Development Environment):

معمولا نام IDE را به نرم افزارهایی اطلاق می کنند که شامل امکانات و ویژگی های بسیاری هستند و می توان بطور کامل یک پروژه را توسط آنها توسعه داد و اجرا کرد. همانطور که از نامش پیداست IDE فقط یک ادیتور ساده نیست بلکه یک محیط توسعه (development environment) همه جانبه و کامل است.

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

اگر هنوز IDE دلخواه خود را انتخاب نکرده اید می توانید از یکی از دو گزینه زیر استفاده کنید:

Visual Studio Code (رایگان)
WebStorm (پولی).

نکته: برای سیستم عامل ویندوز نرم افزار Visual Studio نیز وجود دارد که نباید آن را با Visual Studio Code اشتباه بگیرید. نرم افزار ویژوال استودیو رایگان نیست و برای توسعه اپلیکیشن و وب سایت های دات نتی کاربرد و تطابق بیشتری دارد. البته بخوبی با زبان جاوا اسکریپت هماهنگ است و امکانات زیادی برای توسعه آن دارد.

نسخه رایگان نرم افزار ویژوال استودیو را می توان با مراجعه به Microsoft تهیه کنید.

اغلب IDE های محبوب و معروف پولی یک دوره آزمایشی (Trial) دارند که شما می توانید با توجه به نیاز و علایق خود بهترین IDE را انتخاب کرده و خریداری کنید.

ادیتورهای سبک (Lightweight editors):

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

در لیست زیر برخی از ویرایشگرهای معروف را معرفی کردیم:

Atom(cross-platform, free).
Visual Studio Code(cross-platform, free).
Sublime Text(cross-platform, shareware).
Notepad++(Windows, free).
Vimand Emacs are also cool if you know how to use them.

انتخاب بهترین ویرایشگر کد به نوع پروژه و سلیقه برنامه نویس بستگی دارد.

کنسول توسعه دهنده یا Developer console:

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

به همین منظور بخش developer tools در مرورگرهای مدرن و معروف در نظر گرفته شده است که کار خطایابی (Debugging) را راحت می کند.

اغلب دولوپرها سراغ مرورگرهای موزیلا فایر فاکس و گوگل کروم می روند زیرا بهترین developer tools را نسبت به سایر مرورگرها دارند.

گوگل کروم (Google Chrome):

فایل bug.html را باز کنید. یک ارور جاوا اسکریپتی در آن وجود دارد. این خطا از دید یک کاربر عادی پنهان است اما شما بعنوان توسعه دهنده می توانید با زدن کلید F12 (در ویندوز) یا کلیدهای ترکیبی Cmd+Opt+J (در مک) بخش ابزارهای دولوپر را باز کنید.

تصویری شبیه زیر را مشاهده خواهید کرد:

در تب کنسول فوق یک خطای قرمز رنگ مشاهده می کنید که می گوید lalala تعریف نشده است. روی لینک bug.html در سمت راست کلیک کنید تا به خطی که باعث بروز خطا شده هدایت شوید.

در پایین خطای قرمز رنگ یک علامت > آبی رنگ مشاهده می کنید که می توان دستورات جاوااسکریپت را مقابل آن نوشت و با زدن کلید Enter آن را اجرا کرد.

اگر دستور جاوااسکریپتی شما فقط یک خط داشته باشد مشکلی پیش نمی آید اما اگر دستورات شما چندخطی باشند، برای اینکه دستورات را در خطوط زیر هم تعریف کنید باید کلیدهای Shift+Enter را بزنید و در نهایت برای اجرای کل دستورات کلید اینتر را بزنید.

مرورگرهایFirefox، Edge و غیره:

در اغلب مرورگرها می توان با کلید F12 وارد ابزار Developer شد. محیط این ابزار در مرورگرهای chrome, firefox, edge شبیه هم می باشد.

مرورگر Safari:

در سیستم عامل های مک (شرکت اپل) مرورگر Safari وجود دارد. برای مشاهده Developer Tools باید کمی تنظیمات انجام دهیم. باید مطابق تصویر زیر در بخش preferences به تب Advanced رفته و گزینه Develop menu را تیک بزنید.