CSCI 107 — JavaScript notes and lab

Readings

This is far far far more than you need for CSCI 107.

• HTML5: The Missing Manual, Appendix B
• Khan Academy Hour of Code
• JavaScript
  • JavaScript introduction
  • JavaScript where to
  • JavaScript syntax
  • JavaScript statements
  • JavaScript variables
  • JavaScript operators
  • JavaScript arithmetic
  • JavaScript functions
  • JavaScript objects
  • JavaScript scope
  • JavaScript conditions
  • JavaScript while loop
  • JavaScript arrays
• JavaScript DOM
  • JavaScript HTML DOM
  • JavaScript HTML DOM methods
  • JavaScript HTML DOM document
  • JavaScript HTML DOM elements
  • JavaScript HTML DOM changing HTML (look at me!)
  • JavaScript HTML DOM changing CSS (look at me!)
  • JavaScript HTML DOM style object
  • JavaScript HTML DOM events (look at me!)
  • JavaScript HTML DOM eventListener (look at me!)
• major extensions
  • jQuery
  • HTML 5 Canvas
  • WebGL
• MDN Introduction to Object-Oriented JavaScript (for CSCI 18x students)

JavasScript — history and examples

According to Turing award winner Barbara Liskov, JavaScript is what happens when you let amateurs design programming languages. This means it’s very messy.

In the beginning

• Java Applets — JavaScript is not Java
  • XpressConnect
  • Faces for CSCI 201 (Fall 2001)
  • Processing drops Java Applet support
  • Paul Falstad’s Circuit simulator (now ported to JavaScript)
• A Short History of JavaScript
• ECMA International® — yawn
• ECMAScript® 2015
• JScript from Microsoft
• ActionScript from Adobe

Simple steps with JavaScript by local yokels

• Ken Bogerts’s Stack N' Heap
• Silly JavaScript examples
  • Switching title (yep, that’s all it is)
  • Captain Underpants name changer
  • Use of canvas

Doing something

Go to the lab.

Getting the starter files

Start by downloading a ZIPed copy of HTML, CSS, and JavaScript files and store it on your Desktop.

Open up Brackets and connect to the unZIPed directory, which should be called jslab_107_lab. Look at the three files.

• index.html — HTML
• shakespear.css — CSS
• shakespear.js — JavaScript

The hook

The HTML file index.html loads both the CSS and JavaScript files. The CSS can be loaded in one tag; the JavaScript, in two. So strange.

<link href="shakespear.css" rel="stylesheet" type="text/css">
<script src="shakespear.js"><script>

Notice that index.html also contains class attributes for controlling style with CSS and style attributes for controlled mahem with JavaScript.

The style

The CSS file shakespear.css contains only two rule sets for changing the style of displayed HTML elements. CSS files often set the static style while JavaScript does the dynamic stuff.

The script

The JavaScript is contained in the file shakespear.js. If you want to really learn how to program in JavaScript, you need to sign up for CSCI 185, Internet Client-Side Tehnology.

Rather than explain this in gory detail on this page, I’m going to list four things the JavaSript does and give an explantion in class.

• The border around “Parting is such sweet sorrow” changes color every three seconds.
• The header text “Quotes from Romeo and Juliet” changes color when the mouse moves over it.
• The quote “O Romeo, Remeo!” gets a little longer if press the mouse on it.
• The quote “O Romeo, Remeo!” also gets a little longer every minute.

Doing something

Here are some tasks that will make an obnoxious web page. See if you can do some of them.

• Make the border of “What’s in a name?” flash between red, yellow, and green. This requires the use of an else if (or an array)
• Make the border of “What’s in a name?” flash a bit more like a real traffic signal. It means that the yellow phase will be much shorter than then red and green phase. The easiest way to do this is to use setTimeout rather than setInterval. Either set the timeout longer when the light is red or green or set a variable that keeps up with the number of ticks remaining in a particular cycle.
• Make the background color of “Tempt not a desparate man“ cycle though the colors of the rainbow. This is pretty tricky. It requires using an HSL color value and the odd JavaScript (and Java) trick of adding a number to a string.
• Make the font color of “O! she doth teach the torches to burn bright“ turn red when the word “bright“ is clicked
• Make the word ‘I’ in “For you and I are past our dancing days” get gradually bigger until it pops.
• Or just do something else....