Browser Object Model

-
      window object vs document object
  • window object's represents potentially the frame or browser window where document is displayed in.
  • As, long as browser window is open ,even if no document is not loaded in the window, the window object is defined in current modal in the memory.
  • All ,  global the javscript variables,functions, objects becomes automatically the part of window objects.

There seems to be a lot of misconceptions on the difference between the document and window objects for javascript.

    "WINDOW object and DOCUMENT object ARE NOT THE SAME!!!!!"

I have set out to clarify this for you in the most visual manor as possible.


  So, what is the difference between the document object and window object you        ask? Good question.


  • Well, the window is the first thing that gets loaded into the browser. This window object has the majority of the properties like length, innerWidth, innerHeight, name, if it has been closed, its parents, and more.

What about the document object then?

  • The document object is your html, images, or other document that will be loaded into the browser. The document actually gets loaded inside the window object and has properties available to it like title, URL, cookie, etc. What does this really mean? That means if you want to access a property for the window it is window.property, if it is document it is window.document.property which is also available in short as document.property.
                                 IMPLICATIONS???

  • That seems simple enough. But what happens once an IFRAME is introduced? 
  • An iframe actually is considered as a new window with its own document loaded into it. Here is where it may seem a little odd, but does make sense if you think about it. The original, parent window, is responsible for other windows to be loaded, not the document.

  • The property to access a frame is window.frames[], which is an array of all the frames. If you only have one iframe you access it by using window.frames[0]. Since the iframe is also a window object, accessing window properties of that frame is done by using window.frames[0].mywindowproperty


                          SCROLLBY  AND SCROLLTO  CONCEPT 

  • Scroll by scrolls the document in window by given amount
         syntax: window.scrollBy(x,y);

where x: how many pixels to scroll by , along x-axis(horizontal)
    Positive value -----right
    Negative value -----left
    
Three options to consider :

         behavour(smooth,instant , auto)
   
  • ScrollTo : directs from one point to another   
         syntax: window.scrollTo(x,y);


              "test with following example in your ide"


       <!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Sizes & Positions</title>
<!-- <link rel="stylesheet" href="assets/styles/sizes.css" /> -->
<script src="assets/scripts/size.js"></script>
</head>

<body>


<div>
<p>Lorem2000</p>
</div>
<button type="button" id="btn">Scroll Top</button>

<script>
const scrollDemo = document.getElementById("btn");
// scrollDemo.addEventListener('click', function scrolldemo() {
// window.scrollBy({
// top: -20,
// behavior: 'smooth'
// });
// })

scrollDemo.addEventListener('click',function scrolldemo() {
window.scrollTo({
top: -20,
behavior: 'smooth'
});
})
</script>
</body>

</html>

Comments

Post a Comment

Popular posts from this blog

JavaScript — Double Equals vs. Triple Equals - weird things on JavaScript

-
The Problem JavaScript has two  visually  similar, yet  very different , ways to test equality. You can test equality with  ==  or  === . Here are the differences: Triple Equals When using triple equals  ===  in JavaScript, we are testing for  strict  equality. This means both the  type  and the  value  we are comparing have to be the same. Lets look at a couple examples of strict equality. In this first example we’re comparing the  number  5 with the  number  5. As expected,  true  is returned. Both are  numbers , and both share the same  value  of 5. 5 === 5 // true With this in mind, we can look at two more examples that will return  true : 'hello world' === 'hello world' // true (Both Strings , equal values ) true === true // true (Both Booleans , equal values ) Awesome. Now lets take a look at some examples that will return  false : In this example we’ll comp...
Read more

06_Understanding Execution Context and Execution Stack in Javascript

-
Image
Let look inside js engine the things that execute our code and in the end ,it is all about our memory management and execution steps. For this we have two important concept: The heap memory is our long term memory , it is all about memory allocation , stores data in your system and manages access to it. " i mean browser does that , browser manages heap things, browser taps into our system memory and of course   OS , it allocates memory to the browser app. There the data gets stored which we work in our program and most importantly long term data. There is then Stack thing , is end important for execution of code. Stack is kind of short term memory means Stack control over which function is currently executing.                 "  Heap memory  is used by all the parts of the application whereas  stack memory  is used only by one thread of execution. Whenever an object is created, it's always stored  in...
Read more

Creating and inserting element- part-2

-
createElement() : creating a new array and appending to end of node  <! DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < meta http-equiv = "X-UA-Compatible" content = "ie=edge" > < title > Arrays & Iterables </ title > < script src = "app.js" defer></ script > </ head > < body > < ul > < li > Item 1 </ li > < li > Item 2 </ li > < li > Item 4 </ li > < li > Item 3 </ li > </ ul > < script > const list = document . querySelector ( 'ul' ) const newLi = document . createElement ( 'li' ) // it just create a <Li> element // but still not attache...
Read more