آموزش Document Object Model Series 2021 - قسمت 6: پروژه نهایی DOM. نمونه های پیشرفته و سرگرم کننده
Document Object Model Series 2021 - Part 6: DOM Final Project. Advanced & Fun Examples
به این کلاس نهایی SKILLSHARE در مورد مدل شیء سند خوش آمدید. این کلاس ششمین فینال کلاس در DOM است -- ساخت پروژه
چه چیزی را در این کلاس Skillshare خاص پوشش می دهیم؟
ما تعداد زیادی از اطلاعات را در این مجموعه پوشش خواهیم داد، اما برای قسمت 6، می‌خواهیم یک برنامه وب کامل بسازیم.
این یک کلاس هیجان‌انگیز خواهد بود، زیرا اکنون می‌خواهیم تمام مفاهیم مربوط به DOM (پیمایش از DOM، عناصر گره، کنترل‌کننده‌ها و شنوندگان رویداد، و حباب‌سازی) را برای ساختن یک وب واقعا کاربردی اعمال کنیم. برنامه - یک لیست خرید که در آن کاربر می تواند موارد را به لیست خرید خود اضافه کند. ما همچنین این قابلیت را برای کاربر ایجاد خواهیم کرد که موارد را از لیست خود حذف کند، کل لیست را پنهان کند و حتی موارد موجود در لیست را جستجو کند!
ما HTML، CSS و کدهای جاوا اسکریپت را با هم از ابتدا خواهیم ساخت.
اگر می‌خواهید یک کلاس دزدی دریایی درباره استفاده از تکنیک‌های DOM (برنامه CRUD) داشته باشید، این کلاس Skillshare برای شما مناسب است.
این حماسه خواهد بود.
در حین ساختن برنامه وب، موارد دیگری مانند:
را پوشش خواهیم داد- classList API
- متد indexOf() چیست
- با استفاده از یک حلقه foreach
- و یک دسته دیگر!
من نمی توانم صبر کنم.
بیایید شروع کنیم
--- در صورت تعجب، در اینجا اطلاعاتی درباره 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: شما در کلاس‌های دیگری در زمینه توسعه وب شرکت کرده‌اید، اما احساس نمی‌کنید که توسعه جلویی را درک کرده‌اید.
چرا هم اکنون شروع کنید؟
در همین لحظه، رقبای شما در حال یادگیری نحوه تبدیل شدن به توسعه دهندگان وب بهتر هستند.
توسعه وب یک موضوع داغ در حال حاضر است. اما شما یک مزیت مشخص دارید. این دوره موضوعات یادگیری به یاد ماندنی، تاکتیک های عملی و نمونه های واقعی را ارائه می دهد.
شما را در کلاس می بینیم.
بطری را بریزید
درس ها Lessons
-
رفتار پیش‌فرض برای ارسال فرم Default behavior for form submission
-
اضافه کردن کلاس ها Adding classes
-
افزودن موارد به صورت پویا Adding items dynamically
-
ویژگی داده برای چیست؟ What is the data attribute used for?
-
در حال اتمام عملکرد متن جستجوی ما Finishing off our search text functionality
-
معرفی کلاس - پروژه واقعی Class Introduction - Real Project
-
حذف عناصر DOM - روش قدیمی Removing DOM elements - the old way
-
مقدمه ای بر فرم ها Introduction to forms
-
جمع بندی سریع Quick recap
-
ساخت HTML ما Building our HTML
-
پنهان کردن و باز کردن موارد فهرست ما Hiding and unhiding our list items
-
مقدمه ای بر حروف کوچک Introduction to lowerCase
-
استفاده از indexOf() با آرایه ها Using indexOf() with Arrays
-
کلاس و سری Outro - آفرین Class and Series Outro - WELL DONE
-
ساخت هدر CSS Building the CSS header
-
حذف عناصر DOM - راه جدید Removing DOM elements - the new way
-
نمایش و مخفی کردن پانل های ما هنگام کلیک بر روی برگه عنوان Showing and hiding our panels when heading tab is clicked
-
بهبود فرم ما - آنچه من می خواهم شما بسازید Improving our form - what I want you to build
-
معرفی Array.from() Introduction to Array.from()
-
استفاده از indexOf() با رشته ها Using indexOf() with Strings
-
خلاصه ای از شنوندگان رویدادی که استفاده کرده ایم Recap of what event listeners we've used
-
ساخت آیتم های لیست CSS Building the CSS list items
-
ساخت زبانه ها Building the tabs
-
دسترسی و حلقه زدن روی برچسب های ما Accessing and looping over our tags
-
کادر متن ورودی را پاک کنید Clear the input text box
-
قراره چی بسازیم؟ What are we going to build?
-
یک دکمه پویا اضافه کنید Add a dynamic button
-
استفاده از forEach برای حلقه زدن در آرایه ما Using forEach to loop through our array
-
نحوه دسترسی به فیلد ورودی و مقدار آن How to access the input field and its value
-
مقدمه ای بر indexOf() Introduction to indexOf()
-
Array.from() چگونه کار می کند؟ How does Array.from() work?
-
اضافه کردن کلاس انتخاب شده Adding the selected class
-
لیست خرید Shopping list
https://donyad.com/d/1e9e
CM Code_Zone
نادرست | خنده دار است، زیرا حقیقت دارد
موفقیت قربانی می خواهد.
و فداکاری چیزی است که من در مورد آن بسیار می دانم.
من یک توسعه دهنده خودآموخته هستم، بنابراین می دانم که برای یک تازه وارد چقدر می تواند دشوار و دلهره آور باشد.
امروز، من همچنان به کدنویسی ادامه می‌دهم و از آخرین فناوری‌ها و زبان‌های برنامه‌نویسی مطلع می‌مانم.
وقت آن است که دانشی را که به دست آورده‌ام به اشتراک بگذارم و به موفقیت دیگران کمک کنم.
نمایش نظرات