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

Wednesday 4 November 2020

JQuery Interview Questions And Answers For Experienced



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.


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
  1. CSS Selector
  2. XPath Selector
  3. 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?
  1. Effects and animations on html
  2. Ajax to send the server call
  3. Extensibility
  4. Add/Change on DOM
  5. Add, Update, delete Events
  6. CSS manipulation with use of jquery
  7. We can add JavaScript Plugins
  8. 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?

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?
  1. Create a file hello.php
  2. Login to command line
  3. Go to that particular folder in command line
  4. Execute following command.
    php -S 0.0.0.0:8080 hello.php
    



Friday 15 September 2017

Web sockets online Tutorial - Page2

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?
  1. A client requests a webpage using HTTP.
  2. The server does not immediately respond with the requested information but waits until there's new information available.
  3. When there's new information available, the server responds with the new information.
  4. 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

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?
  1. Web Socket is an independent TCP-based protocol but support other protocol.
  2. Web Socket is a transport layer on top.
  3. Define sub-protocols for example XMPP, STOMP, and AMQP.
  4. Used JavaScript that can interpret the Web Socket handshake, establish and maintain a Web Socket connection.



Question: How websocket established the connection ?
  1. The client establishes a connection through Web Socket handshake.
  2. Client sending a HTTP request to the server.
  3. 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.


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

    place all image in \public\images\emoticons
  2. 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'));
        
  3. 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>
  4. Display the above functions.
    
                socket.on('chat_message', function(dataObj) {                
                    $('#messages').append($('
    [li]').html(replaceTextwithAllowedEmojis(dataObj.text)));
                });
    



Monday 29 May 2017

Angularjs 2 Interview Questions and Answers

Angularjs 2 Interview Questions and Answers


Question: Why AngualrJS2 over AngualrJS1?
  1. Angular 2 is simpler and faster than Angular 1.
  2. You can update the large data sets with minimal memory overhead.
  3. It will speed up the initial load through server side rendering.



Question: What are the feature of AngualrJS2?
  1. Angular 2 is faster than Angular 1
  2. Angular 2 is easier than Angular 1
  3. It supports old browsers also including IE9+ and Android 4.1+.
  4. It is a cross platform framework.
  5. Angular 2 is mainly focused on mobile apps.
  6. Code structure is very simplified than the previous.



Question: How to install AngualrJS2 in NodeJS?
  1. Create an folder and go inside that folder using command line.
  2. Create en empty file package.json and add following contents.
    {
      "name": "angular2-demo",
      "version": "1.0.0",
      "scripts": {
        "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
        "tsc": "tsc",
        "tsc:w": "tsc -w",
        "lite": "lite-server",
        "typings": "typings",
        "postinstall": "typings install"
      },
      "license": "ISC",
      "dependencies": {
        "angular2": "2.0.0-beta.7",
        "systemjs": "0.19.22",
        "es6-promise": "^3.0.2",
        "es6-shim": "^0.33.3",
        "reflect-metadata": "0.1.2",
        "rxjs": "5.0.0-beta.2",
        "zone.js": "0.5.15"
      },
      "devDependencies": {
        "concurrently": "^2.0.0",
        "lite-server": "^2.1.0",
        "typescript": "^1.7.5",
        "typings":"^0.6.8"
      }
    }
  3. Create an empty file tsconfig.json and add following contents.
    {
      "compilerOptions": {
        "target": "es5",
        "module": "system",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false
      },
      "exclude": [
        "node_modules",
        "typings/main",
        "typings/main.d.ts"
      ]
    }
  4. Create an empty file typings.json and add following contents.
    {
      "globalDependencies": {
        "core-js": "registry:dt/core-js",
        "jasmine": "registry:dt/jasmine",
        "node": "registry:dt/node"
      }
    }
  5. Execute following command from command line.
    npm install

Tuesday 25 April 2017

React JS Interview Questions and Answers

React JS Interview Questions and Answers

Question: What is ReactJS?
React is front end library developed by Facebook.


Question: Why ReactJS is used?
React is used to handle the view part of Mobile application and Web application.


Question: Does ReactJS use HTML?
No, It uses JSX which is simiar to HTM.


Question: When ReactJS released?
March 2013


Question: What is current stable version of ReactJS?
Version: 16.2.0
Release on: November 28, 2017


Question: What is Repository URL of ReactJS?
https://github.com/facebook/react



Question: What are the life Cycle of ReactJS?
  1. Initialization
  2. State/Property Updates
  3. Destruction



Question: What are the feature of ReactJS?
  1. JSX: JSX is JavaScript syntax extension.
  2. Components : React is all about components.
  3. One direction flow: React implements one way data flow which makes it easy to reason about your app



Question: What are the Advantages of ReactJS?
  1. React uses virtual DOM which is JavaScript object. This will improve apps performance
  2. It can be used on client and server side
  3. Component and Data patterns improve readability.
  4. Can be used with other framework also.



Question: How to embed two components in One component?
import React from 'react';
class App extends React.Component {
   render() {
      return (
         <div>
            <Header/>
            <Content/>
         </div>
      );
   }
}

class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
         </div>
      );
   }
}

class Content extends React.Component {
   render() {
      return (
         <div>
            <h2>Content</h2>
            <p>The content text!!!</p>
         </div>
      );
   }
}

export default App;

Monday 17 April 2017

Bootstrap Datatable Example - Export into CSV


Bootstrap Datatable Example - Export into CSV
Bootstrap DataTables integration provides a renderer for the pagination control in DataTables to ensure that the pagination of the table is also styled consistently by Bootstrap. It also provide sorting and searching. It enable to download the data as csv.


HTML Part
<table cellspacing="0" class="display nowrap" id="example" style="width: 100%px;">
            <thead>
<tr>
                    <th>Employee Name</th>
                    <th>Designation</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Date</th>
                    <th>Salary</th>
                </tr>
</thead>
            
            <tbody>
<tr>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011/04/25</td>
                    <td>320,800</td>
                </tr>
<tr>
                    <td>Fiona Green</td>
                    <td>Chief Operating Officer (COO)</td>
                    <td>San Francisco</td>
                    <td>48</td>
                    <td>2010/03/11</td>
                    <td>850,000</td>
                </tr>
<tr>
                    <td>Shou Itou</td>
                    <td>Regional Marketing</td>
                    <td>Tokyo</td>
                    <td>20</td>
                    <td>2011/08/14</td>
                    <td>163,000</td>
                </tr>
<tr>
                    <td>Michelle House</td>
                    <td>Integration Specialist</td>
                    <td>Sidney</td>
                    <td>37</td>
                    <td>2011/06/02</td>
                    <td>95,400</td>
                </tr>
<tr>
                    <td>Serge Baldwin</td>
                    <td>Data Coordinator</td>
                    <td>Singapore</td>
                    <td>64</td>
                    <td>2017/04/09</td>
                    <td>138,575</td>
                </tr>
<tr>
                    <td>Zenaida Frank</td>
                    <td>Software Engineer</td>
                    <td>New York</td>
                    <td>63</td>
                    <td>2010/01/04</td>
                    <td>125,250</td>
                </tr>
<tr>
                    <td>Zorita Serrano</td>
                    <td>Software Engineer</td>
                    <td>San Francisco</td>
                    <td>56</td>
                    <td>2017/06/01</td>
                    <td>115,000</td>
                </tr>
<tr>
                    <td>Jennifer Acosta</td>
                    <td>Junior Javascript Developer</td>
                    <td>Edinburgh</td>
                    <td>43</td>
                    <td>2013/02/01</td>
                    <td>75,650</td>
                </tr>
<tr>
                    <td>Cara Stevens</td>
                    <td>Sales Assistant</td>
                    <td>New York</td>
                    <td>46</td>
                    <td>2011/12/06</td>
                    <td>145,600</td>
                </tr>
<tr>
                    <td>Hermione Butler</td>
                    <td>Regional Director</td>
                    <td>London</td>
                    <td>47</td>
                    <td>2011/03/21</td>
                    <td>356,250</td>
                </tr>
<tr>
                    <td>Lael Greer</td>
                    <td>Systems Administrator</td>
                    <td>London</td>
                    <td>21</td>
                    <td>2009/02/27</td>
                    <td>103,600</td>
                </tr>
<tr>
                    <td>Jonas Alexander</td>
                    <td>Developer</td>
                    <td>San Francisco</td>
                    <td>30</td>
                    <td>2010/07/14</td>
                    <td>86,600</td>
                </tr>
<tr>
                    <td>Shad Decker</td>
                    <td>Regional Director</td>
                    <td>Edinburgh</td>
                    <td>51</td>
                    <td>2008/11/13</td>
                    <td>183,000</td>
                </tr>
<tr>
                    <td>Michael Bruce</td>
                    <td>Javascript Developer</td>
                    <td>Singapore</td>
                    <td>29</td>
                    <td>2011/06/27</td>
                    <td>183,000</td>
                </tr>
<tr>
                    <td>Donna Snider</td>
                    <td>Customer Support</td>
                    <td>New York</td>
                    <td>27</td>
                    <td>2011/01/25</td>
                    <td>112,000</td>
                </tr>
</tbody>
        </table>




CSS Part

<link href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css" rel="stylesheet"></link>
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"></link>


JavaScript Part

<script language="javascript" src="//code.jquery.com/jquery-1.12.4.js" type="text/javascript"></script>
<script language="javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script language="javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js" type="text/javascript"></script>         
<script language="javascript" src="//cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js" type="text/javascript"></script>

    $(document).ready(function() {
        $('#example').DataTable({
            "order": [[0, "asc"]]/* First column in ascending order */,
            dom: 'Bfrtip',
            "pageLength": 5, /* Number of records */
            buttons: [
                {
                    extend: 'csv',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4]
                    }
                },
            ]
        });
    });




Thursday 18 August 2016

How to get visitor location with JavaScript ?

How to get visitor location with JavaScript ?

Today there are lots Free/Paid API avaiable which give you client information.
Following are two example which give you client information like city, country, country code, ip, local date time, timezone etc with javascript.
Question: How to get visitor location javascript with freegeoip.net?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready( function() {
   $.getJSON("http://freegeoip.net/json/", function(result){
       console.log(result);                        

       });
   });

Output
{  "ip": "112.196.3.177",
  "country_code": "IN",
  "country_name": "India",
  "region_code": "PB",
  "region_name": "Punjab",
  "city": "Mohali",
  "zip_code": "",
  "time_zone": "Asia/Kolkata",
  "latitude": 30.78,
  "longitude": 76.69,
  "metro_code": 0
}



Question: How to get visitor location javascript with ipinfo.io?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready( function() {
   $.getJSON('http://ipinfo.io', function(data){
    console.log(data)
  })
    }); 
</script>

Output
  {"ip": "112.196.3.177",
  "hostname": "No Hostname",
  "city": "Mohali",
  "region": "Punjab",
  "country": "IN",
  "loc": "30.7800,76.6900",
  "org": "AS17917 Quadrant Televentures Limited"
}



Wednesday 17 August 2016

Bootstrap Interview Questions and Answers for 3 Month Experience

Bootstrap Interview Questions and Answers for 3 Month Experience

Question: Why Use Bootstrap?
  1. Responsive features: Website built using bootstrop will automatically adjust themselves on all devices like all type phone, ipad, and all type of desktop/laptop.
  2. Bootstrap is compatibile with all browser (mobile and desktop).
  3. Easy to start.
  4. Fast development


Question: How to start Bootstrap without downloading?
Just including following files in web page, and start working on bootstrp.

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"></link>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


Question: What doctype use by bootstrap?
Just including following files in web page, and start working on bootstrap.
HTML5 doctype



Question: What are meta tag require to set for proper rending in mobile?
<meta name="viewport" content="width=device-width, initial-scale=1">


Question: Which main class need to declare for fixed layout and fluid layout?
.container For fixed layout.
.container-fluid For fluid layout.


Question: How many column are allowed in Bootstrap Grid System?
12


Question: How many Grid Classes are available in Bootstrap Grid System?
4
  1. xs: phones
  2. sm : tablets
  3. md : desktops
  4. lg : large desktops



Question: Basic Structure of a Bootstrap Grid?
<div class="row">
<div class="col-*-*">
</div>
</div>
<div class="row">
<div class="col-*-*">
</div>
<div class="col-*-*">
</div>
<div class="col-*-*">
</div>
</div>




Question: What are Structure of Bootstrap Grid?
What are Structure of Bootstrap Grid



Question: What are the classes used for Success and warning?
.bg-primary: Important message.
.bg-success: successful message.
.bg-info: Informatoinal message.
.bg-warning: Warning message.
.bg-danger: Represent message.



Question: How to make an image Rounded Corners?
Just add below class in img tag.
.img-rounded



Question: How to make an image Responsive?
Just add below class in img tag.
.img-responsive



Question: How to make an youtube video as Responsive?
Just add below class in iframe tag.
.embed-responsive-item



Question: How to make an div with rounded border?
Just add below class in tag.
.well



Question: How to make display successful or failure message with cross link?

<div class="container">
<h2>
Alerts</h2>
The .fade and .in classes adds a fading effect when closing the alert message.<br />
<div class="alert alert-success fade in">
<a aria-label="close" class="close" data-dismiss="alert" href="https://www.blogger.com/blogger.g?blogID=5911253879674558037#">&#215;</a>
    <strong>Success!</strong> Successful Message.
  </div>
<div class="alert alert-info fade in">
<a aria-label="close" class="close" data-dismiss="alert" href="https://www.blogger.com/blogger.g?blogID=5911253879674558037#">&#215;</a>
    <strong>Info!</strong> Informational Message.
  </div>
<div class="alert alert-warning fade in">
<a aria-label="close" class="close" data-dismiss="alert" href="https://www.blogger.com/blogger.g?blogID=5911253879674558037#">&#215;</a>
    <strong>Warning!</strong> Warning Message.
  </div>
<div class="alert alert-danger fade in">
<a aria-label="close" class="close" data-dismiss="alert" href="https://www.blogger.com/blogger.g?blogID=5911253879674558037#">&#215;</a>
    <strong>Danger!</strong> Something danger.
  </div>
</div>



Wednesday 10 August 2016

Twitter Bootstrap Interview Questions and Answers


Twitter Bootstrap Interview Questions and Answers

Question: How to make twitter bootstrap menu dropdown on hover rather than click?
ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}



Question: How can I make Bootstrap columns all the same height??
.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}
.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}



Question: What is sr-only in Bootstrap 3??
It is class used to hide information intended only for screen readers from the layout of the rendered page.


Question: How to disallow twitter bootstrap modal window from closing?
<a data-backdrop="static" data-controls-modal="my_div_id" data-keyboard="false" href="https://www.blogger.com/blogger.g?blogID=5911253879674558037#"></a>



Question: What are different 4 tiers in twitter bootstrap?
  1. Extra small devices like smartphones (.col-xs-*)
  2. Small devices like tablets(.col-sm-*)
  3. Medium devices like laptops (.col-md-*)
  4. large devices like laptops/desktops(.col-lg-*)



Question: How to use media queries in twitter bootstrap 3?
@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}



Question: How to use media queries in twitter bootstrap 4?
@media(min-width:34em){}
@media(min-width:48em){}
@media(min-width:62em){}
@media(min-width:75em){}



Question: What is an em?
An em is a unit in the field of typography, One em is equal to the 16 point size.



Question: How to open a Bootstrap modal?
$('#myModalId').modal('toggle');
$('#myModalId').modal('show');
$('#myModalId').modal('hide');
 



Question: How to make responsive image with align center?
.img-responsive {
    margin: 0 auto;
}
 



Question: How to create Confirm box before deleting modal/dialog?
Add data-target="#confirm-delete-id" in A tag

<a data-href="/delete-rec?id=203" data-target="#confirm-delete-id" data-toggle="modal" href="https://www.blogger.com/blogger.g?blogID=5911253879674558037#">Delete record #203</a>
 

Add HTML for confirmation box
<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" id="confirm-delete-id" role="dialog" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" type="button">Cancel</button>
                <a class="btn btn-danger btn-ok" href="https://www.blogger.com/null">Delete</a>
            </div>
</div>
</div>
</div>

 



Question: How to disabled the button?
$('#buttonId').prop('disabled', true);
 



Wednesday 27 July 2016

How to detect and change Browser user agent?

How to detect and Browser user agent?

Question: What is Browser user agent?
It is software agent which acting on behalf of a user.
Actually it s user agent is a Single line of string which helps to detect the request. When an request is sent to web server then user agent of browser is also sent in header which helps the web server to identifying the browser and operating system.


Question: What is use of Browser user agent?
It helps the web server to identifying the browser and operating system.
Means with the help of user agent, web server can get the know which browser of OS is request the data.
Web site uses this customize content for the capabilities of a particular device.


Question: Who is using of Browser user agent?
Web Server (Websites) are using the user agent. With the help of user agent they get to know mobile OR Desktop.
then web server sent back the data as per requested device.


Question: How user agent is sent to Server?
When an browser send request to web server. then request header is sent to web server along with request data.


See Example of Request Header:
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding:gzip, deflate
Accept-Language:en-US,en;q=0.5
Cache-Control:max-age=0
Connection:keep-alive
Cookie:user_segment=Prospect; _ga=GA1.2.1900507711.1469603080
Host:example.georama.loc
Referer:http://example.georama.loc/
User-Agent:Mozilla/5.0 (Windows NT 6.1; rv:47.0) Gecko/20100101 Firefox/47.0

User Agrent is
User-Agent:Mozilla/5.0 (Windows NT 6.1; rv:47.0) Gecko/20100101 Firefox/47.0
Above is user agent of mozilla having version 47.0


Question: What is my current user agent ?
http://www.useragentstring.com/


Question: How to detect Browser user agent?
with use of user agent string, you can detect the browser and OS. Open: http://www.useragentstring.com/ Add the user agent string and click on Analyse.


Question: Can we change Browser user agent? If Yes, How?
Yes, We can change the user agent.
With help of User-Agent Spoofing, We can change the user agent.


Question: What is User agent spoofing?
Spoofing means behave differently than in actuality.


Question: Who is User agent spoofing?
Spam bots, Web scrapers, hackers uses the spoofing to hide their identity.


Question: How to change the useragent in Chrome, Safari & Firefox?
http://osxdaily.com/2013/01/16/change-user-agent-chrome-safari-firefox/


Tuesday 26 July 2016

Overriding The Default Text Selection Color With CSS

Overriding The Default Text Selection Color With CSS

Question: Write CSS for change the default Text Selection to red.?
::selection {
  background: red; /* Blink/WebKit Browsers */
}
::-moz-selection {
  background: red; /* Gecko Browsers */
}



Question: Change the default Text Selection to BLUE for paragraph (p.webtechnology)?
p.webtechnology::selection {
  background: blue; /* Blink/WebKit Browsers */
}
p.webtechnology::-moz-selection {
  background: blue; /* Gecko Browsers */
}

See Demo Below

Blue Color On Selection




Question: Change the default Text Selection to RED for paragraph (p.redcolor)?
p.redcolor::selection {
  background: red; /* Blink/WebKit Browsers */
}
p.redcolor::-moz-selection {
  background: red; /* Gecko Browsers */
}

See Demo Below

Red Color Selection




Monday 18 July 2016

WebRTC Examples

WebRTC Examples

Question: What is full form of WEBRTC?
Web Real-Time Communication


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


Question: Who started on WEBRTC? and when?
Google on May 2011.


Question: What are manjor components in WEBRTC?
  1. Audio Calls
  2. Video Calls
  3. Share data viz peer-to-peer
  4. Access Camera and Microphone



Question: Where will WEBRTC effect?
Real time communication such as text/audio/video between users by utilizing the browsers.


Question: What is full form of WHATWG?
Web Hypertext Application Technology Working Group.


Question: What is WHATWG?
WHATWG is a community of people interested in evolving HTML and HTML related technologies.


Question: What is WebSocket?
WebSocket is a protocol providing full-duplex communication channels over a single TCP connection.
OR
WebSocket can do communication between client to server OR server to client.



Question: Give an example of WebRTC Audio call?
https://simplewebrtc.com/demo.html?test-audio-call


Thursday 3 March 2016

Dojo Interview Questions and Answers for Fresher

Dojo Interview Questions and Answers for Freshers

Question: What is Dojo?
It is JavaScript framework used for rapid development of cross-platform applications and web sites. Also known as Dojo Toolkit.


Question: What is current Stable release of Dojo?
1.10.4 / January 18, 2015


Question: In Which language, Its written?
JavaScript


Question: What is offical website of dojo?
http://dojotoolkit.org


Question: From where I can download dojo?
http://dojotoolkit.org/download/


Question: How to load dojo from CDN?
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>



Question: Is it opensource??
Yes, It is.


Question: What are different section/parts of Dojo library?
  1. dojo: Its core files.
  2. dijit: It have user-interface modules for widgets and layout
  3. dojox: It have assorted module
  4. util: It have tools like optimization, documentation, style-checking and testing.



Question: What are different Advantages of Dojo?
  1. Associative arrays
  2. Objects and classes
  3. Regular expression
  4. Loosely typed variables



Question: What are different Features of Dojo?
  1. Widgets
  2. Asynchronous communication
  3. Packaging system
  4. Client-side data storage
  5. Server-side data storage



Question: What is the basic structure in Dojo?
/index.html - The application entry point.
/app - The application module.
/app/main.js - The main script for app module.


Question: What is Widget Toolkit in Dojo?
Widget is a user interface object that has a layout and HTML+CSS bound by JavaScript. Dojo have widgets like Tabs, sorting table and dialogs etc.


Question: How to use Dojo Editor widget?
<script>
dojo.require("dojo.widget.textEditorId");
</script>
<textarea dojotype="textEditorId"> </textarea>



Question: Give some dojo components name?
  1. DOJO Tree
  2. DOJO Button
  3. DOJO Grid
  4. DOJO List box
  5. DOJO Calendar



Question: What is difference between DOJO and jQuery?
DOJO jQuery
JavaScript toolkit or framework JavaScript library
HTML and JavaScript based tool kit supports almost all web languages
Dojo requires higher network bandwidth Works good in low network bandwidth
Good for bigger website and application Good for small application.