JavaScript IV

1
JavaScript IV

• Event-Driven Programming

2
Outline

• The event-driven model
• Web applications
• Form HTML
• forms
• buttons
• text boxes
• accessing form content
• Event Handlers
• onClick
• onChange

3
Imperative programming

• Program
• defines a series of operations
• User
• invokes program
• waits for result
• "Batch" processing

4
Event-driven programming

• Modern applications are event-driven
• Different kind of programming from sequential
  (batch) execution
• programmer does not control when code is executed
• user controls that
• Programmer provides capabilities
• the user invokes them
• may be multiple ways to do the same thing
• Basic idea "event handlers"
• small bits of code that the application calls
• when certain events occur

5
Event-driven programming

• Imperative program Example
• load payroll data
• do payroll computation
• output checks
• Event-oriented program
• establish payroll application interface
• associate loading routine with "load" menu item
• associate payroll computation with "compute" menu
  option
• associate check printing operation with "print"
  menu options
• User is in charge of the sequence

6
Basic idea

• Events are generated
• user actions (clicking, moving mouse)
• browser actions (loading, closing)
• To use an event, the programmer
• writes JavaScript code
• associates it with the appropriate document
  element
• associates it with the appropriate event

7
Pieces we need

• New HTML elements
• forms
• interface widgets
• buttons, text boxes, etc.
• New HTML attributes
• event generation
• New JavaScript capabilities
• associate code with events

8
Web application

• Application
• "A complete, self-contained program that performs
  a specific function directly for the user"
• Web application
• an application delivered over the WWW

9
Web applications

• Core of web development
• 90 of the web's "pages" are generated from user
  input
• only 10 are static pages
• Not in our scope
• IT 230 teaches how to build those kinds of
  applications
• we will not use forms as input to applications
• But
• web applications need input
• input comes from HTML forms
• we can use form element to explore event handling

10
Example applications

• Course online
• Any search engine

11
What all these share...

• The need to get user input from a web page
• Format of input
• name-value pair
• Interaction idea
• web form
• How to get from user?
• depends on the data

12
Form elements

• Form element
• identify a part of the page where the user can
  input data
• Input element
• specific data items
• name and value attributes
• user can change the value attribute

13
Input elements

• name and value attributes
• user can change the value attribute
• how depends on the type
• text field
• selection list
• radio button, etc

14
Example
15
Input elements

• Treated like other page elements
• can be organized into paragraph, tables, etc.
• Form layout is almost always table-based
• All use the same base element
• INPUT
• what kind of input controlled by the type
  attribute

16
Input elements
17
Textarea

• for multi-line input
• ltPgtltBgtPlease enter your comments belowlt/Bgtlt/pgt
• ltTEXTAREA NAME"comments" ROWS"5 COLS"40"gt
  lt/TEXTAREAgt

18
Select / Option

• for menus and lists
• ltselect size"3"gt
• ltoptiongtBS CGA-DESlt/optiongt
• ltoptiongtBS CGA-DEVlt/optiongt
• ltoptiongtBA DClt/optiongt
• ltoptiongtBS DClt/optiongt
• ...
• lt/selectgt

19
Input elements we will use

• type"button"
• rendered as a "raised" rectangle
• user can click
• type"text"
• rendered as an "indented" box
• can display text
• user can enter text

20
Examples

• Button
• ltinput type"button" value"Click Here for Lucky
  Number" /gt
• Text box
• ltinput type"text" name"fahrBox" size"10" value
  "" /gt
• more typical (with label)
• Enter a temperature in degrees Fahrenheit ltinput
  type"text" name"fahrBox" size"10" value "" /gt

21
Events

• Any HTML element can generate events
• many different types
• Commonly-used
• button ? click event
• when the user clicks on the button
• text ? change event
• when the user changes the value

22
Linking element and event

• event handler attribute
• when the event occurs on that element
• the JavaScript statement will execute
• Example
• onClick"Convert()"
• In Element
• ltinput type"button" value"Convert to Celsius"
  onClick"Convert()" /gt

23
Example

• lucky.html

24
Interacting with form values

• Form data
• name / value pairs
• processed by the server
• can also be manipulated by JavaScript
• Change the value of a form element
• changes what the user sees
• Linked to events
• we can create simple browser-based applications

25
Syntax

• Refer to subparts using dot (.) syntax
• Format
• document.FORM_NAME.ELEMENT_NAME.value
• Getting a value
• tempF document.TempForm.fahrBox.value
• Setting a value
• document.TempForm.celsiusBox.value tempC

26
Examples

• lucky1.html
• convert3.html
• Greetbox.html

27
Dynamic HTML

• JavaScript can alter many HTML properties
• "dynamic HTML"
• we see more of this later in the class
• Example
• alter the src attribute of an img element
• pics.html

28
onChange event

• onClick event
• user presses a button
• For text elements
• onChange event
• when the user alters the contents
• and then clicks outside the element
• Example
• copybox.html