Scribd
Upload
0 views

JS lab

Uploaded by

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

JS lab

Uploaded by

killerulu69
Copyright
© © All Rights Reserved
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