This course will be retired on February 12, 2022. We recommend "JavaScript and the DOM" for up-to-date content.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
JavaScript is an exciting language you can use to power web servers, create desktop programs, and even control robots. But JavaScript got its start in the browser. It was created to make web pages responsive to mouse clicks and other input from visitors. In this video, we'll take a look at a few examples of JavaScript in action.
Website examples:
Related Treehouse courses and workshops
[MUSIC]
0:00
JavaScript is an exciting language
you can use to power web servers,
0:04
create desktop programs,
even control robots.
0:08
But JavaScript got its start in
the browser way back in 1995.
0:11
It was created to make wepages
responsive to mouse clicks and
0:15
other input from visitors.
0:18
And even though it's a popular
all-purpose language,
0:19
you'll still find that JavaScript is
the most important tool you have for
0:22
creating fun, interactive,
and useful websites.
0:26
I'm Guil,
a front-end teacher here at Treehouse.
0:29
In this course,
0:32
you'll learn how to bring webpages to
life using the power of JavaScript.
0:32
Now this course assumes you know
your way around JavaScript basics.
0:36
So make sure you complete
the prerequisites for
0:40
this course before continuing.
0:42
So first up, let's take a look at
a few examples of how JavaScript
0:44
lets you create interactive webpages
that respond to a users actions.
0:47
Here's a site you've probably seen before,
Wikipedia.
0:52
Wikipedia is an example
of a static webpage.
0:55
There's no JavaScript here.
0:58
No interactivity.
1:00
Just text and
links which is perfect for this site
1:01
because it's all about delivering
paragraphs of textual information.
1:04
It's just meant to model a regular page,
like a page in a book that you can read.
1:07
Next, let's check out
this coding calculator.
1:12
Clicking a number button makes that
number flash and appear in this display.
1:14
So I'm going to add 8 + 9.
1:19
And hit = and the number 17 appears.
1:22
So this is what I mean by interactivity.
1:26
When the page loads, JavaScript code
tells the browser to listen for
1:29
button clicks and
perform math in response to those clicks.
1:33
Then it alters the display to
show that math as it's performed.
1:36
Now let's have a look at the fun
website for the St. Louis Browns.
1:41
After the page loads, we can go to
the upper right-hand corner and
1:45
click on the Menu.
1:49
Now when we click the button on
the calculator, numbers appeared.
1:50
Clicking this button,
makes changes to the screen too.
1:53
And we now see a menu.
1:56
So let's click Players.
1:57
Once this page loads, we can click
on the letters along the bottom and
2:00
images slide to show
corresponding players.
2:04
So now you can start to see how JavaScript
can make websites more engaging and
2:08
pleasurable to use.
2:12
Let's look at one more example.
2:13
Google Sheets.
2:15
This is an example of a full
blown application in a webpage.
2:16
You can type information into cells.
2:21
You can Right-click on cells to bring
up various formatting options or
2:24
copy and paste.
2:29
You can also navigate menus for
other functionality,
2:30
such as sorting or
adding additional rows or even sheets.
2:33
All this interactivity is accomplished
with JavaScript which is listening for
2:39
actions like clicks and then changing
what we see based on those actions.
2:43
[BLACK_AUDIO] In this course,
2:48
you learn how to make your own static
pages interactive with JavaScript.
2:53
You learned how to break interactivity
into three basic actions.
2:57
Selecting elements on the page,
manipulating elements,
3:01
and listening for user actions.
3:05
A webpage has many elements on it.
3:07
For example, the calculator app we
looked at has a number of keys,
3:09
each of which is a separate element.
3:13
To know when someone is clicking on
a three key and not a nine key, for
3:15
instance, you first have to use JavaScript
to find all those key elements.
3:18
And sort out which one is which.
3:22
This process is called selection.
3:24
Once you have an element selected,
you can manipulate it in some way.
3:26
Think about the St. Louis Browns' site.
3:29
On the player's page, when we clicked
on a letter, it became darker and
3:31
a little circle appeared underneath it.
3:35
By sliding in from
the previously clicked letter.
3:37
These elements were being manipulated,
3:39
or changed, which helped us
know where we were on the site.
3:41
Not all elements you select
will be manipulated.
3:45
Often, you'll want an element to
listen to what a user is doing.
3:47
Think of the spreadsheet
we looked at earlier.
3:51
Once a cell is selected,
we want to know what the user types so
3:53
we can put that data into the cell.
3:56
By listening to the keyword,
we can change the element appropriately.
3:59
These three actions are happening in
all of the interactive examples we
4:02
just looked at.
4:06
So in this course, you'll learn how
to take control of your webpages
4:07
by accessing something called the Document
Object Model, or DOM, with JavaScript.
4:10
The DOM is really where all
these actions take place.
4:15
Now there's so much to learn and
we're gonna have fun in this course.
4:18
So let's get started.
4:21
You need to sign up for Treehouse in order to download course files.
Sign up