Microsoft 70-480 Study Guides 2021

NEW QUESTION 1
You troubleshoot a webpage that contains the following HTML element:
<canvas id= "clickCanvas" width="300"> height= "300">
Your browser does not support the HTML5 canvas.</canvas>
The following JavaScript code is included in a script tag in the HEAD section of the webpage: (Line numbers are included for reference only.)

You need to invoke the clickReporter() JavaScript function when a user clicks the mouse on the canvas HTML element.
What should you do?

• A. Add the following attribute to the canvas HTML element: clicked= "clickReporter()"
• B. Replace the code segment at line 06 with the following code segment: drawBox.Click += clickReporter;
• C. Insert the following code segment at line 07: canvas.onclick = clickReporter;
• D. Insert the following code segment at line 07: canvas, click = clickReporter;

Answer: A

NEW QUESTION 2
You develop an application in HTML5. The application has a field named field1 that uses the month input type.
You need to identify what will occur if the application runs from a browser that does not support the month input type.
What should you identify?

• A. The field1 field will be rendered as a text box.
• B. The field1 field will appear as alabel named month.
• C. The web page will display an error message.
• D. The field1 field will not be displayed.

Answer: A

Explanation: References: https://stackoverflow.com/questions/18020950/how-to-make-input-type-date- supported-on-all-browsers-any-alternatives

NEW QUESTION 3
An HTML page contains no embedded JavaScript or CSS code. The body of the page contains only the following line of code.
<p id="test">test</p>
A CSS style sheet must be applied dynamically. The style must visibly change the appearance of the paragraph on the page.
You need to apply a style the paragraph. Which line of code should you use?

• A. document.getElementById("test").style.border = "0";
• B. document.getElementById("test").style.position = "static";
• C. document.getElementById ("test").style.padding = "15px";
• D. document.getElementById("test").style.top = "5px";

Answer: A

Explanation: The border shorthand property sets all the border properties in one declaration.
The properties that can be set, are (in order): border-width, border-style, and border-color.
It does not matter if one of the values above are missing, e.g. border:solid #ff0000; is allowed. Reference: Style border Property

NEW QUESTION 4
You develop an HTML5 application. You give users a numeric access code that can be used only one
time.
Users must enter the numeric access code in the login form of the application. The numeric characters must be hidden by a masking character.
You need to implement the form element for users to enter the code. Which HTML element should you use?

• A. <input type="password" required autocomplete="off">
• B. <input type="input" autocomplete="off" required />
• C. <input type="password" stytem" visiblity:hidden;" required />
• D. <input type="button" value="password" required />

Answer: A

Explanation:
* Input Type: password
<input type="password"> defines a password field.
The characters in a password field are masked (shown as asterisks or circles).
* The autocomplete attribute specifies whether or not an input field should have autocomplete enabled.
The autocomplete attribute works with the following <input> types: text, search, url, tel, email, password, datepickers, range, and color.
Reference: HTML Input Types ; HTML <input> autocomplete Attribute

NEW QUESTION 5
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.

NEW QUESTION 6
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 are a. 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> Reference: HTML Input Types http://www.w3schools.com/html/html_form_input_types.asp

NEW QUESTION 7
DRAG DROP
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 to 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 line or lines of code should you use? (To answer, drag the appropriate command or commands from the list of commands to the correct location or locations in the work are

Answer:

Explanation: * retrieve localStorage.destination
* store localStorage.destination

NEW QUESTION 8
HOTSPOT
You are developing a web page.
The webpage must display a container. The container must display three colored rectangles near the top of the container. The colored rectangles are, in order, green, red, and yellow. The rectangles are aligned horizontally and evenly spaced across the width of the container.
The layout of the page must resemble the following image:

You need to ensure that the page renders properly.
How should you complete the relevant styles? (To answer, select the appropriate option from each drop-down list in the answer area.)

Answer:

Explanation: * -ms-flex-align
center: The flexbox item's margin box is centered in the cross axis within the line.
* -ms-flex-pack
The 'flex-pack' property defines the flexibility of these packing spaces. Reference: CSS property '-ms-flex-align'; CSS property '-ms-flex-pack'

NEW QUESTION 9
DRAG DROP
You are developing an HTML5 web application that will display 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, drag the appropriate HTML tag to the correct element. Each tag 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 <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

NEW QUESTION 10
You develop an HTML5 application that allows users to upload files from their local computers. The user interface must remain responsive during the upload.
You need to implement the file upload functionality for the application.
Which two actions should you perform? (Each correct answer presents a complete solution. Choose two.)

• A. Use an HTML form with a file type INPUT element that targets a hidden IFRAME element.
• B. Use a file type INPUT element, and then use the Web Storage API to upload the file.
• C. Use a FormData object and upload the file by using XMLHttpRequest.
• D. Register the file protocol by using protocol handler registration API and then upload the file by using XMLHttpRequest.
• E. Use the FileSystem API to load the file, and then use the jQuery post method to upload the file to the server.

Answer: BD

Explanation:
B: Example (notice the web storage api upload.aspx):
<!DOCTYPE html>
<html>
<head>
<title>Upload Files using XMLHttpRequest - Minimal</title>
</head>
<body>
<form id="form1" enctype="multipart/form-data" method="post" action="Upload.aspx">
<div class="row">
<label for="fileToUpload">Select a File to Upload</label><br />
<input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/>
</div>
<div id="fileName"></div>
<div id="fileSize"></div>
<div id="fileType"></div>
<div class="row">
<input type="button" onclick="uploadFile()" value="Upload" />
</div>
<div id="progressNumber"></div>
</form>
</body>
</html> D:
* Because we're using XMLHttpRequest, the uploading is happening in the background. The page the user is on remains intact. Which is a nice feature to have if your business process can work with it.
* The XMLHttpRequest object has gotten a facelift in the Html5 specifications. Specifically the XMLHttpRequest Level 2 specification (currently the latest version) that has included the following new features:
Handling of byte streams such as File, Blob and FormData objects for uploading and downloading Progress events during uploading and downloading
Cross-origin requests
Allow making anonymous request - that is not send HTTP Referer The ability to set a Timeout for the Request

NEW QUESTION 11
DRAG DROP
You are creating a function by using JavaScript. You have the following requirements:
The function must display loan amounts to the user within the following HTML element:
<div id="display"></div>
The loan amount of 2100 must display in the HTML element.
All declared variables and functions must be scoped to the myApp variable. You need to implement the function.
How should you complete the relevant code? (To answer, drag the appropriate code segments to the correct location or locations in the answer are a. Use only code segments that apply.)

Answer:

Explanation:

NEW QUESTION 12
You develop an application to host user-generated HTML and JavaScript content. A common error handler in your application must process all unhandled errors. You need to implement global error handling for the application.
Which code segment should you use?

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

Answer: A

Explanation: GlobalEventHandlers.onerror
An event handler for runtime script errors.
Syntax
window.onerror = funcRef;
Reference: GlobalEventHandlers.onerror

NEW QUESTION 13
DRAG DROP
You are creating a function by using JavaScript. The function accepts an object as the parameter and returns a string that identifies the data type of the object.
You have the following requirements:
The function must return "Number" if the object is a number
The function must return "String" if the object is a string
The function must return "Unknown" if the object is neither a number nor a string
You need to implement the function to meet the requirements.
How should you build the code segment? (To answer, drag the appropriate word to the correct location in the code segment. Each word 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: * Use the switch statement to select one of many blocks of code to be executed.
Syntax switch(expression) {
case n:
code block break;
case n:
code block
break; default:
default code block
}
This is how it works:
The switch expression is evaluated once.
The value of the expression is compared with the values of each case. If there is a match, the associated block of code is executed.
* 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".
* Description
All objects inherit a constructor property from their prototype: var o = {};
o.constructor === Object; // true var a = [];
a.constructor === Array; // true var n = new Number(3); n.constructor === Number; // true
* The constructor property is created together with the function as a single property of func.prototype.
Reference: JavaScript Switch Statement;Object.prototype.constructor

NEW QUESTION 14
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:

Explanation: * 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);
}
});

NEW QUESTION 15
DRAG DROP
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.
Reference: CSS3 @media Rule; CSS Media Types

NEW QUESTION 16
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

Explanation: 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 http://www.w3schools.com/tags/tag_nav.asp