Scribd
Upload
8 views

Dhiraj Lab

The document contains a series of HTML and XML labs, each demonstrating different web development concepts such as form validation, DOM manipulation, and XML structure. Each lab includes code snippets with various functionalities, including event handling, form submission, and data fetching. Additionally, there are examples of XML documents and DTD definitions to illustrate XML structure and validation.

Uploaded by

Shreyash
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views

Dhiraj Lab

The document contains a series of HTML and XML labs, each demonstrating different web development concepts such as form validation, DOM manipulation, and XML structure. Each lab includes code snippets with various functionalities, including event handling, form submission, and data fetching. Additionally, there are examples of XML documents and DTD definitions to illustrate XML structure and validation.

Uploaded by

Shreyash
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 17

Lab 1

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8”>

<meta name=”viewport” content=”width=device-width, initial-


scale=1.0”>

<title>LAB 1</title>

</head>

<body>

<h1 style=”color: red;”>Hello World</h1>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia esse
earum quae tempore temporibus odit vel cum dignissimos cumque et illo
placeat blanditiis commodi reprehenderit unde veritatis iure nobis molestiae
rerum veniam, beatae saepe? Lorem ipsum dolor sit amet consectetur
adipisicing elit. Impedit accusantium magnam, odit laborum doloremque
excepturi reprehenderit aliquid id perspiciatis eaque architecto eveniet saepe
placeat harum officiis sit, molestias voluptatem obcaecati nemo temporibus
quam in similique? Autem mollitia sunt eos. Fugiat delectus excepturi labore
ea quidem similique laudantium libero aspernatur ipsam.</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam


beatae saepe tenetur. Mollitia assumenda et, inventore expedita obcaecati
quibusdam provident aperiam? Quis exercitationem voluptatem asperiores,
corporis explicabo maxime nesciunt cupiditate. Lorem ipsum dolor sit amet
consectetur adipisicing elit. Nulla sequi earum quam culpa unde. Atque
quaerat nobis quibusdam labore quis, cumque quas explicabo a nulla. Ut
veritatis ullam accusantium impedit?</p>

<img src=”vk.webp” alt=”” height=”250px” width=”350px”><br>


<img src=”vk.webpa” alt=”no pic” height=”250px”l width=”350px”>
<br>

<audio controls>

<source src=”song.mp3”>

</audio>

<button onclick=”window.print()”>Print</button>

</body>

</html>

Lab 2

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8”>

<meta name=”viewport” content=”width=device-width, initial-


scale=1.0”>

<title>Form Validation</title>

<style>

.error { color: red; }

</style>

</head>

<h2>Form Validation</h2>

<form id=”registrationForm”>

<label for=”name”>Name:</label>

<input type=”text” id=”name” name=”name” required><br><br>


<label for=”age”>Age:</label>

<input type=”number” id=”age” name=”age” required><br><br>

<label for=”phone”>Phone Number:</label>

<input type=”text” id=”phone” name=”phone” required><br><br>

<button type=”submit”>Submit</button>

<p id=”errorMsg” class=”error”></p>

</form>

<script>

Document.getElementById(‘registrationForm’).addEventListener(‘submit’,
function(event) {

Event.preventDefault();

// Get form values

Const name = document.getElementById(‘name’).value.trim();

Const age = document.getElementById(‘age’).value;

Const phone = document.getElementById(‘phone’).value.trim();

Const errorMsg = document.getElementById(‘errorMsg’);

// Clear previous error messages


errorMsg.textContent = ‘’;

// Validate the form fields

If (name === ‘’) {

errorMsg.textContent = ‘Name is required.’;

return;

If (age === ‘’ || age < 18) {

errorMsg.textContent = ‘Age is required and must be 18 or above.’;

return;

If (phone === ‘’ || isNaN(phone) || phone.length !== 10) {

errorMsg.textContent = ‘Phone number is required, must be a number,


and must be exactly 10 digits.’;

return;

// Submit the form if all validations pass

Alert(‘Form submitted successfully!’);

// Optionally: document.getElementById(‘registrationForm’).submit(); // If
you want to actually submit the form

});

</script>

</body>
</html>

Lab 3

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8”>

<meta name=”viewport” content=”width=device-width, initial-


scale=1.0”>

<title>LAB 3</title>

</head>

<body>

<p id=”abc”> </p>

<p id=”ab”> </p>

<p id=”a”></p>

<h1 id=”zx”>Tanmai</h1>

<button onclick=”change_colour()”>CHANGE COLOUR</button>


<br><br>

<p>

<img id=”bulb” src=”bulboff.png” alt=””>

</p>

<button onclick=”onbulb()” id=”btn”>On</button> <br><br>

<button onclick=”window.print()”>Print</button>

<script>

Const array=[“one”,”two”,”three”];
Let text= “”;

For(let i=0; i<array.length; i++)

Text += array[i]+ “<br>”;

Document.getElementById(“abc”).innerHTML=text;

Const object={ name:”Tanmai”, class:”Sybca”,div:”B”};

Let text1=””

For (let x in object){

Text1+= object[x]+ “<br> “;

Document.getElementById(“ab”).innerHTML=text1;

Let text3 =”Tanmai”;

Text_Print=””

For(let x of text3)

Text_Print+= x+ “”;

Document.getElementById(“a”).innerHTML=text_Print;

Function change_colour(){

Document.getElementById(“zx”).style.color=”red”;
}

Function onbulb(){

Let button = document.getElementById(“btn”);

Let bulb = document.getElementById(“bulb”);

If (button.innerHTML==”On”) {

Bulb.src=”bulbon.png”;

Button.innerHTML=”Off”;

Else

Button.innerHTML=”On”;

Bulb.src=”bulboff.png”;

</script>

</body>

</html>

Lab 4

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-
scale=1.0”>

<title>LAB 4</title>

</head>

<body>

<form action=”” onsubmit=”return submitfrm()” id=”frm”>

<label for=”name”></label> Name:</label>

<input type=”text” name=”name” id=”ab” ><br>

<label for=”age”>Age</label>

<input type=”number” name=”Age” ><br>

<label for=”phno”>Phone NO:</label>

<input type=”number” name=”phno” > <br>

<input type=”submit” value=”submit”>

</form> <br>

<button onclick=”window.print()”>Print</button>

<script>

Function submitfrm(){

Let a=document.forms[“frm”][“name”].value;

Let b=document.forms[“frm”][“Age”].value;

Let c=document.forms[“frm”][“phno”].value;

If(a==””){

Window.alert(“Enter Name”);

Return false;
}

Else if(b>=18 && b==””)

Window.alert(“”);

Return false;

Else if(c==””)

Window.alert(“no age enter”);

Return false;

Else if(d==””)

Window.alert(“Enter Password”);

Return false;

Return true;

</script>

</body>

</html>

Lab 5

<!DOCTYPE html>
<html lang=”en”>

<head>

<meta charset=”UTF-8”>

<meta name=”viewport” content=”width=device-width, initial-


scale=1.0”>

<title>LAB 5</title>

<style>

#color{

Background-color: aqua;

#inp{

Background-color: aqua;

</style>

</head>

<body>

<h1 onclick=”this.innerHTML=’Change’” >Change Text</h1>

<h1 id=”color”onmouseover=”colorch(this)”
onmouseout=”colorch2(this)”>Color change</h1>

<input id=”inp” type=”text” onkeydown=”colorch(this)”


onkeyup=”colorch2(this) “>

<p id=”para2” >Bodke</p>

<div id=”data1”>

<p id=”p1”>Kashi Boyz</p>


<p id=”p2”>Madhu Boyz</p>

</div>

<button onclick=”window.print()”>Print</button>

<script>

Function colorch(col) {

Col.style.backgroundColor=”red”;

Function colorch2(col) {

Col.style.backgroundColor=”aqua”;

Const par=document.createElement(“p”);

Const cld=document.createTextNode(“Tanmai”);

Par.appendChild(cld);

Document.body.appendChild(par);

Const bodypara=document.getElementById(“para2”);

Document.body.insertBefore(par,bodypara);

Const par1=document.getElementById(“data1”);

Const cld1=document.getElementById(“p1”);

Par1.removeChild(cld1);
</script>

</body>

</html>

Lab 6

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8”>

<meta name=”viewport” content=”width=device-width, initial-


scale=1.0”>

<title>Lab 6</title>

</head>

<body>

<button onclick=”show()”>Show</button>

<button onclick=”hide()”>Hide</button>

<p id=”ab”>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eum
qui est in, ab saepe voluptate non sint excepturi culpa eos velit? Sequi
recusandae adipisci harum doloribus nesciunt exercitationem. Facere,
accusantium?</p>

<button onclick=”window.print()”>Print</button>

<script>

// function show(){

//
fetch(https://jsonplaceholder.typicode.com/users).then(handleResponse).catc
h((err)=>{console.log(err)});

// }
// function handleResponse(response){

// response.json().then(handleData);

// }

// function handleData(data){

// console.log(data);

// let print= “”;

// for(let x in data){

// print += data[x].name + “<br>”;

// }

// document.getElementById(“ab”).innerHTML=print;

// }

Function hide(){

Const obj = {name:”Tanmai”, class:”TY BCA”, div:”B”};

Fetch(https://jsonplaceholder.typicode.com/Posts,{

Method: “POST”,

Body:JSON.stringify(obj),

Headers:{

“Content-Type”: “application/json;charset=UTF-8”

}).then(handleResponse).catch((err)=>{console.log(err)});

Function handleResponse(response){

Response.json().then(handleData);

}
Function handleData(data){

Console.log(data);

Let print= “”;

// for(let x in data){

// print += data[x].obj + “<br>”;

// }

Print= data.name;

Document.getElementById(“ab”).innerHTML=print;

</script>

</body>

</html>

Lab 7

<?xml version=”1.0” encoding=”UTF-8”?>

<Bookstore>

<Book category=”html”>

<Title>&quot; Introduction To HTML &quot;</Title>

<Author>Tanmai </Author>

<Price>50</Price>

<Year>2015</Year>

</Book>

<Book category=”html”>

<Title>&quot; Introduction To HTML &quot;</Title>

<Author>Sanjit</Author>
<Price>50</Price>

<Year>2015</Year>

</Book>

<Book category=”html”>

<Title>&quot;Introduction To HTML&quot;</Title>

<Author>Akash</Author>

<Price>50</Price>

<Year>2015</Year>

</Book>

</Bookstore>

<!—How to get this sign in xml 

<!-- > &gt 

<!-- < &lt

<!-- & &amp

<!—‘’ !apos

<!—“” quot

Lab 8

File name : ex7.xml

<?xml version=”1.0” encoding=”UTF-8”?>

<!DOCTYPE Bookstore SYSTEM “valid.dtd”

[<!ENTITY quetsionmark “?”>]>

<Bookstore>

<Book category=”html”>

<Title>&quot; Introduction To HTML &quot;</Title>


<Author>Tanmai </Author>

<Price>50</Price>

<Year>2015</Year>

</Book>

<Book category=”html”>

<Title>&quot; Introduction To HTML &quot;</Title>

<Author>Sanjit</Author>

<Price>50</Price>

<Year>2015</Year>

</Book>

<Book category=”html”>

<Title>&quot;Introduction To HTML&quot;</Title>

<Author>Akash</Author>

<Price>50</Price>

<Year>2015</Year>

</Book>

</Bookstore>

<!—How to get this sign in xml 

<!-- > &gt 

<!-- < &lt

<!-- & &amp

<!—‘’ !apos

<!—“” quot
Lab 8

File name : valid.dtd

<!ELEMENT Bookstore (Book,Book,Book)>

<!ELEMENT Book (Title,Author,Price,Year)>

<!ELEMENT Title (#PCDATA)>

<!ELEMENT Author (#PCDATA)>

<!ELEMENT Price (#PCDATA)>

<!ELEMENT Year (#PCDATA)>

<!ATTLIST Book category CDATA #REQUIRED>

You might also like