CSC 195 2014S, Class 06: Javascript (1)
=======================================

_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

   <script type="text/javascript" src="FILE.js"></script>

Including code directly

   <script type="text/javascript">
   CODE
   </script>

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.