JAVASCRIPT Imorotant Q&A
Q. What is the ‘Strict mode in JavaScript and how can it be enabled?A. Strict Mode adds certain compulsions to JavaScript. Under the strict mode, JavaScript shows errors for a piece of code, which did not show an error before, but might be problematic and potentially unsafe. Strict mode also solves some mistakes that hamper the JavaScript engines to work efficiently.
Strict mode can be enabled by adding the string literal “use strict” above the file. This can be illustrated by the given
Q. Define event bubbling?
A. JavaScript allows DOM elements to be nested inside each other. In such a case, if the handler of the child is clicked, the handler of the parent will also work as if it were clicked too. The event.stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent event handlers from being executed.
Q. What is namespacing in JavaScript and how is it used?
A. Namespacing is used for grouping the desired functions, variables, etc. under a unique name. It is a name that has been attached to the desired functions, objects, and properties. This improves modularity in the coding and enables code reuse.
Q. What is the closure?
Closures are created whenever a variable that is defined outside the current scope is accessed from within some inner scope.
OR
A closure is a function defined inside another function (called the parent function), and has access to variables that are declared and defined in the parent function scope.
The closure has access to variables in three scopes:
Variables declared in their own scope
Variables declared in a parent function scope
Variables declared in the global namespace
Q. Following example shows how the variable counter is visible within the create, increment, and print functions, but not outside of them -
A. function create() {
var counter = 0;
return {
increment: function() {
counter++;
},
print: function() {
console.log(counter);
}
}
}
var c = create();
c.increment();
c.print();
Q. What does "1"+2+4 evaluate to?
A. Since 1 is a string, everything is a string, so the result is 124.
Q. how will you find specific property is available in the function objects in javascript?
A. using hasOwnProperty() name . example :-
var employee = function(name){
this.name = name;
}
var emp = new employee("ranjit");
if(emp.hasOwnProperty("name")){
alert("yes, i have name property");
}
Q. how will you find which element (tag name) is clicked in the document?
A. You need to use the event. target which is the element that originally triggered the event. This in your example code refers to the document.
In jQuery, that's...
$(document).click(function(event) {
var text = $(event.target).text();
});
Without jQuery...
document.addEventListener('click', function(e) {
e = e || window.event;
var target = e.target || e.srcElement,
text = target.textContent || text.innerText;
}, false);
Also, ensure if you need to support < IE9 that you use attachEvent() instead of addEventListener()
Q. detach?
A. The detach() method removes the selected elements, including all text and child nodes. However, it keeps data and events.
This method also keeps a copy of the removed elements, which allows them to be reinserted at a later time.
Tip: To remove the elements and its data and events, use the remove() method instead.
Tip: To remove only the content from the selected elements, use the empty() method.
Angularjs Imorotant Q&A
_____________________________
Q. What is scope?
A. Scopes are objects that refer to the model and act as glue between controller and view.
Q. Controller?
A.Controllers are JavaScript functions that are bound to a particular scope. They are the prime actors in the AngularJS framework and carry functions to operate on data and decide which view is to be updated to show the updated model-based data.
Q. services?
A. Services are singleton objects which are instantiated only once in-app.
Q. Deep linking?
A.Deep linking allows you to encode the state of the application in the URL so that it can be bookmarked. The application can then be restored from the URL to the same state.
Q. core directive?
A. Following are the three core directives of AngularJS.
ng-app - This directive defines and links an AngularJS application to HTML.
ng-model - This directive binds the values of AngularJS application data to HTML input controls.
ng-bind - This directive binds the AngularJS Application data to HTML tags.
Q. What difference between $scope and $rootscope in angular js?
A. $rootScope is at the top of the hierarchy of all scopes in your angular app, "$rootScope” is a parent object of all “$scope” angular objects created in a web page.
The main difference is the availability of the property assigned to the object. A property assigned with $scope cannot be used outside the controller in which it is defined whereas the property assigned with $rootScope can be used anywhere.
$rootScope is available globally, no matter what controller you are in, whereas $scope is only available to the current controller and its children.
var myApp = angular.module('myApp', []);
//service style, probably the simplest one
myApp.service('helloWorldFromService', function() {
this.sayHello = function() {
return "Hello, World!"
};
});
//factory style, more involved but more sophisticated
myApp.factory('helloWorldFromFactory', function() {
return {
sayHello: function() {
return "Hello, World!"
}
};
});
//provider style, full blown, configurable version
myApp.provider('helloWorld', function() {
// In the provider function, you cannot inject any
// service or factory. This can only be done at the
// "$get" method.
this.name = 'Default';
this.$get = function() {
var name = this.name;
return {
sayHello: function() {
return "Hello, " + name + "!"
}
}
};
this.setName = function(name) {
this.name = name;
};
});
//hey, we can configure a provider!
myApp.config(function(helloWorldProvider){
helloWorldProvider.setName('World');
});
function MyCtrl($scope, helloWorld, helloWorldFromFactory, helloWorldFromService) {
$scope.hellos = [
helloWorld.sayHello(),
helloWorldFromFactory.sayHello(),
helloWorldFromService.sayHello()];
}?
HTML5 Imorotant Q&A
____________________
Q. difference between datalist and dropdownlist
A. The <datalist> tag specifies a list of pre-defined options for an <input> element.
The <datalist> tag is used to provide an "autocomplete" feature on <input> elements. Users will see a drop-down list of pre-defined options as they input data.
Q. Question: What is a Manifest file?
A. Manifest file is a simple text file that tells the browser what to cache and what not to cache.
Q. Differentiate between Canvas and SVG?
A. Canvas is resolution-dependent while SVG is not.
Canvas does not provide any support for event handlers while SVG does provide support for event handlers.
Canvas is suitable for graphic-intensive games while SVG is not suitable for gaming.
Canvas is suitable for small rendering areas while SVG is suitable for large rendering areas like Google maps.
Question: What are the new Form elements in HTML5?
A. datalist - It specifies a list of options for input controls
keygen - This tag defines a key-pair generator field.
output - It defines the result of a calculation.
Q. HTML 5 provides a drag and drop facility. How do you make an image draggable?
A. using <img draggable="true" />
Q. What is a Web Worker?
A. web worker is a JavaScript that runs in the background.
Q: How to link an email address?
A: <a href="mailto:myemialid@wten.in">Email Me</a>
Q: Difference between standard/ strict mode and quirks mode?
A: quirks mode in the browser allows u to render pages for as old browsers. This is for backward compatibility.
CSS3 Imorotant Q&A
___________________
Q: What are some of the new features and properties in CSS3?
A: Box model
New Web fonts
Rounded corners
Border Images
Box Shadows, Text Shadows
New Color schemes (RGBA)
Transform property
New Pseudo-classes
Multi-column layout
New Gradients
Q: What is the CSS Box Model used for? What are the elements that it includes?
A: CSS box model is made up of margins, borders, padding, and content.
Box model provides a structured way to space elements in relationship to each other.
Q: Explain the difference between visibility: hidden and display: none?
A: visibility: hidden simply hides the element, while it will still take up space and affect the layout of the document.
display: none also hides the element, but will not take up space, and the page will appear as if the element is not present.
Q: How to overrule underlining Hyperlinks?
A: using: -- a { text-decoration: none;}
Q: How can the gap under the image be removed?
A: As images being inline elements are treated the same as texts, so there is a gap left, which can be removed by:
img { display: block ; }
Q: Does CSS properties are case-sensitive?
A: no.
Q: Does padding-left or padding-right or margin-left or margin-right has an effect on the inline element?
A: yes.
Q: What are the differences between inline, block, and inline-block?
A: inline, elements do not break the flow. think of span it fits in the line. Important points about inline elements, margin/ padding will push other elements horizontally not vertically. Moreover, inline elements ignore height and width.
the block breaks the flow and doesn't sit in line. they are usually containers like div, section, ul, and also text p, h1, etc.
inline-block will be similar to inline and will go with the flow of the page. The only difference is this will take height and width.
Q: How do you align a p center-center inside a div?
A: text-align: the center will do the horizontal alignment but vertical-align: middle will not work here. there are a couple of different ways to solve this problem and one of them is positioning. You make the parent as relative position and child as absolute positioning. And then define all position parameters as zero and width 50% and height 30%
=>CSS3 2D Transforms methods:
translate()
rotate()
scale()
skewX()
skewY()
matrix()
The translate() method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis) example :- transform: translate(50px,100px);
The rotate() method rotates an element clockwise or counter-clockwise according to a given degree. example:- transform: rotate(20deg);
The scale() method increases or decreases the size of an element example transform: scale(2,3); (according to the parameters given for the width and height).
=>CSS3 3D Transforms methods:
rotateX()
rotateY()
rotateZ()
=>CSS3 Transitions
CSS3 transitions allow you to change property values smoothly (from one value to another), over a given duration.
CSS3 Transition Properties
property description
transition A shorthand property for setting the four transition properties into a single property
transition-delay Specifies a delay (in seconds) for the transition effect
transition-duration Specifies how many seconds or milliseconds a transition effect takes to complete
transition-property Specifies the name of the CSS property the transition effect is for
transition-timing-function Specifies the speed curve of the transition effect
=>The @keyframes Rule
When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times.
To get an animation to work, you must bind the animation to an element.
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
SASS Imorotant Q&A
___________________
Q. What Is SASS?
A. SASS is simply a framework or rather a set of tools for allowing developers to leverage CSS in a manner that is more logical, and as “Rails developers like to say”, more DRY (Don’t Repeat Yourself).
Q. Why use SASS?
A. Why use SASS? Now a Google will return lots of results and I mean there are so many frameworks out there unless referred to by a colleague, etc. you almost pass it by, thinking it’s just another “web” technology among the myriad. So to address that, I would like to just cover 3 of the Top “PRO’s” of SASS, that can bring immediate improvement to your “development time and experience” and perhaps persuade you to use them.
Q. variable in sass
A. Sass uses the $ symbol to make something a variable. example - $primary-color: #333;
Q. Explain what is Sass? How it can be used?
A. Sass stands for Syntactically Awesome Stylesheets and was created by Hampton Catlin. It is an extension of CSS3, adding nested rules, mixins, variables, selector inheritance, etc. Sass can be used in three ways
As a command-line tool
As a standalone Ruby module
As a plugin for any Rack-enabled framework
Q. Explain what is a @extend function used for in Sass?
A. In Sass, the @EXTEND directive provides a simple way to allow a selector to inherit the styles of another one. It aims at providing a way for selector A to extend the styles from selector B. When doing so, selector A will be added to selector B so they both share the same declarations. @EXTEND prevents code bloat by grouping selectors that share the same style into one rule.
8) Explain what is the use of the @IMPORT function in Sass?
A. The @IMPORT function in Sass
Extends the CSS import rule by enabling import of SCSS and Sass files
All imported files are merged into a single outputted CSS file
Can virtually mix and match any file and be certain of all your styles
@IMPORT takes a filename to import
Q. Give an example of mixin and inheritance in sass
A. example:-
$txtColor:blue;
.ptext{
color: $txtColor;
}
@mixin pwidth($pwidth){ // create mixins
width:$pwidth;
}
p{
@include pwidth(50%); //use mixins
}
section{
@extend .ptext; //inheritence in sass
@include pwidth(80%);
}
Others Important Q&A
___________________
Q: What is modernizr?
A: Modernizr is an open-source, MIT-licensed JavaScript library that detects support for many HTML5 & CSS3 new features. You should always use the latest version. It runs automatically
<script src="modernizr.min.js"></script>
if (Modernizr.canvas) {
// let's draw some wonderful shapes!
} else {
// no browser support for canvas available
}
.png)
