Practice set

1 Working of web

We will have a client on the left side and server on the right side. A user wants
to see a website, like www.javatpoint.com/java-tutorial. The user types the
URL of a page using a client program, usually a browser. But first, the
computer of the user and the web server need to be physically connected.
That is the job of the internet. Using the TCP/IP protocol, it establishes a
connection using a combination of cable media or wireless media and does all
the necessary work to prepare the environment for the two computers to talk
via the HTTP protocol.

When the connection establishes, the client sends a request called the HTTP
message, but because the HTTP is a connectionless protocol, so the client
disconnects from the server and waits for the response.

On the other side, the server processes the request, prepare the response,
establish the connection again, and send it back the response and again in
the form of an HTTP message to the client. Then the two computers
completely disconnect.

2 Organisation Controlling Internet

No one person, company, organization or government runs the Internet.

It is a globally distributed network comprising many voluntarily interconnected
autonomous networks.
Still there are some names:-

1. Internet Architecture Board

2. Internet Engineering Task Force
3. Isoc
4. International TeleCommunication Union
5. W3c

3 Protocol used to send Mails

SMTP
ProtocolSMTP stands for Simple Mail Transfer Protocol. SMTP is the
principal email protocol that is responsible for the transfer of emails between
email clients and email servers.

4 Protocols used in Internet

Internet protocols - set of rules hote hai that governs the communication and
exchange of data over the internet. Both the sender and receiver should follow
the same protocols in order to communicate the data.

Types of protocols
5 Examples of Internet browsers

The most popular web browsers are Google Chrome, Microsoft Edge
(formerly Internet Explorer), Mozilla Firefox, and Apple's Safari. If you
have a Windows computer, Microsoft Edge (or its older counterpart, Internet
Explorer) are already installed on your computer.
6 Explain Dial-Up Connectivity to start Internet.

Dial-up is a technology used to connect to the internet using a standard

telephone line. It works by dialing a specific phone number provided by an
internet service provider (ISP) and establishing a connection through a
modem.

How does dial-up internet work?

When you connect to the internet using dial-up, your computer uses a modem
to convert digital data from your computer into analog signals that can be
transmitted over a telephone line. These analog signals are then sent to the
internet service provider’s (ISP's) equipment, which converts them back into
digital data and connects you to the internet.

Can I use dial-up and broadband simultaneously?

No, you cannot use dial-up and broadband simultaneously on the same line.
Dial-up requires exclusive access to the telephone line, so if you want to
switch to broadband, you will need to disconnect your dial-up connection.

7 How does web browser searches any web resource?

Browsers are responsible for retrieving and displaying web content to users.
When a user enters a URL or clicks on a link, the browser initiates a complex
series of actions to retrieve the web content from a server and display it on the
user’s device.

The process begins with Domain Name System (DNS) resolution, where the
browser translates the domain name into an IP address to locate the server
where the web page is stored.

The browser then sends an HTTP request to the server, specifying the
path and parameters of the requested resource.
Once the server receives the request, it sends an HTTP response to the
browser containing the requested resource in HTML, CSS, and
JavaScript code.
The browser’s rendering engine interprets and renders the code to
display the web page on the user’s device.
The CSS stylesheets are applied to format the web page’s content,
including fonts, colors, and layout.
The browser may also execute JavaScript code on the web page to add
interactivity and dynamic behavior.

As new content is loaded or changes are made to the web page, the browser
updates the display accordingly.

8 What is the meaning of stateless protocol? Mention the name of

an stateless protocol.

Stateless Protocols are the type of network protocols in which Client send
request to the server and server response back according to current state. It
does not require the server to retain session information or a status about
each communicating partner for multiple request.

HTTP (Hypertext Transfer Protocol), UDP (User Datagram Protocol), DNS

(Domain Name System) are the example of Stateless Protocol.

9 What is the architecture of Internet? Explain its working.

The architecture of the Internet is ever-changing due to continuous changes in

the technologies as well as the nature of the service provided. The
heterogeneity and vastness of the Internet make it difficult to describe every
aspect of its architecture.

The overall architecture can be described in three levels −

1. Backbone ISP (Internet Service Provider)

2. Regional ISPs
3. Clients

10 Explain the use of HTTPS used in the Internet. How is this

related to security?
Hypertext Transfer Protocol Secure is a protocol that is used to communicate
between the user browser and the website. It also helps in the transfer of
data. It is the secure variant of HTTP. To make the data transfer more secure,
it is encrypted. Encryption is required to ensure security while transmitting
sensitive information like passwords, contact information, etc.

How Does HTTPS Work?

HTTPS establishes the communication between the browser and the web
server. It uses the **Secure Socket Layer** (SSL) and **Transport Layer
Security** (TLS) protocol for establishing communication. The new version of
SSL is **TLS(Transport Layer Security)**.
11 What is the purpose of tag in HTML What are different tags
used in tag? Explain with the help of a suitable example.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
<body>
</body>
</html>

The <head> tag in HTML is used to define the header section of a

document, which contains metadata about the document, such as
its title, links to stylesheets, scripts, and other important
information that isn't directly visible on the webpage.

Here are some of the commonly used tags within the <head> tag:
 1. <title>: Defines the title of the document, which appears in
the browser's title bar or tab.
2. <meta>: Provides metadata about the HTML document, such as
character set, author, description, and keywords for search
engines.
3. <link>: Specifies external resources like stylesheets (CSS)
or icons.
4. <style>: Defines internal CSS styles for the document.
5. <script>: Includes JavaScript code or links to external
JavaScript files.

12 What are different ways to add CSS in a web page? Write a

program to add CSS using all the possible ways.

There are several ways to add CSS to a web page:

1. Inline CSS: You can add CSS directly to HTML elements using the style
attribute.
2. Internal CSS: CSS can be included within the HTML document using the
style tag in the head section.
3. External CSS: CSS can be written in an external file and linked to the
HTML document using the link tag.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>CSS Examples</title>

<!-- Internal CSS -->

<style>
h1 {
color: blue;
}
</style>

<!-- External CSS -->

 <link rel="stylesheet" href="styles.css">

</head>
<body>

<!-- Inline CSS -->

<h1 style="font-size: 24px;">This is an example of inline
CSS</h1>

<!-- Content -->

<p>This is a sample paragraph.</p>

</body>
</html>

13 How can we add image in a web page? Write the names of four
attributes used for image show.

<img
src="images/dinosaur.jpg"
alt="The head and torso of a dinosaur skeleton;
it has a large head with long sharp teeth"
width="400"
height="341"
title="A T-Rex on display in the Manchester University Museum"
/>

14 How do we move text in the direction bottom to up in a web

page? Explain with a suitable example in which text direction will
be bottom to top and image from up to down.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Text and Image Animation</title>
<link rel="stylesheet" href="styles.css">
 </head>
<body>

<div class="container">
<div class="text">This text moves from bottom to
top</div>
<img src="example.jpg" alt="Example Image"
class="image">
</div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Text and Image Animation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="container">
<div class="text">This text moves from bottom to
top</div>
<img src="example.jpg" alt="Example Image"
class="image">
</div>

</body>
</html>

14 Css Box Properties

1. width: Sets the width of an element.

2. height: Sets the height of an element.
 3. margin: Specifies the margin around an element, which creates space
outside of its border.
4. padding: Specifies the padding inside an element, creating space
between the content and the border.
5. border: Sets the border properties for an element (e.g., width, style,
color).
6. background: Sets the background properties for an element (e.g., color,
image).
7. box-sizing: Determines how the total width and height of an element are
calculated, including its padding and border.
8. display: Specifies how an element should be displayed (e.g., block,
inline, inline-block).
9. position: Sets the positioning method for an element (e.g., static,
relative, absolute, fixed).
10. overflow: Specifies what should happen if the content of an element
overflows its box (e.g., scroll, hidden).
11. float: Positions an element to the left or right, allowing content to flow
around it.
12. clear: Specifies whether an element can be positioned next to a floated
element.
13. box-shadow: Adds shadow effects to an element's box.
14. border-radius: Sets the radius of the corners of an element's border.
15. outline: Sets the outline properties for an element (e.g., width, style,
color), similar to border but does not affect layout.
 div { width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;}

16 Write down the names of technologies used in client side and

server side programming.

Client-Side Technology - html,css,js,react,Angular.

Slide-side Technology - Node js , php , rubby,python,ruby,express.js

17 Find out the measures differences between HTML and XHTML?

https://www.scaler.com/topics/difference-between-html-and-xhtml/

19 Create a web page using links, list, div, images and videos.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Web Page Example</title>
</head>
<body>
 <header>
<h1>Web Page Example</h1>
</header>

<nav>
<a href="#section1">Section 1</a>
<a href="#section2">Section 2</a>
<a href="#section3">Section 3</a>
</nav>

<section id="section1">
<h2>Section 1</h2>
<div class="container">
<div class="box">
<h3>List Example</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div class="box">
<h3>Image Example</h3>
<img src="image.jpg" alt="Image">
</div>
<div class="box">
<h3>Link Example</h3>
<a href="https://www.example.com">Visit
Example</a>
</div>
</div>
</section>

<section id="section2">
<h2>Section 2</h2>
<div class="container">
<div class="box">
<h3>Div Example</h3>
<div>This is a div element.</div>
</div>
<div class="box">
<h3>Image Example</h3>
<img src="image2.jpg" alt="Image">
 </div>
<div class="box">
<h3>Video Example</h3>
<iframe
src="https://www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen>
</iframe>
</div>
</div>
</section>

<section id="section3">
<h2>Section 3</h2>
<div class="container">
<div class="box">
<h3>List Example</h3>
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</div>
<div class="box">
<h3>Image Example</h3>
<img src="image3.jpg" alt="Image">
</div>
<div class="box">
<h3>Link Example</h3>
<a href="https://www.example.com">Visit
Example</a>
</div>
</div>
</section>

</body>
</html>

20 write an XML file which will display the Book information which
includes the following: Title of the book, Author Name, ISBN
number, Publisher name, Edition and Price. Validate the above
document using DTD and XML Schema.
 <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE library SYSTEM "library.dtd">
<library>
<book>
<title>The Great Gatsby</title>
<author>F. Scott Fitzgerald</author>
<isbn>978-3-16-148410-0</isbn>
<publisher>Charles Scribner's Sons</publisher>
<edition>First</edition>
<price>10.99</price>
</book>
<book>
<title>To Kill a Mockingbird</title>
<author>Harper Lee</author>
<isbn>978-3-16-148410-1</isbn>
<publisher>J. B. Lippincott & Co.</publisher>
<edition>Reprint</edition>
<price>12.99</price>
</book>
</library>

21 Create two links using HTML in which first link will connect to
another page the second linl to heading in the same page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Links Example</title>
</head>
<body>

<h1>Welcome to My Website</h1>

<!-- Link to another page -->

<p><a href="another-page.html">Link to Another Page</a></p>

<!-- Link to a heading in the same page -->

<p><a href="#section2">Link to Section 2</a></p>
 <h2 id="section1">Section 1</h2>
<p>This is the content of section 1.</p>

<h2 id="section2">Section 2</h2>

<p>This is the content of section 2.</p>

</body>
</html>

22 Demonstrate the following using HTML codes. a. Unordered

List b. Ordered List c. Definition List d. Nested List

unordered list
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

ordered list
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

defination list
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

nested list
<ul>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
 <li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

23 Create a webpage using HTML to describe your department

using paragraph and use innerHTML,

document.getElementById("demo").innerHTML = "I have changed!";

iska use kr ke change kr denge

24 Explain the structure of XML. What is the use of DTD in XML?

`<?``xml` `version``=``"1.0"` `encoding``=``"UTF-8"``?>`

`<``website``>`

`<``company` `category``=``"geeksforgeeks"``>`

`<``title``>Machine learning</``title``>`

`<``author``>aarti majumdar</``author``>`

`<``year``>2022</``year``>`

`</``company``>`

`<``company` `category``=``"geeksforgeeks"``>`

`<``title``>Web Development</``title``>`

`<``author``>aarti majumdar</``author``>`

`<``year``>2022</``year``>`

`</``company``>`

`<``company` `category``=``"geeksforgeekse"``>`
 `<``title``>XML</``title``>`

`<``author``>aarti majumdar</``author``>`

`<``year``>2022</``year``>`

`</``company``>`

`</``website``>`

Structure -

1. xml prolog likhna jaruri hai

2. xml documnets must have a root elem
3. proper closing and opening tag
4. opening and closing tags are case sensitive
5. attribute must be in quotations

`<``website` `category``=``"open source"``>`

`<``company``>geeksforgeeks</``company``>`

`</``website``>`

6. white spaces are maintained

7. xml must be nested properly

25

27 Create a sample code to illustrate types of Style sheets for your

web page. Explain with an example.

kr chuke hai

30 Create a web page in which using div tag, CSS classes and
CSS box properties.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Div Tag Example</title>
<style>
/* CSS for styling */
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
background-color: #f0f0f0;
border: 2px solid #ccc;
border-radius: 10px;
}
.header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
.content {
margin-top: 20px;
padding: 10px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
}
.footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
margin-top: 20px;
}
</style>
</head>
<body>

<div class="container">
<div class="header">
 <h1>Welcome to My Website</h1>
</div>
<div class="content">
<p>This is the content of my web page. It is
contained within a div with the class "content".</p>
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nullam suscipit leo sit amet sapien facilisis,
vitae consequat ipsum placerat. Nam vel risus in metus tincidunt
rutrum. Suspendisse potenti. Nunc id velit in urna venenatis
consequat vel sed nisi. Nulla facilisi. Sed at dolor non orci
tristique dapibus.</p>
</div>
<div class="footer">
<p>&copy; 2024 My Website. All rights reserved.</p>
</div>
</div>

</body>
</html>

31 What are different popups in JavaScript? Explain the use of all

with the help of suitable example.

1. Alert box

alert("I am an alert box!");

2. Confirm box

confirm("Press")

3. Prompt

prompt("Please enter your name", "Harry Potter");

32 How can we print the content of web page visible on the

window screen?
window.print();

<script> function printPage() { window.print(); } < script>

34 Write a JavaScript code to validate an email id using

JavaScript. There should be one @ and a dot after the @ symbol.

function validateEmail(email) {
if(!document.getElementById(email-field).value.match(/^[A-
Za-z\.0-9]*[@][A-Za-z]*[\.][a-z]{2,4}$/))
return true;
}
return false;

35 user can not submit blank form

<script>
function validateForm() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var nameError =
document.getElementById("nameError");
var emailError =
document.getElementById("emailError");
var isValid = true;

// Validate name
if (name.trim() === "") {
nameError.textContent = "Name is required";
isValid = false;
} else {
nameError.textContent = "";
}

// Validate email
if (email.trim() === "") {
emailError.textContent = "Email is required";
isValid = false;
 } else {
emailError.textContent = "";
}

return isValid;
}
< script>

< body>
< html>

36 Multiple slects

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Dropdown List Example</title>
</head>
<body>

<h2>Select Your Favorite Fruit</h2>

<form>
<label for="fruits">Choose a fruit:</label>
<select id="fruits" name="fruits" multiple>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
<option value="strawberry">Strawberry</option>
<option value="grape">Grape</option>
</select>
</form>

</body>
</html>
37 Write a java script program which shows history and other
DOM objects.

` <``strong``>`

`Press the back button`

`</``strong``>`

`<``input` `type``=``"button"`

`value``=``"Back"`

`onclick``=``"previousPage()"``>`

`<``script``>`

`function previousPage() {`

`window.history.back();`

`}`

`</``script``>`

38 Make use of AJAX in web programming with a suitable

program.

function buttonClickHnadler(){

console.log("clicked");

const xhr = new XMLHttpRequest();

xhr.open('GET' , api.txt, true);

xhr.onload = function(){
 console.log("loded");

xhr.send();

40 Sum 2 numbers using prompt

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Addition Using Prompt Box< title>
< head>
<body>

<script>
// Prompt the user to enter the first number
var num1 = prompt("Enter the first number:");

// Convert the input to a number

num1 = parseFloat(num1);

// Prompt the user to enter the second number

var num2 = prompt("Enter the second number:");

// Convert the input to a number

num2 = parseFloat(num2);

// Calculate the sum

var sum = num1 + num2;

// Display the result

alert("The sum of " + num1 + " and " + num2 + " is: " +
sum);
< script>

< body>
 < html>

41 Why is JavaScript Object Notation (JSON) important in web

application? Explain with the help of a suitable program

The JSON format is syntactically similar to the code for creating JavaScript
objects. Because of this, a JavaScript program can easily convert JSON data
into JavaScript objects.

Since the format is text only, JSON data can easily be sent between
computers, and used by any programming language.

JavaScript has a built in function for converting JSON strings into JavaScript
objects:

JSON.parse()

JavaScript also has a built in function for converting an object into a JSON
string:

JSON.stringify()
'{"name":"John", "age":30, "car":null}'

42 jQuery

jQuery is a lightweight, "write less, do more", JavaScript library.

The purpose of jQuery is to make it much easier to use JavaScript on your

website.

jQuery takes a lot of common tasks that require many lines of JavaScript code
to accomplish, and wraps them into methods that you can call with a single
line of code.

console.log("using jQuery");

$('selector').action() //Syntax
 $('p').click(()=>{"clicked on p"})

$ is sign of jquery

47 Create a web page which divides the page in two equal frames
and place the audio and video clips in frame-1 and frame-2
respectively. Execution will be on the basis of user input: (Sad /
Happy).

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Audio and Video Player< title>
<style>
body, html {
height: 100%;
margin: 0;
overflow: hidden;
}
#container {
display: flex;
height: 100%;
}
#frame1, #frame2 {
flex: 1;
overflow: auto;
border: 1px solid #ccc;
}
#frame1 audio, #frame2 video {
width: 100%;
height: auto;
}
< style>
< head>
<body>

<div id="container">
<div id="frame1">
 <audio controls id="audioPlayer">
<source src="" type="audio/mpeg">
Your browser does not support the audio element.
< audio>
< div>
<div id="frame2">
<video controls id="videoPlayer">
<source src="" type="video/mp4">
Your browser does not support the video element.
< video>
< div>
< div>

<script>
function loadMedia(mood) {
var audioPlayer =
document.getElementById("audioPlayer");
var videoPlayer =
document.getElementById("videoPlayer");

if (mood === "Sad") {

audioPlayer.src = "sad_audio.mp3";
videoPlayer.src = "sad_video.mp4";
} else if (mood === "Happy") {
audioPlayer.src = "happy_audio.mp3";
videoPlayer.src = "happy_video.mp4";
}
}

// Example usage: loadMedia("Sad") or loadMedia("Happy")

// This can be triggered based on user input
< script>

< body>
< html>

48 Calcultaor

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Calculator< title>
<style>
.calculator {
width: 200px;
margin: 0 auto;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
}
input[type="text"] {
width: 100%;
margin-bottom: 5px;
padding: 5px;
font-size: 16px;
border-radius: 3px;
border: 1px solid #ccc;
}
input[type="button"] {
width: 48%;
padding: 10px;
font-size: 16px;
border-radius: 3px;
border: 1px solid #ccc;
cursor: pointer;
margin-bottom: 5px;
}
< style>
< head>
<body>

<div class="calculator">
<input type="text" id="result" disabled>
<input type="button" value="7"
onclick="appendToResult('7')">
<input type="button" value="8"
onclick="appendToResult('8')">
<input type="button" value="9"
onclick="appendToResult('9')">
<input type="button" value="+"
onclick="appendToResult('+')">
<input type="button" value="4"
onclick="appendToResult('4')">
<input type="button" value="5"
onclick="appendToResult('5')">
<input type="button" value="6"
onclick="appendToResult('6')">
<input type="button" value="-"
onclick="appendToResult('-')">
<input type="button" value="1"
onclick="appendToResult('1')">
<input type="button" value="2"
onclick="appendToResult('2')">
<input type="button" value="3"
onclick="appendToResult('3')">
<input type="button" value="*"
onclick="appendToResult('*')">
<input type="button" value="C" onclick="clearResult()">
<input type="button" value="0"
onclick="appendToResult('0')">
<input type="button" value="=" onclick="calculate()">
<input type="button" value="/"
onclick="appendToResult('/')">
< div>

<script>
function appendToResult(value) {
document.getElementById("result").value += value;
}

function clearResult() {
document.getElementById("result").value = "";
}

function calculate() {
var result =
eval(document.getElementById("result").value);
document.getElementById("result").value = result;
}
< script>

< body>
< html>
49 Write a JavaScript program to input name and address of a
visitor and display a greeting message.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Greeting Message< title>
< head>
<body>

<script>
// Prompt the user to input name and address
var name = prompt("Enter your name:");
var address = prompt("Enter your address:");

// Display the greeting message

var greeting = "Hello, " + name + "!";
greeting += "\nWelcome to our website. Your address is:
" + address;
alert(greeting);
< script>

< body>
< html>

57 Why do we use AJAX in web programming? Write a AJAX

program which print table of a given number

AJAX (Asynchronous JavaScript and XML) is used in web programming for

making asynchronous requests to the server from the client-side JavaScript
code. It allows web pages to update content dynamically without reloading the
entire page. AJAX is commonly used for fetching data from a server, sending
data to a server, and updating parts of a web page asynchronously.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>AJAX Example< title>
< head>
<body>

<h2>Print Table of a Number< h2>

<label for="number">Enter a number:< label>

<input type="number" id="number">
<button onclick="printTable()">Print Table< button>

<div id="table">< div>

<script>
function printTable() {
var number =
document.getElementById("number").value;
var table = document.getElementById("table");

// Create an AJAX request

var xhr = new XMLHttpRequest();

// Define the URL to fetch data from

var url = "table.php?number=" + number;

// Open the request

xhr.open("GET", url, true);

// Set up the onload function

xhr.onload = function() {
if (xhr.status == 200) {
// If request is successful, display the
table
table.innerHTML = xhr.responseText;
} else {
// If request failed, display an error
message
table.innerHTML = "Error fetching table.";
}
};

// Send the request

 xhr.send();
}
< script>

< body>
< html>

Client Server Architecture

66 Create an HTML page named as “String_Math.html” and within

the script tag define some String variables and use different String
functions to demonstrate the use of predefined function. Do the
same for the Math function.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>String and Math Functions< title>
< head>
<body>

<h2>String Functions< h2>

<script>
// Define some string variables
var str1 = "Hello";
var str2 = "World";
var sentence = "The quick brown fox jumps over the lazy
dog";
 // String length
console.log("String length of str1:", str1.length);

// Concatenation
var concatStr = str1.concat(" ", str2);
console.log("Concatenated string:", concatStr);

// Uppercase
console.log("Uppercase:", str1.toUpperCase());

// Lowercase
console.log("Lowercase:", str2.toLowerCase());

// Substring
console.log("Substring:", sentence.substring(10, 15));

// IndexOf
console.log("Index of 'quick':",
sentence.indexOf("quick"));

// Replace
console.log("Replace 'fox' with 'cat':",
sentence.replace("fox", "cat"));
< script>

<h2>Math Functions< h2>

<script>
// Math constants
console.log("Math.PI:", Math.PI);
console.log("Math.E:", Math.E);

// Math operations
var num1 = 10;
var num2 = 5;

console.log("Sum:", num1 + num2);

console.log("Difference:", num1 - num2);
console.log("Product:", num1 * num2);
console.log("Quotient:", num1 / num2);

// Math functions
console.log("Square root of 16:", Math.sqrt(16));
console.log("Absolute value of -5:", Math.abs(-5));
 console.log("Ceiling of 3.7:", Math.ceil(3.7));
console.log("Floor of 3.7:", Math.floor(3.7));
console.log("Random number between 0 and 1:",
Math.random());
< script>

< body>
< html>

70 What is the use of bootstrap in web programming? How can we

add bootstrap in our web page?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Bootstrap Example< title>
<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/boo
tstrap.min.css" rel="stylesheet">
< head>
<body>

<div class="container">
<h1>Hello, Bootstrap!< h1>
<button class="btn btn-primary">Click Me< button>
< div>

<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/boots
trap.min.js">< script>
< body>
< html>