شعبي ميوزك: JavaScript

‏إظهار الرسائل ذات التسميات 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 to pass an element or document or window object

iii) invoke $() is to pass a string of JavaScript code

iv) invoke $() is to pass a function to it

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

5) The jQuery library defines a number of utility functions, one of them is ............ function for general purpose iteration and another is ............ function for parsing JSON text.

A. jQuery.each(), jQuery.JSONtext()

B. jQuery.iterate(), jQuery.parseJSON()

C. jQuery.each(), jQuery.parseJSON()

D. jQuery.general(), jQuery.parseJSON()

6) The value returned by $() are ......... ,they are array like, they have a length property and have numeric properties from o to length -1.

A. jQuery result

B. jQuery objects

C. jQuery array

D. jQuery length

7) In order to loop over all elements in a jQuery object, you can call the .......... method instead of writing a for loop.

A. array.map()

B. index()

C. each()

D. map()

8) ......... method expects a callback function as its sole argument, and it invokes that callback function once for each element in the jQuery object in document order.

A. array.map()

B. index()

C. each()

D. map()

9) ........... accepts a callback function as its argument and invokes that function once for each element of the jQuery object.

A. is()

B. index()

C. each()

D. map()

10) ........ takes a selector as its argument and returns true if at least one of the selected elements also matches the specified selector.

A. is()

B. index()

C. each()

D. map()

11) ........ handles browser incompatibilities and special cases and allows you to use either HTML attribute names of their JavaScript property equivalents.

A. attr()

B. removeattr()

C. handleattr()

D. useattr()

12) Match the following methods for working with the class attribute defined by jQuery with their definitions.

i) addClass()           a) tests for the presence of specified class

ii) toggleClass()      b) adds classes to elements that don't already have

iii) hasClass()        c) remove classes from selected elements

iv) removeClass()   d) adds classes from selected elements

A. i-b, ii-c, iii-d, iv-a

B. i-c, ii-d, iii-a, iv-b

C. i-d, ii-c, iii-b, iv-a

D. i-d, ii-b, iii-a, iv-c

13) ........ is a method for setting and querying the value attribute of HTML form elements and also for querying and setting the selection state of check boxes, radio buttons and <select> elements.

A. set()

B. val()

C. query()

D. attr()

14) In jQuery, .......... method measures positions relative to the document and returns them in the form of an object with left and top properties that hold the X and Y coordinates.

A. offset()

B. position()

C. offsetparent()

D. setparent()

15) The .......... method is like offset(), except that it is a getter only and it returns element positions relative to their offset parent, rather to the document as a whole.

A. width()

B. position()

C. offsetparent()

D. setparent()

Answers

1) D. All i, ii, iii and iv
2) A. jQuery.noConflict()
3) D. All of the above
4) B. i, ii and iv only
5) C. jQuery.each(), jQuery.parseJSON()
6) B. jQuery objects
7) C. each()
8) C. each()
9) D. map()
10) A. is()
11) A. attr()
12) D. i-d, ii-b, iii-a, iv-c
13) B. val()
14) A. offset()
15) B. position()

For more Multiple Choice Questions (MCQs): Click Here

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, the registered function will be invoked as many times as it was registered.

A. addEvent()

B. addMultipltEvent()

C. attachEvent()

D. reattachEvent()

5) Which of the following statements about the arguments of addEventListener() is/are True.

i) The first argument to addEventListener() is the event type for which the handler is being registered.

ii) The second argument to addEventListener() is the function that should be invoked when the specified type of event occurs.

iii) The third argument to addEventListener() is a numerical value.

A. i and ii only

B. i and iii only

C. ii and iii only

D. All i, ii and iii

6) When an event occurs on an object, all of the handlers registered for that type of event are invoked, in the order in which they were .........

A. occurred

B. registered

C. invoked

D. initialized

7) Invoking .......... more than once on the same object with the same arguments has no effect, the handler function remains registered only once, and repeated invocation does not alter the order in which handlers are invoked.

A. addEvent()

B. addMultipltEvent()

C. attachEvent()

D. addEventListener()

8) State which of the following statements are True or False about the rules of invocation order for event handler in JavaScript.

i) Handlers registered by setting an object property of HTML attribute, if any are always invoked first.

ii) Handlers registered with addEventListner() are invoked in the order in which they were registered.

iii) Handlers registered with attachEvent() may be invoked in any order and the code should not depend on sequential invocation.

A. i-True, ii-True, iii-False

B. i-True, ii-False, iii-False

C. i-True, ii-True, iii-True

D. i-False, ii-False, iii-True

9) .......... is universally supported also it works in all browsers including IE, and works for all handlers, regardless of how they are registered.

A. Event bubbling

B. Event handling

C. Event capturing

D. Event registering

10) ............, only works with event handlers registered with addEventListner() when the third argument is True.

A. Event bubbling

B. Event handling

C. Event capturing

D. Event registering

11) In browsers that support addEventListner(), we can also cancel the default action for an event by invoking the ........... method of the event object.

A. preventBrowsers()

B. preventDefault()

C. preventPropagation()

D. preventEvent()

12) The .............. event is fired when the document has been loaded and parsed and any deferred scripts have been executed.

A. DOMContent()

B. DOMContentLoad()

C. DOMLoaded()

D. DOMContentLoaded()

13) .......... is a user interface for transferring data between a "drag source" and "drop target" that may be in the same application or in different applications.

A. Drag-and-drop

B. User-drag-and-drop

C. Drag source-and-drop target

D. Source-drag-and-drop-target

14) Which of the following statements are True about the APIs for Implementing Drag-and-drop.

i) They have to tie into the underlying OS so that they can work between unrelated applications.

ii) They must provide a way for a drag source to specify the icon or image to be dragged.

iii) They must provide event-based notification to both the drag source and drop target of the progress of the Drag-and-drop interaction.

A. i and ii only

B. i and iii only

C. ii and iii only

D. All i, ii and iii

15) ......... objects have altKey, ctrlKey, metaKey and shiftKey properties, which are set to True if the corresponding modifier key is held down when the event occurs.

A. Key down

B. Key event

C. Key up

D. Key press

Answers

1) A. Device dependent input events
2) D. State change events
3) C. User interface events
4) C. attachEvent()
5) A. i and ii only
6) B. registered
7) D. addEventListener()
8) C. i-True, ii-True, iii-True
9) A. Event bubbling
10) C. Event capturing
11) B. preventDefault()
12) D. DOMContentLoaded()
13) A. Drag-and-drop
14) D. All i, ii and iii
15) B. Key event

For more Multiple Choice Questions (MCQs): Click Here

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 the outside of its border.

A. offesetLeft and offesetTop

B. clientWidth and clientHeight

C. clientLeft and clientTop

D. scrollWidth and scrollHeight

6) ........... are the size of an element's content area plus its padding plus any overflowing content.

A. offesetLeft and offesetTop

B. clientWidth and clientHeight

C. clientLeft and clientTop

D. scrollWidth and scrollHeight

7) Which of the following expressions in JavaScript is/are True, if we have to select a form name "address" has a first element with name "street".

A. document.forms.address[0]

B. document.forms.address.street

C. document.address.street

D. All of the above

8) Which of the following is/are the valid expressions, if we have to select a <form> with a name="address" attribute.

i) window.address

ii) document.address

iii) document.forms.address

iv) document.forms[n]

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

9) .......... method returns a selection object that describes the current selection as a sequence of one or more range objects.

A. window.objectSelection()

B. window.getSelection()

C. document.getSelection()

D. document.currentSelection()

10) State whether the following statements are True or False for the document.write() method in client side JavaScript.

i) The document.write() method was one of the very first scriptable APIs implemented by Netscape2 web browser.

ii) document.write() concatenates its string arguments and inserts the resulting string into the document at the location of the script element that invoked it.

iii) The document.write() method is commonly used in modern code i.e. innerHTML property and other DOM techniques.

A. i-True, ii-True, iii-False

B. i-True, ii-False, iii-False

C. i-True, ii-True, iii-True

D. i-False, ii-False, iii-True

11) When a document contains scrollable elements with overflowing content, the ............ method doesn't work correctly because it does not take scroll bar position into account.

A. getElementPosition()

B. getScrollPosition()

C. getScrollOffsets()

D. getBoundingClientRect()

12) .......... method is used in the case of passing the coordinates of the mouse pointer to determine which element the mouse is over.

A. getBoundingClientRect()

B. getElementFromPoint()

C. elementFromPoint()

D. getElementCoordinates()

13) The .......... method of the window is similar to scroll() and scrollTo(), but its arguments are relative and are added to the current scroll bar offsets.

A. scrollTop()

B. scrollBy()

C. scrollLeft()

D. scrollIntoView()

14) The ......... method ensures that the element on which it is invoked is visible in the view-port.

A. scrollTop()

B. scrollBy()

C. scrollLeft()

D. scrollIntoView()

15) The .......... property specifies which element the properties are relative to and if it is null, the properties are document object.

A. offsetLeft

B. offsetTop

C. offsetParent

D. offsetRelative

Answers:

1) A. scrollTo()
2) C. getBoundingClientRect()
3) C. Both A and B
4) B. clientWidth and clientHeight
5) C. clientLeft and clientTop
6) D. scrollWidth and scrollHeight
7) D. All of the above
8) D. All i, ii, iii and iv
9) B. window.getSelection()
10) A. i-True, ii-True, iii-False
11) A. getElementPosition()
12) C. elementFromPoint()
13) B. scrollBy()
14) D. scrollIntoView()
15) C. offsetParent

For more Multiple Choice Questions (MCQs): Click Here

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.

ii) innerText is treated as a read-only property for certain table elements such as <table>, <tbody> and <tr>

iii) The textContent property is a straightforward concatenation of all Text node descendants of the specified element.

A. i-True, ii-True, iii-False

B. i-True, ii-False, iii-False

C. i-True, ii-True, iii-True

D. i-False, ii-False, iii-True

6) To insert element content as Text Nodes, .......... property is read/write and you can set it to change the content displayed by a Text or CDATASection node.

A. nodeContent

B. nodeType

C. nodeText

D. nodeValue

7) We can create new element nodes with the ........ method of the document object which can pass the tag name of the element as the method argument.

A. createElement

B. createNode

C. createDocumentNode

D. createElementNode

8) Every node has ........... method that returns a new copy of the node and passes true to recursively copy all descendants as well, or false to only make a shallow copy.

A. importNode()

B. cloneNode()

C. copyNode()

D. passNode()

9) ........... returns a copy suitable for insertion into the document and passes true as the second argument to recursively import all descendants.

A. importNode()

B. cloneNode()

C. copyNode()

D. passNode()

10) ........ is invoked on the element node that you want to insert into, and it inserts the specified node so that it becomes the last child of that node.

A. insertBefore()

B. appendChild()

C. insertAfter()

D. appendNode()

11) .......... takes two arguments, the first argument is the node to be inserted and the second argument is the node before which that node is to be inserted.

A. insertBefore()

B. appendChild()

C. insertAfter()

D. appendNode()

12) State whether the following statements are True or False for inserting nodes.

i) If you pass null in the second argument, the insertBefore() behaves like appendChild() and inserts at the end.

ii) If you call appendChild() or insertBefore() to insert a node that is already in the document, that node will automatically be removed from its current position and reinserted at its new position.

A. i-True, ii-False

B. i-False, ii-True

C. i-False, ii-False

D. i-True, ii-True

13) A .......... is a special kind of node that serves as a temporary container for other nodes.

A. Document Node

B. Document Partial

C. Document Fragment

D. Document Temporary

14) .......... can have any number of children, which we can manipulate with appendChild(), insertBefore() and so on.

A. Document Node

B. Document Partial

C. Document Fragment

D. Document Temporary

15) The ........... method allows us to determine the current position of an element in a view-port.

A. getBoundingClientRect()

B. elementFromPoint()

C. getElementByTagName()

D. pageXoffset()

Answers:

1) A. insertAdjacentHTML()
2) C. textContent
3) D. innerText
4) B. innerText
5) C. i-True, ii-True, iii-True
6) D. nodeValue
7) A. createElement
8) B. cloneNode()
9) A. importNode()
10) B. appendChild()
11) A. insertBefore()
12) D. i-True, ii-True
13) C. Document Fragment
14) C. Document Fragment
15) A. getBoundingClientRect()

For more Multiple Choice Questions (MCQs): Click Here

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 getElementsByTagName()

D. getElementsByClassName() and getElementsByTagName()

5) Like getElementsByTagName(), .......... can be invoked on both HTML documents and HTML elements, and it returns a live NodeList containing all matching descendants of the document or element.

A. getElementsById()

B. getElementsByName()

C. getElementsByClassName()

D. All of the above

6) .......... takes a single string argument containing a CSS selector and returns a Nodelist that represents all elements in the document that match the selector.

A. getElementsById()

B. getElementsByName()

C. getElementsByClassName()

D. querySelectorAll()

7) ........... is the ultimate element selection method and very powerful technique by which client side JavaScript programs can select the document elements that they are going to manipulate.

A. querySelectAll()

B. querySelector()

C. querySelectorAll()

D. querySelect()

8) The CSS selector ............ selects any <span> descendant of the element with id="log".

A. #log span

B. #log>span

C. #log=span

D. #log:span

9) The CSS selector ............ selects any <span> child of the element with id="log".

A. #log span

B. #log>span

C. #log=span

D. #log:span

10) The CSS selector .......... selects all <div> elements plus the element with id="log".

A. div #log

B. div.#log

C. div>#log

D. div, #log

11) ........... defines properties for the universal HTTP attributes such as id, title lang, and dir and event handler properties like onClick.

A. Element properties

B. HTMLElement

C. HTMLProperty

D. HTMLAttribute

12) ......... are not case sensitive, but JavaScript property names are.

A. Element properties

B. HTML element

C. HTML property

D. HTML attributes

13) .............. methods can be used to query and set non standard HTML attributes and to query and set attributes on elements of an XML document.

A. getAttribute() and setAttribute()

B. getElement() and setElement()

C. getDocument() and setDocument()

D. getHTML() and setHTML()

14) HTML elements defines two methods ............ to check for the presence of named attribute and remove an attribute entirely.

A. getAttribute() and setAttribute()

B. hasAttribute() and removeAttribute()

C. hasDocument() and removeDocument()

D. hasElement() and removeElement()

15) For XML documents the include attributes from other namespaces, can use the namespace variants of which of the following method(s).

A. getAttributeNS()

B. setAttributeNS()

C. hasAttributeNS()

D. All of the above

Answers:

1) D. All i, ii, iii and iv
2) A. getElementById()
3) B. name
4) C. getElementsByName() and getElementsByTagName()
5) C. getElementsByClassName()
6) D. querySelectorAll()
7) C. querySelectorAll()
8) A. #log span
9) B. #log>span
10) D. div, #log
11) B. HTMLElement
12) D. HTML attributes
13) A. getAttribute() and setAttribute()
14) B. hasAttribute() and removeAttribute()
15) D. All of the above

For more Multiple Choice Questions (MCQs): Click Here

Solved MCQ on JavaScript Window Object set-4

1. State whether the following statement are True or False for timers.

i) Like setTimeout(), setInterval() returns a value that can be passed to clearInterval() to cancel any future invocations of the scheduled function.

ii) If you call setTimeout() with a time of 0ms, the function you specify is not invoked right way.

A. i-True, ii-False

B. i-False,ii-True

C. i-True, ii-True

D. i-False, ii-False

2. The href property of the .......... object is a string that contains the complete text of the URL.

A. location

B. pathname

C. port

D. search

3. The .......... method of the Location object makes the window load and display the document at the URL you specify.

A. search()

B. load()

C. replace()

D. assign()

4) The ......... method removes the current document from the browsing history before loading a new document.

A. search()

B. remove()

C. replace()

D. assign()

5) Which of the following statements are True or False for Location object.

i) When a script unconditionally loads a new document, the replace() method is often a better choice than assign().

ii) In addition to the assign() and replace() methods, the Location object also defines reload(), which makes the browser reload the document.

iii) A only way to make the browser navigate to a new page is to simply assign the new full URL directly to the location property.

A. i-True, ii-True, iii-False

B. i-True, ii-False, iii-False

C. i-False, ii-True, iii-True

D. i-False, ii-False, iii-True

6) The .......... properties of the location object are writable, and setting them changes the location URL and also causes the browser to load a new document.

A. URL composition

B. URL decomposition

C. URL parsing

D. URL component

7) The properties like protocol, host, hostname, port, pathname, search and hash of Location object specify the various individual parts of the URL, they are known as ............ properties.

A. URL composition

B. URL decomposition

C. URL parsing

D. URL component

8) Which of the following statements are True for history property of the window object.

i) The length property of the history object specifies the number of elements in the browsing history list.

ii) The history object has back() and forward() methods that behave like the browsers back and forward buttons do.

A. i only

B. ii only

C. Both i and ii

D. None of the above

9) ......... method of the history object, takes an integer argument and can skip any number of pages forward for positive arguments or backward for negative arguments in the history list.

A. back()

B. backward()

C. forward()

D. go()

10) ........ method brings webpage back like clicking the back button twice.

A. history.go(-2)

B. history.back.back()

C. history.back(2)

D. history.go(2)

11) Match the following properties of Navigator object to their description.

i) appName a) that identifies the operating system

ii) appVersion b) all the information along with appVersion

iii) UserAgent c) browser vender and version information

iv) platform d) full name of the web browser

A. i-b, ii-c, iii-d, iv-a

B. i-c, ii-d, iii-a, iv-b

C. i-d, ii-c, iii-b, iv-a

D. i-a, ii-d, iii-c, iv-b

12) The .......... property specifies whether the browser is currently connected to the network.

A. navigator.online

B. geolocation

C. javaEnabled()

D. cookiesEnabled()

13) A ........... object that defines an API for determining the user's geographical location.

A. navigator.online

B. geolocation

C. javaEnabled()

D. cookiesEnabled()

14) .......... displays a model dialog box containing HTML formatted content and allows arguments to be passed to, and a value returned from, the dialog.

A.alert()

B. conform()

C. prompt()

D. showModelDialog()

15) State whether the following statements are True or False for methods for displaying simple dialog box on window object.

i) alert() displays a message to the user and waits for the user to dismiss the dialog.

ii) conform() displays a message, waits for the user to click an OK or Cancel button and returns positive or negative value.

iii) prompt() displays a message, waits for the user to enter a string, and returns that string.

A. i-True, ii-False, iii-True

B. i-True, ii-True, iii-False

C. i-False, ii-True, iii-True

D. i-False, ii-False, iii-False

Answers:

1) C. i-True, ii-True
2) A. location
3) D. assign()
4) C. replace()
5) A. i-True, ii-True, iii-False
6) B. URL decomposition
7) B. URL decomposition
8) C. Both i and ii
9) D. go()
10) A. history.go(-2)
11) C. i-d, ii-c, iii-b, iv-a
12) A. navigator.online
13) B. geolocation
14) D. showModelDialog()
15) A. i-True, ii-False, iii-True

For more Multiple Choice Questions (MCQs): Click Here

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 allowing you to remove large blocks of JavaScript code from them.

ii) If a file of JavaScript code is shared by more than one page, it only needs to be downloaded once, by the first page that uses it.

iii) Linking to JavaScript code on Google servers can decrease the start-up time for the web pages, since the code already existed on all of the user's browser.

A. i-True, ii-False, iii-True

B. i-True, ii-True, iii-False

C. i-False, ii-True, iii-False

D. i-False, ii-False, iii-True

4) JavaScript code can register a/an ............. by assigning a function to a property of an element object that represents an HTML document in the document.

A. event handler

B. function handler

C. document handler

D. HTML handler

5) .......... specifies that the body of the URL is an arbitrary string of JavaScript code to be run by the JavaScript interpreter.

A. Javascript:web

B. JavaScript:code

C. JavaScript:protocol

D. JavaScript:interpreter

6) The ...... attribute causes the browser to defer execution of the script until after the document has been loaded and parsed and is ready to be manipulated.

A. sync

B. async

C. defer

D. All

7) The .......... attribute causes the browser to run the script as soon as possible but not to block document parsing while the script is being downloaded.

A. sync

B. async

C. defer

D. All

8) When the parser encounters a <script> element that has the ...... attribute set, it begins downloading the script text and continues parsing the document.

A. async

B. sync

C. parse

D. load

9) When the document is completely parsed, the document.readystate property changes to ......

A. ready

B. parsed

C. interactive

D. activated

10) Which of the following statements for restricted features of JavaScript is/are True.

A) A JavaScript program can open new browser windows, but must of the browsers restrict this feature.

B. A JavaScript program can close browser windows that it opened itself, but it is not allowed to close other windows without user conformation.

C. A script can read the content of documents loaded from different servers than the document that contains the script.

D. All of the above

11) ........... libraries are "frameworks" in the sense that they build a new higher-level API for client side programming on top of the standard and proprietary APIs offered by web browsers.

A. client-side framework

B. server-side framework

C. higher-level framework

D. web framework

12) The .......... library focuses on DOM and Ajax utilities, like jQuery does, and adds quite a few core-language utilities as well.

A. Dojo

B. Prototype

C. YUI

D. Closure

13) The ...... library is the client side library that Google uses for Gmail, Google Docs and other web applications.

A. Dojo

B. Prototype

C. GWT

D. Closure

14) ........ allow you to register a function to be invoked once or repeatedly after a specified amount of time has elapsed.

A. setTimeout()

B. setInterval()

C. Both A and B

D. None of the above

15) State True or False for the following Statements.

i) The setTimeout() method of the window object schedules a function to run after a specified number of milliseconds elapses.

ii) setTimeout() returns a value that can be passed to clearTimeout() to cancel the execution of the scheduled function.

iii) setTimeout() is like setInterval() except taht the specified function is invoked repeatedly at intervals of the specified number of milliseconds.

A. i-True, ii-False, iii-True

B. i-True, ii-True, iii-False

C. i-False, ii-True, iii-False

D. i-False, ii-False, iii-True

Answers:

1) D. All of the above.
2) D. All i, ii, iii and iv
3) B. i-True, ii-True, iii-False
4) A. event handler
5) C. JavaScript:protocol
6) C. defer
7) B. async
8) A. async
9) C. interactive
10) D. All of the above
11) A. client-side framework
12) B. Prototype
13) D. Closure
14) C. Both A and B
15) B. i-True, ii-True, iii-False

For more Multiple Choice Questions (MCQs): Click Here

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

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 two or more function arguments to toggle() it registers event handlers.

Here is an example that invokes methods for show/hide effect animation. The first image has show() effect animation, second image has hide() effect animation and the third animation has toggle() effect animation.

$("#img1").show(2000);
$("#img2").hide(3000);
$("#img3").toggle(1000);

Here are some examples to show show(), hide() and toggle() effects using jQuery.

Example of show() Effect

<script>
  $(document).ready(function(){
    $(#btn1).click(function () {
      $("#img1").show(2000);
    });
  });
  </script>

<input type=button id="btn1" value="Start Show"/>
<img id="img1" src="img1.jpg">

Example of hide() Effect

<script>
  $(document).ready(function(){
    $(#btn2).click(function () {
      $("#img2").hide(3000);
    });
  });
  </script>

<input type=button id="btn2" value="Start Hide"/>
<img id="img2" src="img2.jpg">

Example of toggle() Effect

<script>
  $(document).ready(function(){
    $(#btn3).click(function () {
      $("#img3").toggle(1000);
    });
  });
  </script>





<input type=button id="btn3" value="Start Toggle"/>
<img id="img3" src="img3.jpg">

Full jQuery code for Show/Hide effect image animation

<script 

src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</script>

<style>
.show_hide
{
 box-shadow:1px 1px 5px 2px #6DC83C;
 position:relative;
 width:448px;
 height: 336px;
 border-radius:19px;
}

.show_hide img
{
 border-radius:19px;
 position:absolute;
 left:0;
 top:0;
}

</style>

<script>
$(function(){
 $('.show_hide img:gt(0)').hide();
 setInterval(function(){$('.show_hide :first-child').hide(3000).next('img').show(3000).end

().appendTo('.show_hide');}, 6000);
});
</script>

<div class="show_hide">
<img src="img1.JPG" />
 <img src="img2.JPG" />
 <img src="img3.JPG" />
</div>

Preview of Show/Hide effect image animation

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"); 
// It fade outs over 200ms
$("#animation").fadeIn(5000);
//It fades an element in over 5000ms

You can also define new duration names by adding new string-to-number mappings to jQuery.fx.speeds as given below.

jQuery.fx.speeds["medium-fast"]=3000;
jQuery.fx.speeds["medium-slow"]=5000;

Here is an example to create animated visual effects using methods fadeIn() and fadeOut() in jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
jQuery.fx.speeds["medium-slow"]=3000;
jQuery.fx.speeds["very-slow"]=5000;
$(document).ready(function(){
 $("#btn1").click(function(){
$("#animation1").fadeIn(); 
$("#animation3").fadeIn(5000);
$("#animation5").fadeIn("medium-slow");
});
 $("#btn2").click(function(){
$("#animation2").fadeOut("fast");
$("#animation4").fadeOut("very-slow");
});
 });
</script>
<input type=button id="btn1" value="Start FadeIn"/><br/>
<div id="animation1" style="display:none;background:pink;">It fades an element in over 400ms</div><br/>
<div id="animation3" style="display:none;background:red">It fades an element in over 5000ms</div><br/>
<div id="animation5" style="display:none;background:yellow">It fades an element in over 3000ms</div><br/>

<input type=button id="btn2" value="Start FadeOut"/><br/>
<div id="animation2" style="background:red">It fade outs over 200ms</div><br/>
<div id="animation4" style="background:pink">It fade outs over 5000ms</div><br/>

Preview:

It fade outs over 200ms

It fade outs over 5000ms

You can also set the value of the document that was animated using a function as argument. Here is a jQuery code which quickly fade in an element and when it is visible, display some text in it.

<script>
$(document).ready(function(){
$("#btn4").click(function(){
$("#message").fadeIn("fast", function() {$("#message").text("Hello this is animation");});
});});
</script>
<input type=button id="btn4" value="Start Animation"/><br/>
<div id="message" style="color:red"></div>

Preview:

Passing a callback function to an effect method allows you to perform actions at the end of an effect. However, that is is not necessary when you simply want to perform multiple effects in sequence. If you call an animation method on an element that is already being animated, the new animation does not begin right away but is deferred until the current animation ends. For example, you can make an element blink before fading in permanently.

<script>
$(document).ready(function(){
$("#blinker").mouseover(function(){
$("#blinker").fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn();});
});
</script>
<div id="blinker" style="color:red"><h3>It blinks before fading in permanently</h3></div>

Preview:

It blinks before fading in permanently

jQuery's effect methods are declared to accept optional duration and callback arguments. It is also possible to invoke these methods with an object whose properties specify animation options.

<script>
$(document).ready(function(){
 $("#btn3").click(function(){
$("#effect").fadeIn({
duration: "slow",
complete: function(){$(this).text("Animation was completed");}
});});});
</script>
<input type=button id="btn3" value="Start Animation"/>
<div id="effect" style="background:yellow">This is sample animation effect</div>

Preview:

This is sample animation effect

How to Get and Set Element Attributes using jQuery

Some of the simplest and most common, operations on jQuery objects are those that get or set the value of HTML attributes, CSS styles, element content, or element geometry. In this post I am going to describe the methods to get or set HTML element attributes using jQuery.

How to Get and Set HTML Attributes using jQuery

You can get or set HTML attributes using attr() method in jQuery. The attr() method handles browser incompatibilities and special cases and allows you to use either HTML attributes names or their JavaScript property equivalents.

Here are some examples of uses of attr() method for getting or setting HTML attributes.

$("form").attr("action");  
// It gets the action attribute from the first form.

$("#icon").attr("src", "icon.gif");  
// It sets the src attributes for image with id icon.

$("a").attr("target", "_blank");  
// It set the target attributes for all links to load in new windows

$("a").attr("target", function(){
 if(this.host==location.host) return "_self"
 else return "_blank";
});

This function sets the attribute of all external links load in new windows and internal links load in the same window.

There is another method related to attr() is removeAttr(), which is related function that completely removes an attributes from all selected elements.

Here an example of uses of removeAttr() method for removing HTML attributes.

$("a").removeAttr("target");

It removes the target attribute of link and makes all links load in the same window.

How to Get and Set CSS Attributes using jQuery

The css() method is very much like attr() method, but is works with the CSS styles of an element rather than the HTML attributes of the element.

When querying style values, css() returns the current style of the element and the returned value may come from the style attribute or from a style-sheet.

Here are some examples getting and setting CSS attributes using attr() method.

$("h1").css("font-weight"); 
// It gets font weight of first <h1>

$("h1").css("font-variant", "smallcaps"); 
// It sets font-variant property of <h1> to smallcaps.

$("h1").css({backgroundColor:"black",textColor:"white",
 fontVariant:"small-caps", padding: "10px 2px 4px 20px", 
 border:"dotted black 4px"});   
// It sets multiple styles at once for <h1>

How to Get and Set CSS Classes using jQuery

jQuery defines convenience methods for working with the class attribute. addClass() and removeClass() add and remove classes from the selected elements. toogleClass() adds classes to elements that don't already have them and removes classes from those that do. hasClass() tests for the presence of a specified class.

Here are are some examples for adding css classes, removing css classes, toggling css classes and testing css classes.

Adding CSS Classes

$("h1").addClass("hilite");  
// It adds a class to all <h1> elements

$("h1+p").addClass("hilite first"); 
// It adds two classes to elements after <h1>

$("section").addClass(function(n){return "scetion"+n;}); 
// It passes a function to add a custom class to each matched element

Removing CSS classes

$("p").removeClass("hilite");  
// It removes a class from all p elements

$("p").removeClass("hilite first"); 
// It removes two classes from <p> elements

$("section").removeClass(function(n){return "scetion"+n;}); 
// It passes a function to remove a custom class to each matched element

Toggling CSS Classes

$("tr:odd").toggleClass("oddrow"); 
// It adds the class if it is not there or remove if it is.

$("h1").toggleClass("big bold");   
// It toggles two classes at once.

$("h1").toggleClass(function(n){
return "big bold h1-" +n; });  
// It toggles a computed class or classes.

$("h1").toggleClass("hilite", true); 
// It works like addclass

$("h1").toggleClass("hilite", false); 
// It works like removeclass

Testing CSS Classes

$("p").hasClass("first")  
// It tests any p element have class first

$("#lead").is("first") 
// It test any element with id lead have class first

The hasClass() method is less flexible than addclass(), removeClass, and toggleClass(). hasClass() works for only a single class name and does not support function arguments. It returns true if any of the selected elements has the specified CSS class and returns false if none of them do. The is() method is more flexible and can be used for the same purpose.

How to Get and Set HTML Form Values Using jQuery

For setting and querying the value attribute of HTML form elements val() method is used and it is also used for querying and setting the selection state of check-boxes, radio buttons, and select elements. Here are some examples of getting and setting HTML form values using val() method.

$("#firstname").val()  
// It gets value from the firstname text field.

$("select #extras").val() 
// It gets array of values from <select multiple< from element.

$("input:radio[name=ship]:checked").val() 
// It gets value of checked radio button.

How to Get and Set Element Content Using jQuery

The text() and html() methods query and set the plain-text or HTML content of an element or elements. When invoked with no arguments, text() returns the plain text content of all descendant text nodes of all matched elements. This works even in browsers that do not support the textContent or innerText properties. Here are some examples of getting and setting element content using text() and html() method

var title=$("head title").text() //It gets document title
var headline=$("h1").html() 
//It gets the html of first <h1> element

$("h1").text(function(n,current){
 return "$" + (n+1) + ": "+current }); 
// It gives section number for each headings

How to Get and Set Element Geometry Using jQuery

To query or set the position of an element, use the offset() method. This method measures positions relative to the document and returns them in the form of an object with left and top properties that hold the X and Y coordinates. It you pass an object with these properties to the method, it sets the position you specify. Here are some examples of getting and setting element geometry using offset() method

var elt=$("#sprite");
var position=elt.offset(); 
// It gets the current position of an elememt
position.top +=100;
// It changes its Y coordinate 100px.
elt.offset(position);

How to Get and Set Element Data Using jQuery

jQuery defines a getter or setter method named data() that sets or queries data associated with any document element or with the Document or window objects. You can also use removeData() method to remove data from an element or elements. Here are some examples of getting and setting element data using data() method removing data using removeData() method.

$("div").data("x",1); 
//It sets some data "x" to div
$("div.nodata").removeData("x"); 
//It removes some data "x" from div with class nodata
var x=$("#mydiv").data("x"); 
//It query some data from element id "mydiv"

Answers

Related Posts:

For more Multiple Choice Questions (MCQs): Click Here

Answers

Related Posts:

For more Multiple Choice Questions (MCQs): Click Here

Answers:

Related Posts:

For more Multiple Choice Questions (MCQs): Click Here

Answers:

Related Posts:

For more Multiple Choice Questions (MCQs): Click Here

Answers:

Related Posts:

For more Multiple Choice Questions (MCQs): Click Here

Answers:

Related Posts:

For more Multiple Choice Questions (MCQs): Click Here

Answers:

Related Posts: