Web Technologies

Question 1

What is the purpose of HTML5’s <canvas> element?</canvas>

Answer 1

The <canvas> element provides a way to draw graphics, animations, and other visual content using JavaScript.</canvas>

Question 2

Explain the box model in CSS.

Answer 2

The box model describes how elements are structured in terms of content, padding, border, and margin.

Question 3

How can you include JavaScript in an HTML page?

Answer 3

You can include JavaScript using the

 tag, either inline or by referencing an external file.

Question 4

What is the difference between null and undefined in JavaScript?

Answer 4

null is a deliberate absence of value, while undefined signifies a variable that has been declared but hasn’t been assigned a value.

Question 5

Explain CSS specificity.

Answer 5

CSS specificity determines which styles are applied when there are conflicting rules. It’s based on the combination of selectors used in the rule.

Question 6

What is event delegation in JavaScript?

Answer 6

Event delegation is a technique where you attach an event handler to a parent element and let it handle events on its child elements, reducing memory consumption and improving performance.

Question 7

What is a closure in JavaScript?

Answer 7

A closure is a function that captures variables from its containing lexical scope, allowing those variables to be accessed even after the outer function has finished executing.

Question 8

Explain the concept of hoisting in JavaScript.

Answer 8

Hoisting is the behavior where variable and function declarations are moved to the top of their containing scope during the compilation phase.

Question 9

How does CSS Flexbox work?

Answer 9

Flexbox is a layout model that allows you to design complex layouts with a more efficient and predictable arrangement of elements in a container.

Question 10

What is the purpose of the localStorage and sessionStorage APIs in JavaScript?

Answer 10

These APIs allow you to store key-value pairs in the browser. localStorage stores data with no expiration, while sessionStorage stores data for the duration of a session.

Question 11

What does AJAX stand for?

Answer 11

AJAX stands for “Asynchronous JavaScript and XML,” a set of techniques for making asynchronous requests to a server from a web page.

Question 12

How do you create an AJAX request in JavaScript?

Answer 12

You can use the XMLHttpRequest object or the more modern fetch API to create AJAX requests.

Question 13

What is JSON?

Answer 13

JSON (JavaScript Object Notation) is a lightweight data interchange format that is easy for humans to read and write, and easy for machines to parse and generate.

Question 14

How do you parse JSON in JavaScript?

Answer 14

You can use the JSON.parse() method to convert a JSON string into a JavaScript object.

Question 15

What is CORS, and why is it important?

Answer 15

CORS (Cross-Origin Resource Sharing) is a security feature implemented by browsers to prevent unauthorized requests from different origins. It ensures that requests are made only to trusted sources.

Question 16

What is a single-page application (SPA)?

Answer 16

An SPA is a web application that dynamically updates content on a single web page, providing a more fluid and seamless user experience.

Question 17

What is the virtual DOM in React?

Answer 17

The virtual DOM is a lightweight copy of the actual DOM in memory. React uses it to efficiently update the actual DOM by minimizing direct manipulations

Question 18

Explain two-way data binding in Angular.

Answer 18

Two-way data binding automatically synchronizes data between the model and the view, so changes in the view are reflected in the model and vice versa.

Question 19

What is a component in Vue.js?

Answer 19

In Vue.js, a component is a reusable and self-contained unit that encapsulates both the UI and its behavior.

Question 20

What is the purpose of React Router?

Answer 20

React Router is a library that enables client-side routing in a React application, allowing you to create different “pages” within a single-page application.

Question 21

How does Angular handle dependency injection?

Answer 21

Angular has a built-in dependency injection system that allows you to manage and inject dependencies into components, services, and other parts of the application.

Question 22

What is Vuex in Vue.js?

Answer 22

Vuex is a state management library for Vue.js applications, providing a centralized store to manage the application’s state and data.

Question 23

What is JSX in React?

Answer 23

JSX (JavaScript XML) is a syntax extension for JavaScript used with React to describe what the UI should look like.

Question 24

Explain the concept of props in React.

Answer 24

Props (short for properties) are a way to pass data from a parent component to a child component in React.

Question 25

How do you handle forms and user input in Angular?

Answer 25

Angular provides the ngModel directive and reactive forms to handle user input and form validation.

Question 26

What is the purpose of the <meta></meta> tag in HTML?

Answer 26

The <meta></meta> tag provides metadata about the HTML document, such as character encoding, authorship, and viewport settings.

Question 27

Explain the concept of event propagation in JavaScript.

Answer 27

Event propagation describes the order in which events are processed as they bubble up from the target element through its ancestors or capture down from ancestors to the target.

Question 28

How can you include an external CSS file in an HTML document?

Answer 28

You can link an external CSS file using the <link></link> element within the <head> section of the HTML document.

Question 29

What is the purpose of the async attribute in a

 tag?

Answer 29

The async attribute in a

 tag tells the browser to download the script asynchronously and not block the HTML parsing while fetching the script.

Question 30

Explain the concept of event delegation in jQuery.

Answer 30

Event delegation in jQuery involves attaching an event handler to a parent element and using event bubbling to handle events on its child elements.

Question 31

What is the difference between let, const, and var in JavaScript for declaring variables?

Answer 31

let and const are block-scoped declarations introduced in ES6, while var is function-scoped and has different behavior regarding hoisting.

Question 32

What is the purpose of the z-index property in CSS?

Answer 32

The z-index property controls the stacking order of elements in the z-axis, determining which elements appear above or below others.

Question 33

Explain the concept of callback functions in JavaScript.

Answer 33

A callback function is a function passed as an argument to another function, which is executed at a later time, often asynchronously.

Question 34

How do you handle errors in JavaScript?

Answer 34

Errors in JavaScript can be handled using try-catch blocks, which allow you to catch and manage exceptions that occur during code execution.

Question 35

What is the difference between inline and block elements in HTML?

Answer 35

Inline elements do not start on a new line and only take up as much width as necessary, while block elements start on a new line and occupy the full width available.

Question 36

What is the purpose of the XMLHttpRequest object in AJAX?

Answer 36

The XMLHttpRequest object allows you to make HTTP requests from a web page, enabling the retrieval of data from a server without requiring a full page refresh.

Question 37

What is the role of the Content-Type header in an HTTP request?

Answer 37

The Content-Type header indicates the media type of the resource being sent or requested, helping the server and browser understand how to handle the data.

Question 38

How can you handle cross-origin requests in AJAX?

Answer 38

Cross-origin requests are typically managed using techniques like JSONP (JSON with Padding), CORS (Cross-Origin Resource Sharing), or server-side proxying.

Question 39

What is the purpose of the responseType property in an AJAX request?

Answer 39

The responseType property allows you to specify the type of data you expect to receive in the response, such as JSON, text, or blob.

Question 40

Explain the difference between synchronous and asynchronous AJAX requests.

Answer 40

Synchronous requests block the execution of other code until the request is complete, while asynchronous requests allow the code to continue executing while waiting for the response.

Question 41

What is the virtual DOM in Vue.js?

Answer 41

Similar to React, Vue.js uses a virtual DOM to optimize updates by comparing the virtual DOM tree with the actual DOM and applying changes efficiently.

Question 42

Explain the concept of JSX in React.

Answer 42

JSX is a syntax extension for JavaScript used in React to describe the structure and appearance of the UI components using XML-like syntax.

Question 43

What is the purpose of the ngFor directive in Angular?

Answer 43

The ngFor directive is used to loop through an array or iterable and generate HTML elements for each item.

Question 44

How does Vue.js handle reactivity?

Answer 44

Vue.js achieves reactivity by using a reactive system that tracks changes to data and automatically updates the DOM when the data changes.

Question 45

How do you optimize the performance of a Vue.js application?

Answer 45

Vue.js provides optimization techniques such as using directives like v-if and v-for efficiently, using keys to help Vue track element identity, and employing lazy-loading for components.

Question 46

What is the role of a service in Angular?

Answer 46

Services in Angular are used to encapsulate and share data, business logic, or external communication between components.

Question 47

What is the purpose of the React useEffect hook?

Answer 47

The useEffect hook in React is used for handling side effects in functional components, such as data fetching, DOM manipulation, and subscriptions.

Question 48

How do you pass data from a parent component to a child component in Vue.js?

Answer 48

Data can be passed from a parent component to a child component in Vue.js using props.

Question 49

What is the role of a reducer in React’s context API?

Answer 49

A reducer is a function used to manage state changes in React’s context API. It takes the current state and an action and returns a new state.