Session 14: Looking Ahead to JavaScript
Today
Today we take the first midterm exam. In our time before the exam, we look ahead to the next unit of the course, in which we learn how to use JavaScript to augment our webpages and to do basic web development tasks.
Thanks to everyone for their responses to the checkpoint survey we completed last time. While nothing is perfect, things seem to be going reasonably well. Some folks asked for:
- more pointers to "how to" pages on the web, and
- more exercises focused on topics that are most confusing, such as using flexbox and working with margins.
I will try to improve on both.
I try to sprinkle links to helpful pages elsewhere into the readings (example) and session notes (example). Now, I'll see if I can find more links and perhaps pull them out so they are easier to find. The course resources page has many links already, some of which are tutorials. It can serve as a home for more links, especially to how-to pages.
As for targeted exercises, I'll try to get your feedback more frequently on the topics you find most challenging so that I can design more helpful exercise as we go along.
If you have any other suggestions or comments, please share them at any time. I would like to make this course as helpful to you as I can.
The Third Language of Web Development
We have been studying HTML and CSS for five weeks. We could keep going... CSS in particular is big and complicated. We could study it for many more months, if we wanted. HTML is not so big, but there is still more. Just last session we learned about two new elements, for creating disclosure boxes.
But web development consists of more than HTML and CSS.
Why write little programs?
HTML describes the structure of a document. CSS describes the presentation of the document. Together, they describe what we want to see. The web browser does the work to make sure the web page it displays matches these descriptions. The process is built into the browser.
Sometimes, we want to describe a process: a new or specific action for the browser to take. We need a language to describe how to do something.
- It may be an action we want the browser to take in response to a user action, such as pushing a button.
- It may be an action we want the browser to take during the process of loading and displaying a page.
The browser doesn't already know how to do everything we might want for our specific web pages. We have to tell it.
HTML and CSS have only very narrow abilities for describing actions. We need a new language for describing processes.
JavaScript will be that language for us.
Why use JavaScript?
There are many, many (many!) programming languages. Most require extra tooling in order to run, and the result is tied to a specific operating system.
JavaScript was created to run in a browser. (It requires extra tooling to run anywhere else!)
It is built into every web browser and every mobile platform, which means that knowing it gives web developers maximum reach.
JavaScript is simple enough to support writing scripts, small programs that interact with the HTML and CSS for a web page, taking a well-defined action in the browser. It is complex enough to support writing the sort of code that web developers need for manipulating data and preparing it for the web.
JavaScript runs on both the client and the server.
Source: Fundamentals of Web Development
Source: Fundamentals of Web Development
True to the purpose of this course, our focus is on client-side scripting.
How will we use JavaScript?
We will write many 1- and 2-line scripts to interact with the browser and its model of a web page.
- Some interactions will modify the web page.
- Some will validate and transform user inputs.
- Others will initiate communication to the server.
We saw a simple example of an interaction that modifies a web
page in Session 2. When the
user clicks on a button, a single line of JavaScript changes
the content of the page's h1 heading.
A more realistic use of a script to interact with users is incorporating footnotes directly into the user's reading experience. Check out the footnotes on this page and this page.
We will see examples of validating user inputs and initiating communication with the server in the coming weeks.
We can also write scripts to process data, such as entries in a spreadsheet, as part of the web development process. These scripts will be longer than most of our interaction scripts, but they will still be shorter than full-fledged programs,
For example, we might want to:
- clean up data, putting it into a standard form, before using it on our page
- generate HTML that we can use in our web pages from data in another format
Consider the collapsible tree view list we saw in Session 13. Typing the HTML for these three IDS bundles — let alone all ten! — would be tedious and prone to error. But imagine that we could generate the HTML from data that looks like this, exported from a spreadsheet:
Web Development, CS 1100, CS 2100, CS 3120, MKTG 3148, COMM 3558 Digital Visualization, COMM DM 1611, COMM DM 3659, COMM DM 4655, COMM 3558, COMM 4558 Digital Imaging, TECH 1055, TECH 2070, TECH 3169, TECH 4158, TECH 4161
With JavaScript, we can do just that.
Closing
The first midterm exam is today.
Homework 6 is due tomorrow. If you'd like a little extra time for this one, let me know.
Next time, we begin our study of JavaScript in earnest.