Overview

• Preliminaries.
  • Admin.
  • Questions.
  • Look at Web sites.
• A brief introduction to Javascript.
• A few Javascript commands.
• Lab.
• Homework.

Preliminaries

Admin

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

Questions

Web sites

About Javascript

• We need interactive Web pages! Let's put programs on Web pages.
  • Change the content.
  • Check data on forms.
• Mozilla designed a language.
• Marketing: "Leverage the term Java"
• Relationships between Java and Javascript
  • Similar: A belief that C syntax is good
  • Similar: Object-orientation (added to Javascript) - different model
  • Different: View of types (Java is your nanny vs. laissez faire)
  • Different: Some syntax
  • Different: Functions as first class values
  • Different: Consistency
• Part of a whole ecosystem for Web N.M
  • HTML
  • CSS
  • Javascript
  • DOM
  • Canvas
  • SVG
  • ...
• Two aspects
  • The library of functions/classes/objects/values you create
  • The individual function calls

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.

onClick="INSTRUCTION"
onMouseOver="INSTRUCTION"
onMouseOut="INSTRUCTION"

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.