© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C6 Slide 1
Chapter 6
How to get input and display output
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C6 Slide 2
Objectives
Applied
Use the prompt or confirm methods to get input from the user.
Use radio buttons, check boxes, select lists, and text areas to get input from the user and to display output to the user.
Use a span tag to display output to the user.
Attach event handlers to the events of a control.
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C6 Slide 3
Objectives (continued)
Knowledge
Describe the function of the prompt and confirm methods.
Describe the function of the focus and blur methods of form controls.
Describe the function of the following events of form controls: focus, blur, click, dblclick, change, select.
Describe the function of the firstChild property of a span element and the nodeValue property of a Text node object.
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C6 Slide 4
Syntax of the prompt method prompt( message, defaultValue );
Return values of the prompt method null // if the user clicks Cancel a string // if the user clicks OK
How to call the prompt method when expecting string data var username = prompt("Please enter your name:");
How to call the prompt method when expecting numerical data var age = parseInt( prompt("Please enter your age:", "18") ); var wage = parseFloat( prompt("Please enter the hourly wage", "5.35") );
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C6 Slide 5
A dialog box displayed by the prompt method
How to determine if the user clicked "Cancel" var age = prompt("Please enter your age:"); if ( age == null ) { alert("You clicked cancel."); }
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C6 Slide 6
Syntax of the confirm method confirm( message );
Return values of the confirm method true // if the user clicks OK false // if the user clicks Cancel
How to call the confirm method var response = confirm("Do you agree to the web site privacy policy?"); if (response) { alert("Thank you. You may continue to the web store."); }
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C6 Slide 7
A dialog box displayed by the confirm method
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C6 Slide 8
Two properties of a Radio object checked value
XHTML code for two radio buttons <p>Accept or decline the web site privacy policy:</p> <p><input type="radio" name="policy" id="policy_accept" value="accept" />Accept</p> <p><input type="radio" name="policy" id="policy_decline" value="decline" />Decline</p>
The XHTML in a web browser
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C6 Slide 9
The $ function that gets an element by its ID var $ = function (id) { return document.getElementById(id); }
JavaScript code to process the radio buttons var status = "unknown"; if ( $("policy_accept").checked ) { status = $("policy_accept").value; } if ( $("policy_decline").checked ) { status = $("policy_decline").value; }
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C6 Slide 10
Two properties of a Checkbox object checked value
XHTML code for a check box <p> <input type="checkbox" id="accept" /> I accept the web site privacy policy. </p>
The XHTML in a web browser
JavaScript code to process the check box var accept = $("accept").checked; if ( accept ) { alert("Thank you. You may continue to the web store."); }
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C6 Slide 11
One property of a Select object value
XHTML code for a select list <p>Select your preferred contact method: <select id="contact"> <optgroup label="Method"> <option value="phone">Phone</option> <option value="email">E-Mail</option> <option value="txtmsg">Text Message</option> </optgroup> </select> </p>
The XHTML in a web browser
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C6 Slide 12
JavaScript code to process the list var contact = $("contact").value; if ( contact == "phone" ) { alert("Preferred contact method: Phone"); }
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C6 Slide 13
One property of a Textarea object value
XHTML code for a text area <p><textarea name="comment" id="comment" rows="5" cols="40"></textarea></p>
The XHTML in a web browser
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C6 Slide 14
JavaScript code to process the text area var comment = $("comment").value; if ( comment == "" ) { alert("Please enter a comment."); } else { alert("Comment: " + comment); }
Terms hard return
soft return
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C6 Slide 15
One property of a span element firstChild
One property of a Text node object nodeValue
XHTML code for a span element <p>Today is <span id="date_output"> </span>.</p>
JavaScript code to use a span element $("dateOutput").firstChild.nodeValue = "5/28/2009";
The XHTML in a web browser
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C6 Slide 16
XHTML code for two radio buttons <p><input type="radio" name="policy" disabled="disabled" id="policy_accept" value="accept" />Accept</p> <p><input type="radio" name="policy" disabled="disabled" id="policy_decline" value="decline" checked="checked" />Decline</p> <p><input type="button" id="toggle" value="Toggle" /></p>
The XHTML in a web browser
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C6 Slide 17
JavaScript code to set the radio button state var toggleClick = function () { if ( $("policy_accept").checked ) { $("policy_decline").checked = true; } else { $("policy_accept").checked = true; } } window.onload = function () { $("toggle").onclick = toggleClick; }
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C6 Slide 18
XHTML code for a check box <p><input type="checkbox" disabled="disabled" name="voteStatus" id="vote_status" /> You can vote when checked.</p>
The XHTML in a web browser
JavaScript code to set the state of the check box $("vote_status").checked = false; var age = prompt("Please enter your age:"); if ( age == null ) { alert("You clicked cancel."); } else { age = parseInt(age); if ( age >= 18 ) { $("voteStatus").checked = true; } }
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C6 Slide 19
XHTML code for three checkboxes and a text area <p><input type="checkbox" name="privacy" id="privacy" /> Privacy Policy</p> <p><input type="checkbox" name="use" id="use" /> Acceptable Use Policy</p> <p><input type="checkbox" name="license" id="license" /> End User License Agreement</p> <textarea name="policies" id="policies" rows="6" cols="40"></textarea>
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C6 Slide 20
The XHTML in a web browser
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C6 Slide 21
JavaScript code for the text area var updatePolicies = function () { var privacy = $("privacy").checked; var use = $("use").checked; var license = $("license").checked; var message = "You haven't agreed to any policies."; if ( privacy || use || license ) { message = "You agreed to these policies:\n\n"; if ( privacy ) { message += "- Privacy Policy\n"; } if ( use ) { message += "- Acceptable Use Policy\n"; } if ( license ) { message += "- End User License Agreement\n"; } } $("policies").value = message; }
window.onload = function () { $("privacy").onclick = updatePolicies; $("use").onclick = updatePolicies; $("license").onclick = updatePolicies; updatePolicies(); }
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C6 Slide 22
Fun In Class Assignment
Enhance the Pizza Ordering form to include three radio buttons in the pizza choice area: Meat, Veggie, Custom
If the Meat button is selected, then pepperoni should be selected and the veggies disabled.
If the Veggie button is selected, then the veggies shoould be selected and the pepperoni disabled.
If the Custom is selected, then all check boxes should be available to be checked.