Hey, everyone, in this video, we're going to talk about the bomb, which is the browser object model,
this is similar to the DOM, but this time, instead of working with the HTML structure of our page,
we are going to be working with the browser window.
So through this object, we can interact with certain properties of the browser, like the width of
the window, the cursor position.
We can track movements to the scroll bar like this and so on.
And while the DOM is access through the document object, the bomb is accessed through the window object.
So if we do window dot then we can choose one of the properties of the window object.
One example is the inner with which is going to return the internal width of the browser in pixels when
we are working with the bomb.
We can also omit the window object.
So if we do just inor with, we are going to have the same result.
However, it's not recommended to do this because then our code is going to be a bit confusing.
We can maybe start mixing these properties with our own variables.
So I suggest that even though you can amend the window object, I suggest you always mention it, unless
we are talking about very well-known methods that are unique enough not to be confused with variables.
So one example is the alert method.
The alert method is actually part of the window object.
So since the beginning we could be doing like this, a window dot alert and then.
Let's just send some test so as you can see, this is a method of the window object, but as a convention,
everyone just writes the alert function like this.
So we have the same result.
So in this case, it's OK to omit the window object because everyone knows what the alert is.
But for other properties, I suggest you still use the window object.
The same thing for the console, that log.
Let's just copy this, and as you can see, the console, that log is also a method of the window object.
So, again, this time you are not going to confuse console dialogue with anything so you can just omit
the window object and do like this.
One thing cool about the window object is that it also stores all the global variables we create in
our code.
So let's go to Visual Studio Code, and I'm just going to create a variable here so far.
My name and let's just assign Tom to it, so now we are creating a global variable.
This is not inside any function, so it is going to be in the global scope.
Now, I'm going to save this.
And going back to our page, I'm just going to refresh it, if I tried to access this variable by the
name, we can see that it's here and we can also access this variable using window dot.
My name, so as you can see, all our global variables are stored inside the window object.
For this reason, we should be extra careful because if we create a variable that has the same name
of one of the properties of the window object, it is just going to be overwritten.
So we just saw that if we do window.
That interview with.
We can get the width of the browser, but then if we create a variable, a global variable.
Called in with.
Let's assign 10 to it now, when we do again, window that inner with, we can see that it has been
overwritten.
So you need to be careful not to use the same names as these properties if you want a complete list
of properties and methods of the window object.
I just left a link where you can go and check it out.
So there are many interesting things we can do with the bomb.
I'm just going to show one example and then later in the course we can get back to this.
So let's just track the mouse movement inside the window object.
So going back to Visual Studio Code, I can just comment this now.
So I'm just going to call window dot on mouse move, which is an event of this object.
Then I'm going to assign a function.
To this event.
And now, before I do anything, I'm just going to do console that log just so we can understand how
this event is going to be tracked.
I'm just going to write moved.
So saving this refreshing the page.
Now, as you can see, every time we move one pixel to the left or to the right or to the top or bottom,
we are getting that message.
So every movement we do with the cursor is being tracked by our script.
Pretty cool, but what can we do with this?
Well, going back there, if we pass an argument here, you can name it whatever you want.
Some people just name it event.
Some people just name it e it really doesn't matter.
What matters is this is going to be the event itself.
So then we can get information about this event.
So this time let's just try to do E!
That page, why?
If we do this.
Refresh the page now, what's going to the council is the possession of the cursor relative to the top
of the screen, so I'm just going to move the cursor down.
As you can see, the number is increasing.
And if I move it up, the number is now decreasing until reaching almost zero.
If I touch the top of the screen, as you can see, this is now zero.
The same way we can also use page X.
So refreshing the page this time it is the distance from the left side of the window.
So if we go all the way to the left, we can see that here is zero going all the way to the right.
This is nine fifty seven, so this is how some websites, I don't know if you've noticed, but some
websites when you were about to close them, then you just go with your cursor to close it.
They just send an alert trying to make you stay at the website.
So how do they do this?
Well, they just track the movement of the cursor, so then they're going to be tracking this event
and every time so we are going to start an if statement.
So every time this e that page, why which is the position relative to the top of the screen, every
time this is less than five pixels, then we are going to do something.
And in this case, we can just send an alert.
With some marketing message, let me just copy this, something like don't miss our flash sale, go
to the product section for exclusive discounts.
So if we do this, save it.
Now, let's refresh the page.
And let me just go to the cursor down here, as you can see, when we are moving the cursor down here,
nothing is happening.
But when we go up with the intention of maybe closing the tab or just typing another address when it's
less than five.
So now we see the alert.
Don't miss our flash sale, blah, blah, blah.
So this is how these websites do this.
So this is the one example that I wanted to show you.
Now, if you want, you can just research more about the bomb.
As always, you can go to W three schools so you can just search for G.S. bomb.
W three, if you type this, you're going to go directly to W three schools and here you can see more
properties, methods and more cool stuff you can do with this object.
So that was all for now.
I'll see you in the next video.