Programming in HTML5 with JavaScript and CSS3 v15.0

Page:    1 / 17   
Total 247 questions Expand All

You are developing a customer web form that includes the following HTML input field.
<input id="txtValue"/>
If a customer enters a value in the input field, then it must be a numeric value.
You need to add validation to the input field.
Which HTML should you use?

  • A. <input id="txtValue" type-"text" pattern="/#" />
  • B. <input id="txtValue" type="number" />
  • C. <input id="txtVa!ue" type="integer" />
  • D. <input id="txtValue" type="text" required="required"/>


Answer : B

Explanation: HTML5 Input Types:
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

Reference: HTML Input Types -
http://www.w3schools.com/html/html5_form_input_types.asp

You are developing a web page that has a group of H1 and H2 elements. The page also includes a CSS class named underlineMe.
You have the following requirements:
-> The font color of all H1 and H2 elements must be changed to red.
-> The CSS class underlineMe must be applied to all H1 and H2 elements.
You need to update the web page to meet the requirements.
Which code segment should you use?


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


Answer : D

Explanation: The :header selector selects all header elements (<h1> to <h6>).
Reference: jQuery :header Selector
http://www.w3schools.com/jquery/sel_header.asp

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

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

You are developing an HTML5 web page.
The appearance of the text box must change when a user moves the focus to another element on the page.
You need to develop the page to respond to user action.
Which line of code should you use?

  • A. <input type="text" onblur="resetStyle(this);" />
  • B. <input type="text" onfocus="resetStyle(this);" />
  • C. <input type="text" onreset="resetStyle(this);" />
  • D. <input type="text" onselect="resetStyle(this);" />


Answer : A

Explanation: Definition and Usage
The onblur event occurs when an object loses focus.

Example -
Execute a JavaScript when a user leaves an input field:
<input type="text" onblur="myFunction()">

Reference: onblur Event -
http://www.w3schools.com/jsref/event_onblur.asp

You are developing a web page by using HTML5.
You have the following requirements:
-> An H1 element must be placed at the top left corner of the page.
-> The size and location of the H1 element must not change if additional elements are added to the page.
You need to position the H1 element on the page.
Which CSS3 style should you use?


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


Answer : A

Explanation: * The position property specifies the type of positioning method used for an element (static, relative, absolute or fixed). absolute: The element is positioned relative to its first positioned (not static) ancestor element
* For absolutely positioned elements, the left property sets the left edge of an element to a unit to the left/right of the left edge of its containing element.

CSS Syntax -
left: auto|length|initial|inherit;
length: Sets the left edge position in px, cm, etc.
Incorrect:
position static: Default value. Elements render in order, as they appear in the document flow
Reference: CSS position Property; CSS left Property

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>

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

Explanation: * 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

You are developing a website that has many web pages with hyperlinks to other sites.
You need to ensure that if a hyperlink contains an image, the linked web page opens in a new window.
Which jQuery code segment or segments should you use? (To answer, drag the appropriate line of code to the correct location. Each line of code 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:


* a img
All elements that are descendants of an element.
* (this).parent
This is the element and is the parent.

You are developing an HTML5 page. The page includes the following code.


The inner paragraph must be exactly 15 pixels from the top left corner of the outer paragraph. You set the left style for the inner paragraph to the appropriate value.
You need to set the position property of the inner paragraph.
Which value should you use?

  • A. absolute
  • B. static
  • C. fixed
  • D. relative


Answer : A

Explanation: absolute: The element is positioned relative to its first positioned (not static) ancestor element.
Incorrect:
Not D:
relative: The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position.
Reference: CSS position Property
http://www.w3schools.com/cssref/pr_class_position.asp

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, [email protected])
-> 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 :

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

Explanation: 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

You are developing a web page. You create a grid layout by using the following CSS segment.


You have the following requirements:
-> You must place content in the first column of the second row.
-> The content must span two columns.
You need to ensure that the style of the grid meets the requirements.
Which CSS segment should you use?

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


Answer : A

Explanation: -ms-grid-column-span
Gets or sets a value that specifies the number of columns of the grid that the object spans.
This property is read-only.

Property values -
The number of columns.
Integer value that specifies the number of columns to span.
Reference: -ms-grid-column-span property

You are developing a web page by using HTML5 and CSS3.
Hyperlinks on the page must be rendered with a style that reflects the last user action performed.
You need to style the four anchor elements in the document.
In what order should you specify the four anchor selectors? (To answer, move the appropriate anchor selectors from the list of CSS codes to the answer area and arrange them in the correct order.)




Answer :

You are developing an HTML5 page that includes several paragraph elements.
You have the following requirements:
Add a drop shadow that is one inch below the text in the paragraph
Set the radius of the drop shadow to five pixels
You need to style the paragraphs to meet the requirements.
Which CSS style should you use?

  • A. text-shadow: 72pt 0pt 5pt
  • B. text-shadow: 5px 1in 0px;
  • C. text-shadow: 72pt 5em 0px
  • D. text-shadow: 72pt 0em 5px;


Answer : D

Explanation: D is the most correct.
Reference: CSS Text Module Level 3
http://www.w3.org/TR/css3-text/#text-shadow
Note:
All options are incorrect nearest correct answers are B or D.
#obj {text-shadow: <x-offset> <y-offset> <blur-radius> <color>; }
<x-offset> +n right -n left
<y-offset> +n bottom -n top
1 inch below means <y-ffset> is 1in or 72 pt

Hence actually answer must be -
0px, 1in, 5px
or
0px, 72pt, 5px

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

Explanation: * 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

Page:    1 / 17   
Total 247 questions Expand All

Talk to us!


Have any questions or issues ? Please dont hesitate to contact us