=====
CS 328 - Week 14 Lecture 1 - 2025-04-28
=====
=====
TODAY WE WILL
=====
* announcements
* START our WHIRLWIND TOUR to client-side JavaScript!!!!!
* prep for next class
=====
* should start working on Homework 11!
* at-least-1st attempts due by 11:59 pm on Friday, May 2
* submit files early and often!
=====
* zyBooks Chapter 7 - 7.1, 7.7, 7.8, 7.9 - "JavaScript Fundamentals"
is now available from the course Canvas site
* starting that material in class today!
* but for full credit, the activities should be completed by
11:59 pm on Friday, May 9
=====
* I tried to compile some of the PHP "survival tips" we have
discovered so far, and these are now posted on the course
"Selection of PHP References" page:
* see: "PHP Survival Tips" link
* these may be useful reminders as you are working on
Homework 11's Problems 1 and 3!
=====
INTRO to CLIENT-SIDE JAVASCRIPT
=====
* FIRST:
JavaScript != Java !!!!!!!!!!!!
* very different languages!
* (although JavaScript's name WAS partially to "ride" on
Java's popularity coattails in the mid-1990s...!)
* 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 being strongly-typed language,
JavaScript being a loosely-typed scripting language
* Java's objects being class-based
(define a class, THEN can create OBJECTS
of that class),
JavaScript using a more 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 --
Javacript has better support for such functional
programming;
=====
* SECOND:
JavaScript CAN be 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
* Node.js is an example of a popular server-side JavaScript
framework? library?
* AFTER CLASS: 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 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
DOM (Document Object Model) -- that's standardarized
by the World Wide Web Consortium (W3C)
The DOM defines the way in which HTML documents are
exposed to your script
=====
* for CS 328, you are expected to use unobtrusive-style JavaScript,
trying to keep it more separate from the content by limiting it
to within an HTML document's head element
* In particular, you are expected to put your JavaScript script
elements at the end of an HTML document's head element,
after its CSS link elements
=====
* For CS 328, here are the two accepted elements for JavaScript
embedded within a document's head element:
really, it is one element! the script element
* but for JavaScript code embedded in the head element:
<script type="text/javascript">
// JavaScript statements here
</script>
* and for JavaScript you are using from an external JavaScript file:
<script src="file-or-URL.js" type="text/javascript"></script>
* that is, when the script element has a src attribute, it will
not have content;
* but, since script element CAN have content, for strict-style it
MUST have an end tag, even when it is referencing an external
JavaScript file
* [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 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)
* and external JavaScript should be in a file with suffix .js
=====
introductory bits of JS syntax:
=====
* JS does not require variable names to start with $;
they CAN, but because that's commonly used in MANY JS libraries,
it is considered POOR STYLE to start a "plain" JavaScript variable
with a $
* It is considered GOOD STYLE to declare variables usiong the keyword
let or var -- BUT we are in them world of scripting languages,
so no type is required
* the scope can differ based on if you use let or var -- we'll
tend to use let
let message; // declared a variable named message
let count = 0; // declared a variable named count and initialized it to 0
// and once declared, can assign and change variables' values
message = "Moooooo";
count = "Looky";
* the DOM (Document Object Model) specifies a JavaScript object
named document
your client-side JavaScript can access parts of the currently-executing
HTML document by using this document object
* it's an object! It has data fields/properties and methods/functions!
* (and you 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 within the currently-executing HTML document
have corresponding JavaScript objects that are descendants
within the JavaScript document object!
=====
* One handy method of JavaScript's document object is getElementById:
it expects the value of an id attribute,
and returns a reference to the JavaScript DOM object representing
that particular element within the current document
* The DOM exposes all of an HTML element's attributes, one way or
another, and provides data fields/properties and methods for obtaining
them and even changing them in the current *executing* HTML
document
* for example, for an input with type="text",
the corresponding DOM object has a data field named value,
representing the current contents of that textfield
* another example: for a non-void element, a data field named
innerHTML represents its content
* (side note: it is considered bad form to set data field innerHTML
to anything by plain text content... you SHOULD
use methods such as createElement, appendChild, insertBefore,
replaceChild, etc. to ADD an element to the document object)
*********
* IMPORTANT gotcha to note: an element's attribute names are
NOT always the same as the DOM data field names for the
element's corresponding DOM object -- be careful!
=====
* NOTE: it is considered very common to directly access
a JavaScript object's data fields!
(that is, unlike in C++/Java, you do not just use
getter/accessors or setter/modifiers to access an object's
data fields)
so:
let t1 = document.getElementById("name-field");
// t1 now references the object corresponding to the
// element in the current document with id="name-field"
// if the element with id="name-field" happened to be
// an input element with type="text", then:
t1.value = "Looky"; // now Looky is that textfield's content
* JavaScript method calls DO need to be followed by () (even if no arguments)
=====
JS anonymous functions
=====
* a function CAN have a name:
function looky()
{
alert("Looky!");
}
* BUT -- JavaScript also supports *anonymous* functions, that
don't have a name;
* here's an anonymous function: (just don't GIVE it a name in
its header -- no name between keyword function and its
parenthesized parameter list in its header):
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!)