Already Welcome back.
So I have some very good news.
It's finally time for us to take javascript and combine it with our H.M.S. assess.
This is by far my favorite unit.
My favorite topic to teach out everything that I've spent my life teaching.
It's really where javascript starts to payoff.
So we've been doing some simple apps up until this point.
Simple to do list using alerts and prompts and I know it's not very exciting but that's all going to
change now because we're about to really unleash the power of Javascript.
And then this unit we're going to do things like make an interactive game we're going to make a real
to do list with a real form with real buttons and checkboxes and Javascript behind it and animations
and all sorts of really interesting exciting things where you really feel like you made something not
just a little command line or a little javascript console app but something real that you could share
.
So the way that we do all of this is through a technology called the DOM t o m it's that.
So this lesson is going to serve as an introduction to the DOM going to talk about a few things in next
few videos.
I want to start by defining what the DOM is what those letters stand for.
I want you to have a good understanding of why this is exciting.
I'm going to show you some cool applications that other people have built using this stuff that we're
going to learn then we're going to talk about what I call the select then manipulate workflow.
So let's get started.
So why should you care about all of this.
Well there are so many reasons.
Virtually every big web app out there right now things like Twitter and Facebook Instagram YouTube Gmail
they all use a ton of javascript and most of that javascript is interacting with the dog interacting
with each team out and the SS So we interact with the Dom to do things like games.
We could make tic tac toe we could make a platform a game like Mario we can use it to do more practical
things like drop down menus form validations.
Thats how we make web pages interactive.
Its how we can add animations.
And the last one here really sums it up pretty much every awesome site ever although really just in
the last few years uses a lot of javascript to manipulate the Dom as I mentioned earlier I am going
to show you a few examples first before we start defining these terms talk about what the DOM is how
it works.
I want to show you a few web sites.
So the first one is just google and I dont know how much you pay attention to this but when you start
to search for something on Google like Halo.
Notice how I get this thing that appears this is all its Timo this is some sort of div or something
thats being hit in and shown and its changing as I type things like if I type hello kitty I get new
results.
Thats all done with javascript but this is the kind of thing that we're going to be able to do after
a few videos.
Of course we won't be able to write the backend that Google has but we'll be able to do the front end
stuff here.
All of the HMO all the success all these effects that you see will easily be able to replicate.
So the next thing that I want to highlight is on you Tomi's website there's this Brough's courses button
and when I click on it I get the slide out menu that pushes everything over to the right and I have
all these categories to pick from.
And as a hover over a category you can see I get this sub menu that pops up.
So that's all them javascript things are being added to the page new aged him out elements.
These are probably list items and anchor tags.
They're being added to the page being hidden and shown in color is changing as I scroll over things
lots of interactivity.
So the next thing that I want to show is one of my favorites.
It's a Web site called pad attack.
So this is a little bit different.
It's not really a web application that you would use but it's a really fun toy and a great tech demo
of what you can do with H.T. mouse.
SS In javascript so I highly recommend that you go ahead and try this on your own.
Patta tap dot com and I have to do is start typing on my keyboard in every key that I press corresponds
to a sound that plays and a cool animation that plays.
So let me show you an example.
Here's another one.
So you can get lost somewhere
.
So this sums up the kind of thing that we can do.
We have interactivity where I'm pressing a key so the code is running only when I press a particular
key and then that code is not only playing as sound but it's also changing what we see visually.
So it's not just constantly logging it's not just using alerts it's actually changing the screen the
came out in the CSSA that we see.
So hopefully those examples got you at least a little bit excited about all of the awesome stuff we're
about to learn.