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

سرفصل ها و درس ها

مقدمه Introduction

• مقدمه Introduction

• ساختار دوره Course sctructure

مراحل تبدیل شدن به یک توسعه دهنده جاوا اسکریپت Steps to Becoming a JavaScript Developer

• چرا جاوا اسکریپت؟ Why JavaScript?

• برنامه نویس جاوا اسکریپت چیست؟ What is a JavaScript developer?

• اصول اولیه The basics

• چارچوب خود را بردارید Pick up your Framework

• چارچوب ها و کتابخانه های جاوا اسکریپت: تفاوت ها JavaScript frameworks and libraries: differences

• چارچوب ها و کتابخانه های اصلی Main frameworks and libraries

• CSS و HTML-5 را یاد بگیرید Learn CSS and HTML-5

• ابزار مورد استفاده: Editor/DIE Tools to use: Editor/DIE

• ابزارهای مورد استفاده: ابزارهای اشکال زدایی Tools to use: Debugging tools

• الگوی طراحی خود را انتخاب کنید Pick Up your Design Pattern

• قسمت جلویی در مقابل انتهای عقب Front end vs back end

• مدل شیء سند (DOM): ساختار صفحه وب The Document Object Model (DOM): the web page structure

• ارتباط بین قسمت جلویی و انتهایی: عملیات ناهمزمان Communication between front end and back end: Asynchronous operations

• ارتباط بین قسمت جلو و عقب: REST و GraphQL Communication between front end and back end: REST and GraphQL

• اصطلاحات و مفاهیم بیشتری را برای توسعه front-end در نظر بگیرید More terms and concepts to consider for front-end development

اصول اولیه جاوا اسکریپت JavaScript basics

• جاوا اسکریپت چیست؟ What is Javascript

• جاوا اسکریپت در صفحه شما چه می کند؟ What is JavaScript doing on your page?

• جاوا اسکریپت در فایل های JS و در کد HTML به عنوان اسکریپت Javascript in JS files and in the HTML code as script

• استراتژی های بارگذاری اسکریپت Script loading strategies

• متغیرها Variables

• کلمات کلیدی let و var The let and var keywords

• قوانین نامگذاری متغیرها variable naming rules

• انواع متغیرها Types of variables

• تایپ پویا Dynamic typing

• ثابت ها Constants

• نظرات Comments

• اپراتورها Operators

• ریاضی در جاوا اسکریپت Math in Javascript

• شرایط (I) Conditionals (I)

• شرایط (II) Conditionals (II)

• رویدادها Events

• توابع Functions

رشته ها و آرایه ها Strings and arrays

• رشته ها Strings

• روش های مفید رشته ای (I) Useful string methods (I)

• روش های مفید رشته (II) Useful string methods (II)

• روش های مفید رشته (III) Useful string methods (III)

• روش های مفید رشته (IV) Useful string methods (IV)

• روش های مفید رشته (V) Useful string methods (V)

• روش های مفید رشته (VI) Useful string methods (VI)

• روش های مفید رشته (VII) Useful string methods (VII)

• آرایه ها (I) Arrays (I)

• آرایه ها (II) Arrays (II)

• آرایه ها (III) Arrays (III)

• آرایه ها (IV) Arrays (IV)

• آرایه (V) Array (V)

تعامل با صفحات HTML Interaction with HTML pages

• از جاوا اسکریپت برای نمایش و پنهان کردن عناصر HTML استفاده کنید Use JavaScript to display and hide HTML elements

• برای بدست آوردن مقادیر ویژگی های عناصر HTML از جاوا اسکریپت استفاده کنید Use JavaScript to get the values of attributes of HTML elements

• از جاوا اسکریپت برای تعامل با یک فرم استفاده کنید Use JavaScript to interact with a form

• نمونه ای از اسکریپت اعتبار سنجی فرم Example of form validation script

• رویدادهای عناصر ورودی را در یک فرم با جاوا اسکریپت مدیریت کنید Manage the events in input elements in a form with JavaScript

• از جاوا اسکریپت برای تغییر سبک CSS عناصر HTML استفاده کنید Use JavaScript to change the CSS style of HTML elements

• شیء سند (I) The document Object (I)

• موضوع سند (II) The document Object (II)

• شیء سند (III) The document Object (III)

• علامت $ The $ sign

• Canvas API Canvas API

عیب یابی جاوا اسکریپت Troubleshooting JavaScript

• انواع خطا Types of error

• رفع خطاهای نحوی Fixing syntax errors

• خطاهای منطقی Logic errors

• سایر خطاهای نحوی Other Syntax errors

بلوک های ساختمان جاوا اسکریپت JavaScript building blocks

• نمای کلی بلوک های ساختمان جاوا اسکریپت JavaScript building blocks overview

• شرایط: if، else if، else (پیشرفته) Conditionals: if, else if, else (advanced)

• شرایط: سوئیچ Conditionals: switch

• شرایط: سه تایی Conditionals: ternary

• کد حلقه زدن: حلقه For Looping code: the For loop

• حلقه زدن کد: while و do ... while Looping code: while and do ... While

• توابع (I) Functions (I)

• توابع (II): توابع ناشناس و توابع پیکان Functions (II): Anonymous functions and arrow functions

• توابع (III): دامنه و تضادها Functions (III): scope and conflicts

• مقادیر برگردانده تابع Function return values

بیشتر در مورد رویدادها More on events

• مقدمه Introduction

• شروع استفاده از برخی رویدادها: addEventListener() Starting using some events: the addEventListener()

• رویدادهای دیگر Other events

• رویدادهای دیگر: چند نمونه Other events: some examples

• حذف شنوندگان Removing listeners

• سایر مکانیسم های شنونده رویداد Other event listener mechanisms

• شی رویداد The Event object

• ویژگی های اشیاء رویداد Properties of the Event objects

• جلوگیری از رفتار پیش فرض یک رویداد Preventing default behavior of an event

اشیاء جاوا اسکریپت JavaScript objects

• مقدمه Introduction

• ویژگی ها و روش های شی Object properties and methods

• اشیاء درون اشیاء Objects within objects

• دسترسی به خصوصیات اشیاء Access objects properties

• اعضای شی را تنظیم و اصلاح کنید Set and modify object members

• اشیاء ایجاد کنید Create objects

نمونه های اولیه شی جاوا اسکریپت JavaScript object prototypes

• نمونه اولیه شی چیست What is an object prototype

• زنجیره نمونه اولیه The prototype chain

• Object.getPrototypeOf() و زنجیره اولیه Object.getPrototypeOf() and the prototype chain

• خواص سایه زنی Shadowing properties

• تنظیم نمونه های اولیه Setting prototypes

• ویژگی های خود نمونه های اولیه Own properties of prototypes

• نمونه های اولیه و وراثت Prototypes and inheritance

برنامه نویسی شی گرا در جاوا اسکریپت Object-oriented programming in JavaScript

• مفاهیم برنامه نویسی شی گرا Object-oriented programming concepts

• کلاس ها و نمونه ها Classes and instances

• ارث Inheritance

• کپسولاسیون Encapsulation

• OOP در جاوا اسکریپت OOP in Javascript

• کلاس ها در جاوا اسکریپت: کلاس ها و سازنده ها Classes in JavaScript: classes and contructors

• کلاس ها در جاوا اسکریپت: وراثت Classes in JavaScript: inheritance

• کلاس های جاوا اسکریپت: کپسوله سازی Classes in JavaScript: encapsulation

کار با داده های JSON Working with JSON data

• JSON چیست؟ What is JSON

• آرایه‌ها به‌عنوان JSON و یادداشت‌های دیگر در JSON Arrays as JSON and other notes on JSON

• استفاده از جاوا اسکریپت برای استفاده از داده های فرمت شده JSON در یک وب سایت Using JavaScript to make use of JSON formatted data on a website

• تبدیل رشته های متنی JSON به آبجکت Converting JSON text strings into objects

جاوا اسکریپت ناهمزمان: سنتی Asynchronous JavaScript: traditional

• مقدمه Introduction

• جاوا اسکریپت ناهمزمان: عمومی Asynchronous JavaScript: general

• شروع از یک تابع همزمان طولانی مدت Starting from a long-running synchronous function

• شروع از یک تابع همزمان طولانی مدت Starting from a long-running synchronous function

• مشکلات مربوط به عملکردهای همزمان طولانی مدت را مشخص کنید Outline the problems with long-running synchronous functions

• کنترل کننده رویداد با جاوا اسکریپت ناهمزمان Event handlers with Asynchronous JavaScript

• جاوا اسکریپت ناهمزمان و پاسخ به تماس Asynchronous JavaScript and Callbacks

جاوا اسکریپت ناهمزمان: مدرن Asynchronous JavaScript: modern

• مقدمه ای بر وعده ها Introduction to promises

• API fetch(). The fetch() API

• زنجیر زدن وعده Promise chaining

• خطاها را با وعده ها مدیریت کنید Handle errors with promises

• اصطلاحات قول Promise Terminologies

• ترکیبی از وعده های متعدد Combination of multiple promises

• ناهمگام و منتظر باشید async and await

• پیاده سازی API مبتنی بر وعده Implementing a promise-based API

• کارگران Workers

API های وب سمت کلاینت Client-side web APIs

• مقدمه Introduction

• API های وب: API ها چیست؟ Web APIs: What are APIs?

• APIهای رایج مرورگر و APIهای متداول شخص ثالث Common browser APIs and common third party APIs

• API ها چگونه کار می کنند؟ (من) How do APIs work? (I)

• API ها چگونه کار می کنند؟ (II) How do APIs work? (II)

• API ها چگونه کار می کنند؟ (III) How do APIs work? (III)

• API ها چگونه کار می کنند؟ (IV) How do APIs work? (IV)

• APIهای مدل شیء سند (DOM). Document Object Model (DOM) APIs

• API برای واکشی داده ها از یک سرور: زمینه APIs for fetching data from a server: the context

• API برای واکشی داده از سرور: Fetch API APIs for fetching data from a server: the Fetch API

• API برای واکشی داده از سرور: XMLHttpRequest API APIs for fetching data from a server: the XMLHttpRequest API

• APIهای شخص ثالث (I) Third party APIs (I)

• APIهای شخص ثالث (II) Third party APIs (II)

برنامه های کاربردی Applications

• گالری تصاویر خود را ایجاد کنید Create your own Image Gallery

• بوم: طراحی گرافیک Canvas: Drawing graphics

• بوم و اشیاء: توپ های جهنده: آماده سازی Canvas and Objects: Bouncing Balls: preparation

• بوم و اشیاء: توپ های پرنده: مدل سازی کلاس توپ Canvas and Objects: Bouncing Balls: modelling the ball class

• بوم و اشیاء: توپ های پرش: انیمیشن بسازید Canvas and Objects: Bouncing Balls: do animations

• پخش کننده ویدیو Video Player

• APIهای ویدیویی و صوتی: توضیح HTML Video and Audio APIs: explaining the HTML

• API های ویدیویی و صوتی: آماده سازی CSS Video and Audio APIs: preparing the CSS

• APIهای ویدیویی و صوتی: کد جاوا اسکریپت - پخش/مکث/توقف ویدیوها Video and Audio APIs: the JavaScript code - play/pause/stop videos

• APIهای ویدیویی و صوتی: کد جاوا اسکریپت - ویدیوهایی که به دنبال آن هستند Video and Audio APIs: the JavaScript code - videos seeking back and forth

• APIهای ویدیویی و صوتی: کد جاوا اسکریپت - زمان سپری شده را به روز کنید Video and Audio APIs: the JavaScript code - update the elapsed time

• APIهای ویدیویی و صوتی: کد جاوا اسکریپت - اسکریپت را نهایی کنید Video and Audio APIs: the JavaScript code - finalize the script