Scribd
Upload
25 views8 pages

Javascript Practical File Work

javascript

Uploaded by

mukulparchwani15
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
Download as docx, pdf, or txt
25 views8 pages

Javascript Practical File Work

javascript

Uploaded by

mukulparchwani15
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
Download as docx, pdf, or txt
Download as docx, pdf, or txt
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