An Introduction to Programming using JavaScript

John Dougherty
CS100: The World of Computing
Haverford College
Spring 2000

• Program (typically):
  1. Input data (HTML - Forms)
  2. Process this data, generate results
  3. Output results (HTML - Forms)
• Statements and Functions and Programs (oh, my!)
  • a program consists of a set of functions
  • a function consists of a set of statements
  • a statement is a list of symbols recognized by the compiler language (for us, JavaScript)
• Events
  • without JavaScript
  • with JavaScript
• Objects - "things" on a page that also have implicit functions.
  • text
  • image
  • form object - used for our program I/O and event trigger
    • input object - input needed data
    • button object - call a function(s) (i.e., process)
    • textarea object - output results
• Variables
  • named places to hold data
    • numeric data
    • string data
  • naming rules
    • must start with an alphabetic character
    • remaining can be alphanumeric
    • can also use the character _ (underscore)

  • Good Examples	Bad Examples
    x	42
    index	#pounds
    Max	99baloons
    C3P0	Barbara Streisand
    value1	^%$#*&@!
    element_3_a	why?

  • distinction between variable and value
  • Example: Squaring a number
• Operators and Expressions - Calculator
  • arithmetic expressions
    • evaluate to a numeric value
      • Addition: op1 + op2
      • Subtraction: op1 - op2
      • Multiplication: op1 * op2
      • Division: op1 / op2
      • Remainder: op1 % op2
      • Quotient: uses Math.floor()
      • Negation: -op
      • Increment: op++ same as op = op + 1
      • Decrement: op-- same as op = op - 1
    • - "Better" Calculator
  • logical or boolean expressions
    • evaluates to a boolean value (return true || false)
    • op1 < op2
    • op1 <= op2
    • op1 > op2
    • op1 >= op2
    • op1 == op2
    • op1 != op2
    • op1 || op2
    • op1 && op2
    • !op
• Syntax - valid rules for the language
  • Comments
    • way to place English prose into your program source for documentation (i.e., for people)
    • ignored by the compiler
    • JavaScript supports two schemes for comments
      • one line: use //
      • multi-line: us /* and */
    • each function should be described using comments
    • your name should be included in the initial program comments, as well as a program overview
  • Declarations
    • variables and functions should be declared before they are used (i.e., called)
    • type information is necessary
      • variables: what data is held (and thus returned from any expression or to any variable)
      • functions: what data is generated (and thus returned from any expression or to any variable)
    • in this way variables and functions are can be used in the same way reserve words ...
      • var x, temp=3; // variable
      • function solve(); // function
  • Expressions
    • string of symbols consisting of
      • operands (nouns)
        • variables
        • numbers
        • string literals
      • operators (verbs)
        • arithmetic (e.g., +, -, *, /)
        • logical (e.g., <, >=, ||!=)
  • Functions
    • set of statements to accomplish a task or perform a computation
    • can be viewed as a subprogram (modular)
    • can be viewed like a math function, which maps input to output
      • input via parameters, which are variables listed in the parens which are given values outside the function
      • output via the return statement
      • like a true math function, a specific input should produce a specific output deterministically
    • samples
      • Cube a Number
      • Cube or Square a Number
      • Background Colors example from AE text p. 141-142
• Control Statements
  • Iteration (i.e., Looping)
    • Sentinel
      • while() loop
      • executes zero or more times
      • do not need to know how many times to repeat beforehand
      • repeat as long as some condition is true
      • logical condition expressed in the parens of the while() statement
      • Power with while() example
    • Counting
      • for() loop
      • executes zero or more times
      • (typically) need to know how many times to repeat beforehand
      • syntax is not intuitive
      • for(start; end-expr; iterate){ }
        • start: int index = 0
        • end-expr: index < max
        • iterate: index++ or index = index+1
      • Power with for() example
  • Selection
    • Skip
      • if() statement
      • executes a block of code conditionally
      • condition determined by the logical expression in the parens
      • Power by cases with domain check
    • Fork
      • if() else statement
      • general syntax

        if (logical-expr)
         block1
        else
         block2

      • either block1 or block2 is executed (but not both)
      • nestable to form multiple forks
      • Power with domain check
• Parameters
  • Power again, 2 parameters passed
  • MaxValue, text p. 182
• Strings, Characters, and Concatenation examples
  • Reverse() function using append
  • Reverse() function using prepend
  • Reverse() function using substring (IExplorer)
• Recursion
  • a function that calls a simpler version of itself
  • an alternative to looping
  • your life can be viewed as a recursive function on the number of days left to live

    function myLife(daycount)
    {
     if (daycount == 0)
      return expired;
     else
      return liveToday() + myLife(daycount-1);
    }
          
          initially,
           lifecount = ????;
     myLife(lifecount);

  • Infinite Recursion (typically bad)
    • God:
      • lifecount = undefined (or infinity)
      • remove the if() statement entirely
      • replace daycount-1 with daycount+1
    • Groundhogs' Day: replace daycount-1 with daycount
  • Example: Power revisited again

Page maintained by John Dougherty Computer Science, Haverford College