CS 328 - Week 12 Lecture 2 - 2016-04-13

*   several JavaScript asides:
    *   JavaScript IS case-sensitive!
        *  note, then, that the HTML on-attributes
	   (on which the corresponding DOM data fiels
	   are based)

	   are ALL lowercase:

	   onload, onsubmit, onclick, etc.

    *   NEED to use else if (in that kind of situation)
        (NOT elseif!)
        
    *   NEED || for boolean or
        (NOT or)    

    *   it is considered BAD UGLY STYLE to insert ELEMENTS
        using innerHTML!
        *   instead, use document.createElement
	    (see course text, Chapter 9, pp. 367-368)

*   debugging! a few more notes:
    *   Chapter 8, pp. 290-294, example using Firefox's
        Firebug plug-in

    *   JSLint (mentioned last time) - you can paste JavaScript
        into it, perhaps its error messages MIGHT be
	useful

    *   if your browser supports it, running your
        script in strict mode MIGHT give you useful
	messages as a result:

	place the following at the very TOP of
	your JavaScript file:

"use strict";   // typed EXACTLY AS SHOWN! quotes, semicolon!

    *   and for general playing with JavaScript, HTML,
        and CSS:
	JSFiddle

*   actually-an-HTML5-note:
    *   there's now also an element attribute (for
        appropriate form controls) named

	readonly="readonly"

        (I suspect this is an easier/more accessible
	way to indicate a read-only input element of
	type text than using onblur, onfocus with
	the help of JavaScript)

*   see p. 342 if you have concerns about
    how we are setting window.onload to an
    event handler to (possibly) muck with
    the DOM only AFTER the window is loaded...

*   A few words on JavaScript types...
    *   JavaScript does recognize (amongst others)
        the following types:

	Number
        *   no explicit distinction between
	    integer and floating point
            (BUT are some functions/kluges
	    for when YOU care)

        Boolean
        *   either true or false, BUT
	*   BUT! JavaScript is willing to
	    interpret just about any
	    value as being "truthy" or "falsey"

            These are considered "falsey":
	    p.309 Table 8.17
	    0  0.0  0.000
	    NaN	    
            "" ''  // the empty string
            null
            undefined

        String - its literals can be in single
	    or double quotes
            *   MANY useful String methods!
	        see Table 8.12, p. 299

        null - a special keyword denoting
	    a null value -- also a primitive value

            typed in exactly this case!!!
 
        undefined - a top-level property whose value
	    is undefined -- also a primitive value

            *   null and undefined are different

	        *   p. 303 - a variable that hasn't been
		    declared has a value undefined

		    BUT a declared variable might have value
		    null meaning a lack of value

                *   happily, both ARE falsey --

		    if (myVariable) 
                    {
                        // will NOT reach here if
			//   myVariable is undefined
			// nor will it reach here if
			/    myVariable is defined but null
                    }

        function <-- course text calls a type?!

        Array <-- course text calls a type?!

    *   not types, but also notable:
        NaN - the result of an arithmetic
	      operation that JavaScript cannot kluge

        isNaN - function that tests whether something is
	        NaN

		10 / "oops" == NaN   [I think/hope]

        Infinity - the result when you do something such
                as divide by 0

*   a bit more on the DOM
    *   the DOM of a page's elements is a tree
        *   

	<div ...>
	    <ul>
	       <li> ... </li>
	       <li> ... </li>
	       <li> ... </li>
	    </ul>
	</div>

        the object rep'ing the ul above
	will have a reference to the div's object
	as its parent,
	and to the 3 li elements' objects
	as its children

        *   the DOM tree has things -- let's call 'em
	    nodes -- for elements AND text AND
	    sometimes attributes;
	    be careful with traversal

        *   you CAN get a node's PARENT
	    with parentNode data field

            you can get its immediately previous
	    and following siblings with 
	    previousSibling and nextSibling data fields
	    
            start/end of a node's list of children
	    with firstChild and lastChild data fields

            an ARRAY of this node's children:
	    childNodes data field

        *   these methods can be helpful:
	    getElementById
	    getElementsByTagName - returns an ARRAY of
	        DOM elements with that tag
            getElementsByName - returns an ARRAY of
	        DOM elements with a name attribute
		of the given value (good for grabbing
		logically-grouped radio buttons)
	    ...

    *   the document object has a method createElement
        that creates and returns a new empty DOM object
	representing an element of the given type

	var newHeading = document.createElement("h2");

        *   but, it is empty -- how can I set attributes
	    for it? In the usual way!

	    newHeading.innerHTML = "I am a NEW h2 heading!";
            newHeading.id = "special_unique";

        *   this has NOT been added to the document!
	    YOU want to add it:

	    DOM element objects have the following
	    methods for changing their lists of
	    children:
	    appendChild(node) - places the given node
                at the end of the calling node's
       		child list

	    insertBefore(new, old) - places the given new node
	        in calling node's child list
                JUST before the given old node

	    removeChild(node) - removes the given node
	        from calling node's child list

	    replaceChild(new, old) - replaces the
	        given old child of the calling node
		with the given new node