آموزش JavaScript

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

مقدمه Introduction

• خوش آمدی Welcome

• نحوه استفاده از پرونده های تمرینی How to use the exercise files

1. JavaScript: مقدمه 1. JavaScript: An Introduction

• JavaScript چیست؟ What is JavaScript?

• چگونه JavaScript با Java ارتباط دارد؟ How does JavaScript relate to Java?

• پیمایش در منظره JavaScript Navigating the JavaScript landscape

2. مبانی 2. The Basics

• ابزارهای توسعه JavaScript Tools for JavaScript development

• معرفی کنسول مرورگر Introducing the browser console

• جاوا اسکریپت درون خطی را به یک سند HTML اضافه کنید Add inline JavaScript to a HTML document

• JavaScript را در یک پرونده خارجی اضافه کنید Add JavaScript in an external file

• نحوه نوشتن JavaScript: یک دوره خرابی How to write JavaScript: A crash course

3. کار با داده ها 3. Working with data

• متغیرها: ظروف همه جاوا اسکریپت Variables: The catch-all containers of JavaScript

• انواع داده ها در JavaScript Data types in JavaScript

• عملگرهای ریاضی و ریاضیات Arithmetic operators and math

• کار با رشته ها و شماره ها Working with strings and numbers

• عبارات شرط و منطق Conditional statements and logic

• شرایط پیشرفته و منطق Advanced conditions and logic

• آرایه ها Arrays

• خواص و روشها در آرایه ها Properties and methods in arrays

4- توابع و اشیاء 4. Functions and Objects

• توابع در JavaScript Functions in JavaScript

• یک کارکرد اساسی بسازید Build a basic function

• آرگومان ها را به عملکرد اضافه کنید Add arguments to the function

• مقادیر را از یک عملکرد بازگردانید Return values from a function

• توابع ناشناس Anonymous functions

• بلافاصله عبارات کاربردی را فراخوانی کنید Immediately invoked functional expressions

• دامنه متغیر Variable scope

• ES2015: let and const ES2015: let and const

• از اشیاء استفاده کنید Make sense of objects

• سازندگان شی Object constructors

• نوار کناری: نمادهای نقطه و براکت Sidebar: Dot and bracket notation

• بستن Closures

5- JavaScript و DOM ، قسمت 1: تغییر عناصر DOM 5. JavaScript and the DOM, Part 1: Changing DOM Elements

• DOM: مدل شیء سند DOM: The document object model

• عناصر هدف در DOM با روش querySelector Target elements in the DOM with querySelector methods

• دسترسی و تغییر عناصر Access and change elements

• به کلاسها دسترسی پیدا کرده و تغییر دهید Access and change classes

• دسترسی و تغییر ویژگی ها Access and change attributes

• عناصر DOM را اضافه کنید Add DOM elements

• CSS درون خطی را روی یک عنصر اعمال کنید Apply inline CSS to an element

6. پروژه: یک ساعت آنالوگ ایجاد کنید 6. Project: Create an Analog Clock

• ایجاد یک ساعت آنالوگ: خرابی پروژه Create an analog clock: Project breakdown

• برای جابجایی دست ساعت از CSS استفاده کنید Use CSS to move clock hands

• برای جا به جایی دستی ساعت از JavaScript استفاده کنید Use JavaScript to move clock hands

• ساعت ، دقیقه و دوم فعلی را با موضوع Date () دریافت کنید Get the current hour, minute, and second with the Date() object

• زمان فعلی را با استفاده از ریاضی فانتزی نشان دهید Show the current time using fancy math

• ساعت را به ثانیه دوم تبدیل کنید Make the clock move forward second by second

• مشکل مزاحم "بازگشت به صفر" را حل کنید Solve the pesky "return to zero" problem

7. JavaScript و DOM ، قسمت 2: رویدادها 7. JavaScript and the DOM, Part 2: Events

• وقایع DOM چیست؟ What are DOM events?

• برخی از وقایع معمولی DOM Some typical DOM events

• عملکردهای فعال را با مجری رویدادها انجام می دهد Trigger functions with event handlers

• شنوندگان رویداد را اضافه و استفاده کنید Add and use event listeners

• استدلال را از طریق شنوندگان رویداد عبور دهید Pass arguments via event listeners

8. پروژه: تست سرعت تایپ 8. Project: Typing Speed Tester

• Rundown از نشانه گذاری HTML Rundown of HTML markup

• از شنوندگان رویداد برای تشخیص تایپ استفاده کنید Use event listeners to detect typing

• یک تایمر حسابگرانه بسازید Build a count-up timer

• یک عملکرد کمکی برای صفرهای پیشرو ایجاد کنید Build a helper function for leading zeros

• خطاهای املایی را با تطبیق رشته ها تشخیص دهید Detect spelling errors by matching strings

• زمان انجام آزمایش تایمر را متوقف کنید Stop the timer when the test is done

• یک دکمه تنظیم مجدد اضافه کنید Add a reset button

9. حلقه ها 9. Loops

• حلقه ها Loops

• حلقه زدن از طریق آرایه ها Looping through arrays

• حلقه ها را بشکنید و ادامه دهید Break and continue loops

10. پروژه: نشانه گذاری تصاویر پاسخگو خودکار 10. Project: Automated Responsive Images Markup

• تجزیه پروژه Project breakdown

• خرابکاری از راه اندازی پروژه Rundown of project setup

• تمام تصاویر موجود در سند را حلقه کنید Loop through all images in the document

• برای تولید مقدار srcset ، تابع ایجاد کنید Create function to generate srcset value

• شیء را با مقادیر اندازه های مختلف ایجاد کنید Create object containing different sizes values

• نشانه گذاری IMG را با ویژگی های srcset و اندازه به روز کنید Update img markup with srcset and sizes attributes

11. عیب یابی ، اعتبار سنجی و به حداقل رساندن JavaScript 11. Troubleshooting, Validating, and Minifying JavaScript

• اعتبار سنجی و عیب یابی جاوا اسکریپت JavaScript validation and troubleshooting

• عیب یابی JavaScript Troubleshooting JavaScript

• اطلاعات عیب یابی را به کنسول ارسال کنید Send troubleshooting info to the console

• از طریق JavaScript خود با ابزار مرورگر قدم بگذارید Step through your JavaScript with browser tools

• خط اسکریپت آنلاین Online script linting

• پوشش خودکار اسکریپت Automate script linting

• کوچک سازی اسکریپت آنلاین Online script minification

• کوچک سازی خودکار اسکریپت Automate script minification

12. فصل پاداش: از مربی سؤال کنید 12. Bonus Chapter: Ask the Instructor

• توابع فلش چیست؟ What are arrow functions?

• من اول یاد می گیرم؟ جاوا اسکریپت؟ TypeScript؟ What do I learn first? JavaScript? TypeScript?

• چگونه می توانم رشته ها را در ES2015 بنویسم؟ How do I write strings in ES2015?

• ٪ نماد چه کاری انجام می دهد؟ What does the % symbol do?

• چرا از روشهای querySelector () و querySelectorAll () استفاده می کنید؟ Why use the querySelector() and querySelectorAll() methods?

نتیجه Conclusion

• مراحل بعدی Next Steps