JAVASCRIPT EXAMPLES
Here are examples of JavaScript based from the Handout I have given to you.
Topics:
1. Arithmetic Operators:
let A = 10, B = 20;
console.log(A + B); // Output: 30
console.log(B - A); // Output: 10
console.log(A * B); // Output: 200
console.log(B / A); // Output: 2
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arithmetic Operator Examples</title>
</head>
<body>
<h2>Arithmetic Operator Examples</h2>
<p id="addition"></p>
<p id="subtraction"></p>
<p id="multiplication"></p>
<p id="division"></p>
<p id="modulus"></p>
<p id="increment"></p>
<p id="decrement"></p>
<script>
let A = 10;
let B = 20;
// Perform the operations
let addition = A + B;
let subtraction = A - B;
let multiplication = A * B;
let division = B / A;
let modulus = B % A;
// Increment and Decrement
let incrementBefore = B;
B++; // Post-increment
let incrementAfter = B;
B--; // Reset B to 20
let decrementBefore = B;
B--; // Post-decrement
let decrementAfter = B;
// Display results in the browser
document.getElementById("addition").innerText = `Addition (A + B): ${A} + ${B} =
${addition}`;
document.getElementById("subtraction").innerText = `Subtraction (A - B): ${A} - ${B} =
${subtraction}`;
document.getElementById("multiplication").innerText = `Multiplication (A * B): ${A} *
${B} = ${multiplication}`;
document.getElementById("division").innerText = `Division (B / A): ${B} / ${A} =
${division}`;
document.getElementById("modulus").innerText = `Modulus (B % A): ${B} % ${A} =
${modulus}`;
document.getElementById("increment").innerText = `Increment (B++): Before =
${incrementBefore}, After = ${incrementAfter}`;
document.getElementById("decrement").innerText = `Decrement (B--): Before =
${decrementBefore}, After = ${decrementAfter}`;
</script>
</body>
</html>
Output:
2. String Concatenation Operators:
Example JavaScript Code:
let str1 = "Hello";
let str2 = str1 + " World!";
console.log(str2); // Output: "Hello World!"
3. Assignment Operators:
Example JavaScript Code:
let A = 10;
let B = 20;
B += A; // B = B + A, B is now 30
console.log(B); // Output: 30
4. Comparison Operators:
Example JavaScript Code:
let A = 10, B = 20;
console.log(A == B); // Output: false
console.log(A < B); // Output: true
5. Logical Operators:
Example JavaScript Code:
let A = true, B = false;
console.log(A && B); // Output: false
console.log(A || B); // Output: true
6. Bitwise Operators:
Example JavaScript Code:
let A = 2, B = 3;
console.log(A & B); // Output: 2 (Bitwise AND)
7. If Statement:
Example JavaScript Code:
let age = 18;
if (age >= 18) {
console.log("Eligible to vote");
}
8. If...Else Statement:
Example JavaScript Code:
let age = 16;
if (age >= 18) {
console.log("Eligible to vote");
} else {
console.log("Not eligible to vote");
}
9. Switch Statement:
Example JavaScript Code:
let fruit = "apple";
switch(fruit) {
case "apple":
console.log("This is an apple.");
break;
case "banana":
console.log("This is a banana.");
break;
default:
console.log("Unknown fruit.");
}
10. The Ternary Operator (?):
Example JavaScript Code:
let time = 10;
let greeting = time < 12 ? "Good morning" : "Good afternoon";
console.log(greeting); // Output: "Good morning"
11. While Loop:
Example JavaScript Code:
let count = 0;
while (count < 5) {
console.log(count);
count++;
}
12. Do While Loop:
Example JavaScript Code:
let count = 0;
do {
console.log(count);
count++;
} while (count < 5);
13. For Loop:
Example JavaScript Code:
for (let i = 0; i < 5; i++) {
console.log(i);
}
14. Break Statement:
Example JavaScript Code:
for (let i = 0; i < 5; i++) {
if (i === 3) break;
console.log(i);
}
15. Continue Statement:
Example JavaScript Code:
for (let i = 0; i < 5; i++) {
if (i === 3) continue;
console.log(i);
}
16. Arrays:
Example JavaScript Code:
let fruits = ["apple", "orange", "mango"];
console.log(fruits[0]); // Output: "apple"
17. Functions:
Example JavaScript Code:
function greet(name) {
return "Hello, " + name;
}
console.log(greet("Alice")); // Output: "Hello, Alice"
18. JavaScript Objects:
Example JavaScript Code:
let car = {
model: "Toyota",
color: "red",
drive: function() {
return "The car is driving";
}
};
console.log(car.drive()); // Output: "The car is driving"
19. JavaScript Scope:
Example JavaScript Code:
let globalVar = "I am global";
function testScope() {
let localVar = "I am local";
console.log(globalVar); // Accessible
console.log(localVar); // Accessible
}
testScope();
console.log(globalVar); // Accessible
console.log(localVar); // Error: localVar is not defined
20. Strings
Example JavaScript Code:
let greeting = "Hello, World!";
console.log(greeting.toUpperCase()); // Outputs: "HELLO, WORLD!"
console.log(greeting.indexOf("World")); // Outputs: 7
21. Regular Expressions
Example JavaScript Code:
let text = "Hello there!";
let pattern = /hello/i;
console.log(pattern.test(text)); // Outputs: true
22. JavaScript Numbers
Example JavaScript Code:
let num = 123e-5; // Scientific notation
console.log(num); // Outputs: 0.00123
23. Date and Time
Example JavaScript Code:
let currentDate = new Date();
console.log(currentDate.toLocaleDateString()); // Outputs the current date in
local format
24. JavaScript Events
Example HTML Code:
<button onclick="alert('Button clicked!')">Click me</button>
25. Dialog Boxes
Example JavaScript Code:
let userResponse = prompt("Enter your name:", "Your name here");
alert("Hello, " + userResponse);
26. Error Handling in JavaScript
Example JavaScript Code:
try {
nonExistentFunction();
} catch (error) {
console.error("Error: " + error.message);
} finally {
console.log("Error handling complete.");
}
27. JavaScript Forms Validation
Example HTML Code:
<form name="myForm" onsubmit="return validateForm()">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
<script>
function validateForm() {
let name = document.forms["myForm"]["fname"].value;
if (name == "") {
alert("Name must be filled out");
return false;
}
return true;
}
</script>
28. JavaScript HTML DOM
Example JavaScript Code:
<p id="demo">Original Text</p>
<button onclick="changeText()">Change Text</button>
<script>
function changeText() {
document.getElementById("demo").innerHTML = "New Text!";
}
</script>
JAVASCRIPT ACTIVITIES
1. Create an HTML file starting from Topic No. 2 to Topic
No. 24 in the JavaScript Examples above that will
display the output in the browser, similar to the output
shown in Topic No. 1. Use only one HTML file to
display the output for Topics No. 2-24 in the browser,
and include a screenshot of the browser output below
your code.
2. Print your HTML file including the screenshot of the
browser output.
