Window Object - Javascript

Window

• Theory
  • Global object in client-side JS
  • Represents browser window
  • window
  • Types
    • Document Object Model (DOM)
      • Represents the page content as HTML in a tree like structure
    • Browser Object Model (BOM)
      • Represents additional object provided by the host environment for working with everything except the document
    • Javascript Core
• speechSynthesisUtterance

      const var = new speechSynthesisUtterance(var1)
      // Speed of Speech
      var.rate = 1
      // This event runs when Speech ends
      var.addEventListener("end", () => {})
      // This event runs every time we reach a new word that we want to speak
      var.addEventListener("boundary", (e) => {
          // Returns index of the first letter of the word that we are currently speaking
          e.charIndex
      })
      // Start Speech
      speechSynthesis.speak(var)
      // Resume Speech
      speechSynthesis.resume()
      // Returns true if Speaking
      speechSynthesis.speaking
      // Returns true if not Speaking
      speechSynthesis.paused
      // Pause Speech
      speechSynthesis.pause()
      // Cancel Speech
      speechSynthesis.cancel()
  

• Navigator
  • Get video from Webcam

        navigator.getUserMedia(
            { video: {} },
            stream => video.srcObject = stream,
            err => console.error(err)
        )
    

  • An await function that returns the src of the video stream

        navigator.mediaDevices.getUserMedia({ video: true })
    

BOM

• window.onload = function() {} => Event executes when page is loaded
• Interaction
  • alert("value") => Shows alert
  • prompt("value") => Shows alert message and takes input
    • prompt("value1", "value2") => 2nd argument is default value
  • confirm("value") => Returns value ok or cancel
• Storage
  • localStorage => Stores data in local storage, Can not store array
  • localStorage.setItem('key', 'value') => Adds data in local storage as an object with key & value pair
  • localStorage.getItem('key') => Returns the value of key
  • localStorage.clear() => Clears entire Local storage
  • localStorage.removeItem('key') => Remove only this key value pair
  • JSON.stringify(varO/varA) => Converts valid JSON object/array into string
  • JSON.parse(varS) => Converts valid JSON string into object
  • sessionStorage => Same as local storage but clears all data when browser is closed