Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Week 13 slides
Document related concepts
no text concepts found
Transcript
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
