CS 330 Class 4

1
CS 330 Class 4

• Programming plan for today
• Forms
• Begin JavaScript
• Where are we?
• Pages are static.
• CSS separates content and format
• Javascript crosses the line from formatting
  information to interacting with it

2
Forms

• Opportunities for user input. The input is
• processed by the browser (client-side)
• sent to the server and processed there
  (server-side)
• mailed somewhere
• The form tag
• ltform (attributes)gt
• (input tags)
• lt/formgt
• Attributes include
• action what processes the form (usually a URL)
• method the format in which it is submitted (GET
  or POST)
• name used later with JavaScript

3
Input tags

• One input tag for each user input.
• Attributes
• type (required) button,checkbox, file, image,
  hidden, password, radio, reset, select, submit,
  text, textarea.
• name required for all but image, reset, submit
• size spaces to allow for the input box.
• value an initial value
• Example adding two numbers (add.htm)
• ltinput type"text" name"Number1" size5gt
• The user enters the two numbers
• Addition is done by a JavaScript function (more
  later)

4
Examples

• 1.Loan payment (example 1-3 from Flanagan,
  loan.htm)
• 2. Signing a guest book (guest.htm)
• Output is mailed to cshilepsky_at_wells.edu.
• Sample of what is received
• GuestNamefredfink
• GuestEmailFred40wells.edu
• GuestPwdaaaaaa
• 3. A simple alert (door.htm)
• 4. Pizza survey (pizza.htm) interacts with data
  saved on the server
• 5. Redirection and hidden fields (guesthid.htm)

5
JavaScript

• A scripting language developed by Netscape and
  Sun
• JavaScript code is embedded in the HTML page and
  executed by the browser
• Allows pages with executable content
• User interaction
• Document content that can be manipulated on the
  fly
• Limitations
• Not a general (stand-alone) language
• No graphics
• No file I/O
• Not yet stable or universal (but ECMA standard is
  coming)
• A programming language supported by and
  particular to a specific program

6
Language Features

• I/O
• document.write( ) for output
• form input
• Data types
• number, string, boolean, object
• weak typing type is inferred from context and
  can change
• Control statements like C
• Functions like C
• Classes not the full support of C, but
  object-oriented
• built-in objects (document, window, )
• user-defined objects