Transcript of the tutorial.
TOP
All right then, gang.
So I think we've reached the point in the course now where we've nailed all of the JavaScript basics
and we can start to do things which I think are a lot more fun, like interact with a browser or a web
page, and we can do things like add content to a web page with JavaScript, or we could change the
style of a web page with JavaScript, or we could do things like React to use events like click events
when they click on a button.
And we can also do things like create an annoying pop up and I'm going to show you how to do that as
well, because at the end of the day, this is the kind of thing that JavaScript was initially created
for, to make a web page and a user's experience on a web page more interactive.
So we'll be kicking off this chapter by learning, first of all about the document object model.
This is going to be the mothership of this chapter, and everything we do to interact with the browser
is going to be governed by the document object model, also known as the Dom for short.
Then we're going to look at how we can add change and remove content from a web page.
We're also going to talk about user events like click events or mouse move events and see how we can
react to those in JavaScript.
And finally, we'll put everything together that we learn to make a nice little pop up effect on a web
page.
Now for this chapter and pretty much everything going forward, you need to make sure you have your
web server still running so we can preview what to do in the browser.
Now, in one of the first chapters in VS Code, I showed you this package live server and I showed you
how to spin up a local development server using that so we can preview our web pages in it.
But just in case you've forgotten, I'm going to show you again now.
So remember, first of all, you need the live server package installed, so you need to search for
that there.
If you've not got it already, then come to the HTML page that you want to open with the live server.
Right click and go to open with live server and that is going to open it up in a browser so you can
preview it.
So you need to make sure you're running your page on a live server for the rest of this chapter.
And pretty much the rest of the course.