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 a popular, general-purpose programming language you can use to power web servers, create desktop and mobile applications, and even control robots. But JavaScript was initially designed to run in the browser to make web pages responsive to mouse clicks and other visitor input; it's an essential tool for creating fun, interactive, and functional websites and applications. In this video, we'll review examples of JavaScript in action.
Website examples:
Related Treehouse content
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
JavaScript is a popular general purpose
programming language you can use to power
0:09
web servers, create desktop and
mobile applications, even control robots.
0:14
But JavaScript was initially
designed to run in the browser,
0:19
to make webpages responsive to mouse
clicks and other visitor input.
0:22
It's one of the essential tools for
creating fun, interactive,
0:26
and useful websites and applications.
0:30
I'm Guil, a developer and
an instructor here at Treehouse.
0:32
In this course,
you'll start to learn how to bring
0:35
webpages to life using
the power of JavaScript.
0:39
This course assumes you know
your way around JavaScript basics.
0:42
So make sure you've completed
the prerequisites listed in the teacher's
0:46
notes with this video, before continuing.
0:49
JavaScript lets you create interactive
webpages that respond to a user's actions.
0:52
For example, a user clicks on a button,
or fills out a form, and
0:57
then something happens, as a result.
1:01
New content appears on the page,
form fields provide validation hints,
1:03
a video plays, and more.
1:07
First, let's look at examples of
JavaScript's role in helping you create
1:10
immersive, interactive web experiences.
1:14
Here's a website displaying
documentation and resources for
1:18
a popular JavaScript library called React.
1:21
These docs, like many library and
tool documentation sites,
1:24
are usually made up of static web pages.
1:28
For the most part,
there's no JavaScript interactivity.
1:31
The site contains only text and links,
which is perfect for this site,
1:34
because it's all about delivering
paragraphs of textual information.
1:38
It's just meant to model a regular page,
like a page in a book that you can read.
1:43
Next, let's check out this
JavaScript Calculator.
1:48
Clicking a number button makes that
number flash and appear in this display.
1:52
I can clear the display then,
for example, add 8 and
1:58
9, click =, and the number 17 appears.
2:03
This is what I mean by interactivity.
2:07
When the page loads, JavaScript code
tells the browser to listen for
2:10
button clicks, and
perform math in response to those clicks.
2:15
Then it alters the display to
show that math as it's performed.
2:19
Now let's have a look at
a fun interactive website,
2:24
that highlights the fall
harvest of Corto olive oil.
2:27
After the page loads, we can use the
slider at the bottom to explore the site.
2:31
This triggers an animated transition
into a video about the product.
2:37
Now, we're presented with a menu.
2:43
Clicking a menu item triggers all
sorts of changes to the page.
2:45
We can also click on the navigation
buttons along the right side of the page,
2:50
and the page transitions to
the corresponding information.
2:54
So now you're starting to understand
how JavaScript can make websites more
2:58
engaging and pleasurable to use.
3:03
Let's look at one more example,
Google Sheets.
3:06
This is an example of a full
blown web application.
3:09
You can type information into cells.
3:13
You can right click on cells to bring
up various options to, for example,
3:16
insert or delete rows, columns, and cells.
3:20
And you can navigate menus for
other functionality, such as sorting,
3:24
filtering, or even adding new sheets.
3:28
All of this interactivity is
accomplished with JavaScript,
3:32
which is listening for
actions like clicks, and
3:37
then changing what we see
based on those actions.
3:41
To make static pages
interactive with JavaScript,
3:46
you'll start by breaking
interactivity into distinct actions.
3:49
Selecting elements on the page,
manipulating or doing something with
3:53
the elements, and listening for user
actions or events, like a mouse click.
3:57
You'll learn how to take control of your
webpages by accessing something called
4:02
the Document Object Model,
or DOM, with JavaScript.
4:07
The DOM is where all
these actions take place.
4:10
There's so much to learn, and
we're gonna have fun in this course, so,
4:13
let's get started.
4:16
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up