Programming in HTML5 with JavaScript and CSS3: Access and Secure Data

Answers

This section contains the solutions to the thought experiments and answers to the objective review questions in this chapter.

Objective 3.1: Thought experiment

You’ve already seen how to get access to the DOM and modify elements through JavaScript. By using these techniques, you can get a reference to the input controls on the form and, based on user input in certain elements, this can trigger modification to the validation rules (for example, change the regular expression validation dynamically). You can get regional context about a user from the Geolocation API. From this you can derive what part of the world the user is in and apply the exact validation on the input controls.

Objective 3.1: Review

1. Correct answer: C

   1. Incorrect: A radio button is suited for allowing a single selection.
   2. Incorrect: A text area is suited for a multi-line text box.
   3. Correct: Check boxes allow multiple selections.
   4. Incorrect: A radio button doesn’t allow more than one selection.

2. Correct answer: D

   1. Incorrect: A text box allows data entry but is plainly visible.
   2. Incorrect: A text area allows data entry but is plainly visible.
   3. Incorrect: url is a type of text box with special validation rules.
   4. Correct: A password input type hides the characters being entered.

3. Correct answer: B

   1. Incorrect: A button is generic and must have an event handler to perform custom logic.
   2. Correct: The submit button invokes the forms submit action.
   3. Incorrect: The reset button clears all input fields on the form.
   4. Incorrect: A radio button is used for a selection list.

4. Correct answer: C

   1. Incorrect: You can do this with a custom event, but that’s more work than necessary.
   2. Incorrect: The goal is to validate the data before submitting the form.
   3. Correct: The required attribute ensures that a field contains a value before being submitted.
   4. Incorrect: A label would be informative but doesn’t guarantee that all the required fields are populated before submitting.

Objective 3.2: Thought experiment

The safest approach to restricting input data is to restrict the characters that a user can enter into a specific field. If a field is designed to accept only numeric data, ensure that the validation on that input control will allow only numeric data. The same is true for dates, text, and any other input that a user can freely type into. Regular expressions simplify this type of validation by verifying that only the expected characters are entered. If a text box is expecting a person’s name, don’t allow HTML characters such as the < or > symbols to be input into the field. Also, restrict the field length so that it matches the type of the data expected. A field expecting the age of a person doesn’t need to be 500 characters; you can probably get away with allowing only 3 characters.

Objective 3.2: Review

1. Correct answer: A

   1. Correct: The $ sign denotes the end of the string.
   2. Incorrect: The % sign doesn’t denote the end of the string.
   3. Incorrect: The ^ character denotes the start of the string.
   4. Incorrect: The & character doesn’t denote the end of the string.

2. Correct answer: D

   1. Incorrect: Allows scripts to run
   2. Incorrect: Only allows content from the same origin
   3. Incorrect: Allows forms
   4. Correct: Allows content from the containing HTML document
   5. Incorrect: Not a valid option

3. Correct answer: D

   1. Incorrect: Credentials aren’t passed with the open method.
   2. Incorrect: Credentials aren’t passed with the request method.
   3. Incorrect: Ready state is a property that indicates the current state of the connection.
   4. Correct: Credentials are passed only if the server requests them with a return code 401.

Objective 3.3: Thought experiment

The task assigned here to build a scroll across the top of the page is seen in many websites today. A stock price ticker is a typical application of this. This solution would potentially incorporate different technologies. At its core, you can implement the XMLHttpRequest object to make a call to an API that provides stock data. When the data is retrieved, you can display in the browser. Because the solution calls for not posting the entire page, you would need to use dynamic DOM manipulation to display the results and have them scroll across the top of the page. Because the quotes must be updated regularly, you would likely include the use of a timer to poll for the results at a regular interval.

Objective 3.3: Review

1. Correct answer: D

   1. Incorrect: A JSON string isn’t just a comma-separated list.
   2. Incorrect: A JSON string isn’t a list delimited by semi-colons.
   3. Incorrect: A JSON string isn’t a list delimited by semi-colons.
   4. Correct: A JSON string is a series of name/value pairs where the name of the property is followed by a colon and a quoted string. Multiple name value pairs are comma separated.

2. Correct answer: C

   1. Incorrect: Response doesn’t provide any direct information.
   2. Incorrect: responseBody provides the result in binary format.
   3. Correct: responseText provides the result as text that’s human readable.
   4. Incorrect: responseXML isn’t a valid property.

3. Correct answer: D

   1. Incorrect: Credentials aren’t passed with the open method.
   2. Incorrect: Credentials aren’t passed with the request method.
   3. Incorrect: Ready state is a property that indicates the current state of the connection.
   4. Correct: Credentials are passed only if the server requests them with a return code 401.

Objective 3.4: Thought experiment

In this application, you now need to know when users finish entering information into a field. You can use the onblur event for this. By hooking up onblur to the email field, you can use the XMLHttpRequest object to send a request to the server to validate that the address is unique and hasn’t been used before. The results of the data evaluation on the server are passed back in the response and can be used to highlight to users that the data isn’t unique. This provides a much better user experience in that users don’t need to wait until they fill out the entire form to have all the fields validated. Did you remember to encode the data before submitting it to the server to prevent an injection attack?

Objective 3.4: Review

1. Correct answer: C

   1. Incorrect: This isn’t a valid method on the JSON object.
   2. Incorrect: This method is used to serialize an object into a JSON string.
   3. Correct: This method is used to deserialize a JSON string into an object.
   4. Incorrect: This isn’t a valid method on the JSON object.

2. Correct answer: D

   1. Incorrect: ‘binary’ isn’t a valid option for the responseType.
   2. Incorrect: ‘image/jpg’ isn’t a valid option for the responseType.
   3. Incorrect: type isn’t a valid property name on the response object.
   4. Correct: The response object’s responseType property must be set to ‘blob’.

3. Correct answer: B

   1. Incorrect: A submit button submits the entire form to the server by default.
   2. Correct: Handling the submit event on the form allows you to intercept the form before submitting and perform custom actions with it.
   3. Incorrect: The action attribute indicates what server-side page the form should submit.
   4. Incorrect: All elements on the form should have a name to use jQuery to serialize them. However, this has no effect on form submission.