Top Interview Questions and Answers

Top Interview Questions and Answers
Interview Sortout

Browsing "Older Posts"

Browsing Category "Java Script"

Jquery noConflict()

By Dhananjay → September 21, 2018
What is noConflict() method in jQuery?
This is very important to differentiate scripts when we are using many JavaScript framework in our project.As we know jQuery uses dollar symbol ($) as shortcut. There are many other popular frameworks are there as Angular JS,Knockout JS,Kendo JS,Backbone JS,Ember ,Vue etc.
Suppose i one of these frameworks is using the $ symbol as shortcut then one of the scripts either jQuery or othe framework implemented parallel may stop working. noConflict is a method to avoid such situation in script.

We can create our self defined symbol or string as shortcut for jQuery. noConflict() return a reference and we can store this reference in a variable.

Example of noConflict() and self defined shortcut:



var jq = $.noConflict();
jq(document).ready(function(){
    jq("button").click(function(){
        jq("p").text("Hi there,Conflict resolved");
    });
});


Most Common Jquery Functions in various Interviews

By Dhananjay →
jQuery is a rich library and a very lightweight framework to provide javascript enhanced and modified functionality to our web page.
This is so popular because it has number of functions events, chaining properties and they make it convenient as well as easy to use.
Find some beautiful functions and their explanations in one line.

show(): display a hidden dom , set a style property display as Block.
hide(): Hide the selector from dom tree, visible on browser.
animate(): Apply animation effetcs with selectors.
empty(): Empty the the dom and also removes the child elements.
remove(): remove selector dom from tree
removeClass():remove class or classes from selectors
addClass():add class or classes to the selectors
toggleClass():add and remove simultaneously
stop():stop the propagation of event.
fadeIn():hide dom with a fading down effect.
fadeOut():display dom with a fadind out effect.
val():get the value of form elements.
text():get the text in dom.
html():get the HTML in dom.
child():find the child elements in dom.
parent():find the immediate parent elelment of the dom.
parents():find the parents of parent of selector in the dome tree .
siblings():find the parellel elements in the dom tree.
slideDown():display the dom with a sliding to downwards effect.
slideUp():hisde the dome with a sliding to up effect.
attr():get the attribute of DOM.
append():add the given object to the selector one after one, in a stack style. Object is added as last child always.
prepend():add the given object to the selector , but the object is added as the first child always.
after():add an object just after the selector.
before():add and object just before the selector.
css():add some inline css properties to the selector.
first():get the first element in the childs.
last():get the last element in the child.
eq():find the object of equal index passed to it.
noConflict():avoid conflicts with other javascript framework using $ as shortcut symbol.

jQuery Events Frequently asked in various Interviews

By Dhananjay →
jquery-interview-questions-answers
Jquery events are attached with some function and function called when event triggers. On a web page actions taken by visitors are events. They can be responded accordingly as click,change,blur,focus,keypress etc. Some common events as categorised as :
Mouse Events : click,dblclick,hover
Keyboard Events : keypress,keydown,keyup
Form Events : change,select,focus,blur
Window : load,scroll,resize

Most Common events and their explanation in one line:

click(): event is triggered when an element is clicked.
change(): event is triggered when the value of a form field is changed.
focus(): event is triggered when a form field is focused.
blur(): event is triggered when a form field is blured.
hover(): event is triggered when moue pointer hover the element.
focusin(): event is triggered when the chield of and element is focused.
focusout(): event is triggered when the chiled of an element is blured.
keydown(): event is triggered when a key from keyboard is pressed down.
keypress(): event is triggered when a key is pressed .keypress event is not fired for ALT, CTRL, SHIFT, ESC.
keyup(): event is triggered when a pressed key is released.
load(): event is triggered when a dom is loaded.
unload(): event is triggered when a dom is unloaded.
mouseenter(): event is triggered when mouse pointer enters the area.
mousedown(): event is triggered when left mouse button is clicked.
mouseout(): event is triggered when mouse pointer leaves the area.
on(): on event is used to add additional handler to dom element.
submit(): event is triggered when form is submitted.
scroll(): event is triggered when the window is scrolled.
select(): event is triggered when the a form element is selected, in combobox or dropdown list.
ready(): event is triggered when the dom is ready and loaded in tree.
resize(): event is triggered when window dimensions are resized.

AJAX Interview Questions Answers

By Dhananjay → June 29, 2018
AJAX Interview Questions Answers

What is AJAX?
Full form of AJAX is : Asynchronous JavaScript And XML.
AJAX facilitate a web pages to be updated asynchronously by exchanging data with a web server in background. It can update the webpage without reloading the whole page.

What are the main components that are used by AJAX?
AJAX components are :
1-A browser built-in XMLHttpRequest object
2-JavaScript and HTML DOM


What is XMLHttpRequest Object?
The XMLHttpRequest object can be used to request data from a web server without refreshing the whole page.It can send data to server in background and can request and receive data in background.


What are the request type used by XMLHttpRequest Object?
open() : It specify the type of request GET or POST
send() : Sends the GET request to the server
send(string) : Sends the POST request to the server

Give an Example of jQuery AJAX call.
A POST method AJAX example in jQuery:

  var empId = $("ul .emp").first().attr("id");
  var request = $.ajax({
    url: "myajaxcall.php",
    type: "POST",
    data: {id : empId},
    dataType: "json"
  });

  request.done(function(response) {
    console.log(response);
  });

  request.fail(function(jqXHR, ajax_status) {
    alert( "Request failed: " + ajax_status );
  });
 

What is difference between xhr.status and xhr.readyState.
xhr.status : used to determine whether the request was successful or not.
xhr.readyState : the state of the request'
xhr.readyState zero(0) means "has not yet been sent"
xhr.readyState zero(4) means "complete and response received"
The server provides the status, while the user agent provides the readyState.











Top jQuery Interview Questions and Answers

By Dhananjay → March 26, 2018
What is jQuery?
jQuery is a Javascript library which uses usage of Javascript very easy.We can handle events, manage CSS properties, DOM element, animation and many more utilities using jQuery library.It is an opensource. It is used by Microsoft, Google, IBM and almost the big players in software industries.

What are selectors?
jQuery selectors are the tool to identify the HTML elements and to manipulate properties. for example:
$(".name") : Class selector
$('#logo') : ID selector
$("button") : tag selector
$(this) : current dom selector

What are the selectors that we use in jQuery?
We use the following selectors in jQuery:
-Tag
-Class
-Id
-all (*)
We can derive more selectors using these main selectors.

What is an event?
An event is a user action. When a user interacts using UI it has to make many clicks, drag, drop, mouse over, change drop down, keypress actions, these actions are recognized by jQuery.

What are the common events that user make?
Most common events make by users are :
-click
-mouseover
-keypress
-keydown
-change
-input
-drag
-drop
-blur
-dblclick (double click)
-mouseenter


What is toggle()?
toggle() is a function which provides switching functionality between two actions, functions, properties etc. Suppose we can show and hide an element using toggle function.

What is callback?
A callback is a function which is called after when execution finished. We have to specify which function we have to call after a particular execution.

What is alert()?
alert() is used as a callback to show some warning, notification or error.

$("button").click(function(){
        alert("Clicked on button");
});

What is chaining in jQuery?
Chaining is calling of multiple functions in a single statement. for example :
$(".button").css("color", "#ececec").slideUp(1000).slideDown(2000).hide();

How to get value or text of an HTML element?
Since we know jQuery can manipulate HTML DOM, we can use functions to get value, text or html block inside an HTML element. For example

$('.first_name').val();  //geting value in input box having class as first_name

$('p').html();   //getting html inside a 'p' tag

$('textarea').text();  //getting text inside a textarea


How can we set values or HTML element?
very similar to getting the value, we can set values to elements. For example:

$('.first_name').val('Interview Sortout Blogs');  //geting value in input box having class as first_name

$('p').html('My blog is based on interview');   //getting html inside a 'p' tag

$('textarea').text('This blog is awesome. You are doing a verygood job,Interview Sortout');  //getting text inside a textarea


How to add or remove class from a HTML element?
jQuery have functions to add or to remove classes from an HTML elements. Please see the following examples:

$('button').addClass('btn-danger');
$('button').removeClass('btn-danger');


How to check that an element has a class?
We can use function hasClass().If class found it returns true, other wise returns false.

if($('button').hasClass('btn-danger')){
 alert('Button class is btn-danger');
}


What append() and prepend() functions do?
append() function , adds an HTML block after(at the end) a selector. For example :
$('p').append('Interview Sortout');

prepend() method, adds a block before or at the beginning of the selector. Example:

$('p').prepend('

Interview Sortout

');

What does parent() method do?
parent() method select the direct parent or immediate ancestor that is next to selector.

What does parents() method do?
parents() select all ancestors , the elements including parent of parent.

What childre() do?
children() method select the immediate child of the selector.

What does find() method do?
find() method search for the selector passed and selects from all the children of selector.

What does siblings() method do?
sibling() method returns all the elements having parralle relationship with selector. We can call them siblings.

How to call AJAX in jQuery?
An AJAX call example in jQuery:

var $post = $.ajax({
  url: "example.php",
  type: "POST",
  data: {id : product_id, product_name:product_name},
  dataType: "json"
});

$post.done(function(msg) {
  $("#log").html( msg );
});

$post.fail(function() {
  alert( "Request failed: Request Has been failed" );
});


More Java Script Related Interview questions and answers
  1. JSON Interview Questions and Answers
  2. Basic Java Script Interview Questions and Answers

Basic Java Script Interview Questions and Answers

By Dhananjay → March 15, 2018

What is Javascript?
Javascript is a client-side scripting language, used to enhance webpage functionality and User Experience.

What is the importance of Javascript in Web Development and Web design?
Javascript provide additional functionality to HTML elements. It handles the DOM and content dynamically. Javascript is used by all the giant players in software industries like Microsoft, Google, Facebook, Amazon etc.

How can we define a variable in javascript?
We can define a variable in javascript using 'var' keyword. for example :

var userName = 'Vishal Agrawaal';


What are the methods to return output in javascript?
We use alert(),console.log() and document.write() to display output in javascript.

What is an alert?
Alert is a dialog box to display some warning or error.It displays a message on dialogue and a close button or OK button by default.

How to get a value by the ID of the element?
We can find the value by using Javascript function
var employee_name = documenst.getElementById('element_id').value;

What is DOM?
The HTML DOM model is a tree of Objects and Objects are created by HTML the elements when page loaded.It allow us to acces the content and allow us to manipulate the HTML elements properties and attributes dynamically using Javascript or other script.


What is event?
An event is an action that takes place followed by any DOM activity or manipulation. Javascript provides a vast range of events that helps to create interactive interfaces in HTML. For example : onchange,onclick,onblur,onfocus,onmouseover,onkeypress,onkeyup,onmouseout,onload ect.


How to create a function in Javascript?
Syantx to create a function in javascript:

function myFunction(){
//function logic goes here
}


Can JavaScript replace PHP or JSP or ASP?
Never, Not comparable. Javascript is a client-side scripting language whereas PHP and other are the server-side scripting language. So there is no any reason for replacement.

How to define an array in Javascript?
Defining an array in javascript is similar to any other language:

var students=['Ram','Vishal','Rahul','Kallu','Ballu','Lallu'];


How to handle date in javascript?
Javascript provides a constructor Date(). We can use Objects created by Date() and can Handle dates.For example:

var date = new Date();
var today = date.getDay();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();


How to anver an array into an string in Javascript?
We have an array :

var cars = ["BMW", "Benz", "Toyota", "Ford"];
var carString= car.toString();

and result will be :BMW,Benz,Toyota,Ford .

What is the functionality of pop() in js?
pop() is a standard method in javascript and it removes the last element of an array when we apply.
for example, we can apply it on cars :

cars.pop();

Now cars array will be : ["BMW", "Benz", "Toyota"];

What is the functionality of push() in js?
pop() is a standard method in javascript and it adds an element at the end of an array when we apply.
for example, we can apply it on cars :

cars.push("FORD");

Now cars array will be : ["BMW", "Benz", "Toyota", "Ford"];

What is the functionality of splice() in js?
splice() added element/s at the particular index of an array and can remove some elements form the index. It can be used to relace some element in the array.

var cars = ["BMW", "Benz", "Toyota", "Ford"];
fruits.splice(1, 0, "Ferari");

Resulting array : ["BMW", "Ferari","Benz", "Toyota", "Ford"];
First parameter is the index of the elemnet where the new elemnet will be added and second is the number of elements will be removed from that index.

How to apply a for loop in an array in Javascript?
Example of for loop in javascript:

var text='';
for (var i = 0; i < cars.length; i++) { 
text += cars[i] + "
";
}
alert(text);