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>
