JAVASCRIPT AND FORMS Introduction to JavaScript and Forms - PowerPoint PPT Presentation

CS380 1 JAVASCRIPT AND FORMS Introduction to JavaScript and Forms

Announcements 2 ¨ Some of the files were missing from /home/martin/ Assignment4. They are available now. ¨ Some of the pages have pointers to validate code on cs.washington.edu, which do not work. Change these to validate from w3. ¨ For Assignment 3, the files in info.txt have only three lines instead of the promised 4. The fourth line is supposed to be the number of review. Just make up a number. CS380

Announcements (2) 3 ¨ The page for the Final Project has been updated. A template for the proposal and an example proposal is available there. CS380

Code to validate html from w3 4 <p> <a href="http://validator.w3.org/check?uri=referer"> <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" height="31" width="88" /> </a> </p> Some of the examples have pointers to cs.washington.edu, which do not work. CS380

Standup 5 Discuss questions with your Scrum Team CS380

Quiz 6 Write HTML that will produce: 1. Why use client-side programming? 2. Write HTML and JavaScript to open an alert box 3. when you click: Change the text color on when clicked 4. using: function changeButton() { � var button = document.getElementById("output"); � button.style.color = "red"; � } CS380

And the answer is … 7 CS380

Quiz (Answers) 8 <label><input type="radio" name="cc" value="visa” 1. checked="checked" /> Visa</label> <label><input type="radio" name="cc" value=”mc" /> MC</label> ¤ Slide 17 1) Faster UI 2) Quick changes 3) Input actions 1. Slide 24 ¤ <button onclick="alert('button clicked');">click me</button> 2. Slides 36, 37, 38 ¤ <button id="output" onclick="changeButton();">click me</button> 3. Slide 43 ¤ CS380

Form Basics 9 CSC 210

Web Data 10 ¨ Most interesting web pages revolve around data ¤ examples: Google, IMDB, Digg, Facebook, YouTube, Rotten Tomatoes ¤ can take many formats: text, HTML, XML, multimedia ¨ Many of them allow us to access their data ¨ Some even allow us to submit our own new data ¨ Most server-side web programs accept parameters that guide their execution CSC 210

Reading/writing an entire file 11 URL?name=value&name=value... ¡ http://example.com/student_login.php? username=xenia&sid=1234567 ¨ query string : a set of parameters passed from a browser to a web server ¤ often passed by placing name/value pairs at the end of a URL ¨ PHP code on the server can examine and utilize the value of parameters CSC 210

HTML forms 12 ¨ form : a group of UI controls that accepts information from the user and sends the information to a web server ¨ the information is sent to the server as a query string CSC 210

HTML form: <form> 13 <form action="destination URL"> form controls </form> HTML ¡ ¨ required action attribute gives the URL of the page that will process this form's data ¨ when form has been filled out and submitted , its data will be sent to the action's URL CSC 210

Form example 14 <form action="http://www.google.com/search"> <div> Let's search Google: <input name="q" /> <input type="submit" /> </div> </form> ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ HTML ¡ First Paragraph ¨ Wrap the form's controls in a block element such as div CSC 210

Form controls 15 CSC 210

Form controls: <input> 16 <!-- 'q' happens to be the name of Google's required parameter --> <input type="text" name="q" value="Colbert Report" /> <input type="submit" value="Booyah!" /> ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ HTML ¡ ¨ input element is used to create many UI controls ¤ an inline element that MUST be self-closed ¨ name attribute specifies name of query parameter to pass to server CSC 210

Form controls: <input> (cont.) 17 <!-- 'q' happens to be the name of Google's required parameter --> <input type="text" name="q" value="Colbert Report" /> <input type="submit" value="Booyah!" /> ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ HTML ¡ ¨ type can be button, checkbox, file, hidden, password, radio, reset, submit, text, ... ¨ value attribute specifies control's initial text CSC 210

Text fields: <input> 18 <input type="text" size="10" maxlength="8" /> NetID <br /> <input type="password" size="16" /> Password <input type="submit" value="Log In" /> ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ HTML ¡ ¨ input attributes: disabled, maxlength, readonly, size, value ¨ size attribute controls onscreen width of text field ¨ maxlength limits how many characters user is able to type into field CSC 210

Text boxes: <textarea> 19 < textarea rows="4" cols="20"> Type your comments here. </textarea> ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ HTML ¡ ¨ initial text is placed inside textarea tag (optional) ¨ required rows and cols attributes specify height/width in characters ¨ optional read only attribute means text cannot be modified CSC 210

Check boxes: <input> 20 <input type="checkbox" name="lettuce" /> Lettuce <input type="checkbox" name="tomato" checked="checked" /> Tomato <input type="checkbox" name="pickles" /> Pickles ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ HTML ¡ ¨ none, 1, or many checkboxes can be checked at same time CSC 210

Radio buttons: <input> 21 <input type="radio" name="cc" value="visa" checked="checked" /> Visa <input type="radio" name="cc" value="mastercard" /> MasterCard <input type="radio" name="cc" value="amex" /> American Express ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ HTML ¡ ¨ grouped by name attribute (only one can be checked at a time) ¨ must specify a value for each one or else it will be sent as value on CSC 210

Text labels: <label> 22 <label><input type="radio" name="cc" value="visa" checked="checked" /> Visa</label> <label><input type="radio" name="cc" value="mastercard" /> MasterCard</label> <label><input type="radio" name="cc" value="amex" /> American Express</label> ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ HTML ¡ ¨ associates nearby text with control, so you can click text to activate control ¨ can be used with checkboxes or radio buttons ¨ label element can be targeted by CSS style rules CSC 210

Drop down lists: <select>, <option> 23 <select name="favoritecharacter"> <option>Frodo</option> <option>Bilbo</option> <option selected="selected">Gandalf</option> <option>Galandriel</option> </select> ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ HTML ¡ ¨ option element represents each choice ¨ select optional attributes: disabled, multiple, size ¨ optional selected attribute sets which one is initially chosen CSC 210

Using: <select> for lists 24 <select name="favoritecharacter[]" size="3" multiple="multiple"> <option>Frodo</option> <option>Bilbo</option> <option>Gandalf</option> <option>Galandriel</option> <option selected="selected">Aragorn</option> </select> ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ HTML ¡ ¨ optional multiple attribute allows selecting multiple items with shift- or ctrl-click ¨ must declare parameter's name with [] if you allow multiple selections ¨ option tags can be set to be initially selected CSC 210