DeepDive to Browser object Model

-
Location object:

  • The Location interface represents the location (URL) of the object it is linked to. Changes done on it are reflected on the object it relates to. Both the Document and Window interface have such a linked Location, accessible via Document.location and Window.location respectively.     

  • is used to access current location of the window.
  • can be both read and replaced.
  • So,it is possible to update location through scripting.

      "location is property of window object"

syntax:

window.location.property
window.location.method


  • the below shows how we can acess property of location object at once .
>>> console.dir(location)
VM140:1


Location
ancestorOrigins: DOMStringList {length: 0}
assign: ƒ assign()
hash: ""
host: "coderdnes.github.io"
hostname: "coderdnes.github.io"
href: "https://coderdnes.github.io/StoreAppLocator/"
origin: "https://coderdnes.github.io"
pathname: "/StoreAppLocator/"
port: ""
protocol: "https:"
reload: ƒ reload()
replace: ƒ replace()
search: ""
toString: ƒ toString()
valueOf: ƒ valueOf()
Symbol(Symbol.toPrimitive): undefined
__proto__: Location

  • Accessing property one at a time 
   
window.location.hash
""
window.location.hash = 'Map'
"Map"

window.location.host
"coderdnes.github.io"

window.location.hostname
"coderdnes.github.io"

console.log(window.location.href)
VM933:1 https://coderdnes.github.io/StoreAppLocator/#Map

console.log(window.location.host)
VM1055:1 coderdnes.github.io

console.log(window.location.hostname)
VM1080:1 coderdnes.github.io

console.log(window.location.path)
VM1192:1

console.log(window.location.pathname)
VM1219:1 /StoreAppLocator/

console.log(window.location.protocol)
VM1271:1 https:


Methods:

assign():  changes location of current page with passed in Url
reload() :  reload the current page
replace():  replaces the current page with given Url in the history. As it us replaced it wont be able to access with back and forth


History Object:
  • is read-only array of url-string that show where the user has been recently visted.
 
Syntax:

window.history.property
window.history.method       


console.dir(history)
VM172:1
  1. History
    1. length: 2
    2. scrollRestoration: "auto"
    3. state: null
    4. __proto__: History
      1. length: (...)
      2. pushState: ƒ pushState()
        1. arguments: (...)
        2. caller: (...)
        3. length: 2
        4.  :name: "pushState"
      3. scrollRestoration: (...)
      4. state: (...)
      5. Symbol(Symbol.toStringTag): "History"

     methods:
       
    back() : it loads the previous url in history list

    forward() : it loads the next url in history list

    go(): it access the particular item in the history list relative to its current position.


















































































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