Bootstrap Breakpoints

Interview Question answer of front-en-developer. 

Difference between visibility:hidden and display:none?

display:none means that the tag in question will not appear on the page at all. There will be no space allocated for it between the other tags.

visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page. it just isn't seen on the page.

Difference between display inline, inline-block, and block?

display:inline can not have a height or a width or a vertical margin.

display:block means the element will occupy 100% width, and will start from a new line.

display:inline-block means the element will be inline (does not start from a new line) and will stretch to occupy width of content.

Refer Code link: http://jsfiddle.net/Mta2b/

Note:- Block element have 100% width means by default using display:block,

Difference between Block-level Elements and Inline Elements ? 

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

Examples of block-level elements:

• <div>
• <h1> - <h6>
• <p>
• <form>
• <header>
• <footer>
• <section>

  Positioning?

An inline element does not start on a new line and only takes up as much width as necessary.

Examples of inline elements:

• <span>
• <a>
• <img>

How we do vertical and horizontal align (middle and center) with css?

1.Center horizontal and vertical align of an element with fixed measure

CSS

 <div style="width:200px;height:100px;position:absolute;left:50%;top:50%;

 margin-left:-100px;margin-top:-50px; border:1px solid #101010;">

 </div>

2.Center horizontally and vertically a single line of text

CSS

 <div style="width:200px;height:100px;text-align:center;line-height:100px;

 margin-left:-100px;margin-top:-50px; border:1px solid #101010;">

 content

 </div>

3.Center horizontally and vertically align of an element with unknown width and height

 <style> .parent { display: table; width: 100%; height:100%; } .child { display: table-cell; text-align: center; vertical-align: middle; } </style>

 <div class="parent"> <div class="child"> content content content <br/> moooooooooooooooore content <br/> another content </div> </div>

Difference between Static, Relative, Absolute and Fixed Positioning?

down voteaccepted

Static positioning is the default positioning model for elements. Statically positioned elements don't obey left, top, right and bottom rules: Relative positioning allows you to specify a specific offset (left, top etc) .So if I have a text box inside a div I could apply relative positioning on the textbox to have it display at specific place relative to where it would normally be placed within the div: There is also absolute positioning - whereby you specify the exact location of the element relative to the entire document, or the next relatively positioned element further up the element tree: And when a position: relative is applied to a parent element in the hierarchy: Note how our absolutely-position element is bound by the relatively-positioned element. And lastly there is fixed. Fixed positioning restricts an element to a specific position in the viewport, which stays in place during scroll: You may also observe the behaviour that fixed-positioned elements do not cause scroll because they are not considered to be bound by the viewport: Whereas absolutely-positioned elements are still bound by the viewport and will cause scrolling: ..unless of course your parent element uses overflow: ? to determine the behaviour of the scroll (if any).

Difference between GET, POST, PUT and DELETE?

• GET to get the resource
• PUT to update
• POST to Insert
• DELETE to delete

A PUT request is a way to upload a file to a server. Most servers don't allow PUT requests, because of the security implications.

A DELETE request will delete a resource on the server. Like PUT, this method is rarely permitted on server for obvious reasons.

The default method when submitting form data is GET. when GET is used, the submitted form data will be visible in the page address field.

GET must NOT be used when sending sensitive information! GET is best suited for short, non-sensitive, amounts of data, because it has size limitations too.

Always use POST if the form data contains sensitive or personal information. The POST method does not display the submitted form data in the page address field.

POST has no size limitations, and can be used to send large amounts of data.

Some other notes on GET requests:

• GET requests can be cached
• GET requests remain in the browser history
• GET requests can be bookmarked
• GET requests should never be used when dealing with sensitive data
• GET requests have length restrictions
• GET requests should be used only to retrieve data

Some other notes on POST requests:

• POST requests are never cached
• POST requests do not remain in the browser history
• POST requests cannot be bookmarked
• POST requests have no restrictions on data length

Differences between window.onload and $(document).ready()method?

 window.onload event on the window and/or body element will fire once all the content of the page has been loaded -- this includes all images,  scripts, everything.It is used in JavaScript.

 $(document).ready()is a jQuery-specific event that occurs after the HTML document has been loaded. This event fire before window.onload event. It is execute first.

Show differences between JavaScript and jQuery through example?
Example:
     Change the background color using jQuery
      $('body').css('background', '#ccf');

     Change the background color using JavaScript
      function changeBackground(color) {

    document.body.style.background = color;
    }
     changeBackground('#ccf');

How many types of function in javaScript supports?

Two types of function javaScript supports.

1 - named

2 - anonymous

What is the purpose of 'this' operator in JavaScript?

JavaScript famous keyword 'this' alwyes refers to the current context.

Explain how can you submit a form using JavaScript?

To submit a form using JavaScipt use document.form[0].submit();

What are all the types of Pop up boxes available in JavaScript?

Three types of pop up 

1 - Alert

2 - Confirm

3 - Prompt 

Which keywords are used to handle exceptions?

Try... Catch... Finally is used to handle exceptions in the JavaScript.

What are the different types of errors in JavaScript?

There are three types of errors:

1. Load time errors: Errors which come up when loading a web page like improper syntax errors are known as Load time errors and it generates the errors dynamically.
2. Run time errors: Errors that come due to misuse of the command inside the HTML language.
3. Logical Errors: These are the errors that occur due to the bad logic performed on a function which is having different operation.

Tell me about JavaScript Data Types..?

JavaScript variables can hold many data types: numbers, strings, arrays, objects and more:

var length = 16;                               // Numbervar lastName = "Johnson";                      // Stringvar cars = ["Saab", "Volvo", "BMW"];           // Arrayvar x = {firstName:"John", lastName:"Doe"};    // Object

What is use of console.log()?

console.log() You use it to debug JavaScript code with either Firebug for Firefox, or JavaScriptconsole in WebKit browsers.

The console.log() is a function that writes a message to log on the debugging console, such as Webkit or Firebug.

where is good place to placed javaScript  in html?

It is a good idea to place scripts at the bottom of the <body> element.
This can improve page load, because script compilation can slow down the display.

How many types of dialog(popup) box in JavaScript?

JavaScript has three important types of dialog boxes.
Alert Box
An alert box is often used if you want to make sure information comes through to the user.
When an alert box pops up, the user will have to click "OK" to proceed.
Confirm Box
A confirm box is often used if you want the user to verify or accept something.
When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed.
If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false.
Prompt Box

A prompt box is often used if you want the user to input a value before entering a page.

When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value.

If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null.

Some other dialog boxes available are

Print dialog

JavaScript allow you to open print dialog box using window.print() method to print your web page. 

Find dialog

Find dialog not supported by all the browsers only support Firefox and some Gecko browsers.

Difference between inline javascript and external javascript?

If you have only a few lines of code that is specific to a particular webpage, then it is better to keep your JavaScript code internally within your HTML document.

On the other hand, if your JavaScript code is used in many webpages, then you should consider keeping your code in a separate file. In that case, if you wish to make some changes to your code, you just have to change only one file which make code maintenance easy. If your code is too long, then also it is better to keep it in a separate file. This helps in easy debugging.

Difference between container and fluid-container in bootstrap?

.container and .container-fluid both are responsive

• container-fluid(Fluid Layout,100% width)

The container-fluid class take up the full width of the screen. Therefore container-fluid is always equal to the width of the screen. 

• container(Fixed Layout )

The container class have a fixed size for each screen size. It is also centered on the screen.

container has specific pixel width values that change its width value with the help of media queries.

What is the importance of the HTML DOCTYPE?

DOCTYPE is an instruction to the web browser about what version of the markup language the page is written. Its written before the HTML Tag

What is Difference between null and undefined?

null is an object with no value. undefined is a type. 

typeof null; // "object"  
typeof undefined; // "undefined" 

What is the difference between == and === ?

== is equal to 
=== is exactly equal to (value and type)

Bootstrap get resolutions?

/* Extra small devices (phones, less than 768px) / / No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... }

It also provides the container widths:

• .col-xs-*: none (auto)
• .col-sm-*: 750px
• .col-md-*: 970px
• .col-lg-*: 1170px

Difference between: function Person(){}, var person = Person(), and var person = new Person()?

function Person() {} : This will create a function with function name “Person”, It can include some code within the curly brackets.

var person = Person() : This will create a variable “person” which is assigned to function Person() and will return a value which is returned by the function.

var person = new Person() : This will creates a new instance of an object based on the Person function this make the variable an Object.

Difference between null,undefined and undeclared variable in JavaScript? 

‘null’ is a value that can be assigned to a variable and represents ‘no value’,such as:
     var some_item= null;

console.log(some_item)

'undefined' means a variable has been declared but has not yet been given a value, such as:

var item;

console.log(item)

'undeclared' means a variable has not declared in the program, such as:

console.log(item)