CS 328 - Week 11 Labs - 3:00 pm lab - 2016-04-08
* Some Good JavaScript references/resources
* The course textbook!
* Mozilla Development Network's JavaScript guide
developer.mozilla.org/en/JavaScript/Guide
* JSLint syntax checker
www.jslint.com
* Browsers often have JavaScript tools!
and 3rd party extensions, such as Firefox's Firebug
* textbook authors have a twitter feed
@webstepbystep
* ...they post links to interesting articles,
many related to JavaScript!
----------
* WHERE we will put client-side JavaScript?
* we'll put EXTERNAL JavaScript, able to then be used
in multiple pages, in a file on nrs-projects
whose suffix is .js
* WITHIN HTML5 pages,
we are going to try to be UNOBTRUSIVE with our
JavaScript and keep it as separate from the page
content as we can,
by trying to limit it to being within our
head element
(and keeping it OUT of the body element)
* also: we will NOT modify the document (will not
modify the Document Object Model, the DOM) until it
is completed loaded;
* when we want to use an external JavaScript
our CS 328 STYLE STANDARD element is:
<script src="file-or-url.js" type="text/javascript">
</script> <- for strict-style HTML5, YES, include
the end tag for this element!!
(yes, the content is empty for
a script element for an external
JavaScript)
* if we are inserting JavaScript in the head element,
you don't need the src attribute, and you WILL
have content!
<script type="text/javascript">
... beautiful JavaScript here ...
</script>
* we will be putting our script elements at the
end of the head element;
* HTML5 adds two attributes to the script element
that we'll use to try to keep this from being
a performance problem:
async (in strict-style HTML5, async="async")
defer (in strict-style HTML5, defer="defer")
* these tell the browser that the JavaScript
is NOT modifying the DOM while the page is
being loaded,
it is SAFE to continue parsing the HTML
while the scripts are being downloaded;
* async - means asynchronous, means safe to
download and execute this at the same time as parsing
and other script downloads
* defer - you need the scripts to be executed
in the order that their script elements
appear
* means: browser STILL keeps parsing the
HTML while downloading the scripts
UNLIKE async, only EXECUTE the scripts
after the entire document has been loaded
(but at least they are downloaded already,
and the HTML has been parsed...)
* my favorite-so-far discussion of where-to-put-JavaScript:
top answer at:
http://stackoverflow.com/questions/436411/where-is-the-best-place-to-put-script-tags-in-html-markup
* (have added a link to this along with today's in-lab
examples)
----------
* a FIRST (but not last) discussion of the
Document Object Model (DOM)
* Core JavaScript contains a core set of predefined
useful objects:
Array
Date
Math
String
...and many more!
* Client-side JavaScript adds the Document Object Model
(DOM), which allows JavaScript to respond to
user events, manipulate the current page, etc.
* The ECMAScript specification does not
include the Document Object Model (DOM)
which is standardized by the World Wide
Web Consortium (W3C)
The DOM defines the way in which HTML
document objects are exposed to your
script
...since we want to use client-side
JavaScript to affect our HTML documents,
we shall be VERY interested in the
DOM;
* course text, Chapter 8, Section 8.1.4, pp. 281-283:
* of course, an object has methods and data fields
* Each element on the page is represented in
JavaScript by an object
* this set of objects (representing the page)
is collectively referred to
as the Document Object Model, or DOM
* when you interact with the DOM objects,
you dynamically manipulate the elements
represented by those objects --
YOU can change the page currently being
displayed
* The DOM "acts as the glue between the web page
content and JavaScript"
JavaScript can muck with the document elements
in this way!
* each element's DOM object has a data field for
each of its attributes (if I understand correctly),
whose value is the value of that attribute;
* so, an img element has a src attribute?
its object has a src data field;
* there are also ADDITIONAL data fields for
the elements:
* innerHTML - added in HTML5, represents
the content between the start and end tags
of the element
* style - this data field's value is an
object! an object representing the
element's style attributes
* and more!
* Here are two global JavaScript object vital to all of this:
* window - the object representing the object window
* ALL the code and variables you write in your
client-side JavaScript become part of the
window object...!
* document - the object representing the current
web page
* (document is also a data field of the window object...)
(and more!)
* these objects have methods, also,
and note that the document object has a method
getElementById
expects the value of an id attribute,
and returns the object corresponding to
the document element with that value of
its id attribute
(returns null if there is no such element)
* event-driven programming
* execution is not starting at a main function --
it is driven by events and user interaction
* event: a user action, clicking a button,
moving a mouse, checking an checkbox, etc.
* we need code to respond to various events
* to respond to an event using JavaScript:
1. decide which element or control we want to
respond to
2. write a JavaScript function with the code to
be run when that event occurs
3. attach that function to the control's event
* HTML helps us here -- every HTML element has
special event attributes that represent
actions you can perform on it --
these attributes all start with on
onclick onkeydown onchange onsubmit ...and many more
* to listen for an event on an element,
you set a value for one of that element's
event attributes
...to what? say, to a JavaScript function to be
done when that event occurs to that element!
* BUT -- we said we weren't going to put JavaScript
in the body element! (unobstrusive JavaScript!)
true: so, we'll set these elements' on-attributes
in a JavaScript function in the element's head
(AFTER the document has been loaded!)
[ADDED AFTER LAB]
* JavaScript function syntax:
function desired_function_name(param_name, param_name, ... param_name)
{
action;
...
return ret_expr; /* optional */
}
* a first example: see please.js and js-play1.html
* a few more JavaScript tidbits:
* JavaScript is loosely typed, but you can "declare"
a variable by putting var followed by an
assignment statement setting an identifier
to a value ---
var val = 13; // you've now declared val
* FOR LOCAL VARIABLES, the PREFERRED (yes,
CS-328-required) STYLE is to precede
the new variable's name with var, as shown
above
* also because of its loose typing, it supports 2
different equality-comparison operators:
== means compare, but don't care about type
=== means compare, but DO care about type
* remember document object method getElementById, mentioned
earlier?
...expects an id attribute's value, and
returns the object corresponding to
the element that has attribute id with that value?
So, you can set a variable TO a particular element's
DOM object with something like:
// nameField will reference the HTML element within
// document that has id="enteredName"
var nameField = document.getElementById("enteredName");
* once a variable contains a reference to an object
representing an HTML element, you can grab that element's
attributes' values by referring to the attributes like
data fields
(you can use them, you can set them);
// nameField.value refers to the value attribute of
// the HTML element with id="enteredName"
nameField.value = "Looky!";
* how do you make sure NOT to modify the DO until the
page has been loaded?
* have a JavaScript in (or referenced in) the head
element that sets the onload attribute of the
window object (displaying a document),
so that it is an (anonymous) function that sets
the event handling for the desired elements
when this window exists
window.onload =
function()
{
...
};
* for example, once the document is loaded,
you might use document's getElementById
method to grab a button element, and then set its
onclick attribute to a button-click event handling function
you'd like to be done when that button is clicked:
window.onload =
function()
{
var myButton = document.getElementById("magicButton");
// NOTE: set these to a FUNCTION,
// NOT to the result of CALLING a function
// (NO parentheses after function name here!!)
myButton.onclick = sayMagicWord;
};
* see posted examples js-play1.php, please.js