Scribd
Upload
28 views

Javascript Practical File Work

javascript

Uploaded by

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

Javascript Practical File Work

javascript

Uploaded by

mukulparchwani15
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

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>

You might also like