Eventdriven programs and HTML form elements eventdriven programs

  • Slides: 27
Download presentation
Event-driven programs and HTML form elements § event-driven programs onload, onunload § HTML forms

Event-driven programs and HTML form elements § event-driven programs onload, onunload § HTML forms & attributes button, text box, text area selection list, radio button, check box, password, hidden, … § Java. Script form events properties: name, type, value, … methods: blur(), focus(), click(), … event handlers: onblur(), onfocus(), onchange(), onclick(), … § advanced features & techniques windows & frames, timeouts, cookies

On. Load & On. Unload <html> <!–- COMP 519 form 01. html 12. 10.

On. Load & On. Unload <html> <!–- COMP 519 form 01. html 12. 10. 2006 --> <head> <title>Hello/Goodbye page</title> <script type="text/javascript"> function Hello() { global. Name=prompt("Welcome to my page. " + "What is your name? ", ""); } function Goodbye() { alert("So long, " + global. Name + " come back real soon. "); } </script> </head> <body onload="Hello(); " onunload="Goodbye(); "> Whatever text appears in the page. </body> </html> view page ، • ﺳﺎﺩﻩ ﺗﺮیﻦ ﺭﺧﺪﺍﺩ ﻫﺎ ﻭ On. Load ﺭﺧﺪﺍﺩ ﻫﺎی . ﻫﺴﺘﻨﺪ On. Unload ﺩﺭ On. Load § ﺧﺎﺻیﺖ ﺑﻪ کﺪی body ﺑﺮچﺴپ ﺍﺷﺎﺭﻩ ﻣی کﻨﺪ کﻪ ﻫﻨگﺎﻡ ﺑﺎﻻ آﻤﺪﻥ ﺻﻔﺤﻪ ﻭﺏ ﺑﻄﻮﺭ . ﺧﻮﺩکﺎﺭ ﺍﺟﺮﺍ ﻣی ﺷﻮﺩ ﺩﺭ On. Unload § ﺧﺎﺻیﺖ ﺑﻪ کﺪی body ﺑﺮچﺴپ ﺍﺷﺎﺭﻩ ﻣی کﻨﺪ کﻪ ﻫﻨگﺎﻡ ﺑﺴﺘﻦ ﺻﻔﺤﻪ ﻭﺏ ﺑﻄﻮﺭ . ﺧﻮﺩکﺎﺭ ﺍﺟﺮﺍ ﻣی ﺷﻮﺩ

Button Element. • ﺳﺎﺩﻩ ﺗﺮیﻦ ﻋﻨﺼﺮ ﻓﺮﻡ ﺩکﻤﻪ ﺍﺳﺖ . § کﻠیک ﺭﻭی ﺩکﻤﻪ

Button Element. • ﺳﺎﺩﻩ ﺗﺮیﻦ ﻋﻨﺼﺮ ﻓﺮﻡ ﺩکﻤﻪ ﺍﺳﺖ . § کﻠیک ﺭﻭی ﺩکﻤﻪ یک ﺭﺧﺪﺍﺩ ﺍﺳﺖ <input type="button" value="LABEL" onclick="JAVASCRIPT_CODE"/> <html> <!–- COMP 519 form 02. html 12. 10. 2006 --> <head> <title> Fun with Buttons</title> <script type="text/javascript" src="http: //www. csc. liv. ac. uk/~martin/teaching/comp 519/JS/random. js"> </script> </head> <body> <form name="Button. Form"> <input type="button" value="Click for Lucky Number" onclick=“var num = Random. Int(1, 100); alert('The lucky number for the day is ' + num); " /> </form> </body> </html> view page •

Buttons & Functions <html> <!–- COMP 519 form 03. html 13. 10. 2006 -->

Buttons & Functions <html> <!–- COMP 519 form 03. html 13. 10. 2006 --> <head> <title>Fun with Buttons</title> <script type="text/javascript"> function Greeting() // Results: displays a time-sensitive greeting { var now = new Date(); if (now. get. Hours() < 12) { alert("Good morning"); } else if (now. get. Hours() < 18) { alert("Good afternoon"); } else { alert("Good evening"); } } </script> </head> <body> <form name="Button. Form"> <input type="button" value="Click for Greeting" onclick="Greeting(); " /> </form> </body> </html> ﺗﺎﺑﻊ ، • ﺑﺮﺍی کﺎﺭﻫﺎی پیچیﺪﻩ ﺗﺮ ﻣﻮﺭﺩ ﻧﻈﺮ ﺭﺍ ﺑﻨﻮیﺴیﺪ ﻭ ﺑﻪ ﺭﺧﺪﺍﺩ . ﺩکﻤﻪ ﻭﺻﻞ کﻨیﺪ onclick view page

Window Example <html> <!– COMP 519 form 04. html 13. 10. 2006 --> <head>

Window Example <html> <!– COMP 519 form 04. html 13. 10. 2006 --> <head> <title> Fun with Buttons </title> <script type="text/javascript"> function Help() // Results: displays a help message in a separate window { var Output. Window = window. open(); Output. Window. document. write("This might be a context-" + "sensitive help message, depending on the " + "application and state of the page. "); Output. Window. document. close(); } </script> </head> <body> <form name="Button. Form"> <input type="button" value="Click for Help" onclick="Help(); " /> </form> </body> </html> view page

Window Example Refined <html> <!– COMP 519 form 05. html 13. 10. 2006 -->

Window Example Refined <html> <!– COMP 519 form 05. html 13. 10. 2006 --> <head> <title> Fun with Buttons </title> <script type="text/javascript"> function Help() // Results: displays a help message in a separate window { var Output. Window = window. open("", "status=0, menubar=0, height=200, width=200"); Output. Window. document. open(); Output. Window. document. write("This might be a context-" + "sensitive help message, depending on the " + "application and state of the page. "); Output. Window. document. close(); } </script> </head> <body> <form name="Button. Form"> <input type="button" value="Click for Help" onclick="Help(); " /> </form> </body> view </html> ﻣی ﺗﻮﺍﻥ ﺑﻪ ﺗﺎﺑﻊ window. open . آﺮگﻮﻣﺎﻥ ﻓﺮﺳﺘﺎﺩ آﺮگﻮﻣﺎﻥ ﺍﻭﻝ ﺭﺍ ﻣﺸﺨﺺ HREF. ﻣی کﻨﺪ آﺮگﻮﻣﺎﻥ ﺩﻭﻡ ﻧﺎﻡ ﺩﺍﺧﻠی ﺭﺍ ﻣﺸﺨﺺ ﻣی . کﻨﺪ آﺮگﻮﻣﺎﻥ ﺳﻮﻡ ﺧﻮﺍﺹ پﻨﺠﺮﻩ ﺭﺍ ﺗﻌییﻦ ﻣی . کﻨﺪ page

Text Boxes. • ﺟﻌﺒﻪ ﻣﺘﻦ ﺑﺮﺍی گﺮﻓﺘﻦ ﻭﺭﻭﺩی ﺍﺯ کﺎﺭﺑﺮ ﺍﺳﺘﻔﺎﺩﻩ ﻣی ﺷﻮﺩ .

Text Boxes. • ﺟﻌﺒﻪ ﻣﺘﻦ ﺑﺮﺍی گﺮﻓﺘﻦ ﻭﺭﻭﺩی ﺍﺯ کﺎﺭﺑﺮ ﺍﺳﺘﻔﺎﺩﻩ ﻣی ﺷﻮﺩ . ﻭﺭﻭﺩی کﺎﺭﺑﺮ ﺩﺭ ﺻﻔﺤﻪ ﺑﺎﻗی ﻣی ﻣﺎﻧﺪ ﻭ ﻗﺎﺑﻞ ﺗﻐییﺮ ﺍﺳﺖ prompt § ﺑﺮﺧﻼﻑ <input type="text" id=“BOX NAME” name="BOX_NAME"… /> : § پﺎﺭﺍﻣﺘﺮﻫﺎ پﻬﻨﺎی ﺟﻌﺒﻪ ﺑﺮ ﺣﺴﺐ کﺎﺭﺍکﺘﺮ : ﺍﻧﺪﺍﺯﻩ ﻣﺘﻦ پیﺶ ﻓﺮﺽ : ﻣﻘﺪﺍﺭ <html> <!– COMP 519 <head> form 06. html 13. 10. 2006 --> <title> Fun with Text Boxes </title> </head> <body> <form name="Box. Form"> Enter your name here: <input type="text" name="user. Name" size=“ 12” value="" /> <input type="button" value="Click Me" onclick="alert('Thanks, ' + document. Box. Form. user. Name. value + ', I needed that. '); " /> </form> </body> view </html> page

Read/Write Text Boxes. • ﻣی ﺗﻮﺍﻥ ﻣﺤﺘﻮﺍی ﺟﻌﺒﻪ ﻣﺘﻦ ﺭﺍ ﺗﻮﺳﻂ ﺩﺳﺘﻮﺭ ﺍﻧﺘﺼﺎﺏ ﻧیﺰ

Read/Write Text Boxes. • ﻣی ﺗﻮﺍﻥ ﻣﺤﺘﻮﺍی ﺟﻌﺒﻪ ﻣﺘﻦ ﺭﺍ ﺗﻮﺳﻂ ﺩﺳﺘﻮﺭ ﺍﻧﺘﺼﺎﺏ ﻧیﺰ ﺗﻐییﺮ ﺩﺍﺩ ﺍگﺮ ﻣی ﺧﻮﺍﻫیﺪ ﺑﺼﻮﺭﺕ ﻋﺪﺩ ﺍﺳﺘﻔﺎﺩﻩ ﺷﻮﺩ. ﻣﺤﺘﻮﺍ ﻣﺘﻦ ﺳﺎﺩﻩ ﻭﺧﺎﻡ ﺍﺳﺖ ﻭ ﺍﺯ ﻧﻮﻉ ﺭﺷﺘﻪ ﺍﺳﺖ : § ﻧکﺘﻪ . ﺍﺳﺘﻔﺎﺩﻩ کﻨیﺪ parse. Int ﻭ parse. Float ﺍﺯ <html> <!– COMP 519 form 07. html 13. 10. 2006 --> <head> <title> Fun with Text Boxes </title> </head> <body> <form name="Box. Form"> Enter a number here: <input type="text" size=“ 12” name="number" value=“ 2” /> <input type="button" value="Double" onclick="document. Box. Form. number. value= parse. Float(document. Box. Form. number. value) * 2; " /> </form> </body> </html> view page

Text Box Events <html> <!– COMP 519 form 08. html 13. 10. 2006 -->

Text Box Events <html> <!– COMP 519 form 08. html 13. 10. 2006 --> <head> <title> Fun with Text Boxes </title> <script type="text/javascript"> function Fahr. To. Celsius(temp. In. Fahr) // Assumes: temp. In. Fahr is a number (degrees Fahrenheit) // Returns: corresponding temperature in degrees Celsius { return (5/9)*(temp. In. Fahr - 32); } </script> </head> <body> <form name="Box. Form"> Temperature in Fahrenheit: <input type="text" name="Fahr" size=“ 10” value=“ 0" onchange="document. Box. Form. Celsius. value = Fahr. To. Celsius(parse. Float(document. Box. Form. Fahr. value)); " />   <tt>----></tt>   <input type="text" name="Celsius" size=“ 10” value="" onfocus="blur(); " /> in Celsius </form> </body> view page </html> onchange ﺭﺧﺪﺍﺩ ﻭﻗﺘی آﺘﺶ ﻣی ﺷﻮﺩ کﻪ ﻣﺘﻦ . ﺗﻐییﺮ کﻨﺪ onfocus ﺭﺧﺪﺍﺩ ﻭﻗﺘی آﺘﺶ ﻣی ﺷﻮﺩ کﻪ ﻣﺎﻭﺱ ﺭﻭی ﻣﺘﻦ کﻠیک . کﻨﺪ ،blur() ﺗﺎﺑﻊ ﺭﺍ ﺧﺎﻣﻮﺵ focus. ﻣی کﻨﺪ

Validation Example <html> <!– COMP 519 form 09. html 13. 10. 2006 --> <head>

Validation Example <html> <!– COMP 519 form 09. html 13. 10. 2006 --> <head> <title> Fun with Text Boxes </title> <script type="text/javascript" src="verify. js"> </script> <script type="text/javascript"> function Fahr. To. Celsius(temp. In. Fahr) { return (5/9)*(temp. In. Fahr - 32); } </script> </head> <body> <form name="Box. Form"> Temperature in Fahrenheit: <input type="text" name="Fahr" size=“ 10” value=“ 0” onchange="if (Verify. Num(this)) { // this refers to current element document. Box. Form. Celsius. value = Fahr. To. Celsius(parse. Float(this. value)); }" />   <tt>----></tt>   <input type="text" name="Celsius" size=“ 10” value="" onfocus="blur(); " /> in Celsius </form> </body> view page </html>

TEXTAREA Example <html> <!– COMP 519 form 10. html 12. 10. 2006 --> <head>

TEXTAREA Example <html> <!– COMP 519 form 10. html 12. 10. 2006 --> <head> <title> Fun with Textareas </title> <script type="text/javascript" src="verify. js"> </script> <script type="text/javascript"> function Table(low, high, power) {// Results: displays table of numbers between low & high, raised to power var message = "i: i^" + power + "n-------n"; for (var i = low; i <= high; i++) { message = message + i + ": " + Math. pow(i, power) + "n"; } document. Area. Form. Output. value = message; } </script> </head> <body> <form name="Area. Form"> <div style="text-align: center; "> Show the numbers from <input type="text" name="low. Range" size=“ 4” value=“ 1” onchange="Verify. Int(this); " /> to <input type="text" name="high. Range" size=“ 4” value=“ 10” onchange="Verify. Int(this); " /> raised to the power of <input type="text" name="power" size=3 value=2 onchange="Verify. Int(this); " /> <input type="button" value="Generate Table" on. Click="Table(parse. Float(document. Area. Form. low. Range. value), parse. Float(document. Area. Form. high. Range. value), parse. Float(document. Area. Form. power. value)); " /> <textarea name="Output" rows=“ 20” cols=“ 15”></textarea> </div> </form> </body> view page </html>

Java. Script & Timeouts. ﺭﺍ ﻣی ﺗﻮﺍﻥ ﺟﻬﺖ ﺍﺟﺮﺍی کﺪ ﺩﺭ ﺯﻣﺎﻥ ﻫﺎی ﺑﻌﺪی

Java. Script & Timeouts. ﺭﺍ ﻣی ﺗﻮﺍﻥ ﺟﻬﺖ ﺍﺟﺮﺍی کﺪ ﺩﺭ ﺯﻣﺎﻥ ﻫﺎی ﺑﻌﺪی ﺍﺳﺘﻔﺎﺩﻩ ﻧﻤﻮﺩ set. Timeout • ﺗﺎﺑﻊ set. Timeout(Java. Script. Code. To. Be. Executed, Milliseconds. Until. Execution) <html> <!– COMP 519 form 13. html 13. 10. 2006 --> <head> <title> Fun with Timeouts </title> <script type="text/javascript"> function Move() // Results: sets the current page contents to be newhome. html { self. location. href = "form 10. htm"; } </script> </head> <body onload="set. Timeout('Move()', 3000); "> This page has moved to <a href=“form 10. htm">newhome. html</a>. </body> </html> view page

Another Timeout Example <html> <!–- COMP 519 form 14. html 14. 10. 2007 -->

Another Timeout Example <html> <!–- COMP 519 form 14. html 14. 10. 2007 --> <head> <title> Fun with Timeouts </title> <script type="text/javascript"> a=1000; function time. Since() // Assumes: document. Count. Form. countdown exists in the page // Results: every second, recursively writes current countdown in the box { a--; document. Count. Form. countdown. value=a; set. Timeout("time. Since(); ", 1000); } </script> </head> <body onload="time. Since(); "> <form name="Count. Form"> <div style="text-align: center; "> Countdown to Graduation 2007 <textarea name="countdown" rows=“ 4” cols=“ 15” style="font-family: Courier; " onfocus="blur(); "></textarea> </div> </form> </body> </html> view page

cookie. js function get. Cookie(Attribute) // Assumes: Attribute is a string // Results: gets

cookie. js function get. Cookie(Attribute) // Assumes: Attribute is a string // Results: gets the value stored under the Attribute { if (document. cookie. index. Of(Attribute+"=") == -1) { return ""; } else { var begin = document. cookie. index. Of(Attribute+"=") + Attribute. length+1; var end = document. cookie. index. Of("; ", begin); if (end == -1) end = document. cookie. length; return unescape(document. cookie. substring(begin, end)); } } function set. Cookie(Attribute, Value) // Assumes: Attribute is a string // Results: stores Value under the name Attribute, expires in 30 days { var Expire. Date = new Date(); Expire. Date. set. Time(Expire. Date. get. Time() + (30*24*3600*1000)); document. cookie = Attribute + "=" + escape(Value) + "; expires=" + Expire. Date. to. GMTString(); } function del. Cookie(Attribute) // Assumes: Attribute is a string // Results: removes the cookie value under the name Attribute { var now = new Date(); document. cookie = Attribute + "=; expires=" + now. to. GMTString(); }

Cookie Example <html> <!– COMP 519 form 15. html 13. 10. 2006 --> <head>

Cookie Example <html> <!– COMP 519 form 15. html 13. 10. 2006 --> <head> <title> Fun with Cookies </title> <script type="text/javascript" src="http: //www. csc. liv. ac. uk/~martin/teaching/comp 519/JS/cookie. js"> </script> <script type="text/javascript"> function Greeting() // Results: displays greeting using cookie { visit. Count = get. Cookie("visits"); if (visit. Count == "") { alert("Welcome to my page, newbie. "); set. Cookie("visits", 1); } else { visit. Count = parse. Float(visit. Count)+1; alert("Welcome back for visit #" + visit. Count); set. Cookie("visits", visit. Count); } } </script> </head> <body onload="Greeting(); "> Here is the stuff in my page. <form name="Clear. Form"> <div style="text-align: center; "> <input type="button" value="Clear Cookie" onclick="del. Cookie('visits'); " /> </div> </form> </body> </html> view page

Calling Java Routines from Java. Script. ﻭ ﺍپﺮﺍ ﺍﺟﺎﺯﻩ ﺩﺳﺘﺮﺳﻲ ﻣﺴﺘﻘﻴﻢ ﺑﻪ ﺭﻭﺗﻴﻨﻬﺎﻱ ﺟﺎﻭﺍ

Calling Java Routines from Java. Script. ﻭ ﺍپﺮﺍ ﺍﺟﺎﺯﻩ ﺩﺳﺘﺮﺳﻲ ﻣﺴﺘﻘﻴﻢ ﺑﻪ ﺭﻭﺗﻴﻨﻬﺎﻱ ﺟﺎﻭﺍ ﺭﺍ ﻣﻲ ﺩﻫﻨﺪ Netscape • . • ﻳﺎﻳﺪ ﺍﺳﻢ کﺎﻣﻞ ﺭﻭﺗﻴﻦ ﺭﺍ ﻣﺸﺨﺺ کﻨﻴﺪ . ﺍﺯ ﺍﻳﻦ ﺧﺎﺻﻴﺖ پﺸﺘﻴﺒﺎﻧﻲ ﻧکﻨﺪ IE • ﻣﻤکﻦ ﺍﺳﺖ <html> <!-- COMP 519 java. html 18. 08. 2006 --> <!-- Note: works in Netscape/Firefox only. -> <head> <title>Java+Java. Script Demo</title> </head> <body> <script type=“text/javascript"> document. write(java. lang. Math. random()); </script> </body> </html> view page

import java. awt. *; import java. applet. *; import java. util. Random; public class

import java. awt. *; import java. applet. *; import java. util. Random; public class Monte 6 extends Applet { private static Random randy; private int SIZE; private Image off. Screen. Image; private Graphics off. Screen. Graphics; Monte. PI ﻳک ﺗﻮﻟﻴﺪ کﻨﻨﺪﻩ init ﺍﻋﺪﺍﺩ ﺗﺼﺎﺩﻓﻲ ﺍﻳﺠﺎﺩ ﻣﻲ کﻨﺪ . ﻭ ﺍﻧﺪﺍﺯﻩ ﺍپﻠﺖ ﺭﺍ ﻣﻲ ﺧﻮﺍﻧﺪ private int random. In. Range(int low, int high) {…} private double distance(int x 1, int y 1, int x 2, int y 2) {…} public void init() { randy = new Random(); Dimension dim = get. Size(); SIZE = dim. width; } draw. Circle(); ﻧﻘﺎﻁ ﺭﺍ draw. Dots ﺩﺍﺧﻞ ﺻﻔﺤﻪ ﺭﺳﻢ ﻣی کﻨﺪ . ﻭ ﺩﺭ ﺑﺎﻓﺮ ﻣی ﺭیﺰﺩ public void draw. Circle() { // DRAWS CIRCLE ON BOTH get. Graphics() AND // off. Screen. Graphics } public void draw. Dots(int num. Points) { // DRAWS num. Points RANDOM DOTS ON BOTH get. Graphics() // AND off. Screen. Graphics } } public void paint(Graphics g) { g. draw. Image(off. Screen. Image , 0, 0, null); } ﺑﺎ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺑﺎﻓﺮ paint ﺻﻔﺤﻪ ﺭﺍ ﺩﻭﺑﺎﺭﻩ ﺭﺳﻢ ﻣی . کﻨﺪ

Monte. PI (cont. ) <html> <!–- COMP 519 Monte 6. html 22. 10. 2007

Monte. PI (cont. ) <html> <!–- COMP 519 Monte 6. html 22. 10. 2007 --> <head> <title>Monte Carlo Darts Page</title> <script type=“text/css”> body { background-color: gray; } </script> </head> <body> <div style="text-align: center; "> <applet code="Monte 6. class" name=" Monte. Applet" height=“ 300” width=“ 300”> You must use a Java-enabled browser to view this applet. </applet> <p> </p> <form name="Monte. Form"> <input type="button" value="Generate points" onclick="document. Monte. Applet. draw. Dots(500); “ /> </form> </div> </body> </html> here, HTML button controls the applet (via Java. Script) view page

Example (cont. ) <html> <!–- COM 519 Monte 6 a. html 22. 10. 2007

Example (cont. ) <html> <!–- COM 519 Monte 6 a. html 22. 10. 2007 --> <head> <title>Monte Carlo Darts Page</title> <style type=“text/css”> body { background-color: gray; } </style> </head> : یک ﻭﺍﺳﻂ ﺑﻬﺘﺮ <body style=“background-color: gray; "> <div style="text-align: center; "> <applet code="Monte 6. class" name="Monte. Applet" height=“ 300” width=“ 300”> You must use a Java-enabled browser to view this applet. </applet> <p> </p> <form name="Monte. Form"> <input type="button" value="Generate" on. Click="num. Dots = parse. Float(document. Monte. Form. num. Points. value ); document. Monte. Applet. draw. Dots(num. Dots ); “ /> <input type="text" name=" num. Points" size=“ 6” value=“ 500” /> points <p> </p> <input type="button" value="Clear the screen" onclick="document. Monte. Applet. draw. Circle (); “ /> </form> </div> </body> </html> view page ﻣی ﺗﻮﺍﻥ ﺑﻪ کﺎﺭﺑﺮ ﺍﺟﺎﺯﻩ ﺩﺍﺩ کﻪ ﺗﻌﺪﺍﺩ ﻧﻘﺎﻁ ﺭﺍ . ﻣﺸﺨﺺ کﻨﺪ