404

الصفحه التي تبحث عنها غير موجوده

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

SmSm 10:32 م JavaScript Multiple Choice Question (MCQ) 0

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

SmSm 11:45 م JavaScript Multiple Choice Question (MCQ) 0

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

SmSm 12:23 ص JavaScript Multiple Choice Question (MCQ) 0

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

SmSm 11:22 م JavaScript Multiple Choice Question (MCQ) 0

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

SmSm 10:31 م JavaScript Multiple Choice Question (MCQ) 0

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

SmSm 1:47 ص JavaScript Programming Guide 0

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

SmSm 11:17 م JavaScript Programming Guide 0

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 Alter HTML Document Structure using jQuery?

SmSm 9:40 م JavaScript Programming Guide 0

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 made into or before or after or in place of each selected elements. If the content to be inserted is an element that already exists in the document, it is moved from current location.

The append() method inserts an element at the end of selected element, prepend() method inserts an element at start of selected element and replaceWith() method replaces one selected element with another. For append(), prepend() and replacewith() the second argument is the current content of the element as an HTML string.

There are before() and after() methods, which can be used to insert before and after of each selected elements. For before() and after() the function is invoked with no second argument.

Here are some examples of jQuery codes for inserting and replacing elements using jQuery.

$("#clr").append("<br/>"+message); 
// It adds a content at end of the #clr element

$("h1").prepend(":"); 
// It adds colon sign at the star of each <h1>

$("h1").before("<hr/>");
// It insert horizontal line before each <h1> element

$("h1").after("<hr/>");
// It insert horizontal line after each <h1> element

$("hr").replaceWidth("<br/>");
// It replaces <hr/> elements with <br/>

$("h2").each(function(){
var h2=$(this);
h2.replaceWith("<h1>"+h2.html()+"</h1>");
});
// It replaces <h2> with <h1> keeping the content.

Similary, you can use appendTo(), prependTo(), insertAfter(), insertBefore and replaceAll() methods for the same purpose as given in the example below.

$("<br/>"+message).appendTo("#clr"); 
// It adds a content at end of the #clr element
$(document.createTextNode(":")).prependTo("h1"); 
// It adds colon sign at the star of each <h1>
$("<hr/>").insertBefore("h1");
// It insert horizontal line before each <h1> element
$("<hr/>").insertAfter("h1");
// It insert horizontal line after each <h1> element
$("<br/>").replaceAll("hr");
// It replaces <hr/> elements with <br/>

How to Copy Elements using jQuery

If you insert elements that are already part of the document, those elements will simply be moved, not copied to their new location.

If you want to copy elements to a new location instead of moving them, you must first make a copy with the clone() method. clone() makes and returns a copy of each selected element and all the descendent's of those elements.

An example for copying elements using clone() method is given below.

$(document.body).append("<div id="linklist"><h1>List of Links</h1></div>");
//It appends a new div with id "linklist", to the end of the document
$("a").clone().appendTo("#linklist");
//It copy all links in the document and insert them into that new div
$("#linklist>a").after("<br/>");
//It insert <br/> elements after each link so they display on separate lines

How to Wrap Elements using jQuery

Another type of insertion into an HTML document involves wrapping a new element or elements around one or more elements. jQuery defines three wrapping functions, wrap() wraps each of the selected elements, wrapInner() wraps the contents of each selected element and wrapAll() wraps the selected elements as a group.

$("h1").wrap(document.createElement("i"));
//It produces <i><h1> .....</h1></i>

$("h1").wrapInner("<i/>");
//It produces <h1><i>........</i></h1>

$("body>p:first").wrap("<a name="lead"><div class="first"></div></a>");
// It wraps the first paragraph in one anchor and div

$("body>p:not(:first)").wrapAll("<div class="rest"></div>");
//It wraps all the other paragraps in another div

How to Delete Elements using jQuery

Along with insertions and replacements, jQuery also defines methods for deleting elements. empty() removes all children including text nodes or each of the selected elements, without altering the elements themselves. The remove() method, by contrast removes the selected elements and all their content from the document. remove() is normally invoked with no arguments and removes all elements in the jQuery object.

 $("#hide").empty();
// It removes all the contents having id #hide

$("#rmv").remove(); 
// It removes the contents and events having id #rmv

You can use unwrap() method to perform element removal in a way that is the opposite of the wrap() or wrapAll() method. It removes the parent element of each selected element without affecting the selected elements or their siblings.

404

الصفحه التي تبحث عنها غير موجوده

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