COMPUTER S
Chapter 7 JavaScript Forms

Chapter 7 JavaScript Forms - COM 330 Intermediate Hypertext...

Info icon This preview shows pages 1–8. Sign up to view the full content.

Chapter 7 JavaScript Forms 1 COM 330 Intermediate Hypertext Markup Language
Image of page 1

Info icon This preview has intentionally blurred sections. Sign up to view the full version.

2 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, … JavaScript form events properties: name, type, value, … methods: blur(), focus(), click(), … event handlers: onBlur(), onFocus(), onChange(), onClick(), … advanced features & techniques windows & frames, timeouts, cookies
Image of page 2
Event-driven programs 3 in C++, programs are serially executed start with main function, execute sequentially from first statement may loop or skip sections of code, but the program proceeds step- by-step the programmer specifies the sequence in which execution occurs (with some variability due to input values) there is a beginning and an end to program execution computation within a Web page is rarely serial instead, the page reacts to events such as mouse clicks, buttons, … much of JavaScript's utility is in specifying actions that are to occur in the page as a result of some event the programmer may have little or no control over when code will (if ever) be executed, e.g., code that reacts to a button click there is no set sequence, the page waits for events and reacts
Image of page 3

Info icon This preview has intentionally blurred sections. Sign up to view the full version.

OnLoad & OnUnload 4 the simplest events are when the page is loaded or unloaded the ONLOAD attribute of the BODY tag specifies JavaScript code that is automatically executed when the page is loaded the ONUNLOAD attribute similarly specifies JavaScript code that is automatically executed when the browser leaves the page <html> <!-- Dave Reed form01.html 2/10/04 --> <head> <title>Hello/Goodbye page</title> <script type="text/javascript"> function Hello() { globalName=prompt("Welcome to my page. " + "What is your name?",""); } function Goodbye() { alert("So long, " + globalName + " come back real soon."); } </script> </head> <body onLoad="Hello();" onUnload="Goodbye();" > Whatever text appears in the page. </body> </html>
Image of page 4
HTML forms 5 most event-handling in JavaScript is associated with form elements an HTML form is a collection of elements for handling input, output, and events in a page <form name="FormName"> </form> form elements include: for input: button , selection list, radio button, check box, password, … for input/output: text box , text area , … we will revisit forms when we consider CGI programming a form groups together elements, whose contents are submitted as one
Image of page 5

Info icon This preview has intentionally blurred sections. Sign up to view the full version.

Button element 6 the simplest form element is a button analogous to a real-world button, can click to trigger events <input type="button" value="LABEL" onClick="JAVASCRIPT_CODE" /> <html> <!-- Dave Reed form02.html 2/10/04 --> <head> <title> Fun with Buttons</title> <script type="text/javascript" src=" "> </script> </head> <body> <form name="ButtonForm"> <input type="button" value="Click for Lucky Number" onClick="num = RandomInt(1, 100); alert('The lucky number for the day is ' + num);" /> </form> </body> </html> view page in brow ser
Image of page 6
Buttons & functions 7 <html> <!-- Dave Reed form03.html 2/10/04 --> <head>
Image of page 7

Info icon This preview has intentionally blurred sections. Sign up to view the full version.

Image of page 8
This is the end of the preview. Sign up to access the rest of the document.
  • Summer '16
  • Java Script Coding, Text box, Widgets, input type=, Clipboard, Dave Reed

{[ snackBarMessage ]}

What students are saying

  • Left Quote Icon

    As a current student on this bumpy collegiate pathway, I stumbled upon Course Hero, where I can find study resources for nearly all my courses, get online help from tutors 24/7, and even share my old projects, papers, and lecture notes with other students.

    Student Picture

    Kiran Temple University Fox School of Business ‘17, Course Hero Intern

  • Left Quote Icon

    I cannot even describe how much Course Hero helped me this summer. It’s truly become something I can always rely on and help me. In the end, I was not only able to survive summer classes, but I was able to thrive thanks to Course Hero.

    Student Picture

    Dana University of Pennsylvania ‘17, Course Hero Intern

  • Left Quote Icon

    The ability to access any university’s resources through Course Hero proved invaluable in my case. I was behind on Tulane coursework and actually used UCLA’s materials to help me move forward and get everything together on time.

    Student Picture

    Jill Tulane University ‘16, Course Hero Intern