EXAM 70-486 STUDY NOTES – PART 4

mvc

From this series onward we are going to focus on developing a user experience.

1: You create an ASP.NET AJAX page that uses a custom jQuery component. When the component is loaded, all of its dependencies must be loaded automatically. You need to call a function to accomplish your goal.
Which function should you call?

  1. Sys.defineScripts
  2. Sys.registerScripts
  3. Sys.loadScripts
  4. Sys.require

We should use  sys.require function.It allows to specify component and its dependencies to be loaded automatically.

Explanation :

You should not call Sys.loadScripts. It allows you to specify a component to be loaded in parallel. Its dependencies are not loaded automatically.
You should not call Sys.registerScripts. It allows you to notify the Script Loader when a component is loaded. It does not allow you to automatically load script dependencies.
You should not call Sys.defineScripts. It allows you to specify the dependencies for a component. It does not allow you to automatically load the dependencies . Look into this post on sys-require-vs-sys-loadscripts-vs-sys-loader

2. An ASP.NET MVC 5 page contains the following markup:

You need to call a JavaScript function named Animate whenever a user changes the selected item in one of the DropDownList controls or changes the text in one of the TextBox controls.
You need to use jQuery to accomplish your goal.
Which code segment should you use?

Explanation:

You should use the following code segment:
$(document).ready(function () {$(“input:text,select”).change(Animate);});
This code statement registers a handler for the change event of all select elements and text input elements. The event handler is the Animate function. This means that whenever the value of the select or text input elements change, the Animate function is called.

 

3. You create an ASP.NET Web application that accesses the latest exams from a web service at http://www.measureup.com/GetExams. The service is hosted on a separate but trusted domainThe Callback function’s name is based on a query string parameter named Callback that is passed to the service. You want to use jQuery to call the web service, and then call a function named ProcessExams when the data is returned.
You need to write code to accomplish your goal.
Which code segment should you use?

Explanation:

you should use the last segment of code specifying jsonp as a datatype . Why ? when a service is in a different domain from the application, most modern web browsers do not call client-script to inject data into a page for security reasons. Jsonp is a protocol that dynamically creates a script tag and a function on the page to serve as a callback for the data being returned from a service. In all other cases where JsonP is not used the browser will not allow to access web services across domains. For simple example look into this example on w3school.

 

4. You are developing an application that displays addresses in an H TML table. Using JavaScript, you need to extend the behavior of the strings so that you can easily format the postal code portion of the address. You need to extend the string object so that all instances have a formatPostalCode method. Which code should you use? (More than one answer choice may be correct. Choose the BEST answer.)

Explanation:

You should use the following: String.prototype.formatPostalCode = formatPostalCode;
In JavaScript, the prototype object allows you to define new properties and methods that are shared against all instances of the object. This statement will assign the formPostalCode function to the String object prototype and future objects of type String will have a formatPostalCode method.

You should not use the following:

This statement will work, but unnecessarily wraps the formatPostalCode in an anonymous function that is immediately invoked.

5. You have developed a resource scheduling web application. The resource status page uses jQuery to make AJAX calls. As each response is received, the addStatus function is called, providing the status in the status Value variable. You have created the following code (line numbers are for reference purposes only):

Using the statusltem variable, you must add a new item to the un-ordered list called status list. You need to add a statement to line 03 so that the item is inserted at the beginning of the statusList list.
What statement should you use?

You should use the following:

The prepend method will add statusltem to the beginning of the list.

6. While maintaining an existing ASP.NET MVC web application, you come across the code shown in the exhibit. What will be printed in the console?

Don is a Developer Don is a Developer
Don is a Developer Lisa is a QA tester
Lisa is a QA tester with an hourly rate of 25 Lisa is a QA tester with an hourly rate of 25
Don is a Developer Lisa is a QA tester with an hourly rate of 25.

The code shows an example of prototypal inheritance. The HourlyEmployee is inheriting from the Employee object. Each object has its own toString() function that prints the information associated with that object.The Employee function takes a name and a title as parameters, and the toString() function prints this information. The same applies to HourlyEmployee. Upon running the code, the following will be displayed in the console:
Don is a Developer Lisa is a QA tester with an hourly rate of 25

7. You are creating an ASP.NET MVC form to which the user will be entering a phone number, among other things. The code in the exhibit is validating the user input.  What will be displayed in the console?

Output : 

  • 1800 555 6677    11 800 555 6677
  • false false
  • true false
  • true true

It will display true false :

The code is validating a phone number. The test function returns either true or false. A regular expression starts with ^ and ends with $. The question mark matches the preceding item 0 or 1 time.
Therefore, you have the option of placing a 1 in front of the number. The sets of numbers are separated by spaces, dashes, or parentheses. The first number matches the criteria and the result prints true. The second number starts with 11 and does not match the criteria. Therefore, false is written to the console.
The test function does not return the actual number. Therefore, it is not possible to print the numbers with spaces in between.

8. You are creating a Microsoft ASP.H ET MVC application. You need to redirect a user to a page named HomeMobile.aspx if the user is browsing on a mobile device. Which code segment should you use?

You should use first option  if (Request.Browser.IsMobileDevice) { Response. Red rect(“HomeMobile.aspx”): }
The Request.Browser property returns an HttpBrowserCapabilities instance that allows you to determine the capabilities of the user’s browser. The IsMobileDevice property returns a Boolean value that indicates whether or not the user is browsing on a mobile device.

You should not use the following code segment:

This code checks the Request dictionary for a key named IsMobileBrowser and redirects the request only if the value for the key is true. This is not the correct way to determine the mobile device capability of a browser. A key named IsMobileBrowser does not exist to represent a mobile device.

You should not use the following code segment :

The Request.UserAgent property returns the value of the HTTP User-Agent header. It does not allow you to determine the mobile device capability of a browser. Instead, it allows you to determine the client software that initiates the web request.

You should not use the following code segment :

This code determines whether the user’s browser is named MobileBrowser. It does not allow you to determine the mobile device capability of the user’s browser.

9. BCD Train is upgrading an ASP.NET web forms application to include rendering for multiple browser sizes. The following markup exists on a page:

You need to ensure that the mobile.css style sheet is only applied when the page’s width is 800 pixels or less.
Which attribute would you add to the link element?

You should use last option in list  add the following markup to the link element:

The media attribute of the link element uses a media query to determine whether or not a stylesheet is applied to a page. In this scenario, the query is max-width:800px. This means that mobile.css is applied only if the browser’s width is 800 pixels or less.

The viewport in third option element has no effect on link .

The first option causes link element to be invalid @media is only applicable in style element.

The second option set the max width of the page to 800 pixels.

10: You are responsible for the user interface of a popular real estate web application. Because the application will be used on mobile device browsers and desktop browsers alike, you will need the user interface to change accordingly.
In your stylesheet, you have styles that should only be applied if the browser window width is less than or equal to 320px.
Which media query statement should you use?

You should use the third snippet in the code above . The styles contained within this statement will only be applied if the browser window width is less than or equal to 320px.

You should not use the following:

The styles contained within this statement will only be applied if the browser window width is greater than or equal to 320px.

You should not use the following:

The styles contained within this statement will only be applied if the browser window width is equal to 320px.
You should not use the following:

The styles contained within this statement will only be applied if the screen width is less than or equal to 320px.

You should not use the following:

The styles contained within this statement will only be applied if the screen width is greater than or actual to 320px.

You should not use the following:

The styles contained within this statement will only be applied if the screen width is equal to 320px.

11: You are designing the user interface for a web application using a responsive design. While testing the application on a mobile phone browser, you find that you must manually zoom in to make the content legible. To provide the best experience to mobile users, the content should render without requiring adjustments by the user. The user should still be allowed to adjust the content size for accessibility purposes.
Which viewport meta tag should you add to your design?

You should choose the second option in the code snippet which set initial-scale to 1 and use device-width . With initial-scale set to 1, the content will be rendered without scaling. Setting width to device-width will allow the responsive design to apply the correct styles using media queries.

None of Other options specify the width, so the responsive design may not render as expected.

12: You are developing a game application using H TML.5. When the user clicks on a specific key, the associated action takes place. You need to associate these events with JavaScript functions. Which method should you use?

we can use 1st or last option to accomplish this task . attachEvent is a legacy method supported by older browsers. In addition, attachEvent requires the complete name of the event, which is onclick. Therefore, addEventlistener is the correct method to use.

setCapture is used to assign an object to capture all mouse events.

stopPropagation prevents capturing or bubbling of an event beyond the current object

13: You are creating a web application, and you want to support Google Chrome and Apple Safari web browsers. Which vendor-specific extension do you need to include with CSS3 properties?

  • -moz-
  • -ms-
  • -webkit-
  • -o-

To create the Css3 Chrome/Safari vendor-specific properties, you need to precede each property with –webkit– .  -ms- is for Microsoft Internet Explorer (1E), -o- is for Opera Software, and -moz- is for Mozilla Firefox.

14. You are creating an ASP.NET MVC web application with different views to support different browsers and devices, such as test.IPad.cshtml.
You need to implement the application so it knows to look for specific views. What should you do?

  • Add logic to the action methods to select the appropriate view based on the request.
  • Add a new DisplayModeProvider for each of the view types you want to support.
  • Use the viewport <meta> tag.
  • Use the window.addEventListener method.

You should add a new DisplayModeProvider for each of the view types you want to support. Display modes provide a way of separating page content from the way it is rendered on different devices. All you need to do is to define a display mode for each device that you are interested in using the DisplayModeProvider. On the other hand, you can add logic to the action methods for each of the view types you want to support. However, this is a very time consuming task and prone to errors. Look into this post to learn how to use DisplayModelProvider

15. Your company is creating a web application for both desktop and mobile devices. Several style sheets must be applied based on client capabilities and screen size. A page contains the following markup:
<div id=”contentDiv”/>
You need to dynamically hide the div element on devices that have a browser width of 600px or less. What should you do?

we should use the second option  with style and max-width

The @media rule allows you to target specific CSS rules to specific media features, width, height, and color. The (max-width:600px) property-value pair indicates that the enclosed rules apply when the page’s width is less than or equal to 600 pixels. The enclosed rule sets the display property of the div element to none. By setting the display property to none, you prevent the associated element from being displayed or taking up any space.

16. An ASP.NET MVC razor application contains markup in a file named Header.cshtml. The file exists in the Views\Shared folder. You need to display the markup in the Header.cshtml file on a page. Which code segment should you use?

All the options that specify file extension will not work . Partial method accept view name without file extension

You should use the following code segment:

The Partial method returns a string that represents the HTML representation of a partial view. The partial view is specified as a parameter to the method, without the file extension.

17: You are using Razor syntax to build a view in your application. The Preview property on the view model is a string that contains an HTML fragment. From within the view, you need the HTML fragment to be rendered in the browser so that it is displayed unencoded and shows the HTML markup. Which option should you use? (Choose all that apply.)

You should use the following:  @HtmI.Raw(ModeI.Preview) or (new HtmlString(Model.Preview))   Both of these methods prevent the output from being encoded.

18:  You are creating an ASP.NET MVC web application. On the login screen, the user can enter a username and password. When you load the page in the browser and view the source, you see the following:
User name: <input name=”userName id=”userName” type=”text” size=”15″ value=””>
What Razor syntax code generated the HTML segment above? 

This code is used to generate the HTML segment:

One of the overloads for @Html.TextBox() accepts the name, value, and HTML attributes

This code indicates a placeholder as a part of the object in the third parameter:

User name: @Html.TextBox(“userName”, RequestruserNamel, new { @placeholder = “userName”})

The placeholder is not rendered in the HTML and not part of the requirement. This also does not set the size.
The code using an <input> tag that indicates the size has a different value, and it is not bound to the model.
Finally, the code using EditorFor does not set the size requirement.

19: A page in an ASP.NET MVC razor application contains the following markup:

The markup displays a tabular list of exams. You need to ensure that the first cell of each exam row is set to bold font. Which CSS markup should you use?

Answer :

You should use the following markup:  td:nth-child(1){ font-weight bold; }
The nth-child selector allows you to select a specific element that is the nth child of its parent element. The value in parenthesis represents the specific child element to which the rule applies. In this scenario, td:nth-child(1) selects the first td element of its parent element. This markup applies to the first cell of each data row in this scenario.

we should not use the following markup: tr:first-chi Id { font-weight: bold; } The trfirst-chiId selector allows you to select all tr elements that are the first child of their parent elements. This markup applies to the header row in this scenario.
You should not use the following markup:
tr>td { font-weight: bold; }
This applies to all td elements that are children of tr elements. All cells would be in bold font.
You should not use the following markup:
tr +td { font- wei ght bold; }
This applies to td elements that are siblings of tr elements. No cells would be in bold font because there are no td elements that are siblings of tr elements.

20:You are creating an ASP.NET MVC application, and you need to leverage the new H TML5 elements.
You need to ensure that optional content can be open or closed using a standard widget.
Which element should you use?

  • <details>
  • <aside>
  • <summary>
  • <article>

Because the details element is intended for additional information that can be collapsed, it is a good fit for this scenario. It is used in conjunction with the summary element.
The article tag defines an article in the document and the content cannot be open or closed (unless you add functionality to support it). The aside element is intended for supplemental information such as a sidebar or an advertisement. Although the summary element is used with the details element, it displays a visible heading for collapsible information.

Leave a Reply

Your email address will not be published. Required fields are marked *