WEBVTT

00:00.000 --> 00:05.000
JavaScript and DOM manipulation.

00:05.000 --> 00:09.000
In this video, we will learn advanced features like template literals,

00:09.000 --> 00:12.000
spread operator, and modules.

00:12.000 --> 00:16.000
DOM manipulation to change web page content,

00:16.000 --> 00:19.000
event handling and animations to respond to users,

00:19.000 --> 00:24.000
practical exercise, building, and interactive to-do list.

00:24.000 --> 00:29.000
Here we are going to learn JavaScript and DOM manipulation step-by-step through a program.

00:29.000 --> 00:32.000
HTML is the skeleton of the page.

00:32.000 --> 00:36.000
We have headings, buttons, a box, and a to-do list.

00:36.000 --> 00:42.000
CSS adds design, sets fonts, colors, sizes, and spacing.

00:42.000 --> 00:45.000
And JavaScript is the brain of the page.

00:45.000 --> 00:47.000
It makes things happen.

00:47.000 --> 00:54.000
We link style.css for design and script.js for interactivity.

00:54.000 --> 00:57.000
Advanced JavaScript concepts.

00:57.000 --> 01:00.000
Let's begin with some modern JavaScript features.

01:00.000 --> 01:03.000
First, we use template literals.

01:03.000 --> 01:08.000
These allow us to write strings inside tactics and insert variables directly.

01:08.000 --> 01:11.000
For example, instead of writing hello plus name,

01:11.000 --> 01:15.000
we can write hello comma space name.

01:15.000 --> 01:18.000
In our code, we greet Sam using this method.

01:18.000 --> 01:22.000
Next, we use the spread operator.

01:22.000 --> 01:25.000
This expands an array into individual elements.

01:25.000 --> 01:32.000
In our program, we take the array 1, 2, 3, and spread it into a bigger array adding 4 and 5.

01:32.000 --> 01:38.000
This gives us 1, 2, 3, 4, 5.

01:38.000 --> 01:45.000
We also mention modular JavaScript, splitting code into different files and using import and export.

01:45.000 --> 01:47.000
This is common in bigger projects.

01:47.000 --> 01:52.000
Though in our small demo, we kept everything in one script.js file.

01:52.000 --> 01:54.000
DOM manipulation.

01:54.000 --> 01:57.000
DOM stands for document object model.

01:57.000 --> 02:00.000
It is the structure of our web page.

02:00.000 --> 02:04.000
JavaScript allows us to select and modify elements dynamically.

02:04.000 --> 02:12.000
In our program, we select the paragraph tag element with ID message and change its text when the user clicks the button.

02:12.000 --> 02:15.000
That is DOM manipulation in action.

02:15.000 --> 02:23.000
This makes our web page interactive because JavaScript can update the page without reloading it.

02:23.000 --> 02:25.000
Event handling and animations.

02:25.000 --> 02:31.000
Events are actions from the user like clicks, mouse overs, or form submissions.

02:31.000 --> 02:36.000
In our program, when the user clicks the click me button and alert pops up.

02:36.000 --> 02:38.000
That's event handling.

02:38.000 --> 02:40.000
We also added animations.

02:40.000 --> 02:44.000
When the user clicks the red box, JavaScript changes its style.

02:44.000 --> 02:49.000
With the help of CSS transitions, the box moves and changes color with animation.

02:49.000 --> 02:52.000
This makes the page more lively and engaging.

02:52.000 --> 02:57.000
Practical exercise.

02:57.000 --> 03:02.000
Finally, we bring everything together in a small project, a to-do list.

03:02.000 --> 03:04.000
Here's how it works.

03:04.000 --> 03:07.000
The student types a task into the input box.

03:07.000 --> 03:12.000
When they click add, JavaScript creates a new list item and attaches it to the page.

03:12.000 --> 03:18.000
Each task also comes with a delete button, allowing the student to remove it from the list.

03:18.000 --> 03:26.000
This is a real example of how we can manipulate the DOM dynamically and utilize JavaScript to enhance user interaction.

03:26.000 --> 03:33.000
We learned how JavaScript can dynamically change the DOM, handle user events, and trigger animations.

03:33.000 --> 03:41.000
With these skills, you can make web pages more interactive, engaging, and user friendly.