Posts

Showing posts with the label JavaScript

Solved Objective Questions on jQuery Library set-1

1) Which of the following statements about the features of jQuery are True. i) jQuery has an expressive syntax for referring to elements in the document. ii) jQuery has an efficient query method for finding the set of document elements that match a CSS selector. iii) jQuery has a useful set of methods for manipulating selected elements. A. i, ii and iii only B. i, ii and iv only C. i, iii and iv only D. All i, ii, iii and iv 2) If you are using $ in your own code, or are using another library, such as prototype, that uses $, you can call .......... to restore $ to its original value. A. jQuery.noConflict() B. jQuery.removeConflict() C. jQuery.restoreDefault() D. jQuery.restoreFunction() 3) Which of the following is/are the sources of Content Distribution Network(CDN) for jQuery. A. jQuery CDN B. Microsoft CDN C. Google CDN D. All of the above 4) Which of the following are the different ways of invoking jQuery() function. i) invoke $() is to pass a CSS selector to it ii) invoke $() is t...

Solved MCQ on Handling Events in Client Side JavaScript set-8

1) ........... include legacy event types such as "mousedown", "mousemove", "mouseup", "keydown", "keypress","keyup","touchmove" and "gesturechange" events. A. Device dependent input events B. Device independent input events C. User interface events D. State change events 2) ............ are not triggered directly by user activity, but by network or browser activity, and indicate some kind of lifecycle. A. Device dependent input events B. Device independent input events C. User interface events D. State change events 3) ............ include the focus event, the change event when the user changes the value and the submit event when the user clicks a submit button. A. Device dependent input events B. Device independent input events C. User interface events D. State change events 4) ........... allows the same event handler function to be registered more than once. When an event of the specified type occurs, t...

MCQ on Scripting Documents in Client Side JavaScript set-7

1) .......... method of the window object takes the X and Y coordinates of a point in document coordinates and sets these as the scroll bar offsets. A. scrollTo() B. scrollLeft() C. scrollTop() D. scrollFor() 2) We can compute the position of the element with ..........., converts that position to document coordinates and then use the scrollTo() method. A. getBoundingClient() B. getBounding() C. getBoundingClientRect() D. getBoundingRect() 3) The read-only .......... properties of any HTML element return its on screen size, in CSS pixels. A. offsetWidth() B. offsetHeight() C. Both A and B D. None of the above 4) ......... are like offesetWidth and offesetHeight except that they do not include the border size, only content area and its padding. A. offesetLeft and offesetTop B. clientWidth and clientHeight C. clientLeft and clientTop D. scrollWidth and scrollHeight 5) ............. properties return the horizontal and vertical distance between the outside of an element's padding and ...

MCQ on Scripting Documents in Client Side JavaScript set-6

1) ........ method allows you to insert a string of arbitrary HTML markup "adjacent" to the specified element. A. insertAdjacentHTML() B. insertBeforeHTML() C. insertAfterHTML() D. insertAfterendHTML() 2) ..........property is used to insert plain text into a document without having to escape the angle brackets and ampersands used in HTML markup. A. insertText B. plainContent C. textContent D. plainText 3) ........... is similar to textContent property introduced by Microsoft for Internet Explorer browser. A. insertText B. plainContent C. textContent D. innerText 4) ........ does not return the content of <script> elements, also omits extraneous white-space and attempts to preserve table formatting. A. insertText B. innerText C. textContent D. plainContent 5) State whether the following statements about inserting element content as plain text are True or False. i) The textContent and innerText properties are similar enough that we can usually use them interchangeably. i...

Solved MCQ on Scripting Documents in JavaScript set-5

1) The DOM defines a number of ways to select elements, by using which of the following methods we can query a document for an element or elements. i) with a specified id attribute ii) with a specified name attribute iii) with the specified tag name iv) with the specified CSS class or classes A. i, ii and iii only B. i, ii and iv only C. i, iii and iv only D. All i, ii, iii and iv 2) We can select an element based on unique ID with the ........... method of the document object. A. getElementById() B. getElementsById() C. selectElementById() D. selectElementsById() 3) The ......... attribute is only valid on a handful or HTML elements, including forms, form elements, <iframe> and <img> elements. A. id B. name C. tag D. class 4) .......... return NodeList objects and properties like document.images and document.forms are HTML Collection objects. A. getElementsByName() and getElementsById() B. getElementsById() and getElementsByTagName() C. getElementsByName() and getElements...

Solved MCQ on Basic Client Side JavaScript set-3

1. JavaScript can help to increase the user experience with which of the following method for a web page. A. By creating animation and other effects to guide a user and help with page navigation. B. By sorting the columns of a table to make it easier for searching on table. C. By hiding certain content and revealing details progressively as the user "drills down" into that content. D. All of the above. 2. Which of the following are the ways to embed Client side JavaScript code within HTML documents. i) Inline, between a pair of <script> and </script> tags. ii) From an external file specified by the src attribute of a <script> tag iii) In an HTML event handler attribute, such as on-click or mouse over. iv) In a URL that uses the special JavaScript protocol. A. i, ii and iii only B. ii, iii and iv only C. i, ii and iv only D. All i, ii, iii and iv 3. State Whether the following Statement about src attribute on JavaScript. i) It simplifies the HTML files by all...

How to Create Show/Hide Effect in Image SlideShow Using JQuery

Image
The fadeOut() effect presented on the post "How to create Fade Effect in Image Slideshow using JQuery" which I have already posted, makes elements invisible but retains space for them in the document layout. The hide() method, by contrast, removes the elements from the layouts as if the CSS display property was set to none. When invoked with no arguments, hide() and show() simply hide or show the selected elements immediately. With a duration argument, however, they animate the hiding or showing process. hide() shrinks an element's width and height to 0 at the same time that it reduces the element's opacity to 0. show() reverses the process. toggle() changes the visibility state of the elements, it is invoked on, if they are hidden, it calls show(), and it they are visible, it calls hide(). As with show() and hide(), you must pass a toggle() to get an animated effect. Passing true to toggle() is the same as calling show() with no arguments. Note also that if you pass ...

How to Reveal the Contents using JavaScript?

If you wanted to show/hide(reveal) the contents in HTML document by using simple methods, it is possible by using a simple javascript code running in it. This feature not only helps to make your webpage more stylist and attractive, also helps to present main contents or headings for the first look. It also helps to minimize the space for webpage which have very long content. In this post, I am going to describe " How to Reveal the Contents using simple JavaScrpt code ". Here I am using simple CSS code to set the CSS property of HTML element show or hidden and executed a JavaScript function on window.onload event handler. You can use the following simple CSS code to set the CSS property of HTML element show or hidden. .reveal * {display:none;}  // This code specifies the display property of HTML element having class name "reveal" to none .reveal *.handle{display:block;} // This code specifies the display property of HTML element having class name "handle" f...

How to Create Animated Visual Effects Using jQuery

You can create animated visual effects by setting the CSS visibility property, i.e. making elements appearing and disappearing. Along with making an element appear and disappear, we might reduce the value of its opacity property over the certain period. This king of animated visual effect creates a more pleasing experience for user and jQuery makes them easy. jQuery defines simple methods such as fadeIn() and fadeOut() for basic visual effects. You can also use an animate() method for producing more complex custom animations.  Every animation has a duration that specifies how long the effect should last for. You can specify this as a number of milliseconds or by using a string. The string "fast" means 200ms and the sting "slow" means 600ms. If you specify a duration string that jQuery does not recognize, you will get a default duration of 400ms.  $("#animation").fadeIn(); // It fades an element in over 400ms $("#animation").fadeOut("fast...

How to Alter HTML Document Structure using jQuery?

HTML documents are represented as a tree of nodes rather than a linear sequence of characters, insertions, deletions, and replacements are not as simple as they are for strings and arrays. In jQuery there are some methods for making more complex changes to a document. There are number of method in jQuery for inserting and replacing elements, copying elements, wrapping elements and deleting elements. For insertion and replacement of elements in HTML document, you can use the methods append(), prepend() and replacewith().  You can copy HTML elements using clone() method and wrapp the elements using wrap(), wrapInner() and wrapAll() methods. For deletion of the element you can use empty(), reomve() and unwrap() methods.  How to Insert and Replace Elements using jQuery  You can use different methods to insert and replace elements using jQuery, each of the methods takes an argument that specifies the content that is to be inserted into the document.  The inserting can be ...