skip 1,8,13 ~firdous maam

2. Write a short note on Document Object Model (DOM)

Definition: The Document Object Model (DOM) is a programming interface for web
documents, primarily HTML and XML.
Structure Representation:
The DOM represents a document as a tree-like structure where each node
corresponds to a part of the document (elements, attributes, text).
Node Types:
Element Nodes: Represent HTML tags.
Attribute Nodes: Represent the attributes of HTML elements.
Text Nodes: Represent the text content within elements.
Manipulation:
The DOM allows developers to access and manipulate the document's structure,
content, and style programmatically.
Dynamic Interaction:
By using scripting languages like JavaScript, developers can dynamically update
content, respond to user interactions, and create a responsive user experience.
Browser Independence:
The DOM is standardized, ensuring consistent behavior across different web browsers.
Use Cases:
Changing the content of a webpage without reloading.
Validating form input on the client side.
Creating dynamic and interactive web applications.
Importance:
 The DOM is fundamental in modern web development, enabling the creation of
dynamic, interactive, and user-friendly websites.

3. What are the criteria for an API to be a RESTful API?

1. Client-Server Architecture

The API should separate the user interface (client) from data storage (server). This
separation allows for the independent evolution of the client and server.

2. Statelessness

Each request from the client must contain all the necessary information for the server to
process it. The server does not store any session data, making each request independent.

3. Cacheability

Responses should indicate whether they are cacheable, allowing clients to reuse them for
future requests, which improves efficiency and reduces server load.

4. Uniform Interface

The API should have a consistent interface, making it easier to use. This is achieved by:
Resource Identification: Resources are identified by URIs (Uniform Resource
Identifiers).
Resource Manipulation: Resources are manipulated using standard HTTP methods
(GET, POST, PUT, DELETE).
Self-descriptive Messages: Each request and response contains enough information
to be understood in isolation.
HATEOAS: The client interacts with the API through hyperlinks provided by the server,
guiding the client on how to use the API.

5. Layered System

The API architecture should be composed of multiple layers, such as load balancers,
proxies, and gateways, allowing for scalability and flexibility.

6. Code on Demand (Optional)

The server can send executable code (e.g., JavaScript) to the client, which can be run on
the client-side. This is an optional feature and not required for an API to be RESTful.

4. Differentiate between JSON and XML. Discuss their use cases and
advantages in web development.
 JSON XML

Stands for JSON means JavaScript XML means Extensible

Object Notation. Markup Language.

History Douglas Crockford and The XML Working Group

Chip Morningstar released released XML in 1998.
JSON in 2001.

Format JSON uses a map-like XML stores data in a tree

structure with key-value structure with namespaces
pairs. for different data
categories.

Syntax The syntax of JSON is more The syntax of XML

compact and easier to read substitutes some
and write. characters for entity
references, making it more
verbose.

Parsing You can parse JSON with a You need to parse XML with
standard JavaScript an XML parser.
function.

Schema documentation JSON is simple and more XML is complex and less
flexible. flexible.

Data types JSON supports numbers, XML supports all JSON

objects, strings, and data types and additional
Boolean arrays. types like Boolean, dates,
images, and namespaces.

Ease of use JSON has smaller file sizes XML tag structure is more
and faster data complex to write and read
transmission. and results in bulky files.

Security JSON is safer than XML. You should turn off DTD
when working with XML to
mitigate potential security
risks
Use Cases of JSON in Web Development:

1. APIs and Web Services: Used in RESTful APIs for data exchange between clients and
servers.
2. Configuration Files: Ideal for storing application settings due to its simplicity.
3. NoSQL Databases: Used in databases like MongoDB for flexible data storage.
4. Client-Side Data Handling: Commonly used in JavaScript for dynamic content updates.

Use Cases of XML in Web Development:

1. Legacy System Data Interchange: Used in B2B transactions and enterprise applications.
2. Document Storage: Suitable for storing structured documents like configuration files.
3. SOAP Web Services: Primary format for SOAP messages in enterprise environments.
4. RSS Feeds: Used for distributing content updates like news and blogs.

Advantages of JSON:

Lightweight and Faster: Less verbose, leading to faster transmission and parsing.
Easy to Use and Read: Simple syntax, especially in JavaScript environments.
Performance: More efficient for web and mobile apps.

Advantages of XML:

Complex Data Representation: Handles hierarchical data with attributes.

Strong Validation: Ensures data integrity through schemas.
Extensibility: Custom tags and attributes for varied applications.
Interoperability: Widely supported across different platforms.

5. Draw and illustrate 3-tier web architecture.

-a software design pattern commonly used in web applications

-separated in 3 logical tiers

1. Presentation Layer
responsible for interacting with the user
handles tasks like displaying information, gathering user input, & formatting data for
presentation
consists UI components like html, css and javascript
2. Application Layer
 responsible for processing user requests an applying business logic
tasks like validating user input, performing calculations & interfacing with the data tier
often implemented using Java, Python or PHP
3. Data Tier
responsible for storing & managing application data
consists DBMS like MySQL, Oracle or SQL Server

6. What is HTTP? Explain its working along with request and response
example.

HTTP (Hypertext Transfer Protocol) is the foundation of data communication on the web. It is
a protocol used to transfer hypertext (HTML) documents, images, videos, and other resources
between a web server and a client (such as a web browser). HTTP defines how messages are
formatted and transmitted, and how web servers and browsers should respond to various
commands.

How HTTP Works:

1. Client Request:
The process begins when a client (e.g., a web browser) sends an HTTP request to a
server.
The request specifies the resource the client wants to access (like a web page or an
image).
2. Server Processing:
The server receives the request, processes it, and determines the appropriate
response.
The server may access databases, run scripts, or retrieve files to generate the
response.
3. Server Response:
The server sends an HTTP response back to the client, which includes the requested
resource or an error message.
The response also contains status information about the request (e.g., whether it was
successful or not).
4. Client Receives and Processes:
The client (browser) receives the response and renders the content (e.g., displaying a
webpage) for the user.

HTTP Request Example:

When a user types a URL into their browser, the browser sends an HTTP request to the server
hosting that URL.

Example Request:

GET /index.html HTTP/1.1

Host: www.example.com

User-Agent: Mozilla/5.0

Accept: text/html

GET: The method used to request data.

/index.html: The specific resource being requested.
HTTP/1.1: The version of HTTP being used.
Host: The domain name of the server.
User-Agent: Information about the browser making the request.
Accept: The types of content the client can process (e.g., text/html).

HTTP Response Example:

The server processes the request and sends back an HTTP response.

Example Response:

HTTP/1.1 200 OK

Content-Type: text/html

Content-Length: 3056

<html>

<head><title>Example Page</title></head>

<body><h1>Welcome to Example.com</h1></body>

</html>

200 OK: A status code indicating that the request was successful.
Content-Type: The type of content being sent (e.g., text/html).
Content-Length: The size of the response body in bytes.
Response Body: The actual HTML content of the page.

7. Write an XML file marksheet.xml representing your semester mark

sheet. How do you prove that it is well formed and valid XML?

this question felt boring toh option me diya

9. Compare and contrast the use of classes and inheritance in JavaScript

with functional programming paradigms. Provide examples

yeh question nahi samajh me aaya T-T T-T

10. Differentiate ES5 and ES6. Give an example of the Anonymous and
Arrow function in ES6

ES5 ES6

ECMA script is a trademarked scripting ECMA script is a trademarked scripting

language specification defined by Ecma language specification defined by Ecma
International. The fifth edition of the same International. The sixth edition of the same
is known as ES5 is known as ES6

It was introduced in 2009. It was introduced in 2015.

It supports primitive data types that are In ES6, there are some additions to
string, number, boolean, null, and JavaScript data types. It introduced a new
undefined. primitive data type ‘symbol’ for supporting
unique values.

There is only one way to define the There are two new ways to define variables
variables by using the var keyword. that are let and const.

It has a lower performance as compared to It has a higher performance than ES5.

ES6.

Object manipulation is time-consuming in Object manipulation is less time-

ES5. consuming in ES6.

In ES5, both function and return keywords An arrow function is a new feature
are used to define a function. introduced in ES6 by which we don’t
require the function keyword to define the
function.

It provides a larger range of community It provides a smaller range of community

support than that of ES6 support than ES5.

Anonymous Function in ES6

An anonymous function is a function that doesn't have a name. It's often used as a callback
function or passed as an argument to other functions.
Example:

// Anonymous function used as a callback

setTimeout(function() {

console.log("This is an anonymous function.");

}, 1000);

Arrow Function in ES6

Arrow functions provide a more concise syntax for writing functions. They also lexically bind
the this value, making them particularly useful in certain scenarios like callbacks.

Example:

// Arrow function

const add = (a, b) => a + b;

console.log(add(5, 3)); // Output: 8

11. JavaScript Code

· Write a JavaScript Program that changes the background

color of page by refreshing the page every 2 seconds
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Color Changer</title>
<style>
body
{
transition: background-color 1s;
}
</style>
</head>
<body>
<script>
function getRandomColor()
 {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++)
{
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}

function changeBackgroundColor() {
document.body.style.backgroundColor = getRandomColor();
}

setInterval(() =>
{
window.location.reload();
}
, 2000);

changeBackgroundColor();
</script>
</body>
</html>

· Write a JavaScript to change the background color of the web

page to red color if button named “RED” is clicked and to green
color if button named “GREEN” is clicked.
<!DOCTYPE html>
<html>
<head>
<title>Change Background Color</title>
</head>
<body>
<button id="redButton">RED</button>
<button id="greenButton">GREEN</button>

<script>
const redButton = document.getElementById('redButton');
 const greenButton = document.getElementById('greenButton');

redButton.addEventListener
('click', () =>
{
document.body.style.backgroundColor = 'red';
}
);

greenButton.addEventListener
('click', () =>
{
document.body.style.backgroundColor = 'green';
}
);
</script>
</body>
</html>

· Write JavaScript to validate Username, Password and Email.

Username and Password should not be blank and minimum
length of password =8. Email should have @ character.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation</title>
</head>
<body>

<h2>Registration Form</h2>
<form id="registrationForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>

<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
 <label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>

<button type="submit">Register</button>
</form>

<p id="errorMessages" style="color:red;"></p>

<script>
document.getElementById('registrationForm').addEventListener
('submit', function(event)
{
event.preventDefault();

const username = document.getElementById('username').value.trim();

const password = document.getElementById('password').value.trim();
const email = document.getElementById('email').value.trim();
let errorMessages = '';
if (username === '')
{
errorMessages += 'Username cannot be blank.<br>';
}
if (password === '')
{
errorMessages += 'Password cannot be blank.<br>';
} else if (password.length < 8)
{
errorMessages += 'Password must be at least 8 characters long.<br>';
}
if (email === '')
{
errorMessages += 'Email cannot be blank.<br>';
} else if (!email.includes('@'))
{
errorMessages += 'Email must contain the @ character.<br>';
}
if (errorMessages) {

document.getElementById('errorMessages').innerHTML =
errorMessages;

} else

document.getElementById('errorMessages').innerHTML = 'Form
submitted successfully!';

}
}
);
</script>
</body>
</html>

· Write a JavaScript code for displaying a digital clock on a web

page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Digital Clock</title>
<style>
body
{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #333;
color: #fff;
font-family: Arial, sans-serif;
font-size: 48px;
}
#clock
{
padding: 20px;
border: 2px solid #fff;
border-radius: 10px;
background-color: #444;
 }
</style>
</head>
<body>

<div id="clock"></div>

<script>
function updateClock()
{
const now = new Date();
let hours = now.getHours();
let minutes = now.getMinutes();
let seconds = now.getSeconds();
hours = hours < 10 ? '0' + hours : hours;
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;
const timeString = hours + ':' + minutes + ':' + seconds;

document.getElementById('clock').textContent = timeString;
}
setInterval(updateClock, 1000);
updateClock();
</script>

</body>
</html>

· Write a JavaScript code to set a cookie in the user’s computer

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Set Cookie</title>
</head>
<body>
 <button onclick="setCookie('username', 'Boy', 7)">Set Cookie</button>

<script>
function setCookie(name, value, days)
{
let expires = "";
if (days)
{
const date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
setCookie('username', 'Boy', 7);
</script>
</body>
</html>

12. What are the features of React.js?

1. JSX(JavaScript Syntax Extension):

JSX is a combination of HTML and JavaScript. You can embed JavaScript objects
inside the HTML elements. JSX is not supported by the browsers, as a result, Babel
compiler transcompile the code into JavaScript code. JSX makes codes easy and
understandable. It is easy to learn if you know HTML and JavaScript.

const name="HelloWorld";
const ele = <h1>Welcome to {name}</h1>;

2. Virtual DOM:
DOM stands for Document Object Model. It is the most important part of the web
as it divides into modules and executes the code. Usually, JavaScript Frameworks
updates the whole DOM at once, which makes the web application slow. But react
uses virtual DOM which is an exact copy of real DOM. Whenever there is a
modification in the web application, the whole virtual DOM is updated first and
finds the difference between real DOM and Virtual DOM.

In the above-shown figure, when the whole virtual DOM has updated there is a
change in the child components. So, now DOM finds the difference and updates
only the changed part.

3. One-way Data Binding:

One-way data binding, the name itself says that it is a one-direction flow. The data
in react flows only in one direction i.e. the data is transferred from top to bottom
i.e. from parent components to child components. The properties(props) in the
child component cannot return the data to its parent component but it can have
communication with the parent components to modify the states according to the
provided inputs.

4. Performance:
As we discussed earlier, react uses virtual DOM and updates only the modified
parts. So , this makes the DOM to run faster. DOM executes in memory so we can
create separate components which makes the DOM run faster.

5. Extension:
React has many extensions that we can use to create full-fledged UI applications. It
supports mobile app development and provides server-side rendering. React is
extended with Flux, Redux, React Native, etc. which helps us to create good-looking
UI.

6. Conditional Statements:
JSX allows us to write conditional statements. The data in the browser is displayed
according to the conditions provided inside the JSX.

Syntax:

const age = 12;

if (age >= 10)
{
<p> Greater than { age } </p>;
}
else
{
<p> { age } </p>;
}

7. Components:
React.js divides the web page into multiple components as it is component-based.
Each component is a part of the UI design which has its own logic and design as
shown in the below image. So the component logic which is written in JavaScript
makes it easy and run faster and can be reusable.

8. Simplicity:
React.js is a component-based which makes the code reusable and React.js uses
JSX which is a combination of HTML and JavaScript. This makes code easy to
understand and easy to debug and has less code.

14. Explain React Component Life cycle with suitable diagram

The React component lifecycle is a sequence of methods that are called at different stages of
a component's existence. These stages are broadly divided into three phases:

1. Initialization Phase
2. Mounting Phase
3. Updating Phase
4. Unmounting Phase

Here’s a breakdown of these phases and their associated lifecycle methods, including a
diagram for better understanding:

Initialization Phase

This phase is where the component is being set up before it is mounted. It includes:

Constructor: Initializes the state and binds methods.

static getDerivedStateFromProps(props, state): Called right before rendering when new
props are received. It allows the component to update its state based on the props
changes.

Mounting Phase

This phase is when the component is being added to the DOM. It includes:

componentDidMount: Called once the component is mounted and is ideal for making API
calls or initializing data.

Updating Phase

This phase occurs when the component is being re-rendered due to changes in state or
props. It includes:
 static getDerivedStateFromProps(props, state): Also called during this phase if the
component receives new props.
shouldComponentUpdate(nextProps, nextState): Determines if the component should
re-render based on changes to props or state.
render: The method where the component’s UI is described.
getSnapshotBeforeUpdate(prevProps, prevState): Called right before the changes are
applied to the DOM. It allows capturing some information (snapshot) from the DOM
before the update.
componentDidUpdate(prevProps, prevState, snapshot): Called after the component has
updated, which can be used for operations like network requests based on prop or state
changes.

Unmounting Phase

This phase is when the component is being removed from the DOM. It includes:

componentWillUnmount: Called right before the component is unmounted and is used

for cleanup tasks like invalidating timers or canceling network requests.

Error Handling (Optional)

If there are errors during rendering, lifecycle methods, or in the constructor, you can use:

componentDidCatch(error, info): Called when there is an error in a child component’s

lifecycle