Lecture notes - April 8

• Questions?
• Go over homework. (Volunteers?) See truefalseExample.html
• Today: chapter 13 - JavaScript functions, HTML forms, and Events.
• Functions
  • one of the most crucial building blocks of computer programming
  • Typically function names are verbs; variable names are nouns.
  • functions (also called subroutines)
    • do things
    • may have inputs (i.e. variables passed as arguments)
    • may have an output (i.e. a "return" value)
  • example
    

    var theOtherColor = "#FFCCFF";
    function findHypotonuse(a,b){       # INPUTS: a,b
      var c = Math.sqrt( a*a + b*b );   # Do some stuff.
      document.bgColor = theOtherColor; # Side effect - do something else.
      return c;                         # OUTPUT: return something
    }
    # .... other stuff here
    var theAnswer = findHypotenuse(3, 4);    # And here's how you use it.
    

  • a,b,c in that example are "local variables"; those names only exist during the execution of that function.
  • theOtherColor, theAnswer are (kind-of) "global variables"; they exist outside and inside the function. (This business of where the variable exists is called "scope".)
  • Deciding which parts of your problem to break into functions, and how to arrange in a clear, useful, and re-usable way is a good part of the "art" of programming.
• Events
  • Many user actions (called "events") can be used to trigger a JavaScript function.
  • tag options like onclick="" , onmouseover="", (in the appropriate HTML tag) set up these event-function connections.

  • <script language='JavaScript'>
      function turnPageGreen(){
        document.bgColor = "#00FF00";
      }
    </script>
    <form name="pageGreenForm">
     <input type="button" name="greenButton" value="Turn Page Green" onclick="turnPageGreen()">
    </form>
    
    
• HTML Forms and tags as hierarchy of objects

  • <script language='JavaScript'>
      function doubleIt(){
        var x = parseFloat( document.doubleItForm.doubleItInput.value;
        document.doubleItForm.doubleItInput.value = 2*x;
      }
    </script>
    <form type="button" name="doubleItForm" id="doubleItID">
     <input type="button" name="doubleItButton" value="Double this Number" onclick="doubleIt()">
     <input type="input"  name="doubleItInput"  value="">
    </form>
    
  • Many other ways of refering to these objects.
    • Different in different browsers, in fact.
    • document.nameOfForm.nameOfInput.value is a shortcut that typically works, but not for all types of tags: forms and images only.
    • Often safer is the "var thisObject = document.getElementById('itsID')"
    • "element.attribute=value" can usually (not always) set <elsment attribute=value >
• Use DOM viewer to explore some of this, or put in debugging print statements.
• For next Tuesday:
  • Read chapter 13 and 14
  • Do exercises 3, 7, and (optional) 9, on page 272
  • Do exercise 6 and (optional) 9, on page 293