چرتک بلاگ

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

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

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

به زبان ساده اگر میخواین مرورگرتون کار خاصی رو برای شما انجام بده javaScript زبان برنامه نویسی قابل فهم بین شما و مرورگر هست. جاوا اسکریپت تو اکثر مرورگرها به صورت پیشفرض هستش و اگر یک مرورگر ساده مثل گوگل کروم داشته باشین به این معنی هستش که امکانات لازم برای برنامه نویسی جاوا اسکریپت رو دارین. پس تا الان فهمیدیم جاوا اسکریپت یک زبان client side هست. به معنی اینکه پردازش دستورات توسط کامپیوتر شما انجام میشه و اون کامپیوتر بزرگا که بهش سرور میگن کاری انجام نمیدن. برای دیدن تاریخچه و اطلاعات بیشتر در مورد این زبان به ویکی پدیا مراجعه کنین.

امکاناتی که جاوا اسکریپت در اختیار ما قرار میده چیا هستش؟

امکانات پایه: منظورم از امکانات پایه چیز هایی هستش که تو هر زبانی میتونین پیداش کنین. مثل دستورات شرطی و محاسبات و این چیزا... که میتونین اولین برنامه hello world تون رو باهاش بسازین! اساسا این چیزا باید باشه که یک چیزی رو زبان برنامه نویسی بگین! و خب مسلمه قبل از هر چیزی باید با اینا آشنا باشین.

Document Object Model: که به صورت اختصاصی Dom گفته میشه به کنترل هر چیزی که روی صفحه هست اطلاق میشه. مثلا فرض کنین ما میخوایم وقتی دکمه ای کلیک میشه حالت شب سایت فعال بشه و بک گراند به رنگ تیره در بیاد. ما با کمک DOM میتونیم این کار رو انجام بدیم. یا مثلا فرض کنین وقتی روی دکمه ای کلیک میکنین یک متنی به آخر پاراگراف اضافه میشه. کلا اگر میخواید با html و CSS صفحه تعامل داشته باشین باید این بحث رو یاد بگیرین!

Browser Object Model: که به صورت اختصاصی Bom گفته میشه به هر چیزی که مربوط به مرورگره اطلاق میشه. مثلا اینکه یک صفحه جدید بسازین، به صفحه قبلی که از اونجا اومدین برگردین، یا به یک آدرس جدید برین. توجه کنین که این مواردی که میگم جدا از هم نیستن و میتونن با هم ترکیب بشن مثلا میتونین تاریخچه تب فعال مرورگرتون رو با Bom پیدا کنین و با استفاده از Dom تو صفحه نمایش بدین.

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

مدیریت Event ها : فکر نکنم زبانی باشه که قدر جاوا اسکریپت روی این موضوع ویراژ بده! با استفاده از جاوااسکریپت میتونین تمامی رویداد ها مثل کلیک، دابل کلیک، راست کلیک، یا فشرده شدن هر دکمه ای از کیبرد رو تشخیص بدین. (این مورد زیر شاخه DOM هستش)

انیمیشن ها: این مورد اساسا یک زیرشاخه از Dom هستش ولی چون واقعا برام جذابه اینجا اضافش کردم :) میشه با CSS انیمیشن هایی ساخت ولی هیچوقت قابل مقایسه با انیمیشن های ساخته شده با جاوا اسکریپت نیستن. منظورم هم از انیمیشن  مثلا آروم آروم محو شدن یک نوشته و ظاهر شدن یک متن دیگه هستش... خودتون ته ماجرا رو فهمیدین دیگه! میدونین چی میگم.

سایر api ها و کتابخانه ها: جاوا اسکریپت در مرورگر های جدید به ما امکان خواندن فایل،دسترسی به میکروفون و وب کم (!) و ذخیره اطلاعات در مرورگر چه از طریق کوکی و چه از indexedDB رو میده و میتونین از این موارد هم استفاده کنین. به علاوه کلی کتابخانه و فریمورک هستش که میتونه خیلی بهتون کمک کنه و بعدا تو همین پست قراره چند تایی رو معرفی کنیم.

البته این رو بگم این موارد بالا توی خودشون هزار تا چیز دیگه هم دارن! اگر تصمیم گرفتین یاد بگیرین حتما تو موقع یادگیری متوجهش میشین :)

با جاوا اسکریپت چیا میشه ساخت؟

برای یک پروژه ساده میتونین یک ماشین حساب ساده بسازین! خودم تا حالا نساختم ولی پروژه جالبی هست و شما رو تا حدودی با Dom و مقدمات جاوا اسکریپت آشنا میکنه!
بررسی فرم ها و ورودی ها کار قدیمی جاوا اسکریپت بوده و هستش! مثلا فرض کنین میخواین یک فیلدی بسازین که فقط توش بشه آدرس ایمیل رو وارد کرد و اگر کسی یک چیز اشتباه یا نامرتبط با اون نوشت مرورگر هشدار بده.
با استفاده از درخواست های وب و Dom میتونین یک برنامه چت زنده بسازین. البته باید قسمت مربوط به سرور رو هم بنویسین :)
با استفاده از Bom میتونین اطلاعات مرورگر رو به صورت یک متن با استفاده از درخواست های وب به سروری بفرستین تا تو اونجا به عنوان آمار سایت بررسی کنین.
با استفاده از Event ها و Dom و کمی گرافیک پایه میتونین یک بازی ساده بسازین! و حتی همون بازی رو چند نفره کنین. اگر توی سایتی دیدین یک بازی هستش و اون بازی تو فلش پلیر مرحوم نیستش بدونین احتمال زیاد با جاوا اسکریپت ساخته شده. نمونش این بازی های ساده تلگرام هستش.
میتونین یک صفحه ای بسازین که به محض اینکه پیام جدیدی دریافت کردین بهتون هشدار بده. کلا تو ذهن داشته باشین هر کجا که چیزی خود به خود یک کاری انجام داد ولی صفحه ریفرش نشد به احتمال زیاد پای جاوا اسکریپت در میون هستش.
single page Application یا به اختصار SPA به وبسایت هایی میگن که هیچوقت منتظر نمیمونین تا صفحه براتون لود بشه. یعنی یکبار که صفحه رو لود کردین مثلا با زدن روی یک پست، محتوای همون پست در اون صفحه لود میشه. فعلا مورد خاصی رو در ذهنم ندارم ولی اگر پیدا کردم حتما لینکش رو قرار میدم. تو این موارد معمولا از انیمیشن هم استفاده میکنن که واقعا جذاب میشه.
فیلم هایی که معمولا تو آپارات یا یوتوب یا هر سرویس دیگه ای میبینیم معمولا تکه تکه شدن تا مثلا وقتی قصد داریم 5 دقیقه یک فیلم رو ببینیم کل 3 ساعت فیلم رو برامون لود نکنه! این لود کردن اون تکه فیلم ها تنها با جاوا اسکریپت شدنیه.
جاوا اسکریپت گزینه مناسبی برای ساخت نرم افزار های آموزشی و شبیه سازی ها هستش. چون میتونین به راحتی میتونین حتی در وبلاگتون هم به اشتراک بزارین.
و هزاران روش و خلاقیت دیگه... چیزی که تمومی نداره خلاقیت برنامه نویسا هستش. در ضمن ابزار اسلایدر سازی که ساختم هم با جاوا اسکریپت هستش ... خوب حالا که تقریبا با قدرت و تسلط جاوا اسکریپت تا حدی آشنا شدین ببینیم کدوم سایتا از این موارد به صورت آشکار استفاده میکنن!

سایت هایی که آشکارا از جاوا اسکریپت استفاده میکنند

جی میل: وقتی تو جیمیل هستین اگر یکی از ایمیل هایی که براتون فرستادن رو باز کنین بعد از چند ثانیه ایمیل توی همون صفحه براتون لود میشه. این نمونه بسیار خوبی از single page application هستش که به کمک جاوا اسکریپت ممکن شده. یعنی با زدن روی ایمیل یک event اجرا میشه که باعث میشه مرورگرتون با استفاده از AJAX از سرور گوگل اطلاعات ایمیل مربوطه رو درخواست کنه. بعد از اینکه اون اطلاعات توسط مرورگر دریافت شدن با استفاده از DOM اطلاعات و محتوای مربوط به ایمیل تو صفحه نمایش داده میشه و با استفاده از BOM هم آدرس اون صفحه تغییر میکنه. بهترین نمونه استفاده از جاوا اسکریپت!
سایت اینستاگرام: من معمولا از سایت اینستاگرام به پست های دوستان سر میزنم. تو همون نگاه اول میشه تشخیص داد چقدر از قدرت جاوا اسکریپت تو این سایت استفاده شده! اول از همه، قسمت مربوط به نوتفیکیشن، که هر زمان که فالور جدیدی داشتین بدون ریفرش شدن صفحه بهتون اعلام میکنه. دوم قسمت مربوط به استوری ها که باز بدون ریفرش صفحه و با استفاده از درخواست هایی که به کمک جاوا اسکریپت هستش لینک مربوط به استوری ها رو از سرور اینستاگرام میگیره و با کمک Dom روی صفحه نمایش میده. و سوم یک صفحه بی انتها که هر چقدر پایین برین پست های قدیمی تر لود میشن و تمومی ندارن! و امکان جدیدی که اخیرا اضافه شده امکان خوندن و ارسال پیام دایرکته که قبلا توضیح دادیم. با اینکه اگر جاوا اسکریپت مرورگرتون رو غیرفعال کنین باز هم میتونین پست ها رو ببینین ولی مطمئنا خیلی از امکانات رو از دست میدین.

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

و سایت هایی هم هستن که امکان ویرایش تصاویر رو میدن مثل این سایت.
یا مثلا این سایت خاطره paint قدیمی رو زنده میکنه.
و یا این سایت توانایی اجرای برنامه های قدیمی DOS رو به کمک جاوا اسکریپت داره. (من که نسل جدیدم اصلا تا حالا با سیستم عامل داس کار نکردم ولی چیز جالبیه!)

 کلا هرچقدر از این زبان بگم هم کم گفتم! خب حالا با چند تا کتابخانه و فریمورک جاوا اسکریپت آشنا میشیم. اینا رو بعد از یادگیری جاوا اسکریپت امتحان کنین:
 
Jquery: کتابخانه جی کوئری بیشتر بخاطر این ساخته شده بود که کد ها رو ساده کنه و مهم تر از اون در تمامی مرورگر ها کار کنه! ولی خب چون الان اکثر مرورگر ها قاعده یکسانی دارن مورد دوم چندان اهمیتی نداره ولی حتما باید حداقل یکبار جی کوئری رو امتحان کنین! چون یادگیریش واقعا ساده هستش و کد نویسی باهاش واقعا لذت بخشه و کد ها رو خیلی کوتاهتر میکنه. این کتابخانه کار ما رو در Dom و درخواست های وب راحتتر کرده.
Vue,React,Angular: حقیقتش از اینا استفاده نکردم ولی تا جایی که شنیدم تو ساخت single page application ها کارتون رو راه میندازن! با یک گشت تو اینترنت میتونین منابع و اطلاعات اضافی در موردشون پیدا کنین.
three.js: با استفاده از این کتابخونه میتونین اشکال سه بعدی رسم کنین و حتی اشیاء و محیط های سه بعدی رو شبیه سازی کنین.
chart.js: رسم چارت ها و نمودار ها با کمک این کتابخانه بسیار راحت هست.
coco2d-js: یک موتور بازی سازی برای جاوا اسکریپت هستش که میتونین بازی هاتون رو خیلی راحتتر بسازین :)
GSAP: یک کتابخانه برای ساخت انیمیشن های فوق العاده هستش و اونطور که معلومه واقعا سریعه!
و ...

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

جاوا اسکریپت... به عنوان بک اند؟

احتمالا میدونین که برای برنامه نویسی بک اند سایت از زبان هایی مثل PHP یا asp.net استفاده میشه ولی اگر نمیدونستین میشه با جاوا اسکریپت بک اند سایت رو هم نوشت. با کمک چیزی به نام node.js! توضیحاتش در این پست نمیگنجه و فقط خواستم معرفی کنم اگر خواستین یک سرچی بزنین. به علاوه این node.js میتونه تو منسجم بودن پکیج های پروژتون کمک بزرگی کنه (به کمک npm).

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

با استفاده از React Native میتونین یک بار کد نویسی کنین و برای هر سیستم عامل موبایلی خروجی بگیرین! یا حتی میتونین یک سایتی رو با meteor بسازین و بعدش خروجی اندروید و ios هم ازش بگیرین! البت چون باهاشون کار نکردم صرفا جنبه معرفی داره.

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

با استفاده از electron.js میتونین برای ویندوز و یا هر سیستم عامل دسکتاپ دیگه ای برنامه بسازین. البته این رو فراموش نکنین معمولا برنامه هایی که به این روش ساخته میشن حجمشون کمی زیاد میشه و مثلا برای یک برنامه hello world ساده شاید برنامتون 30 مگ حجم بگیره! ولی در پروژه های بزرگ زیاد این به چشم نمیاد و مشکلتون فقط در یادگیری و استفاده هست. ویرایشگر معروف atom با الکترون ساخته شده.

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

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

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

جاوا اسکریپت رو یاد بگیرم؟

این بستگی به خودتون داره! من قبلنا واقعا از جاوا اسکریپت متنفر بودم و فکر میکردم چیز اضافی هست. چون یک سری حرف هایی شنیده بودم که جاوا اسکریپت واقعا سخته و بعضی دستوراتش با عقل جور در نمیاد و غیره... ولی اگر روند کار رو بفهمین زبان بسیار ساده ای هست. اگر قبلا زبانی مثل سی رو بلد باشین که کارتون دو چندان ساده میشه چون این زبان ها از نظر دستور خیلی به هم شبیه هستن. اوایل یادگیری چیز واقعا عجیبی نیست فقط ممکنه در بعضی جاها با چیز های عجیبی روبرو بشین که بعضی هاشون رو در سایت wtfjs.com گذاشتن. خوبی جاوا اسکریپت این هست که میتونین در هر جایی حتی تو وبلاگ هم استفاده کنین و اگر کراس پلتفرم بودن براتون مهمه جاوا اسکریپت گزینه خوبیه. پس فقط زمانی سمت جاوا اسکریپت برین که علاقه دارین.

از کجا جاوا اسکریپت رو یاد بگیرم؟

دوره رایگان آموزش مقدماتی جاوااسکریپت توسط ایمان مدائنی

دوره رایگان آموزش جاوااسکریپت توسط سبزلرن

Eloquent Javascript فارسی

سایت w3schools

javascript.info

Mozilla developers

scotch.io

(ممنون از دوستمون بابت معرفی سه مورد آخر!)

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

- Eloquent javaScript توسط marijn haverbeke

- javaScript Cheat sheet توسط websitesetup.org (این مورد بیشتر به مرور کردن چیز هایی که یاد گرفتین کمک میکنه)

و گوگل! احتمالا از شنیدنش خسته شدین ولی تنها راهی که میتونین هر روز چیز جدیدی یاد بگیرین این هست که مشکل یا ایده ای که دارین رو جست و جو کنین. بار ها اتفاق افتاده که من گوگل کنم و در نهایت پاسخ مشکلم رو در stackoverflow و یا mozilla developers پیدا کنم. پس همیشه گوگل کنین! خوب این هم از این قسمت. امیدوارم سالم و سر زنده باشین. در پناه حق!