اگر می خواهید بر فراز قله ی طراحی وب بایستید، باید حتما زبان جاوا اسکریپت (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
- بررسی متدهای Slice، Splice و Split
- بررسی متدهای concat و indexOf و find و findIndex و includes
- بررسی متدهای forEach و map و sort و reverse و filter و reduce و join
- کار با اپراتور سه نقطه (… oprator) در جاوا اسکریپت
- آرایه‌ها (Arrays):
- در آرایه‌ها می‌توان داده‌ها در هر ابعادی که هستند ذخیره سازی کرد
- در آرایه‌ها تکرار وجود دارد و اکثر متدها را می‌توان کار کرد.
- در آرایه‌ها ترتیب‌بندی لحاظ میشود، کپی (Duplicate) وجود دارد و المان‌ها دارای ایندکس (از صفر) هستند.
- ست‌ها (Sets):
- در Set ها می‌توان هر داده‌ای را ذخیره‌سازی کرد.
- در Set ها تکرار وجود دارد و می‌توان با برخی از متدهای Set ها کار کرد.
- در Set ها داده‌ها ترتیب‌بندی ندارند، کپی (Duplicate) وجود ندارد و المان‌ها دارای ایندکس نیستند.
- مپ‌ها (Maps):
- در Map ها می‌توان داده ها را به صورت Key Value در هر ابعادی ذخیره کرد.
- در Map ها تکرار وجود دارد و می‌توان با برخی از متدهای Map ها کار کرد.
- در Map ها ترتیب‌بندی داده ها وجود دارد، کپی (Duplicate) مجاز نیست و همه چیز بر اساس key است.
کار با اشیاء به صورت پیشرفته
کلاس‌ها و برنامه‌نویسی شیءگرایی در جاوا اسکریپت
- معرفی و مقدمه‌ای بر کلاس‌ها
- اجرای یک پروژه مقدماتی برای درک صحیح کلاس ها و ویژگی ها (Classes & Property)
- تعریف متدها برای یک کلاس در حین پروژه (Methods)
- معرفی متد constructor در جاوا اسکریپت به همراه پروژه
پروژه فروشگاه اینترنتی با کلاس‌ها و متدها در جاوا اسکریپت
- راه اندازی اولیه قالب فروشگاه و افزودن وابستگی‌های جاوا اسکریپت
- تعریف اشیاء مربوط به محصولات فروشگاه
- تبدیل شیء محصول به کلاس Product
- انتقال متدهای شیء محصول به متدهای کلاس Product
- تعریف کلاس ProductList و آموزش نحوه‌ی ارتباط بین دو کلاس Product و ProductList
- معرفی متد bind در جاوا اسکریپت
- تعریف کلاس سبد خرید (Cart)
- برقراری ارتباط بین کلاس‌های Cart و Shop در پروژه
- تعریف متدهای استاتیک (Static Method) و ویژگی های استاتیک (Static Property)
- معرفی Helper Function ها یا توابع کمکی
- فعال سازی دکمه افزودن به سبد خرید
- داینامیک کردن دکمه افزودن به سبد خرید (اضافه شدن قیمت هر محصول به سبد)
- کار با کلیدواژه های get و set در متدهای یک کلاس
- معرفی ارث بری (Inheritance) در جاوا اسکریپت
- بازنویسی کلاس های پروژه فروشگاه اینترنتی با استفاده از ارث بری یا Inheritance
- افزودن کلاس های Shop و Shopping cart برای پروژه
- پیاده سازی render های صفحات با استفاده از ارث بری
- بهینه سازی پروژه و تمیز کردن کدهای اضافه
- نمایش خروجی نهایی
کار با رویدادها (Event) و شنونده ها (Listeners)
- معرفی Event ها
- افزودن Event به یک تگ HTML به صورت inline
- افزودن Event با استفاده از ساختار کلاس
- بررسی نحوه کار با شیء event
- معرفی addEventListener
- نوشتن توابع داخلی در addEventListener
- کار با event.target
- کار با event.preventDefault جهت جلوگیری از رفرش صفحه به هنگام ثبت فرم ها
- معرفی ساختار Capturing و bubbling در جاوا اسکریپت
- معرفی متد stop.propagation جهت جلوگیری از اجرای Event های تو در تو
- پیاده سازی یک رویداد روی حلقه‌ها
- استفاده از دستور event.target.closest برای دسترسی به یک رویداد تو در تو
پروژه طراحی و پیاده سازی نرم افزار Todo List یا مدیریت کارها
- معرفی پروژه
- طراحی و ساختار چینی پروژه و کلاس ها
- معرفی هر کلاس و نحوه ارتباط آن با سایر کلاس ها
- پیاده سازی لیست کارهای انجام شده و در حال انجام
- دسترسی به DOM پروژه با استفاده از جاوا اسکریپت
- فعال سازی دکمه های ToDo List
- فعال سازی نحوه ی حذف و اضافه کردن کارها
- معرفی دستورهای cloneNode و bind در حین پروژه
- بروزرسانی کارهای انجام شده و خارج کردن آنها از لیست کارهای در حال انجام
- نمایش تولتیپ (Tooltip)
- حذف تولتیپ (Tooltip)
- جلوگیری از ارسال تولتیپ تکراری
- افزودن قابلیت Drag & Drop به کارها و وظایف
- حذف یک المان با استفاده از Drag & Drop و افزودن آن به لیست کارهای انجام شده
- بهینه سازی پروژه مدیریت کارها
کار با Promise ها در جاوا اسکریپت
- معرفی روند اجرای مجموعه ای از کدها در جاوا اسکریپت
- معرفی Stack و Queue (صف بندی)
- معرفی کلاس Promise
- کار با کلید واژه ی then و catch
- مدیریت خطاها در Promise ها
- معرفی ساختار async await
- تبدیل ساختار then به async await
- مقایسه دو روش then و async await
کار با HTTP Request ها در جاوا اسکریپت
- معرفی HTTP و ساختار کارکرد آن
- معرفی انواع متدهای GET و POST و PUT و PATCH و DELETE
- معرفی انواع Statusها در در درخواست های HTTP
- ایجاد برنامه جهت کار با سرور و API
- معرفی شیء XMLHTTPRequest و کار با متدهای open و send
- کار با وب سایت jsonplaceholder.typicode.com
- نوشتن اولین برنامه با استفاده از متد GET
- فراخوانی و نمایش داده ها از وب سایت jsonplaceholder با متد GET
- ارسال داده در بستر متد POST به وب سایت Jsonplaceholder
- ارسال داده های یک فرم با استفاده از متد POST
- حذف یک داده با استفاده از متد DELETE
- مدیریت خطاها در XMLHTTPRequest
- معرفی Fetch API و مقایسه آن با XMLHTTPRequest
- فراخوانی داده با Fetch API توسط متد GET
- ارسال و حذف داده با FetchAPI توسط متدهای POST و DELETE
- مدیریت خطاها با Fetch API
برای اینکه یک برنامه نویس حرفه ای باشید، باید آموزش جاوا اسکریپت را پشت سر بگذارید. امید است که از دوره ی آموزش جاوا اسکریپت که یکی از کامل ترین و گسترده ترین دوره های آموزش این زبان در وب فارسی است، نهایت استفاده را ببرید و به کمک آن بتوانید بر فراز قله های برنامه نویسی و طراحی وب پرواز کنید. اگر مشتاق پیوستن به جمع برنامه نویسان حرفه ای هستید، خودتان را برای چالش های لذت بخش این زبان مهمِ دنیای برنامه نویسی آماده کنید.
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای دوره پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.