Manual Certification Microsoft HTML5 CSS Javascript

(1)

Item: 1 (Ref:70-480.1.2.6)

You have the following element on a Web page:

<canvas id="mtnlogo" width="320" height="320" /> You want to display the following graphic:

Place the JavaScript code on the left in its correct order on the right.

This question uses Adobe Flash player and Adobe Shockwave player. For this question to display correctly you must be using Internet Explorer with the latest version of Adobe Flash Player and Adobe Shockwave player. Your browser must permit flash files (.swf) to run. You MUST have your screen resolution set to 1024 x 760 to see all the options presented in the question by the Flash player.

(2)

Objective:

Implement and Manipulate Document Structures and Objects

Sub-Objective:

Write code that interacts with UI controls.

References:

MSDN > Home > Inspire > Content Articles > The Developer's Guide to HTML5 Canvas

MSDN > Internet Explorer Development Center > Docs > Internet Explorer API reference > Graphics and media > HTML Canvas > Methods

(3)

You are developing an application that consumes an external web service. The web service provides a method named getLatestHeadline that returns the highest trending news article in real-time. The following are a sample HTTP POST request and response for getLatestHeadline:

POST /NewsService.asmx/getLatestHeadline HTTP/1.1 Host: localhost

Content-Type: application/x-www-form-urlencoded Content-Length: length

HTTP/1.1 200 OK

Content-Type: text/xml; charset=utf-8 Content-Length: length <?xml version="1.0" encoding="utf-8"?> <NewsArticle xmlns="http://verigon-news.com/"> <title>string</title> <byline>string</byline> <body>string</body> </NewsArticle>

You need to make an AJAX web service request using jQuery on a web page. The request must meet the following requirements:

z The article must be displayed in an element with ID breaking-news. z The most recent article must be displayed.

z The web page must wait for the request to complete before performing other actions.

Which JavaScript segment should you use to perform the web service request?

Item: 2 (Ref:70-480.2.4.1)

$.ajax({

dataType: 'xml', type: 'POST',

url: "/NewsService.asmx/getLatestHeadline", success: function (xmlData) {

$('#breaking-news').html( '<header><h1>' + $(xmlData).find('title').text() + '</h1><address>' + $(xmlData).find('byline').text() + '</address></header>' + $(xmlData).find('body').text()); } }); $.ajax({ cache: false, dataType: 'xml', type: 'POST', url: "/NewsService.asmx/getLatestHeadline", success: function (xmlData) {

$('#breaking-news').html(

(4)

Objective:

Implement Program Flow

Sub-Objective:

Implement a callback.

References:

jQuery.com > API Documentation > Ajax > Low-Level Interface > jQuery.ajax() url: "/NewsService.asmx/getLatestHeadline",

success: function (xmlData) { $('#breaking-news').html( '<header><h1>' + $(xmlData).find('title').text() + '</h1><address>' + $(xmlData).find('byline').text() + '</address></header>' + $(xmlData).find('body').text()); } }); $.ajax({ async: false, cache: false, dataType: 'xml', type: 'POST', url: "/NewsService.asmx/getLatestHeadline", success: function (xmlData) {

$('#breaking-news').html( '<header><h1>' + $(xmlData).find('title').text() + '</h1><address>' + $(xmlData).find('byline').text() + '</address></header>' + $(xmlData).find('body').text()); } });

(5)

You are developing a Web page with the following markup:

<form action="/data/add_email" method="post"> <label for="email">Email:</label>

<button id="submit" type="submit" onclick="disableButton(this);">Subscribebutton> <button id="cancel" type="reset">Clearbutton>

form>

You need to implement the disableButton function so that a user can submit the form only once. Which text should you insert to complete the following code? (To answer, type the statement in the textbox.)

function disableButton(btn) { }

Objective:

Sub-Objective:

Raise and handle an event.

References:

MSDN > Internet Explorer Developer Center > Docs > Internet Explorer API reference > HTML/XHTML Reference > Properties > diabled

W3Schools.com > JS & DOM Reference > Submit disabled Property

(6)

You are developing an application that uses a third-party JavaScript library. Library usage must meet the following runtime requirements:

z Some code must execute if an error occurs.

z Some code must execute whether or not an error occurs.

Which sequence of JavaScript statements will meet these requirements?

Objective:

Sub-Objective:

Implement exception handling.

References:

MSDN > Internet Explorer Developer Center > Docs > Internet Explorer API reference > JavaScript Language Reference > JavaScript Reference > JavaScript Statements > try...catch...finally Statement (JavaScript)

Item: 4 (Ref:70-480.2.3.2)

try, debug, catch try, debug, finally try, catch, finally throw, catch, finally

(7)

You are developing web site for digital copies of children's story books. The first paragraph in each article should display as follows:

Which CSS selector should you specify in the style sheet?

Objective:

Use CSS3 in Applications

Sub-Objective:

Structure a CSS file by using CSS selectors.

References:

MSDN Library > Web Development > Internet Explorer > Internet Explorer Conceptual Content > Content Design and Presentation > Understanding CSS Selectors

Item: 5 (Ref:70-480.4.6.1)

article p:first-child:first-letter article p:nth-child(0):first-letter article p:nth-child(1):first-letter article p:first-of-type:first-letter

(8)

You are developing a web site for a graphic design contract firm. The web site contains the following markup: <h2>Example of Alef Regular</h2>

The quick brown fox jumps over the lazy dog. </p>

The markup should be rendered in the same font for all users. Which CSS rule should you use?

Objective:

Sub-Objective:

Style HTML text properties.

References:

MSDN Library > Internet Explorer Developer Center > Docs > Internet Explorer API reference > Cascading Style Sheets > At-rules > @font-face rule

Item: 6 (Ref:70-480.4.1.1)

@charset @font-face @import @media

(9)

You are creating a test preparation site that includes flash cards. The flash card page includes the following markup: <style> #flash { width: 300px; height: 100px; position: relative; perspective: 600px; } .card div { position: absolute; border: 5px solid black; width: 100%; height: 100%; backface-visibility: hidden; }

.card .back { transform: rotateX( 180deg ); } .card:hover { transform: rotateX( 180deg ); } </style>

<div class="front"><h2>Missive</h2></div> <div class="back">

<p>A letter, often official</p>

<p>See <em>epistle</em> or <em>message</em>.</p> </div>

</div> </section>

You need to ensure that the card flips using 3-dimensional animation with a duration of 1 second. Which CSS rule should you add to the style sheet?

Item: 7 (Ref:70-480.4.4.1)

.card { transition: linear; } .card { transition: transform 1s; transform-style: preserve-3d; } .card { width: 100%; height: 100%; position: absolute; transition: linear; } .card { width: 100%; height: 100%; position: absolute; transition: transform 1s; transform-style: preserve-3d;

(10)

References:

MSDN Library > Internet Explorer Developer Center > Docs > Internet Explorer 10 Guide for Developers > CSS > Transitions

MSDN Blogs > IEBlog > CSS3 3D Transforms in IE10 Intro to CSS 3D transforms by David DeSandro > Card Flip

(11)

You are developing a web page with the following markup:

<p>Although there are many planning models available, the fundamental five stages are <span id="dev-stages" style="font-weight: bold; font-size: 14pt;">define, design, deploy, evaluate and refine.</span> During the define stage, the primary activity is known as requirements analysis.</p>

You need to modify the <span> element to display as follows:

Which JavaScript code should you use?

Objective:

Sub-Objective:

Apply styling to HTML elements programmatically.

References:

MSDN Library > Internet Explorer and Web Development > Internet Explorer API Reference > Cascading Style Sheets > Basic Box Model > display

Item: 8 (Ref:70-480.1.3.1)

document.getElementById('dev-stages').style.display = "block"; document.getElementById('dev-stages').style.display = "inline";

document.getElementById('dev-stages').style.display = "inline-block"; document.getElementById('dev-stages').style.display = "none";

(12)

Objective:

Sub-Objective:

Implement HTML5 APIs.

References:

MSDN > Internet Explorer Development Center > Docs > Internet Explorer API reference > Graphics and media >

Item: 9 (Ref:70-480.1.4.5)

You have the following element on a mobile Web page: <div>

You are currently located at

You must display the current latitude and longitude of the user using the HTML5 GeoLocation API. The location must update the position as the user moves.

Place the required JavaScript code on the left in its correct order on the right.

(13)

(14)

You are developing a portal web site. Hyperlinks must display according to the following requirements:

z Only when a user moves over a hyperlink, should an underscore display. z When a user selects a hyperlink, it should display in dark red and bold. z Unvisited hyperlinks must display in dark blue.

z Visited hyperlinks must display in dark magenta.

Which CSS style sheet should you use to meet these requirements?

Objective:

Sub-Objective:

References:

MSDN Library > Web Development > Internet Explorer > Internet Explorer Conceptual Content > Content Design and Presentation > Understanding CSS Selectors

w3schools.com > CSS Advanced > CSS Pseudo-classes

Item: 10 (Ref:70-480.4.6.4)

a:hover {text-decoration: underline;}

a:active {color: darkred; font-weight: bold;} a:link {color: darkblue; text-decoration: none;} a:visited {color: darkmagenta;}

a:active {color: darkred; font-weight: bold;} a:hover {text-decoration: underline;}

a:link {color: darkblue; text-decoration: none;} a:visited {color: darkmagenta;}

a:active {color: darkred; font-weight: bold;} a:hover {text-decoration: underline;}

a:link {color: darkblue; text-decoration: none;} a:visited {color: darkmagenta;}

a:hover {text-decoration: underline;}

a:active {color: darkred; font-weight: bold;}

(15)

You are developing an HTML5 page with the following markup: <input id="chkEmail" type="checkbox" />

You need to display the email textbox only if the checkbox is checked. Which JavaScript code should you use?

Objective:

Sub-Objective:

Apply styling to HTML elements programmatically.

References:

MSDN Library > Internet Explorer and Web Development > Internet Explorer API Reference > Cascading Style Sheets > Basic Box Model > visibility

Item: 11 (Ref:70-480.1.3.2)

var chkEmail = document.getElementById("chkEmail"); var txtEmail = document.getElementById("txtEmail"); if (chkEmail.checked) {

txtEmail.style.visibility = "true"; } else {

txtEmail.style.visibility = "false"; }

txtEmail.style.display = "none"; } else {

txtEmail.style.display = "visible"; }

txtEmail.style.visibility = "visible"; } else {

txtEmail.style.visibility = "hidden"; }

txtEmail.style.display = "true"; } else {

txtEmail.style.visibility = "false"; }

(16)

You are developing an application that that contains an embedded login. A Web page in an inline frame needs to send login credentials to its container page.

With HTML5 Web Messaging, which method should you use to send the login credentials?

Objective:

Sub-Objective:

References:

MSDN > Internet Explorer Developer Center > Docs > Internet Explorer API reference > Web applications > HTML5 Web Messaging

Item: 12 (Ref:70-480.2.4.3)

addEventListener attachEvent postMessage start

(17)

You are reviewing JavaScript code from a colleague. The code includes the following function: function adjustExpectations(input) {

var pattern = /([Uu]n)?expect[^a]/g; return input.match(pattern).toString(); }

You test the function with the following code:

adjustExpectations("Unexpected expectations are expected unexpectedly."); What will be the expected return value?

Objective:

Access and Secure Data

Sub-Objective:

Validate user input by using JavaScript.

References:

MSDN Library > Internet Explorer Developer Center > Docs > Internet Explorer API reference > JavaScript Language Reference > JavaScript Reference > JavaScript Objects > Regular Expression Object (JavaScript) MSDN Library > .NET Framework Regular Expressions > Regular Expression Language Quick Reference

Item: 13 (Ref:70-480.3.2.3)

Unexpect,expect,unexpect Unexpecte,expecte,unexpecte Unexpect,expect,expect,unexpect Unexpecte,expecta,expecte,unexpecte

(18)

You are creating an animation effect using CSS3. The web page contains the following markup: <ul>

<li class="cat">Classics

<ul><li>Aeneid</li><li>Beowulf</li>

<li>Catcher in the Rye</li><li>Odyssey</li></ul> </li>

<li class="cat">Fantasy

<ul><li>Alice's Adventures in Wonderland</li> <li>Dracula</li><li>Lord of the Rings</li></ul> </li>

<li class="cat">Science Fiction <ul><li>Foundation</li>

<li>Hitchhiker's Guide to the Galaxy</li></ul> </li>

</ul>

You want to perform a fade effect while the cursor hovers over a category name. The effect should meet the following requirements:

z The category names must remain visible.

z Elements within sub-lists should not be visible initially.

z The effect should occur once with no delay and last no longer than 5 seconds.

Which CSS should you use in the style sheet?

Objective:

Item: 14 (Ref:70-480.4.4.2)

li.cat { opacity: 0; } li.cat:hover { animation: fade-in 5s; } li.cat ul { opacity: 0; } li.cat:hover ul { animation: fade-in 5s; } li.cat { opacity: 0; } li.cat:hover { animation: fade-in 5s; } @keyframes fade-in { from { opacity: 0;} to { opacity: 1;} } li.cat ul { opacity: 0; } li.cat:hover ul { animation: fade-in 5s; } @keyframes fade-in { from { opacity: 0;} to { opacity: 1;} }

(19)

Sub-Objective:

Create an animated and adaptive UI.

References:

MSDN Library > Internet Explorer Developer Center > Docs > Internet Explorer 10 Guide for Developers > CSS > Animations

(20)

You have the following element on a Web page:

<canvas id="cvsMain" width="500" height="500" /

Which JavaScript code should you use before drawing a simple shape like a rectangle or circle?

Objective:

Sub-Objective:

Write code that interacts with UI controls.

References:

MSDN > Internet Explorer Development Center > Docs > Internet Explorer API reference > Graphics and media > HTML Canvas > Methods

Item: 15 (Ref:70-480.1.2.1)

var ctx = cvs.getContext('cvsMain'); var cvs = document.getElementById('cvsMain'); var cvs = document.getElementById('cvsMain'); var ctx = cvs.getContext('2d'); var cvs = document.getElementById('cvsMain'); var ctx = cvs.getContext('3d');

(21)

You are developing a company portal site using HTML5 and CSS3. The author style sheet includes the following: p.disclaimer {font: normal 8pt "Times New Roman" !important}

The user style sheet includes the following:

p.disclaimer {font: normal 14pt "Arial" !important} How will disclaimer paragraphs render in the client browser?

Objective:

Sub-Objective:

References:

MSDN Library > Web Development > Internet Explorer > Internet Explorer API > Cascading Style Sheets > ! important modifier

W3C Web site > W3C Recommendation > CSS 2.1 > Assigning property values, Cascading, and Inheritance > Cascading Order

Item: 16 (Ref:70-480.4.6.2)

Text content will display in 14-point Arial.

Text content will display in 8-point Times New Roman.

Text content will depend on the default user agent style sheet. Text content will depend on the normal user style declarations.

(22)

You are developing an information blog that contains health-related articles for doctors and patients. You create the paragraph style using the Modify Style dialog box. (Click the Exhibit(s) button.)

How will a paragraph with this style render in a browser?

Item: 17 (Ref:70-480.4.1.3)

(23)

Objective:

Sub-Objective:

Style HTML text properties.

References:

MSDN Library > Internet Explorer Developer Center > Docs > Internet Explorer API reference > Cascading Style Sheets > Text

(24)

You are developing a web application that uses third-party JavaScript libraries. These libraries are loaded using HTML5 Web Workers.

You need to exchange messages using two-way communication between web workers. Which event should you handle?

Objective:

Sub-Objective:

Create a web worker process.

References:

MSDN > Internet Explorer Developer Center > Docs > Internet Explorer 10 Guide for Developers > HTML5 > Web Workers

Item: 18 (Ref:70-480.2.5.2)

onload onmessage onstart ontimeout

(25)

You are reviewing a web application with the following JavaScript code: var ns1 = {

int: 0,

increment: function () {this.int++; }, decrement: function () {this.int--; } } var ns2 = (function () { var int = 0; return { int : int, increment: ns1.increment, decrement: ns1.decrement }; })();

Which of the following JavaScript segments will display the text ns1: 1, ns2: 1 in the console? (Choose all that apply.)

Objective:

Sub-Objective:

Establish the scope of objects and variables.

References:

MSDN Library > MSDN Magazine > Script Junkie > Script Junkie | Namespacing in JavaScript

MSDN Blogs > Canadian Developer Connection > Console.Log: Say Goodbye to JavaScript Alerts for Debugging!

Item: 19 (Ref:70-480.1.5.3)

ns1.increment();

console.log("ns1: %s, ns2: %s", ns1.int, ns2.int); ns2.increment();

ns2.increment();

ns1.increment(); ns2.decrement();

ns2.increment(); ns1.decrement();

(26)

Objective:

Sub-Objective:

References:

Item: 20 (Ref:70-480.2.5.5)

You have a Web application that uses the HTML5 Web Worker API. You are writing code within a Web Worker. Match the JavaScript code on the left with its function on the right.

(27)

You are developing an application that contains the following content in the file account.xml: <?xml version="1.0" encoding="utf-8" ?> <account id='40001'> <credentials> <username>jhester</username> <password>P@$$W0rd</password> </credentials> </account>

A JavaScript file contains the following code: var xmlhttp = new XMLHttpRequest();

xmlhttp.open("GET", "account.xml", false); xmlhttp.send();

var accountInfo = xmlhttp.responseXML; Which expression will reference the value jhester?

Objective:

Sub-Objective:

Consume data.

References:

MSDN Library > Internet Explorer Developer Center > Docs > Internet Explorer API reference > Web applications > XMLHTTPRequest (XHR) and AJAX Support > Objects > XMLHTTPRequest object (Internet Explorer)

Item: 21 (Ref:70-480.3.3.6)

accountInfo.getElementById('40001').credentials

accountInfo.getElementsByTagName('username')[0].nodeValue accountInfo.getElementById('40001').childNodes[1].nodeValue

(28)

You are developing an application sends data to another web page. The data is formatted using the JavaScript code:

var data = encodeURIComponent($('form').serialize());

Which method should you invoke on the other web page to get the original form values?

Objective:

Sub-Objective:

Serialize, deserialize, and transmit data.

References:

jQuery.com > jQuery API > Category: Forms

MSDN Library > Internet Explorer Developer Center > Docs > Internet Explorer API reference > JavaScript Language Reference > JavaScript Reference > JavaScript Objects > Global Object (JavaScript) > decodeURI Function (JavaScript)

MSDN Library > Internet Explorer Developer Center > Docs > Internet Explorer API reference > JavaScript Language Reference > JavaScript Reference > JavaScript Objects > Global Object (JavaScript) >

decodeURIComponent Function (JavaScript)

Item: 22 (Ref:70-480.3.4.6)

decodeURI

decodeURIComponent toJSON

serializeArray

(29)

You develop a contact form for users to submit comments. During testing, you fill out the form as follows:

The form page contains the following JavaScript code: $('form').submit(function () {

$('#output').append($.toJSON($(this).serializeArray())); });

Which of the following is the most likely displayed in the element named input?

Item: 23 (Ref:70-480.3.4.2)

[{"name":"Joshua Hester"},{"email":"[email protected]"},

{"website":"http://www.transcender.com"},{"comment":"I really love this new HTML5 redesign. Nice job, guys!"}]

[{"name":"name","value":"Joshua Hester"},

{"name":"email","value":"[email protected]"},

{"name":"website","value":"http://www.transcender.com"},

{"name":"comment","value":"I really love this new HTML5 redesign. Nice job, guys!"}]

name=Joshua

Hester,[email protected],website=http://www.transcender.com,comment=I really love this new HTML5 redesign. Nice job, guys!

name=Joshua+Hester,email=josh.hester%40kaplan.com,website=http%3A%2F%

2Fwww.transcender.com,comment=I+really+love+this+new+HTML5+redesign.+Nice+job% 2C+guys!

name=Joshua

Hester&[email protected]&website=http://www.transcender.com&comment=I really love this new HTML5 redesign. Nice job, guys!

(30)

Objective:

Sub-Objective:

References:

%5B%7B%22name%22%3A%22name%22%2C%22value%22%3A%22Joshua%20Hester%22%7D%2C%7B% 22name%22%3A%22email%22%2C%22value%22%3A%22josh.hester%40kaplan.com%22%7D%2C%7B% 22name%22%3A%22website%22%2C%22value%22%3A%22http%3A%2F%2Fwww.transcender.com%22% 7D%2C%7B%22name%22%3A%22comment%22%2C%22value%22%3A%y%20love%20this%20new%

20HTML5%20redesign.%20Nice%20job%2C%20guys!%22%7D%5D

(31)

Item: 24 (Ref:70-480.1.6.3)

You have the following JavaScript code defined for an HTML5 Web page: function Product(price, title, desc) {

this .price = Number(price); this .title = title;

this .desc = desc; }

Product.prototype.toString = function () {

return "<h3><span style='float:left'>" + this .title + "</span>\n" + "<span style='float:right'>" + this .price + "</span></h3>\n" + "<p>" + this .desc + "</p>" ; ;

You need to create an object derived from Product that overrides its toString method. The derived object must track a SKU number and current stock, and limit the display of product information only to those products with stock greater than or equal to one.

(32)

Create and implement objects and methods.

References:

MSDN > Internet Explorer Developer Center > Docs > Internet Explorer API references > JavaScript Language Reference > Advanced JavaScript > Prototypes and Prototype Inheritance

MDN > JavaScript > JavaScript Guide > Inheritance revisited

(33)

You are developing an application that will invoke a remote Windows Communication Foundation (WCF) service. The service requires arguments using JSON.

The service is invoked by submitting arguments from a standard HTML form using POST. Which JavaScript methods should you use? (Choose all that apply).

Objective:

Sub-Objective:

References:

Item: 25 (Ref:70-480.3.4.5)

decodeURI encodeURI decodeURIComponent encodeURIComponent toJSON serialize serializeArray

(34)

You are developing a web application that includes the following JavaScript code: var xhr = new XMLHttpRequest();

xhr.open("GET", "http://www.verigon.com/data/", true); xhr.onreadystatechange = function() {

//handle readyState property here };

xhr.send();

You need to determine when some data has been received. Which readyState property value should you use?

Objective:

Sub-Objective:

Consume data.

References:

MSDN Library > Internet Explorer Developer Center > Docs > Internet Explorer API reference > Web applications > XMLHTTPRequest (XHR) and AJAX Support > Objects > XMLHTTPRequest object (Internet Explorer) >

Properties > readyState property

MSDN Library > Internet Explorer Developer Center > Docs > Internet Explorer API reference > Web applications > XMLHTTPRequest (XHR) and AJAX Support > Objects > XMLHTTPRequest object (Internet Explorer)

Item: 26 (Ref:70-480.3.3.2)

READYSTATE_COMPLETE READYSTATE_INTERACTIVE READYSTATE_LOADING READYSTATE_LOADED READYSTATE_UNINITIALIZED

(35)

You are developing a web application performs multiple asynchronous processes. These processes are performed using HTML5 Web Workers.

You need to exchange data between a web page and a web worker. What should you do?

Objective:

Sub-Objective:

References:

Item: 27 (Ref:70-480.2.5.3)

Send the data with postMessage and receive the data with onmessage. Send the data with onmessage and receive the data with postMessage. Send the data with start and receive the data with onstart.

(36)

You need to add a custom method to a native object in JavaScript code. All instances of the native object should provide this custom method.

Which built-in functionality should you use to define the custom method?

Objective:

Sub-Objective:

Create and implement objects and methods.

References:

MSDN > Internet Explorer Developer Center > Docs > Internet Explorer API references > JavaScript Language Reference > Advanced JavaScript > Prototypes and Prototype Inheritance

Item: 28 (Ref:70-480.1.6.1)

apply create prototype this

(37)

Objective:

Sub-Objective:

References:

Item: 29 (Ref:70-480.2.5.4)

You have a Web application that uses the HTML5 Web Worker API. You are writing code to run a Web Worker defined in another JavaScript file. Match the JavaScript code on the left with its function on the right

(38)

You have the following on a web page: <script> function sendMessage() { var fr = document.getElementById('iframe').contentWindow; fr.postMessage(prodID, "http://www.verigon.com"); } script>

onload="sendMessage();"> iframe>

You need to define the callback on the product_details.html page to use HTML5 Web Messaging. Which text should you insert to complete the following JavaScript code? (To answer, type the missing part of the expression in the textbox.) window. function receiveMessage(evt) { //handle message }

Objective:

Sub-Objective:

References:

MSDN > Internet Explorer Developer Center > Docs > Internet Explorer API reference > Web applications > HTML5 Web Messaging

Item: 30 (Ref:70-480.2.4.5)

(39)

You are developing a blog on current Web development trends. Articles should display as follows:

Which text should you insert to complete the CSS rule? (To answer, type the CSS properties and value(s) in the textbox. Use only pixel units in multiples of five.)

article > header { text-align: center; } article > p { text-align: justify; } article { background: #ffc; margin: 5px; padding: 5px; ; }

Objective:

Sub-Objective:

Style HTML box properties.

References:

w3schools.com > CSS Box Model > CSS Border

(40)

Objective:

Sub-Objective:

Raise and handle an event.

Item: 32 (Ref:70-480.2.2.5)

You have the following elements on an HTML5 Web page: <input id="chkEmail" type="checkbox" value="on"> <div id="dis" style="DISPLAY: none">

If you provide your e-mail address, then we may contact you periodically with special offers,

updated information and additional services.

This email subscription cannot be cancelled and will be continued in perpetuity with your next of kin.

</div>

When the user checks the checkbox, the disclaimer should display. If the checkbox is not checked, then the disclaimer should not display.

(41)

References:

MSDN > Internet Explorer Developer Center > Docs > Internet Explorer API reference > Document Object Model (DOM) Core > Document Object Model (DOM) Events > Objects and Events > MouseEvent > click

(42)

You are developing a web site using HTML5 and JavaScript. The web site allows users to create and apply their own style themes.

You have the following user requirements:

z Users can view and modify any theme whenever they visit the web site.

z The selected theme is applied immediately and whenever they return to the Web site.

Which JavaScript object should you use?

Objective:

Sub-Objective:

References:

MSDN > Dev Center > Windows Store apps > Docs > API > HTML/CSS > Storage and state reference > HTML5 Web Storage

w3schools.com > HTML5 News > HTML5 Web Storage

Item: 33 (Ref:70-480.1.4.1)

window.url document.cookie window.localStorage window.sessionStorage

(43)

You are developing a login form for a web application. Usernames must be valid email addresses. The login page includes the following JavaScript code:

function isValidEmail(input) {

var patternEmail; //set this variable return patternEmail.test(input);

}

To which value(s) should you set the patternEmail variable? (Choose all that apply. Each answer is an alternate solution.)

Objective:

Sub-Objective:

References:

MSDN Library > Internet Explorer Developer Center > Docs > Internet Explorer API reference > JavaScript Language Reference > JavaScript Reference > JavaScript Objects > Regular Expression Object (JavaScript) MSDN Library > .NET Framework Regular Expressions > Regular Expression Language Quick Reference

Item: 34 (Ref:70-480.3.2.1)

'(\d\w._-)*@(\d\w.-)*.\w{2,}]' /^(\d\w._-)*@(\d\w.-)*.\w{2,}]$/ /^[\d\w+\d\w._-*]@[\d\w+\d\w.-*.\w{2,}]$/ /^(\d|\w)+(\d|\w|.|_|-)*@(\d|\w)+(\d|\w|.|-)*.\w{2,}$/ /^(0-9A-Z)+(0-9A-Z._-)*@(0-9A-Z)+(0-9A-Z.-)*.(A-Z){2,}$/ /^[0-9A-Z]+[0-9A-Z._-]*@[0-9A-Z]+[0-9A-Z.-]*.[A-Z]{2,}$/ /^(0-9A-Z)+(0-9A-Z._-)*@(0-9A-Z)+(0-9A-Z.-)*.(A-Z){2,}$/i /^[0-9A-Z]+[0-9A-Z._-]*@[0-9A-Z]+[0-9A-Z.-]*.[A-Z]{2,}$/i

(44)

You are reviewing a web application with the following JavaScript segment: var msg = "Global msg"; function MsgGen(msg) { this.msg = msg; } function display() { alert(msg); } function display(msg) { alert(msg); } MsgGen.prototype.display = function() { alert(this.msg); };

var obj = new MsgGen("Object msg"); display("Local msg");

When this JavaScript segment executes, which text is displayed in the browser message box?

Objective:

Sub-Objective:

Establish the scope of objects and variables.

References:

MSDN Library > Internet Explorer and web development > Internet Explorer API reference > JavaScript Language Reference > JavaScript Reference > JavaScript Statements > this Statement (JavaScript)

MSDN Library > MSDN Magazine > Script Junkie > Script Junkie | Namespacing in JavaScript

Item: 35 (Ref:70-480.1.5.2)

Global msg Local msg Object msg [object Object]

(45)

You are developing an order form that includes the following markup: <input id="qty" name="qty" type="text" />

The quantity field must support only numeric values. Which JavaScript function should you use to perform this validation?

Objective:

Sub-Objective:

References:

MSDN Library > Internet Explorer Developer Center > Docs > Internet Explorer API reference > JavaScript Language Reference > JavaScript Fundamentals > Data Types (JavaScript)

Item: 36 (Ref:70-480.3.2.7)

function validateQty() {

return document.getElementById('qty').value != NaN; }

return !isNaN(document.getElementById('qty').value); }

return new Number(document.getElementById('qty').value) != NaN; }

return isNumeric(document.getElementById('qty').value); }

(46)

You develop a contact form for users to submit comments. During testing, you fill out the form as follows:

The form page contains the following JavaScript code: $('form').submit(function () {

$('#output').append(encodeURI($.toJSON($(this).serializeArray()))); });

Which of the following is the most likely displayed in the element named input?

Item: 37 (Ref:70-480.3.4.3)

[{"name":"Joshua Hester"},{"email":"[email protected]"},

{"website":"http://www.transcender.com"},{"comment":"I really love this new HTML5 redesign. Nice job, guys!"}]

[{"name":"name","value":"Joshua Hester"},

{"name":"email","value":"[email protected]"},

{"name":"website","value":"http://www.transcender.com"},

{"name":"comment","value":"I really love this new HTML5 redesign. Nice job, guys!"}]

name=Joshua

Hester,[email protected],website=http://www.transcender.com,comment=I really love this new HTML5 redesign. Nice job, guys!

name=Joshua+Hester,email=josh.hester%40kaplan.com,website=http%3A%2F%

2Fwww.transcender.com,comment=I+really+love+this+new+HTML5+redesign.+Nice+job% 2C+guys!

name=Joshua

Hester&[email protected]&website=http://www.transcender.com&comment=I really love this new HTML5 redesign. Nice job, guys!

name=Joshua+Hester&email=josh.hester%40kaplan.com&website=http%3A%2F% 2Fwww.transcender.com&comment=I+really+love+this+new+HTML5+redesign.+Nice+job% 2C+guys! %5B%7B%22name%22:%22name%22,%22value%22:%22Joshua%20Hester%22%7D,%7B%22name%22:% 22email%22,%22value%22:%[email protected]%22%7D,%7B%22name%22:%22website% 22,%22value%22:%22http://www.transcender.com%22%7D,%7B%22name%22:%22comment%22,% 22value%22:I%20really%20love%20this%20new%20HTML5%20redesign.%20Nice%20job,% 20guys!%22%7D%5D

(47)

Objective:

Sub-Objective:

References:

%5B%7B%22name%22%3A%22name%22%2C%22value%22%3A%22Joshua%20Hester%22%7D%2C%7B% 22name%22%3A%22email%22%2C%22value%22%3A%22josh.hester%40kaplan.com%22%7D%2C%7B% 22name%22%3A%22website%22%2C%22value%22%3A%22http%3A%2F%2Fwww.transcender.com%22% 7D%2C%7B%22name%22%3A%22comment%22%2C%22value%22%3A%y%20love%20this%20new%

(48)

You are developing a web site using the GeoLocation API. You must track the current position of a user during the same session.

Which JavaScript method should you use?

Objective:

Sub-Objective:

References:

MSDN Library > Internet Explorer Developer Center > Docs > Internet Explorer API reference > Web applications > Geolocation > Methods

Item: 38 (Ref:70-480.1.4.4)

clearWatch getCurrentPosition watchPosition readAsBinaryString

(49)

You are developing a Web site that uses AppCache. The manifest file is defined as follows: CACHE MANIFEST CACHE: styles/main.css scripts/main.js scripts/standard FALLBACK: images/ images/unavailable.png NETWORK: *

Which of the following files will be cached according to the manifest file? (Choose all that apply.)

Objective:

Sub-Objective:

References:

MSDN Library > Internet Explorer Developer Center > Docs > Internet Explorer 10 Guide for Developers > HTML5 > Application Cache API ("AppCache")

Item: 39 (Ref:70-480.1.4.3)

styles/main.css scripts/main.js scripts/require-2.1.5.min.js scripts/standard/jquery-1.9.1.min.js images/unavailable.png images/image1.png

(50)

You are contracted to build a web application for a company. The application must execute a variety of JavaScript processes.

You recommend using HTML5 Web Workers to optimize performance. Which of the following tasks can be performed by a web worker? (Choose all that apply.)

Objective:

Sub-Objective:

References:

MSDN > Inspire > Content > Articles > Introduction to HTML5 Web Workers: The JavaScript Multi-threading Approach

Item: 40 (Ref:70-480.2.5.1)

Report generation with SVG Loading of external XML data

Image processing with HTML5 Canvas

Loading and execution of external JavaScript files URL redirection to a login page

(51)

Objective:

Item: 41 (Ref:70-480.1.6.2)

You have the following JavaScript code defined for an HTML5 Web page: function WebColor (r,g,b) {

this.red = Number(r); this.green = Number(g); this.blue = Number(b); }

You need to define a method for the WebColor object that returns the hexadecimal value of its red , green , and blue properties. This method should be available to all instances of the WebColor object.

(52)

(53)

You are developing a reservation form that consumes an external Web service for current weather conditions. To consume the Web service, you must provide the following information stored in the credentials.xml file:

username: demo_user password: P@$$w0rd

The form must authenticate with the Web service. Which text should you insert to complete the following JavaScript code? (To answer, type the missing code in the textbox.)

$.ajax({

type: 'POST',

contentType: 'application/json; charset=utf-8', url: "http://WebServer/WebService.asmx/LocalTemp", data: "{ zip: " + $('#zip').val() + "}",

dataType: 'json', success: onSuccess, error: onError, });

Objective:

Sub-Objective:

Consume data.

References:

jQuery.com > jQuery API > Ajax > Low-Level Interface > jQuery.ajax()

(54)

Objective:

Sub-Objective:

References:

Item: 43 (Ref:70-480.3.4.7)

You have a form that uses HTML5 and jQuery with the following markup: <form>

<label for="uname">Username</label><input name="uname" type="email" /> <br /> <label for="pword">Password</label><input name="pword" type="password" /> <input type="submit" value="Login" />

</form>

Match the required JavaScript code on the left with its function on the right.

(55)

(56)

You are developing a blog on current Web development trends. Articles contain the following elements: <header>

<h1>Programming Environmenth1> <h2>Joshua Hesterh2>

<p>Published:

<time datetime="2013-4-1" pubdate="pubdate"> April 2013

time> p> header>

You need to apply a style to

and

elements only in article headers. Which text should you

insert to complete the CSS rule? (To answer, type the CSS

selector in the textbox.)

{

font-family

: Verdana,Helvetica,sans-serif;

font-variant

: small-caps;

color

: #fff;

background-color

: #333;

}

Objective:

Use CSS3 in Applications

Sub-Objective:

Find elements by using CSS selectors and jQuery.

References:

MSDN Library > Web Development > Internet Explorer > Internet Explorer Conceptual Content > Content Design and Presentation > Understanding CSS Selectors

Item: 44 (Ref:70-480.4.5.3)

(57)

You are developing a shipping form using HTML5. The form should accept an order number and store it as order_num. An order number must meet the following requirements:

z Begin with one or more digits. z End with an uppercase letter.

z Digits and letters are separated by either a hyphen or colon.

The order number is required to submit the form. Which markup should you use? (To answer, type the complete element in the textbox. Specify only the needed attributes and place them in the order of id or name, type, pattern, min, max, step, and required.)

<input />

Objective:

Access and Secure Data

Sub-Objective:

Validate user input by using HTML5 elements.

References:

MSDN > Internet Explorer Developer Center > Docs > Internet Explorer API reference > Web applications > HTML5 > Forms

MSDN Library > .NET Framework Regular Expressions > Regular Expression Language â€“ Quick Reference

(58)

You are developing a customer order form that contains the following elements: <form id="order"> <div id="personal"> <table> <tr> <td><label>Name:label>td>

<td><input id="name" type="text" placeholder="First Last" />td> </tr>

<tr>

<td><label>Email:label>td>

<td><input id="email" type="email" />td> </tr>

</table> </div> </form>

You want to label text bolded when a user is typing into its associated input. The label text should stay bolded to indicate form completion. Which text should you insert to complete the JavaScript code? (To answer, type the jQuery selector in the textbox. Be as specific as possible â€“ only those elements required should be affected.)

$(' ').each(function () { $(this).parent().prev().children().css('font-weight', "bold"); });

Objective:

Sub-Objective:

Find elements by using CSS selectors and jQuery.

References:

jQuery API > Category > Selectors

jQuery API > Category > Tree Traversal

Item: 46 (Ref:70-480.4.5.2)

(59)

Objective:

Implement and Manipulate Document Structures and Objects

Sub-Objective:

Implement HTML5 APIs.

References:

MSDN > Dev Center > Windows Store apps > Docs > API > HTML/CSS > Storage and state reference > HTML5 Web Storage

Item: 47 (Ref:70-480.1.4.6)

You have a Web page that uses HTML5 Web storage. Match the JavaScript code on the left with its function on the right.

(60)

Objective:

Sub-Objective:

Style HTML text properties.

References:

MSDN Library > Web Development > ASP.NET > ASP.NET 4 > Visual Web Developer Content Map > Visual Web Developer User Interface Elements > CSS Editor > New Style and Modify Style Dialog Boxes

Item: 48 (Ref:70-480.4.1.4)

You are using Visual Studio to develop a CSS style sheet. Paragraphs must be displayed as follows:

z All text must be justified on both sides of its margin. z The first line should be indented by half an inch.

Using the Modify Style dialog box, click on the category option in the left pane to meet the requirements.

(61)

Objective:

Sub-Objective:

Create the document structure.

References:

MSDN Magazine > Script Junkie > Using HTML5's New Semantic Tags Today

Item: 49 (Ref:70-480.1.1.3)

Match the HTML5 semantic markup on the left with its intended content on the right.

(62)

You have JavaScript code that must determine whether a product is available for fulfillment based on a stocking code. The following conditions must be met:

z The stocking code must be a five-digit string.

z The item must be unavailable for fulfillment if the stocking code is 00010.

You need to implement the following code to meet these conditions. Which text should you insert to complete the following code? (To answer, type the missing part of the expression in the textbox.)

function checkForProd(stockCode) {

if (stockCode ) {

alert("Unavailable for fulfillment!"); }

}

Objective:

Implement Program Flow

Sub-Objective:

Implement program flow.

References:

MSDN > Internet Explorer Developer Center > Docs > Internet Explorer API reference > JavaScript

Language Reference > JavaScript Reference > JavaScript Operators > Comparison Operators (JavaScript)

Item: 50 (Ref:70-480.2.1.7)

(63)

You are developing a web site using HTML5. You want to ensure the web site is available offline. Which HTML5 API should you use?

Objective:

Sub-Objective:

Implement HTML5 APIs.

References:

MSDN Library > Internet Explorer Developer Center > Docs > Internet Explorer 10 Guide for Developers > HTML5 > Application Cache API ("AppCache")

Item: 51 (Ref:70-480.1.4.2)

Application Cache Web Storage WebSockets Geolocation

(64)

You have the following on a Web page: <script> function loadProduct() { var fr = document.getElementById('iframe').contentWindow; fr.postMessage(product, "*"); } </script>

<iframe id="iframe" src="product_details.html" onload="loadProduct();"></iframe> The product_details.html page contains a function named displayProduct that accepts a Product object and renders it on the web page. You need to define the callback to use HTML5 Web Messaging. Which code segment should you use?

Objective:

Sub-Objective:

Implement a callback.

References:

MSDN > Internet Explorer Developer Center > Docs > Internet Explorer API reference > Web applications > HTML5 Web Messaging

Item: 52 (Ref:70-480.2.4.4)

window.addEventListener("start", function (data) { displayProduct(data);

});

(65)

You are developing an online banking application that consumes the following object: var accountInfo = { id: 40001, credentials: { username: "jhester", password: "P@$$W0rd" } };

Which expression(s) reference the value jhester? (Choose all that apply.)

Objective:

Sub-Objective:

Consume data.

References:

MSDN Library > .NET Development > Articles and Overviews > Web Applications (ASP.NET) > ASP.NET > Client-side Development > An Introduction to JavaScript Object Notation (JSON) in JavaScript and .NET

Item: 53 (Ref:70-480.3.3.5)

accountInfo[1] accountInfo[1][0] accountInfo.username accountInfo.credentials.username accountInfo2.getElementById('40001').credentials accountInfo2.getElementsByTagName('username')[0].value

(66)

You are developing a web application for users to upload and share their photo albums. Each album consists of the following properties:

z Title and description

z Creation and modification dates

z Array of image file locations and descriptions

These properties are retrieved from a Windows Communication Foundation (WCF) service using the XMLHttpRequest object. You need to update a status label based on the current state of the request operation. Which event should you use?

Objective:

Sub-Objective:

Consume data.

References:

MSDN Library > Internet Explorer Developer Center > Docs > Internet Explorer API reference > Web applications > XMLHTTPRequest (XHR) and AJAX Support > Objects > XMLHTTPRequest object (Internet Explorer)

Item: 54 (Ref:70-480.3.3.1)

onload onprogress onreadystatechange ontimeout

(67)

You are developing an application for a restaurant chain that consumes an external web service. The web service provides a method named getLocalSpecials that returns a list of menu items that are available at a specific local restaurant.

You will use the jQuery method ajax to perform the web service request. The showLocalSpecials function will take the list of menu items and display it on the specials web page. The showLocalSpecials method should be executed only if these conditions exist:

z The request has completed. z There are no server or data errors.

To which settings property should you assign showLocalSpecials?

Objective:

Sub-Objective:

Implement a callback.

References:

jQuery.com > API Documentation > Ajax > Low-Level Interface > jQuery.ajax()

Item: 55 (Ref:70-480.2.4.2)

async cache complete success

(68)

You have JavaScript code that must determine whether a product quantity qualifies for a bulk discount. To qualify for a bulk discount, the quantity must be a multiple of 25.

You need to implement the following code to meet these conditions. The variable pQty is directly retrieved from an HTML textbox. Which text should you insert to complete the following code? (To answer, type the missing part of the expression in the textbox.)

if (pQty ) {

//Apply discount

}

Objective:

Sub-Objective:

Implement program flow.

References:

MSDN > Internet Explorer Developer Center > Docs > Internet Explorer API reference > JavaScript Language Reference > JavaScript Reference > JavaScript Operators > Comparison Operators (JavaScript)

Item: 56 (Ref:70-480.2.1.6)

(69)

You are developing a profile update form that includes the following markup: <input id="pword" name="pword" type="password" />

You need to ensure that this field contains a value before submitting the form. Which JavaScript function should you use to perform validation?

Objective:

Sub-Objective:

Validate user input by using JavaScript.

References:

MSDN Library > Internet Explorer Developer Center > Docs > Internet Explorer API reference > JavaScript Language Reference > JavaScript Reference > JavaScript Objects > String Object (JavaScript)

MSDN Library > Internet Explorer Developer Center > Docs > Internet Explorer API reference > JavaScript Language Reference > JavaScript Fundamentals > Data Types (JavaScript)

Item: 57 (Ref:70-480.3.2.6)

(70)

You are developing a customer review form that includes the following markup:

<input id="rating" name="rating" type="range" min="1" max="5" /><br /> <textarea id="review" name="review" maxlength="100">Enter Your Review Here</textarea>

The review field will be sent via an HTTP GET operation. To prevent code injection, all special characters should be converted to character codes. Which JavaScript function should you use?

Objective:

Sub-Objective:

Validate user input by using JavaScript.

References:

MSDN Library > Internet Explorer Developer Center > Docs > Internet Explorer API reference > JavaScript Language Reference > JavaScript Reference > JavaScript Objects > Global Object (JavaScript) >

decodeURI Function (JavaScript)

MSDN Library > Internet Explorer Developer Center > Docs > Internet Explorer API reference > JavaScript Language Reference > JavaScript Reference > JavaScript Objects > Global Object (JavaScript) >

decodeURIComponent Function (JavaScript)

Item: 58 (Ref:70-480.3.2.8)

encodeURI decodeURI

encodeURIComponent decodeURIComponent