Week 13 slides

Download Report

Transcript Week 13 slides 

Forms and Java script
Forms
• The graphical user interface
-textbox, radio, button, textarea, checkbox…
• The processing script
– CGI scripts, Perl script, PHP
Creating a form
Creating a form
<form method="post" action="http://www.cookwood.com//cgibin/display_results.pl">
<hr />
Please share any suggestions or comments with us:
<textarea name="comments" rows="3" cols="65" wrap="wrap">
Comments? </textarea>
<hr />
<input type="submit" value="Order Bed" name="submit" />
<input type="reset" value="Start Over" name="startover" />
</form>
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 equal to submit had a
VALUE equal to Order Bed
Creating an email form
<form method="post" enctype="text/plain"
action="mailto:[email protected]">
<hr />
Please share any suggestions or comments with us:
<textarea name="comments" rows="3" cols="65" wrap="wrap">
Comments? </textarea>
<hr />
<input type="submit" value="Order Bed" name="submit" />
<input type="reset" value="Start Over" name="startover" />
</form>
Creating GUI component
• Textbox:
<input type=“text” name=“name” size
=“20” />
• Radio button
<input type=“radio” name=“size” value=“K”
/> King
<input type=“radio” name=“size” value=“Q”
/> Queen
Creating GUI component
• Creating checkboxes
<input type=“checkbox” name=“extras”
value=“foot” /> Foodboard
<input type=“checkbox” name=“extras”
value=“drawers” /> Drawers
Adding hidden field to a form
• <input type=“hidden” name=“name”
value=“value” />
• Why do we need hidden fields?
– To keep the status of the program
– To transfer data between different forms
Java scripts
• Two types of scripts:
– Automatically executed
– Event-driven
Automatic script
• Example: Adding date and time to the
web site
Automatic script
<script type="text/javascript" language="javascript"
src="time.js"> </script>
time.js:
document.write("<p align='right'>
<i>"+Date()+"<\/i>")
Alert box
Code
<input type="button" value="Open Alert
Box"
onClick='alert("Welcome to our first alert
box. Press OK to contine.")'>
</form>
Practice
1. Open Textpad and cut & paste this code
<html> <head>
<title> Java script page /title>
</head>
<body>
<!– Please insert your HTML code here -->
</body>
</html>
And save it as script.html
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
Creating a button that Executes a
script
Code
<button type="button" name="time"
onclick="alert('Today is '+Date())"
style="font:24px 'Helvetica','Arial',sansserif;
background:yellow;color:red;padding:4p
x"> What time is it? </button>
Changing an Image when a visitor
points
Changing an Image when a visitor
points
Changing an Image when a visitor
points
Code
"Have you ever been in Wisconsin?". See the beautiful
picture, please point to it to see how long it will last.
<a href="fall1.jpg"
onmouseover="document.season.src='winter.jpg'"
onmouseout="document.season.src='springsnow.jpg'
">
<img src="fall1.jpg" name="season" width="700"
height="500" alt="Season" /> </a>
Controlling a New Windows’s
size
An FBI agent must go undercover in the
Miss United States beauty pageant to
prevent a group from bombing the event.
<a
href="javascript:location='index.html';
window.open('http://www.mymovies.net/
player/player.asp?url=/film/fid503/trailer
s/trid418/wm/bb.asx&filmid=503','Traile
r','heigth=150, width=150,
scrollbars=yes')"> Sandra Bullock </a>
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 myString=“How are you”
If/then statement
if (condition) {
statement[s] if true
}
If (condition) {
statement if true
} else {
statement if false
}
Repeat loops
for ([init expression];[condition];[update
expression]) {
statements inside loop
}
Example:
for (var i=startValue; i< maxValue; i++) {
statements inside loop
}
Function
function functionName([parameters]) {
statements
}
Example
Code
<script language="javascript">
var newWindow
function makeNewWindow() {
newWindow =
window.open("","","HEIGHT=300,WIDTH=300")
}
function closeNewWindow() {
if (newWindow) {
newWindow.close()
}
}
</script>
Code
<form>
<INPUT TYPE="button" value ="Create a
new window"
onClick="makeNewWindow()">
<input type="button" value ="Close a new
window"
onClick="closeNewWindow()">
</form>
Practice
1. Open Textpad and cut & paste this code
<html> <head>
<title> Java script page /title>
</head>
<body>
<!– Please insert your HTML code here -->
</body>
</html>
And save it as script.html
Practice
2. Use google search engine to download 3
pictures (let’s 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