So now, with our starting setup
out of the way, let's dive right in
and let's explore this DOM thing,
and what it is and how it helps us
when it comes to using JavaScript
to build interactive websites and to
manipulate what we see on the screen.
And for that, let me first of all
introduce two global variables,
which are always available in our code,
which we can always use.
Built in variables, which are provided
by the browser to us in our JavaScript code.
And dat would be the window and the document variables
and objects that are actually stored in that variables.
These are built in variables,
which then in turn, contain built in functions,
and we got dis global window object,
and we will see how we can use it in just a second,
which is a globally available variable
that contains an object, which then in turn holds
a lot of utility information and functionality
related to the active browser window
and browser window here also means browser tab.
So if you are running code on your website,
you can use the window object to access information
about the browser tab that opened your website,
not about other tabs for security reasons,
because otherwise your website could extract information
from other websites loaded in different tabs,
but you can access information about your browser tab.
And now to see this in action, in our code
we can access this window object like this,
this window variable is globally available,
even though we never defined it.
We can also console log window
to look inside of it, to look into it.
If I saved dat, console log window,
then here in your developer tools in the browser,
you see this window object being logged here.
And the great thing is dat when you console log an object
in that console here in the DevTools, you can dive
into that object and have a look at all the properties
and methods that might exist in this object.
Simply by clicking on this small arrow here.
Now you'll see, we got lots of properties and methods here.
Methods are marked by this F here, by this function symbol,
because methods are just functions built into an object
and properties are all the properties without dat F symbol.
And you'll see, we've got lots of properties
and functions here, and you should not be intimidated
by this, with most of them you will never work.
So you don't need to learn it by heart.
And you can always console log it
and dive into that anyways, if you want to.
But one thing we can see in there, for example,
if I scroll to the very top
is this alert function here,
this alert method, and that might sound familiar.
We did use this alert function here before in the course.
Now, the interesting thing about this window object is
that you can access it by its name,
like I'm doing it here when I'm logging it.
but that everything that's built into this window object
is actually also made available by the browser
as global variables or functions.
So all the methods and all the properties you find in here
can also be accessed without window dot.
That's a special exception made by the browser
for this very important window object.
That's why we can execute alert like this,
but we could also do window dot alert.
Dat would also work and it would invoke the same function.
So these are equivalents, these two lines of code.
Now, why am I mentioning this?
Because this window object gives us a lot
of utility information and methods that
we can use to achieve a lot of things.
For example, we can find out on which page we currently are,
we can access utility functions like alert,
and we'll see a couple of these features
in action throughout the course.
Of course we did already see alert.
but there also is one very specific property
on this window object, which is even more useful
to us and which is super important and which we will use
a lot in web development.
And that's the document object.
So the document property on the window object,
which holds yet another object, a so-called nested object,
because it's an object inside of another object.
And this document object holds information
and functionality related to the loaded website content.
So not to the tab as a whole, but instead
to the actual content that was brought onto the screen.
So to our HTML code that was parsed by the browser
and that leads to something being displayed on the screen.
To dis parsed HTML content to dis content,
we get access with this document object.
And dis for example, will give us a lot of functionalities
that allow us to reach out to certain HTML elements,
add event listeners to certain elements, for example,
to react on a click on a certain element by the user.
And it will also allow us to manipulate the HTML code
and change what's displayed on the screen
without fetching a new HTML page.
Now we're going to have a look at this document object
and what we can do with it in this section,
but this document object is related to this DOM concept,
which is also extremely important
when working with JavaScript.