Cloud Labels

framework, mvc, AngularJS, angular, angular2, angular.js, react, jsx, transformer, view, Node.js Foundation

JavaScript DOM Manipulation - jQuery - CSS - Q&A

Question:

Write code that shows how to give a class to all X tag elements in an HTML page using CSS | JS | JQUERY

Answer

// CSS

div{

    background: rgba(0, 180, 0, .3);

    width: 150px;

    height: 150px; }


// JavaScript

var divs = document.getElementsByTagName('DIV');

for (i in divs){

    divs[i].className = "newDivClass";

};


// jQuery

var divs = $('DIV');

$.each(divs, function(index){

    divs[index].className = "newDivClass"

});

JavaScript loop through array of objects - Object Array Iteration - Q&A

Question:

Show different ways to iterate over an array of objects?

Answer

var arr = [{"name":"ofer", "age":21},{"name":"ofer", "age":22},{"name":"ofer", "age":23},{"name":"ofer", "age":24},{"name":"ofer", "age":25}];

console.log("forIn:\n"); // For..In Loop
for(var i in arr)
    console.log(arr[i].name + " " + arr[i].age);

console.log("foreach:\n"); //Foreach Loop; does not support break; Use every() instead;
arr.forEach(function(item){
    console.log(item.name + " " + item.age);
});

console.log("for:\n"); // For Loop
for(var i = 0; i < arr.length; i++)
    console.log(arr[i].name + " " + arr[i].age);

console.log("every:\n"); // Every Loop
arr.every(function(item){
    console.log(item.name + " " + item.age);
    return true
});

console.log("some:\n"); // Some Loop
arr.some(function(item){
    console.log(item.name + " " + item.age);
});

JavaScript Array - 2 Dimensional Array - Q&A

Question:

How do you create an array in JS?
Can you create 2 dimensional array?

Answer

var arr = [1,2,3,4,5,6]; // Define simple array

var arr2d = [[1,2],[3,4],[5,6]]; // Define 2D array



arr[1] = 22; // Push data to simple array

arr2d[0][1] = 22; // Push data to 2D array



alert(arr[1]); // Read data from simple array

alert(arr2d[0][1]); // Read data from 2D array

JavaScript Session - HTML Local Storage - Q&A

Question:

What is a session and how does it works?

Answer

The sessionStorage is used for storing data on the client. The sessionStorage object is equal to the localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the specific browser tab. For example;

if (sessionStorage.clickcount) {

    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;

} else {

    sessionStorage.clickcount = 1;

}

JavaScript Session vs Cookie - Q&A

Question:

What are the differences between SESSION and COOKIE?
Where each of them is located?
Is it possible for another site to see others cookie?

Answer

In terms of capabilities, cookies only allow you to store strings. sessionStorage allow you to store JavaScript primitives but not Objects or Arrays (it is possible to JSON serialise them to store them using the APIs). Session storage will generally allow you to store any primitives or objects supported by your Server Side language/framework.
Cookies location.
Sessionstorage & localstorage location.
A properly designed browser will not allow a website to access another website's cookies, as this would violate the cross-domain policy and be a major security issue.

JavaScript - document.ready() - Q&A

Question:

What is the difference between these two lines of code?

$(document).ready(function() {}); // first line

$(function() {}); // second line

Answer

The two lines do exactly the same. The second line is just a shorten way for the first line.
 Both set the method for document ready.

JavaScript Operator === vs == - Q&A

Question:

What is the difference between the '==' operator to '===' ?

Answer

While the '==' operator compare value only (if needed, making some type conversion on the way) the '===' operator compare both type and value .

JavaScript Array Manipulation - Q&A

Question:

How do you remove an item from array? Give an example in code.

Answer

var arr = [1,2,3,4];
arr.splice(index, 1);

JavaScript - jQuery - DOM Manipulation - Q&A

Question:

Output all elements count and print them to the page in the following format :

Answer

var all = $('*');
console.log( all.length );
var elements = [];
for (var i = 0;  i < all.length;  i++){
    if (!elements[$(all[i]).prop('tagName')])
        elements[$(all[i]).prop('tagName')] = 1;
    else
        elements[$(all[i]).prop('tagName')]++;
};

console.log(elements);

JavaScript - jQuery templates - Q&A

Question:

Build a jQuery template to show the following JSON in HTML table (“al” stands for a table row):

var data =  {"al":[

    {"id":"0","a":[{"txt":"Person","id":0},

    {"txt":"Description","id":0}]},

    {"id":"1","a":[{"txt":"Maxi","id":1},

        {"txt":"a rock star","id":2}]},

    {"id":"2","a":[{"txt":"Rocky","id":3},

        {"txt":"a rock star's friend","id":4}]},

    {"id":"3","a":[{"txt":"Linda Chavez","id":5},

        {"txt":"a reporter","id":6}]},

    {"id":"4","a":[{"txt":"Bill Winter","id":7},

        {"txt":"an announcer on a radio show","id":8}]}]};

Answer

<script id="dataTemplate" type="text/x-jquery-tmpl">
<table>
<tr>
 <th>id</th>
 <th>txt</th>
 <th>id</th>
 <th>txt</th>
</tr>
{{each al}}
 <tr>
{{each a}}
    <td>
    ${id}
    </td>
    <td>
    ${txt}
    </td>
  {{/each}}
 <tr>
{{/each}}
</table>
</script>

JavaScript - jQuery - 'this' keyword - Scope - Q&A

Question:

What is the difference between this and $(this) when used in the following bound function?

Answer

Using $(this), you are just passing the this in $() as a parameter so that you could call jQuery methods and functions.

JavaScript - jQuery selectors - Q&A

Question:

Give examples for the following jQuery selectors:
1) Select all paragraphs with the class “yellow”
2) Select all <div> tags by name “green”

Answer

JavaScript Operators - Q&A

Question:What will be the result of running the code below?
What will be the result if we'll drop the "b &&" from the if statement?

AnswerIn the first run the code will result in an exception stating that b is undefined.
In the second run the code will result in an alert("false"). This is because the property proA is undefined.

JavaScript Function context - Q&A

Question:

What is the result of the following code? Explain your answer. 

Answer

The code prints Aurelio De Rosa and John Doe. The reason is that the context of a function, what is referred with the this keyword, in JavaScript depends on how a function is invoked, not how it’s defined. In the first console.log() call, getFullname() is invoked as a function of the obj.prop object. So, the context refers to the latter and the function returns the fullname property of this object. On the contrary, when getFullname() is assigned to the test variable, the context refers to the global object (window). This happens because test is implicitly set as a property of the global object. For this reason, the function returns the value of a property called fullname of window, which in this case is the one the code set in the first line of the snippet.

JavaScript hoisting - Q&A

Question:

What’s the result of executing this code and why?

Answer

The reason is that both variables and functions are hoisted (moved at the top of the function) but variables don’t retain any assigned value. So, at the time the variable a is printed, it exists in the function (it’s declared) but it’s still undefined. Stated in other words, the code above is equivalent to the following:

JavaScript Prototype and inheritance - Q&A

Question:

Define a repeatify function on the String object. The function accepts an integer that specifies how many times the string has to be repeated. The function returns the string repeated the number of times specified. For example:

Should print hellohellohello.

Answer

The question tests the knowledge of the developer about inheritance in JavaScript and the prototype property. It also verifies that the developer is able to extend native data type functionalities (although this should not be done).
Another important point here is to demonstrate that you are aware about how to not override possible already defined functions. This is done by testing that the function didn’t exist before defining your own.

JavaScript use strict mode - Q&A

Question:

Given the code below, what will be printed to the log and why?

Answer

The trick of this question is that in the IIFE there are two assignments but the variable a is declared using the keyword var. What this means is that a is a local variable of the function. On the contrary, b is assigned to the global scope.

The other trick of this question is that it doesn’t use strict mode ('use strict';) inside the function. If strict mode was enabled, the code would raise the error Uncaught ReferenceError: b is not defined. Remember that strict mode requires you to explicitly reference to the global scope if this was the intended behavior. So, you should write:

JavaScript inheritance - Q&A

Question:

Implement a JavaScript inheritance.

Answer

JavaScript hoisting - Q&A

Question:

Please describe what will be printed out to the screen and why?

Answer

Undefined.
In one word, Hoisting. Hoisting is JavaScript's default behavior of moving all declarations to the top of the current script or the current function. Important to note that JavaScript only hoists declarations, not initializations. Because of Hoisting the code above will actually look like this;

JavaScript Implicitly invoke method - Q&A

Question:

Please describe what will be printed out to the screen and why?

Answer

In the first console.log() the printed result will be a text representation of the func obj. 

This is because getTheName is a pointer (reference) to func object and when we try to print the object we actually call the toString() method.

In the second console.log() the printed result will be Miki. This is because we implicitly invoke the getMashu() method.