Scribd Logo
Upload

Welcome to Scribd!

  • Java Script Class 04 316188

    Uploaded by

    Edagotti Jyothi
    12K views6 pages
    Javascript objects store information as key-value pairs. Objects can contain primitive values as well as functions. The document object model (DOM) represents an HTML document and allows JavaScript to access and modify the content, structure, and style of a document. The DOM represents the document as nodes and objects that can be manipulated. Common DOM methods include getElementById, getElementsByTagName, querySelector, and querySelectorAll which return element nodes that can then be accessed and modified.

    Original Description:

    Original Title

    JAVA_SCRIPT_CLASS_04_316188 (1)

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Javascript objects store information as key-value pairs. Objects can contain primitive values as well as functions. The document object model (DOM) represents an HTML document and allows JavaScript to access and modify the content, structure, and style of a document. The DOM represents the document as nodes and objects that can be manipulated. Common DOM methods include getElementById, getElementsByTagName, querySelector, and querySelectorAll which return element nodes that can then be accessed and modified.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    12K views6 pages

    Java Script Class 04 316188

    Uploaded by

    Edagotti Jyothi
    Javascript objects store information as key-value pairs. Objects can contain primitive values as well as functions. The document object model (DOM) represents an HTML document and allows JavaScript to access and modify the content, structure, and style of a document. The DOM represents the document as nodes and objects that can be manipulated. Common DOM methods include getElementById, getElementsByTagName, querySelector, and querySelectorAll which return element nodes that can then be accessed and modified.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 6

    Javascript Objects

    Javascript objects store information in the form of key-value pairs.


    var var_name={key1:value1,key2:value2…..}
    var emp={
    name:”Mahendr”,
    eid:100,
    place:”Blore”
    }
    To access the values:emp[“name”] or emp.name
    var emp={} or var emp=new Object()
    emp[“name”]=”Einstein”
    <script>
    var emp={}
    emp["name"]="Einstein"
    emp["id"]=100
    emp["place"]="Blore"
    //alert(emp[name])//undefined
    alert(emp["name"])//Einstein
    </script>

    <script>
    var emp=new Object()
    emp["name"]="Einstein"
    emp["id"]=100
    emp["place"]="Blore"
    //alert(emp[name])//undefined
    alert(emp["name"])
    alert(emp["id"])
    </script>
    Updating the values
    <script>
    var emp=new Object()
    emp["name"]="Einstein"
    emp["id"]=100
    emp["place"]="Blore"
    //alert(emp[name])//undefined
    alert(emp["name"])
    alert(emp["id"])
    emp["id"]=999
    alert(emp["id"])
    </script>
    For loop to display key-value pairs
    <script>
    var emp={"name":"shreenath","eid":100,"place":"Blore"}
    //alert(emp[name])//undefined
    for(key in emp)
    {
    alert(key+":"+emp[key]) //key elements
    }
    </script>
    Objects inside an array
    <script>
    var emp=[
    {"name":"shreenath","eid":100,"place":"Blore"},
    {"name":"shreenidhi","eid":102,"place":"Mysore"}
    ]
    alert(emp[0]["name"])//shreenath
    alert(emp[1]["place"])//Mysore
    </script>
    Object method
    <script>
    var emp={"A":"Apple",
    "B":"Ball",
    m:function(){alert("object method")}
    }
    emp.m()
    </script>

    this keyword:Inside the object method if we want to access object properties


    then we should use this keyword.
    <script>
    var stud={
    "id":100,
    "name":"anu",
    "marks":92,
    fun:function()//obejct method
    {
    alert("Student id="+this.id)
    alert("Student name="+this.name)
    alert("Student marks="+this.marks)
    }
    }
    stud.fun()
    </script>
    DOCUMENT OBJECT MODEL
    Dom is an interface b/w javascript html and css.
    We can access HTML elements through DOM
    1.document.URLThis is original URL of the website
    2.document.bodyThis returns everything inside body
    3.document.headThis returns head of the page
    4.documet.linksThis returns list of all links of the page
    5.document.getElementById()Returns element with specified id
    6.document.getElementByClassName()Returns list of elements of specific clas
    7.document.getElementByTagName()Returns list of elements of specific tag
    8.document.querySelector()Returns the first object matching css style
    selector
    9.document.querySelctorAll()Returns all objects matches css selector
    <html>
    <head>
    <title>Example1</title>
    </head>
    <body>
    <h1>DOM Example</h1>
    <p>
    Pentagon Space would be the focal point for the people who want to
    master the future with niche technologies and the clients who are in search of
    resources can be deployed from the first day of work.
    </p>
    <h2>Favourite subjects</h2>
    <ul>
    <li>Java</li>
    <li>Python</li>
    <li>C#</li>
    <li id="id-one">Javascript</li>
    </ul>
    <h2>Favorite games</h2>
    <ul>
    <li class="class-one">Cricket</li>
    <li>Football</li>
    <li>Tennis</li>
    </ul>
    <a href="https://pentagonspace.in/about-us">Pentagon space</a>
    </body>
    <script>
    </script>
    </html>
    querySelector() querySelectorAll()
    If the specific CSS maps with only one html element then we should use
    querySelector().If multiple html elements match,then querySelector() returns
    only first matched element.
    We use querySelectorAll() to access all matched html elements.If multiple html
    elements are there, then we use this method
    Dom based javascript to change color of h1 tag
    var myh1=document.querySelector(‘h1’)
    myh1.style.color=”red”

    You might also like