لطفا جهت اطلاع از آخرین دوره ها و اخبار سایت در
کانال تلگرام
عضو شوید.
آموزش دستکاری DOM با جاوا اسکریپت مدرن آسان [ویدئو]
Learn DOM Manipulation with Easy Modern JavaScript [Video]
نکته:
آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره:
Document Object Model (DOM) نمایش دادههای اشیایی است که ساختار و محتوای یک سند را در وب تشکیل میدهند. این همان چیزی است که ما در هنگام کار با جاوا اسکریپت و تعامل پویا با سند از آن استفاده می کنیم.
وقتی کسی از Angular، Vue، React یا هر کتابخانه یا فریم ورک دیگری برای ایجاد برنامههای کاربردی وب مدرن استفاده میکند، DOM همان چیزی است که اینها در زیر هود استفاده میکنند.
این دوره شما را به عنوان یک توسعه دهنده جاوا اسکریپت متمایز می کند. شما درک روشنی از اصول DOM خواهید داشت. این دوره به شما کمک می کند تا بفهمید DOM چیست و چگونه به صورت پویا با یک سند HTML تعامل کنید. ما رابط های کاربری را با استفاده از جاوا اسکریپت مدرن و آسان با کلاس ها، ویژگی های خصوصی و API های DOM ایجاد خواهیم کرد.
تکنیکهای بهینهسازی را بیاموزید و از تکنیکهای بستهبندی آسان که شامل بارگذاری پویا CSS است، استفاده کنید. ما برای مستندات جستجو خواهیم کرد. به خاطر سپردن تمام رابط های DOM مورد نیاز نیست. هنگام ساخت برنامه بازی، نحوه تعامل با DOM و ورودی کاربر را از طریق شنوندگان رویداد خواهید فهمید. بدانید DOM چیست و چگونه به صورت پویا با یک سند HTML تعامل داشته باشید
توسعه رابط های کاربری تعاملی (UI) را بیاموزید
تکنیک های بهینه سازی را یاد بگیرید
از تکنیکهای بستهبندی آسان که شامل بارگذاری پویا CSS است، استفاده کنید
تعامل با DOM و ورودی کاربر از طریق شنوندگان رویداد
تقویت مفاهیم و مهارت های برنامه نویسی شی گرا این دوره برای فارغ التحصیلان بوت کمپ، فارغ التحصیلان علوم کامپیوتر، دانشجویان مبتدی جاوا اسکریپت، دانش آموزان متوسط جاوا اسکریپت و دانش آموزان پیشرفته جاوا اسکریپت است. این یک دوره مبتدی و دوستانه است. از جاوا اسکریپت مدرن با کلاسها، ویژگیهای خصوصی و APIهای DOM برای ایجاد رابطهای کاربری استفاده کنید * یک بازی تعاملی بسازید که به شما در درک اصول مدل شیء سند کمک میکند * یاد بگیرید که کد خود را بهینه و بستهبندی کنید.
سرفصل ها و درس ها
خوش آمدی
Welcome
DOM چیست؟
What is the DOM?
DOM چیست؟
What is the DOM?
اولین به روز رسانی DOM شما
Your First DOM Update
اولین به روز رسانی DOM شما
Your First DOM Update
پروژه دوره: کد DOM Adventure
Course Project: Code DOM Adventure
پروژه دوره: کد DOM Adventure
Course Project: Code DOM Adventure
اصول DOM
DOM Fundamentals
HTML و DOM
HTML and the DOM
HTML و DOM
HTML and the DOM
استانداردهای DOM
DOM Standards
استانداردهای DOM
DOM Standards
BOM
The BOM
BOM
The BOM
CSSOM
The CSSOM
CSSOM
The CSSOM
درخت (ساختار داده)
The Tree (Data Structure)
درخت (ساختار داده)
The Tree (Data Structure)
درخت DOM
The DOM Tree
درخت DOM
The DOM Tree
DOM و جاوا اسکریپت
The DOM and JavaScript
DOM و جاوا اسکریپت
The DOM and JavaScript
اصول DOM
DOM Fundamentals
کد DOM Adventure
Code DOM Adventure
معماری اپلیکیشن
App Architecture
معماری اپلیکیشن
App Architecture
راه حل چالش: صفحه خروجی
Challenge Solution: The Exit Screen
راه حل چالش: صفحه خروجی
Challenge Solution: The Exit Screen
اسکلت برنامه
App Skeleton
اسکلت برنامه
App Skeleton
فایل Splash Screen
The Splash Screen File
فایل Splash Screen
The Splash Screen File
از جمله دارایی ها
Including the Assets
از جمله دارایی ها
Including the Assets
کد DOM Adventure
Code DOM Adventure
ایجاد عناصر
Creating Elements
سیم کشی عنصر Splash Screen
Wiring the Splash Screen Element
سیم کشی عنصر Splash Screen
Wiring the Splash Screen Element
ایجاد عناصر در زمان اجرا
Creating Elements at Runtime
ایجاد عناصر در زمان اجرا
Creating Elements at Runtime
افزودن عرض رشته های HTML Append()
Appending HTML Strings Width Append()
افزودن عرض رشته های HTML Append()
Appending HTML Strings Width Append()
اضافه کردن گره ها با Append یا AppendChild
Appending Nodes with Append or AppendChild
اضافه کردن گره ها با Append یا AppendChild
Appending Nodes with Append or AppendChild
ترتیب اسکریپت مهم است
Script Order Matters
ترتیب اسکریپت مهم است
Script Order Matters
ایجاد عناصر
Creating Elements
CSS پویا
Dynamic CSS
تعیین کلاس ها به عناصر
Specifying Classes to Elements
تعیین کلاس ها به عناصر
Specifying Classes to Elements
کار با استاتیک استایل
Working with Static Styles
کار با استاتیک استایل
Working with Static Styles
تعریف سبک ها در زمان اجرا
Defining Styles at Runtime
تعریف سبک ها در زمان اجرا
Defining Styles at Runtime
پرس و جو از DOM برای یافتن عناصر
Querying the DOM to Find Elements
پرس و جو از DOM برای یافتن عناصر
Querying the DOM to Find Elements
CSS پویا
Dynamic CSS
پروفایل Pixel Pipeline
Profiling the Pixel Pipeline
خط لوله پیکسل
The Pixel Pipeline
خط لوله پیکسل
The Pixel Pipeline
شناسایی شیوه های بد
Identifying Bad Practices
شناسایی شیوه های بد
Identifying Bad Practices
پروفایل کردن عملکرد زمان اجرا
Profiling Runtime Performance
پروفایل کردن عملکرد زمان اجرا
Profiling Runtime Performance
دستهبندی بهروزرسانیهای DOM با قطعات سند
Batching DOM Updates with Document Fragments
دستهبندی بهروزرسانیهای DOM با قطعات سند
Batching DOM Updates with Document Fragments
گره های بسیار زیاد
Too Many Nodes
گره های بسیار زیاد
Too Many Nodes
پروفایل Pixel Pipeline
Profiling the Pixel Pipeline
انیمیشن با استفاده از تغییرات DOM
Animation Using DOM Changes
حذف گره ها از DOM
Removing Nodes from the DOM
حذف گره ها از DOM
Removing Nodes from the DOM
قاب های انیمیشن
The Animation Frames
قاب های انیمیشن
The Animation Frames
روش متحرک سازی ما
Our Animate Method
روش متحرک سازی ما
Our Animate Method
انیمیشن کاری ما!
Our Working Animation!
انیمیشن کاری ما!
Our Working Animation!
توقف انیمیشن
Stopping the Animation
توقف انیمیشن
Stopping the Animation
انیمیشن با استفاده از تغییرات DOM
Animation Using DOM Changes
برنامه ریزی تغییرات DOM با یک مدل حالت
Planning DOM Changes with a State Model
بیایید سطح را بسازیم!
Let's Build the Level!
بیایید سطح را بسازیم!
Let's Build the Level!
2. مدل ایالتی ما برای کنترل DOM از ایالت.
2. Our State Model to Control the DOM from State.
2. مدل ایالتی ما برای کنترل DOM از ایالت.
2. Our State Model to Control the DOM from State.
عادی سازی ویژگی ها
Normalizing Attributes
عادی سازی ویژگی ها
Normalizing Attributes
کلاس سطح ما
Our Level Class
کلاس سطح ما
Our Level Class
آرایه ها، مراجع، و شکاف های خالی غیر قابل تکرار
Arrays, References, and Non-Iterable Empty Slots
آرایه ها، مراجع، و شکاف های خالی غیر قابل تکرار
Arrays, References, and Non-Iterable Empty Slots
ساختن ایالت ما با یک نفر زشت
Building Our State with an Ugly Oneliner
ساختن ایالت ما با یک نفر زشت
Building Our State with an Ugly Oneliner
برای انسان ها کد بنویسید و کد خود را عادی کنید
Write Code for Humans and Normalize Your Code
برای انسان ها کد بنویسید و کد خود را عادی کنید
Write Code for Humans and Normalize Your Code
رندر کردن عنصر سطح
Rendering the Level Element
رندر کردن عنصر سطح
Rendering the Level Element
هوم، اوضاع به هم ریخته است
Hmm, Things are Getting Messy
هوم، اوضاع به هم ریخته است
Hmm, Things are Getting Messy
برنامه ریزی تغییرات DOM با یک مدل حالت
Planning DOM Changes with a State Model
بسته بندی آسان
Easy Bundling
بسته بندی آسان
Easy Bundling
بسته بندی آسان
Easy Bundling
بسته با اسکریپت شروع
Bundle with the Start Script
بسته با اسکریپت شروع
Bundle with the Start Script
سرور توسعه دهنده ما
Our Dev Server
سرور توسعه دهنده ما
Our Dev Server
بیایید از ماژول های DOMContentLoaded و ES (ESM) استفاده کنیم
Let's Use DOMContentLoaded and ES Modules (ESM)
بیایید از ماژول های DOMContentLoaded و ES (ESM) استفاده کنیم
Let's Use DOMContentLoaded and ES Modules (ESM)
عناصر سبک پویا با CSS به عنوان واردات ESM
Dynamic Style Elements with CSS as ESM Imports
عناصر سبک پویا با CSS به عنوان واردات ESM
Dynamic Style Elements with CSS as ESM Imports
بسته بندی آسان
Easy Bundling
بهروزرسانیهای DOM با توسعه پایه دولت محور
DOM Updates with Basic State-Driven Development
طراحی شکل کشور ما
Designing the Shape of Our State
طراحی شکل کشور ما
Designing the Shape of Our State
راهاندازی وضعیت ما در آمادهسازی برای ارائه عناصر DOM
Initializing Our State in Preparation to Render DOM Elements
راهاندازی وضعیت ما در آمادهسازی برای ارائه عناصر DOM
Initializing Our State in Preparation to Render DOM Elements
به روز رسانی های DOM از ایالت
DOM Updates from State
به روز رسانی های DOM از ایالت
DOM Updates from State
به روز رسانی به State در DOM منعکس می شود
Updates to State are Reflected in the DOM
به روز رسانی به State در DOM منعکس می شود
Updates to State are Reflected in the DOM
مدلسازی و رندر کردن دیوارهای چیپ ما
Modeling and Rendering Our Chip Walls
مدلسازی و رندر کردن دیوارهای چیپ ما
Modeling and Rendering Our Chip Walls
بهروزرسانیهای DOM با توسعه پایه دولت محور
DOM Updates with Basic State-Driven Development
بازیکن در حال تعامل با ورودی کاربر
The Player Interacting with User Input
بازیکن - رویکرد فنی
The Player - Tech Approach
بازیکن - رویکرد فنی
The Player - Tech Approach
رندر کردن پخش کننده با DOM
Rendering the Player with the DOM
رندر کردن پخش کننده با DOM
Rendering the Player with the DOM
مدل جعبه و سبک های جهانی
Box Model and Global Styles
مدل جعبه و سبک های جهانی
Box Model and Global Styles
دستکاری سبک های درون خطی با DOM
Manipulating Inline Styles with the DOM
دستکاری سبک های درون خطی با DOM
Manipulating Inline Styles with the DOM
حرکت بازیکن با تغییر وضعیت آن
Moving the Player by Changing its State
حرکت بازیکن با تغییر وضعیت آن
Moving the Player by Changing its State
شنوندگان رویداد صفحه کلید DOM
DOM Keyboard Event Listeners
شنوندگان رویداد صفحه کلید DOM
DOM Keyboard Event Listeners
نقشه برداری و فیلتر کردن داده های رویدادهای DOM
Mapping and Filtering DOM Events Data
نقشه برداری و فیلتر کردن داده های رویدادهای DOM
Mapping and Filtering DOM Events Data
آیا بازیکن می تواند حرکت کند؟ - رویکرد فنی
Can the Player Move? - Tech Approach
آیا بازیکن می تواند حرکت کند؟ - رویکرد فنی
Can the Player Move? - Tech Approach
جلوگیری از همپوشانی عناصر DOM
Preventing Overlapping DOM Elements
جلوگیری از همپوشانی عناصر DOM
Preventing Overlapping DOM Elements
فریم های تعاملی را آماده کنید
Prepare Interactive Frames
فریم های تعاملی را آماده کنید
Prepare Interactive Frames
بازنشانی ClassName و افزودن فریم های تعاملی در رویدادهای DOM
Resetting ClassName and Adding Interactive Frames on DOM Events
بازنشانی ClassName و افزودن فریم های تعاملی در رویدادهای DOM
Resetting ClassName and Adding Interactive Frames on DOM Events
فریم ها را بدون جابجایی عنصر در رویدادهای DOM به روز کنید
Update Frames without Moving the Element on DOM Events
فریم ها را بدون جابجایی عنصر در رویدادهای DOM به روز کنید
Update Frames without Moving the Element on DOM Events
بازیکن در حال تعامل با ورودی کاربر
The Player Interacting with User Input
DOM تعاملی، دیوارهای شکسته
Interactive DOM, Breaking Walls
افزودن عناصر تصادفی DOM
Adding Random DOM Elements
افزودن عناصر تصادفی DOM
Adding Random DOM Elements
رویدادهای DOM هنگام فشار دادن کلید Space
DOM Events When Pressing the Space Key
رویدادهای DOM هنگام فشار دادن کلید Space
DOM Events When Pressing the Space Key
ایجاد عناصر در رویدادهای DOM
Creating Elements on DOM Events
ایجاد عناصر در رویدادهای DOM
Creating Elements on DOM Events
مانیفست Z-Index
Z-Index Manifest
مانیفست Z-Index
Z-Index Manifest
شناسه عناصر پویا با DOM
Dynamic Element IDs with the DOM
شناسه عناصر پویا با DOM
Dynamic Element IDs with the DOM
تعامل با سایر عناصر با استفاده از مدل حالت
Interacting with Other Elements Using the State Model
تعامل با سایر عناصر با استفاده از مدل حالت
Interacting with Other Elements Using the State Model
دیوارهای اطراف را بردارید
Remove Surrounding Walls
دیوارهای اطراف را بردارید
Remove Surrounding Walls
DOM تعاملی، دیوارهای شکسته
Interactive DOM, Breaking Walls
پورتال خروج از بازی
Portal to Exit the Game
افزودن پورتال به صفحه
Adding the Portal to the Screen
افزودن پورتال به صفحه
Adding the Portal to the Screen
عناصر تصادفی روی صفحه
Random Elements on the Screen
عناصر تصادفی روی صفحه
Random Elements on the Screen
گروه بندی به روز رسانی های درون خطی CSS DOM
Grouping Inline CSS DOM Updates
گروه بندی به روز رسانی های درون خطی CSS DOM
Grouping Inline CSS DOM Updates
خروج از بازی وقتی دو عنصر از مسیرها عبور می کنند
Exiting the Game When Two Elements Cross Paths
خروج از بازی وقتی دو عنصر از مسیرها عبور می کنند
Exiting the Game When Two Elements Cross Paths
چالش: نوبت شما برای ساختن صفحه خروجی است
Challenge: Your Turn to Build the Exit Screen
چالش: نوبت شما برای ساختن صفحه خروجی است
Challenge: Your Turn to Build the Exit Screen
راه حل چالش: نوبت من برای ساختن صفحه خروج
Challenge Solution: My Turn to build the Exit Screen
راه حل چالش: نوبت من برای ساختن صفحه خروج
Challenge Solution: My Turn to build the Exit Screen
پنهان کردن پورتال پشت دیوار
Hiding the Portal Behind a Wall
پنهان کردن پورتال پشت دیوار
Hiding the Portal Behind a Wall
حذف شنوندگان رویداد DOM
Removing DOM Event Listeners
حذف شنوندگان رویداد DOM
Removing DOM Event Listeners
پورتال خروج از بازی
Portal to Exit the Game
متحرک کردن همه چیز
Animating All the Things
رندر کردن Splash Screen
Rendering the Splash Screen
رندر کردن Splash Screen
Rendering the Splash Screen
تعویض صفحه نمایش
Swapping Screens
تعویض صفحه نمایش
Swapping Screens
متحرک سازی پورتال
Animating the Portal
متحرک سازی پورتال
Animating the Portal
کیت CSS – انیمیشن ها
CSS Kit – Animations
کیت CSS – انیمیشن ها
CSS Kit – Animations
درخواست قاب انیمیشن و تاخیر در انیمیشن
Request Animation Frame and Delaying Animations
درخواست قاب انیمیشن و تاخیر در انیمیشن
Request Animation Frame and Delaying Animations
متحرک سازی با کلاس CSS والدین
Animating with a Parent CSS Class
متحرک سازی با کلاس CSS والدین
Animating with a Parent CSS Class
جلوه تلویزیون قدیمی
Old TV Effect
جلوه تلویزیون قدیمی
Old TV Effect
متحرک سازی با انیمیشن تاخیری
Animating with Delayed Animation
متحرک سازی با انیمیشن تاخیری
Animating with Delayed Animation
بهینه سازی فریم ها
Optimizing Frames
بهینه سازی فریم ها
Optimizing Frames
بهینه سازی فریم نهایی
Final Frame Optimizations
بهینه سازی فریم نهایی
Final Frame Optimizations
متحرک کردن همه چیز
Animating All the Things
جلوه های صوتی DOM
DOM Sound Effects
عناصر صوتی پویا
Dynamic Audio Elements
عناصر صوتی پویا
Dynamic Audio Elements
جلوه های صوتی تعاملی با رویدادهای DOM
Interactive Sound Effects with DOM Events
جلوه های صوتی تعاملی با رویدادهای DOM
Interactive Sound Effects with DOM Events
جلوه های صوتی تاخیری با تماس و رویدادهای DOM
Delayed Audio Effects with Callbacks and DOM Events
جلوه های صوتی تاخیری با تماس و رویدادهای DOM
Delayed Audio Effects with Callbacks and DOM Events
سخنرانی پایانی، جلوه صوتی نهایی! خروج از بازی
Final Lecture, Final Sound Effect! Exiting the Game
سخنرانی پایانی، جلوه صوتی نهایی! خروج از بازی
Final Lecture, Final Sound Effect! Exiting the Game
نمایش نظرات