Aim
To demonstrate Math, String, Array and Date objects in JavaScript with at least five methods each.
Procedure
1. Open a text editor (Notepad++ or VS Code).
2. Write the HTML, CSS and JavaScript code as given in the Source Code section.
3. Save the file with .html extension.
4. Open the file in a web browser.
5. Test the output and ensure it meets the given requirements.
Software Requirements:
1. Text Editor (VS Code, Sublime Text, Notepad++, etc.)
2. Web Browser (Chrome, Firefox, Edge, etc.)
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Objects Demo</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f4f4f9;
color: #333;
text-align: center;
}
h2 {
background: #4CAF50;
color: white;
padding: 15px;
border-radius: 10px;
display: inline-block;
}
.section {
background: white;
margin: 20px auto;
padding: 15px;
width: 70%;
border-radius: 10px;
box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
}
pre {
background: #eee;
padding: 10px;
border-radius: 8px;
text-align: left;
white-space: pre-wrap;
}
button {
margin: 10px;
padding: 10px 15px;
border: none;
background: #4CAF50;
color: white;
font-size: 16px;
border-radius: 8px;
cursor: pointer;
transition: background 0.3s ease;
}
button:hover {
background: #45a049;
}
</style>
</head>
<body>
<h2>JavaScript Objects Demonstration</h2>
<div class="section">
<h3>1. Math Object</h3>
<button onclick="showMath()">Show Math Methods</button>
<pre id="mathOutput"></pre>
</div>
<div class="section">
<h3>2. String Object</h3>
<button onclick="showString()">Show String Methods</button>
<pre id="stringOutput"></pre>
</div>
<div class="section">
<h3>3. Array Object</h3>
<button onclick="showArray()">Show Array Methods</button>
<pre id="arrayOutput"></pre>
</div>
<div class="section">
<h3>4. Date Object</h3>
<button onclick="showDate()">Show Date Methods</button>
<pre id="dateOutput"></pre>
</div>
<script>
function showMath() {
let text = "";
text += "Absolute value of -25: " + [Link](-25) + "\n";
text += "2 raised to power 3: " + [Link](2, 3) + "\n";
text += "Square root of 64: " + [Link](64) + "\n";
text += "Floor value of 7.8: " + [Link](7.8) + "\n";
text += "Random number: " + [Link]() + "\n";
[Link]("mathOutput").textContent = text;
}
function showString() {
let str = "JavaScript";
let text = "";
text += "Length: " + [Link] + "\n";
text += "Uppercase: " + [Link]() + "\n";
text += "Substring (0-4): " + [Link](0, 4) + "\n";
text += "Index of 'S': " + [Link]('S') + "\n";
text += "Replace 'Java' with 'Type': " + [Link]("Java", "Type") + "\n";
[Link]("stringOutput").textContent = text;
}
function showArray() {
let arr = [10, 20, 30, 40, 50];
let text = "";
[Link](60);
text += "After push(60): " + arr + "\n";
[Link]();
text += "After pop(): " + arr + "\n";
[Link]();
text += "After shift(): " + arr + "\n";
[Link](5);
text += "After unshift(5): " + arr + "\n";
text += "Slice (1-3): " + [Link](1, 3) + "\n";
[Link]("arrayOutput").textContent = text;
}
function showDate() {
let d = new Date();
let text = "";
text += "Year: " + [Link]() + "\n";
text += "Month (0-11): " + [Link]() + "\n";
text += "Day of month: " + [Link]() + "\n";
text += "Day of week (0-6): " + [Link]() + "\n";
text += "Local date & time: " + [Link]() + "\n";
[Link]("dateOutput").textContent = text;
}
</script>
</body>
</html>