Kursinnehåll
Advanced JavaScript Mastery
Advanced JavaScript Mastery
1. Mastering JavaScript Classes and Inheritance
Getting StartedUnderstanding Class Declarations in JavaScriptChallenge: Create a JavaScript ClassDefining Methods in JavaScript ClassesChallenge: Add Methods to a ClassUsing Parameter ObjectsWorking with Private Properties in ClassesChallenge: Implement Private Properties in a ClassManaging Properties with Getters and SettersChallenge: Implement Getters and Setters in a ClassExploring Static Properties in JavaScriptUsing Static Methods in JavaScriptChallenge: Implement Static Properties and Methods in a ClassUnderstanding Inheritance with extends and super()Challenge: Implement Class Inheritance with extends and super()
2. DOM Manipulation for Interactive Web Development
What Is the Document Object Model (DOM)?Querying and Selecting Elements in the DOMChallenge: Query and Select DOM ElementsUnderstanding the DOM Hierarchy and RelationshipsChallenge: Navigate the DOM HierarchyExploring DOM Properties in JavaScriptWorking with Element Attributes in the DOMChallenge: Manage Element Properties and AttributesAdding Elements to the DOM DynamicallyRemoving Elements From the DOMChallenge: Add and Remove DOM ElementsModifying Element Styles with JavaScriptChallenge: Apply Dynamic Styles to DOM Elements
3. Event Handling and User Interactions in JavaScript
4. Asynchronous JavaScript and API Integration
Introduction to Asynchronous JavaScriptUnderstanding Callbacks in JavaScriptHandling Asynchronous Operations with PromisesUsing Async/Await for Cleaner Asynchronous CodeFetching and Working with APIs in JavaScriptIntegrating APIs in JavaScript ApplicationsChallenge: Fetch and Use API DataIntegrating Third-Party Libraries in JavaScriptChallenge: Work with Third-Party LibrariesHandling Multiple Asynchronous Requests
Challenge: Handle Event Propagation and Delegation
Task
You're building a dynamic list where users can add and delete specific items.
Use event delegation by adding a single click event listener to the
ulwith IDdynamic-list;When an item is clicked:
If the clicked element is an
<li>, show an alert with the text of the clicked item;If the clicked element is a "Delete" button, remove the corresponding
<li>item from the list.
index.html
index.css
index.js
Use
event.target.tagName === 'LI'to check if the clicked element is an<li>;Use
event.target.classList.contains('delete-btn')to check if the clicked element is a "Delete" button.
index.html
index.css
index.js
Var allt tydligt?
Tack för dina kommentarer!
Avsnitt 3. Kapitel 5
