Scribd
Upload
15 views12 pages

JS lab

Uploaded by

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

JS lab

Uploaded by

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

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

You might also like