مجموعه آموزش جاوا اسکریپت (JavaScript)

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

یک صفحه وب که به صورت حرفه ای طراحی شده باشد دارای دو بخش کلی Client و Server است. بخش کلاینت شامل سه قسمت طراحی ساختار (HTML)، رنگ و لعاب (CSS) و منطق (JavaScript) است. کار با JavaScript کمی دشوار است چرا که اولا بر روی همه مرورگرها به یک شکل اجرا نشده و ثانیا منجر به تولید کدهای پیچیده و طولانی می شود و دادن جلوه های ویژه به عناصر صفحه وب را با دشواری همراه می کند.

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

امروزه با پیشرفت تلفن های هوشمند و همه گیر شدن آن ها، نیاز به اپلیکیشن این گوشی ها (React Native) در همه حوزه ها به شدت احساس می شود و به همین دلیل بازار گرمی را در این حوزه به راه انداخته است، بنابراین تسلط به نوشتن اپلیکیشن های موبایل می تواند درآمد زیادی را برای شما به ارمغان آورد. در سال های اخیر با نوشتن فریم ورک های گوناگون برای جاوا اسکریپت (JavaScript)، این زبان جای خود را در بین بهترین زبان های برنامه نویسی باز کرده است. فریم ورک جدید از جاوا اسکریپت که توسط فیس بوک ارائه شد، ری اکت نیتیو (React Native) است.

با آمدن استاندارد ES6، دنیای وب کلاینت (Web Client) به شدت دچار تغییر شد و بیشتر فریمورک های جاوا اسکریپت، خود را با این تغییر هماهنگ کردند. با توجه به این که یک متخصص وب Front end باید مسلط به فریمورک های جاوا اسکریپت باشد و یادگیری فریمورک های جاوا اسکریپت، بدون یادگیری پیش نیاز آن ها یعنی ES6، عملا غیرممکن است. در این فرادرس، ما به بررسی قابلیت ها و تغییرات ES6 در جاوا اسکریپت خواهیم پرداخت.

AngularJS یک فریم ورک محصول شرکت Google است که ساخت اپلیکیشن های تک صفحه مانند Gamil را برای ما ممکن می سازد. در حال حاضر سرویس "بام" بانک ملی ایران و چندین سایت پر بازدید ایرانی از این ابزار قدرتمند برای سرویس دهی به کاربرانشان استفاده می کنند و این موضوع قدرت و ضریب نفوذ AngularJS را نشان می دهد چرا که AngularJS تجربه بسیاری دلچسبی را برای کاربران نهایی به ارمغان می آورد. در این فرادرس از ساختار فریم ورک تا دیباگ کردن با استفاده از Dump به صورت کامل آموزش داده می شود.

برای توسعه وب، طراحان نیاز به انواع کتابخانه های جاوا اسکریپتی جهت ایجاد طراحی پویا و کاربر پسند دارند. فریمورک Kendo UI جاوا اسکریپتی که با JavaScript ،HTML5 ،CSS3 ،jQuery کار می کند، می تواند جایگزین خوبی برای بسیاری از کتابخانه های جاوا اسکریپتی باشد. از ویژگی های مثبت فریمورک Kendo UI می توان به سرعت بالا، سازگاری با همه مرورگرها و واکنش گرا بودن آن، نداشتن مشکل عدم سازگاری میان کتابخانه ها می باشد. هدف از این فرادرس ارائه روشی برای یادگیری کامپوننت های متفاوت جاوا اسکریپت که برای طراحان وب بسیار حائز اهمیت است، می باشد. ما کامپوننت های موجود در این فریمورک محبوب را به صورت عملی و کاملا کاربردی جهت طراحی و ایجاد یک سایت پویا و کاربر پسند مورد استفاده قرار می دهیم و گزینه های لازم جهت سفارشی کردن آن ها را نیز بیان می کنیم.

در این فرادرس مقدمات برنامه‌نویسی با کتابخانه ReactJS که از تکنولوژی‌های نوین برنامه‌نویسی رابط کاربری است، ارائه شده است. ReactJS کتابخانه معرفی شده از سوی Facebook برای ساخت رابط کاربری در سال ۲۰۱۳ توسط جردن واک (Jordan Walke) است. React قابلیت ایجاد وب‌سایت‌ها، اپلیکیشن‌های پیش‌رونده یا PWA (Progressive Web Apps) را دارد و همچنین با معرفی فریم‌ورک React Native امکان تولید اپلیکیشن در پلتفرم‌های Android, iOS, MAC و حتی ویندوز را نیز فراهم کرده است. یادگیری این کتابخانه یکی از امتیازات برنامه‌نویس‌های Front-End است و از نظر میزان دستمزد، جزو تخصص‌های پردرآمد است. با توجه به رو به رشد بودن این تکنولوژی و جامعه قوی، امکان پیشرفت آن در حوزه‌های مختلف برنامه‌نویسی رابط کاربری رو به افزایش است.

آموزش های مقدماتی تکنولوژی های مختلف برنامه نویسی تحت وب فراوان یافت می شوند و تعداد بسیار کمی از این آموزش ها به صورت کاربردی به این تکنولوژی ها می پردازند. به همین منظور، برای استفاده کاربردی از سه تکنولوژی HTML5 ,CSS3 و jQuery آموزشی را تهیه کردیم تا کاربرد این سه تکنولوژی وب را به صورت عملی تدریس نموده و زمینه استفاده کاربردی از مقدمات را فراهم نماییم. بخش یکم آموزش نیز بر همین مبنا پایه ریزی شده بود و مثال های متنوعی در آن ارائه شده بود. در این قسمت، مثال های متنوع تری را ارائه می کنیم تا تسلط شما بر استفاده کاربردی از این سه تکنولوژی افزایش یابد.

تایپ‌‌اسکریپت (TypeScript) یک زبان برنامه‌نویسی است که توسط مایکروسافت ارائه شده و به واسطه کامپایلر (Compiler) به کدهای جاوا‌ اسکریپت (JavaScript) تبدیل شده و همچنین شباهت بسیار زیادی به زبان قدرتمند سی‌شارپ (#C) دارد و قوانین شی‌گرایی که در سی‌شارپ حاکم است را می‌توان در تایپ‌‌اسکریپت نیز استفاده نمود. در این فرادرس، آموزش از مباحث پایه تایپ‌‌اسکریپت، تعریف متغیر‌ها و مباحث ساده شروع شده و به تدریج به مباحث پیشرفته‌تر مانند: کلاس‌ها، مباحث OOP – Solid و حتی پیاده‌سازی لایه‌بندی در تایپ‌اسکریت، همراه با مثال‌های ساده برای درک بهتر مفاهیم پرداخته شده است. در نهایت به مفاهیم و اصول کاربردی تایپ‌‌اسکریپت تسلطی نسبی پیدا می‌نماییم.

در بسیاری از نرم‌افزارهای امروزی، نیاز به آپلود فایل از الزامات طراحی نرم‌افزار محسوب می‌شود. ساده‌ترین کاربرد این فرایند در آپلود تصویر پروفایل یا پیوست فایل در زمان ارسال پیام است. آپلود فایل در پلتفرم‌های مختلف به روش‌های مختلفی قابل پیاده‌سازی است اما یکی از معروف‌ترین و پرکاربردترین این روش‌ها، آپلود فایل از طریق RESTful API است چون با ارائه این قابلیت از طریق API، سیستم‌های نرم‌افزاری ناهمگون نیز می‌توانند به سرویس یا نرم‌افزار شما متصل شده و آپلود فایل را انجام دهند. از سوی دیگر، یکی از مهمترین پلتفرم‌هایی که برای طراحی RESTful APIها استفاده می‌شود، Node.js است، لذا در این آموزش با نحوه طراحی API در Node.js جهت آپلود فایل در سرور آشنا می‌شوید.

هدف از این فرادرس، ساخت اپلیکیشن محاسبه‌گر (BMI (Body Mass Index در زمان بسیار کوتاه است. در پایان این آموزش شما اپلیکیشنی دارید که می‌توانید در استورهای (Store) مختلف آپلود ‌کرده و با دیگران به اشتراک بگذارید. پشتیبانی قوی، عملکرد بالا، کامیونیتی (Community) بزرگ و سرعت پیشرفت خارق‌العاده React Native، نشان‌دهنده این است که تا چند سال دیگر بخش عمده‌ای از اپلیکیشن‌های موبایل با استفاده از آن ساخته می‌شوند.

ما در این آموزش از Redux به عنوان یک جریان داده‌ای در بستر ReactJS استفاده کرده و به بررسی مباحث آن می‌پردازیم. این آموزش به طور خاص برای کسانی ساخته شده است که می‌خواهند بدانند Redux چیست و با مثال‌های مختلف در فریم‌ورک، با نحوه کار آن آشنا شوند. بنابراین برای درک بهتر مباحث Redux و مثال‌های ذکر شده، دانش نسبی در ReactJS ضروری است که در درس‌های ابتدایی آموزش به صورت خلاصه به آن پرداخته شده است. Redux یک Container قابل پیش بینی برای برنامه‌های جاوا اسکریپت است. وقتی برنامه‌ها بزرگ می‌شوند و به سرعت رشد می‌کنند، نگهداری آن‌ها کار بسیار دشواری می‌شود، اما با Redux می‌توان این کار را به بهترین نحو ممکن انجام داد.