Interactive JavaScript - PowerPoint PPT Presentation

1 / 8
About This Presentation
Title:

Interactive JavaScript

Description:

move mouse onto / off of / within the page. types on the keyboard ... input field when it regains focus (cursor placed in field) Uses input field's onfocus' ... – PowerPoint PPT presentation

Number of Views:52
Avg rating:3.0/5.0
Slides: 9
Provided by: Sny64
Category:

less

Transcript and Presenter's Notes

Title: Interactive JavaScript


1
JavaScript Intro
  • Interactive JavaScript

2
Interactive JavaScript
  • Real power of JS is ability to
  • Detect a user action (i.e., an event)
  • Read/capture user input
  • Process input
  • Modify the page
  • Display output
  • Typical tasks for interactive webpage
  • Design/markup GUI using HTML controls
  • Write JS code for processing user input
  • Connect GUI to JS code using event handlers
  • Test/debug/deploy

3
HTML Controls
  • ltformgt.lt/formgt
  • Structures user inputs
  • Contains HTML input controls
  • Button
  • Text fields
  • Checkboxes, radio buttons, etc. (not covered in
    this course)
  • Use the ltinput /gt tag to specify each input
    control
  • Refer to Course HTML Tag Reference

4
HTML Events
  • For interactive web pages, need way to trigger
    some JS when user interacts with page
  • User generates events when
  • click/doubleclick on a page element
  • move mouse onto / off of / within the page
  • types on the keyboard
  • positions cursor on an element, etc.
  • See W3Schools site for more info

5
HTML Events
  • To make page interactive, you must specify a JS
    to be run when user generates an event of
    interest
  • A JS event is a tag attribute whose value is a
    JS program
  • When the event is generated, the JS is
    automatically executed

6
HTML Events --DOM
  • Document Object Model enables programmer to
    reference any element in web page
  • DOM treats web page as a tree of html elements,
    where document is the root

7
HTML Events --DOM
  • Partial DOM for example event-handling programs

8
HTML Events --DOM
  • Example 1 echos the input to the output using
    calculate buttons onclick event
  • Example 2 clears the input field when it regains
    focus (cursor placed in field)
  • Uses input fields onfocus event
  • Example 3 doubles the input value and displays
    the result
  • Example 4 uses string concatenation to output a
    meaningful result for the doubling calculation
Write a Comment
User Comments (0)
About PowerShow.com