آموزش Document Object Model Series 2021 - قسمت 1: Document Object Model چیست
Document Object Model Series 2021 - Part 1: What is the Document Object Model
به این مجموعه اشتراک مهارت در مدل شی سند خوش آمدید. این کلاس اول در DOM است -- DOM چیست؟
چه چیزی را در این کلاس خاص پوشش می دهیم؟
ما تعداد زیادی از اطلاعات را در این مجموعه پوشش خواهیم داد، اما برای قسمت 1 می‌خواهید یاد بگیرید که DOM چیست.
نام "مدل شیء سند" انتخاب شد زیرا ... غافلگیر کننده ... یک "مدل شی" است. این بدان معناست که سند ما با استفاده از اشیا مدل‌سازی می‌شود و مدل نه تنها ساختار یک سند، بلکه رفتار یک سند و اشیایی که از آن تشکیل شده است را نیز در بر می‌گیرد.
به عبارت دیگر، DOM یک ساختار داده انتزاعی را نشان نمی‌دهد، بلکه اشیاء زنده واقعی را نشان می‌دهد که هر کدام دارای توابع و هویت منحصر به فرد خود هستند.
اکثر مردم، وقتی شروع به کار می کنند، فکر می کنند که DOM برای جاوا اسکریپت طراحی شده است.
همانطور که خواهیم دید، اینطور نیست.
DOM مستقل از هر زبان برنامه نویسی ساخته شده است. گاهی اوقات این می تواند اثرات عجیب و غریبی ایجاد کند (که بعداً در این دوره خواهیم دید).
در واقع، ما مجبور نیستیم از جاوا اسکریپت برای دسترسی به DOM استفاده کنیم. برای مثال می توانیم از Python استفاده کنیم.
در این کلاس، به جای اینکه به شما نشان دهیم DOM چیست، می‌خواهم به آنچه DOM نیست نگاه کنیم. می‌دانم، نگاهی کاملاً جامع به آن است، اما معتقدم بهترین راه است.
اجازه دهید به تجارت بپردازیم.
بیایید شروع کنیم
--- اگر تعجب می کنید، کل این مجموعه درباره 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 یک موضوع بزرگ است. برای اینکه شما را به سرعت بالا ببرم، ماه‌ها به این فکر کرده‌ام که محتوا را کجا متمرکز کنم و چگونه آن را به بهترین شکل ممکن به شما ارائه دهم.
پس از شرکت در کلاس‌های DOM من، «چرا» کارها را یاد خواهید گرفت و نه فقط «چگونه». درک اصول DOM مهم است زیرا امکانات بی نهایتی را در اختیار شما قرار می دهد. با داشتن این دانش، می‌توانید برنامه‌هایی ایجاد کنید که داده‌های صفحه را بدون نیاز به به‌روزرسانی به‌روزرسانی می‌کنند. شما قادر خواهید بود برنامه هایی ایجاد کنید که توسط کاربر قابل تنظیم هستند. حتی می توانید به کاربر اجازه دهید عناصر را بکشد، جابجا کند و حذف کند.
آیا می توانید ببینید که DOM چقدر مهم است؟
این سری Skillshare چگونه متفاوت است؟
کلاس های Skillshare بسیار خوبی وجود دارد که بر توسعه وب تمرکز دارند. افسوس که آنها هرگز وارد جزئیات نحوه عملکرد مدل شیء سند در پشت صحنه نمی شوند - مهارتی که هر توسعه دهنده تمام پشته باید بر آن مسلط باشد.
در این سری DOM، من روی توسعه وب واقعی در قسمت جلویی تمرکز می‌کنم. این شامل درک اینکه چه گره هایی هستند، نگاه کردن به گره سند (به هر حال این با شی سند متفاوت است)، درک ساختار درختی DOM، انواع مختلفی از گره ها وجود دارد، و چگونه می توانید از DOM برای دسترسی به عناصر استفاده کنید. در صفحه خود قرار دهید و آنها را دستکاری کنید.
تمرین
را عالی می کندنظریه انتزاعی و دشوار است. به همین دلیل است که من عاشق مثال های عملی هستم. ما از اولین سخنرانی تا آخرین کلاس با هم کد می نویسیم.
آیا این کلاس برای شماست؟
بله.
مهم نیست در مسیر توسعه وب خود کجا هستید. برای همه سطوح مناسب است.
هنوز مطمئن نیستید؟ اگر در هر یک از این دسته ها قرار دارید، این دوره برای شما مناسب است:
- دانش آموز شماره 1: شما می خواهید در دنیای برنامه نویسی مشغول شوید. یادگیری اصول HTTP، CSS و نحوه استفاده از جاوا اسکریپت برای تغییر یک صفحه وب، نقطه شروع برای تبدیل شدن به یک توسعه دهنده فول استک است.
- دانش‌آموز شماره 2: می‌خواهید بدانید که چگونه توسعه‌دهندگان موفق وب‌سایت‌هایی پویا می‌سازند که با کاربر درگیر شده و او را از رقبا جلوتر می‌آورند.
- دانش آموز شماره 3: شما می خواهید درک کاملی از توسعه وب جلویی به دست آورید.
- دانش آموز شماره 4: می خواهید شروع به استفاده از چارچوب های پشتیبان مانند Node.js کنید، اما می خواهید ابتدا نحوه استفاده از جاوا اسکریپت در قسمت جلویی صفحه وب خود را بدانید.
- دانش‌آموز شماره 5: شما تا حدودی می‌دانید مدل شیء سند چیست، اما اطلاعات کمی در مورد نحوه عملکرد آن در پشت صحنه، و نحوه پیاده‌سازی عملی آن در برنامه‌ها دارید.
- دانش‌آموز شماره 6: شما در کلاس‌های دیگری در زمینه توسعه وب شرکت کرده‌اید، اما احساس نمی‌کنید که توسعه جلویی را درک کرده‌اید.
چرا از هم اکنون شروع کنید؟
در همین لحظه، رقبای شما در حال یادگیری نحوه تبدیل شدن به توسعه دهندگان وب بهتر هستند.
توسعه وب یک موضوع داغ در حال حاضر است. اما شما یک مزیت مشخص دارید. این دوره موضوعات یادگیری به یاد ماندنی، تاکتیک های عملی و نمونه های واقعی را ارائه می دهد.
شما را در کلاس می بینیم.
باور نکردنی! اکنون در حال ایجاد احساسی نسبت به اینکه DOM چیست.
قبل از تخصیص، اجازه دهید
را خلاصه کنیموقتی برای اولین بار کدنویسی را یاد می گرفتم، همیشه کلمه "DOM" را می شنیدم اما هیچ وقت دقیقاً معنی آن را نمی دانستم. آیا این HTML بود که من کدم را در آن می نویسم؟ آیا این همان چیزی بود که در مرورگر نمایش داده شد؟ من واقعا هیچوقت نفهمیدم و مدتی طول کشید تا بفهمم دقیقا چیست.
به زبان ساده، DOM نمایشی از HTML شما در مرورگر است. این به شما امکان می دهد صفحه را دستکاری کنید (در بخش های بعدی بیشتر در مورد دستکاری).
بنابراین، با در نظر گرفتن این دانش، تلاش خود را در این چند سؤال امتحان کنید.
اما ما تازه شروع کرده‌ایم...
تکلیف چیست؟
برای این تمرین پروژه:
- من یک پی دی اف پیوست کرده ام
- سوالات چند گزینه ای وجود دارد
- صادق باشید و سعی کنید قبل از رفتن به صفحه بعدی به هر سوال چند گزینه ای پاسخ دهید
- مهمتر از همه، لذت ببرید.
بعدی کجاست؟
به راهت ادامه بده! در کلاس 2، من وقت خود را صرف صحبت در مورد چیستی گره ها می کنم و چگونه می توانید با استفاده از جاوا اسکریپت به DOM دسترسی پیدا کنید .
شما را (امیدوارم) در کلاس بعدی می بینیم.
کلاید
p.s. اگر از این کلاس لذت برده‌اید، لطفاً فراموش نکنید که یک بررسی عالی برای من بگذارید - این به من بسیار کمک می‌کند.
درس ها Lessons
-
سلسله مراتب DOM و تجزیه و تحلیل کد ما DOM hierarchy and analyzing our code
-
ارتباط جاوا اسکریپت با DOM API چگونه است؟ How does JavaScript relate to the DOM API?
-
جاوا اسکریپت در محیط های مختلف زندگی می کند JavaScript lives in different environments
-
DOM چیست (نکته: آن چیزی نیست که در DevTools می بینید) What is the DOM (hint: its not what you see in DevTools)
-
مثال سریع تغییر DOM Quick example of changing the DOM
-
استفاده از جاوا اسکریپت با DOM ممکن است سخت باشد Using JavaScript with the DOM can be awkward
-
چرا دسترسی به DOM بسیار مهم است Why accessing the DOM is crucial
-
BOM چیست What is the BOM
-
ساختن صفحه خودمان Building our own page
-
تفاوت بین DOM در مقابل جاوا اسکریپت در مقابل پایتون Differences between DOM vs JavaScript vs Python
-
معرفی کلاس و سری Class and Series Introduction
-
DOM ساختار HTML ما را ترسیم می کند The DOM maps our HTML structure
-
DOM چیست (نکته: HTML شما نیست) What is the DOM (hint: its not your HTML)
-
کلاس Outro Class Outro
-
متد setTimeout(). The setTimeout() method
-
DOM چیست (نکته: آن چیزی نیست که در مرورگر می بینید) What is the DOM (hint: its not what you see in the browser)
-
مثال عملی از DOM و جاوا اسکریپت Practical example of DOM and JavaScript
-
عناصر شبه Pseudo elements
-
خلاصه Recap
-
همه چیز یک شی است Everything is an object
درس ها Lessons
-
جاوا اسکریپت در محیط های مختلف زندگی می کند JavaScript lives in different environments
-
مثال سریع تغییر DOM Quick example of changing the DOM
-
تفاوت بین DOM در مقابل جاوا اسکریپت در مقابل پایتون Differences between DOM vs JavaScript vs Python
-
DOM چیست (نکته: آن چیزی نیست که در DevTools می بینید) What is the DOM (hint: its not what you see in DevTools)
-
DOM ساختار HTML ما را ترسیم می کند The DOM maps our HTML structure
-
خلاصه Recap
-
مثال عملی از DOM و جاوا اسکریپت Practical example of DOM and JavaScript
-
معرفی کلاس و سری Class and Series Introduction
-
DOM چیست (نکته: HTML شما نیست) What is the DOM (hint: its not your HTML)
-
همه چیز یک شی است Everything is an object
-
چرا دسترسی به DOM بسیار مهم است Why accessing the DOM is crucial
-
BOM چیست What is the BOM
-
سلسله مراتب DOM و تجزیه و تحلیل کد ما DOM hierarchy and analyzing our code
-
DOM چیست (نکته: آن چیزی نیست که در مرورگر می بینید) What is the DOM (hint: its not what you see in the browser)
-
ارتباط جاوا اسکریپت با DOM API چگونه است؟ How does JavaScript relate to the DOM API?
-
استفاده از جاوا اسکریپت با DOM ممکن است سخت باشد Using JavaScript with the DOM can be awkward
-
کلاس Outro Class Outro
-
متد setTimeout(). The setTimeout() method
-
ساختن صفحه خودمان Building our own page
-
عناصر شبه Pseudo elements
نمایش نظرات
نظری ارسال نشده است.
https://donyad.com/d/071a44
آموزش یاد بگیرید که یک سری منسجم از تصاویر ایجاد کنید
Learn to Create a Cohesive Series of Illustrations
سلام! من دومین کلاس جدید خود را ارائه می‌کنم: "Learn to Create a Cohesive Series of Illustrations." این کلاس برای افرادی است که مهارت‌های طراحی و طراحی دارند. ..
آموزش بازیگران کارگردانی - دستیابی به اجرای طبیعی برای فیلم مستقل
Directing Actors - Achieving Natural Performances for Independent Film
فرد زارا، پیشکسوت 20 ساله فیلم مستقل، این دوره را آموزش می دهد که برای کمک به کارگردانان مستقل فیلم طراحی شده است تا درک بهتری از بهترین شیوه انجام دهند. ..
آموزش ایجاد فونت در iPad به صورت رایگان | طراحی فونت اسکریپت حرفه ای | دست خط خود را به فونت تبدیل کنید
Create Fonts On iPad For Free | Professional Script Font Design | Turn Your Handwriting Into A Font
" شرح آیا از کارهای اداری خشک خود خسته شده اید و می خواهید چیزی خلاقانه یاد بگیرید؟ یا شاید شما یک طراح گرافیک هستید که به دنبال خلاقیت بیشتری برای توسعه هستید. .."
آموزش Canva: در هنر ایجاد طرح های گرافیکی خیره کننده تسلط داشته باشید
Canva: Master the Art of Creating Stunning Graphic Designs
«Canva: در هنر ایجاد طرح‌های گرافیکی خیره‌کننده تسلط داشته باشید - با P. قدرتمند و کاربرپسند Canva در هنر طراحی گرافیک‌های با کیفیت حرفه‌ای تسلط پیدا کنید.
CM Code_Zone
نادرست | خنده دار است، زیرا حقیقت دارد
موفقیت قربانی می خواهد.
و فداکاری چیزی است که من در مورد آن بسیار می دانم.
من یک توسعه دهنده خودآموخته هستم، بنابراین می دانم که برای یک تازه وارد چقدر می تواند دشوار و دلهره آور باشد.
امروز، من همچنان به کدنویسی ادامه می‌دهم و از آخرین فناوری‌ها و زبان‌های برنامه‌نویسی مطلع می‌مانم.
وقت آن است که دانشی را که به دست آورده‌ام به اشتراک بگذارم و به موفقیت دیگران کمک کنم.
Skillshare (اسکیل شیر)
اسکیل‌شر یک پلتفرم آموزشی آنلاین است که به میلیون‌ها افراد در سراسر جهان امکان یادگیری مهارت‌های جدید را فراهم می‌کند. این پلتفرم با ارائه دوره‌های متنوع در زمینه‌هایی از جمله هنر و طراحی، فناوری، کسب و کار، و زندگی موفق، به کاربران خود این امکان را می‌دهد تا به صورت آنلاین به یادگیری بپردازند.
یکی از ویژگی‌های منحصر به فرد سکیل‌شر، ارائه دوره‌های تدریس شده توسط صاحبان مهارت‌ها و افراد موفق در زمینه‌های مختلف است. این امر باعث می‌شود که کاربران از تجربیات و دانش عملی افرادی که در حوزه‌های مورد نظرشان موفق عمل کرده‌اند، بهره‌مند شوند و بهترین اطلاعات را برای بهبود مهارت‌های خود دریافت کنند. به این ترتیب، سکیل‌شر نه تنها یک پلتفرم آموزشی است، بلکه یک جامعه آموزشی است که افراد را به اشتراک گذاری دانش و تجربیات تشویق می‌کند و به آنها کمک می‌کند تا در مسیر پیشرفت و موفقیت خود ادامه دهند.