Lab1 Prepare a HTML document to insert JavaScript in # different ways.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Insertion Methods</title>
<style>
body {
font-family: Arial, sans-serif;
}
#output {
margin-top: 20px;
font-weight: bold;
}
</style>
<script>
// Internal JavaScript
function internalFunction() {
document.getElementById('output').innerText = 'This is from the internal JavaScript!';
}
</script>
</head>
<body>
<h1>JavaScript Insertion Methods</h1>
<button onclick="alert('This is an inline JavaScript alert!')">Click Me (Inline)</button>
<button onclick="internalFunction()">Click Me (Internal)</button>
<div id="output"></div>
<script src="external.js"></script> <!-- External JavaScript -->
</body>
</html>
Lab2 Show an example of the use of No script.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NoScript Example</title>
<script>
// This script will run if JavaScript is enabled
function showMessage() {
document.getElementById('message').innerText = 'JavaScript is enabled!';
}
</script>
</head>
<body onload="showMessage()">
<h1>NoScript Example</h1>
<div id="message"></div>
<noscript>
<div style="color: red; font-weight: bold;">
JavaScript is disabled in your browser. Please enable it for the best experience.
</div>
</noscript>
</body>
</html>
Lab 3 write a program to read an element DIV in HTML document using querySelector() method and
change its text content.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change DIV Text Content</title>
<style>
body {
font-family: Arial, sans-serif;
}
#myDiv {
padding: 20px;
border: 1px solid #ccc;
margin: 20px 0;
background-color: #f9f9f9;
}
</style>
<script>
// Function to change the text content of the DIV
function changeDivText() {
// Use querySelector to select the DIV with the ID 'myDiv'
const myDiv = document.querySelector('#myDiv');
// Change the text content of the selected DIV
myDiv.textContent = 'The text content has been changed!';
}
</script>
</head>
<body>
<h1>Change DIV Text Content Example</h1>
<div id="myDiv">This is the original text content of the DIV.</div>
<button onclick="changeDivText()">Change Text</button>
</body>
</html>
Lab4 Write a function to add two numbers and display the result in a text box.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add Two Numbers</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
input {
margin: 5px;
padding: 10px;
width: 100px;
}
button {
padding: 10px 15px;
margin: 5px;
}
#result {
margin-top: 20px;
font-weight: bold;
}
</style>
<script>
// Function to add two numbers and display the result
function addNumbers() {
// Get the values from the input fields
const num1 = parseFloat(document.querySelector('#num1').value);
const num2 = parseFloat(document.querySelector('#num2').value);
// Calculate the sum
const sum = num1 + num2;
// Display the result in the result text box
document.querySelector('#result').value = sum;
}
</script>
</head>
<body>
<h1>Add Two Numbers</h1>
<input type="number" id="num1" placeholder="Enter first number" />
<input type="number" id="num2" placeholder="Enter second number" />
<button onclick="addNumbers()">Add</button>
<input type="text" id="result" placeholder="Result" readonly />
</body>
</html>
Lab 5 write a function to validate a form with the fields student name email and address.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
input, textarea {
margin: 5px;
padding: 10px;
width: 300px;
display: block;
}
button {
padding: 10px 15px;
margin: 5px;
}
.error {
color: red;
font-weight: bold;
}
</style>
<script>
// Function to validate the form
function validateForm() {
// Get the values from the input fields
const name = document.querySelector('#studentName').value.trim();
const email = document.querySelector('#email').value.trim();
const address = document.querySelector('#address').value.trim();
const errorMessage = document.querySelector('#errorMessage');
// Clear previous error messages
errorMessage.textContent = '';
// Validate the fields
if (name === '') {
errorMessage.textContent += 'Student name is required.\n';
}
if (email === '') {
errorMessage.textContent += 'Email is required.\n';
} else {
// Simple email validation
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(email)) {
errorMessage.textContent += 'Please enter a valid email address.\n';
}
}
if (address === '') {
errorMessage.textContent += 'Address is required.\n';
}
// If there are no errors, return true; otherwise, return false
return errorMessage.textContent === '';
}
</script>
</head>
<body>
<h1>Student Information Form</h1>
<form onsubmit="return validateForm()">
<label for="studentName">Student Name:</label>
<input type="text" id="studentName" placeholder="Enter student name" required />
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Enter email" required />
<label for="address">Address:</label>
<textarea id="address" placeholder="Enter address" required></textarea>
<div id="errorMessage" class="error"></div>
<button type="submit">Submit</button>
</form>
</body>
</html>
Lab6 Write a function that creates a html element and invoke that function upon clicking on a button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create HTML Element on Button Click</title>
</head>
<body>
<!-- Button that will trigger the function -->
<button id="createElementButton">Create Element</button>
<!-- Container where the new elements will be added -->
<div id="elementContainer"></div>
<script>
// Function to create a new HTML element
function createElement() {
// Create a new paragraph element
const newElement = document.createElement('p');
// Set the content of the paragraph
newElement.textContent = 'This is a newly created paragraph element!';
// Append the new element to the container
document.getElementById('elementContainer').appendChild(newElement);
}
// Event listener for the button to invoke the createElement function
document.getElementById('createElementButton').addEventListener('click', createElement);
</script>
</body>
</html>
Lab 7.Prepare an array as a collection of mixed types of data i.e string number Boolean .
Lab 8 Write a program to show a loop using while for and for each.
Lab 9. Write a program to log array element values in console.
Lab 10. Prepare an object of employees with properties.
Lab 11
