CS 328 - Week 12 Labs - 1:00 lab - 2016-04-15
* CORRECTION:
(p. 288 of course text)
"Most DOM object [data fields] names are identical
to names of the corresponding attributes in HTML,
with a few NOTABLE EXCEPTIONS
such as the class HTML attribute maps to the className
DOM property."
----------
* a FEW words about Array type? object?
* this is what you get back (often) when a
method MIGHT return multiple things --
like document method getElementsByTagName
* you can create a new Array very simply:
var myArray = [];
want to create an array with initial values?
var myStuff = ["laptop", 'clicker', 13];
* indices ARE 0-based
* can access a particular element like you are
used to
myStuff[0] === "laptop"
* DOES have a length data field giving the
number of elements in the array
* MANY built-in methods - see Table 8.20, p. 316,
for a taste of these!
(indexOf, reverse, sort, slice, etc.!)
----------
* more on the DOM...
* 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...)
* want an element object's parent?
data field parentNode
* an array of an element object's children?
data field childNodes
* immediate siblings: previousSibling, nextSibling
* start/end of an element object's list of children?
firstChild, lastChild
* and we do have document methods such as:
getElementById("desired_id_attribute_val")
getElementsByTagName("tag") -> returns
an ARRAY of DOM elements with that tag
getElementsByName("name_attrib_val") ->
returns an ARRAY of DOM elements with
that value for their name attribute
* remember: we SHOULDN'T add elements by sticking tag-text
within an innerHTML data field! <-- considered BAD!!
...you CAN call document method createElement("tag")
to create a new element of given tag
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, however!!
* you must EXPLICITLY add it to the
child list of some existing element
in the page
* here are some methods:
DOM element objects HAVE these methods for
MUCKING with ther children lists:
* 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
* this pattern is concerned with problems you run into
when you start using many script files
* trying to avoid global variables...
and avoid functions-with-the-same-name conflicts;
* pp. 344-345, course text;
* 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 to both create AND call an anonymous function
(because it doesn't have a name),
you have to use this syntax:
(function()
{
statement;
statement;
...
})();
* ya, NO global symbols end up being declared
* it is good practice to use the Module pattern if
you are writing code likely to be combined
with OTHER scripts (now or in the future)
...you don't have to do this for CS 328 code,
BUT keep it in mind;
----------
* keyword this
* another unobtrusive-style-JavaScript benefit:
when they are attached, the event handlers
are BOUND to the element object;
* the handler's code can "know" what element it
is listening to, and can refer to that
object in its code;
how? by using the keyword
this
...which means "the object I am bound to",
in this case;
* say myHandler is a function attached to an
element's on-attribute;
say that element has a value attribute;
within myHandler, I can refer to:
this.value
... and it will be the value attribute
of that element it is bound to;
this.innerHTML
will be its innerHTML data field
...etc.
* can be convenient -- CAN help make a handler
function usable for multiple elements;
(see pp. 345-349 for a nice example of this,
the tip handler example)
* BUT BEWARE:
why nice for "unobtrusive" style?
* in GLOBAL code or REGULAR functions
(not bound to an object or DOM element),
this
...refers to the overall browser window,
that top-level
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...))
(which is considered to be poor style...)
----------
* also: it is considered better style
to use JavaScript to add class or id attributes
that happen to change an element's [CSS] style
than it is to use JavaScript to change the
style attributes directly...
* e.g., add a class attribute to an element
for which there is a CSS rule
.myClass
{
...
}
(remembering 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...