Total Questions: 208
Test Number: 70-480
Vendor Name: Microsoft
Cert Name : MCSD
Certification
Test Name: Programming in HTML5 with JavaScript and CSS3 Exam
Official Site: http://www.certsgrade.com
For
More Details: http://www.certsgrade.com/pdf/70-480/
Question:
1
DRAG DROP
You are validating user input by using JavaScript and
regular expressions.
A group of predefined regular expressions will validate two
input fields:
An email address in a function named validateEmail (for
example, firstname@contoso.com)
A nine-digit number that allows optional hyphens after the
second and fifth character in a function named validateSSN(for example,
555555555 or 555-55-5555)
You need to use the correct expression to validate the
input.
Which expression should you insert into each function? (To
answer, drag the appropriate regular expression statement to the correct
location. Each regular expression 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:
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
.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 a customer contact form that will be
displayed on a page of a company's website. The page collects information about
the customer.
If a customer enters a value before submitting the form, it
must be a valid email address.
You need to ensure that the data validation requirement is
met.
What should you use?
A. <input name="email"
type="url"/>
B. <input name="email" type="text"
required="required"/>
C. <input name="email"
type="text"/>
D. <input name="email"
type="email"/>
Answer:
D
Example:
<form>
E-mail:
<input
type="email" name="email">
</form>
Reference:
Question:
4
DRAG DROP
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
that is used in the email address.
You need to implement this functionality.
How should you develop the form? (To answer, drag the
appropriate code segment to the correct target or targets 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:
* The serialize() method creates a URL encoded text string
by serializing form values.
You can select one or more form elements (like input and/or
text area), or the form element itself.
The serialized values can be used in the URL query string
when making an AJAX request.
Example: $("form").serialize());
* decodeURIComponent
The decodeURIComponent() function decodes a URI component.
Return Value: A
String, representing the decoded URI
Incorrect:
Not decodeURI:
decodeURI is intended for use on the full URI.
decodeURIComponent is intended to be used on .. well .. URI
components that is any part that lies between separators (; / ? : @ & = + $
, #).
Reference: jQuery serialize() Method
Question:
5
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.
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:
6
You are developing a web page that enables customers to
upload documents to a web server. The page includes an HTML5 PROGRESS element
named progressBar that displays information about the status of the upload.
The page includes the following code. (Line numbers are
included for reference only.)
An event handler must be attached to the request object to
update the PROGRESS element on the page.
You need to ensure that the status of the upload is
displayed in the progress bar.
Which line of code should you insert at line 03?
A. xhr.upload.onloadeddata =
B. xhr.upload.onplaying =
C. xhr.upload.onseeking =
D. xhr.upload.onprogress =
Answer:
D
Example:
xhr.upload.onprogress = function(evt)
{
if
(evt.lengthComputable)
{
var
percentComplete = parseInt((evt.loaded / evt.total) * 100);
console.log("Upload: " + percentComplete + "%
complete")
}
};
Reference:
Question:
7
You are developing a customer web form that includes the
following HTML.
<label id="txtValue"X/label>
Information from the web form is submitted to a web service.
The web service returns the following JSON object.
{
"Confirmation": "1234",
"FirstName": "John"
}
You need to display the Confirmation number from the JSON
response in the txtValue label field.
Which JavaScript code segment should you use?
A. $("#txtValue").val = (JSONObject.Confirmation);
B. $("#txtValue").val (JSONObject.Confirmation);
C. $("#txtValue").text =
(JSONObject.Confirmation);
D. $("#txtValue").text (JSONObject.Confirmation);
Answer:
D
Incorrect:
not A, not B: A label object has no value attribute.
Reference:
Question:
8
HOTSPOT
You are developing a web application that retrieves data
from a web service. The data being retrieved is a custom binary datatype named
bint. The data can also be represented in XML.
Two existing methods named parseXml() and parseBint() are
defined on the page.
The application must:
Retrieve and parse data from the web service using binary format
if possible
Retrieve and parse the data from the web service using XML
when binary format is not possible
You need to develop the application to meet the
requirements.
What should you do? (To answer, select the appropriate
options from the drop-down lists in the answer area.)
Answer:
* accepts : 'application/bint, text/xml'
accepts:'application/bin,text/xml' to accept only XML and
binary content in HTML responses.
* Use the following condition to check if the html response
content is
binary: If(request.getResponseHeader("Content-Type")=="application/bint"
* var request =
$.ajax({
uri:'/',
accepts:
'application/bint, text/xml',
datafilter: function(data,type){
if(request.getResponseHeader("Content-Type")=="application/bint")
return parseBint(data);
else
return parseXml();
},
success:
function (data) {
start(data);
}
});
Question: 9
You are developing a customer web form that includes the
following HTML.
<input id = "txtValue" />
A customer must enter a value in the text box prior to
submitting the form.
You need to add validation to the text box control.
Which HTML should you use?
A. <input id="txtValue" type="text"
required="required"/>
B. <input id="txtValue" type="text"
pattern="[A-Za-z]{3}" />
C. <input id="txtValue"
type="required" />
D. <input id="txtValue"
type="required" autocomplete="on" />
Answer:
A
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
An HTML form with a required input field:
<form action="demo_form.asp">
Username: <input
type="text" name="usrname" required>
<input
type="submit">
</form>
Username: <input type="text"
name="usrname" required>
Reference: HTML <input> required Attribute
Question:
10
DRAG DROP
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:
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>
Reference: HTML Input Types
Question:
11
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
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:
12
You are creating a class named Consultant that must inherit
from the Employee class. The Consultant class must modify the inherited
PayEmployee method. The Employee class is defined as follows.
function Employee() {}
Employee.prototype.PayEmployee = function ( ){
alert('Hi there!');
}
Future instances of Consultant must be created with the
overridden method.
You need to write the code to implement the Consultant
class.
Which code segments should you use? (Each correct answer
presents part of the solution. Choose two.)
A. Consultant.PayEmployee = function ()
{
alert('Pay Consulant');
}
B. Consultant.prototype.PayEmployee = function ()
{
alert('Pay Consultant');
}
C. function Consultant () {
Employee.call(this);
}
Consultant.prototype = new Employee();
Consultant.prototype.constructor = Consultant;
D. function Consultant() {
Employee.call(this); }
Consultant.prototype.constructor = Consultant.create;
Answer: B,
C
* Object.prototype.constructor
Returns a reference to the Object function that created the
instance's prototype. Note that the value of this property is a reference to
the function itself, not a string containing the function's name. The value is
only read-only for primitive values such as 1, true and "test".
* The constructor property is created together with the
function as a single property of func.prototype.
Reference: Object.prototype.constructor
Question:
13
You are modifying an existing web page. The page is being
optimized for accessibility. The current page contains the following HTML.
Standards-compliant screen readers must be able to identify
the links contained within the navigation structure automatically.
You need to create the navigation link structure in the page.
With which container tags should you wrap the existing
markup?
A. <navmap> </navmap>
B. <div id="nav"> </div>
C. <nav> </nav>
D. <map> </map>
Answer: C
HTML <nav> Tag
Example
A set of navigation links:
<nav>
<a
href="/html/">HTML</a> |
<a
href="/css/">CSS</a> |
<a
href="/js/">JavaScript</a> |
<a
href="/jquery/">jQuery</a>
</nav>
Reference: HTML <nav> Tag
Question:
14
HOTSPOT
You are developing an airline reservation website by using
HTML5 and JavaScript. A page on the site allows users to enter departure and
destination airport information and search for tickets.
You have the following requirements:
Users must be able to save information in the application
about their favorite destination airport.
The airport information must be displayed in the destination
text box whenever the user returns to the page.
You need to develop the site to meet the requirements.
Which lines of code should you use? (To answer, select the
appropriate options from the drop-down lists in the answer area.)
Answer:
Explanation:
* retrieve localStorage.destination
* store localStorage.destination
Question:
15
HOTSPOT
You are developing an HTML5 web application for displaying
encyclopedia entries.
Each encyclopedia entry has an associated image that is
referred to in the entry.
You need to display the image by using the correct semantic
markup.
What should you do? (To answer, select the appropriate
options from the drop-down list in the answer area.)
Answer:
Explanation:
The <figure> element
The <figure> element is intended to be used in
conjunction with the <figcaption> element to mark up diagrams,
illustrations, photos, and code examples (among other things).
Example:
<figure>
<img
src="/macaque.jpg" alt="Macaque in the trees">
<figcaption>A
cheeky macaque, Lower Kintaganban River, Borneo. Original by <a
href="http://www.flickr.com/photos/rclark/">Richard
Clark</a></figcaption>
</figure>
Reference: The figure & figcaption elements
Question: 16
You are creating a JavaScript object that represents a
customer.
You need to extend the Customer object by adding the
GetCommission() method.
You need to ensure that all future instances of the Customer
object implement the GetCommission() method.
Which code segment should you use?
A. Option A
B. Option B
C. Option C
D. Option D
Answer:
D
* Object.prototype.constructor
Returns a reference to the Object function that created the
instance's prototype. Note that the value of this property is a reference to
the function itself, not a string containing the function's name. The value is
only read-only for primitive values such as 1, true and "test".
* The constructor property is created together with the
function as a single property of func.prototype.
Reference: Object.prototype.constructor
Question:
17
You are developing a web form that includes the following
code.
When a user selects the check box, an input text box must be
added to the page dynamically.
You need to ensure that the text box is added.
Which function should you use?
A. Option A
B. Option B
C. Option C
D. Option D
Answer:
B
We create a now div element with the textbox.
We then use
appendChild() method appends this node as the last child the input node
divname.
Reference: HTML DOM appendChild() Method
Question:
18
HOTSPOT
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:
* 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);
Reference: HTML canvas fillStyle Property
Question: 19
You are developing an HTML5 page that has an element with an
ID of logo. The page includes the following HTML.
<div>
Logo:<br>
<div id="logo">
</div>
</div>
You need to move the logo element lower on the page by five
pixels.
Which lines of code should you use? (Each correct answer
presents part of the solution. Choose two.)
A. document.getElementById("logo") .style.position
= "relative";
B. document.getElementByld("logo").Style.top =
"5px";
C. document.getElementById("logo").style.top =
"-5px";
D. document.getElementById("logo").style.position
= "absolute";
Answer: A,
B
* style.position = "relative";
The element is positioned relative to its normal position,
so "left:20" adds 20 pixels to the element's LEFT position.
* For relatively positioned elements, the top property sets
the top edge of an element to a unit above/below its normal position.
Example: Example
Set the top edge of the image to 5px below the top edge of
its normal position:
img {
position:
relative;
top: 5px;
}
Reference: CSS position Property; CSS top Property
Question:
20
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
* 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
Total Questions: 208
Test Number: 70-480
Vendor Name: Microsoft
Cert Name : MCSD
Certification
Test Name: Programming in HTML5 with JavaScript and CSS3 Exam
Official Site: http://www.certsgrade.com
For
More Details: http://www.certsgrade.com/pdf/70-480/
Get20%
Immediate Discount on Full Training Material
Discount Coupon Code: 20off2016
