CIT 171 Chapter 6 Review

Given that toppings is a selection list element that allows multiple selections in a web form, what statement about this JavaScript code is true? let orderForm = document.forms.orderForm; let toppings = orderForm.elements.toppings; let selectedTop = new Array(); for (let i = 0; i < toppings.options.length; i++) { if (toppings.options[i].selected) { selectedTop.push(toppings.options[i]); } }

It creates an array containing all the options for toppings that the user has selected.

Which of the following actions occurs first within the browser upon the activation of a submit button?

The field values are checked for invalid data.

In what situation would you apply the JavaScript blur() method to a web form element?

You want to remove the focus from that element without assigning the focus elsewhere.

Suppose a user has just entered letters into a web form field referenced as account whose data type was set to "number." Which JavaScript expression will return a Boolean true when applied to this form field?

account.validity.typeMismatch

While examining a web form and the JavaScript source code for it, you notice that a function that changes the text displayed in one part of the page is being executed every time you type or delete a letter or number in a text entry field labeled "Message," instead of when you press the Tab key to move to the next form field. You correctly guess that _____.

an event listener for the input event is attached to the form element labeled "Message"

In JavaScript, an individual option from a selection list _____.

can be referenced by its index value within the HTML options collection of the selection list

The Constraint Validation API _____.

consists of properties and methods built into JavaScript

You have written JavaScript code that assigns a reference to a selection list on your web form to the variable crustStyle. If you need to retrieve the number of choices available to the user within the crustStyle selection list, you should use the _____.

crustStyle.length property

Which JavaScript expression would you use to retrieve the value of an input box named message where the user of the bouquetReqForm web form can type a brief note to include with a flower bouquet?

document.bouquetReqForm.message.value

Given that the options for a set of radio buttons within the customOrder web form share the name attribute color, you can reference the first option with the JavaScript expression _____.

document.forms.customOrder.elements.color[0]

Suppose you would like to call a method on a web form within a web page containing several web forms. It is the second form listed in the HTML file and has the name attribute specs and the id specsEntry. How can you reference this form in JavaScript?

document.forms.specs

Suppose you have an input element called deliveryLocation within your orderForm web form. To set a default value for this input box in JavaScript, you could use the statement _____.

document.orderForm.deliveryLocation.defaultValue = "Front door";

Suppose you are writing an anonymous JavaScript function that will run when your web page loads, and you want to include a statement that will cause a selection list in a web form to become active and ready for data entry. Which method should you apply in this statement?

element.focus()

Suppose the pattern attribute has been set to equal the regular expression ^\d{5}5$ within the <input> tag for the accountNo field in a web form. This regular expression matches a text string of exactly five digits. What can you insert in the blank in the following JavaScript function to display a custom error message when the user enters something other than five digits, then tries to submit the form? let submitButton = document.getElementById("submitButton"); submitButton.addEventListener("click", validateAccount); function validateAccount() { let acc = document.getElementbyId("accountNo"); if (acc.validity.valueMissing) { acc.setCustomValidity("Please enter your account number"); } _____ { acc.setCustomValidity("Account numbers have five digits"); } else { acc.setCustomValidity(""); } }

else if (acc.validity.patternMismatch)

Suppose you have a required email field in your web form, but do not want the user's browser to display its built-in warning messages if the user attempts to submit the form without completing this field. You prefer to write your own JavaScript code to validate this field and take action when it is invalid. What can you place in the blank in the following command block in order to achieve this, assuming you've already assigned the variable email to a reference to this field? _____ { evt.preventDeFault(); commands; // Error handling code });

email.addEventListener("invalid", function (evt)

Suppose you are examining the script for the orderForm web form, whose submit button has the id submitButton. The form includes option buttons for choosing a pizza sauce flavor. The following JavaScript code included in the script will check for a sauce selection when the user clicks the submit button and display a custom error message if a sauce was not chosen. ​ let submitButton = document.getElementById("submitButton"); submitButton.addEventListener("click", validateSauce); function validateSauce() { let sauce = document.forms.orderForm.elements.sauceType[0]; if (sauce.validity.valueMissing) { sauce.setCustomValidity(""); } else { sauce.setCustomValidity("Choose a sauce, please"); } }

false

The JavaScript reset() method is typically applied to an individual field in a web form to indicate that an invalid value has been entered.

false

The Luhn algorithm is classified as a checksum algorithm, which is a set of instructions used to rearrange numbers or items in a list based on certain criteria.

false

When an invalid event occurs, you can use the validity property to detect it and the checkValidity() method to determine the specific cause.

false

If form is a reference to a web form, then to reference an element whose name attribute value is name, you would use the JavaScript expression _____.

form.elements.name

Given that the options for a set of radio buttons within the customOrder web form share the name attribute color, you can store the value of the color option selected by the user in the colorValue variable by executing the JavaScript statement _____.

let colorValue = document.querySelector('input[name="color"]:checked').value;

Imagine that you are working on a web form. After writing the JavaScript statement let pinNo = document.getElementById("pinNo"); what statement can you add to assign a Boolean value of true to isValid if the value in the pinNo field is matched by the regular expression /^\d{4}$/ or assign a value of false to isValid if it isn't?

let isValid = /^\d{4}$/.test(pinNo.value); ​

What JavaScript statements should you place in the blank in order to retrieve the value of the user's selection from the sauceFlavor drop-down menu in your web form and assign it to the sauceValue variable? let orderForm = document.forms.orderForm; let sauceFlavor = orderForm.elements.sauceFlavor;

let sauceIndex = sauceFlavor.selectedIndex; let sauceValue = sauceFlavor.options[sauceIndex].value;

Suppose your web form uses radio buttons to allow the user to choose a tee-shirt size of small, medium, or large. These options share the name attribute shirtSize and have the ids size_0, size_1, and size_2. What JavaScript statements should you use to retrieve the text that appears beside the small shirt size button on the page?

let smallShirt = document.getElementById("size_0"); let smallDesc = smallShirt.labels[0].textContent;

Assume that crustStyle is a selection list element in a web form for which you are writing JavaScript code. What statement can you add to the following to run the updateOrder function each time the user changes their crust style selection? let orderForm = document.forms.orderForm; let crustStyle = orderForm.elements.crustStyle;

orderForm.elements.crustStyle.onchange = updateOrder;

Suppose you are working on a web form that contains the following hidden field: <input type="hidden" id="sauceName" name="sauceName" /> Which JavaScript statement should you add to the following code to store the name of the sauce flavor selected by the user as data in this hidden field? let orderForm = document.forms.orderForm; let sauceFlavor = orderForm.elements.sauceFlavor; let sauceIndex = sauceFlavor.selectedIndex;

orderForm.elements.sauceName.value = orderForm.elements.sauceFlavor.options[sauceIndex].text;

What does the following JavaScript code do when the web page loads? window.addEventListener("load", function() { let survey = document.forms.survey; let lastName = orderForm.elements.lastName; lastName.focus(); });

places a cursor in the lastName input box of the survey form

Suppose you want to return a string showing the numeric value stored in the variable price reformatted as U.S. dollars (with two decimal places and a dollar sign at the front). Which statement would accomplish this?

price.toLocaleString("en-US", {style: "currency", currency: "USD"})

What should you place in the blank to ensure that the user completes this field by entering a numeric value before submitting the form? <input name="memberNo" id="memberNo" _____ />

required type="number"

If the variable amountDue has the numeric value 2.2199834, then the JavaScript statement amountDue.toFixed(2); _____.

returns the string "2.22"

When creating a website for international audiences, you should make your web page layouts flexible because _____.

text translations may contain more or fewer words than the original, and some languages are read from right to left

A web form includes two selection lists for choosing the user's birthday: one list for month and another for day of the month. The first entry in each list ("Month" or "Day") is a placeholder and therefore an invalid selection. You can use the JavaScript selectedIndex property to determine whether these fields are valid when the user attempts to submit the form.

true

Maximizing client-side validation of the data entered into a web form, which is performed by the user's computer, is encouraged because this reduces web server load.

true

The following JavaScript code will display the message "Please enter your name!" instead of the browser's native error message when executed in response to a user trying to submit a web form without entering text in the lastName field, which has the required attribute.let lastName = document.getElementById("lastName");lastName.setCustomValidity("Please enter your name!");

true

To disable the built-in validation tools provided by your users' browsers when they interact with your "Get a Quote" web form, you can apply the statement document.forms.quoteReqForm.noValidate = true; in your JavaScript file; add the attribute novalidate to the <form> tag in your HTML file; or add the attribute formnovalidate to the tag for the form's submit button in your HTML file.

true

When applying the toLocaleString() method, you can include useGroup: true as an optional parameter to indicate that a thousands grouping symbol should be used to format a number.

true

When the userName field of the login web form contains invalid data entered by the user, both of the following JavaScript commands will return false:Command 1: document.forms.login.elements.userName.checkValidity()Command 2: document.forms.login.checkValidity()

true

You can apply the preventDefault() method to the event object that is captured by an invalid event listener in order to prevent the default browser actions associated with that invalid event when it occurs.

true

You can use a CSS style rule to highlight fields in a web form that contain invalid data in order to call the user's attention to them.

true

You can submit a web form requesting a quote without validating its contents or causing a submit event by _____.

using the document.forms.quoteReqForm.submit() method

A web form that allows users to select one of three pizza crust choices from a drop-down menu _____.

would be organized as a hierarchy that includes an element with three options as its children to represent this part of the form

To format a number stored in the variable x using the local standards for displaying numeric values on a user's computer, you can use the JavaScript statement _____.

x.toLocaleString();

A web form includes a field with the id numberGuests into which the user is instructed to enter a number between 20 and 200. If the checkValidity() method returns false when called on this field, _____.

you should check the values of the validity.rangeOverflow, validity.rangeUnderflow, and validity.typeMismatch properties for the field to determine why it is invalid