Held: Thursday, 27 February 2014

Back to Outline 05 - HTML and Cascading Style Sheets. On to Outline 07 - Class Canclled for SIGCSE.

Summary

We consider the basics of Javascript.

Related Pages

• EBoard (Source) (HTML) (PDF)

Overview

• A brief introduction to Javascript.
• A few Javascript commands.

Administrivia

• Assignments
  • Assignment 6 is on the outline.
• No class next week.
• Fun CS stuff
  • CS curriculum discussion today at 4:30

About Javascript

• Designed a Mozilla to provide interactive Web pages.
• Named in such a way to leverage the marketing/popularity of Java.
• Primary relationships:
  • Both have C-like syntax
  • Both are object-oriented
• But they are very different languages
  • Different object models
  • Different typing models
  • Different purposes
  • Different execution models
  • JavaScript is more functional
  • ...
• The initial Javascript world was a bit of babble - Each browser manufacturer seemed to have its own variant.
  • It's still the case that IE behaves differently.
  • But there's increasing standardization in ECMAScript
• Central to modern Web design
  • HTML
  • CSS
  • Javascript
  • The document model (DOM)
  • Canvas
  • ...
• Can put Javascript directly in Web pages.
• But can also load external libraries.

Simple Javascript

Loading external libraries

Including code directly

Functions declared with

function NAME(PARAMS)
{
  BODY
} // NAME(PARAMS)

Variables declared with

var NAME;

Instructions look a lot like C, except that you can also tell things to do operations with THING.OPERATION.

var str = "Hello";
str.indexOf("ll") -> 2

You can call functions from the console. And that's a good place to start, particularly since smart consoles have autocomplete.

You can call functions in response to events. That's the most typical way of making things interactive.

Here are a few basic commands to get you started.

var obj = document.getElementById(ID)
obj.innerHTML = "TEXT";
obj.style.color = "red";
obj.style.backgroundColor = "black";

Grr ... sam can't get setTimeout to work.

Lab

Here's a series of operations a student tells me they found in Goedel, Escher, Bach

• If a string ends with I, you can add a U afterwards. MI -> MIU
• If a string starts with M, you can duplicate the text after the M. MIU -> MIUIU.
• If a string contains three I's in a row, you can replace the three I's by a U. MIIIM -> MUM.
• If a string contanis three U's in a row, you can replace the three U's by a U. MUUUM -> MUM.

I believe Hofsteder (sp?) asks whether you can go from MI to MU, but that's irrelevant to our case.

Make a simple Web UI that lets someone explore this design space. Presumably, you'll have a button for each of the options.

Homework

Make a game. It can be animated, text, numeric, whatever. Upload the game in its own folder.