آموزش جاوا اسکریپت از مبتدی تا متخصص

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

معرفی Introduction

• به دوره آموزشی جاوا اسکریپت من خوش آمدید Welcome to my JavaScript course

• جاوا اسکریپت چیست و کجا می توان از آن استفاده کرد؟ What is Javascript and where can you use it?

• من کی هستم؟ Who Am I?

• بعد از این دوره چه خواهید دانست؟ What you will know after this course?

• مفروضات این دوره Assumptions in this course

ویرایشگر Editor

• دانلود و نصب ویرایشگر Downloading and installing editor

• ایجاد پروژه/ساختار پروژه Creating the project / structure of project

جایزه: میانبرهای مفید BONUS: Useful Shortcuts

• میانبرهای مفیدی که در زمان شما صرفه جویی می کند Useful shortcuts that will save you tons of time

• میانبرهای مفید آماده چاپ! Useful shortcuts ready to print!

مبانی Basics

• تعبیه صحیح اسکریپت های JS در وب سایت خود باعث کاهش سرعت بارگذاری وب سایت می شود Properly embedding JS scripts on your website reducing website loading speed

• اصول اولیه: اسکریپت شما چگونه اجرا می شود؟ فضاهای سفید/نقطه ویرگول و غیره Basics: How is your script executed? Whitespaces/semicolons etc.

• نظرات Comments

• متغیرها Variables

• تمرین: محاسبه قیمت های ناخالص با مالیات بر ارزش افزوده EXERCISE: Calculating Gross Prices with VAT

• متغیرهای const - چرا و چه زمانی باید از کلمه کلیدی 'const' استفاده کنید؟ const variables - why and when should you use 'const' keyword?

• دانش اولیه خود را تمرین کنید (به روز شده در 23 ژانویه) Practise your basic knowledge (Updated Jan 23')

اپراتورها Operators

• عملگرهای حسابی Arithmetic operators

• یک متغیر ایجاد کنید که مجموع دو متغیر دیگر را در خود جای دهد Create a variable that will hold sum of two other variables

• عملگرهای رابطه ای Relational operators

• عملگرهای منطقی Logical operators

• دانش خود را در مورد اپراتورها تمرین کنید (به روز شده در 23 فوریه) Practise your knowledge about the operators (Updated Feb 23')

شرایط Conditions

• اظهارات مشروط Conditional Statements

• اپراتور شرطی؟: Conditional operator ?:

• تعویض Switch

• دانش خود را در مورد عبارات شرطی تمرین کنید (به روز شده در 22 اوت) Practise your knowledge about the conditional statements (updated Aug 22')

کارکرد Functions

• اصول توابع Functions basics

• محدوده متغیرهای درون توابع و خارج از توابع Scope of Variables within Functions and Outside of Functions

• محدوده متغیرها - خلاصه متن سریع Scope of Variables - fast text summary

• let vs var - بالا بردن چیست؟ let vs var - what is hoisting?

• let vs var - خلاصه متن سریع let vs var - fast text summary

• عبارات تابع | تابع ناشناس Function Expressions | Anonymous function

• دانش خود را در مورد توابع تمرین کنید (به روز شده در 21 آوریل) Practise your knowledge about the functions (Updated Apr 21')

اشیاء Objects

• چه چیزهایی هستند و چگونه می توان اشیاء را ایجاد کرد؟ What are and how to create objects?

• اگر اسکریپت شما کار نمی کند، در بخش رویداد درباره رویداد بارگذاری تماشا کنید If your script is not working watch in Event section about onload event

• استفاده از تابع سازنده شی (کلاس) Using an Object Constructor Function (class)

• افزودن خصوصیات به اشیا با استفاده از نمونه اولیه Adding Properties to Objects using Prototype

• دانش خود را در مورد اشیا تمرین کنید (به روز شده در 19 اکتبر) Practise your knowledge about the objects (Updated Oct 19')

آرایه ها Arrays

• آرایه ها Arrays

• روش های مفید آرایه Useful Array Methods

• دانش خود را در مورد آرایه ها تمرین کنید Practise your knowledge about the Arrays

حلقه ها Loops

• حلقه چیست؟ حلقه while و do while What is loop? while and do while loop

• حلقه برای loop for

• آموزش را شکسته و ادامه دهید instruction break and continue

• حلقه for/in - برای پردازش اشیاء استفاده می شود loop for/in - used for processing objects

• تمرین: شیء آرگومان در تابع (تعداد نامحدود آرگومان) EXERCISE: Argument Object in function (unlimited number of arguments)

• مسابقه حلقه‌ها (به‌روزرسانی در 22 دسامبر) Loops quiz (Updated Dec 22')

DOM (مدل شیء سند) DOM (Document Object Model)

• DOM چیست/چگونه محتوای وب سایت خود را بدست آوریم What is DOM / how to obtain content of your website

• querySelector - دسترسی سریع و آسان به عناصر موجود در وب سایت querySelector - fast and easy accessing of elements on the website

• تغییر پویا سبک عناصر با استفاده از JS Changing dynamically styles of elements using JS

• افزودن و حذف عناصر از سند Adding and removing elements from document

• تمرین: داخل حلقه دیگری حلقه بزنید - جدول ضرب را چاپ کنید EXERCISE: Loop inside another Loop - printing out multiplication table

• دانش خود را در مورد DOM تمرین کنید Practise your knowledge about DOM

مناسبت ها Events

• مبانی رویدادها Basics of Events

• 'this' - دسترسی به عنصری که تابع رویداد را فراخوانی کرده است 'this' - accessing the element that invoked the event function

• چرا از کلمه کلیدی "این" استفاده می کنیم؟ Why do we use 'this' keyword?

• رویداد onload - درس بسیار مهم آن را نادیده نگیرید onload event - VERY IMPORTANT LESSON DO NOT SKIP IT

• افزودن و حذف شنونده رویداد Adding and removing event listener

• شی رویداد به عنوان یک آرگومان به طور خودکار به تابع ارسال می شود Event object as an automatically passed argument to function

• انتشار (تکثیر رویدادها) Propagating (multiplication of events)

• جلوگیری از عملکرد پیش‌فرض مرورگر برای مثال مسدود کردن منوی زمینه Preventing browser default action for example blocking context menu

• تمرین: رویداد onscroll - دکمه 'پرش به بالای وب سایت' EXERCISE: onscroll Event - 'jump to the top of website' button

• رویدادهای ماوس - کشیدن تصویر Mouse events - dragging the image

• setTimeout و setInterval - رویدادهای زمان بندی setTimeout and setInterval - Timing Events

• EXERCISE: ارتقاء کد از آخرین درس به روش شی گرا EXERCISE: upgrading the code from the last lesson to object oriented way

• دانش خود را در مورد رویدادها تمرین کنید Practise your knowledge about Events

اعتبار سنجی فرم ها با استفاده از رویدادها Validating Forms using Events

• چگونه فرم ها را تایید کنیم؟ اعتبار سنجی ورودی نوع متن با استفاده از رویدادهای مربوط به فرم How to validate forms? Validating text type input using form related events

• توقف ارسال فرم زمانی که هر داده ای در یک فرم صحیح نیست Stopping form from submitting when any data in a form is not correct

• چک باکس checkbox

• نمونه ورودی رادیویی بر اساس شرایط و ضوابط radio input on terms and condition example

• انتخاب کنید (جعبه ترکیبی) select (combo box)

• دانش خود را در مورد اعتبارسنجی فرم ها تمرین کنید Practise your knowledge about validating forms

رشته String

• دستکاری یک رشته با استفاده از متدهای String Manipulating a string using String's methods

• شکستن رشته در بسیاری از خطوط برای خوانایی و کاراکترهای خاص Breaking string in many lines for readability and special characters

RegExp RegExp

• مرجع RegExp Object RegExp Object reference

• عبارات با قاعده Regular expressions

• Regexp مطابقت با تابع exec Regexp match vs exec function

• تمرین: RegExp در مثال عملی - تست رمز عبور در ورودی EXERCISE: RegExp on practical example - testing password in input

تاریخ Date

• دستکاری زمان با شی Date Time manipulation with Date object

• تمرین: یک ساعت در وب سایت شما Exercise: A Clock on your website

بیسکویت ها Cookies

• کوکی ها چیست؟ What are cookies?

• عملکرد ایجاد کوکی ها Function for creating cookies

• عملکرد حذف کوکی ها Function for removing cookies

• تابعی برای یافتن مقدار کوکی با نام کلید Function for finding value of cookie by keyname

• تفسیر صحیح کاراکترهای خاص - روش EncodeURIcomponent Properly interpreting special characters - EncodeURIComponent method

پنجره گفتگو Dialog Window

• کادر تأیید و درخواست Confirm and prompt box

ریاضی Math

• گرد کردن اعداد و مفیدترین روش های ریاضی Rounding numbers and the most useful Math methods

• تصادفی بودن Randomness

• تمرین: نقل قول های تصادفی EXERCISE: Random quotes

محل Location

• چگونه مکان (URL) کاربر خود را بدست آوریم و تغییر دهیم؟ How to get and change location (URL) of your user?

تصاویر Images

• بارگیری تصاویر فقط در صورت نیاز - پهنای باند خود را ذخیره کنید و تجربه کاربری را بهبود بخشید Loading Images only when needed - save your bandwith and improve user experience

تمرینات Exercises

• نمایش اسلاید Slideshow

• نمایش اسلاید متحرک در JS با استفاده از انتقال ویژگی CSS Slideshow animated in JS using CSS property transition

• انیمیشن با استفاده از setInterval که در هر مرورگر وب پشتیبانی می شود Animation using setInterval that is supported in every web browser

• گالری تصاویر با ریز عکسها Image gallery with thumbnails

• نکته ابزار - چگونه یک جعبه راهنمایی ایجاد کنیم؟ Tooltip - how to create a hint box?

بسته شدن Closures

• بسته شدن در مثال عملی چیست؟ What are closures on practical example?

• بحث در مورد سرازیر شدن پشته در مورد بسته شدن Discussion on stackoverflow about closures

پیشرفته - موضوعات اختیاری Advanced - Optional Topics

• عملگرهای بیتی Bitwise operators

جایزه 1: اشکال زدایی BONUS 1: Debugging

• آتش سوزی Firebug

• اشکال زدایی با دستورات کنسول Debugging with console commands

• ابزار آنلاین عالی برای آزمایش و اشتراک گذاری کد شما Great online tools for testing and sharing your code

• حالت سخت strict mode

جایزه 2: بهترین شیوه ها BONUS 2: Best practises

• عملکرد کد Code performance

• نگهداری یک فایل js Keeping one .js file

• فشرده سازی فایل های JS Compressing JS files

• 7 اشتباه رایجی که باید از آنها اجتناب کنید 7 most common mistakes you should avoid

• تغییر رنگ‌شناسی IDE - چشمان خود را سالم نگه دارید Changing IDE coloristics - keep your eyes healthy

پاداش: ویژگی های جدید JS BONUS: New JS features

• اپراتور Nullish Coalescing - ?? Nullish Coalescing Operator - ??

• توابع فلش - نقشه برداری و فیلتر کردن آرایه ها arrow functions - mapping and filtering arrays

• صادرات در مقابل صادرات پیش فرض در JS - چگونه کد را در ماژول ها سازماندهی کنیم؟ export vs export default in JS - how to organize code into modules?

خلاصه Summary

• چند ایده در مورد جایی که می توانید از JS استفاده کنید Some ideas of where you can use JS

• بعد از این دوره چی؟ What after this course?

جایزه BONUS

• پاداش: پیوندهایی به دوره های دیگر من Bonus: Links to my other courses