Web Technology Experts Notes

Showing posts with label Frontend Interview Questions and Answers. Show all posts

Wednesday, 4 November 2020

JQuery Interview Questions And Answers For Experienced

jQuery is a fast, small, and rich-featured JavaScript library.

It makes things like HTML document traversal and manipulation, event handling, animation, Ajax and much simpler with an easy-to-use jQuery. Jquery works across a multiple of browsers.

With a combination of versatility and extensible, jQuery has changed the way that millions of people write JavaScript. It help for Fast development.

From: https://jquery.com/

Question: What is current stable version of jQuery?
Version: 3.4.1 (May 1, 2019)

Quesion: In Which language jQuery is written?
JavaScript

Question: What is offical website of jQuery?
https://jquery.com/

Question: Which file need to include to use jQuery functions.
We must include a jQuery file.
We can also include jQuery from their official website.
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Question: What are other jQuery Foundation Projects?

jQuery User Interface
jQuery Mobile
QUnit
Sizzle

Question: What is JQuery UI?
JQuery UI is a jQuery library where UI comes with cool widgets, effects and interaction mechanism. Whether you're building highly interactive web applications OR just need to add a date picker to a form control, jQuery UI is the perfect choice.

Question: From where I can get List of jQuery UI Demos?
http://jqueryui.com/demos/

Question: What are the different type of selectors in Jquery?
Following are 3 types of selectors in Jquery

CSS Selector
XPath Selector
Custom Selector

Question: What is the difference between jQuery-x.x.x.js and jQuery.x.x.x-min.js?
In terms of functionality, there is no difference between the jQuery-x.x.x.js and jQuery-x.x.x-min.js. jQuery-x.x.x-min.js also called minified version because in this file there is no space, no tab, no newline, small variable name and very less file size. Minified version load more faster as compare to normal jquery, that's why minified version used in production environment. However this can play a vital role in th

Question: What is the use of Delegate() Method in jQuery?
1. Attach an parent event to each one of its child elements.
2. Attach the event to the elements which is not available at the time of page loading (element will after page load).

Question: What does .size() method of jquery?
Return the number of elements in node.

$("div.webtechnologyexpert").size();

Question: What is the use of jQuery Connect?
It is used to connect or bind a function to another function.It is use to execute a function whenever a function from another object is executed. To use this you need to download the jquer.connect.js file.

        $.connect('fun1',fun2) 
        $.connect(null,'fun1',fun2) 
        $.connect(self,'fun1',fun2) 
        $.connect('fun1',null,fun2)

Question: What is the use of jQuery disconnect?
It is used to disconnect a function to another function.It is the opposite of $.connect

Question: What is the use of jQuery disconnectAll?
It is used to disconnect all the connected functions.

Question: What is the purpose of jquery-x.x.x-vsdoc.js?
Generally we will use jQuery-x.x.x-vsdoc.js to provide the intellisense support. We can even delete this file. But the thing is that it won't provide the intellisense support if we delete that file.

Question: How to hide and show a div?

$(document).ready(function(){
        $('div#mydiv').hide();
        $('div#mydiv').show();  
    });

Question: How to add data in empty div?

$(document).ready(function(){        
        $('div#mydiv').html();
});

Question: How to add click event on div in jQuery

    $(document).ready(function(){
        $("div#mydiv").click(function(){
            alert('mydiv is clicked')
        });
    });

Question: How to add double-click event on div in jQuery

    $(document).ready(function(){
        $("div#mydiv").dblclick(function(){
            alert('mydiv is double clicked')
        });
    });

Question: How to add hover event on div in jQuery?

    $(document).ready(function(){
        $("div#mydiv").hover(function(){
            alert('Hover on mydiv')
        });
    });

Question: Is jQuery dependened on operating system?
No, jQuery is independent of any operating system. It works similar in all operating system.

Question: Explain the features of jQuery?

Effects and animations on html
Ajax to send the server call
Extensibility
Add/Change on DOM
Add, Update, delete Events
CSS manipulation with use of jquery
We can add JavaScript Plugins
DOM traversal and modification with use of jquery

Question: Can constructors be parameterized?
Yes, It can be.

Question: What is Bootstrap, Extension and System Class loader? Can you explain primordial class loader?
Bootstrap class loader
Bootstrap class loader loads those classes those which are essential for JVM to function properly. Bootstrap class loader is responsible for loading all core java classes for instance java.lang.*, java.io.* etc.

The extension class loader
The extension class loader also termed as the standard extensions class loader is a child of the bootstrap class loader. Its primary responsibility is to load classes from the extension directories, normally located the "jre/lib/ext" directory. This provides the ability to simply drop in new extensions, such as various security extensions, without requiring modification to the user's class path.

The system class loader
The system class loader also termed application class loader is the class loader responsible for loading code from the path specified by the CLASSPATH environment variable. It is also used to load an application’s entry point class that is the "static void main ()" method in a class.

Question: How to Merge the contents of two or more objects together into the one/first object?.

jQuery.extend( [ deep ], targetobject, [ object List] )

Question: How do I check if an element is hidden in jQuery?
Since the question refers to a single element, this code might be more suitable.

// Checks CSS content for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");

// The same works with hidden
$(element).is(":hidden");

Question: How do I redirect to another webpage??

// similar behavior as an HTTP redirect
window.location.replace("https://www.web-technology-experts-notes.in/");

// similar behavior as clicking on a link
window.location.href = "https://www.web-technology-experts-notes.in/";

Tuesday, 3 October 2017

How to create built in web server in PHP?

Question: In which PHP Version Built-in web server come?
PHP 5.4

Question: Can we run php without apache?
Yes, We can run the php independent.

Question: Can we test our application with Built-in web server feature?
Yes, We can.

Question: Can we test our application with Built-in web server feature?
Yes, We can use this feature to test our module.

Question: Can we go LIVE with Built-in web server ?
Not, Its recommended We should not go LIVE with this Built-In Web Server.

Question: How to check If built-in Web server is available in your PHP Build?
Way 1
print the phpinfo() in php. and Search for Built-in HTTP server , If found means It is available.

Way 2
in php command line, execute following command

php -h

Search -S (Run with built-in Web server), If found means It is available.

Question: How to run PHP Script with built-in Web Server?
Go to file Location and execute following command from command line.

php -S 0.0.0.0:8080 myfile.php

Question: What is use of -S?
It is used to specify the Ip Address with port with which bind.

Question: What is use of -t?

It is used to specify the target folder.

Question: How to detect the request by built-in Web Server?

if(php_sapi_name()=='cli-server'){
    echo "this is request by built-in Web Server";
}

Question: Give full working example of built-in Web Server?

Create a file hello.php
Login to command line
Go to that particular folder in command line
Execute following command.
```
php -S 0.0.0.0:8080 hello.php
```

Friday, 15 September 2017

Web sockets online Tutorial - Page2

Question: Difference between socket and websocket?
WebSockets run from browsers and connecting to Server over a similar to HTTP. it require a permanent connection to its server.
Sockets are more powerful and generic and not restricted to http protocol OR browser.

Question: How to detect the message type in onmessage event?

  
socket.onmessage = function(event){
   if(typeOf event.data === String ) {
      console.log("Received data string");
   }
}

Question: How does Web Socket support Single TCP Connection?
In Web a new TCP connection is initiated for a each HTTP request and terminated after the response is received which means A new TCP connection need for each HTTP request. Whereas In WebSocket, the HTTP connection is upgraded and client and server communicate over that same TCP connection.

Question: How Web Socket support on Bi-directional?
In Web client(like browser) only can send the request to server then server send the response to the same client only.
Whereas In WebSocket, there is no pattern like request/response and Both (Client/Server) can send message to other party.

Question: How Web Socket support on Full Duplex?
In Web client(like browser) only can send the request to server then server send the response to the same client only. At a given time, either client is talking to server or server is talking to client. Whereas In WebSocket they can talk each other.

Question: What is the WebSocket API?
The WebSocket API is the asynchronous communication from client to server and it takes place over single TCP socket using the ws (unsecure) or wss (secure) protocol and can be used by any client or server application.

Question: How can we secure WebSocket API?
Normal Web Socket API start with ws but secure API start with wss.

Question: What is Ajax Long-Polling?

A client requests a webpage using HTTP.
The server does not immediately respond with the requested information but waits until there's new information available.
When there's new information available, the server responds with the new information.
The client receives the new information and immediately sends another request to the server, re-starting the process.

Question: What is Comet in HTML5?
Comet is a collection of techniques prior to HTML5 which use streaming and long-polling to achieve real time applications.

Question: What is Server Sent Events?
Server Sent Events (SSE) connections can only push data to the browser.
online stock quotes, or twitters updating timeline or feed are good examples of an application that could benefit from SSE.

Question: How to add http headers in Websockets client API?
We can not add custom header in Web sockets.

Question: How can we pass auth while calling Connecting WebSocket?

 var ws = new WebSocket("ws://username:password@example.com/path");

Question: Is PHP support for Web Sockets available?
Yes, for this you need install the library.
Apache Module: https://github.com/disconnect/apache-websocket
PHP WebSocket: http://code.google.com/p/phpwebsocket/
Ratchet: https://github.com/cboden/Ratchet
Wrench: https://github.com/varspool/Wrench

Wednesday, 13 September 2017

Web sockets online Tutorial

Question: What is WEBRTC?
WebRTC is an API that support browser-to-browser applications for voice calling, video calling, and P2P file sharing.

Question: What is Web Socket?
WebSocket is a protocol, providing full-duplex communication channels over a single TCP connection.

Question: How does WebSocket work?
WebSockets provide a persistent connection between a client and server that both parties can use to start sending data at any time.
The client establishes a WebSocket connection through a process known as WebSocket handshake.

Question: Why should I use WebSockets?
Because the server can actively push information to the client any time.
And the client can push information to the server without HTTP requests.
WebSocket is designed for low protocol and wire-level overhead - chunky HTTP headers.

Question: What is difference between WebRTC vs Websockets?
WebRTC is designed for high-performance, high quality communication of video, audio and arbitrary data (Browser to Browser).
WebSocket is designed for bi-directional communication between client and server (Browser to Server and vice versa).

Question: Importance of Websockets?

Web Socket is an independent TCP-based protocol but support other protocol.
Web Socket is a transport layer on top.
Define sub-protocols for example XMPP, STOMP, and AMQP.
Used JavaScript that can interpret the Web Socket handshake, establish and maintain a Web Socket connection.

Question: How websocket established the connection ?

The client establishes a connection through Web Socket handshake.
Client sending a HTTP request to the server.
Header is also sent from which server can get the details

Question: Give example of Web Socket connection?

//Declare variables
var output;
var wsUri = "ws://echo.websocket.org/";

//Defination of init function
function init() {
    output = document.getElementById("output");
    testWebSocket();
}
function testWebSocket() {
    websocket = new WebSocket(wsUri);
    websocket.onopen = function(evt) {
        onOpen(evt)
    };
}

function onOpen(evt) {
    output.innerHTML = 'Connected';
}

//Call on load
window.addEventListener("load", init, false);

ws://echo.websocket.org/ Here ws is used for Web socket.
It is public URL you can use it for testing.
After testing, you need to create your own because you can't use it in your production OR development server.

Question: How to send error message in Web Socket?

  
    var wsUri = "ws://echo.websocket.org/";
    var output;

    /* Init the WebSocket */          
    function init() {
       output = document.getElementById("output");
       startWebSocket();
    }

    /* Declare the Socket Function */          
    function startWebSocket() {
       websocket = new WebSocket(wsUri);

       websocket.onopen = function(evt) {
          onOpen(evt)
       };

       websocket.onclose = function(evt) {
          onClose(evt)
       };

       websocket.onerror = function(evt) {
          onError(evt)
       };
    }

    /* Function Defination */                  
    function onOpen(evt) {
       writeToScreen("Web Socket Connected");
       doSend("This is custom message");
    }

    function onClose(evt) {
       writeToScreen("Web Socket Dis Connected");
    }

    function onError(evt) {
       writeToScreen('Error :' + evt.data);
    } 

    function doSend(message) {
       websocket.send(message);
       writeToScreen("Sent Data: " + message); 

    }

    function writeToScreen(message) {
       var pre = document.createElement("div");          
       pre.innerHTML = message; output.appendChild(pre);
    }

    window.addEventListener("load", init, false);

Wednesday, 5 July 2017

Emoji / Emotions icons integration in CHAT

emoji/emotions icons integration in existing chat

Hello Users,
Here, I will give an example to integrate the emoji/emotions icons in your Chat . Its done for node based chat, but still you can use for Ajax based chat.
Its quite simple, you just need to replace the emotions code to images.
For Example
:) - Happy
:( - Sad

Whenever new message appear, then you need to replace the smiley code to images OR previous message need to replace the smiley code to corresponding image.

Follow the Below Simple steps to Integrate in CHAT.

Step1: Download imoji icons from following links:
https://drive.google.com/open?id=0BxKVas2R9pKlYmo2eHEtbjMtRk0

place all image in \public\images\emoticons

Setup the static images path in express JS project.

    var express = require('express');
    var app = express();
    var http = require('http').Server(app);

    //set the public path
    app.use(express.static('public'));

In Client side, display the empotions
JavaScript functions to convert the code to smiles


    function replaceTextwithAllowedEmojis(text){        
            var returnText = text;
            //Emotions
            var emoticonCodes = [':)',':(',';)',':P',':D',':|',':O',':?','8)','8o','B)',':-)',':-(',':-*','O:-D','&gt;:-D',':o)',':idea:',':important:',':help:',':error:',':warning:',':favorite:'];
            
            //Emoji iconds
            var emoticonFiles = ['smile.png','sad.png','wink.png','razz.png','grin.png','plain.png','surprise.png','confused.png','glasses.png','eek.png','cool.png','smile-big.png','crying.png','kiss.png','angel.png','devilish.png','monkey.png','idea.png','important.png','help.png','error.png','warning.png','favorite.png'];

            var emojiHtmlStrPrefix = '<img class="emoticon" src="/images/emoticons/&#39;;
            var emojiHtmlStrPostfix = &#39;" />';
            
           
            for(var i=0; i<emoticoncodes .length="" emoticoncodes="" i="" if="" returntext.indexof=""> -1)){
                    // replace text with its icon file
                    var imgHtmlStr =  emojiHtmlStrPrefix+emoticonFiles[i]+emojiHtmlStrPostfix;
                    returnText = returnText.replace(emoticonCodes[i],imgHtmlStr);
                }
            }
            return returnText;
    }
</emoticoncodes>

Display the above functions.


            socket.on('chat_message', function(dataObj) {                
                $('#messages').append($('
[li]').html(replaceTextwithAllowedEmojis(dataObj.text)));
            });