CS 318 - Week 5 Lecture - 2-20-13

INTRO (just an intro!) to JavaScript

*   we are focusing on CLIENT-side JavaScript
    in this course

    ...executes ON the presentation-tier/client-side!

*   the first version of JavaScript was created
    by Netscape for its browsers;
    ...nowadays, it might be more accurate to
    say that JavaScript is now Netscape's dialect
    of ECMAScript, a web standard

    *   the latest specification of the language
        ECMAScript 5

*   the ECMAScript specification does not describe
    the Document Object Model (DOM),
    which is standardized by the Word Wide Web 
    Consortium (W3C)

    ...the DOM defines the way that HTML document
    objects are exposed to your script

*   browsers often include tools to help you with
    your JavaScript...

WHERE will we "put" JavaScript?
*   you can put  "external" JavaScript in files
    whose names end in .js

*   you can also put JavaScript in an HTML document --
    we'll try to do so using so-called
    unobtrusive style

    *   in this style, you try to limit the
        JavaScript (and its "snippets") to the
	head element of a page

        (to try to separate it from document content)

*   When we are referring to an external JavaScript
    (within the head element)
    the CS 318 class-standard-style for this will
    be:

    <script src="URL-or-relative-file-name"
            type="text/javascript">
    </script>

    And for inserting JavaScript (in the head
    element), you don't need the src attribute:

    <script type="text/javascript">
        ...
    </script>

*   another class coding standard:
    If a page depends on JavaScript to work properly,
    WARN the user via a noscript element in its
    body!

    <noscript>
    ...your warning...
    </noscript>

    ...see example in three-param-form.html

About JavaScript!
*   it IS case-sensitive
*   types it recognizes:
    *   Number
    *   Logical (Boolean) true false
        (BUT! values of other types are treated
	as "truthy" or "falsy" if used in a
	logical context)

    *   String    e.g.,"Hi" 'Hi'
    *   null - indicates a null value,
               is a language keyword
               is a primitive value
               Null, NULL, etc. are NOT the same thing
    *   undefined - a top-level property whose value
               is undefined;
	       also a primitive value

*   a few other useful values to know about:
    NaN - this is the result you may get
          when you do an arithmetic operation
	  on something JavaScript can't otherwise
	  assume how to handle

    Infinity - this is the result you get when
          you do something like divide by 0

*   so, there's really a small number of
    data types --
    BUT, there are many lovely objects available!

    *   Core JavaScript contains a core
        set of predefined useful objects,
	including:
        Array
        Date
        Math
        String
	...and many more

        ...and JavaScript being within a web page
           causes MORE page-related objects to
	   be created

Variables in JavaScript...
*   it is preferred to declare local variables
    using var

    var a = "moo";

    ...they ARE dynamically typed, it is
    perfectly OK for me to now say:

    a = 42;

*   JavaScript identifiers must start
    with a letter, underscore, or $ and
    followed by 0 or more letters, underscores,
    $, or digits

*   if you DON'T put the var before a variable's
    first use,
    you actually get a GLOBAL variable,
    which will generate a strict JavaScript warning,
    and is DISCOURAGED unless you have a good reason.

    WE'LL AVOID GLOBAL VARIABLES in CS 318...

*   something like:

    var thisOne;

    ...at this point, thisOne has that
    undefined value we mentioned earlier;

COMPARATOR NOTE:
*   use == for equality,
    use === for equal-AND-the-same-type

var input; 
...
if (input === undefined)
{
    ...
}
else
{
    ...
}

*   (although undefined is treated as "falsy"
    when used in a boolean context)

*   scope in JavaScript can be interesting,
    see the Mozilla JavaScript guide for more
    information

a bit about the DOM (Document Object Model)
*   an entire HTML page (when there's JavaScript
    in the page) becomes a JavaScript object named

    document

    *   has MANY data fields and MANY methods

    *   one very useful method:

        getElementById

        *   expects a string,
	    returns the object version of the HTML
	    element in that page whose id attribute
	    has that value

        *   (and each such object also has data
	    fields and methods...)

*   function syntax:

    function desired_name(desired_param, desired_param,
                          ...)
    {
        ...
        [return ret_expr];
    }

    ...and call it with desired_name(arg, arg, ...)

    please.js shows an example of a function,
    used (attached to a button's onclick attribute)
    in js-play1.html

*   you can have anonymous functions
    
    function()
    {
    }

    ...they are frequently used to attach functions
    to attributes

*  window
   *   a global DOM object, the browser window

*   falsey values:
    false
    0
    NaN
    ""   // the empty string
    null
    undefined

*   SINCE we'd like to refuse to pass on a form
    that doesn't meet given criteria,

    we need to know how to use JavaScript to that effect

    *   form elements have an onsubmit attribute

    *   if you call a function "on submit",
        when the user attempts to submit a form,
	then IF that function returns true,
	    the form submission will be allowed to proceed,
	BUT if that function returns false,
	    the form submission will NOT proceed. (it'll
	    be blocked)

	see three-param-form.html