Javascript BOM - Screen Object

BROWSER OBJECT MODEL

Javascript Dom- Screen Object

(00:00)

Hello guys welcome to our series Javascript. In our last segment we saw about Java script’s BOM, that is the Browser object model’s navigator object, comparatively navigator object is quite easy compared to other objects. I hope your concepts are clear regarding the last segment and all the properties and one method which, we saw in the last segment are clear to you.

Moving further in our today’s segment. Our today’s segment is regarding the screen object. It is an object of the browser object model. This screen object is easy to understand like the navigator object, it also has very few properties, and in this object also we will directly use property values, and we don’t have any method in this also.

So basically, the name itself tells us that screen object is used when we need any details or description of the screen in the browser, like here we can see that “the Javascript screen object holds information of browser screen.” Let’s say I have opened a browser screen, that screen will have some height, some width so all that data, like height and width, and if we have used any color then that color have depth, pixel depth is another factor, we can get all those data with screen object.

(01/42)

Navigator object gives us data related to the browser, but if we want any output related to the browser's current screen, then we can get through the screen object. We have two things in screen object, first is window dot screen, and we can use this same thing without window also. We use window with everything like, window dot navigator, window dot object, etc. We used to simply use window also. And the methods that the window itself has like, alert, prompt and much more. In that also we do not need to write. We can generate the output by simply writing ‘alert’. So, you can use ‘window dot screen’ or you can use the screen object without ‘window’.

 Now, the screen object has some properties like width, height, availwidth, availheight, colorDepth, and pixelDepth.

All these properties are easy to understand. We can get the width of the screen with help of width, and we can get the height of the screen with the help of height. If any color is used then depth of color, and of course we have pixels on our screen then depth of pixel, and available width and height, we can check through so and so properties.

We will check all these properties by creating a program in sublime text. So let’s say… html… example… screen object… (pause 5 sec, typing) save… (pause 3 sec, typing) in screen object, as we always do, document dot write L N, and in h3 tag we will add heading (pause 10 sec, typing) and in this also, document dot write L N, and in this we will add our properties one by one, let’s say we take screen… width… (pause 4 sec, typing), this is our screen object… dot… width… (pause 6 sec, typing) save… Okay so you can see here screen width is 1366, that means the width of screen horizontally, from left to right, is 1366, I will check this by resizing this, means it is my screen width, means my complete desktop’s width is given here, next… I will print its height (pause 10 sec, typing) so screen height I am getting 768, so height and weight of my screen of current monitor is 1366 * 768, means the resolution is 1366 *768.

(04:50)

If I check available height here, screen… available width… for that… screen dot avail and width in capital… Okay, so here my available width of desktop, I am getting as it is, so definitely available height will also be same as height (pause 13 sec, typing) 768 that’s it, so next is our color depth… so let’s say here we will check screen… (pause 5 sec, typing) color depth…(pause 7 sec, typing). So here you can my screen’s color depth, that is 24… here the given color depth is not related to color, color depth is basically same for every computer and phone, in current scenario color depth means, how many color bits our pixel contains, my pixel contains currently 24 bit color, so whenever I will check color depth, I will get answer as 24, if run this same code, in any browser or any mobile phone then also, I will get 24 as my answer, because all the mobile phones desktop are using same color depth i.e. 24 bit, which indicates that in one pixel 24 bit colors are used.

(06/46)

Next is pixel depth… (pause 9 sec, typing) okay, so here pixel depth is also 24… Here pixel depth is related to computer graphics, which means how many bits are included in our raster file. So in a pixel, 24 bits are included, that’s why my answer is 24 and accordingly a pixel depth contains 24 color bits so the answer for my color depth is also 24. If you know about computer graphics then you will know the last two properties are related to the raster file in that color depth and pixel depth are given and so our answer is based on that.

So these were our screen properties, we can use these 6 properties through Java script’s screen object, the first two property width and height are very useful, because if we are working with any web application, and if you have to get the width of current application, and based on that if you have to perform any calculation, like if you have to render you dome, so for that you can use screen object property. If you have to show your output based on the current screen, then in that case our screen object property proves very useful. 

Screen object is very easy as it has only 6 properties, so utilizing it is also very easy and we can memorize it very easily. When we develop a large web application then at that time screen object is not used much, but yes it does return us screen property color and pixel depth, so if in our application you have to work on colors or your work is graphics related, then these properties of screen object will prove useful to you.

So guys, 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 queries.

In our next segment we will see Java script’s browser object model’s part i.e. document object model, the major objects related to our browser like navigator object, screen object, history and window object. We have seen all those, and now we will see the document, DOM document object model.

In javascript document object model is a very important topic, as in interview also many questions are asked based on this, and all the html files which we render, are rendered according to our document object model only so understanding this is very important.

(video duration- 9 minutes 48 seconds)