Experiment No:- 4th
Aim:- Program based on JavaScript Variables, Operators, Conditions, Loops, Functions,
Arrays, String and Date.
Objective:- To understand the concept of JavaScript Variables, Operators, Conditions, Loops,
Functions, Arrays, String and Date.
Resources Required:-
Computer system with a web browser.
Text editor (VS Code / Notepad++ / Sublime).
Knowledge of HTML and JavaScript.
Theory:-
JavaScript is a lightweight, object-based scripting language used for client-side and server-
side web applications.
🔹 Variables – Used to store data values. Example:
let name = "Kalyani";
let age = 21;
🔹 Operators – Perform arithmetic and logical operations. Example:
let sum = a + b;
let product = a * b;
🔹 Conditions – Used for decision making with if-else. Example:
if (age >= 18) {
console.log("Adult");
} else {
console.log("Minor");
}
🔹 Loops – Used to repeat tasks. Example:
for (let i = 1; i <= 5; i++) {
console.log(i);
}
🔹 Functions – Block of code for reuse. Example:
function square(num) {
return num * num;
}
🔹 Arrays – Collection of values stored in a single variable. Example:
let fruits = ["Apple", "Banana", "Mango"];
🔹 Strings – Series of characters with built-in methods. Example:
let msg = "JavaScript is Fun!";
msg.toUpperCase(); // "JAVASCRIPT IS FUN!"
🔹 Date – JavaScript object to handle date and time. Example:
let today = new Date();
today.toDateString();
In the uploaded program, all these features are combined in a single webpage to display
outputs with proper headings.
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Concepts Demo</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
h2 { color: darkblue; }
h3 { color: darkgreen; margin-top: 20px; }
pre { background: #f4f4f4; padding: 10px; border-radius: 5px; }
</style>
</head>
<body>
<h2>JavaScript Concepts Demo</h2>
<div id="output"></div>
<script>
let out = "";
// Variables
out += "<h3>1. Variables</h3>";
let name = "Kalyani";
let age = 21;
out += "<pre>Name: " + name + "\nAge: " + age + "</pre>";
// Operators
out += "<h3>2. Operators</h3>";
let a = 10, b = 3;
out += "<pre>Addition: " + (a + b) + "\nMultiplication: " + (a * b) + "\nModulo: " + (a %
b) + "</pre>";
// Condition
out += "<h3>3. Conditions</h3>";
if (age >= 18) {
out += "<pre>" + name + " is an Adult.</pre>";
} else {
out += "<pre>" + name + " is a Minor.</pre>";
}
// Loop
out += "<h3>4. Loops</h3>";
out += "<pre>Numbers from 1 to 5: ";
for (let i = 1; i <= 5; i++) {
out += i + " ";
}
out += "</pre>";
// Function
out += "<h3>5. Functions</h3>";
function square(num) {
return num * num;
}
out += "<pre>Square of 5 = " + square(5) + "</pre>";
// Array
out += "<h3>6. Arrays</h3>";
let fruits = ["Apple", "Banana", "Mango"];
out += "<pre>Fruits: " + fruits.join(", ") + "</pre>";
// String
out += "<h3>7. Strings</h3>";
let msg = "JavaScript is Fun!";
out += "<pre>Message: " + msg +
"\nUppercase: " + msg.toUpperCase() +
"\nSubstring(0,10): " + msg.substring(0,10) + "</pre>";
// Date
out += "<h3>8. Date</h3>";
let today = new Date();
out += "<pre>Today's Date: " + today.toDateString() +
"\nCurrent Time: " + today.toLocaleTimeString() + "</pre>";
// Show final output
document.getElementById("output").innerHTML = out;
</script>
</body>
</html>
Output:-
Conclusion
The JavaScript program successfully illustrates how variables, operators, conditions, loops,
functions, arrays, strings, and the date object work together to build dynamic web
applications.
Industrial Application
Creating interactive web applications.
Implementing form validations and data handling in websites.
Managing lists, records, and data structures using arrays.
Real-time applications such as calendars, task managers, and chat systems.
Backend programming with Node.js for server-side logic.
References
1. Mozilla Developer Network (MDN) – JavaScript Documentation:
https://developer.mozilla.org
2. W3Schools – JavaScript Tutorial: https://www.w3schools.com/js/
3. Eloquent JavaScript (3rd Edition).
