1 00:00:08,940 --> 00:00:14,730 Hey, everyone, in this video, we're going to talk about the bomb, which is the browser object model, 2 00:00:15,070 --> 00:00:20,830 this is similar to the DOM, but this time, instead of working with the HTML structure of our page, 3 00:00:21,070 --> 00:00:23,630 we are going to be working with the browser window. 4 00:00:23,980 --> 00:00:29,830 So through this object, we can interact with certain properties of the browser, like the width of 5 00:00:29,830 --> 00:00:31,950 the window, the cursor position. 6 00:00:32,140 --> 00:00:36,510 We can track movements to the scroll bar like this and so on. 7 00:00:36,760 --> 00:00:43,470 And while the DOM is access through the document object, the bomb is accessed through the window object. 8 00:00:43,750 --> 00:00:50,410 So if we do window dot then we can choose one of the properties of the window object. 9 00:00:50,680 --> 00:00:59,080 One example is the inner with which is going to return the internal width of the browser in pixels when 10 00:00:59,080 --> 00:01:00,850 we are working with the bomb. 11 00:01:01,270 --> 00:01:04,030 We can also omit the window object. 12 00:01:04,240 --> 00:01:09,590 So if we do just inor with, we are going to have the same result. 13 00:01:09,910 --> 00:01:16,200 However, it's not recommended to do this because then our code is going to be a bit confusing. 14 00:01:16,570 --> 00:01:21,450 We can maybe start mixing these properties with our own variables. 15 00:01:21,670 --> 00:01:29,170 So I suggest that even though you can amend the window object, I suggest you always mention it, unless 16 00:01:29,170 --> 00:01:37,210 we are talking about very well-known methods that are unique enough not to be confused with variables. 17 00:01:37,660 --> 00:01:40,330 So one example is the alert method. 18 00:01:40,570 --> 00:01:44,220 The alert method is actually part of the window object. 19 00:01:44,230 --> 00:01:50,650 So since the beginning we could be doing like this, a window dot alert and then. 20 00:01:51,980 --> 00:01:59,510 Let's just send some test so as you can see, this is a method of the window object, but as a convention, 21 00:01:59,510 --> 00:02:03,020 everyone just writes the alert function like this. 22 00:02:05,420 --> 00:02:07,020 So we have the same result. 23 00:02:07,050 --> 00:02:13,670 So in this case, it's OK to omit the window object because everyone knows what the alert is. 24 00:02:14,270 --> 00:02:18,770 But for other properties, I suggest you still use the window object. 25 00:02:19,340 --> 00:02:21,470 The same thing for the console, that log. 26 00:02:22,380 --> 00:02:29,700 Let's just copy this, and as you can see, the console, that log is also a method of the window object. 27 00:02:31,390 --> 00:02:38,230 So, again, this time you are not going to confuse console dialogue with anything so you can just omit 28 00:02:38,230 --> 00:02:40,360 the window object and do like this. 29 00:02:40,390 --> 00:02:48,310 One thing cool about the window object is that it also stores all the global variables we create in 30 00:02:48,310 --> 00:02:49,070 our code. 31 00:02:49,300 --> 00:02:54,910 So let's go to Visual Studio Code, and I'm just going to create a variable here so far. 32 00:02:55,930 --> 00:03:04,100 My name and let's just assign Tom to it, so now we are creating a global variable. 33 00:03:04,390 --> 00:03:09,520 This is not inside any function, so it is going to be in the global scope. 34 00:03:09,760 --> 00:03:11,470 Now, I'm going to save this. 35 00:03:12,780 --> 00:03:19,230 And going back to our page, I'm just going to refresh it, if I tried to access this variable by the 36 00:03:19,230 --> 00:03:25,950 name, we can see that it's here and we can also access this variable using window dot. 37 00:03:28,340 --> 00:03:34,610 My name, so as you can see, all our global variables are stored inside the window object. 38 00:03:35,540 --> 00:03:41,690 For this reason, we should be extra careful because if we create a variable that has the same name 39 00:03:41,690 --> 00:03:46,990 of one of the properties of the window object, it is just going to be overwritten. 40 00:03:47,210 --> 00:03:50,300 So we just saw that if we do window. 41 00:03:51,810 --> 00:03:53,550 That interview with. 42 00:03:56,280 --> 00:04:01,920 We can get the width of the browser, but then if we create a variable, a global variable. 43 00:04:02,940 --> 00:04:04,770 Called in with. 44 00:04:07,110 --> 00:04:15,480 Let's assign 10 to it now, when we do again, window that inner with, we can see that it has been 45 00:04:15,480 --> 00:04:16,410 overwritten. 46 00:04:17,160 --> 00:04:23,610 So you need to be careful not to use the same names as these properties if you want a complete list 47 00:04:23,730 --> 00:04:26,810 of properties and methods of the window object. 48 00:04:26,820 --> 00:04:30,200 I just left a link where you can go and check it out. 49 00:04:30,300 --> 00:04:33,500 So there are many interesting things we can do with the bomb. 50 00:04:33,510 --> 00:04:38,540 I'm just going to show one example and then later in the course we can get back to this. 51 00:04:38,550 --> 00:04:44,150 So let's just track the mouse movement inside the window object. 52 00:04:44,190 --> 00:04:48,750 So going back to Visual Studio Code, I can just comment this now. 53 00:04:49,230 --> 00:04:58,380 So I'm just going to call window dot on mouse move, which is an event of this object. 54 00:05:00,190 --> 00:05:02,650 Then I'm going to assign a function. 55 00:05:07,050 --> 00:05:08,190 To this event. 56 00:05:09,470 --> 00:05:15,500 And now, before I do anything, I'm just going to do console that log just so we can understand how 57 00:05:15,500 --> 00:05:17,900 this event is going to be tracked. 58 00:05:18,110 --> 00:05:20,090 I'm just going to write moved. 59 00:05:20,480 --> 00:05:23,210 So saving this refreshing the page. 60 00:05:23,510 --> 00:05:30,170 Now, as you can see, every time we move one pixel to the left or to the right or to the top or bottom, 61 00:05:30,650 --> 00:05:32,510 we are getting that message. 62 00:05:32,870 --> 00:05:37,810 So every movement we do with the cursor is being tracked by our script. 63 00:05:38,450 --> 00:05:41,420 Pretty cool, but what can we do with this? 64 00:05:42,020 --> 00:05:48,560 Well, going back there, if we pass an argument here, you can name it whatever you want. 65 00:05:48,570 --> 00:05:50,410 Some people just name it event. 66 00:05:50,420 --> 00:05:53,890 Some people just name it e it really doesn't matter. 67 00:05:53,900 --> 00:05:58,210 What matters is this is going to be the event itself. 68 00:05:58,220 --> 00:06:01,400 So then we can get information about this event. 69 00:06:01,670 --> 00:06:04,640 So this time let's just try to do E! 70 00:06:06,370 --> 00:06:08,200 That page, why? 71 00:06:12,320 --> 00:06:13,400 If we do this. 72 00:06:16,210 --> 00:06:23,830 Refresh the page now, what's going to the council is the possession of the cursor relative to the top 73 00:06:23,830 --> 00:06:27,430 of the screen, so I'm just going to move the cursor down. 74 00:06:27,760 --> 00:06:30,090 As you can see, the number is increasing. 75 00:06:30,640 --> 00:06:37,360 And if I move it up, the number is now decreasing until reaching almost zero. 76 00:06:37,360 --> 00:06:41,620 If I touch the top of the screen, as you can see, this is now zero. 77 00:06:43,200 --> 00:06:46,470 The same way we can also use page X. 78 00:06:51,800 --> 00:06:59,210 So refreshing the page this time it is the distance from the left side of the window. 79 00:06:59,420 --> 00:07:05,750 So if we go all the way to the left, we can see that here is zero going all the way to the right. 80 00:07:06,870 --> 00:07:13,560 This is nine fifty seven, so this is how some websites, I don't know if you've noticed, but some 81 00:07:13,560 --> 00:07:19,080 websites when you were about to close them, then you just go with your cursor to close it. 82 00:07:19,440 --> 00:07:24,640 They just send an alert trying to make you stay at the website. 83 00:07:24,900 --> 00:07:26,550 So how do they do this? 84 00:07:27,480 --> 00:07:35,220 Well, they just track the movement of the cursor, so then they're going to be tracking this event 85 00:07:35,490 --> 00:07:39,720 and every time so we are going to start an if statement. 86 00:07:41,810 --> 00:07:49,130 So every time this e that page, why which is the position relative to the top of the screen, every 87 00:07:49,130 --> 00:07:55,090 time this is less than five pixels, then we are going to do something. 88 00:07:55,100 --> 00:07:58,040 And in this case, we can just send an alert. 89 00:07:59,420 --> 00:08:07,250 With some marketing message, let me just copy this, something like don't miss our flash sale, go 90 00:08:07,250 --> 00:08:10,330 to the product section for exclusive discounts. 91 00:08:10,910 --> 00:08:13,580 So if we do this, save it. 92 00:08:14,480 --> 00:08:16,490 Now, let's refresh the page. 93 00:08:18,670 --> 00:08:24,570 And let me just go to the cursor down here, as you can see, when we are moving the cursor down here, 94 00:08:24,580 --> 00:08:25,870 nothing is happening. 95 00:08:26,230 --> 00:08:34,120 But when we go up with the intention of maybe closing the tab or just typing another address when it's 96 00:08:34,120 --> 00:08:35,190 less than five. 97 00:08:35,590 --> 00:08:37,300 So now we see the alert. 98 00:08:37,720 --> 00:08:40,110 Don't miss our flash sale, blah, blah, blah. 99 00:08:40,720 --> 00:08:43,510 So this is how these websites do this. 100 00:08:43,750 --> 00:08:47,210 So this is the one example that I wanted to show you. 101 00:08:47,230 --> 00:08:51,070 Now, if you want, you can just research more about the bomb. 102 00:08:51,220 --> 00:08:57,460 As always, you can go to W three schools so you can just search for G.S. bomb. 103 00:08:58,740 --> 00:09:06,300 W three, if you type this, you're going to go directly to W three schools and here you can see more 104 00:09:06,300 --> 00:09:11,190 properties, methods and more cool stuff you can do with this object. 105 00:09:12,760 --> 00:09:13,940 So that was all for now. 106 00:09:13,960 --> 00:09:15,370 I'll see you in the next video.