Forms and Java script

1
Forms and Java script
2
Forms

• The graphical user interface
• -textbox, radio, button, textarea, checkbox
• The processing script
• CGI scripts, Perl script, PHP

3
Creating a form
4
Creating a form

• m//cgi-bin/display_results.pl"
  
• Please share any suggestions or comments with
  us
  
• wrap"wrap" Comments?
  
• name"submit" /
  
• name"startover" /
  

5
Creating a form
The field with the NAME attribute equal to
comments had a VALUE equal to Comments? This is
my comments The field with the NAME attribute e
qual to submit had a VALUE equal to Order Bed
6
Creating an email form

• action"mailtoxyz_at_yahoo.com"
  
• Please share any suggestions or comments with
  us
  
• wrap"wrap" Comments?
  
• name"submit" /
  
• name"startover" /
  

7
Creating GUI component

• Textbox
• Radio button
• King
  
  
• Queen

8
Creating GUI component

• Creating checkboxes
• / Foodboard
  
• valuedrawers / Drawers
  

9
Adding hidden field to a form

• 
  
  
• Why do we need hidden fields?
• To keep the status of the program
• To transfer data between different forms

10
Java scripts

• Two types of scripts
• Automatically executed
• Event-driven

11
Automatic script

• Example Adding date and time to the web site

12
Automatic script

• t" src"time.js"
  
• time.js
• document.write("
  "Date()"")
  

13
Alert box
14
Code

• onClick'alert("Welcome to our first alert box.
  Press OK to contine.")'
  

15
Practice

• Open Textpad and cut paste this code
• Java script page /title
• And save it as script.html

16
Practice

• 2. Insert HTML and Java script code to
• - set up a simple form, as shown below. If a
  user clicks on Send comments button, the
  comment should be sent to your email address
  
• - add an alert box

17
Creating a button that Executes a script
18
Code

• onclick"alert('Today is 'Date())"
  style"font24px 'Helvetica','Arial',sans-serif
  backgroundyellowcolorredpadding4px" What
  time is it?

19
Changing an Image when a visitor points
20
Changing an Image when a visitor points
21
Changing an Image when a visitor points
22
Code

• "Have you ever been in Wisconsin?". See the
  beautiful picture, please point to it to see how
  long it will last.
  
• rc'winter.jpg'" onmouseout"document.season.src'
  springsnow.jpg'"
  
• height"500" alt"Season" /
  

23
Controlling a New Windowss size

• An FBI agent must go undercover in the Miss
  United States beauty pageant to prevent a group
  from bombing the event. on'index.html' window.open('http//www.mymovies.
  net/player/player.asp?url/film/fid503/trailers/tr
  id418/wm/bb.asxfilmid503','Trailer','heigth150,
  width150, scrollbarsyes')" Sandra Bullock
  

24
Variables in java script

• String How are you a series of characters
  inside quote marks
  
• Number 4,5 any number not inside quote marks
• Boolean true/false
• Null null
• Create a variable
• var myVar 45
• var myStringHow are you

25
If/then statement

• if (condition)
• statements if true
• If (condition)
• statement if true
• else
• statement if false

26
Repeat loops

• for (init expressionconditionupdate
  expression)
  
• statements inside loop
• Example
• for (var istartValue i
• statements inside loop

27
Function

• function functionName(parameters)
• statements

28
Example
29
Code

• var newWindow
• function makeNewWindow()
• newWindow window.open("","","HEIGHT300,WIDTH3
  00")
  
• function closeNewWindow()
• if (newWindow)
• newWindow.close()

30
Code

• onClick"makeNewWindow()"
  
• onClick"closeNewWindow()"
  

31
Practice

• Open Textpad and cut paste this code
• Java script page /title
• And save it as script.html

32
Practice

• 2. Use google search engine to download 3
  pictures (lets call them pic1, pic2 and pic3).
  Insert HTML and Javascript code so that
  
• - Pic1 is displayed in the middle of the screen.
  If a user moves his mouse over pic1, pic2 will be
  displayed there instead. If the user moves the
  mouse out of pic2, pic3 will be displayed there
  instead.
• 3. Adding date and time to your web page