Frontend Developer

HTML stands for Hypertext Markup Language, and it is the standard markup language for creating web pages and web applications. HTML5 is the 5th version of HTML.

Some of the new features that were added in HTML5 that make it better than HTML are as follows : 

1) Intro of audio and video : Audio and Video tags are the two major addition to HTML5. It allows developers to embed a video or audio on their website. HTML5 video can use CSS and CSS3 to style the video tag.

2) Vector Graphics : This is a new addition to the revised version which has hugely impacted the use of Adobe Flash in websites. It can be used to draw graphics with various shapes and colors via scripting usually JS. Vector graphics are scalable, easy to create and edit. It also supports interactivity and animation. 

3) Header and Footer : With these new tags, there is no longer a need to identify the two elements with a tag. Footer is placed at the end of the web page while Header is placed at the start of the web page. By using and HTML5 elements, the browser will know what to load first and what to load later. 

The header can contain-
i) One or more heading elements ( – )
ii) Logo or icon
iii) Authorship information


Footer can contain-
i) Authorship information
ii) Copyright information
iii) Contact information
iv) Back to top links


4) Figure and Figcaption : HTML5 allows to use a element to mark up a photo in a document, and a element to define a caption for the photo. The tag defines a caption for a element. This tag provides a container for content that is equivalent to a figure.


5) Nav tag : The tag defines a set of navigation links. It is used for the part of an internet site that links to different pages at the website. The hyperlinks can be organized through a number of approaches. Common examples of the nav elements are menus, tables, contents, and indexes.

Answer : 
1) The CSS box model is a container that contains multiple properties including borders, margin, padding, and the content itself. 
2) It is used to create the design and layout of web pages. It can be used as a toolkit for customizing the layout of different elements. 
3) The web browser renders every element as a rectangular box according to the CSS box model. 
4) Box-Model has multiple properties in CSS. Some of them are given below: 
i) content : This property is used to displays the text, images, etc, that can be sized using the width & 
height property.
ii) padding : This property is used to create space around the element, inside any defined border.
iii) border : This property is used to cover the content & any padding, & also allows to set the style, color, 
and width of the border.
iv) margin : This property is used to create space around the element ie., around the border area.

Content Area : This area consists of content like text, images, or other media content. It is bounded by the content edge and its dimensions are given by content-box width and height.

Padding Area : It includes the element’s padding. This area is actually the space around the content area and within the border-box. Its dimensions are given by the width of the padding-box and the height of the padding-box.

Border Area : It is the area between the box’s padding and margin. Its dimensions are given by the width and height of the border.

Margin Area : This area consists of space between border and margin. The dimensions of the Margin area are the margin-box width and the margin-box height. It is useful to separate the element from its neighbors.

Answer :
1) Nearly all objects in JavaScript are instances of Object. 

2) That means all the objects in JavaScript inherit the properties and methods from Object.prototype. This is called Prototype chaining. 

3) This is a very powerful and potentially dangerous mechanism to override or extend object behavior.

4) Objects created using the new keyword inherit from a prototype called Object.prototype.
For example: If a date object [new Date()] is created with the new keyword, then it inherits the 
Date.prototype.
We have Date, Array, Function, RegExp in the list for the same. All these objects inherit from the Object.prototype.

5) We should never alter or change the predefined methods or properties of a prototype, It may cause inappropriate failure, which may be difficult to debug.

6) To check whether the object has a property or not, we use "hasOwnProperty()" method. For example if we have the age property in any object, we can check it with the help of the hasOwnProperty() method.

Let’s take a look at a quick example of prototype chaining.

In this example, we will create a class and add a prototype object in the same. After instantiation of the object, we will be able to use the prototype of the class. This is simply object prototype chaining.


> function Person(firstName, lastName, age){
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}

//Person class created

Person.prototype.getFullName = function(){
return this.firstName + ” ” + this.lastName;
}

// we have added getFullName method in Person’s prototype.
> var person = new Person(“ross”, “gellar”, 25);
// It will create an instance of the Person class

> person.hasOwnProperty(“firstName”); // true
> person.hasOwnProperty(“getFullName”); // false

> person.getFullName(); // ross gellar

In the above code, we used hasOwnProperty() method to check whether we have getFullName method as a property of the object. It returned false, that means there is no such property. But, when we used getFullName method, it returned the actual full name but the property was not there.

Reason : As the getFullName() method was not there in the object but still we were able to use it. We should not forget that we added the method in class Person’s prototype. The method went to the object through prototype chaining. It means the class had the method in its prototype, which went to its instance (person object) through prototype chaining.

Answer : 
HTML5 introduced 5 most popular media element tags i.e. , , , , . This media element tags changed the entire development using HTML.

Media Tags : 

: It is an inline element that is used to embed sound files into a web page.
: It is used to embed video files into a web page.
: It is used to attach multimedia files like audio, video, and pictures.
: It is used for embedding external applications which are generally multimedia content like audio 
or video into an HTML document.
: It specifies text tracks for media components audio and video.

Advantage of Media tag :

1) Plugins are no longer required
2) Speed – anything naturally integrated into a browser will be rendered and executed in a faster fashion 
than imported third-party
3) Native (built-in) controls are provided by the browser.
4) Accessibilities (keyboard, mouse) are built-in automatically

Approach 1 (Using Destructruring Assignment) : This method was specific only for JS and the interviewer was preety impressed when I used it .

Destructuring assignment (a feature of ES2015) lets you extract items of an array into variables. It works with any data type: numbers, strings, booleans, objects.

Code :

let a = 1;
let b = 2;
[a, b] = [b, a];
a; // => 2
b; // => 1

[a, b] = [b, a] is the destructuring assignment that swaps the variables a and b.


Approach 2 (Normal Method - Using a temporary variable - Not recommended in interviews though) : 

Code :

let a = 1;
let b = 2;
let temp;
temp = a;
a = b;
b = temp;
a; // => 2
b; // => 1

temp is the temporary variable.
At the first step, temp is assigned with the value of a. Then a variable is assigned with the value of b. Finally, the variable b is assigned with the value of temp (having the initial value of a).

Approach 3 (Without using temporary variable - Using Addition and Difference) : 

Code : 

let a = 1;
let b = 2;
a = a + b;
b = a - b;
a = a - b;
a; // => 2
b; // => 1

Initially, a is 1 and b is 2. Let's see how the 3 statements perform the swapping:

a = a + b assigns to a the value 1 + 2.
b = a - b assigns to b the value 1 + 2 - 2 = 1 (b is now 1).
a = a - b assigns to a the value 1 + 2 - 1 = 2 (a is now 2).
Finally, a is 2 and b is 1. The swapping of a and b has been performed.

Answer : 
1) The sort() method allows us to sort elements of an array in place. Besides returning the sorted array, the sort() method changes the positions of the elements in the original array.

2) By default, the sort() method sorts the array elements in ascending order with the smallest value first and largest value last.

3) The sort() method casts elements to strings and compares the strings lexicographically to determine the orders.

To sort an array of integers in JS :

Code : 

let numbers = [0, 1, 20, 3, 30, 2, 10];
numbers.sort((a, b) => a - b);

console.log(numbers); //[0,1,2,3,10,20,30]

The compare() function accepts two arguments a and b. The sort() method will sort elements based on the return value of the compare() function with the following rules:

i) If compare(a,b) is less than zero, the sort() method sorts a to a lower index than b. In other words, a 
will come first.
ii) If compare(a,b) is greater than zero, the sort() method sort b to a lower index than a, i.e., b will come 
first.
iii) If compare(a,b) returns zero, the sort() method considers a equals b and leaves their positions 
unchanged.

Answer :
1) A promise is an object that may produce a single value some time in the future: either a resolved value, or a reason that it’s not resolved (e.g., a network error occurred). 

2) A promise may be in one of 3 possible states: fulfilled, rejected, or pending. Promise users can attach callbacks to handle the fulfilled value or the reason for rejection.

3) Promises are eager, meaning that a promise will start doing whatever task we give it as soon as the promise constructor is invoked.

Working of Promises :

A promise is an object which can be returned synchronously from an asynchronous function. It will be in one of 3 possible states:

i) Fulfilled: onFulfilled() will be called (e.g., resolve() was called)
ii) Rejected: onRejected() will be called (e.g., reject() was called)
iii) Pending: not yet fulfilled or rejected

1) A promise is settled if it’s not pending (it has been resolved or rejected). Sometimes people use resolved and settled to mean the same thing: not pending.

2) Once settled, a promise can not be resettled. Calling resolve() or reject() again will have no effect. The immutability of a settled promise is an important feature.

3) Native JavaScript promises don’t expose promise states. Instead, you’re expected to treat the promise as a black box. 

4) Only the function responsible for creating the promise will have knowledge of the promise status, or access to resolve or reject.


Important Promise Rules : Promises following the spec must follow a specific set of rules :

1) A promise or “thenable” is an object that supplies a standard-compliant .then() method.

2) A pending promise may transition into a fulfilled or rejected state.

3) A fulfilled or rejected promise is settled, and must not transition into any other state.

4) Once a promise is settled, it must have a value (which may be undefined). That value must not change.

5) Change in this context refers to identity (===) comparison. An object may be used as the fulfilled value, and object properties may mutate.

Answer : 

A callback is a function that will be executed after another function gets executed.

In javascript, functions are treated as first-class citizens, they can be used as an argument of another function, can be returned by another function and can be used as a property of an object.

Functions that are used as an argument to another function are called callback functions.


Example Code :

function divideByHalf(sum){
console.log(Math.floor(sum / 2));
}

function multiplyBy2(sum){
console.log(sum * 2);
}

function operationOnSum(num1,num2,operation){
var sum = num1 + num2;
operation(sum);
}
operationOnSum(3, 3, divideByHalf); // Outputs 3
operationOnSum(5, 5, multiplyBy2); // Outputs 20



Explanation : 

In the code above, we are performing mathematical operations on the sum of two numbers.

The operationOnSum function takes 3 arguments, first number, second number, and the operation that is to be performed on their sum (callback) .

Both divideByHalf and multiplyBy2 functions are used as callback functions in the code above.

These callback functions will be executed only after the function operationOnSum is executed.

Therefore, callback is a function that will be executed after another function gets executed.

Answer : 
1) The same-origin policy is a critical security mechanism that restricts how a document or script loaded by one origin can interact with a resource from another origin.

2) It helps isolate potentially malicious documents, reducing possible attack vectors. 

3) For example, it prevents a malicious website on the Internet from running JS in a browser to read data from a third-party webmail service (which the user is signed into) or a company intranet (which is protected from direct access by the attacker by not having a public IP address) and relaying that data to the attacker.

Answer : 
Every React Component has a lifecycle of its own, lifecycle of a component can be defined as the series of methods that are invoked in different stages of the component’s existence.A React Component can go through four stages of its life as follows.

1) Initialization: This is the stage where the component is constructed with the given Props and default state. This is done in the constructor of a Component Class.

2) Mounting: Mounting is the stage of rendering the JSX returned by the render method itself.

3) Updating: Updating is the stage when the state of a component is updated and the application is repainted.

4) Unmounting: As the name suggests Unmounting is the final step of the component lifecycle where the component is removed from the page.

React provides the developers a set of predefined functions that if present is invoked around specific events in the lifetime of the component. Developers are supposed to override the functions with desired logic to execute accordingly.

Describing each phase and its corresponding functions.

1) Initialization: In this phase, the developer has to define the props and initial state of the component this is generally done in the constructor of the component. 

2) Mounting: Mounting is the phase of the component lifecycle when the initialization of the component is completed and the component is mounted on the DOM and rendered for the first time on the webpage. The mounting phase consists of two such predefined functions as described below.

2.a) componentWillMount() Function: As the name clearly suggests, this function is invoked right before 
the component is mounted on the DOM i.e. this function gets invoked once before the render() function 
is executed for the first time.

2.b) componentDidMount() Function: Similarly as the previous one this function is invoked right after the 
component is mounted on the DOM i.e. this function gets invoked once after the render() function is 
executed for the first time


3) Updation: Updation is the phase where the states and props of a component are updated followed by some user events such as clicking, pressing a key on the keyboard, etc. The following are the descriptions of functions that are invoked at different points of Updation phase.

3.a) componentWillReceiveProps() Function: This is a Props exclusive Function and is independent of 
States. This function is invoked before a mounted component gets its props reassigned. 

3.b) setState() Function: This is not particularly a Lifecycle function and can be invoked explicitly at any 
instant.

3.c) shouldComponentUpdate() Function: shouldComponentUpdate() Function: By default, every state 
or props update re-render the page but this may not always be the desired outcome, sometimes it is 
desired that updating the page will not be repainted.

3.d) componentWillUpdate() Function: As the name clearly suggests, this function is invoked before the 
component is rerendered i.e. this function gets invoked once before the render() function is executed 
after the updation of State or Props.

3.e) componentDidUpdate() Function: Similarly this function is invoked after the component is 
rerendered i.e. this function gets invoked once after the render() function is executed after the updation 
of State or Props.


4) Unmounting: This is the final phase of the lifecycle of the component that is the phase of unmounting the component from the DOM. The following function is the sole member of this phase.

4.a) componentWillUnmount() Function: This function is invoked before the component is finally 
unmounted from the DOM i.e. this function gets invoked once before the component is removed from 
the page and this denotes the end of the lifecycle.

Answer :

a) It is an IT company that caters to the telecommunication domain. The business involved in the telecommunication domain is interesting and can widen your chances of switching into various fields be it in software, hardware or networking profiles. Also, Amdocs carries a good brand name in its domain.

b) Amdocs employees get to enjoy a positive and happy work environment.

c) It is truly an employee friendly organisation.I say this because Amdocs policies are employee oriented above anything else.