با سرعت بالای پیشرفت فناوری و توسعهی وب در حال حاضر، ندانستن زبان جاوا اسکریپت به یک جهنم تبدیل میشود. این لحظه که فهمیدهایم باید یادگیری جاوا اسکریپت را شروع کنیم، برای همهی ما، چه افراد تازه کار و چه افراد دارای تجربهی برنامه نویسی، پیش آمده است. برای مثال بیایید این سناریو را تصور کنیم: فرض کنید که سالها قبل به عنوان یک توسعه دهندهی وب در یک موقعیت خوب شغلی استخدام شدهاید. هم اکنون به احتمال زیاد شرکت شما نیاز دارد تا نرم افزارهای خود را مطابق با روشهای امروزی بهینه کند. فریمورکها و انتخابهای زیادی وجود دارند که میتوانید به سراغ آنها بروید، اما اغلب این راهها به یادگیری زبان جاوا اسکریپت و فریمورکهای آن منتهی میشود. با استفاده از جاوا اسکریپت، میتوانید یک رابط ایدهآل را برای مشتریان خود ایجاد کنید.
ممکن است حتی تلاش کرده باشید تا جاوا اسکریپت را یاد بگیرید اما همچنان موارد زیادی وجود دارند که آنها را نیاموختید، بسیاری از اصطلاحات فنی مورد استفاده را متوجه نمیشوید و سرعت عمل لازم را هنگام کار با آن ندارید. نگران نباشید: زیرا شما تنها فردی نیستید که چنین مشکلی را دارد. در حقیقت یادگیری جاوا اسکریپت بدون یک نقشه و مسیر درست خیلی سخت است. افراد بسیاری به همین دلیل دچار خستگی و دلزدگی از جاوا اسکریپت میشوند. پس در این مقاله، یک نقشه راه جاوا اسکریپت را تهیه کردیم. در گام اول به صورت مختصر مروری بر چیستی زبان جاوا اسکریپت خواهیم داشت. در گام دوم پیش نیازهای زبان جاوا اسکریپت و در گام سوم مباحث آموزشی را بررسی کرده، در گام چهارم منابع یادگیری جاوا اسکریپت را معرفی میکنیم و در گام پنجم درمورد زمان موردنیاز برای شروع کار در این حوزه صحبت خواهیم کرد. در گام آخر نیز حوزههای کاربری بعد از مسلط شدن بر جاوا اسکریپت را معرفی خواهیم کرد.
جاوا اسکریپت (JavaScript) که به اختصار JS نیز نامیده میشود، یکی از محبوبترین زبانهای برنامه نویسی است. جاوا اسکریپت زبانی سطح بالا، داینامیک، شیگرا و تفسیری است که از شیوههای مختلف برنامه نویسی پشتیبانی میکند. به طور کلی جاوا اسکریپت یک زبان فرانت اند (Front-End) است، اما از این زبان میتوان برای برنامه نویسی وب سایت، اپلیکیشنهای موبایل، بازی و اپلیکیشنهای دسکتاپ استفاده کرد. بنابراین میتوان اینگونه برداشت کرد که زبان برنامه نویسی جاوا اسکریپت ، یک زبان همه فن حریف است.
اگر با هر یک از این اصطلاحات آشنایی ندارید نگران نباشید، زیرا در مقاله جاوا اسکریپت چیست؟ همه چیز درباره جاوا اسکریپت و کاربردهای آن به توضیح هر یک از آنها خواهیم پرداخت. چراکه برای اینکه بهتر متوجه چیستی زبان جاوا اسکریپت شوید، در ابتدا باید جواب سوالاتی مانند زبان کامپایلری چیست و چه تفاوتی با زبان مفسری دارد؟، زبان برنامه نویسی سمت سرور و سمت کاربر به چه نوع زبانهایی گفته میشود؟ را بدانید. پس از درک این مفاهیم میتوانید آموزش جاوا اسکریپت را شروع کنید.
همانطور که گفتیم، زبان جاوا اسکریپت یک زبان فرانت اند است. در حقیقت جاوا اسکریپت ارتباط بین صفحات وب یا اپلیکیشن را امکان پذیر میکند. پس قبل از شروع جاوا اسکریپت، نیاز است تا با موارد زیر آشنا باشید:
در ادامه برای هر یک از این دو زبان معرفی کوتاهی خواهیم داشت.
زبان HTML اولین زبانی است که باید یاد بگیرید. HTML برای طراحی ساختار اساسی و اصلی یک صفحه وب استفاده میشود و چارچوب یک صفحه از وب را مشخص میکند. با استفاده از HTML، میتوانید المانهای مختلف مانند دکمه، اسلایدر و… را در یک صفحه قرار دهید.
برنامه نویسان وب از CSS برای قالببندی عناصر صفحه در html استفاده میکنند. CSS میتواند به تگهای HTML زیبایی ببخشد. به عنوان مثال، فرض کنید شما با HTML یک صفحهی ثبت نام ایجاد کردهاید و در آن دو اینپوت فیلد به همراه یک دکمهی ثبت قرار دادید. با استفاده از CSS میتوانید برای هر یک از المانهای خود رنگ، سایه و سایر ویژگیهای استایلی را تعریف کنید.
در ابتدای مسیر نیاز است که شما مفاهیم زبان برنامه نویسی جاوا اسکریپت مانند تعریف متغیر ها، توابع و… را فرا بگیرید. این مرحله مثل خط شروع شما است. میتوانید برای شروع یادگیری جاوا اسکریپت از کتاب ها، دوره آموزش جاوا اسکریپت، مقالات و… استفاده کنید. به هر حال احتمالا به زودی در این مرحله آماده میشوید. خواندن و دنبال کردن مقالات راهنمای جامع جاوا اسکریپت برای شروع این کار، پیشنهاد ماست!
ECMAScript یا به اختصار ES یک استاندارد برای زبانهای برنامه نویسی است. جاوا اسکریپت مهمترین پیاده کننده این استاندارد است. ES6 در واقع آخرین نسخه منتشر شده از اکما اسکریپت است. اگر در مورد ES6 اطلاعات کافی ندارید میتوانید به بخش تاریخچه جاوا اسکریپت مراجعه کنید.
ES6 امکانات جدیدی را به جاوا اسکریپت اضافه میکند. اما همه مرورگرها از آن پشتیبانی نمیکنند. برای حل این مشکل میتوانیم از ابزارهایی استفاده کنیم که کد ES6 را به جاوا اسکریپتی که توسط همه مرورگرها قابل اجرا باشد ترجمه میکند. یکی از این ابزارها کتابخانه Babel است. با استفاده از Babel به راحتی میتوانید کدهای ES6 خود را برای اجرا روی مرورگر به جاوا اسکریپت خام تبدیل کنید.
قبلا اجرای کارهای مختلفی مانند کم حجم کردن فایلهای جاوا اسکریپت و سی اس اس (minify کردن)، چسباندن فایلهای جاوا اسکریپت به هم (concatenate کردن) و… بر عهدهی خودمان بود. بعد از هر بار ایجاد تغییر در فایلها مجبور بودیم، تمام عملیات بالا و دسته ای از عملیات دیگر را دوباره و دوباره تکرار کنیم. این کار وقت گیر، پر هزینه و البته ملال آور بود. تا اینکه Task Runnerها به میدان آمدند.
Task Runner همان کاری را انجام میدهد که از اسم آن مشخص است. وظیفه Task Runner انجام دادن وظایف است. مثلا Task Runner میتواند با دریافت یک دستور watch با هر بار ایجاد تغییر در فایلها پروژه را دوباره اجرا کند. تعداد زیادی Task Runner وجود دارد که یادگیری کار با آنها هم راحت است مانند Gulp.js، Grunt.js، npmscript و… به طور کلی بیشتر Task Runnerها میتوانند این کارها را انجام دهند:
قدم بعدی در شروع یادگیری جاوا اسکریپت ، آموزش یک یا چند Package Manager است. پکیجها در واقع قطعاتی از کد هستند که قابلیت استفاده مجدد را دارند. این پکیجها میتوانند از یک نرم افزار Package Manager یا مدیریت پکیج دانلود شده و در سیستم توسعه برنامه نویس ذخیره شوند. پکیجهای مختلف ممکن است به یکدیگر وابسته باشند. Package Manager نرم افزاری است که به شما کمک میکند که پکیجهای مختلفی که خودتان نوشتهاید و یا دیگران آماده کردهاند مدیریت کنید تا پروژه تان به درستی کار کند. اگر به دنبال یادگیری یک Package Manager هستید پیشنهاد ما به شما npm است. البته پکیج منجرهای دیگری مانند bower، yarn و… نیز وجود دارند.
در قدم بعدی باید با Bundlerها آشنا شوید. اگر آشنایی مقدماتی با جاوا اسکریپت پیدا کرده باشید احتمالا میدانید که برای اضافه کردن فایلهای جاوا اسکریپت به یک صفحه باید از کد زیر در HTML استفاده کنید:
<script src=’app.js’ rel=’text/javascript’></src> <script> … </script>
در مثال بالا اگر در فایل app.js یک متغیر سراسری (متغیری که از تمام نقاط به آن دسترسی دارید) تعریف شده باشد؛ شما به راحتی میتوانید در داخل تگ script دوم به آن دسترسی داشته باشید (در جاوا اسکریپت به متغیر هایی که در خطوط بعدی تعریف شده اند دسترسی ندارید). حالا فرض کنید که تعداد فایلهای جاوا اسکریپت زیاد باشد. برای مثال، نمونهی زیر را در نظر بگیرید:
<script src=’app.js’ rel=’text/javascript’></script> <script src=’main.js’ rel=’text/javascript’></script> <script src=’script.js’ rel=’text/javascript’></script>
در این حالت کنترل ترتیب متغیرها در فایلها کمی سخت میشود. ممکن است در فایل main.js به متغیری احتیاج داشته باشید که در فایل script.js تعریف شده است. در این حالت راه حل، جابهجاکردن ترتیب معرفی فایلها است. اما این عمل با زیادترشدن تعداد فایلها پیچیدهتر میشود. در اینجا Bundlerها یا Module Loaderها برای الحاق خودکار فایلها به کمک شما میآیند!
Bundler ابزاری است که تمام تکه کدهای جاوا اسکریپت و فایلهای وابستهی آنها را به صورت یک بسته در یک فایل جمعآوری میکند. این کار علاوه بر رفع دردسری که بالا توضیح داده شد، باعث میشود تعداد Requestها در زمان بارگزاری صفحه کاهش پیدا کند و سرعت بارگزاری صفحه بهبود پیدا کند.
از محبوبترین Bundlerها میتوان به Webpack، Browserify، Rollup اشاره کرد. البته باید بگوییم که ابزارهای جامعی مثل Webpack ضمن اینکه کتابخانه Babel را برای ترجمه کد ES6 در خود دارند، بخشی از وظایف Task Runnerها را هم انجام میدهند!
برای یادگیری جاوا اسکریپت به صورت جامع و به زبان فارسی، میتوانید از دورهی متخصص جاوا اسکریپت استفاده کنید. سعی کردیم تا با این دوره یادگیری را برای شما آسانتر کنیم، با این حال وب سایتهای انگلیسی هم هستند که میتوانید به آنها مراجعه کنید. برخی از این سایتها عبارتند از:
هرچند چندین سال نیاز دارید تا به تمامی مفاهیم مورد نیاز جاوا اسکریپت مسلط شوید، اما براساس نظرات جامعهی برنامه نویسان، حداقل ۶ تا ۹ ماه طول میکشد تا مفاهیم اصلی جاوا اسکریپت یاد بگیرید و با آن راحت باشید.
در کار برنامه نویسی زمان هایی پیش میآید که برنامه به مشتری تحویل داده میشود اما مشتری ادعا میکند که برنامه به درستی کار نمیکند. در موقعیتهای مختلفی برنامههای ما به درستی عمل نمیکنند و به اصطلاح باگ دارند. بنابراین برنامه باید بارها و بارها ایرادگیری شود. این عمل وقت گیر و هزینهبر است. در واقع یک کابوس به تمام معنا!
راهکار این است که برنامههای ما بر اساس تست یا Test Driven نوشته شوند. یعنی برای تک تک عملکردهای برنامه ابتدا کدی برای تست آن نوشته شود. پس از اتمام کار تست نویسی شروع به نوشتن کدهایی میکنیم تا در نهایت در آن تستها با موفقیت اجرا شوند. با این کار اگرچه فرآیند کدنویسی را طولانیتر کردهایم، اما در نهایت فرآیند دیباگ و اشکالگیری نرم افزار بسیار راحت میشود.
در جاوا اسکریپت هم ابزارهای تست نویسی مختلفی وجود دارند. به عنوان مثال میتوان به Jest از شرکت فیسبوک و Mocha اشاره کرد.
یکی از کاربردهای بسیار زیاد جاوا اسکریپت استفاده از آن در بک اند برنامهها میباشد. به این صورت که با استفاده از موتور V8 جاوا اسکریپت را روی کامپیوتر سرور اجرا کنیم. اگر قصد دارید یک برنامه نویس فول استک جاوا اسکریپت شوید بنابراین برنامه نویسی بک اند با جاوا اسکریپت گزینهای است که باید حتما یاد بگیرید. برای برنامه نویسی جاوا اسکریپت در سمت سرور از فریمورک Node.js استفاده میکنیم. در مطلبی که در مورد محبوبترین فریمورکهای جاوا اسکریپت نوشتهایم به معرفی این فریمورک پرداختهایم.
متاسفانه زبان برنامه نویسی جاوا اسکریپت زبانی است که از نظر تعریف نوع متغیرها فقیر است. این به آن معنی است که شما نمیتوانید در جاوا اسکریپت انواع متغیرها را تعیین کنید. مشکل این فقدان در این است که دیباگ کدها در زمان اجرا را به شدت مشکل و در نهایت جاوا اسکریپت خام را در سمت سرور، برای اپلیکیشنهای بزرگ نامناسب میکند.
زبان تایپ اسکریپت (Typescript) که در واقع یک بسته تکمیلی برای زبان برنامه نویسی جاوا اسکریپت است این مشکل را حل میکند. تایپ اسکریپت امکانات زیادی را به جاوا اسکریپت اضافه میکند. زبان تایپ اسکریپت در نهایت برای اجرا به کد جاوا اسکریپت ترجمه میشود. منظور از بسته تکمیلی این است که شما حتی میتوانید کد جاوا اسکریپت خام را در کد تایپ اسکریپت استفاده کنید.
ممکن است در ابتدای کار، شروع یادگیری برنامه نویسی جاوا اسکریپت ساده به نظر برسد. ممکن است تصور کنید با یک زبان برنامه نویسی ساده بدون حتی قابلیت تعریف نوع متغیرها سر و کار دارید. اما یادگیری این زبان برنامه نویسی و متعلقات آن قرار نیست یک هفته ای ممکن شود! اما ما در این مطلب تلاش کردیم این مسیر طولانی را برای شما قدم به قدم شرح دهیم. روشن بودن مسیر یادگیری جاوا اسکریپت یا Roadmap آن به شما کمک میکند با زاویهی دید بازتر و روشنتری به تخمین زمان یادگیری بپردازید. علاوه بر آن دانستن قدم بعدی به شما آرامش خاطر بیشتری میدهد. به نظر شما چه چیزهای دیگری باید در این مسیر گنجانده شود؟
از اونجایی که مباحث یکمی حجمشون زیاد بود و خیلیها از قبل پیش زمینه طراحی وب رو داشتند بخش HTML و CSS و جی کوئری در دوره طراحی وب گفته میشه و در دوره جاوا اسکریپت خالص نیست.
لذا قبل از شروع جاوا اسکریپت بهتر هست که اول دوره طراحی وب رو بگذرونید.