آموزش Document Object Model Series 2021 - قسمت 4: رویدادهای DOM (ایجاد، گوش دادن و واکنش به رویدادها)

Document Object Model Series 2021 - Part 4: DOM Events (creating, listening and reacting to events)

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره:

به این مجموعه اشتراک مهارت در مدل شیء سند خوش آمدید. این   چهارمین  کلاس در DOM است --  رویدادهای DOM 

چه چیزی را در این کلاس Skillshare خاص پوشش می دهیم؟

ما تعداد زیادی از اطلاعات را در این مجموعه پوشش خواهیم داد، اما برای قسمت 4 می‌خواهید در کار با رویدادها در DOM مسلط شوید.

کلیک کنید، لمس کنید، بارگیری کنید، بکشید، تغییر دهید، وارد کنید، خطا کنید، اندازه را تغییر دهید - لیست رویدادهای احتمالی DOM طولانی است. رویدادها می توانند در هر بخشی از یک سند، چه توسط تعامل کاربر یا توسط مرورگر، فعال شوند. آنها فقط در یک مکان شروع و ختم نمی شوند. آنها از طریق سند، در یک چرخه حیات خودشان جریان دارند.

گوش دادن و پاسخ به رویدادها یک مهارت اساسی برای ساختن نرم افزار برای وب است. و خبر خوب برای ما، این است که DOM دارای یک سیستم رویداد داخلی قدرتمند است، و با این حال، بسیاری از توسعه دهندگان درک بسیار ابتدایی از سیستم رویداد DOM دارند و فقط سطح قدرتی را که در دسترس ما است، خراش می دهند. span>

در این کلاس به چند مفهوم مهم مانند:

نگاه خواهیم کرد
  • نحوه گوش دادن به رویدادها
  • نحوه پاسخگویی به رویدادها
  • اطلاعاتی که در شئ رویداد در دسترس ما است
  • و یک دسته دیگر!

من نمی توانم صبر کنم.

بیایید شروع کنیم

--- در صورت تعجب، اجازه دهید اطلاعات بیشتری درباره DOM با شما به اشتراک بگذارم 

با شروع بیشتر و بیشتر کدنویسی، با اصطلاح "مدل شیء سند" یا به اختصار DOM مواجه خواهید شد.

همانطور که مشخص است، DOM یک مفهوم بسیار مهم در توسعه وب است. بدون آن، ما نمی‌توانیم   به صورت پویا صفحات HTML   را در مرورگر تغییر دهیم.

چی؟

درک DOM شما را برای تبدیل شدن به یک برنامه نویس جلویی عالی مجهز می کند. در واقع راه هایی برای دسترسی، تغییر و نظارت بر عناصر مختلف یک صفحه HTML در اختیار شما قرار می دهد. Document Object Model فراتر می رود، زیرا می تواند به شما کمک کند   افزایش های غیرضروری در زمان اجرای اسکریپت را کاهش دهید.

در این مجموعه در Skillshare، یاد خواهید گرفت که چگونه ایده های خلاقانه، متفاوت و پویا را در وب سایت خود پیاده سازی کنید. به توسعه فرانت‌اند مسلط شوید و نیمی از راه را برای تبدیل شدن به یک توسعه‌دهنده وب تمام پشته دارید. از طریق درک کنترل را در دست بگیرید.   ارائه یک تجربه وب تعاملی چالش برانگیز است.

در این مجموعه، می‌توانید به سؤالاتی مانند این پاسخ دهید: مرورگر دقیقاً چگونه HTML، CSS و جاوا اسکریپت شما را مدل می‌کند؟ از کجا به این مدل دسترسی پیدا کنیم؟ با این مدل چه کنیم؟ چگونه می توانیم این مدل را تغییر دهیم؟ با درک این سوالات، می توانید به DOM دسترسی پیدا کنید و بهتر است آن را دستکاری کنید! به عبارت دیگر، می‌توانید برنامه‌های پویا ایجاد کنید که تعامل و تجربه کاربر را بهبود می‌بخشد.

کل این سری Skillshare DOM چه چیزی را پوشش می دهد؟

این مجموعه همه چیزهایی را که برای شروع کدنویسی سایت های پویا به تنهایی نیاز دارید را ارائه می دهد. این اصول و اصول عملی درستی را در مورد DOM به شما می دهد.   می توان آن را به تنهایی   برای دستیابی به اهداف خود در نظر گرفت. مطمئن باشید، شما از این سری با درک اولیه از DOM و تجربه عملی بیرون خواهید آمد. با هم کد می نویسیم، با هم می خندیم و گاهی با هم گریه می کنیم.

این مجموعه شما را به نقطه‌ای می‌برد که می‌دانید DOM چیست، چرا به آن نیاز داریم، چگونه به آن دسترسی داشته باشیم، کجا آن را پیدا کنیم و چگونه آن را دستکاری کنیم. این دانش عالی است.

در این سری DOM، با تسلط بر Document Object Model، با توسعه وب جلویی آشنا خواهید شد.

چرا باید درباره DOM بدانید؟

مدل شیء سند (DOM) بخشی ضروری از تعاملی کردن وب سایت ها است. این رابطی است که به یک زبان برنامه نویسی اجازه می دهد محتوا، ساختار و سبک یک وب سایت را دستکاری کند. جاوا اسکریپت زبان برنامه نویسی سمت سرویس گیرنده است که در یک مرورگر اینترنتی به DOM متصل می شود.

اولین قدم در درک DOM، درک چیستی آن است. چه تفاوتی با نشانه گذاری HTML شما دارد؟ چه تفاوتی با جاوا اسکریپت دارد؟ از آنجا، شما شروع به کاوش و آزمایش ابزارهایی برای دسترسی به DOM خواهید کرد. شما استراتژی های ساده و در عین حال بسیار قدرتمند برای دسترسی و عبور از DOM را یاد خواهید گرفت. ما در اینجا متوقف نمی‌شویم، اما سپس وارد کارهای پیشرفته‌تری مانند دستکاری DOM می‌شویم (از طریق روش‌های ایجاد و حذف که توسط DOM API به ما داده شده است).

دانش DOM برای درک چگونگی بهبود صفحه وب شما بسیار مفید است.

در پایان این سری DOM، با به دست آوردن درک درستی از جایی که می‌توانید آن را پیدا کنید، چگونه می‌توانید به آن دسترسی داشته باشید، و مهمتر از آن، چگونه می‌توانید آن را دستکاری کنید، می‌توانید DOM را «صحبت کنید». ما در هر سخنرانی عمیق‌تر می‌شویم، در مورد چیزهایی مانند Nodes، تفاوت بین HTTPCollections در مقابل NodeLists، و کلی چیزهای دیگر می‌آموزیم!

از طریق مثال‌های عملی، این مجموعه به شما کمک می‌کند تا DOM را تکه تکه درک کنید. و ما از جدیدترین و بهترین ویژگی‌های جاوا اسکریپت و مرورگرها (مانند API حذف جدید) در طول مسیر استفاده می‌کنیم تا بتوانید از رقبای خود جلوتر بمانید.

*** مهمترین دوره توسعه وب در Skillshare ***

برنامه نویسان موفق بیشتر از یادگیری تکه ای چند خط کد می دانند. آنها همچنین اصول اولیه نحوه نمایش کد HTML و عملکرد مرورگر شما در پشت صحنه را می دانند. اگر می خواهید یک توسعه دهنده فول استک شوید، باید بدانید که چگونه با DOM کنار بیایید. شما باید بدانید که چگونه به آن دسترسی داشته باشید، چگونه آن را دستکاری کنید، و چگونه به صورت پویا با آن تعامل داشته باشید.

من می‌خواهم شما به یک استاد بزرگ برنامه‌نویسی پیشرفته تبدیل شوید.

می‌خواهم بتوانید آنچه را که در این کلاس‌ها می‌آموزید در صفحه وب خود اعمال کنید.

کل این سری DOM برای شما عالی است.

این مجموعه یک نمای منحصر به فرد به شما می دهد

درک DOM یک موضوع بزرگ است. برای اینکه شما را سریع‌تر بیاورم، من   ماه‌ها   را به این فکر کرده‌ام که محتوا را کجا متمرکز کنم و چگونه آن را در بهترین   به شما ارائه دهم. span>   راه ممکن.

پس از شرکت در کلاس‌های DOM من، «چرا» کارها را یاد خواهید گرفت و نه فقط «چگونه». درک اصول DOM مهم است زیرا امکانات بی نهایتی را در اختیار شما قرار می دهد. با داشتن این دانش، می‌توانید برنامه‌هایی ایجاد کنید که داده‌های صفحه را بدون نیاز به به‌روزرسانی به‌روزرسانی می‌کنند. شما قادر خواهید بود برنامه هایی ایجاد کنید که توسط کاربر قابل تنظیم هستند. حتی می توانید به کاربر اجازه دهید عناصر را بکشد، جابجا کند و حذف کند.

آیا می توانید ببینید که DOM چقدر مهم است؟

این سری Skillshare   چگونه متفاوت است؟

کلاس های Skillshare بسیار خوبی وجود دارد که بر توسعه وب تمرکز دارند. افسوس که آنها هرگز وارد جزئیات نحوه عملکرد مدل شیء سند در پشت صحنه نمی شوند - مهارتی که هر توسعه دهنده تمام پشته باید بر آن مسلط باشد.

در این سری DOM، من روی توسعه وب واقعی در قسمت جلویی تمرکز می‌کنم. این شامل درک اینکه چه گره هایی هستند، نگاه کردن به گره سند (به هر حال این با شی سند متفاوت است)، درک ساختار درختی DOM، انواع مختلفی از گره ها وجود دارد، و چگونه می توانید از DOM برای دسترسی به عناصر استفاده کنید. در صفحه خود قرار دهید و آنها را دستکاری کنید.

تمرین

را عالی می کند

نظریه انتزاعی و دشوار است. به همین دلیل است که من عاشق مثال های عملی هستم. ما از اولین سخنرانی تا آخرین کلاس با هم کد می نویسیم.

آیا این کلاس برای شماست؟

بله.

مهم نیست در مسیر توسعه وب خود کجا هستید. برای همه سطوح مناسب است.

هنوز مطمئن نیستید؟ اگر در هر یک از این دسته ها قرار دارید، این دوره برای شما مناسب است:

  • دانش آموز شماره 1:   شما می خواهید در دنیای برنامه نویسی مشغول شوید. یادگیری اصول HTTP، CSS و نحوه استفاده از جاوا اسکریپت برای تغییر یک صفحه وب، نقطه شروع تبدیل شدن به یک توسعه دهنده کامل است.
  • دانش آموز شماره 2:   شما می خواهید بدانید که چگونه توسعه دهندگان موفق وب سایت های پویا را ایجاد می کنند که با کاربر درگیر شده و آنها را از رقبا جلوتر قرار می دهد.
  • دانش آموز شماره 3:   شما می خواهید درک کاملی از توسعه وب جلویی به دست آورید.
  • دانشجوی شماره 4:   می‌خواهید از چارچوب‌های پشتیبان مانند Node.js استفاده کنید، اما می‌خواهید ابتدا نحوه استفاده از جاوا اسکریپت در قسمت جلویی صفحه وب خود را بدانید.
  • دانش آموز شماره 5: شما تا حدودی می دانید که Document Object Model چیست، اما اطلاعات کمی در مورد نحوه عملکرد آن در پشت صحنه، و نحوه پیاده سازی عملی آن در برنامه ها دارید.
  • دانش‌آموز شماره 6:   شما در کلاس‌های دیگری در زمینه توسعه وب شرکت کرده‌اید، اما احساس نمی‌کنید که توسعه جلویی را درک کرده‌اید.

چرا از هم اکنون شروع کنید؟

در همین لحظه، رقبای شما در حال یادگیری نحوه تبدیل شدن به توسعه دهندگان وب بهتر هستند.

توسعه وب یک موضوع داغ در حال حاضر است. اما شما یک مزیت مشخص دارید. این دوره موضوعات یادگیری به یاد ماندنی، تاکتیک های عملی و نمونه های واقعی را ارائه می دهد.

شما را در کلاس می بینیم.

پرش به بالا!  

این چهارمین کلاس را که بر روی رویدادهای DOM متمرکز شده است، به‌تازگی به پایان رساندید. آفرین.

قبل از تخصیص، اجازه دهید

را خلاصه کنیم

رویدادها همیشه در مرورگر اتفاق می‌افتند، چه متوجه شوید یا نه. به عنوان مثال، هر زمان که صندوق ورودی ایمیل خود را بازخوانی می‌کنید، روی یک پست دو ضربه سریع بزنید، روی دکمه کلیک کنید یا در یک نظر یا مقاله پیمایش کنید — رویدادها فعال می‌شوند.

با گنجاندن  شنوندگان رویداد  در HTML سند و/یا کد جاوا اسکریپت، می‌توانیم از رویدادهای DOM برای اجرای فرمان‌های جاوا اسکریپت استفاده کنیم. شنوندگان رویداد روش‌هایی هستند که یک تابع جاوا اسکریپت را برای اجرا در هنگام وقوع یک رویداد مشخص راه‌اندازی می‌کنند (این تابع، کنترل‌کننده رویداد نامیده می‌شود). چند راه برای افزودن اینها به سند یا اسکریپت وجود دارد که در این کلاس به آنها پرداخته ایم.

چیزهایی را که یاد گرفته اید بدیهی نگیرید - واقعاً راه طولانی را پیموده اید.

اکنون زمان آن فرا رسیده است که میزان دقت خود را بررسی کنید.

تکلیف چیست؟

برای این تمرین پروژه: 

  1. من یک پی دی اف
  2. پیوست کرده ام
  3. سوالات چند گزینه ای وجود دارد
  4. صادق باشید و سعی کنید قبل از رفتن به صفحه بعدی به هر سوال چند گزینه ای پاسخ دهید
  5. مهمتر از همه، لذت ببرید.

بعد از این کجا؟

این فقط قسمت 4 از کل مجموعه Skillshare در DOM است. در کلاس بعدی، به صحبت درباره رویدادها ادامه خواهیم داد. اما ما بیشتر پیشرفت خواهیم کرد. به یاد داشته باشید که رویدادها فقط در یک مکان شروع و پایان نمی‌یابند. در عوض، آنها از طریق سند، در چرخه زندگی خود جریان دارند. به طور خاص، رویدادها می توانند حباب شوند. کنجکاو؟ خب پس بیایید با هم به کلاس بعدی برویم :)

من نمی توانم صبر کنم!

کلاید

p.s. اگر از این کلاس لذت برده‌اید، لطفاً فراموش نکنید که یک بررسی عالی برای من بگذارید - این به من کمک می‌کند.


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

درس ها Lessons

  • انواع رویداد - لمس و پنجره Event types - touch and window

  • نوع رویداد فرم - مثال Form event type - example

  • متد ()adEventListener The addEventListener() method

  • شنوندگان رویداد درون خطی Inline event listeners

  • تابع callback چیست؟ What is a callback function

  • انواع رویداد - ماوس و صفحه کلید Event Types - mouse and keyboard

  • متد addEventListener() - نمای کلی The addEventListener() method - detailed overview

  • چالش برای شنونده رویداد درون خطی - مقدمه Challenge for inline event listener - intro

  • شنونده رویداد درون خطی - نمای کلی دقیق Inline event listener - detailed overview

  • چالش برای شنوندگان رویداد - مقدمه Challenge for event listeners - intro

  • کلاس Outro Class Outro

  • Class Project - رفتار و مهر زمانی پیش‌فرض Class Project - default behavior and timestamp

  • نوع رویداد فرم - اضافه کردن جاوا اسکریپت Form event type - adding JavaScript

  • مثال رویداد Keydown Keydown event example

  • چالش برای شنونده رویداد درون خطی - راه حل Challenge for inline event listener - solution

  • چالش برای خواص درون خطی - مقدمه Challenge for inline properties - intro

  • چالش برای شنوندگان رویداد - راه حل Challenge for event listeners - solution

  • خلاصه Summary

  • ویژگی های درون خطی Inline properties

  • چالش برای خواص درون خطی - ساختن HTML ما Challenge for inline properties - building our HTML

  • دو نکته مهم که باید بدانید Two most important things to know

  • اتفاق چیست What is an event

  • پروژه کلاس - ساخت HTML ما Class Project - building our HTML

  • پروژه کلاس - مقدمه Class Project - intro

  • چالش برای خواص درون خطی - راه حل Challenge for inline properties - solution

  • روش toString() چگونه کار می کند How does the toString() method work

  • ویژگی های درون خطی - نمای کلی دقیق Inline properties - detailed overview

  • بیت در مقابل بایت در مقابل هگزادسیمال Bit vs Byte vs Hexadecimal

  • چالش برای شنوندگان رویداد - ساختن HTML ما Challenge for event listeners - building our HTML

  • پروژه کلاس - با استفاده از رویداد ورودی، رویداد تمرکز و رویداد کپی Class Project - using the input event, focus event and copy event

  • روش های مختلف برای تعریف یک رنگ Different ways to define a color

  • معرفی کلاس - رویدادهای DOM Class Introduction - DOM Events

  • چالش برای شنونده رویداد درون خطی - ساخت HTML ما Challenge for inline event listener - building our HTML

  • انواع رویداد - فرم ها Event types - forms

درس ها Lessons

  • انواع رویداد - فرم ها Event types - forms

  • متد addEventListener() - نمای کلی The addEventListener() method - detailed overview

  • Class Project - رفتار و مهر زمانی پیش‌فرض Class Project - default behavior and timestamp

  • چالش برای شنونده رویداد درون خطی - ساخت HTML ما Challenge for inline event listener - building our HTML

  • شنونده رویداد درون خطی - نمای کلی دقیق Inline event listener - detailed overview

  • چالش برای خواص درون خطی - راه حل Challenge for inline properties - solution

  • چالش برای خواص درون خطی - ساختن HTML ما Challenge for inline properties - building our HTML

  • پروژه کلاس - ساخت HTML ما Class Project - building our HTML

  • نوع رویداد فرم - مثال Form event type - example

  • چالش برای شنوندگان رویداد - راه حل Challenge for event listeners - solution

  • روش toString() چگونه کار می کند How does the toString() method work

  • دو نکته مهم که باید بدانید Two most important things to know

  • تابع callback چیست؟ What is a callback function

  • روش های مختلف برای تعریف یک رنگ Different ways to define a color

  • اتفاق چیست What is an event

  • انواع رویداد - ماوس و صفحه کلید Event Types - mouse and keyboard

  • چالش برای شنونده رویداد درون خطی - مقدمه Challenge for inline event listener - intro

  • ویژگی های درون خطی - نمای کلی دقیق Inline properties - detailed overview

  • چالش برای خواص درون خطی - مقدمه Challenge for inline properties - intro

  • معرفی کلاس - رویدادهای DOM Class Introduction - DOM Events

  • پروژه کلاس - مقدمه Class Project - intro

  • خلاصه Summary

  • چالش برای شنوندگان رویداد - مقدمه Challenge for event listeners - intro

  • مثال رویداد Keydown Keydown event example

  • متد ()adEventListener The addEventListener() method

  • چالش برای شنونده رویداد درون خطی - راه حل Challenge for inline event listener - solution

  • بیت در مقابل بایت در مقابل هگزادسیمال Bit vs Byte vs Hexadecimal

  • شنوندگان رویداد درون خطی Inline event listeners

  • کلاس Outro Class Outro

  • نوع رویداد فرم - اضافه کردن جاوا اسکریپت Form event type - adding JavaScript

  • پروژه کلاس - با استفاده از رویداد ورودی، رویداد تمرکز و رویداد کپی Class Project - using the input event, focus event and copy event

  • چالش برای شنوندگان رویداد - ساختن HTML ما Challenge for event listeners - building our HTML

  • انواع رویداد - لمس و پنجره Event types - touch and window

  • ویژگی های درون خطی Inline properties

نمایش نظرات

آموزش Document Object Model Series 2021 - قسمت 4: رویدادهای DOM (ایجاد، گوش دادن و واکنش به رویدادها)
جزییات دوره
2h 44m
34
Skillshare (اسکیل شیر) Skillshare (اسکیل شیر)
(آخرین آپدیت)
17
4 از 5
دارد
دارد
دارد
CM Code_Zone
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

CM Code_Zone CM Code_Zone

نادرست | خنده دار است، زیرا حقیقت دارد

موفقیت قربانی می خواهد.

و فداکاری چیزی است که من در مورد آن بسیار می دانم.

من یک توسعه دهنده خودآموخته هستم، بنابراین می دانم که برای یک تازه وارد چقدر می تواند دشوار و دلهره آور باشد.

امروز، من همچنان به کدنویسی ادامه می‌دهم و از آخرین فناوری‌ها و زبان‌های برنامه‌نویسی مطلع می‌مانم.

وقت آن است که دانشی را که به دست آورده‌ام به اشتراک بگذارم و به موفقیت دیگران کمک کنم.