An airplane cockpit has a lot of switches and

dials the captain can use to maneuver the airplane.

The captain can monitor the position of the plane, communicate with nearby base

stations, take off, and land with all those controls.

JavaScript's global environment it's kind of like a cockpit.

It's full of controls your code can use to make things happen.

These controls come in the form of JavaScript objects and functions and

inside a browser they allow your code to see and manipulate web pages.

We can explore this browser environment through a feature in the Chrome web browser

called Developer Tools.

Now, Internet Explorer Firefox and Safari all have similar features but

I'll be using Chrome in this course.

To follow along with me, launch the work space for

this video or download the project files and use your preferred text editor.

In your work space or project files, you should see a file called index.html.

The file contains a heading one element

with an id of my heading there's also a paragraph right below it.

If we open the page in a web browser,

you can see how the browser renders the headline and paragraph.

So let's use the Developer Tools to investigate and

interact with this page using JavaScript.

Once you have the web page open in Chrome, you can find the Developer Tools in

the top right menu by going to More Tools, then clicking Developer Tools.

You should see a window open most likely at the bottom of your current window and

there are tabs along the top of the window.

So let's click on the Console tab.

Here, we can type JavaScript code in real time and

it will run as if we had written it into the current web page.

You're probably familiar with the alert command.

Alert is a browser function that shows a message window to the user.

So let's try it out here, I'll type alert,

then the message, ('I made the browser message me').

Once I hit Enter, I get my message.

We can also see the current URL by typing location.href.

Now, Chrome hides the http:// in the address bar, so

we see that the URL in the console matches the URL in the address bar.

Now, if you wanna be sure you could copy this URL and

paste it in the address bar and it will just refresh the page.

So where did alert and location come from?

Well, we didn't create them and

they aren't defined in any JavaScript file loaded by the HTML.

These variables are part of the browser's global environment and

are many more variables in the global environment.

Global variables are actually properties of a single global object,

which in browsers is called window.

So lets type window into the console and see all the properties it contains.

Here, we see the window object and

Chrome's Developer Tools gives us a handy way to explore objects.

If you click on the triangle icon,

you can expand the object to see all of its properties.

And notice how the window object has a lot of properties.

These are all the controls the browser gives you with JavaScript.

Now, if we scroll all the way down past these dimmed down options,

we see the alert function here.

Then further down, you'll see the location object.

If you expand the location object,

you can see the href property we looked at earlier.

All these globals are properties on the window object.

I'll demonstrate this by clearing the console by typing Ctrl+L then

in the console, type window.alert and

the message ('This is the same alert function').

And once you hit Enter,

you'll see that window alert gives us a message box just like before.

Next, let's look at another property of window.

And this object and some of its properties are what we'll focus on for

the rest of this course.

It's called the document object and we can use it to select and

control elements of the currently loaded web page.

For example, let's change the color of this heading to purple.

So in the console, I'll type

document.getElementByID then

target ('myHeading').

Then after that will say, style.color = and the heading changes to purple.

So in this example, we use the getElementByID method

on the document to select the H one element with the ID my heading.

Then we changed it CSS color property to purple.

Now, we'll go over this code more in depth soon so don't worry about it too much.

The main thing to note here is that we selected the element or

grabbed a hold of it then we manipulated it.

This is a common sequence when controlling a web page with JavaScript.

So let's change the heading back to black.

If you press the up arrow, the console will give you the last command you ran.

Now, if you keep pressing up you can dig further back into your history but

we'll just press up once.

Then we can backspace over purple, change it to black,

and hit return and the heading is black again.

Let's try one more change.

Try and figure out how to add a yellow background color to the headline.

Go ahead and pause this video and see if you can do it on your own.

First, I'll simply press the up arrow to bring up my previous command.

Then I'll backspace to the dot after the word style.

Now, we wanna to change the background color and since that's two words we'll

write it in camelcase like this, then we can set that equal to the string yellow.

And the heading background turns yellow.

Now, I'll let you change the background color back to white on your own.

Of course, you don't usually run JavaScript code inside a browser's

JavaScript console like this.

In fact, you'll usually make changes like this based on a user's interaction

with the page.

Clicking the headline for example might change the color of the headline.

That's the third part of interactive JavaScript responding to

actions like clicking, mousing over a button, scrolling or submitting a form.

I'll teach you about responding to actions called events

in the fourth part of this course but for

now let's look a little more closely at the document object in the next video.