CS 328 - Week 12 Labs - 3:00 lab - 2016-04-15
* CORRECTION -
course text, p. 288:
"Most DOM object [data field] names are identical
to names of the corresponding attributes in the
HTML,
with a few notable exceptions
such as the class HTML attribute that maps to
the className DOM [data field]."
----------
* quick note about the Array type? object?
* why mention? because a number of DOM methods
(such as document's method getElementsByTagName)
return an Array
(even if they only return 1 thing)
* creating a new Array is easy:
var myArray = [];
* how about one with initial values?
var myStuff = ["laptop", "clicker", "chocolate", 5];
* indices are 0-based
* you grab an individual element like you
expect:
myStuff[0] === "laptop"
* has a length data field to get the number of
elements in the array
* has MANY built-in methods --
Table 8.20, p. 316, for a taste!
including: indexOf, reverse, sort, slice
----------
* more on the DOM tree
* in very tree-like fashion, the objects in
the DOM tree are often called nodes;
* reminder: the DOM tree DOES have objects/nodes
for MORE than just the elements in the page;
(there can be text objects/nodes, and at
least one other kind of object/node as well...)
* Let's say you have an element object.
* want its parent? you can access its
parentNode data field
* an ARRAY of this element object's children?
you want the childNodes data field
* immediate siblings? previousSibling and
nextSibling data fields
* start/end of an element object's list of children?
firstChild, lastChild data fields
* and, as noted before,
the document object has methods for grabbing
elements as well:
getElementById
getElementsByTagName - returns an ARRAY of DOM elements
with the given tag
getElementsByName - returns an ARRAY of DOM elements
whose name attribute value is that given
and more...
* remember: it is considered BAD STYLE to add ELEMENTS
by adding tag text to innerHTML
* BUT document has a method createElement
that creates and returns a new empty
DOM object/node representing an element
of the given type
var newHeading = document.createElement("h2");
* it IS empty -- but we know how to add
attributes, etc. to a DOM object
newHeading.innerHTML = "I am a NEW h2 heading!";
* it is NOT added to the page yet!
you must EXPLICITLY add it to the
child list of some existing element
in the page
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
* DEMO'd some of the above in refactored-and-added-to
allFilled2.js, three-value-form2.php
----------
* the Module pattern
* seeking to avoid problems when your code is
being used with multiple other script files,
trying to avoid global variable/functions-with-the
same-name conflicts;
* course text, p. 344-345 - it makes sense, but it IS a bit odd;
* involves wrapping ALL of your JavaScript code
in a function, and then calling that
function -- so you add NO global functions;
BUT to avoid THAT function being global, you
make it anonymous;
BUT how do you then call an anonymous function?
you can create AND call an anonymous function
(remember, it doesn't have a name) with this
syntax:
(function()
{
statement;
...
statement;
})();
* NO global symbols end up being declared
* you don't have to use this in CS 328 --
we aren't using a lot of other scripts --
BUT it is considered good practice if your
code is likely to be combined
with other scripts now or in the future
----------
* keyword this
* another unobtrusive-JavaScript benefit:
* when they are attached, event handlers are
BOUND to the element objects
* the handler function's code "knows" what element
it is listening to, and can REFER to that
object in code;
how? by using the keyword
this
...which in this context means "the object
I am bound to"
* say myHandler is attached as the event handler
to some element, and that element has a value
attribute;
WITHIN that handler, you can refer to:
this.value
...and it will be the value of the value
attribute of the element this is bound to;
this.innerHTML could be the contents of
the element this is bound to, etc;
* can be convenient - may make a handler
easier to use for multiple elements;
text pp. 345-349 have a nice example of
this - a tip handler example
* BUT: why did I say this is nice for
UNOBTRUSIVE-style JavaScript?
...because, in GLOBAL code or REGULAR functions
(ones NOT bound to any object or DOM element),
this
...refers to the overall browser window, the
window
...global object.
this.innerHTML would be VERY different
in this case!
* (IN GENERAL, assigning data fields to
the global window object is considered
POOR STYLE (and maybe worse...))
----------
* also: it is considered NOT-the-best-style
to use JavaScript to directly modify an
element's style;
better style:
* to define desired classes and ids IN your
external CSS,
and use JavaScript to change the class or
id attributes (remember you use className
within the DOM for HTML attribute class),
and then the external CSS will control the
style for the element with that newly-added
class or id...