Embed Size (px)
Citation preview
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//cgi-bin/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',sans-serif; background:yellow;color:red;padding:4px"> 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/trailers/trid418/wm/bb.asx&filmid=503','Trailer','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: nullCreate a variable:
var myVar = 45var 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 newWindowfunction 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
