Scribd
Upload
4 views

java script lab manual edited (1)

This lab manual provides a comprehensive guide on web design and internet programming using JavaScript, covering essential topics such as basic syntax, event handling, DOM manipulation, and form validation. It includes multiple experiments with practical examples that demonstrate how to create interactive web pages and manipulate HTML elements. The manual emphasizes the importance of having a foundational knowledge of HTML and CSS, along with the use of a text editor and web browser for testing code.

Uploaded by

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

java script lab manual edited (1)

This lab manual provides a comprehensive guide on web design and internet programming using JavaScript, covering essential topics such as basic syntax, event handling, DOM manipulation, and form validation. It includes multiple experiments with practical examples that demonstrate how to create interactive web pages and manipulate HTML elements. The manual emphasizes the importance of having a foundational knowledge of HTML and CSS, along with the use of a text editor and web browser for testing code.

Uploaded by

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

Web design and internet programming Java script lab manual

You are expected to remind

 Basic knowledge of HTML and CSS.


 A text editor (e.g., VS Code, Notepad++, Sublime text…).
 A web browser for testing your code.

Learn

 Understand Basic Syntax and Output


 How to create interactive forms.
 Understand event handling in JavaScript.
 Gain experience in DOM manipulation.

Experiment 1: Basic Syntax and Output and enteral script

!DOCTYPE html>

<html>

<head>

<title>JavaScript Basics</title>

</head>

<body>

<h1>Hello, JavaScript!</h1>

<script>

// Single-line comment

console.log("Hello, Console!");

document.write("Hello, World!");

alert("Hello, Alert!");
</script>

</body>

</html>

Experment two:Adding events to HTML elements using inline


JavaScript involves embedding JavaScript code directly within an
HTML element's event attribute.

A. Button Click Event


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Inline Events</title>
</head>
<body>
<button onclick="document.body.style.backgroundColor
='lightblue';"> Change Background</button>
</body>
</html>
B. Input Field Change Event

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Inline Events</title>
</head>
<body>
<input type="text" onchange="alert('Value changed to: ' +
this.value);" placeholder="Type something...">
</body>
</html>
C. Mouse over Event

<!DOCTYPE html>

<html lang="en">
<head>

<meta charset="UTF-8">

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


scale=1.0">

<title>Inline Events</title>

</head>

<body>

<p onmouseover="this.style.color = 'red';" onmouseout="this.style.color


= ' pink';">

Hover over this text to change its color.

</p>

</body>

</html>

D. Form Submission Event


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Inline Events</title>
</head>
<body>
<form on onsubmit="alert('form is submited');">
<input type="text" placeholder="username"
required><br><br>
<input type="password" placeholder="your password"
requaired><br><br>
<input type="submit" value="login"
onclick="this.style.backgroungColor='yellow';">
</form>
</body>
</html>
D. Image Click Event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Inline Events</title>
</head>
<body>
<img src="doge.jpg" alt="Placeholder Image"
onclick="alert('It is real doge!');">
</body>

</html>

Experiment two : selecting and manipulating HTML elements:

A. Create an HTML document save it as HTML manipulation.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>HTML Manipulation Example</title>
<style>
#main-heading {
color: blue;
}
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<h1 id="main-heading">Hello, World!</h1>
<p class="description">This is a paragraph.</p>
<p class="description">Another paragraph here.</p>
<button id="change-text">Change Heading Text</button>
<button id="highlight-paragraphs">Highlight Paragraphs</button>
<button id="add-paragraph">Add New Paragraph</button>
<div id="container"></div>

<script src="script.js"></script>
</body>
</html>

B. JavaScript Code (Save as script.js):


// selecting elements
const heading = document.getElementById('main-heading');
const paragraphs = document.querySelectorAll('.description');
const changeTextButton = document.getElementById('change-text');
const highlightButton = document.getElementById('highlight-paragraphs');
const addParagraphButton = document.getElementById('add-paragraph');
const container = document.getElementById('container');

//Changing heading text on button click


changeTextButton.addEventListener('click', () => {
heading.innerText = 'Hello, JavaScript!';
heading.style.color = 'green';
});

// Highlighting all paragraphs on button click


highlightButton.addEventListener('click', () => {
paragraphs.forEach(paragraph => {
paragraph.classList.toggle('highlight');
});
});

// Adding a new paragraph to the container and //read about arrow


function
addParagraphButton.addEventListener('click', () => {
l l

const newParagraph = document.createElement('p');


newParagraph.innerText = 'This is a dynamically added paragraph.';
container.appendChild(newParagraph);
});

Experiment three:

Form validation Create a basic HTML form and link the java script
code scrept.js.

A. <! DOCTYPE html>

<html lang="en">

<head>

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

<title>Interactive Form</title>

</head>

<body>

<h1>Registration Form</h1>

<form id="registrationForm" >

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

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

<label for="email">Email:</label>

<input type="email" id="email" name="email" required><br><br>

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

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

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

<button type="reset" >clear</button>

</form>

<p id="output"></p>

<script src="script.js"></script>

</body>

</html>
B. Create the java script code and save it as scrept.js it performs
the form validation

document.getElementById('registrationForm').addEventListener('submit',
function(event) {
event.preventDefault(); // Prevent form submission

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


const email = document.getElementById('email').value.trim();
const age = document.getElementById('age').value;

if (!name || !email || !age) {


alert('Please fill out all fields.');
return;
}

if (age < 18) {


alert('You must be at least 18 years old.');
return;
}
document.getElementById('output').textContent = `Welcome , ${name}!
please cheke your profile: Your name is ${name} Your email is ${email} and
you are ${age} years old.`;
});

Experment 4 Practical Example a Heterogeneous Array in web


development

Building a simple webpage that displays various types of content (text,


images, and links). You might use a heterogeneous array to store the
elements that need to be rendered dynamically:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Heterogeneous Array Example</title>
</head>
<body>
<div id="content"></div>

<script>
// JavaScript Code
const contentArray = [
"Welcome to the multy data array page",
{ type: "image", src: "doge.jpg", alt: "Placeholder Image" },
{ type: "link", href: "file.html", text: "go to file page" }
];
// Reference to the content div
const contentDiv = document.getElementById("content");
// Render content dynamically
contentArray.forEach(item => {
if (typeof item === "string") {
// Render text
const paragraph = document.createElement("p");
paragraph.textContent = item;
contentDiv.appendChild(paragraph);
}
else if (item.type === "image") {
// Render image
const image = document.createElement("img");
image.src = item.src;
image.alt = item.alt;
contentDiv.appendChild(image);
}
else if (item.type === "link") {
// display the link
const link = document.createElement("a");
link.href = item.href;
link.textContent = item.text;
link.target = "_blank"; // Open in a new tab
contentDiv.appendChild(link);
}
});
</script>
</body>
</html>
Implementing lopping statements switch case
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
var day = prompt("Enter a number between 1 and 7");
switch (day)
{
case (day="1"):
document.write("Sunday");
break;
case (day="2"):
document.write("Monday");
break;
case (day="3"):
document.write("Tuesday");
break;
case (day="4"):
document.write("wodnsday");
break;
case (day="5"):
document.write("Thursday");
break;
case (day="6"):
document.write("friday");
break;
case (day="3"):
document.write("saterday");
break;
default:
document.write("Invalid week day");
break;
}
</script>
</body>
</html>
While,do while ,and for loops
<!DOCTYPE html>
<html>
<head>
<title>Loops</title>
</head>
<body>
<script>
// For loop
for (let i = 1; i <= 5; i++) {
document.write(" for loop Iteration: " + i);

// While loop
let j = 1;
while (j <= 5) {
document.write("While Iteration: " + j);
j++;
}

// Do-while loop
let k = 1;
do {
document.write("Do-While Iteration: " + k);
k++;
} while (k <= 5);
</script>
</body>
</html>
Implementing conditional statements if else condition
<!DOCTYPE html>
<html><body>
<script type="text/javascript">var num = prompt("Enter Number");
if (num > 0)
{
alert("Given number is Positive!!!");
}
else if (num==0)
{
alert("it is Zero");

}
else
{
alert("it is negative nimber");
}
</script>

</body>
</html>

You might also like