• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content







Total Views
Views on SlideShare
Embed Views



5 Embeds 1,376 1202 112 59
http://localhost 2
http://webcache.googleusercontent.com 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Week32 Week32 Presentation Transcript

    • JavaScript Object Model
    • Biggest Advantage of JavaScript I can access values of HTML elements using JavaScript I can modify values of HTML elements using JavaScript
    • Disadvantage of JavaScript Each browser has its own document object Model
    • Initial JavaScript Object Model
    • New JavaScript Object Model
    • New Properties added in LatestJavaScript Model all[] Children[] className innerHTML innterText outerHTML outerText
    • New Properties added in LatestJavaScript Model parentElement style tagName
    • New methods added in LatestJavaScript Model Click() getAttribute() insertAdjacentHTML() insertAdjacentText() setAttribute() removeAttribute()
    • Difference between Initial Model andNew model Slide No. 7 and 9 shows the new methods and new properties Slide no.5 blue circles shows the new objects added in Latest JavaScript Model
    • How to use these Object Model We have been doing this in our previous lecture, but I will take few more examples now.
    •  Sample Code <body bgcolor="white" text="green" link="red" alink="#ffff00"> <h1 align="center">Test Document</h1> <hr /> <a href="http://www.pint.com/">Sample link</a> <a name="anchor1"></a> <a name="anchor2" href="http://www.javascriptref.com">Sample link 2</a> <form name="form1" action="#" method="get"></form> <form name="form2" action="#" method="get"></form> <hr /> <br /><br />
    • How many Forms are there? Use object forms[] document.forms[] is an array document.forms.length returns the number of forms in the web page document.forms[0] is the first form, OR document.form1 is the first form document.forms[0].name returns the name of first form i.e. form1
    • Code to Access All Forms if (document.forms.length > 0) { document.write("<h2>Forms</h2>"); document.write("# Forms = " + document.forms.length + "<br />"); for (i=0; i < document.forms.length; i++) document.write("Forms["+i+"]=" + document.forms[i].name + "<br />"); }
    • How many anchors are there? Use object anchors[] document.anchors[] is an array document.anchors.length returns the number of anchors in the web page document.anchors[0] is the first anchor, OR document.anchor1 is the first anchor
    • Code to Access all anchors if (document.anchors.length > 0) { document.write("<h2>Anchors</h2>"); document.write("# Anchors = " + document.anchors.length + "<br />"); for (i=0; i < document.anchors.length; i++) document.write("Anchors["+i+"]=" + document.anchors[i] + "<br />"); }
    • How many links are there? Use object links[] document.links[] is an array document.links.length returns the number of links in the web page document.links[0] is the first link, OR document. name of link is the first link(In our example, we didn’t use any any name for link)
    • Other Properties document.bgColor - returns the background color of web page document.fgColor – returns the foreground color of web page. document.location – returns the location of web page i.e URL document.URL – returns the URL of web page document.title – returns the title of web page.
    • More properties document.alinkColor – returns the active link color document.vlinkColor – returns the visited link color. document.linkColor – returns the link color. Slide 12-18 were based on oldest JavaScript Model.
    • Sample Code <body> <form action="#" method="get"> <input type="text" /> </form> <br /><br /> <form action="#" method="get"> <input type="text" /> <br /> <input type="text" /> </form> </body>
    • Using elements[] To access 1st form, I can write  document.forms[0] To access 2nd form, I can write  document.forms[1] To access 1st text box inside 2nd form  document.forms[1].elements[0] To access 2nd text box inside 1st form  document.forms[1].elements[1]
    • Using elements[] elements can be radio button, text box, check box etc. Also called as form elements. elements[] is defined inside forms[] , (Refer slide 4 and 5). elements.length return the number of elements inside a particular form. elements[0] refer to 1st element, elements[1] refer to 2nd element and so on.
    • 2nd Method of accessing elements By using name attribute of elements.(We discussed this with forms and anchors and links)
    • 2nd method of accessing elements <form name="myForm" id="myForm" method="get" action="#"> <input type="text" name="userName" id="userName" /> </form> document.myForm.userName refer to the text box inside form.
    • 3rd method of accessing elements Using getElementById() Element that we want to access must have its id attribute defined
    • Example of getElementById <body> <p id="p1"> this is a paragraph </p> <input type="button" value="Click" onClick="butClick()"> </body> pid = document.getElementById(“p1”); p1.align = “right”;
    • document.getElementById pid =getElementById(“p1”)  Returns the reference of object <p1>and store it in pid. pid.align = “right”  This will align the paragraph with id=p1 to the right  By Id we can get access to any element in the web page.
    • document.all[] document.all[] – return array of all html tags in the web page.  i.e. document.all.length is the count of number of tags in web page.  document.all[0] returns the reference of 1st tag.  document.all[1] retuns the reference of 2nd tag.  Introduced by Internet Explorer
    •  Example <body> <h1>Example Heading</h1> <hr /> <p>This is a <em>paragraph</em>. It is only a <em>paragraph.</em></p> <p>Yet another <em>paragraph.</em></p> <p>This final <em>paragraph</em> has <em id="special">special emphasis.</em></p> <hr /> </body>
    • How many tags are there document.all.length, returns the number of tag in the web page.
    • What are the name of tags <script language="JavaScript"> var no = document.all.length; alert(no); for(i=0;i<no;i++) document.write("<br>“ + document.all[i].tagName); </script>
    • Output Total number of tags: 16 HTML HEAD TITLE BODY H1 HR P EM EM P EM P EM EM HR SCRIPT
    • Final Note We will learn about more JavaScript Object introduced by new browsers in next chapter.