07-JavaScript 2.pdf - Review of Chapter 8 JavaScript 2 Using JavaScript Chapter 9 Chapter 8 reviewed basic JavaScript syntax Nothing overly surprising

07-JavaScript 2.pdf - Review of Chapter 8 JavaScript 2...

This preview shows page 1 - 4 out of 19 pages.

1 JavaScript 2: Using JavaScript Chapter 9 Review of Chapter 8 , Chapter 8 reviewed basic JavaScript syntax , Nothing overly surprising here, but some ‘tweaks’ to other programming languages Function expressions: assign a whole function declaration to a variable, use () notation on variable to invoke function // defines a function using an anonymous function expression var calculateSubtotal = function (price, quantity) { return price * quantity; }; // invokes the function var result = calculateSubtotal(10, 2); Together with anonymous functions (as in example above) reduces names in global scope , Relevant why? No classes, but objects and prototypes Objects do provide same capabilities as Associative Arrays/Dictionaries , FacultyRank[‘Thomas’] = “Professor” The Document Object Model (DOM) The Document Object Model (DOM): Nodes and NodeLists NodeList: List of Nodes, somewhat similar to Array
Image of page 1
2 DOM Nodes: Common Node Object Properties Property Description attributes Collection of node attributes childNodes A NodeList of child nodes for this node firstChild First child node of this node. lastChild Last child of this node. nextSibling Next sibling node for this node. nodeName Name of the node nodeType Type of the node nodeValue Value of the node parentNode Parent node for this node. previousSibling Previous sibling node for this node. The Document Object Model (DOM) , The DOM document object is the root JavaScript object representing the entire HTML document // retrieve the URL of the current page var a = document. URL; // retrieve the page encoding, for example ISO-8859-1 var b = document . inputEncoding; The Document Object Model (DOM): Selection Methods Classic getElementById() getElementsByTagName() getElementsByClassName() Newer (more general/powerful) querySelector() and querySelectorAll() Difference? DOM Selection Methods
Image of page 2
3 DOM Query Selector Element Node Object , The type of object returned by the method document.getElementById() described before is an element node object. , This represents an HTML element in the hierarchy, contained between the opening <> and closing </> tags for this element. can itself contain more elements Element Node Object Common Properties Property Description className The current value for the class attribute of this HTML element. id The current value for the id of this element. innerHTML Represents all the things inside of the tags. This can be read or written to and is the primary way which we update particular div's using JS. style The style attribute of an element. We can read and modify this property. tagName The tag name for the element. More Properties (for Specific Elements) Property Description Tags href The href attribute used in a tags to specify a URL to link to. a name The name property is a bookmark to identify this tag.
Image of page 3
Image of page 4

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture