=====
CS 328 - Week 14 Lecture 1 - 2026-04-27
=====
=====
TODAY WE WILL
=====
* announcements
* start our WHIRLWIND tour of 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 start 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
=====
intro to a certain style of
client-side JavaScript
=====
* remember: we are limiting this particular discussion to
CLIENT-SIDE JavaScript,
running IN a browser;
* created by Brendan Eich in 1995
* please note:
Java != JavaScript !!!!!!!!!!!!
they are NOT the same language!
* (although JavaScript's name WAS partially to "ride" on
Java's popularity coattails in the mid-1990s...!)
* after class, I checked Wikipedia on this --
it states "...Eich considered the JavaScript
name a marketing ploy by Netscape."
* and both WERE designed with web programming
considerations in mind!
* note that while both have control structures
following C/C++'s { } style,
we talked about a number of important differences,
such as (just a FEW of the differences!)
* Java is a strongly-typed language,
JavaScript is a a loosely-typed scripting language
* Java's objects are class-based
(define a class, THEN can create OBJECTS
of that class),
JavaScript uses a prototype-based
object system (can just create an object if
you wish...!)
* newer versions of Java have some support for
so-called functional programming -- ONE aspect of
this being able to treat functions as first-class
objects, able to be passed as arguments and returned
by functions --
JavaScript has better support for such functional
programming.
* JavaScript is frequently run on the client-tier
(and that's where JavaScript STARTED)
* often called client-side JavaScript
* typically executed within a browser
JavaScript CAN also be run on the application-tier
(has become a very popular option, also)
* often called server-side JavaScript
* added after class:
Node.js is an example of a popular server-side JavaScript
framework? library?
* nodejs.org calls it neither, but rather
"an asynchronous event-driven JavaScript runtime
[environment]"...!
* we are focusing on client-side JavaScript in CS 328
* we want to see how it can interact with the
JavaScript DOM - Document Object Model - to do
dynamic things with an executing HTML document in a
browser!
* fun fact: JavaScript is an implementation of the ECMAScript
specification
* BUT: the ECMAScript specification does NOT describe the
JavaScript DOM (Document Object Model) -- that's standardarized
by the World Wide Web Consortium (W3C)
* the JavaScript DOM defines the way in which HTML elements are
exposed/available to client-side JavaScript
=====
in CS 328,
we are going to use unobtrusive-style JavaScript
=====
* what's that?
keeping the JavaScript as separate from HTML document content
as we can,
by limiting it to the HTML head element
* in particular, in CS 328 you are expected to put your
JavaScript script elements at the end of an HTML document's
head element, after its CSS link elements.
* In CS 328, we'll put ONE of the two following styles of
the script element with an HTML head element:
<script type="text/javascript">
// JavaScript statements here
</script>
<script src="desired-URL.js" type="text/javascript"></script>
* external JavaScript should be in a file with the
suffix .js
* Note that, when the script element has a src attribute --
referencing an external JavaScript file -- it will NOT
have content;
* BUT -- since a script element is able to have content
(when it does not have a src attribute), following
strict-style HTML syntax, it MUST have an end tag
</script>!
* [note: ADDED following AFTER class,
so you'll find it here if referencing this later -
it also will be mentioned in the Week 14 Lab Exercise
handout]
* NOTE that, for external 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)
=====
a little JavaScript syntax
=====
* in "vanilla" JavaScript (just plain JavaScript),
variable names do NOT have to start with $ as in PHP
* (but some JavaScript *libraries* have a $ convention...!,
so it is considered poor style to start a "vanilla"
JavaScript variable with a $)
* In JavaScript, it is considered good style to declare variables
using either let or var
let looky;
var looky;
...but we are still in the world of scripting languages,
so no type is needed.
* the scope can vary based on if you use let or var -- we'll
tend to use let
* it is also fine to initialize a variable at declaration:
let count = 0;
* JavaScript convention is to name variables usimg camelCase
(rather than like_this)
* CS 328 will follow this,
except we'll write named constants in ALL_UPPERCASE
=====
* in the DOM,
client-side JavaScript can access and muck with parts representing
the currently-executing HTML document using a JavaScript object
named document
* it is an object! it has data fields and methods!
* (and you can access an object's data fields/properties and
methods/functions as in C++, Java, Python:
my_obj.desired_data_field
my_obj.desired_method(arg1, arg2, ...)
)
* and ALL of the elements in the currently-executing HTML document
have corresponding objects that are descendants within
the JavaScript document object!
* One handy method of document is getElementById,
that expects a string that is the value of an id attribute,
and returns a reference to the DOM object representing that
particular element within the current *executing* HTML
document
* unlike common C++ or Java object-oriented programming style,
in JavaScript it is pretty common to directly access an
object's data fields, and to directly modify them
(rather than using methods instead)
* and, using the DOM, you can modify an HTML element
in the currently executing HTML document by modifying
an attribute of or calling a method of the object in
the DOM corresponding to that element
* for example:
the DOM object for an input element with type="text"
has a datafield named value, and datafield value's value
is the content being displayed by that textfield
********
* (CAREFUL -- not all attributes have a direct
datafield with the same name!)
* that is, for HTML element:
<input type="text" name="flavor" id="flav_choice" />
If you had the JavaScript:
let flavorTextfield = document.getElementById("flav_choice");
then this JavaScript expression will contain what is
currently entered in this textfield:
flavorTextfield.value
...and you could use this on the left-hand-side of an
assignment statement to CHANGE what appears in this textfield!)
flavorTextfield.value = "";
* as another example,
for any non-void HTML element,
there is a data field innerHTML that represents its
content (the stuff between its start and end tags)
* that is, for HTML element:
<p id="warning"> Any warning will appear here </p>
If you had the JavaScript:
JavaScript grabbing this p element's current content
could be:
let warningPara = document.getElementById("warning");
then this JavaScript boolean expression will be true:
warningPara.innerHTML == " Any warning will appear here "
...and you could use warningPara.innerHTML on the
left-hand-side of an assignment statement to CHANGE
this p element's content:
warningPara.innerHTML = "Warning - too many widgets";
* [ADDING after class]
NOTE: it is considered bad form to set datafield innerHTML
to anything but plain text content... you SHOULD
use methods such as createElement, appendChild, insertBefore,
replaceChild, etc. to ADD an element to the document object
====
by the way: JavaScript has significant functional
programming features!
====
* for example -- it has anonymous functions!
* anonymous function? a function that has no name!
* just don't GIVE it a name in
its header -- no name between keyword function and its
parenthesized parameter list in its header) --
for example:
function()
{
alert("Called by a function with no name");
}
* you can assign a function -- named or anonymous --
to a variable!
let looky = function()
{
alert("Called by a function with no name!");
};
// looky's value is now a function!
looky(); // calls that function!
* be careful -- at this point, note that:
looky is an expression whose value is this anonymous function,
looky() is a CALL to that anonymous function!
(this will be important in event-driven programming using
JavaScript!)
* see some playing-around with this in posted example js-play.html