Scribd
Upload
2 views

web and it technology

The document provides a comprehensive overview of web and internet technologies, including HTML forms, the HTML DOM, XML, XML Schema, JavaScript programming, and the differences between client-side and server-side JavaScript. It includes code examples for creating forms, XML files, and JavaScript functions for various tasks. Additionally, it discusses XML parsers, XMLHttpRequest methods, and differentiates between HTML and DHTML, as well as XML Schema Definition and Document Type Definition.

Uploaded by

parmanandpatelcse
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

web and it technology

The document provides a comprehensive overview of web and internet technologies, including HTML forms, the HTML DOM, XML, XML Schema, JavaScript programming, and the differences between client-side and server-side JavaScript. It includes code examples for creating forms, XML files, and JavaScript functions for various tasks. Additionally, it discusses XML parsers, XMLHttpRequest methods, and differentiates between HTML and DHTML, as well as XML Schema Definition and Document Type Definition.

Uploaded by

parmanandpatelcse
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

Web and Internet Technology

Assignment Questions

1) Describe the HTML code required for adding a form to a webpage.


Ans.To add a form to a webpage using HTML, you can use the <form> element. Below is
a simple example of an HTML form with different input types:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Form Example</title>
</head>
<body>
<h1>Contact Us</h1>

<!-- Start of the form -->


<form action="/submit-form" method="POST">
<!-- Name eld -->
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br><br>

<!-- Email eld -->


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

<!-- Gender selection (radio buttons) -->


<label>Gender:</label>
<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>
<br><br>

<!-- Dropdown (select element) -->


<label for="country">Country:</label>
<select id="country" name="country">
<option value="usa">United States</option>
<option value="canada">Canada</option>
<option value="uk">United Kingdom</option>
</select>
fi
fi
<br><br>

<!-- Message (textarea element) -->


<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50" required></textarea>
<br><br>

<!-- Submit and Reset buttons -->


<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
<!-- End of the form -->
</body>
</html>
Explanation:

• <form action="/submit-form" method="POST">: This de nes the form


and sets the action attribute to the URL where the form data will be sent. The method
attribute is POST, which is typically used when submitting form data to a server.
• <input type="text">: A text eld for entering the user's name.
• <input type="email">: A eld for entering an email address, which provides email
validation.
• <input type="radio">: Radio buttons for selecting the user's gender.
• <select>: A dropdown menu for selecting a country.
• <textarea>: A larger text area for entering a message.
• <input type="submit">: A button to submit the form.
• <input type="reset">: A button to reset all form elds to their default values.

2) Explain the html DOM. How it is used to design the web page.
Ans. The HTML DOM (Document Object Model) is a programming interface for
HTML documents that de nes the logical structure of the document and the way it
can be accessed and manipulated. The DOM represents the page as a tree structure
where each node is an object representing a part of the document (like an element,
attribute, or piece of text).
How the DOM Is Used to Design Web Pages:

1. Dynamic Content:
◦ You can modify the content of a page after it has loaded without refreshing the
page.
2. Styling:

• The DOM allows you to manipulate the CSS styles of elements. Using style properties in
JavaScript, you can change element sizes, colors, visibility, etc.
fi
fi
fi
fi
fi
3. Event Handling:

• The DOM is crucial for handling events like mouse clicks, form submissions, or keyboard
input.
4. Form Validation:

• The DOM can help in form validation. You can check if a form eld is lled correctly before
allowing the form to be submitted.
5. Creating Elements Dynamically:

• You can dynamically create new elements and add them to the document.

3)What is xml. Write xml le to store personal and educational information of


student.
Ans.XML (eXtensible Markup Language) is a markup language used to store and
transport data in a structured format. Unlike HTML, which is used for
displaying data, XML focuses on storing and organizing data in a way that is
both human-readable and machine-readable. XML is both exible and
platform-independent, making it a widely used format for data exchange
between systems.
Below is an example of an XML le storing personal and educational
information about a student.
<?xml version="1.0" encoding="UTF-8"?>
<StudentInformation>
<PersonalDetails>
<FirstName>John</FirstName>
<LastName>Doe</LastName>
<DateOfBirth>1998-03-25</DateOfBirth>
<Gender>Male</Gender>
<ContactDetails>
<Email>john.doe@example.com</Email>
<PhoneNumber>+1234567890</PhoneNumber>
<Address>
<Street>1234 Elm Street</Street>
<City>Spring eld</City>
<State>Illinois</State>
<ZipCode>62704</ZipCode>
</Address>
</ContactDetails>
</PersonalDetails>

<EducationalDetails>
<Institution>
fi
fi
fi
fi
fl
fi
<Name>Spring eld University</Name>
<Degree>Bachelor of Science in Computer Science</Degree>
<StartYear>2016</StartYear>
<EndYear>2020</EndYear>
<GPA>3.8</GPA>
</Institution>
<Institution>
<Name>Spring eld High School</Name>
<Degree>High School Diploma</Degree>
<StartYear>2012</StartYear>
<EndYear>2016</EndYear>
<GPA>3.9</GPA>
</Institution>
</EducationalDetails>
</StudentInformation>

4) What is XML Schema. Explain creating element declarations in XML schema.


Ans.An XML Schema de nes the structure, content, and data types of XML documents. It
is used to validate whether an XML document adheres to the speci ed rules and constraints.
The XML Schema itself is written in XML, making it a structured and machine-readable
language that can describe the legal building blocks of an XML document.

XML Schema is often referred to as XSD (XML Schema De nition).

Element Declaration in XML Schema

An element declaration de nes an XML element and speci es the data type and constraints
on its content. These declarations specify the properties of the elements, including:

• Name: The name of the element.


• Type: The data type (e.g., string, integer, boolean, etc.).
• Cardinality: The number of times an element can appear (using minOccurs and
maxOccurs attributes).
• Default and Fixed Values: Optionally speci es default or xed values for elements.

Example of an Element Declaration


XML Document:
<?xml version="1.0" encoding="UTF-8"?>

<StudentInformation>

<FirstName>John</FirstName>

<LastName>Doe</LastName>
fi
fi
fi
fi
fi
fi
fi
fi
fi
<Age>22</Age>

</StudentInformation>

Corresponding XML Schema (XSD):


<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<!-- Root element declaration -->
<xs:element name="StudentInformation">
<xs:complexType>
<xs:sequence>
<xs:element name="FirstName" type="xs:string" />
<xs:element name="LastName" type="xs:string" />
<xs:element name="Age" type="xs:integer" />
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>

5) Write a JavaScript program to:


(i) Print this pattern.
*
**
***
****
*****
(ii) To print all prime numbers from 1 to 100.
(iii) That accepts two integers and display the larger.
// Function to print the center-aligned triangle pattern
function printCenterAlignedTriangle(rows) {
for (let i = 1; i <= rows; i++) {
// Print leading spaces for center alignment
let spaces = ' '.repeat(rows - i);
// Print stars
let stars = '*'.repeat(2 * i - 1);
console.log(spaces + stars);
}
}

// Call the function to print the pattern with 5 rows


printCenterAlignedTriangle(5);

Ans.(ii)JavaScript Program to Print All Prime Numbers from 1 to 100


// Function to check if a number is prime
function isPrime(num) {
if (num <= 1) return false;
for (let i = 2; i <= Math.sqrt(num); i++) {
if (num % i === 0) return false;
}
return true;
}

// Function to print all prime numbers from 1 to 100


function printPrimes(limit) {
console.log("Prime numbers from 1 to " + limit + ":");
for (let i = 1; i <= limit; i++) {
if (isPrime(i)) {
console.log(i);
}
}
}

// Call the function to print prime numbers from 1 to 100


printPrimes(100);

Ans.(iii)JavaScript Program to Accept Two Integers and Display the Larger.


// Function to nd and display the larger of two integers
function displayLargerNumber(num1, num2) {
if (num1 > num2) {
console.log(num1 + " is larger than " + num2);
} else if (num2 > num1) {
console.log(num2 + " is larger than " + num1);
} else {
console.log("Both numbers are equal.");
}
}

// Example usage: Accepting two integers as input


let number1 = parseInt(prompt("Enter the rst number:"));
let number2 = parseInt(prompt("Enter the second number:"));

// Call the function with user inputs


displayLargerNumber(number1, number2);
fi
fi
6) Explain the difference between client side and server side JavaScript.
Ans.Comparison Table:
Aspect Client-side JavaScript Server-side JavaScript
Execution Environment Browser (client) Server
Purpose UI interactions, DOM manipulation Backend logic, data
processing
Security Less secure, code is visible More secure, code is hidden
Depends on client’s browser and Depends on server
Performance
device infrastructure
Examples Form validation, DOM Database access, API
manipulation responses
Popular Libraries/
jQuery, React, Vue.js, Angular Node.js, Express.js, NestJS
Frameworks
Receives requests, processes
Data Flow Sends requests to server, updates UI
data

7) Explain XML parser along with its types.


Ans.An XML parser is a software component that reads XML documents, checks
them for proper formatting (well-formedness), and optionally validates them against a
de ned structure (like an XML Schema or DTD). Once parsed, the XML content can
be processed, manipulated, or used by a program.

Types of XML Parsers

There are two main types of XML parsers:

1. DOM (Document Object Model) Parser


2. SAX (Simple API for XML) Parser

1. DOM (Document Object Model) Parser

The DOM parser reads the entire XML document and loads it into memory as a
hierarchical (tree-like) structure. It represents the XML document as a tree of nodes,
where each node corresponds to an element in the document. The program can then
traverse, manipulate, or query the tree structure.DOM parsers are great for small
documents where you need random access and manipulation.

2. SAX (Simple API for XML) Parser

The SAX parser reads the XML document sequentially, element by element. It
doesn't load the entire document into memory. Instead, it triggers events as it
encounters different parts of the XML (start of an element, end of an element, text
data, etc.).SAX parsers are ef cient for large documents but are more complex and
only suitable for reading.
fi
fi
8) Explain XMLHttpRequest Object methods and Properties.
Ans.The XMLHttpRequest object is a key component in JavaScript used for
making asynchronous HTTP requests to servers. It allows you to send and
receive data from a server without refreshing the entire web page, enabling
dynamic web applications. Below are the main methods and properties of the
XMLHttpRequest object.

Properties of XMLHttpRequest

1. readyState
◦ Represents the current state of the request.
◦ Possible values:
▪ 0: UNSENT - The request has been initialized but not yet sent.
▪ 1: OPENED - The request has been opened but not sent.
▪ 2: HEADERS_RECEIVED - The request has been sent, and the response
headers have been received.
▪ 3: LOADING - The response is being received (data is being downloaded).
▪ 4: DONE - The request is complete, and the response is fully received.
2. status
◦ Contains the HTTP status code returned by the server (e.g., 200 for OK, 404 for
Not Found).
◦ A status of 0 may indicate that the request was not completed or failed.
3. statusText

◦ Contains the status message corresponding to the status code (e.g., "OK" for status
200).
4. responseText

◦ Contains the response data as a string. This property is populated after the request
has completed (i.e., readyState is 4).
5. responseXML

◦ Contains the response data as an XML document, which is available when the
response content type is XML.
6. timeout

◦ Represents the timeout value (in milliseconds) for the request. If the request takes
longer than this time, it will be aborted.
7. withCredentials

◦ A boolean property that indicates whether the request should include credentials (like
cookies) in cross-origin requests.
Methods of XMLHttpRequest

open(method, url, async, user, password)

• Initializes a new request.


2.send(data)

• Sends the request to the server.

3. setRequestHeader(header, value)

• Sets the value of an HTTP request header.


• Must be called after open() and before send().
4. abort()

• Aborts the current request.


5. getAllResponseHeaders()

• Returns all the response headers as a single string, separated by newline


characters.
6. getResponseHeader(header)

• Returns the value of a speci c response header.

9) Differentiate between:
a) HTML and DHTML.
b) XML Schema De nition and Document Type De nition
Ans.
HTML DHTML

Hyper Text Markup Dynamic Hyper Text


Full-Form
Language Markup Language
A standard markup language It is a combination of technologies (HTML,
Definition used to create and design web CSS, and JavaScript) used to make
pages. webpages dynamic and interactive.

Consists solely of HTML tags Combines HTML for structure, CSS for
Components and elements. design and JavaScript for interactivity

Static, i.e., displays the same Dynamic, i.e., content can be changed in
Nature content every time the page is response to user action without reloading the
loaded. page.

Browser Supported by all the web


Generally, all the web browser supports
DHTML. But in case it is not supported, you
browsers.
Support need plug-ins.

Database No need for database


Database connectivity is not needed.
connectivity.
Connectivity
fi
fi
fi
Dependencie No dependencies on other
Depends on HTML, CSS, and JavaScript
programming languages.
s

Development Basic text editors like Notepad,


Specialized editors like VS
Visual Studio Code with appropriate plug-ins
that support HTML, CSS, and JavaScript.
Tools Code or sublime text.

Ideal for creating interactive web


Ideal for creating a basic
Usage webpage with static content.
applications, animation, and dynamic web
content.

Blogs, Articles, and company Online calculator, interactive forms and


Example information pages. games.

Difference Between DTD and XSD


DTD XSD

DTD are the declarations that


XSD describes the elements in
de ne a document type for
a XML document.
SGML.

It doesn’t support namespace. It supports namespace.

It is comparatively harder than It is relatively more simpler


XSD. than DTD.

It doesn’t support datatypes. It supports datatypes.

SGML syntax is used for DTD. XML is used for writing XSD.

It is not extensible in nature. It is extensible in nature.


fi
It doesn’t give us much control It gives us more control on
on structure of XML document. structure of XML document.

Any element which is made


It speci es only the root
global can be done as root as
element.
markup validation.

It doesn’t have any restrictions It speci es certain data


on data used. restrictions.

It is not much easy to learn . It is simple in learning.

File in XSD is saved as .xsd


File here is saved as .dtd
le.

It is not a strongly typed It is a strongly typed


mechanism. mechanism.

It uses #PCDATA which is a It uses fundamental and


string data type. primitive data types.

10) Write short notes on:


i) XLinks and Xpointer
ii) AJAX
iii) PHP
iv) ASP
Ans. i) XLinks and Xpointer

XLinks

• De nition: XLinks (XML Linking Language) is a speci cation that extends


XML to provide a richer model for creating links between resources.
fi
fi
fi
fi
fi
• Features: Unlike traditional hyperlinks in HTML, XLinks can de ne more
complex relationships, such as linking to multiple resources, creating
bidirectional links, and establishing links with additional metadata (like title,
type, and role).
• Use Cases: XLinks are useful for applications that require dynamic linking,
such as digital documents, web applications, and multimedia content.
XPointer

• De nition: XPointer is a language for addressing parts of XML documents,


enabling more precise linking than what is available with standard URLs.
• Features: XPointer allows users to specify not just the resource to link to but
also speci c parts of the resource, such as individual elements, attributes, or
text nodes within an XML document.
• Use Cases: It is commonly used in conjunction with XLinks to create dynamic
links that point to speci c locations within XML resources, enhancing
navigation and content retrieval.

ii) AJAX

AJAX (Asynchronous JavaScript and XML)

• De nition: AJAX is a technique used to create asynchronous web applications


that allow for data retrieval and updates without requiring a full page refresh.
• How It Works: It uses the XMLHttpRequest object to send requests to the
server and receive data (usually in XML, JSON, or plain text) in the
background. This enables parts of a web page to be updated dynamically.
• Bene ts: Improves user experience by making web applications more
responsive and interactive, allowing for seamless data updates (e.g., form
submissions, content loading) without interrupting the user interface.
• Common Use Cases: Loading new content, form validation, interactive maps,
and real-time noti cations in web applications.

iii) PHP

PHP (Hypertext Preprocessor)

• De nition: PHP is a server-side scripting language designed for web


development, but it can also be used as a general-purpose programming
language.
• Features:
◦ Easily integrates with HTML, allowing developers to embed PHP code
directly into web pages.
fi
fi
fi
fi
fi
fi
fi
fi
◦Supports various databases, making it suitable for building dynamic
websites and applications.
◦ Extensive support for various protocols (HTTP, FTP, etc.) and libraries
(e.g., image processing, XML parsing).
• Bene ts: PHP is open-source, widely used, and has a large community,
providing abundant resources and frameworks (like Laravel and Symfony) to
streamline web development.
• Common Use Cases: Content management systems (like WordPress), e-
commerce platforms, and web applications that require server-side processing.

iv) ASP

ASP (Active Server Pages)

• De nition: ASP is a server-side scripting environment developed by Microsoft


for building dynamic web pages and applications.
• Features:
◦ Allows embedding of server-side scripts (written in VBScript, JScript, or
other languages) within HTML to generate dynamic content.
◦ Supports components and libraries, enabling interaction with databases
and other server resources.
◦ Utilizes a request-response model, where the server processes the script
and sends the generated HTML back to the client.
• Bene ts: ASP simpli es web development by providing a framework for
managing sessions, state, and database connections.
• Common Use Cases: Web applications that require dynamic content
generation, such as user authentication systems, forums, and data-driven
websites.
fi
fi
fi
fi

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy