Amrutvahini College of Engieering, Sangamner

Department of Computer Engineering

Questions Bank (Sem 2, 2023-24)
Class: T.E. Computer Engineering Subject: Web Technology
Unit 1
1. Define the terms: - i) Website ii) Home Page iii) Webserver
Ans: 1. Website: - A website is a collection of related web pages that are typically identified by a common
domain name and are accessible over the internet. It can include various types of content such as text, images,
videos, and interactive elements. Websites serve as a platform for presenting information, providing services, or
facilitating online interactions.
2. Home Page: - The home page is the main or initial web page of a website. It is the first page that users see
when they visit a domain. The home page often provides navigation options, an overview of the website's
content, and may feature important announcements or highlights. It serves as the starting point for users to
explore and navigate through the rest of the website.
3. Web Server: - A web server is a software or hardware that stores, processes, and serves web pages to clients
over the internet. It handles incoming requests from web browsers, retrieves the requested resources (such as
HTML documents, images, or scripts), and sends them back to the client. Common web server software
includes Apache, Nginx, and Microsoft Internet Information Services (IIS). Web servers play a crucial role in
delivering content and enabling the functionality of websites.
2. List & discuss any three HTTP Commands.
Ans: 1. GET: - This command is used to retrieve a document based on the (given) URL. Use GetHeader to
retrieve header information and GetChunk to retrieve the body of the document. The GET method changes to a
“conditional GET” if the request message includes an If-Modified-Since header field.
A conditional GET method retrieves documents if it has been modified since the date given by the If-Modified-
Since header. The semantics of the GET method change to a “partial GET” if the request message includes a
Range header field.
A partial GET requests that only part of the entity be transferred. The partial GET method is intended to reduce
unnecessary network usage by allowing partially retrieved entities to be completed without transferring data
already held by the client.
2. HEAD: - This method is used for retrieving meta-information written in response headers, without
transferring entire content. This method is often used for testing hypertext links for validity, accessibility, and
recent modification. It can be used for checking the size of a document before downloading.
3. POST: - This command submits data to be processed to the Identified resource. The data is included in the
body of the request.
- This may result in the creation of a new resource or the updates of existing resources or both.
- This is most often used with HTML forms that need to transmit data to the server for processing. POST is
designed to allow a uniform method to cover the following functions:
• Annotation of existing resources.
o Posting a message to a bulletin board, newsgroup, mailing list or similar group of articles.
o Providing a block of data, such as the result of submitting a form, to a data-handling process.
• Extending a database through an append operation.
-The actual function performed by the POST method is determined by the server and is usually dependent on
the Request-URI.
-The posted entity is subordinate to that URI in the same way that a file is subordinate to a directory containing
it, a news article is subordinate to a newsgroup to which it is posted, or a record is subordinate to a database.
4. PUT: - The PUT method is used to add a new document or file to the web server or update an existing
document. The PUT method requests the server to store the enclosed data under the specified (request) URI.
- If the Request-URI refers to an already existing resource, the enclosed data should be considered as a
modified version of the one residing on the origin server.
5. DELETE: - The DELETE method requests to the server that deletes the resource identified by the request-
URI. This method MAY be overridden by human Intervention (or other means) on the origin server.
- The client cannot be guaranteed that the operation has been carried out, even If the status code returned from
the origin server indicates that the action has been completed successfully.
- However, the server SHOULD NOT indicate success unless, at the time the response is given, it intends to
delete the resource or move it to an inaccessible location.
6. TRACE: - In this method, final receiver echoes back the received request, so that a client can see what
intermediate servers are adding or changing in the request.
- The final recipient of the request should reflect the message received back to the client as the entity body of a
200 (OK) response.
- The final recipient is either the origin server or the first proxy or gateway i.e. TRACE allows the client to see
what is being received at the other end of the request chain and use that data for testing or diagnostic
information.
7. OPTIONS: - Returns the HTTP methods that the server supports for specified URLs. This can be used to
check the functionality of a web server by requesting '' instead of a specific resource.
- This method allows the client to determine the options and/or requirements associated with a resource, or the
capabilities of a server, without implying a resource action or initiating a resource retrieval.
3. Elaborate how you can set up your website. Which web technologies are required for the same?
Ans: - Step 1: Choose a Domain Name
A domain name is your website’s address on the internet (like a street address for a house).
Consider using your company name or your full name if it’s a personal website.
Aim for a .com extension if possible.
Step 2: Subscribe to a Web Hosting Account
Web hosting provides server space where your website files will reside.
Look for reliable hosting providers that offer good performance and customer support.
Step 3: Set Up Your Website (Using WordPress)
WordPress is a popular content management system (CMS) that simplifies website creation.
It allows you to manage content, design, and functionality easily.
Install WordPress on your hosting account.
Step 4: Design Your Website
Choose a theme or template for your site.
Customize the design to match your brand or personal style.
Use HTML, CSS, and JavaScript for front-end development.
Step 5: Add Pages and Further Customization
Create essential pages like Home, About, Contact, and Services.
Add plugins for additional features (e.g., SEO, security, forms).
Front-End Technologies:
HTML (HyperText Markup Language): Defines the structure and content of web pages.
CSS (Cascading Style Sheets): Styles the HTML elements, making your site visually appealing.
JavaScript: Adds interactivity, animations, and dynamic behavior to your website.
Back-End Technologies (Server-Side):
Server-Side Languages (e.g., PHP, Python, Ruby): Handle data processing, database interactions, and server
logic.
Database Management Systems (e.g., MySQL, PostgreSQL): Store and retrieve data.
Web Servers (e.g., Apache, Nginx): Serve web pages to users.

4. Describe the steps involved for web browser requests & responses of web pages from a web server.
Ans: The process of a web browser making a request to a web server and receiving a response to display a web
page involves several steps. Here's an overview:
1. URL Entry: The user enters a URL (Uniform Resource Locator) into the web browser's address bar. The
URL specifies the location of the desired web page on the internet.
2. DNS Lookup: The browser checks its cache to see if it already knows the IP address associated with the
domain name in the URL. If not, it sends a DNS (Domain Name System) request to a DNS server to resolve the
domain name into an IP address.
3. TCP Connection: Once the browser has the IP address of the web server, it initiates a TCP (Transmission
Control Protocol) connection to that server. This involves a three-way handshake to establish the connection.
4. HTTP Request: After the TCP connection is established, the browser sends an HTTP (Hypertext Transfer
Protocol) request to the web server. This request includes information such as the requested resource (specified
in the URL), any additional headers (such as cookies or user-agent information), and the HTTP method (usually
GET for requesting a web page).
5. Server Processing: The web server receives the HTTP request and processes it. This may involve accessing
databases, executing scripts, or retrieving files from storage to generate the content of the requested web page.
6. HTTP Response: Once the server has processed the request, it sends an HTTP response back to the browser.
This response includes a status code (indicating the success or failure of the request), response headers
(providing metadata about the response), and the actual content of the web page (typically HTML, along with
any associated CSS, JavaScript, images, etc.).
7. Data Transfer: The browser receives the HTTP response and begins downloading the content of the web
page. This may involve multiple TCP packets being sent from the server to the browser.
8. Rendering: As the browser receives the content, it begins to render the web page, parsing the HTML,
applying styles from CSS, executing JavaScript, and loading any additional resources (such as images or fonts)
referenced in the HTML.
9. Display: Finally, once the browser has finished rendering the web page, it displays the content to the user in
the browser window.
Throughout this process, there may be additional steps involved depending on factors such as caching, HTTPS
encryption, and content compression. However, these are the fundamental steps involved in a typical web
browser request and response cycle.
5.List various tags in HTML with simple example for a web page.
Ans: HTML (Hypertext Markup Language) uses tags to define the structure and content of a web page. Here
are some common HTML tags along with simple examples:
1. <!DOCTYPE>: Defines the document type and version of HTML being used.
Example:
```html
<!DOCTYPE html>```
2. <html>: Defines the root element of an HTML document.
Example:
```html
<html>
<!-- HTML content goes here -->
</html>```
3. <head>: Contains metadata about the document, such as title, links to stylesheets, and scripts.
Example:
```html
<head>
<title>My Web Page</title>
</head>```
4. <title>: Sets the title of the document (usually displayed in the browser's title bar).
Example:
```html
<title>My Web Page</title>```
5. <body>: Contains the main content of the HTML document.
Example:
```html
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a paragraph of text.</p>
</body>```
6. <h1>, <h2>, ..., <h6>: Defines headings of different levels.
Example:
```html
<h1>Main Heading</h1>
<h2>Subheading</h2>```
7. <p>: Defines a paragraph of text.
Example:
```html
<p>This is a paragraph of text.</p>```
8. <a>: Defines a hyperlink.
Example:
```html
 <a href="https://www.example.com">Visit Example</a>```
9. <img>: Insert an image into the document.
Example:
```html
<img src="image.jpg" alt="Description of the image">```
10. <ul>, <ol>: Defines an unordered or ordered list, respectively.
Example:
```html
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>```
11. <li>: Defines a list item within a <ul> or <ol> element.
Example:
```html
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>```
12. <div>: Defines a division or section of the document.
Example:
```html
<div>
<p>This is a paragraph inside a division.</p>
</div>```
13. <span>: Defines a span of text within a document.
Example:
```html
<p>This is <span>highlighted</span> text.</p>```
14. <form>: Defines an HTML form for user input.
Example:
```html
<form action="/submit" method="post">
<input type="text" name="username" placeholder="Enter your username">
<input type="submit" value="Submit">
</form>```
These are just a few examples of HTML tags. There are many more tags available for various purposes in
HTML documents.
6. How will you create a password field in HTML Form?
Ans: To create a password field in an HTML form, you can use the <input> tag with the type attribute set
to "password". This will create an input field where the characters are masked (usually displayed as asterisks or
dots) to hide the password from prying eyes. Here’s an example of how to create a password field in an HTML
form:
<form>
<label for="user-password">Password:</label>
<input type="password" id="user-password" name="user-password">
</form>
In the above code:

 The <label> element provides a clear label for the password input field.
 The <input> element with type="password" creates the password field.
7. What are the hyperlinks and Anchor in the HTML? Explain with a suitable example.
Ans:
 There is a common practice to specify the web link on the web page. The link acts as
a pointer to some web page or some resource.
 The use of hyperlinks in the web page allows that page to link logically with other pages.
 We can use hyperlinks by using a tag <a> and by specifying the URL for href.
 The value assigned to the href specifies the target of the link.
 The <a> means the beginning of the web link and </a> means the end of the web link.
 The most important attribute of the <a> element is the href attribute, which indicates
the link's destination.
 By default, links will appear as follows in all browsers:
1) An unvisited link is underlined and blue.
2) A visited link is underlined and purple.
3) An active link is underlined and red.
 Following are the steps to be followed to specify the web link on the web page.
Step 1: The beginning of the web link can be specified by the tag <a href = “ “.
Inside the double quotes mention the URL of the desired link.
Step 2: Write some text that should act as a hyperlink.
Step 3: End the web link </a>
Here is a sample program that implements the above-given idea –
HTML Document [HyperlnkDemo.html]
<!DOCTYPE html>
<html>
<head>
<title> Use of Hyperlink on the Web Page </title>
</head>
<body>
click here to get a
<a href="http://www.vtubooks.com">book</a> on engineering
</body>
</html>
8. Explain how frames are constructed in an HTML document. Explain with program.
Ans:  HTML frames allow us to present documents in multiple views.
 Using multiple views we can keep certain information visible and at the same time other views are scrolled
or replaced.
 For example, within the same window, one frame can display company information, a second frame can be a
navigation menu and a third frame may display a selected document that can be scrolled through or replaced by
navigating in the second frame.
 Various frames can be set in one browser window.
 To set the frames in the browser window we use frame set.
 For example -
<frameset cols="150,*">
will allow us to divide the window into two columns (i.e. in two vertical frames). One frame occupies the size
of 150 pixels and the other occupies the remaining portion of the window. Here * means any number of pixels.
 Similarly
<frameset rows="*,120">
will divide the window into two rows (i.e. in two horizontal frames). The second part of the horizontal frame
will be 120 pixels and the upper horizontal frame will occupy the remaining portion of the window.
 Similarly, we can also specify the frameset in percentage form. For example,
<frameset rows="30%,70%">
Using frameset we can divide the rows and columns in any number of frames. For
example
<frameset rows = “20%,30%,50%” cols = “30%,*”>
This will create frames in the browser’s window as follows –
9. Describe HTML form tags with simple examples.
Ans: Certainly! Let’s delve into the world of HTML form tags. These tags play a crucial role in creating
interactive web forms that allow users to input data and submit it to a server. Here are the key points about
HTML form tags:

1. <form> Tag:
o The <form> tag is the foundation for creating forms in HTML.
o It encompasses various form elements and defines how data should be sent to the server when
the user submits the form.
o Common attributes:
 action: Specifies the URL where the form data should be sent.
 method: Determines the HTTP method used for form submission (usually GET or
POST).
 name: Assign a name to the form.
 enctype: Specifies how form data should be encoded (e.g., application/x-www-form-
urlencoded or multipart/form-data).
 Example:
 <form action="/submit-form" method="post">
 <!-- Form elements go here -->
 </form>
2. Form Elements:
o Inside the <form> tag, you can include various form elements. Some common ones include:
 <input>: For text input, checkboxes, radio buttons, etc.
 <textarea>: For multiline text input.
 <button>: For buttons (e.g., submit or reset).
 <select>: Creates a dropdown menu.
 <option>: Represents an option within a <select> dropdown.
 <optgroup>: Groups related options within a <select>.
 <fieldset>: Groups related form elements together.
 <label>: Provides a label for form controls.
 <output>: Displays the result of a calculation or script.
o Example with input fields and a submit button:
o <form action="/action_page.php" method="get">
o <label for="fname">First name:</label>
o <input type="text" id="fname" name="fname"><br><br>
o <label for="lname">Last name:</label>
o <input type="text" id="lname" name="lname"><br><br>
o <input type="submit" value="Submit">
o </form>
3. Other Attributes:
o accept-charset: Specifies character encodings for form submission.
o autocomplete: Controls autocomplete behavior (e.g., on or off).
o novalidate: Prevents form validation on submission.
o target: Determines where the response will be displayed (e.g., _blank for a new tab).

Remember, HTML forms are essential for user interaction on the web. They allow users to input data, make
selections, and interact with websites effectively. Feel free to explore more examples and create your own
forms.
10. Differentiate HTML & HTML5.
Ans:

11. Explain i) Inline CSS ii) Internal CSS iii) External CSS with examples. Which one is suitable for a
Web application having more than one page?
Ans:
1. Inline CSS:
o Definition: Inline CSS involves defining styles directly within an HTML element using the style
attribute.
o Example:
<p style="color: blue; font-size: 16px;">This is some text with inline CSS.</p>
o Explanation: In the example above, the color and font size are applied directly to the <p>
element. Inline CSS is useful for quick styling changes to specific elements within a single page.
o Pros:
 Quick and easy to implement.
 Specific to individual elements.
o Cons:
 Not reusable across multiple pages.
2. Internal CSS (Embedded CSS):
o Definition: Internal CSS is placed within the <style> element in the <head> section of an
HTML document.
o Explanation: The CSS rules target specific elements (e.g., <h1> and <p>) within the same
HTML file. It’s effective for styling a single page.
o Pros:
 Applies to the entire HTML document.
 Better organization than inline CSS.
o Cons:
 Still not reusable across multiple pages.
o Example:

<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
 <style>
h1 {
color: blue;
font-size: 24px;
font-weight: bold;
}
p{
color: green;
font-size: 16px;
}
</style>
</head>
<body>
<h1>My Web Page</h1>
<p>Styling using internal CSS.</p>
</body>
</html>
3. External CSS:
o Definition: External CSS resides in a separate .css file linked to the HTML document using the
<link> tag.
o Syntax (in the <head> section):
o <link rel="stylesheet" type="text/css" href="styles.css">
o Explanation: The CSS rules are stored externally, making them reusable across multiple pages.
Ideal for web applications with more than one page.
o Pros:
 Separation of concerns (HTML and CSS).
 Reusable across multiple pages.
o Cons:
 Requires an additional file.
o Example:
 Create a styles.css file with the following content:
h1 {
color: blue;
font-size: 24px;
font-weight: bold;
}
p{
color: green;
font-size: 16px;
}
 Link it in your HTML:
<!DOCTYPE html>
<html>
<head>
<title>External CSS Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>My Web App</h1>
<p>Styling using external CSS</p>
</body>
</html>
In summary, external CSS is the most suitable choice for a web application with multiple pages, as it promotes
reusability and maintains a clear separation between content and styling.
12. Describe what is a style sheet. How to create a multi-color text on a web page using CSS. Explain with
an example.
Ans: Style Sheet:
 The CSS stands for Cascading Style Sheet.
 The Cascading Style Sheet is a markup language used in the web document for presentation purposes.
 The primary intention of CSS was to separate the web content from the web presentation.
 Various elements such as text, font and color are used in CSS for presentation purpose. Thus CSS
specification can be applied to bring the styles in the web document.
Now, let's create a multi-color text effect on a web page using CSS:
<!DOCTYPE html>
<html>
<head>
<style>
.multicolor {
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
-webkit-background-clip: text;
color: transparent;
font-size: 36px;
font-weight: bold;
text-align: center;
margin-top: 50px;
}
</style>
</head>
<body>
<h1 class="multicolor">Multi-color Text Example</h1>
</body>
</html>
In this example, we use the CSS “linear-gradient ()” function to create a gradient background for the text. The
“-WebKit-background-clip: text;” property allows the gradient to be clipped to the text, making it appear
multi-colored. The “color: transparent;” property ensures that the original text color is transparent, allowing
the gradient to show through. Finally, we adjust the font size, weight, and alignment to achieve the desired
effect.
13. Write a short note on Bootstrap.
Ans:
Bootstrap:
 Bootstrap is an open-source, front-end web framework. It is used for designing websites and web
applications.
 Bootstrap helps the developer to create responsive designs. Responsive web design means creating a
website that automatically adjusts itself to look good on all devices. These devices range from small
phones to large desktop screens.
 Bootstrap includes HTML, CSS, and JavaScript-based design templates which include forms,
buttons, tables, navigation, modals, and so on.

There are two ways to use Bootstrap in a webpage.

1) The first way is to use a CDN or Content Delivery Network. Using Bootstrap CDN means that we will not
download and store the bootstrap files on our server or local machine. We will just include the bootstrap CSS
and JavaScript links on our page.
2) The second way is downloading and storing a copy of Bootstrap files in our web server or local machine. We
can download the Bootstrap from https://getbootstrap.com/
I have created a folder named bootstrap-3.3.7 and downloaded my Bootstrap in this folder. After getting
downloaded I can see three folders in it namely CSS, fonts, and js
 If we want to use the CDN then we will include Bootstrap CSS as follows –
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 If we want to use our own downloaded copy then we will use
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
  Similarly the jquery can be used as
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
Or
<script src="jquery-3.0.0.min.js"></script>
15. Write a program to demonstrate button styles (warning, danger, default, primary, link, success).
Ans: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>Button Styles Example</title>
</head>
<body>
<div class="container mt-5">
<h1>Button Styles</h1>
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
</div>
</body>
</html>

Unit 2
1. What is JavaScript? Explain the characteristics of JavaScript.
Ans: JavaScript:
JavaScript was developed by Netscape in 1995. At that time its name was LiveScript. Later on, Sun
Microsystems joined Netscape and then they developed LiveScript. And later on, its name is changed to
JavaScript.
Characteristics of JavaScript:
1. Browser Support: For running the JavaScript in the browser there is no need to use some plug-in. Almost
all the popular browsers support JavaScripting.
2. Structure Programming Syntax: JavaScript supports much more commonly the structured language type
syntax. Similar to C-style the programming blocks can be written.
3. It automatically inserts the semicolon at the end of the statement, hence there is no need to write a semicolon
at the end of the statement in JavaScript.
4. Dynamic Typing: It supports dynamic typing, which means the data type is bound to the value and not to the
variable. For example one can assign an integer value to a variable say ‘a’ and later on can assign some strg the
ing value to the same variable in JavaScript.
5. Run Time Evaluation: Using the eval function the expression can be evaluated at run time.
6. Support for Object: JavaScript is object oriented scripting language. However, the handling of objects in
JavaScript is somewhat different from the conventional object-oriented programming languages. JavaScript has
a small number of inbuilt objects.
7. Regular Expression: JavaScript supports the use of regular expressions using which text-pattern matching
can be done. This feature can be used to validate the data on the web page before submitting it to the server.
8. Function Programming: In JavaScript, functions are used. One function can accept another function as a
parameter. Even, one function can be assigned to a variable just like some data type. The function can be run
without giving the name.
2. Write a difference between JavaScript and JQuery.
Ans:

3. How to create an array in JavaScript. Explain in the brief reading of array elements in JavaScript
with examples.
Ans: Arrays: May-18,19, Marks 5
 Definition of Arrays: Arrays are a collection of similar types of elements that can be referred to by a
common name.
 Any element in an array is referred to by an array name followed by “[“followed by the position of the
element followed by].
 The particular position of an element in an array is called an array index or subscript.
Declaring an Array
 In JavaScript, the array can be created using an Array object.
 Suppose, we want to create an array of 10 elements then we can write,
var ar = new Array(10);
 Using a new operator we can allocate the memory dynamically for the arrays.
 In the brackets, the size of an array is mentioned and the var ar denotes the name of the array. Thus by the
above sentence, an array ar will be created in which we can store 10 elements at the most. Sometimes the above
statement can be written like this
var ar;
ar=new Array(10);
Initializing an Array
 Initialization is the process of assigning a value when either a variable or array is declared. For example
int count=10//variable initialization
 While initializing an array -
1) Declare the name of the array
 2) Make use of the keyword new
3) Each value within an array as an ‘array element’ must be separated by a comma.
 For example –

Defining an Array Elements

 The elements in the array are stored from index 0.
 For example - elements in arrays 10, 20, 30, 40, and 50 are stored as follows –

 Following is a simple JavaScript that illustrates the initialization of the array by defining the array elements.
Accessing Array Elements:
 To access an element in an array, use the array name followed by square brackets containing the index
number.
 Array indices start at 0 for the first element, 1 for the second element, and so on
let myArray = [29, "Nathan", true];
console.log(myArray[0]); // Output: 29
console.log(myArray[1]); // Output: Nathan
4. Explain how to call the javascript function from the HTML page.
Ans: Calling a Function from with Argument
In JavaScript, we can pass an argument to the function. The following JavaScript shows how to pass an
argument to the function. In the following program, I have written a simple function for the addition of two
numbers. The values of the two numbers are 10 and 20 respectively. Inside this function, the addition of these
two arguments is carried out and the result is displayed on the Browser page.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function add(a,b)//function to which arguments a and b are passed
{
c=a+b
document.write("Addition = "+c)
}
</script>
</head>
<body>
<h4> Passing Arguments to the function </h4>
<script type="text/javascript">
var x=10;
var y=20
add(x,y)
</script>
</body>
</html>
Calling a Function without an Argument
A function can also be called without passing any argument. In this case, all the required variables are declared
and used within that function. The following program shows how to call a function without passing an
argument.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
 function add()
{
var a=10
var b=20
c=a+b
document.write("Addition = "+c)
}
</script>
</head>
<body>
<h4> Function without passing argument</h4>
<script type="text/javascript">
add()
</script>
</body>
</html>
5. What is the purpose of the DOM node tree? Draw a node tree for a simple HTML Page.
Ans: Purpose of the DOM node tree:
Structured Representation: It organizes the document's elements, attributes, and text content in a tree-like
structure, where each node represents an element, attribute, or piece of text.
Programmatic Access: It provides a standardized interface (API) for programs (such as JavaScript) to access
and manipulate elements and their attributes within the document. This allows dynamic modification of the
document's content and structure.
Event Handling: It facilitates event handling by allowing scripts to register event listeners on specific DOM
nodes. This enables interactivity such as responding to user actions like clicks, keyboard input, etc.
Dynamic Content Modification: This enables the dynamic modification of a web page's content and structure
in response to user interactions, AJAX requests, or other events without needing to reload the entire page.
Rendering and Styling: It serves as a foundation for rendering and applying styles to elements on the web
page, enabling dynamic changes to the visual presentation through CSS manipulation.
 For example: Consider following XHTML document.
<html>
<head>
<title>This is My Web Page </title>
</head>
<body>
<h1>Hello Friends </h1>
<h2>How are you?</h2>
</h3>See you</h3>
</body>
</html>
 The DOM tree will be

6. What are the different Data types available in JavaScript? Explain with correct syntax of declaration
of it.
Ans: JavaScript supports several data types, which can be broadly categorized into two groups: primitive data
types and non-primitive data types (also known as reference types).
1. Primitive Data Types:
  Number: A number is a numeric value that can be an integer or float. It can be used
in calculation.
```javascript
let num = 10; // Integer
let floatNum = 3.14; // Floating-point number```
 String: String is a collection of characters. It is enclosed within a single quote or double quote. A string
may contain numbers but these numbers can not be used for calculations.
```javascript
let str = 'Hello, world!'; // Single quotes
let anotherStr = "JavaScript"; // Double quotes```
 Boolean: The Boolean values are true and false. These values can be compared with the variables or
can be used in assignment statements.
```javascript
let isTrue = true;
let isFalse = false;```
 Null: The null value can be assigned by using the reserved word null. The null means no value. If we
try to access the null value then a runtime error will occur.
```javascript
let nullValue = null;```
 Undefined: Represents a variable that has been declared but has not been assigned a value.
```javascript
let undefinedValue;```
 Symbol: Represents a unique and immutable value that may be used as an identifier for object
properties.
```javascript
const sym = Symbol('description');```
2. Non-primitive Data Types (Reference Types):
 Object: An object is for an entity that represents some value. For example - a window object is a value
using which the window is created. A form is an object upon which some components such as buttons,
checkboxes, and radio buttons can be placed and used.
```javascript
let person = {
name: 'John',
age: 30,
isStudent: false
};```
 Array: Represents an ordered collection of elements, which can be of any data type.
```javascript
let numbers = [1, 2, 3, 4, 5];
let fruits = ['apple', 'banana', 'orange'];```
 Function: Represents a reusable block of code that can be invoked with specified parameters.
```javascript
function greet(name) {
console.log('Hello, ' + name + '!');
}```
 Date: Represents a date and time value.
```javascript
let currentDate = new Date();```
 RegExp: Represents a regular expression object, which can be used for pattern matching within strings.
```javascript
let regex = /hello/;```
These are the basic data types available in JavaScript, each serving different purposes and used for various
programming tasks.
8. List and brief any five functions in JavaScript.
Ans:
1. console.log():
 - This function is fundamental for debugging JavaScript code. It allows developers to log messages,
variables, objects, or any kind of data to the browser's console.
- It takes one or more parameters, which can be strings, variables, or objects, and outputs them to the
console.
Example:
```javascript
console.log('Hello, world!');
```
2. alert():
- The `alert()` function displays a modal dialog box with a specified message and an OK button. It's often
used for displaying alerts, notifications, or prompting users for simple interactions.
- It takes a single parameter, which is the message to be displayed in the alert dialog.
Example:
```javascript
alert('This is an alert message!');
```
3. setTimeout():
- This function is used to execute a specified function or a block of code after a specified delay (in
milliseconds). It's commonly used for scheduling tasks to be performed after a certain period.
- It takes two parameters: a function or code block to execute and the delay time in milliseconds.
Example:
```javascript
setTimeout(function() {
console.log('Delayed message after 2 seconds.');
}, 2000);
```
4. setInterval():
- Similar to `setTimeout()`, `setInterval()` is used to execute a specified function or a block of code
repeatedly at a specified interval (in milliseconds). It's often used for creating animations, periodic
updates, or timed events.
- It takes two parameters: a function or code block to execute and the interval time in milliseconds.
Example:
```javascript
let intervalId = setInterval(function() {
console.log('Repeated message every 3 seconds.');
}, 3000);
```
5. parseInt():
- The `parseInt()` function parses a string argument and returns an integer of the specified radix (the base
in mathematical numeral systems). It's commonly used for converting strings to integers.
- It takes two parameters: the string to be parsed and an optional radix (base) for numerical conversion.
Example:
```javascript

let num = parseInt('10'); // Returns 10

```
9. Write a JQuery code to Creating elements, Appending elements?
Ans:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Example: Creating and Appending Elements</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
 $(document).ready(function()
{
// Create a new <div> element
var newDiv = $('<div></div>');
// Set some attributes and content to the new <div>
newDiv.attr('id', 'newDivId');
newDiv.text('This is a new div created with jQuery.');
// Append the new <div> to an existing element with id "container"
$('#container').append(newDiv);
});
</script>
</head>
<body>
<div id="container">
<p>Hello World.</p>
</div>
</body>
</html>
10. Write a short note on JQuery. Explain when to use JQuery over JavaScript.
Ans: jQuery
 JQuery is a fast and concise library created by John Rosig in 2006. The motto of this web document is
Write less do more. This scripting is very easy to learn. The JQuery is actually a Javascript library.
 JQuery runs almost all the browsers.
 It adds up many advanced, cross-browser functions to standard
When to Use jQuery over JavaScript:
Rapid Prototyping: jQuery is well-suited for rapid prototyping and development due to its concise syntax and
extensive library of methods. It allows developers to achieve complex tasks with fewer lines of code compared
to raw JavaScript.
Simplified DOM Manipulation: When dealing with complex DOM manipulation tasks, jQuery simplifies the
process by providing shorthand methods and selectors, making code more readable and maintainable.
Cross-browser Compatibility: jQuery abstracts away browser inconsistencies, making it an ideal choice when
developing applications that need to support multiple browsers without writing extensive browser-specific
code.
AJAX Operations: For applications that heavily rely on AJAX interactions, jQuery's AJAX methods provide a
more streamlined and consistent way to make asynchronous requests and handle responses, compared to using
native XMLHttpRequest in JavaScript.
Animation and Effects: When creating animations or applying visual effects to web elements, jQuery's
animation methods offer a straightforward way to achieve desired effects with minimal effort, making it
preferable for UI enhancements and user interactions.
11. What is MVC? Draw and explain MVC architecture for developing web applications.
Ans: Concept of MVC
MVC stands for Model View Controller, it is a software design pattern for designing and developing a web
application. Angular JS MVC divides an application into three parts Model Part, View Part, and Controller Part.
Let's see for what purpose each component of MVC serves:
1. Model Part: This part of the architecture is responsible for managing the application data. This module
responds to the request made from view. The model gives instructions to the controller to update when the
response is made.
2. View Part: This part takes care of the presentation of data. The data is presented in the desired format with
the help of view. This is a script based system using JSP, ASP, PHP and so on.
3. Controller Part: The controller receives input, validates it, and then performs business operations that
modify the state of the data model. The controller basically responds to user request and performs interaction
with model.
Fig. MVC architecture
MVC in Angular JS
 Modules in AngularJS serve as containers to help you organize your application into logical units.
 Modules tell AngularJS how an application is configured.
 In angular JS the Module is represented using the directive <ng-app> and module name.
 The scope object binds the view with the controller.
 In AngularJS it is possible to have multiple views for a single page application.
 The ng-view and ng-template and ng-route directives support the concept of views.
 The use of controller in AngularJS is to control the flow of data. The ng-controller directive is used for
this purpose.

Fig. MVC with angular JS

12. Design a Registration form to validate Name, Age, Address, EmailID, hobby (checkbox), Gender
(radio box), Country ( Drop down menu).
Ans:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
<style>
.error { color: red; }
</style>
</head>
<body>
<h2>Registration Form</h2>
<form id="registrationForm" onsubmit="return validateForm()">
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<span id="nameError" class="error"></span>
</div>
<div>
<label for="age">Age:</label>
<input type="number" id="age" name="age">
 <span id="ageError" class="error"></span>
</div>
<div>
<label for="address">Address:</label>
<input type="text" id="address" name="address">
<span id="addressError" class="error"></span>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<span id="emailError" class="error"></span>
</div>
<div>
<label>Hobby:</label><br>
<input type="checkbox" id="hobby1" name="hobby" value="Reading">
<label for="hobby1">Reading</label>
<input type="checkbox" id="hobby2" name="hobby" value="Sports">
<label for="hobby2">Sports</label>
</div>
<div>
<label>Gender:</label><br>
<input type="radio" id="male" name="gender" value="Male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="Female">
<label for="female">Female</label>
</div>
<div>
<label for="country">Country:</label>
<select id="country" name="country">
<option value="">Select Country</option>
<option value="USA">USA</option>
<option value="UK">UK</option>
<option value="Canada">Canada</option>
</select>
<span id="countryError" class="error"></span>
</div>
<button type="submit">Submit</button>
</form>
<script>
function validateForm()
{
// Reset errors
document.querySelectorAll('.error').forEach(error => error.textContent = '');

let valid = true;

// Name validation
const name = document.getElementById('name').value.trim();
if (name === '')
{
document.getElementById('nameError').textContent = 'Name is required';
valid = false;
}

// Age validation
const age = document.getElementById('age').value.trim();
 if (age === '')
{
document.getElementById('ageError').textContent = 'Age is required';
valid = false;
} else if (isNaN(age) || age < 1)
{
document.getElementById('ageError').textContent = 'Invalid age';
valid = false;
}

// Address validation
const address = document.getElementById('address').value.trim();
if (address === '')
{
document.getElementById('addressError').textContent = 'Address is required';
valid = false;
}

// Email validation
const email = document.getElementById('email').value.trim();
if (email === '')
{
document.getElementById('emailError').textContent = 'Email is required';
valid = false;
} else if (!/^\S+@\S+\.\S+$/.test(email))
{
document.getElementById('emailError').textContent = 'Invalid email';
valid = false;
}

// Country validation
const country = document.getElementById('country').value.trim();
if (country === '')
{
document.getElementById('countryError').textContent = 'Country is required';
valid = false;
}

return valid;
}
</script>
</body>
</html>
13. Explain how the object is created and modified in JavaScript.
Ans:
 The web designer can create an object and can set its properties as per his
requirements.
 The object can be created using new expression.
 Initially the object with no properties can be set using the following statements.
Myobj=new Object();
 Then using the dot operator we can set the properties for that object.
 The object can then be modified by assigning the values to this object.
<!DOCTYPE html>
<html>
<head>
<title>Object Creation Demo</title>
 </head>
<body>
<strong>
<script type="text/javascript">
var Myobj;
var n,i;
//creating an object
Myobj=new Object();
//setting the propertis for newly created object
Myobj.id=10;
Myobj.name="Anuradha";
document.write("The ID is "+Myobj.id+"<br/>");
document.write("The Name is "+Myobj.name);
</script>
</strong>
</body>
</html>
14. Write a program of your choice that demonstrate use of properties of DOM.
Ans:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM Properties Example</title>
</head>
<body>
<h1 id="myHeading">Hello, DOM!</h1>
<p>This is a simple example to demonstrate DOM properties.</p>

<script>
// Accessing the DOM element with ID "myHeading"
const heading = document.getElementById("myHeading");

// Changing the text content of the heading

heading.textContent = "Welcome to the DOM!";

// Modifying the style of the heading

heading.style.color = "blue";
heading.style.fontSize = "24px";

// Checking if the heading has a class

const hasClass = heading.classList.contains("highlight");
console.log("Does the heading have the 'highlight' class?", hasClass);

// Adding a new class to the heading

heading.classList.add("highlight");

// Removing the class after a delay

setTimeout(() => {
heading.classList.remove("highlight");
}, 2000);
</script>
</body>
</html>
15. List and Explain various directives in AngularJS. Or Explain How angular JS integrates with
HTML.
Ans:AngularJS directives are a powerful feature that extends HTML with new attributes and elements,
allowing developers to create reusable components and enhance the behavior of DOM elements. Let’s explore
some essential directives:
1. ng-app: This directive initializes an AngularJS application. It defines the root element of your app.
When a web page loads, AngularJS automatically bootstraps the application based on this directive.
Example:
<div ng-app="">
<!-- Your application content here -->
</div>
2. ng-init: Although not commonly used, ng-init initializes application data. It sets initial values for
variables within the AngularJS context. However, it’s better to use controllers or modules for data
initialization.
Example:
<div ng-app="" ng-init="firstName='John'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
3. ng-model: The ng-model directive binds the value of HTML controls (such as input fields, select boxes,
and textareas) to application data. It establishes a two-way data binding between the UI and the model.
Example:
<div ng-app="" ng-init="quantity=1; price=5">
Quantity: <input type="number" ng-model="quantity">
Costs: <input type="number" ng-model="price">
Total in dollars: {{ quantity * price }}
</div>
4. ng-repeat: This directive repeats an HTML element (like a list item) for each item in a collection. It’s
useful for displaying dynamic content, such as iterating over an array of objects.
Example (repeating an array of names):
<div ng-app="" ng-init="names=['Jani', 'Hege', 'Kai']">
<ul>
<li ng-repeat="x in names">{{ x }}</li>
</ul>
</div>
Example (repeating an array of objects):
<div ng-app="" ng-init="names=[{name:'Jani', country:'Norway'}, {name:'Hege', country:'Sweden'},
{name:'Kai', country:'Denmark'}]">
<ul>
<li ng-repeat="x in names">{{ x.name + ', ' + x.country }}</li>
</ul>
</div>
Remember, directives are a fundamental building block in AngularJS applications. They allow you to create
dynamic, interactive, and modular UI components.
How angular JS integrates with HTML:
AngularJS, a powerful JavaScript framework, seamlessly integrates with HTML to create dynamic and
interactive web applications. Let’s delve into how this integration works:
1. Adding AngularJS to an HTML Page:
o You can include AngularJS in your HTML page by adding a <script> tag that references the
AngularJS library. For example:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
o This script tag loads the AngularJS framework, making it available for use within your HTML.
2. AngularJS Directives:
o AngularJS extends HTML by introducing directives. These directives are special attributes that
enhance the behavior of HTML elements.
o Key directives include:
  ng-app: Defines an AngularJS application. It tells AngularJS which part of the HTML is
the owner of the application.
 ng-model: Binds the value of HTML controls (such as input fields) to application data.
For instance, you can link an input field to a variable in your AngularJS application.
 ng-bind: Binds application data to the HTML view. It dynamically updates the content
of an HTML element with the value of an AngularJS expression.
o Example:
<div ng-app="">
<p> Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
 In this example, the ng-app directive defines the AngularJS application, the ng-model
directive binds the input field to the name variable, and the ng-bind directive displays the
value of name.
3. AngularJS Expressions:
o AngularJS expressions are written inside double curly braces ({{ expression }}).
o These expressions evaluate and display data dynamically. They can be used wherever you want
to output data in your HTML.
o Example:
<div ng-app="">
<p> My first expression: {{ 5 + 5 }}</p>
</div>
 The expression {{ 5 + 5 }} evaluates to 10 and displays it in the paragraph.
4. AngularJS Modules and Controllers:
o AngularJS applications are organized into modules. A module defines an application.
o Controllers control the application behavior. They handle data and logic.
o The ng-controller directive associates a controller with a specific part of the HTML.
o Example:
<div ng-app="myApp" ng-controller="myCtrl">
<p> Welcome, {{ firstName }}</p>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
});
</script>
 In this example, the myCtrl controller sets the value of firstName, which is then
displayed in the paragraph.
Remember that AngularJS enhances HTML by providing powerful features for building dynamic web
applications. It’s a versatile framework that simplifies data binding, DOM manipulation, and application
structure.
16. Create simple AngularJS application to display “Hello, Input name” using proper directives.
Ans: Sure, here's a simple AngularJS application that displays "Hello, [input name]" using directives:
```html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="HelloController">
<label for="nameInput">Enter your name:</label>
 <input type="text" id="nameInput" ng-model="name">
<p>Hello, <span ng-bind="name"></span></p>
</div>
<script>
// Define the AngularJS module
var app = angular.module('myApp', []);
// Define the controller
app.controller('HelloController', function($scope)
{
$scope.name = ''; // Initialize name variable
});
</script>
</body>
</html>```
Explanation:
 `ng-app="myApp"`: Defines the AngularJS application module named "myApp".
 `ng-controller="HelloController"`: Associates the controller function "HelloController" with the
HTML element where this directive is used.
 `ng-model="name"`: Binds the value of the input field to the "name" variable in the AngularJS scope.
 `ng-bind="name"`: Binds the value of the "name" variable to the content of the `<span>` element.
In this example, when the user enters their name into the input field, AngularJS automatically updates the value
of the "name" variable in the scope. The bound `<span>` element then displays "Hello, [input name]" using the
value of the "name" variable.