Java script window- The Browser Object Model

BROWSER OBJECT MODEL

JavaScript window- The Browser Object Model

(00:00)

Hello guys, welcome to our JavaScript series. In our last segment, we saw a browser object model where we saw different objects in the browser. It was an introductory segment. I hope you have practiced all the objects we saw in JavaScript. Let’s move further in our today’s segment. Our today’s segment is about browser object model, starting from today’s segment till next five segments, we are going to study all the objects which JavaScript’s browser object model gives us, means in last segment we saw JavaScript’s object but from now onwards we will see JavaScript’s browser object model.

So whenever you have to work with a browser, then till last segment the objects which we saw like array, string, math, number etc we cannot work with the browser with the help of that. In order to work with browsers we have to learn browser related object methods so starting from today’s segment till the upcoming next five segments we are going to see the browser object model.

Let’s start with BOM i.e. browser object model. The name itself tells us that it interacts with browsers. For example we have many browsers available like Google chrome, Microsoft edge, Mozilla firefox, internet explorer, opera, safari. Every object has its own object browser model, object model means when we have to interact with different browsers then you have to take help of different browser’s object model, means such object which browser gives you with help of that we can perform browser related task and you can also get data of browser and you can set data in browser also, in browser when go from one screen to other screen means we can perform navigation.

(02:46)

So whatever browser related tasks are for that we will use browser object model. Here it is written, “the default object of browser is window means you can call all the functions of the window by specifying window or directly”. Means the first object of the browser object model which BOM provides us with, is a window object. All the methods available to us in the window object, you can write as window dot then name of method or you can do this without writing window dot, means If I write window dot alert or I simply write alert, my output will be the same. That means, I can use all my window object methods with window dot also or without also means BOM’s that is browser object model’s very first object or we can say parent object is window object.

(03:58)

Now if I have to try this then we can do in this way (pause 9 sec, typing) we will write BOM, what did we see, window object, in next few segments we are going to see window object only but here we have to check that we can use its methods with window object and without window object also.(pause 10 sec typing) it means.. window dot alert (pause 4 sec) we will save this program… and here we will reload our program but nothing is appearing here because we have not called this, we have only loaded a script, nothing else. Here you can see what is written? Window dot alert is not a function, here we will write a small W so reload and as you reload, you can see “this is LearnVern” is shown in the alert box. Now I will write this same function without window object (typing 9 seconds gap) reload. This is the first pop up with window dot alert and this second one is without window dot alert “this is learnvern” again.

As it is written in a slide, we can use window object methods with window object also and without window object also. So this was our alert. There are many objects available in the window object model, but the browser object model’s parent object is the window object. Now this window has many other objects also like document object, history object, location object, navigator object and screen object. We are going to learn about all these objects one by one in all segments.

(06:25)

Document object is vast compared to others, in which we have methods available related to forms, images and links. In our current introductory segment we have to remember that in BOM i.e. browser object model window object is parent object & in it, we have many sub objects available like document, history, location, navigator and screen. Each one has its own method, each one has its own constructors available, not necessary every object will have all these methods but mostly many of them have.

Every object has some methods through which we can perform some tasks. Like with the help of Document, if we have created a form or whatever our document is in that. Whatever elements are kept of HTML we can access that or modify that. We can go from one url to another url, if we open different websites then its history is also saved we can access it through history.

If we want any data from our current browser, we can do that through our Navigator. We can access our current location where we are sitting or where our system is situated through location. If we have hosted this website on any server then we can get its location related data through location, if we have to perform any screen related operations then we can perform that through screen.

Means all mentioned objects have their own methods and through those methods we can perform our browser related tasks.

If you have any queries or comments, click the discussion button below the video and post there. This way, you will be able to connect to fellow learners and discuss the course. Also, Our Team will try to solve your query.

So in our next segment, we will start with our very first parent object, that is the window object. First we will learn window objects and then we will see other objects like from document to screen we will see that from next segment onwards.

Thank you.

(video duration- 8 minutes 28 seconds)