📄
JavaScriptWhat are the most common JavaScript and JQuery interview questions And answer
Originally posted 10 Years Ago
JavaScript Interview Questions And Answers
1. IMMEDIATELY INVOKED FUNCTION EXPRESSION [IIFE]
Ans. http://prasadhonrao.com/javascript-functions-part-4-immediately-invoked-function-expression-iife/
2. Javascript Closures
Ans. https://developer.mozilla.org/en/docs/Web/JavaScript/Closures
3. Javascript Constructors and Prototypes and Inheritance
Ans. http://tobyho.com/2010/11/22/javascript-constructors-and/
http://phrogz.net/js/classes/OOPinJS2.html
http://tobyho.com/2011/11/11/js-object-inheritance/
4. Variable and Function Hoisting in JavaScript
Ans. http://adripofjavascript.com/blog/drips/variable-and-function-hoisting
5. Javascript Interview Question
Ans. http://stackoverflow.com/questions/11246/best-resources-to-learn-javascript
6. Object Oriented JavaScript Interview Questions and Answers
Ans. http://www.code-sample.com/2015/04/javascript-interview-questions-answers.html
7. Jquery Interview Question and answers
Ans. http://www.code-sample.com/2015/04/jquery-interview-questions-and-answers.html
8. Advance Javascript Interview Question
Ans. https://www.doppnet.com/10-advanced-javascript-interview-questions.html
9. 15 Minutes for JavaScript and AngularJS
http://www.guru99.com/interactive-javascript-tutorials.html
<!doctype html>
<html lang="en" ng-app="summit" class="summit-app">
<head>
<style>
img {
opacity: 1;
transition: opacity 0.3s;
}
img[data-src] {
opacity: 0;
}
</style>
</head>
<body>
<p>This is first Image</p>
<img src="Chrysanthemum.jpg" />
<p>This is 2nd Image</p>
<img data-echo="Desert.jpg" />
<p>This is 3rd Image</p>
<img data-echo="Hydrangeas.jpg" />
<p>This is 4th Image</p>
<img data-echo="Jellyfish.jpg" />
<p>This is 5th Image</p>
<img data-echo="Koala.jpg" />
<script>
(function(){
window.echo = (function (window, document) {
'use strict';
/*
* Constructor function
*/
var Echo = function (elem) {
this.elem = elem;
this.render();
this.listen();
};
/*
* Images for echoing
*/
var echoStore = [];
/*
* Element in viewport logic
*/
var scrolledIntoView = function (element) {
var coords = element.getBoundingClientRect();
return ((coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight));
};
/*
* Changing src attr logic
*/
var echoSrc = function (img, callback) {
img.src = img.getAttribute('data-echo');
if (callback) {
callback();
}
};
/*
* Remove loaded item from array
*/
var removeEcho = function (element, index) {
if (echoStore.indexOf(element) !== -1) {
echoStore.splice(index, 1);
}
};
/*
* Echo the images and callbacks
*/
var echoImages = function () {
for (var i = 0; i < echoStore.length; i++) {
var self = echoStore[i];
if (scrolledIntoView(self)) {
echoSrc(self, removeEcho(self, i));
}
}
};
/*
* Prototypal setup
*/
Echo.prototype = {
init: function () {
echoStore.push(this.elem);
},
render: function () {
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', echoImages, false);
} else {
window.onload = echoImages;
}
},
listen: function () {
window.onscroll = echoImages;
}
};
/*
* Initiate the plugin
*/
var lazyImgs = document.querySelectorAll('img[data-echo]');
for (var i = 0; i < lazyImgs.length; i++) {
new Echo(lazyImgs[i]).init();
}
})(window, document);
})();
</script>
</body>
</html>
summitApp.directive('portfolioExposureByRegionDrillDownChart', ['$timeout', '$filter', '$window', '$rootScope', 'MSG_TOPICS',
function ($timeout, $filter, $window, $rootScope, MSG_TOPICS) {
return {
restrict: 'E',
require: '^baseChart',
templateUrl: 'components/dashboard/portfolioDashboard/charts/portfolioExposureByRegionChart/portfolioExposureByRegionDrillDownChartTemplate.html',
scope: {
strategyId: '@',
strategyDesc: '=',
benchmarkDesc: '=',
geoHierarchyId: '@',
includeHistory: '@'
},
link: function (scope, element, attr, baseChartCtrl) {
angular.element($window).bind('resize', scope.resizeChart);
scope.chartHight = 210;
scope.chartId = 'portfolioExposureByRegionDrillDownChart';
scope.drilldownDateCategories = [];
scope.createChart = function () {
var baseChartObject = baseChartCtrl.createBaseChartObject();
baseChartObject.chart.height = 250;
baseChartObject.chart.spacingTop = 50;
baseChartObject.loading = {
labelStyle: {
top: '45%',
left: '40%',
//backgroundImage: 'url("/app/img/ajax-loader_L.gif")',
display: 'block',
width: '136px',
height: '26px',
backgroundColor: '#777',
align: 'center',
color: '#fff',
fontWeight: 'bold',
fontSize: '15px'
},
opacity: 0.6,
//backgroundColor: 'red',
//top: '2px',
width: '667px',
height: '397px'
};
baseChartObject.chart = {
type: 'column',
backgroundColor: '#1e1e1e',
plotBackgroundColor: '#1e1e1e',
events: {
drilldown: function (e) {
this.yAxis[0].update({
tickInterval: 10
}, false, false);
if (!e.seriesOptions) {
var chart = this;
chart.plotWidth = chart.chartWidth;
chart.plotHeight = chart.chartHeight;
chart.plotLeft = 0;
chart.plotTop = 0;
chart.showLoading('Loading...');
var selectedColumn = e.point.name;
var regionFilteredData = _.filter(scope.weightByRegionData, { 'region_name': selectedColumn });
regionFilteredData = _.sortBy(regionFilteredData, 'date_value');
var portfolioWeightDataPoints = [];
var benchmarkWeightsDataPoints = [];
var drilldownDateCategories = [];
for (var i = 0; i < regionFilteredData.length; i++) {
drilldownDateCategories.push(Date.parse(regionFilteredData[i].date_value).valueOf());
portfolioWeightDataPoints.push([Date.parse(regionFilteredData[i].date_value).valueOf(), regionFilteredData[i].portfolio_weight]);
benchmarkWeightsDataPoints.push([Date.parse(regionFilteredData[i].date_value).valueOf(), regionFilteredData[i].benchmark_weight]);
}
chart.drilldowns = {
series1: {
type: 'line',
name: scope.strategyDesc,
data: portfolioWeightDataPoints,
color: '#59fffb'
},
series2: {
type: 'line',
name: scope.benchmarkDesc,
data: benchmarkWeightsDataPoints,
color: '#FFAD79'
}
};
var series = [chart.drilldowns.series1, chart.drilldowns.series2];
setTimeout(function () {
chart.addSingleSeriesAsDrilldown(e.point, series[0]);
chart.addSingleSeriesAsDrilldown(e.point, series[1]);
chart.setTitle({ text: e.point.name + ' Region Weight Over Time' });
chart.applyDrilldown();
chart.hideLoading();
//chart.addSeriesAsDrilldown(e.point, series);
}, 1000);
}
},
drillup: function (e) {
this.yAxis[0].update({
tickInterval: 20
}, false, false);
var chart = this;
chart.showLoading('Loading.....');
chart.setTitle({ text: 'Weights By Region' });
chart.hideLoading();
}
}
};
baseChartObject.legend = {
enabled: true,
itemStyle: {
color: '#fff',
fontWeight: 'bold'
},
itemHoverStyle: {
color: '#fff'
},
itemHiddenStyle: {
color: '#444'
},
// borderColor: '#fff',
borderWidth: 1,
backgroundColor: '#2C3135',
borderRadius: 5,
};
baseChartObject.title = {
text: "Weights By Region",
style: {
color: '#fff'
}
};
baseChartObject.chart.width = getContainerWidth();
baseChartObject.plotOptions = {
column: {
allowPointSelect: false,
dataLabels: {
enabled: true,
inside: false,
align: 'center',
shadow: false,
style: {
color: '#fff',
textOutline: false,
fontWeight: 'bold',
fontSize: '11px'
},
formatter: function () {
return '<span style="color: white">' + Math.round(this.y) + '</span>';
}
}
}
};
baseChartObject.xAxis = {
id: 'xAxisCategory',
type: 'category',
categories: [],
tickmarkPlacement: 'between',
crosshair: false,
labels: {
style: {
fontSize: '10px',
color: '#fff',
textDecoration: 'none',
textTransform: 'uppercase'
},
useHTML: true,
formatter: function () {
var regionName = this.value.length > 4 ? this.value.substring(0, 6) : this.value;
return '<span title="' + this.value + '" style="color:#fff; text-decoration:none !important;">' + regionName; + '</span>';
},
textDecoration: 'none'
}
};
baseChartObject.yAxis = {
id: 'leftY',
min: 0,
tickInterval: 20,
labels: {
x: -5,
y: 4,
style: {
color: '#A4B5FF'
}
},
title: {
text: '',
style: {
color: '#A4B5FF',
fontSize: '10px'
}
},
gridLineWidth: 1,
opposite: false,
reversed: false
};
baseChartObject.tooltip.pointFormatter = function () {
return '<span style="color: ' + this.color + '">' + this.series.name + '</span>: <b>' + Highcharts.numberFormat(this.y, 0) + '</b><br/>';
};
scope.chart = Highcharts.stockChart(scope.chartId, baseChartObject);
scope.chart.showLoading("Loading...");
};
function getContainerWidth() {
return element[0].parentElement.clientWidth - 50;
}
scope.close = function () {
scope.onClose();
};
scope.resizeChart = function () {
if (scope.chart)
scope.chart.setSize(getContainerWidth(), scope.chartHeight);
};
scope.$watch(function () {
return element[0].parentElement.clientWidth;
},
function (newValue, oldValue) {
if (newValue != oldValue && scope.chart) {
scope.resizeChart();
}
});
scope.$watch('isBind', function () {
scope.chart.hideLoading();
});
$timeout(function () {
scope.createChart();
$timeout(scope.resizeChart, 1000);
}, 0);
},
controller: function ($scope, PortfolioDashboardService, $q) {
$scope.weightByRegionData = [];
var data = {
'strategy_Id': $scope.strategyId,
'geo_hierarchy_id': $scope.geoHierarchyId,
'includeHistory': 'true'
};
$scope.portfolioWeightDataPoints = [];
$scope.benchmarkWeightsDataPoints = [];
$scope.categories = [];
$scope.isBind = false;
if ($scope.portfolioWeightDataPoints.length > 0 || $scope.benchmarkWeightsDataPoints.length > 0) {
bindSeries();
} else {
getPortfolioExposureByResionData();
}
function bindSeries() {
$scope.$watch('strategyDesc', function (newValue, oldValue) {
if (newValue != null) {
$scope.chart.xAxis[0].categories = $scope.categories;
$scope.chart.addSeries({
id: 'portfolioWeightData',
color: '#59fffb',
// xAxis: 'xAxisCategory',
lineWidth: 1,
name: $scope.strategyDesc,
data: $scope.portfolioWeightDataPoints
});
$scope.chart.addSeries({
id: 'benchmarkWeightsData',
color: '#FFAD79',
// xAxis: 'xAxisCategory',
lineWidth: 1,
name: $scope.benchmarkDesc,
data: $scope.benchmarkWeightsDataPoints
});
$scope.isBind = true;
}
});
};
function getPortfolioExposureByResionData() {
PortfolioDashboardService.getPortfolioExposureByResion(data).then(function (response) {
$scope.weightByRegionData = response.data;
if (response.data.length > 0) {
var tmp_dt = response.data[0].date_value;
var firstRowArray = [];
for (var i = 0; i < response.data.length; ++i) {
if (response.data[i].date_value == tmp_dt) {
if (response.data[i].benchmark_weight > 1) {
firstRowArray.push(response.data[i]);
}
}
else
break;
}
if (firstRowArray.length > 0) {
var categories = [];
var portfolioWeightDataPoints = [];
var benchmarkWeightsDataPoints = [];
for (var i = 0; i < firstRowArray.length; i++) {
categories.push(firstRowArray[i].region_name);
portfolioWeightDataPoints.push({ name: firstRowArray[i].region_name, y: firstRowArray[i].portfolio_weight, drilldown: { region_name: firstRowArray[i].region_name } });
benchmarkWeightsDataPoints.push({ name: firstRowArray[i].region_name, y: firstRowArray[i].benchmark_weight, drilldown: { region_name: firstRowArray[i].region_name } });
}
$scope.categories = categories;
$scope.portfolioWeightDataPoints = portfolioWeightDataPoints;
$scope.benchmarkWeightsDataPoints = benchmarkWeightsDataPoints;
bindSeries();
}
}
});
};
}
};
}]);