JAVASCRIPT
1. Basic Variables and Output: Write a JavaScript program to display a welcome message in an alert
box when the page is loaded.
1. Basic Variables and Output
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Basic Variables</title>
<script>
window.onload = function() {
alert("Welcome to the webpage!");
};
</script>
</head>
<body>
<h1>JavaScript Alert Example</h1>
</body>
</html>
2. User Input: Create a script that prompts the user to enter their name, and then display a greeting
message using their name.
2. User Input
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>User Input</title>
<script>
function greetUser() {
let name = prompt("Enter your name:");
alert("Hello, " + name + "!");
JAVASCRIPT
</script>
</head>
<body>
<button onclick="greetUser()">Click Me</button>
</body>
</html>
3. Conditional Statements: Write a program that checks if a number entered by the user is even or
odd and displays the result in an alert box. 3. Conditional Statements
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Even or Odd</title>
<script>
function checkEvenOdd() {
let num = prompt("Enter a number:");
if (num % 2 === 0) {
alert(num + " is even.");
} else {
alert(num + " is odd.");
</script>
</head>
<body>
<button onclick="checkEvenOdd()">Check Number</button>
</body>
</html>
4. Loops: Write a JavaScript program that uses a for loop to display numbers from 1 to 10 on the
webpage. 4. Loops
JAVASCRIPT
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>For Loop Example</title>
<script>
function displayNumbers() {
let output = "";
for (let i = 1; i <= 10; i++) {
output += i + "<br>";
document.getElementById("result").innerHTML = output;
</script>
</head>
<body>
<button onclick="displayNumbers()">Show Numbers</button>
<div id="result"></div>
</body>
</html>
5. Array Manipulation: Create an array of 5 numbers and display the sum of all numbers using
JavaScript.5. Array Manipulation
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Array Sum</title>
<script>
function calculateSum() {
JAVASCRIPT
let numbers = [10, 20, 30, 40, 50];
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
sum += numbers[i];
alert("The sum is: " + sum);
</script>
</head>
<body>
<button onclick="calculateSum()">Calculate Sum</button>
</body>
</html>
6. Functions: Write a JavaScript function that accepts two numbers as parameters and returns the
greater of the two numbers. 6. Functions
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Functions</title>
<script>
function findGreater(num1, num2) {
return num1 > num2 ? num1 : num2;
function displayGreater() {
let num1 = parseInt(prompt("Enter first number:"));
let num2 = parseInt(prompt("Enter second number:"));
alert("The greater number is: " + findGreater(num1, num2));
}
JAVASCRIPT
</script>
</head>
<body>
<button onclick="displayGreater()">Find Greater</button>
</body>
</html>
7. Event Handling: Create a button on a webpage that, when clicked, changes the background color
of the page.7. Event Handling
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Event Handling</title>
<script>
function changeBackgroundColor() {
document.body.style.backgroundColor = "lightblue";
</script>
</head>
<body>
<button onclick="changeBackgroundColor()">Change Background</button>
</body>
</html>
8. DOM Manipulation: Create a webpage with two paragraphs. Write JavaScript to change the text
content of the second paragraph when the first paragraph is clicked. 8. DOM Manipulation
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>DOM Manipulation</title>
JAVASCRIPT
<script>
function changeText() {
document.getElementById("para2").innerText = "The text has been changed!";
</script>
</head>
<body>
<p id="para1" onclick="changeText()">Click here to change the second paragraph text.</p>
<p id="para2">This is the second paragraph.</p>
</body>
</html>
9. Form Validation: Write a JavaScript program that validates a form. Ensure that the user enters text
in the "Name" field and a valid email address in the "Email" field. 9. Form Validation
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<script>
function validateForm() {
let name = document.forms["myForm"]["name"].value;
let email = document.forms["myForm"]["email"].value;
if (name === "" || email === "") {
alert("Name and Email must be filled out.");
return false;
if (!email.includes("@")) {
alert("Please enter a valid email address.");
return false;
}
JAVASCRIPT
alert("Form submitted successfully!");
return true;
</script>
</head>
<body>
<form name="myForm" onsubmit="return validateForm()">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="text" id="email" name="email"><br><br>
<button type="submit">Submit</button>
</form>
</body>
</html>
10. Timers and Delays: Write a JavaScript program that shows an alert box after 3 seconds of page
load, using the setTimeout function.10. Timers and Delays
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Timers and Delays</title>
<script>
window.onload = function() {
setTimeout(function() {
alert("This alert appears 3 seconds after page load.");
}, 3000);
};
JAVASCRIPT
</script>
</head>
<body>
<h1>Timers and Delays Example</h1>
</body>
</html>
