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's global environment is full of controls your code can use to make things happen. These controls come in the form of JavaScript objects and functions. Inside a browser, they allow your code to see and manipulate web pages.
An airplane cockpit has
a lot of switches and
0:01
dials the captain can use
to maneuver the airplane.
0:03
The captain can monitor the position of
the plane, communicate with nearby base
0:06
stations, take off, and
land with all those controls.
0:10
JavaScript's global environment
it's kind of like a cockpit.
0:13
It's full of controls your code
can use to make things happen.
0:17
These controls come in the form of
JavaScript objects and functions and
0:20
inside a browser they allow your code
to see and manipulate web pages.
0:23
We can explore this browser environment
through a feature in the Chrome web browser
0:28
called Developer Tools.
0:31
Now, Internet Explorer Firefox and
Safari all have similar features but
0:33
I'll be using Chrome in this course.
0:37
To follow along with me,
launch the work space for
0:39
this video or download the project files
and use your preferred text editor.
0:41
In your work space or project files,
you should see a file called index.html.
0:46
The file contains a heading one element
0:51
with an id of my heading there's
also a paragraph right below it.
0:53
If we open the page in a web browser,
0:58
you can see how the browser renders
the headline and paragraph.
1:00
So let's use the Developer Tools
to investigate and
1:03
interact with this page using JavaScript.
1:06
Once you have the web page open in Chrome,
you can find the Developer Tools in
1:08
the top right menu by going to More Tools,
then clicking Developer Tools.
1:12
You should see a window open most likely
at the bottom of your current window and
1:18
there are tabs along
the top of the window.
1:22
So let's click on the Console tab.
1:25
Here, we can type JavaScript
code in real time and
1:27
it will run as if we had written
it into the current web page.
1:30
You're probably familiar
with the alert command.
1:34
Alert is a browser function that
shows a message window to the user.
1:37
So let's try it out here, I'll type alert,
1:42
then the message,
('I made the browser message me').
1:45
Once I hit Enter, I get my message.
1:53
We can also see the current
URL by typing location.href.
1:56
Now, Chrome hides the http://
in the address bar, so
2:04
we see that the URL in the console
matches the URL in the address bar.
2:08
Now, if you wanna be sure
you could copy this URL and
2:14
paste it in the address bar and
it will just refresh the page.
2:16
So where did alert and location come from?
2:20
Well, we didn't create them and
2:23
they aren't defined in any
JavaScript file loaded by the HTML.
2:24
These variables are part of
the browser's global environment and
2:28
are many more variables in
the global environment.
2:33
Global variables are actually
properties of a single global object,
2:35
which in browsers is called window.
2:40
So lets type window into the console and
see all the properties it contains.
2:42
Here, we see the window object and
2:48
Chrome's Developer Tools gives us
a handy way to explore objects.
2:50
If you click on the triangle icon,
2:55
you can expand the object to
see all of its properties.
2:57
And notice how the window
object has a lot of properties.
3:01
These are all the controls the browser
gives you with JavaScript.
3:04
Now, if we scroll all the way down
past these dimmed down options,
3:07
we see the alert function here.
3:12
Then further down,
you'll see the location object.
3:16
If you expand the location object,
3:21
you can see the href property
we looked at earlier.
3:23
All these globals are properties
on the window object.
3:27
I'll demonstrate this by clearing
the console by typing Ctrl+L then
3:30
in the console, type window.alert and
3:36
the message ('This is
the same alert function').
3:42
And once you hit Enter,
3:49
you'll see that window alert gives
us a message box just like before.
3:50
Next, let's look at another
property of window.
3:56
And this object and some of its
properties are what we'll focus on for
3:58
the rest of this course.
4:02
It's called the document object and
we can use it to select and
4:03
control elements of
the currently loaded web page.
4:07
For example, let's change the color
of this heading to purple.
4:11
So in the console, I'll type
4:15
document.getElementByID then
4:20
target ('myHeading').
4:25
Then after that will say, style.color
= and the heading changes to purple.
4:30
So in this example,
we use the getElementByID method
4:39
on the document to select the H one
element with the ID my heading.
4:44
Then we changed it CSS
color property to purple.
4:50
Now, we'll go over this code more in depth
soon so don't worry about it too much.
4:54
The main thing to note here is
that we selected the element or
4:58
grabbed a hold of it
then we manipulated it.
5:01
This is a common sequence when
controlling a web page with JavaScript.
5:04
So let's change the heading back to black.
5:08
If you press the up arrow, the console
will give you the last command you ran.
5:10
Now, if you keep pressing up you can
dig further back into your history but
5:15
we'll just press up once.
5:18
Then we can backspace over purple,
change it to black,
5:20
and hit return and
the heading is black again.
5:24
Let's try one more change.
5:29
Try and figure out how to add a yellow
background color to the headline.
5:31
Go ahead and pause this video and
see if you can do it on your own.
5:35
First, I'll simply press the up arrow
to bring up my previous command.
5:39
Then I'll backspace to
the dot after the word style.
5:44
Now, we wanna to change the background
color and since that's two words we'll
5:49
write it in camelcase like this, then we
can set that equal to the string yellow.
5:55
And the heading background turns yellow.
6:05
Now, I'll let you change the background
color back to white on your own.
6:07
Of course, you don't usually run
JavaScript code inside a browser's
6:11
JavaScript console like this.
6:14
In fact, you'll usually make changes
like this based on a user's interaction
6:15
with the page.
6:19
Clicking the headline for example might
change the color of the headline.
6:20
That's the third part of interactive
JavaScript responding to
6:23
actions like clicking, mousing over
a button, scrolling or submitting a form.
6:27
I'll teach you about responding
to actions called events
6:31
in the fourth part of this course but for
6:35
now let's look a little more closely at
the document object in the next video.
6:37
You need to sign up for Treehouse in order to download course files.
Sign up