Agenda l eventdriven programs l l HTML forms
- Slides: 28
Agenda l event-driven programs l l HTML forms & attributes l l l button, text box, text area selection list, radio button, check box, password, hidden, … Java. Script form events l l onload, onunload properties: name, type, value, … methods: blur(), focus(), click(), … event handlers: onblur(), onfocus(), onchange(), onclick(), … advanced features & techniques l windows & frames, timeouts, cookies 2
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> view page </html> ، ﺳﺎﺩﻩ ﺗﺮیﻦ ﺭﺧﺪﺍﺩ ﻫﺎ l ﻭ On. Load ﺭﺧﺪﺍﺩ ﻫﺎی . ﻫﺴﺘﻨﺪ On. Unload ﺩﺭ On. Load ﺧﺎﺻیﺖ l ﺑﻪ کﺪی body ﺑﺮچﺴﺐ ﺍﺷﺎﺭﻩ ﻣی کﻨﺪ کﻪ ﻫﻨگﺎﻡ ﺑﺎﻻ آﻤﺪﻥ ﺻﻔﺤﻪ ﻭﺏ ﺑﻄﻮﺭ ﺧﻮﺩکﺎﺭ ﺍﺟﺮﺍ . ﻣی ﺷﻮﺩ On. Unload ﺧﺎﺻیﺖ l ﺑﻪ body ﺩﺭ ﺑﺮچﺴﺐ کﺪی ﺍﺷﺎﺭﻩ ﻣی کﻨﺪ کﻪ ﻫﻨگﺎﻡ ﺑﺴﺘﻦ ﺻﻔﺤﻪ 4
Button Element. ﺳﺎﺩﻩ ﺗﺮیﻦ ﻋﻨﺼﺮ ﻓﺮﻡ ﺩکﻤﻪ ﺍﺳﺖ l. کﻠیک ﺭﻭی ﺩکﻤﻪ یک ﺭﺧﺪﺍﺩ ﺍﺳﺖ l <input type="button" value="LABEL" l 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> view page </html> 6
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> view page </html> ﺗﺎﺑﻊ ، • ﺑﺮﺍی کﺎﺭﻫﺎی پیچیﺪﻩ ﺗﺮ ﻣﻮﺭﺩ ﻧﻈﺮ ﺭﺍ ﺑﻨﻮیﺴیﺪ ﻭ ﺑﻪ ﺭﺧﺪﺍﺩ . ﺩکﻤﻪ ﻭﺻﻞ کﻨیﺪ onclick 7
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 9
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> </html> ﻣی ﺗﻮﺍﻥ ﺑﻪ ﺗﺎﺑﻊ window. open . آﺮگﻮﻣﺎﻥ ﻓﺮﺳﺘﺎﺩ آﺮگﻮﻣﺎﻥ ﺍﻭﻝ ﺭﺍ ﻣﺸﺨﺺ HREF. ﻣی کﻨﺪ آﺮگﻮﻣﺎﻥ ﺩﻭﻡ ﻧﺎﻡ ﺩﺍﺧﻠی ﺭﺍ ﻣﺸﺨﺺ ﻣی . کﻨﺪ آﺮگﻮﻣﺎﻥ ﺳﻮﻡ ﺧﻮﺍﺹ پﻨﺠﺮﻩ ﺭﺍ ﺗﻌییﻦ ﻣی . کﻨﺪ view page 10
Text Boxes. ﺟﻌﺒﻪ ﻣﺘﻦ ﺑﺮﺍی گﺮﻓﺘﻦ ﻭﺭﻭﺩی ﺍﺯ کﺎﺭﺑﺮ ﺍﺳﺘﻔﺎﺩﻩ ﻣی ﺷﻮﺩ l. ﻭﺭﻭﺩی کﺎﺭﺑﺮ ﺩﺭ ﺻﻔﺤﻪ ﺑﺎﻗی ﻣی ﻣﺎﻧﺪ ﻭ ﻗﺎﺑﻞ ﺗﻐییﺮ ﺍﺳﺖ prompt ﺑﺮﺧﻼﻑ l <input type="text" id=“BOX NAME” name="BOX_NAME"… /> : پﺎﺭﺍﻣﺘﺮﻫﺎ پﻬﻨﺎی ﺟﻌﺒﻪ ﺑﺮ ﺣﺴﺐ کﺎﺭﺍکﺘﺮ : ﺍﻧﺪﺍﺯﻩ ﻣﺘﻦ پیﺶ ﻓﺮﺽ : ﻣﻘﺪﺍﺭ <html> <!– COMP 519 form 06. html 13. 10. 2006 --> <head> <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> l l l page 11
Read/Write Text Boxes ﻣی ﺗﻮﺍﻥ ﻣﺤﺘﻮﺍی ﺟﻌﺒﻪ ﻣﺘﻦ ﺭﺍ ﺗﻮﺳﻂ ﺩﺳﺘﻮﺭ ﺍﻧﺘﺼﺎﺏ ﻧیﺰ ﺗﻐییﺮ l. ﺩﺍﺩ ﺍگﺮ ﻣی. ﻣﺤﺘﻮﺍی ﻣﺘﻦ ﺳﺎﺩﻩ ﻭﺧﺎﻡ ﺍﺳﺖ ﻭ ﺍﺯ ﻧﻮﻉ ﺭﺷﺘﻪ ﺍﺳﺖ : ﻧکﺘﻪ parse. Int ﻭ parse. Float ﺧﻮﺍﻫیﺪ ﺑﺼﻮﺭﺕ ﻋﺪﺩ ﺍﺳﺘﻔﺎﺩﻩ ﺷﻮﺩ ﺍﺯ <html> <!– COMP 519 form 07. html 13. 10. 2006 -->. ﺍﺳﺘﻔﺎﺩﻩ کﻨیﺪ l <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> view page </html> 12
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> ﺭﺧﺪﺍﺩ l ﻭﻗﺘی onchange آﺘﺶ ﻣی ﺷﻮﺩ کﻪ . ﻣﺘﻦ ﺗﻐییﺮ کﻨﺪ onfocus ﺭﺧﺪﺍﺩ l ﻭﻗﺘی آﺘﺶ ﻣی ﺷﻮﺩ کﻪ ﻣﺎﻭﺱ ﺭﻭی . ﻣﺘﻦ کﻠیک کﻨﺪ ،blur() ﺗﺎﺑﻊ l ﺭﺍ ﺧﺎﻣﻮﺵ focus . ﻣی کﻨﺪ 13
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 </html> page 15
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> 17
Java. Script & Timeouts ﺭﺍ ﻣی ﺗﻮﺍﻥ ﺟﻬﺖ ﺍﺟﺮﺍی کﺪ ﺩﺭ ﺯﻣﺎﻥ ﻫﺎی ﺑﻌﺪی set. Timeout ﺗﺎﺑﻊ l. ﺍﺳﺘﻔﺎﺩﻩ ﻧﻤﻮﺩ 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 18
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 19
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(); } 21
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> view page </html> 22
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> view page </html> 24
Monte. PI 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; ﻳک ﺗﻮﻟﻴﺪ کﻨﻨﺪﻩ 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 } } ﺑﺎ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺑﺎﻓﺮ paint ﺻﻔﺤﻪ ﺭﺍ ﺩﻭﺑﺎﺭﻩ ﺭﺳﻢ ﻣی . کﻨﺪ public void paint(Graphics g) { g. draw. Image(off. Screen. Image, 0, 0, null); } 26
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> here, HTML button controls the applet (via Java. Script) <p> </p> <form name="Monte. Form"> <input type="button" value="Generate points" onclick="document. Monte. Applet. draw. Dots(500) ; “ /> </form> </div> </body> view page </html> 27
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> view page </html> 28
Overview of software engineering
Agenda sistemica y agenda institucional
Doctype html html head
Canvas доска
12.html?title=
код страницы html
Head body html
Html forms attributes
Weak and strong forms
Am not contracted form
Why are related forms more agreeable than unrelated forms
Why are related forms more agreeable than unrelated forms?
Why are related forms more agreeable than unrelated forms
System and application software
Designing marketing programs
Casey fink survey
Programs that organize analyze and graph numerical data
Community health education outreach programs
Nfpa 1600
Obero spm
"synergy private label"
Prolog language
Ndsu sponsored programs
Wa state apprenticeship programs
Machine level representation of programs
Pediatric clinical nurse specialist programs
Designing and developing effective hrd programs
Rater error training programs include
Navy international program office
