First Script Example

1
First Script Example
Try It
ltHTMLgtltHEADgt...ltSCRIPT TYPE"text/javascript"gt
function showAlert( )
window.alert("Hello there!")
lt/SCRIPTgt...lt/HEADgtltBODYgt...ltA HREF
"next.htm" onClick "showAlert( ) return
false"gtClick here.lt/Agt...lt/BODYgtlt/HTMLgt
Script template
2
First Script Example
ltHTMLgtltHEADgt...ltSCRIPT TYPE"text/javascript"gt
function showAlert( )
window.alert("Hello there!")
lt/SCRIPTgt...lt/HEADgtltBODYgt...ltA HREF
"next.htm" onClick "showAlert( ) return
false"gtClick here.lt/Agt...lt/BODYgtlt/HTMLgt
Function signature
3
First Script Example
ltHTMLgtltHEADgt...ltSCRIPT TYPE"text/javascript"gt
function showAlert( )
window.alert("Hello there!")
lt/SCRIPTgt...lt/HEADgtltBODYgt...ltA HREF
"next.htm" onClick "showAlert( ) return
falsegtClick here.lt/Agt...lt/BODYgtlt/HTMLgt
Function body
4
First Script Example
ltHTMLgtltHEADgt...ltSCRIPT TYPE"text/javascript"gt
function showAlert( )
window.alert("Hello there!")
lt/SCRIPTgt...lt/HEADgtltBODYgt...ltA HREF
"next.htm" onClick "showAlert( ) return
falsegtClick here.lt/Agt...lt/BODYgtlt/HTMLgt
Event handler
5
First Script Example
ltHTMLgtltHEADgt...ltSCRIPT TYPE"text/javascript"gt
function showAlert( )
window.alert("Hello there!")
lt/SCRIPTgt...lt/HEADgtltBODYgt...ltA HREF
"next.htm" onClick "showAlert( ) return
falsegtClick here.lt/Agt...lt/BODYgtlt/HTMLgt
Connection between event handler and JavaScript
script via a function call
Event handler
6
Modifying the Example
Try It
ltHTMLgtltHEADgt...ltSCRIPT TYPE"text/javascript"gt
function showAlert(userName )
window.alert("Hello there, " userName "!")
lt/SCRIPTgt...lt/HEADgtltBODYgt...ltA HREF
"next.htm" onClick "showAlert(Joe) return
false"gtClick here.lt/Agt...lt/BODYgtlt/HTMLgt
Parameter passing
7
Modifying the Example Once More
ltHTMLgtltHEADgtltSCRIPT TYPE "text/javascript" gt
function showAlert(userName) window.alert(Hell
o there, userName!") lt/SCRIPTgtlt/HEADgt
ltFORM onSubmit showAlert(getName.first.value)
NAMEgetNamegt ltPgtFirst, please enter your first
nameltINPUT TYPEtext NAMEfirst SIZE15gt
ltCENTERgt ltINPUT TYPEsubmit VALUE "Submit
Information"gt lt/CENTERgtlt/FORMgt lt/BODYgtlt/HTMLgt
Try It
Parameter passing
8
Identifying Parameters in a Form
ltFORM onSubmit showAlert(getName.first.valu
e) NAMEgetNamegt ltPgtFirst, please enter your
first nameltINPUT TYPEtext NAMEfirst SIZE15gt