1
00:00:01,030 --> 00:00:03,190
An airplane cockpit has
a lot of switches and

2
00:00:03,190 --> 00:00:06,390
dials the captain can use
to maneuver the airplane.

3
00:00:06,390 --> 00:00:10,090
The captain can monitor the position of
the plane, communicate with nearby base

4
00:00:10,090 --> 00:00:13,990
stations, take off, and
land with all those controls.

5
00:00:13,990 --> 00:00:17,020
JavaScript's global environment
it's kind of like a cockpit.

6
00:00:17,020 --> 00:00:20,230
It's full of controls your code
can use to make things happen.

7
00:00:20,230 --> 00:00:23,780
These controls come in the form of
JavaScript objects and functions and

8
00:00:23,780 --> 00:00:27,039
inside a browser they allow your code
to see and manipulate web pages.

9
00:00:28,110 --> 00:00:31,850
We can explore this browser environment
through a feature in the Chrome web browser

10
00:00:31,850 --> 00:00:33,620
called Developer Tools.

11
00:00:33,620 --> 00:00:37,510
Now, Internet Explorer Firefox and
Safari all have similar features but

12
00:00:37,510 --> 00:00:39,440
I'll be using Chrome in this course.

13
00:00:39,440 --> 00:00:41,410
To follow along with me,
launch the work space for

14
00:00:41,410 --> 00:00:44,770
this video or download the project files
and use your preferred text editor.

15
00:00:46,460 --> 00:00:51,360
In your work space or project files,
you should see a file called index.html.

16
00:00:51,360 --> 00:00:53,940
The file contains a heading one element

17
00:00:53,940 --> 00:00:58,000
with an id of my heading there's
also a paragraph right below it.

18
00:00:58,000 --> 00:01:00,310
If we open the page in a web browser,

19
00:01:00,310 --> 00:01:03,330
you can see how the browser renders
the headline and paragraph.

20
00:01:03,330 --> 00:01:06,320
So let's use the Developer Tools
to investigate and

21
00:01:06,320 --> 00:01:08,760
interact with this page using JavaScript.

22
00:01:08,760 --> 00:01:12,540
Once you have the web page open in Chrome,
you can find the Developer Tools in

23
00:01:12,540 --> 00:01:18,550
the top right menu by going to More Tools,
then clicking Developer Tools.

24
00:01:18,550 --> 00:01:22,230
You should see a window open most likely
at the bottom of your current window and

25
00:01:22,230 --> 00:01:25,150
there are tabs along
the top of the window.

26
00:01:25,150 --> 00:01:27,790
So let's click on the Console tab.

27
00:01:27,790 --> 00:01:30,740
Here, we can type JavaScript
code in real time and

28
00:01:30,740 --> 00:01:34,700
it will run as if we had written
it into the current web page.

29
00:01:34,700 --> 00:01:37,960
You're probably familiar
with the alert command.

30
00:01:37,960 --> 00:01:42,560
Alert is a browser function that
shows a message window to the user.

31
00:01:42,560 --> 00:01:45,589
So let's try it out here, I'll type alert,

32
00:01:45,589 --> 00:01:49,588
then the message,
('I made the browser message me').

33
00:01:53,581 --> 00:01:56,460
Once I hit Enter, I get my message.

34
00:01:56,460 --> 00:02:02,814
We can also see the current
URL by typing location.href.

35
00:02:04,300 --> 00:02:08,670
Now, Chrome hides the http://
in the address bar, so

36
00:02:08,670 --> 00:02:14,310
we see that the URL in the console
matches the URL in the address bar.

37
00:02:14,310 --> 00:02:16,890
Now, if you wanna be sure
you could copy this URL and

38
00:02:16,890 --> 00:02:20,750
paste it in the address bar and
it will just refresh the page.

39
00:02:20,750 --> 00:02:23,070
So where did alert and location come from?

40
00:02:23,070 --> 00:02:24,640
Well, we didn't create them and

41
00:02:24,640 --> 00:02:28,960
they aren't defined in any
JavaScript file loaded by the HTML.

42
00:02:28,960 --> 00:02:33,320
These variables are part of
the browser's global environment and

43
00:02:33,320 --> 00:02:35,870
are many more variables in
the global environment.

44
00:02:35,870 --> 00:02:40,030
Global variables are actually
properties of a single global object,

45
00:02:40,030 --> 00:02:42,780
which in browsers is called window.

46
00:02:42,780 --> 00:02:48,332
So lets type window into the console and
see all the properties it contains.

47
00:02:48,332 --> 00:02:50,478
Here, we see the window object and

48
00:02:50,478 --> 00:02:55,055
Chrome's Developer Tools gives us
a handy way to explore objects.

49
00:02:55,055 --> 00:02:57,625
If you click on the triangle icon,

50
00:02:57,625 --> 00:03:01,145
you can expand the object to
see all of its properties.

51
00:03:01,145 --> 00:03:04,095
And notice how the window
object has a lot of properties.

52
00:03:04,095 --> 00:03:07,985
These are all the controls the browser
gives you with JavaScript.

53
00:03:07,985 --> 00:03:12,565
Now, if we scroll all the way down
past these dimmed down options,

54
00:03:12,565 --> 00:03:14,455
we see the alert function here.

55
00:03:16,130 --> 00:03:20,030
Then further down,
you'll see the location object.

56
00:03:21,170 --> 00:03:23,450
If you expand the location object,

57
00:03:23,450 --> 00:03:27,000
you can see the href property
we looked at earlier.

58
00:03:27,000 --> 00:03:30,650
All these globals are properties
on the window object.

59
00:03:30,650 --> 00:03:36,820
I'll demonstrate this by clearing
the console by typing Ctrl+L then

60
00:03:36,820 --> 00:03:42,730
in the console, type window.alert and

61
00:03:42,730 --> 00:03:46,655
the message ('This is
the same alert function').

62
00:03:49,480 --> 00:03:50,660
And once you hit Enter,

63
00:03:50,660 --> 00:03:56,140
you'll see that window alert gives
us a message box just like before.

64
00:03:56,140 --> 00:03:58,790
Next, let's look at another
property of window.

65
00:03:58,790 --> 00:04:02,320
And this object and some of its
properties are what we'll focus on for

66
00:04:02,320 --> 00:04:03,830
the rest of this course.

67
00:04:03,830 --> 00:04:07,650
It's called the document object and
we can use it to select and

68
00:04:07,650 --> 00:04:11,010
control elements of
the currently loaded web page.

69
00:04:11,010 --> 00:04:15,930
For example, let's change the color
of this heading to purple.

70
00:04:15,930 --> 00:04:20,473
So in the console, I'll type

71
00:04:20,473 --> 00:04:25,567
document.getElementByID then

72
00:04:25,567 --> 00:04:30,130
target ('myHeading').

73
00:04:30,130 --> 00:04:39,880
Then after that will say, style.color
= and the heading changes to purple.

74
00:04:39,880 --> 00:04:44,910
So in this example,
we use the getElementByID method

75
00:04:44,910 --> 00:04:50,550
on the document to select the H one
element with the ID my heading.

76
00:04:50,550 --> 00:04:54,000
Then we changed it CSS
color property to purple.

77
00:04:54,000 --> 00:04:58,340
Now, we'll go over this code more in depth
soon so don't worry about it too much.

78
00:04:58,340 --> 00:05:01,850
The main thing to note here is
that we selected the element or

79
00:05:01,850 --> 00:05:04,680
grabbed a hold of it
then we manipulated it.

80
00:05:04,680 --> 00:05:08,490
This is a common sequence when
controlling a web page with JavaScript.

81
00:05:08,490 --> 00:05:10,830
So let's change the heading back to black.

82
00:05:10,830 --> 00:05:15,600
If you press the up arrow, the console
will give you the last command you ran.

83
00:05:15,600 --> 00:05:18,867
Now, if you keep pressing up you can
dig further back into your history but

84
00:05:18,867 --> 00:05:20,088
we'll just press up once.

85
00:05:20,088 --> 00:05:24,999
Then we can backspace over purple,
change it to black,

86
00:05:24,999 --> 00:05:29,690
and hit return and
the heading is black again.

87
00:05:29,690 --> 00:05:31,460
Let's try one more change.

88
00:05:31,460 --> 00:05:35,030
Try and figure out how to add a yellow
background color to the headline.

89
00:05:35,030 --> 00:05:37,520
Go ahead and pause this video and
see if you can do it on your own.

90
00:05:39,920 --> 00:05:44,370
First, I'll simply press the up arrow
to bring up my previous command.

91
00:05:44,370 --> 00:05:49,600
Then I'll backspace to
the dot after the word style.

92
00:05:49,600 --> 00:05:55,213
Now, we wanna to change the background
color and since that's two words we'll

93
00:05:55,213 --> 00:06:00,939
write it in camelcase like this, then we
can set that equal to the string yellow.

94
00:06:05,130 --> 00:06:07,280
And the heading background turns yellow.

95
00:06:07,280 --> 00:06:11,040
Now, I'll let you change the background
color back to white on your own.

96
00:06:11,040 --> 00:06:14,251
Of course, you don't usually run
JavaScript code inside a browser's

97
00:06:14,251 --> 00:06:15,706
JavaScript console like this.

98
00:06:15,706 --> 00:06:19,340
In fact, you'll usually make changes
like this based on a user's interaction

99
00:06:19,340 --> 00:06:20,370
with the page.

100
00:06:20,370 --> 00:06:23,830
Clicking the headline for example might
change the color of the headline.

101
00:06:23,830 --> 00:06:27,070
That's the third part of interactive
JavaScript responding to

102
00:06:27,070 --> 00:06:31,790
actions like clicking, mousing over
a button, scrolling or submitting a form.

103
00:06:31,790 --> 00:06:35,210
I'll teach you about responding
to actions called events

104
00:06:35,210 --> 00:06:37,150
in the fourth part of this course but for

105
00:06:37,150 --> 00:06:41,210
now let's look a little more closely at
the document object in the next video.