Preview
Video Player
00:00
00:00
The Browser's Global window Object
4:35The browser as a global environment provides variables, objects, and functions additional to those in the core JavaScript language to make things happen inside the browser window; it's what allows your JavaScript code to connect to the DOM and manipulate a web page. The browser has a global object called window containing all the properties and methods available to the current browser window.
Earlier you learned that JavaScript
can run in different environments.
0:00
The environment in which JavaScript runs
is called the host or global environment.
0:04
The browser as a global environment
provides variables, objects, and
0:09
functions additional to those in the core
JavaScript language to make things happen
0:13
inside the browser window.
0:18
It's what allows your JavaScript
code to connect to the DOM and
0:19
manipulate a web page.
0:23
We can explore this browser environment
through the web browser's developer tools.
0:24
Microsoft Edge, Firefox, and
Safari have similar features, but
0:28
I'll be using Chrome in this course.
0:32
To follow along with me,
launch the Workspace with this video, or
0:34
download the project files and
use your preferred text editor.
0:37
In your workspace or project files, the
file index.html contains the markup for
0:40
a simple daily task list application.
0:46
I've provided all the styles for
0:49
this app, which you can view by
previewing index.html in the web browser.
0:51
This application doesn't do much yet,
it's static, but
0:56
that's all about to change soon.
0:59
You're going to write JavaScript to build
up this app and make it interactive.
1:01
You'll be able to add new tasks,
remove specific tasks,
1:05
even show and hide the task list.
1:10
Let's first use the browser's
developer tools to investigate and
1:13
interact with this page using JavaScript.
1:17
In the Console panel, we can type
JavaScript code in real time, and
1:20
it will run as if we'd written
into the current web page.
1:24
For example, you're probably
familiar with the alert method.
1:28
Alert is a browser function that
shows a message window to the user
1:32
via an alert dialog.
1:36
Let's try it out here by passing alert
the string, "I made the browser message me".
1:37
I'll press Enter, and my message appears.
1:46
We can also see the current
URL by typing location.href.
1:50
And we see that the URL in the console
matches the URL in the address bar.
1:56
So where did alert and location come from?
2:02
We didn't create them, and
2:06
they are not defined in a JavaScript
file loaded by the HTML page.
2:08
alert and
2:12
location are part of the browser's
global environment I mentioned earlier.
2:13
The browser has a global object called
the window object containing all
2:19
the properties and methods available
to the current browser window or
2:24
what you're viewing in the browser tab.
2:28
So let's type window into the console and
see all the properties and
2:31
methods it contains.
2:36
This is the window object, and
2:38
Chrome's developer tools gives us
a handy way to explore objects.
2:40
Click the arrow to expand the object and
view all of its properties and methods.
2:44
Notice how the window object has many.
2:49
You can think of these as the controls
the browser exposes to JavaScript
2:51
to let it interact with
the current web page.
2:56
For instance,
here you'll find familiar functions
2:59
like alert and
the location property we just used.
3:04
Expanding this location
object shows that it
3:08
contains the href property,
holding the current URL.
3:12
All of these globals are properties
on the window object.
3:17
I'll demonstrate this by first
3:24
clearing the console by typing Ctrl L,
3:28
then typing window.alert.
3:33
And passing alert the string,
"the browser messaged me again".
3:37
And this pops up the alert
dialog box just like before
3:46
And window.location.href also
works in the same way as before
3:52
Keep in mind that you're able
to call any properties and
4:03
methods of the window object without
explicitly referencing window.,
4:07
because window is the global object of the
environment our JavaScript is running in.
4:12
So its properties and methods
are automatically globally available even
4:18
without referencing the window
object specifically.
4:23
So, accessing any of these properties and
4:26
methods without typing window first is
sort of a shorthand way of doing so.
4:29