Control Structures and Functions
Lectures 13 • 40 slides
Narration
Lecture 13 Slide 1: Welcome to DOM Manipulation
Review of the Previous Lecture
- Conditional branching (if, else if, else, switch)
- Loops (for, while, do-while, for...of)
- Function definition and calling (function declaration, arrow function)
Today's Theme
DOM Manipulation: Dynamic Screen Updates with JavaScript
What We've Learned So Far
| Lecture | Content |
|---|---|
| Lecture 3 | HTML - Document Structure |
| Lecture 4 | CSS - Styling |
| Lecture 7-8 | JavaScript Basics |
What is DOM?
Document Object Model
- A mechanism for manipulating HTML with JavaScript
- Represents a web page as an object
flowchart TD
A[HTML Document] --> B[DOM]
B --> C[JavaScript]
C --> D[Changing Element Content]
C --> E[Changing Styles]
C --> F[Adding/Removing Elements]
C --> G[Event Handling]
D --> H[Dynamic Web Page]
E --> H
F --> H
G --> H
What You Can Do
- Change element content
- Dynamically change styles
- Add/Remove elements
- React to events
Today's Goal
Be able to freely manipulate HTML with JavaScript and create interactive web pages
1/40