murach’s javascript, c6© 2009, mike murach & associates, inc.slide 1

© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C6 Slide 1

Chapter 6

How to get input and display output


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.


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.


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") );


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."); }


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."); }


A dialog box displayed by the confirm method


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


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; }


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>


JavaScript code to process the check box var accept = $("accept").checked; if ( accept ) { alert("Thank you. You may continue to the web store."); }


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>



JavaScript code to process the list var contact = $("contact").value; if ( contact == "phone" ) { alert("Preferred contact method: Phone"); }


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>



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


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";



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>



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; }


XHTML code for a check box <p><input type="checkbox" disabled="disabled" name="voteStatus" id="vote_status" /> You can vote when checked.</p>


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; } }


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>


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(); }


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.

murach’s javascript, c6© 2009, mike murach & associates, inc.slide 1

Documents

murachs javascript

mike murach associates

meat button

veggie button

pizza choice area

pizza ordering form

veggies shoould

radio buttons