Lecture 15 - JavaScript and the DOM - annotated

Lecture 15 - JavaScript and the DOM - annotated - Midterm...

Info icon This preview shows pages 1–3. Sign up to view the full content.

1 JavaScript and the Document Object Model INFO/COM S 230: Intermediate Web Design and Programming Midterm info Time: 7:30-9PM, Tuesday 3/11 Place: Olin 155 Format: On paper Closed book, closed notes However, you can bring a 4”x6” index card of notes you made yourself (front and back). Coverage: Up to (and including) last Monday’s lecture on logins HTML is a tree One (useful) way of thinking about an HTML document is as a “tree” of “nodes”. <html> <head> <title> David P. Williamson </title> </head> <body> <div id="content"> <div id=“myimg"> <img src="williamson.gif" width="150" height="217" alt="David Williamson" /> </div> <p> I am a professor with a joint appointment in the <a href=" ">School of Operations Research and Industrial Engineering</a> and the <a href=" ">Faculty of Computing and Information Science</a>. </p> </div> </body> </html> The DOM Easy PDF Creator is professional software to create PDF. If you wish to remove this line, buy it now.
Image of page 1

Info icon This preview has intentionally blurred sections. Sign up to view the full version.

2 But what’s an “object”? A way of putting together data along with functions that operate on that data. Objects have “fields”/“properties” (the data) and “methods” (functions working on that data). PHP has objects (will discuss later in the course). JavaScript has objects: myobject.mydata; myobject.myfunction(); Your browser represents every node in the tree as an object. The attributes of each tag are properties of the object; the objects have methods that allow easy manipulation. The top-level object is “document”. How do I access the node I want? The document object has methods “getElementByID” and “getElementsByTagName”. E.g. var node = document.getElementByID(“photoid”); var nodearray = document.getElementsByTagname(“img”); What can I do with a node when I have it?
Image of page 2
Image of page 3
This is the end of the preview. Sign up to access the rest of the document.
  • Spring '08
  • Object-Oriented Programming, Document Object Model, Easy PDF Creator, David P. Williamson, trarray, mynode mynode.childNodes

{[ snackBarMessage ]}

What students are saying

  • Left Quote Icon

    As a current student on this bumpy collegiate pathway, I stumbled upon Course Hero, where I can find study resources for nearly all my courses, get online help from tutors 24/7, and even share my old projects, papers, and lecture notes with other students.

    Student Picture

    Kiran Temple University Fox School of Business ‘17, Course Hero Intern

  • Left Quote Icon

    I cannot even describe how much Course Hero helped me this summer. It’s truly become something I can always rely on and help me. In the end, I was not only able to survive summer classes, but I was able to thrive thanks to Course Hero.

    Student Picture

    Dana University of Pennsylvania ‘17, Course Hero Intern

  • Left Quote Icon

    The ability to access any university’s resources through Course Hero proved invaluable in my case. I was behind on Tulane coursework and actually used UCLA’s materials to help me move forward and get everything together on time.

    Student Picture

    Jill Tulane University ‘16, Course Hero Intern