[MUSIC]

JavaScript is an exciting language you can use to power web servers,

create desktop programs, even control robots.

But JavaScript got its start in the browser way back in 1995.

It was created to make wepages responsive to mouse clicks and

other input from visitors.

And even though it's a popular all-purpose language,

you'll still find that JavaScript is the most important tool you have for

creating fun, interactive, and useful websites.

I'm Guil, a front-end teacher here at Treehouse.

In this course,

you'll learn how to bring webpages to life using the power of JavaScript.

Now this course assumes you know your way around JavaScript basics.

So make sure you complete the prerequisites for

this course before continuing.

So first up, let's take a look at a few examples of how JavaScript

lets you create interactive webpages that respond to a users actions.

Here's a site you've probably seen before, Wikipedia.

Wikipedia is an example of a static webpage.

There's no JavaScript here.

No interactivity.

Just text and links which is perfect for this site

because it's all about delivering paragraphs of textual information.

It's just meant to model a regular page, like a page in a book that you can read.

Next, let's check out this coding calculator.

Clicking a number button makes that number flash and appear in this display.

So I'm going to add 8 + 9.

And hit = and the number 17 appears.

So this is what I mean by interactivity.

When the page loads, JavaScript code tells the browser to listen for

button clicks and perform math in response to those clicks.

Then it alters the display to show that math as it's performed.

Now let's have a look at the fun website for the St. Louis Browns.

After the page loads, we can go to the upper right-hand corner and

click on the Menu.

Now when we click the button on the calculator, numbers appeared.

Clicking this button, makes changes to the screen too.

And we now see a menu.

So let's click Players.

Once this page loads, we can click on the letters along the bottom and

images slide to show corresponding players.

So now you can start to see how JavaScript can make websites more engaging and

pleasurable to use.

Let's look at one more example.

Google Sheets.

This is an example of a full blown application in a webpage.

You can type information into cells.

You can Right-click on cells to bring up various formatting options or

copy and paste.

You can also navigate menus for other functionality,

such as sorting or adding additional rows or even sheets.

All this interactivity is accomplished with JavaScript which is listening for

actions like clicks and then changing what we see based on those actions.

[BLACK_AUDIO] In this course,

you learn how to make your own static pages interactive with JavaScript.

You learned how to break interactivity into three basic actions.

Selecting elements on the page, manipulating elements,

and listening for user actions.

A webpage has many elements on it.

For example, the calculator app we looked at has a number of keys,

each of which is a separate element.

To know when someone is clicking on a three key and not a nine key, for

instance, you first have to use JavaScript to find all those key elements.

And sort out which one is which.

This process is called selection.

Once you have an element selected, you can manipulate it in some way.

Think about the St. Louis Browns' site.

On the player's page, when we clicked on a letter, it became darker and

a little circle appeared underneath it.

By sliding in from the previously clicked letter.

These elements were being manipulated,

or changed, which helped us know where we were on the site.

Not all elements you select will be manipulated.

Often, you'll want an element to listen to what a user is doing.

Think of the spreadsheet we looked at earlier.

Once a cell is selected, we want to know what the user types so

we can put that data into the cell.

By listening to the keyword, we can change the element appropriately.

These three actions are happening in all of the interactive examples we

just looked at.

So in this course, you'll learn how to take control of your webpages

by accessing something called the Document Object Model, or DOM, with JavaScript.

The DOM is really where all these actions take place.

Now there's so much to learn and we're gonna have fun in this course.

So let's get started.