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

اگر می خواهید بر فراز قله‌ ی طراحی وب بایستید، باید حتما زبان جاوا اسکریپت (JavaScript) را یاد بگیرید و دوره ی آموزش جاوا اسکریپت را طی کرده باشید. در ادامه به توضیح این زبان برنامه نویسی پرداخته و سپس سرفصل‌های «دوره آموزش جاوا اسکریپت پروژه محور و جامع» را مطرح می کنیم.

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

جاوا اسکریپت یا JavaScript یک زبان سطح بالا، کامپایل در لحظه و چند الگویی است که از آن برای طراحی کاربردی وب استفاده می شود. بدون شک مهم ترین گام برای طراحی هر وب سایت در گستره ی اینترنت، یادگیری زبان‌های HTML و CSS و JavaScript می باشد. یعنی اگر شما این سه زبان را به صورت کامل یاد بگیرید، بدون شک می توانید تا ۹۸ درصد پروژه های تحت وب را پیاده سازی کنید.

شاید بهتر باشد یک تعریف جامع‌تر از جاوا اسکریپت ارائه دهیم:

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

اکما اسکریپت چیست؟

اکما اسکریپت در واقع یک اسم دیگر از جاوا اسکریپت می باشد و هیچ تفاوتی بین این عناوین وجود ندارد. نسخه های اکما اسکریپت با توجه به بروزرسانی‌های سازمان بین‌المللی ECMAScript تغییر می کنند که همان نسخه های جاوا اسکریپت می باشند.

ویژگی‌های زبان جاوا اسکریپت (JavaScript)

محبوب ترین زبان دنیا: طی نتایج بدست آمده از وب سایت Stackoverflow.com، جاوا اسکریپت به عنوان برترین زبان برنامه‌نویسی دنیا معرفی شده است. این زبان با محبوبیت ۶۸.۷ درصد، لقب King of Language را از آن خود کرده است.

رایگان بودن: زبان برنامه نویسی جاوا اسکریپت به عنوان یک زبان برنامه نویسی رایگان شناخته می ‌شود. زیرا تمام ابزارها و ساختار این نرم افزار Open Source یا متن باز بوده و توسط سازمان استانداردسازی ECMAScript پشتیبانی می شود.

سهولت در استفاده: برای یادگیری جاوا اسکریپت به هیچ چیزی جز یک سیستم عامل (ویندوز، مک یا لینوکس)، یک ویرایشگر ساده مثل Nodepad ++ و یک مرورگر نیاز ندارید!

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

توسعه‌ پذیری آسان: یکی دیگر از ویژگی های زبان برنامه نویسی جاوا اسکریپت (JavaScript)، توسعه پذیری آسانِ آن است. یعنی شما می توانید در هر لحظه و روی هر سیستم دیگری، فارغ از هرگونه وابستگی، برنامه جاوا اسکریپتی خود را بروزرسانی کرده و آن را توسعه دهید.

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

طراحی صفحات وب:‌ همانطور که در مطالب فوق ذکر شد، اگر برای طراحی یک وب سایت یا صفحه علاوه بر زبان‌های HTML و CSS از زبان برنامه نویسی جاوا اسکریپت (JavaScript) استفاده کنیم، تجربه کاربری یا UX (مخفف User Experience) به شکل باور نکردنی افزایش پیدا می کند. به عبارت دیگر کاربر با وب سایت شما ارتباط بسیار خوبی برقرار خواهد کرد.

طراحی اپلیکیشن‌ های تحت وب و موبایل: شما با زبان جاوا اسکریپت می‌ توانید نرم افزارهای تحت وب مانند چت آنلاین تلگرام، واتس‌ آپ و... را تولید کنید و علاوه بر آن، نرم افزارهایی مانند اینستاگرام، فیس بوک و... را تحت نسخه موبایل (اندروید یا IOS) پیاده سازی نمایید.

طراحی وب سرورها و برنامه‌ های سمت سرور: یکی دیگر از کاربردهای زبان جاوا اسکریپت، طراحی هسته پردازشی یک وب سایت یا وب اپلیکیشن است. شما می توانید در بستر محیط Nodejs به توسعه سمت سرور وب اپلیکیشن خود بپردازید. یعنی Nodejs فایل‌های جاوا اسکریپت را جهت استفاده در سمت Backend (سرور) تحلیل و پردازش می کند.

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

مخاطب دوره چه کسانی هستند؟

تمام افرادی که به دنبال یادگیری یک زبان برنامه نویسی تحت وب هستند می توانند در این دوره شرکت کنند. اما جهت سهولت در یادگیری مفاهیم، به شما عزیزان پیشنهاد می شود در ابتدا دوره ی آموزش HTML و CSS را که در همین وب سایت توسط اینجانب تدریس شده است، طی کنند. دلیل این امر چیزی نیست جز نمایش کدها در قالب‌های زیبا و قابل درک.

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

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

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

انگولار (Angular): با استفاده از این فریم ورک می توانید نرم افزارهای تک صفحه ای (مشابه وب سایت روکسو) را ایجاد کنید. یعنی کاربر برای گشت و گذار در صفحات وب سایت نیازی ندارد که قالب صفحه را مجددا بارگذاری کند و تنها اطلاعات جدید را از سرور گرفته و جایگزین اطلاعات قبلی می کند.

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

ری اکت (Reactjs): یک کتابخانه درجه یک و تکرارنشدنی در دنیای جاوا اسکریپت است که توسط کمپانی فیس بوک پشتیبانی می شود. در حال حاضر نرم افزارهای موبایل و وب اپلیکیشن فیس بوک و اینستاگرام توسط این کتابخانه ی جاوا اسکریپتی برنامه نویسی شده اند.

برای دریافت دوره آموزش ری اکت (پروژه محور - مقدماتی تا پیشرفته) می توانید روی این لینک کلیک کنید

ویو جی اس (Vuejs): این فریم ورک یکی از سبک ترین فریم ورک های جاوا اسکریپتی است که با استفاده از آن می توانید درخواست هایی مشابه دو فریم ورک و کتابخانه بالا ایجاد کنید.

برای دریافت دوره آموزش ویو جی اس (پروژه محور - صفر تا صد) می توانید روی این لینک کلیک کنید

نود جی اس (Nodejs): قبلا درباره نود جی اس صحبت کردیم. شما می توانید در بستر نود جی اس به طراحی سمت سرور یک نرم افزار بپردازید.

برای دریافت دوره آموزش نود جی اس (پروژه نرم افزار چت آنلاین) می توانید روی این لینک کلیک کنید.

سرفصل های دوره آموزش جاوا اسکریپت (JavaScript)

مقدمه، معرفی و کاربردها

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

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

• تحلیل موتورهای مرورگرهای کروم، موزیلا و سافاری
• بررسی نرم افزار Visual Studio Code
• راهنمای نصب افزونه‌های موردنظر در VSCode برای جاوا اسکریپت

مقدمه‌ای بر شیءگرایی در جاوا اسکریپت

• معرفی اشیاء در جاوا اسکریپت
• ارائه مثال‌های دنیای واقعی از Object ها
• ارائه مثال‌های برنامه‌نویسی از Object ها در جاوا اسکریپت
• معرفی شیء Properties
• معرفی شیء Events
• معرفی شیء Methods

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

• معرفی ساختار پوشه‌بندی پروژه‌های جاوا اسکریپتی
• ایجاد اولین پروژه جاوا اسکریپتی از صفر
• راه اندازی صفحات HTML و CSS
• ادغام صفحات HTML و CSS با فایل جاوا اسکریپتی

مقادیر، انواع داده و اپراتورها

• معرفی متغییرها یا Variables
• بررسی ثابت‌ها یا Constants
• معرفی انواع داده در Javascript
• ارائه اپراتورهای برنامه‌نویسی و اولویت‌بندی آنها

توابع

• نحوه تعریف توابع در جاوا اسکریپت
• کار با متغییرها در توابع
• محاسبه مساحت و حجم با استفاده از توابع
• معرفی متغییرهای Local و Global در توابع
• ارائه شیوه تخصیص حافظه (Memory) در توابع

اشیاء

• نحوه تعریف اشیاء در جاوا اسکریپت
• معرفی ویژگی ها (Properties)
• معرفی متدها (Methods)
• مقایسه متدها و ویژگی ها با توابع و متغییرها
• ارائه مثال کاربردی
• معرفی کلمه کلیدی new و کار با سازنده Object
• معرفی کلمه کلیدی this
• شیوه تعریف متدها و اشیاء به صورت inline
• تعریف آرایه ها در اشیاء و اشیاء در آرایه ها
• معرفی شیء Window

  • window.innerHeight

  • window.innerWidth

  • window.pageXOffset

  • window.pageYOffset

  • window.screenX

  • window.screenY

  • window.location

  • window.document

  • window.screen

• معرفی شیء Document

  • document.title

  • document.lastModified

  • document.URL

  • document.domain

  • document.write

  • document.getElementById

  • document.getElementsByClassName

  • document.querySelectorAll

  • document.createElement

  • document.createTextNode

  • createElement.appendChild

  • document.body.insertBefore

• معرفی شیء String

  • String.length

  • String.toUpperCase

  • String.toLowerCase

  • String.charAt

  • String.indexOf

  • String.lastIndexOf

  • String.substring

  • String.trim

  • String.replace

  • String.split

• معرفی شیء Numbers و Math

  • تابع isNaN

  • متد toFixed

  • متد toPrecision

  • متد toExponential

  • Math.round

  • Math.ceil

  • Math.floor

  • Math.sqrt

  • Math.random

• معرفی شیء Date برای ایجاد تاریخ

  • getDate

  • getDay

  • getFullYear

  • getHours

  • getMilliseconds

  • getMinutes

  • getMonth

  • getSeconds

  • getTime

  • toDateString

  • toTimeString

  • toString

• کار تاریخ شمسی در جاوا اسکریپت (Jalali)

  • تبدیل تاریخ میلادی به شمسی

  • تبدیل تاریخ شمسی به میلادی

  • معرفی کتابخانه momentjs

پروژه ماشین حساب با جاوا اسکریپت

• طراحی الگو و ساختار ظاهری پروژه

• راه اندازی پوشه‌ها و فایل index.html

• ایجاد قالب HTML و تگ‌های ورودی

• ایجاد فایل CSS و استایل‌ها

• ایجاد فایل app.js جهت افزودن فایل‌های جاوا اسکریپت

• توضیح منطق برنامه

• اعمال چهار عمل اصلی جمع، تفریق، ضرب و تقسیم

• دسترسی به ورودیهای کاربر با Browser Objects ها

• نوشتن توابع add, substract, multiply و divide

• نمایش مقدار محاسبه شده در صفحه HTML

• کار با دکمه‌ها و متد addEventListener

• نمایش خروجی و تحلیل داده‌ها در جاوا اسکریپت

حلقه‌ها و دستورهای تصمیم گیری

• معرفی دستورهای شرطی و کنترلی و حلقه‌ها با مثال در دنیای واقعی
• بررسی دستور شرطی if و else if و else در جاوا اسکریپت
• بررسی دستور شرطی switch در Javascript
• بررسی حلقه کنترلی for و پیاده سازی مثال ها
• بررسی حلقه کنترلی while و do while

پروژه بازی شکست هیولا با جاوا اسکریپت

• پیاده سازی ساختار HTML و CSS پروژه
• فولدر بندی پروژه
• پیاده سازی المان‌های استاتیک و معرفی آنها به جاوا اسکریپت
• کدنویسی دکمه‌های عملیاتی
• افزودن توابع کاربردی جهت کار با دکمه ها
• معرفی دستور addEventListener و کار با آن
• بهینه سازی پروژه با افزودن توابع مورد نیاز
• هوشمندسازی پروژه با افزودن دستورهای شرطی if و else if
• آموزش نحوه حذف المان ها به هنگام بازی از صفحه مرورگر
• آموزش کار با console.log جهت نمایش خطاها یا پیام‌های بازی
• بکارگیری توابع تو در تو جهت کوتاه نویسی پروژه
• ایجاد دکمه‌ی نمایش لاگ (اطلاعات لحظه به لحظه بازی) 
• به تصویر کشیدن Log بازی با استفاده از حلقه‌های for و for of
• جمع بندی پروژه و نمایش خروجی

کار با توابع پیشرفته در جاوا اسکریپت

• مقدمه‌ای بر توابع بی نام
• بررسی تفاوت بین Anonymous Functions یا Function Expressions و Function Declarations
• اجرا و پیاده سازی پروژه بازی سنگ کاغذ قیچی با استفاده از توابع بی‌نام

درخت DOM یا Document Object Model

• معرفی DOM
• طراحی DOM یک وب سایت از پایه
• کار با المان های موجود در یک DOM
• دسترسی و تغییر المان‌های موجود در DOM

پروژه لیست فیلم‌های مورد علاقه من

• تعریف و تحلیل پروژه
• پیاده سازی فایل‌های HTML و CSS
• معرفی بخش‌های پروژه
• افزودن دکمه‌های موردنیاز
• استفاده از دکمه‌ی افزودن فیلم
• طراحی ساختار Modal (یا Popup - پاپ آپ) با جاوا اسکریپت
• افزودن فیلد‌های ورودی کاربران
• دریافت و تحلیل ورودی‌های فیلم‌ها
• طراحی صفحه سیاه Backdrop در پشت Modal یا پاپ آپ
• هوشمندسازی کلیک‌های موس با جاوا اسکریپت
• نمایش لیست فیلم‌های افزوده شده در صفحه
• حذف تک به تک فیلم‌ها
• معرفی ساختار Bind در حین پروژه
• افزودن Modal برای پیام حذف فیلم‌ها
• افزودن دستورهای شرطی به دکمه‌ها جهت حذف فیلم
• جمع بندی و بروزرسانی UI پروژه

آرایه‌ها (پیشرفته)

• معرفی انواع آرایه‌ها
• کار با شیء Array و متدهای Array.of و Array.from
• آرایه‌های تو در تو (Nested Arrays)
• دسترسی به المان‌های آرایه‌ها
• استفاده از تابع for برای دسترسی به آرایه
• متدهای Shift و Push و Pop و Unshift

ساختار داده‌ها: اشیاء و آرایه‌ها

خطاها و نحوه مدیریت آن ها

ماژول ها

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

معرفی رویدادها و نحوه ی ترکیب آن با HTML‌ و CSS

کار با HTTP ها و فرم ها

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