=====
CS 328 - Week 14 Lecture 2 - 2026-04-29
=====
=====
TODAY WE WILL
=====
* announcements
* continuing WHIRLWIND TOUR of intro to
(unobtrusive-style) client-side JavaScript
* prep for next class
=====
* should be working on Homework 11!
* deadline: 11:59 pm Friday, May 1
* submit work-so-far frequently!
* should be working on the reading and activities
in the FINAL two zyBook course text's chapters,
* Chapter 7 - JavaScript Fundamentals
* ONLY activities in sections
7.1, 7.8, 7.9, 7.10
* Chapter 14 - Web Accessibility
* for full credit, these activities should be
completed by 11:59 pm on Friday, May 8
=====
JavaScript strict mode: "use strict";
=====
* if you place this EXACT statement:
"use strict";
* before any other statements in an external JavaScript file
* before any other statements in a script element
* as the first statement in a JavaScript function
...then that JavaScript will used strict mode
* from:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
* this is a way to opt in to a restricted variant of JavaScript
that eliminates some JavaScript silent errors by changing them to
throw errors -- so you can get an error message in the Java console! --
and more;
=====
JavaScript event-driven programming
=====
* event-driven programming in general:
execution is driven by events and user interactions
(doesn't just start at a program's main function or method...)
* event: something that happens such as a user clicking a button,
checking a checkbox, etc.
* an event-driven program WAITS for some event to occur
and then REACTS to it,
via code -- event handlers -- written to respond to that particular
event.
* there are DIFFERENT event-driven programming models!!
in JavaScript, here's a basic typical approach:
1. decide which element or control or widget we want to respond to
2. write a JavaScript function with the event-handling code
we want to be run when the desired event happens on the
desired element/control/widget
3. attach that function to the appropriate event attribute
for that element/control/widget
* HTML helps with this!
HTML elements can have special event attributes
that represent actions you can take on that element
* conveniently, these attributes' names all being with
on:
onclick oninput onkeydown onchange onsubmit ...
* the value for these attributes is expected to be a
function that is to be executed when that event
happens to that element
* when you set an event attribute for an element,
it can be said to now be listening for that event on
that element
* SO, to listen for an event on some element,
you set a value for the appropriate event attribute for that
element.
* typically, this value is a JavaScript function
* typically, when the event corresponding to that on-attribute
occurs on that element,
that attribute's value, its JavaScript function, is called
* for unobtrusive-style JavaScript, though,
we want to confine our JavaScript to the head element,
SO! we will add this attribute AND its value IN the head element,
using the Document Object Model (DOM).
=====
HTML button element
=====
* a GENERAL button element -- especially good for use with
JavaScript
* it CAN have content!
* it is an inline element!
* if its content is text, that text will be the label
of the displayed button
=====
GOOD PRACTICE when MODIFYING the Document Object Model's (DOM's) document
object
=====
* NOTE -- if it considered good practice to NOT modify the
current document UNTIL it has finished being loaded
=====
* how?
* The JavaScript DOM object named window represents the browser window
* the event corresponding to the window being finished loading the
current document is the load event,
and so if we give the window object's onload attribute a function,
that function will be executed only after the current document
has finished loading
window.onload = function()
{
...
};
* (you can also set this to a named function as well;
it just needs to be an expression whose type is function,
here a function that expects no arguments...)
=====
script attributes async="async" and defer="defer"
=====
* [note: adding after class, so you'll find it here if referencing
this later - it is also mentioned in the Week 14 Lab Exercise
handout]
* NOTE that, for *externa*l JavaScripts, it is also USEFUL to add
ONE of these ADDITIONAL attributes (written using the
course-required strict style):
async="async"
defer="defer"
* BOTH of these tell the browser it is SAFE to
continue parsing HTML while this external JavaScript is
being downloaded;
(that is, both are assuring the browser you are using
good modern practice of NOT modifying the DOM until the
page is loaded)
* async="async"
...means that this external JavaScript can be downloaded
AT THE SAME TIME as HTML parsing and other JavaScript downloads
(for example, it does NOT depend on anything from a
previous JavaScript)
* defer="defer"
...means that, while it can be downloaded at the same time
as HTML parsing, the JavaScripts need to be executed
in the order their script elements appear (for example,
because one uses a function from an earlier one)
=====
validating a form using a JavaScript
=====
* client-side JavaScript CAN prevent a form from being submitted
to the application tier.
* you give the **FORM** element an attribute named
onsubmit
* when someone tries to submit that form,
IF that onsubmit's event handler/function returns true,
the form's name=value pairs *WILL* be submitted to the
application tier.
IF that onsubmit's event handler/function returns false,
the form's name=value pairs will *NOT* be submitted
to the application tier.
====SEVERAL CAVEATS ====
* this is good to do,
BUT it does NOT mean the application-level can avoid ANY of the
usual checking for bad input, bad stuff, etc.
(the request may be coming from a document other than this one...!)
* if there is a an HTML element or attribute that verifies
the thing on the client tier, that's a better choice than
using JavaScript
* e.g., when the user is to enter a numeric value,
it is better to use an input of type="number"
than to use an input of type="text" and then use
JavaScript to make sure they enter a number;