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

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

معرفی Introduction

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

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

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

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

ویرایشگر Editor

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

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

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

مبانی Basics

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

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

• نظرات Comments

• متغیرها Variables

اپراتورها Operators

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

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

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

شرایط Conditions

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

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

• تعویض Switch

کارکرد Functions

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

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

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

اشیاء Objects

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

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

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

آرایه ها Arrays

• آرایه ها Arrays

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

حلقه ها Loops

• حلقه چیست؟ حلقه while و do while What is a 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)

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

مناسبت ها Events

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

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

• رویداد 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

اعتبار سنجی فرم ها با استفاده از رویدادها 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)

رشته String

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

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

RegExp RegExp

• عبارات با قاعده 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

• پلتفرم به عنوان یک تابع سرویس برای یافتن مقدار کوکی با نام کلید (PaaS) Platform as a Service Function for finding value of cookie by keyname(PaaS)

• تفسیر صحیح کاراکترهای خاص - روش 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 bandwidth 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?

پیشرفته - موضوعات اختیاری 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

خلاصه Summary

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