70-480 Programming in HTML5 with JavaScript and CSS3

Page 1   
Question 1

You are developing an HTML5 web application and are styling text.
You need to use the text-transform CSS property.
Which values are valid for the text-transform property?

  • A. hidden
  • B. blink
  • C. capitalize
  • D. line-through


Answer : C

Explanation: CSS Syntax text-transform: none|capitalize|uppercase|lowercase|initial|inherit; Example Transform text in different elements: h1 {text-transform:uppercase;} h2 {text-transform:capitalize;} p {text-transform:lowercase;} Reference: CSS text-transform Property http://www.w3schools.com/cssref/pr_text_text-transform.asp

Question 2

You are developing a customer web form that includes the following HTML.
<input id="txtValue" type="text" />
A customer must enter a valid age in the text box prior to submitting the form.
You need to add validation to the control.
Which code segment should you use?


  • A. Option A
  • B. Option B
  • C. Option C
  • D. Option D


Answer : D

Explanation: val Return value A string containing the value of the element, or an array of strings if the element can have multiple values

Question 3

You are developing an HTML5 application for a company. You apply the following style to a
DIV element on a page.


You need to submit a draft illustration of the results of this code.
Which illustration should you submit? (To answer, select the appropriate illustration in the
answer area.)



Answer :

Explanation:

Example: div { border: 3px solid; background: #b6aaaa; width: 200px; height: 100px; top 10%; left 10%; border-radius: 25px 0px 25px 0px; } Result:

Question 4

You are developing an application that uses a third-party JavaScript library named
doWork().
The library occasionally throws an "object is null or undefined" error with an error code of
-2146823281.
The application must:
✑ Extract and handle the exceptions thrown by doWork()
✑ Continue normal program execution if other exceptions occur
You need to implement the requirements.
Which code segment should you use?


  • A. Option A
  • B. Option B
  • C. Option C
  • D. Option D


Answer : C

Explanation: * The try statement lets you test a block of code for errors. The catch statement lets you handle the error. The JavaScript statements try and catch come in pairs: try { Block of code to try } catch(err) { Block of code to handle errors } * object.number [= errorNumber] Returns or sets the numeric value associated with a specific error. The Error object's default property is number. * Example: The following example causes an exception to be thrown and displays the error code that is derived from the error number. try { // Cause an error. var x = y; } catch(e) { document.write ("Error Code: "); document.write (e.number & 0xFFFF) document.write ("<br />"); document.write ("Facility Code: ") document.write(e.number>>16 & 0x1FFF) document.write ("<br />"); document.write ("Error Message: ") document.write (e.message) } The output of this code is as follows. Error Code: 5009 Facility Code: 10 Error Message: 'y' is undefined Reference: JavaScript Errors - Throw and Try to Catch; number Property (Error) (JavaScript)

Question 5

You are developing an online shopping application that accepts credit cards for payment.
If the credit card number is invalid, the application must:
Generate an error
Assign "200" to the error number
Assign "Invalid" to the error description
You need to write the code that meets the requirements.
How should you write the code? (To answer, drag the appropriate code segment or
segments to the correct location in the answer area. Each code segment may be used
once, more than once, or not at all. You may need to drag the split bar between panes or
scroll to view content.)




Answer :

Explanation: Example: throw new Error(200, "x equals zero");

Question 6

You are developing a web page by using HTML5 and C5S3. The page includes a <div> tag
with the ID set to validate.
When the page is rendered, the contents of the <div> tag appear on a line separate from
the content above and below it. The rendered page resembles the following graphic.


The page must be rendered so that the <div> tag is not forced to be separate from the
other content. The following graphic shows the correctly rendered output.

You need to ensure that the page is rendered to meet the requirement.
Which line of code should you use?

  • A. document.getElementById("validate").style.display = "inline";
  • B. document.getElementById("validate").style.margin = "0";
  • C. document.getElementById("validate").style.padding = "0";
  • D. document.getElementSyId("validate").style.display = "block";


Answer : A

Explanation: * display: value; value: inline Default value. Displays an element as an inline element (like <span>) * Example Display <p> elements as inline elements: p.inline { display: inline; } Reference: CSS display Property http://www.w3schools.com/cssref/pr_class_display.asp

Question 7

You are troubleshooting a web page that includes the following code. (Line numbers are
included for reference only.)


What is displayed in the alert from line 11?

  • A. Div
  • B. Function
  • C. Button
  • D. Document


Answer : C

Explanation: * The event handler here normalizes event object (passed as a first argument) and invokes handleCellClick in a proper context (i.e. referring to an element that was attached event listener to). The element is the button elButton. * addEventListener Syntax: element.addEventListener(event, function, useCapture) Reference: HTML DOM addEventListener() Method

Question 8

You are developing an HTML5 web application that displays the current temperature
whenever a button is clicked. The following code provides this functionality.


When the temperature is loaded, the status property on the loader instance does not
change.
You need to ensure that the status property on the loader instance is updated when the
temperature is loaded.
Which code segment should you use to replace the Loader function?

  • A. Option A
  • B. Option B
  • C. Option C
  • D. Option D


Answer : A

Explanation: Incorrect: not D: window.status property The status property sets the text in the status bar at the bottom of the browser, or returns the previously set text.

Question 9

You are developing a form that captures a user's email address by using HTML5 and
jQuery.
The form must capture the email address and return it as a query string parameter. The
query string parameter must display the @ symbol used in the email address.
You need to implement this functionality.
How should you develop the form? (To answer, select the appropriate options from the
drop-down lists in the answer area.)




Answer :

Explanation:

* serialize() Encode a set of form elements as a string ready for submission. decodeURIComponent * To decode the string, PHP offers the urldecode() function. ? echo urldecode('name%40website.com'); //restores "name@website.com"

Question 10

You are developing a web page that will be accessed from various types of devices.
✑ You have the following requirements:
✑ The appropriate display resolution must be selected dynamically based on the
device that is connecting to the page.
✑ Mobile devices with a maximum width of 480 pixels must be able to use the page.
You need to ensure that the page displays correctly on any device.
How should you build the code? (To answer, drag the appropriate media statement to the
correct location. Each media statement may be used once, more than once, or not at all.
You may need to drag the split bar between panes or scroll to view content.)




Answer :

Explanation:

* The @media rule is used to define different style rules for different media types/devices. CSS Syntax @media not|only mediatype and (media feature) { CSS-Code; } * Media type: Screen Used for computer screens. Incorrect: Not size: there is no media type size.

Question 11

You are developing an application that consumes a Windows Communication Foundation
(WCF) service.
The application interacts with the service by using the following code. (Line numbers are
included for reference only.)


You need to authenticate to the WCF service.
What should you do?

  • A. At line 11, add the following lines of code. ,username: yourusername ,password: yourpassword
  • B. At line 11, add the following line of code. ,credentials: prompt
  • C. At line 06, replace the code with the following line of code. url: "http://contoso.com/Service.svc/GetCountry? Username=username&password=password",
  • D. At line 11, add the following line of code. The username and password will be stored in an XML file. ,credentials: credentials.xml


Answer : C

Question 12

You are developing a page that includes text and an illustration. The web page resembles
the following image.


✑ You have the following requirements:
✑ The illustration must be in the center of the page.
✑ The text must flow around the left, right, top, and bottom of the illustration.
You need to ensure that the layout of the web page meets the requirements.
Which line of code should you use?

  • A. -ms-wrap-flow: both;
  • B. -ms-wrap-flow: clear;
  • C. -ms-wrap-flow: maximum;
  • D. -ms-wrap-flow: auto;


Answer : A

Explanation: -ms-wrap-flow Gets or sets a value that specifies how exclusions impact inline content within block-level elements. Syntax -ms-wrap-flow: auto | both | start | end | maximum | clear both Inline flow content can flow on all sides of the exclusion. Reference: -ms-wrap-flow property http://msdn.microsoft.com/en-us/library/ie/hh673558(v=vs.85).aspx http://dev.w3.org/csswg/css3-exclusions/

Question 13

You are creating an application by using HTML5 and CSS3. The styles for the pages are
derived from five style sheets.
The styles are not being applied correctly to the pages in the application.
You need to apply the styles from highest priority to lowest priority.
In which order should you use the five style sheets? (To answer, move the style sheet
types from the list of style sheet types to the answer area and arrange them in the correct
order.)




Answer :

Explanation:

* From highest priority to lowest priority. User important style sheets Author important style sheets Author normal style sheets User normal style sheets User agent style sheets * CSS declarations are applied in this order (from lowest to highest priority): User agent declarations (the default styles your browser applies to elements) User normal declarations (a user's own stylesheet if they're using one) Author normal declarations (this is your normal stylesheet) Author important declarations (anything your mark important) User important declarations (any important styles from the user's stylesheet)

Question 14

You are developing a web page for runners who register for a race. The page includes a
slider control that allows users to enter their age.
You have the following requirements:
✑ All runners must enter their age.
✑ Applications must not be accepted from runners less than 18 years of age or
greater than 90 years.
✑ The slider control must be set to the average age (37) of all registered runners
when the page is first displayed.
You need to ensure that the slider control meets the requirements.
What should you do? (To answer, drag the appropriate word or number to the correct
location in the answer area. Each word or number may be used once, more than once, or
not at all. You may need to drag the split bar between panes or scroll to view content.)




Answer :

Explanation:

Box 1-3: The <input type="range"> is used for input fields that should contain a value within a range. Example <input type="range" name="points" min="0" max="10"> Box 4-5: Use the value attribute to set the default value Box 6: Definition and Usage The required attribute is a boolean attribute. When present, it specifies that an input field must be filled out before submitting the form. Example Username: <input type="text" name="usrname" required>

Question 15

An HTML page has a canvas element.
You need to draw a red rectangle on the canvas element dynamically. The rectangle
should resemble the following graphic.


How should you build the code segment? (To answer, select the appropriate options from
the drop-down lists in the answer area.)




Answer :

Explanation:

* getElementById The getElementById() method accesses the first element with the specified id. We use it to get a reference to the canvas. * context.fillStyle. Example: Define a red fill-color for the rectangle: JavaScript: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(20,20,150,100);

Page 1