8.
Program to demonstrate the use of JavaScript built-in objects such as String, Boolean, Array,
Math and Date
(i)String Object Functions
<!DOCTYPE html>
<html>
<body>
<h3>Program: String Objects</h3>
Enter a text: <input id="str"><br><br>
<button String Functions</button>
<p id="result"></p>
<script>
function showString() {
let s = [Link]("str").value;
let length = [Link];
let upper = [Link]();
let lower = [Link]();
let firstChar = [Link](0);
let slice = [Link](1, 5);
let replaceWord = [Link]("e", "@");
let concat = [Link](" is a nice word");
let index = [Link]("e");
let last = [Link]("a");
let trimmed = [Link]();
[Link]("result").innerHTML =
"Original String: " + s + "<br>" +
"Length: " + length + "<br>" +
"Uppercase: " + upper + "<br>" +
"Lowercase: " + lower + "<br>" +
"First Character: " + firstChar + "<br>" +
"Slice(1–5): " + slice + "<br>" +
"Replace 'e' with '@': " + replaceWord + "<br>" +
"Concatenated: " + concat + "<br>" +
"Index of 'e': " + index + "<br>" +
"Last Index of 'a': " + last + "<br>" +
"Trimmed: " + trimmed;
</script>
</body>
</html>
(ii)Boolean Object Functions
<!DOCTYPE html>
<html>
<body>
<h3>Program: Boolean Object</h3>
Enter a number: <input id="num"><br><br>
<button Boolean Results</button>
<p id="result"></p>
<script>
function showBoolean() {
let n = Number([Link]("num").value);
let isPositive = Boolean(n > 0);
let isEven = Boolean(n % 2 === 0);
let isZero = Boolean(n === 0);
let isGreaterThanTen = Boolean(n > 10);
let boolObject = new Boolean(n);
[Link]("result").innerHTML =
"Number: " + n + "<br>" +
"Is Positive? " + isPositive + "<br>" +
"Is Even? " + isEven + "<br>" +
"Is Zero? " + isZero + "<br>" +
"Is Greater than 10? " + isGreaterThanTen + "<br>" +
"Boolean Object Value: " + [Link]();
</script>
</body>
</html>
(iii) Array Object Functions
<!DOCTYPE html>
<html>
<body>
<h3>Program: Array Object</h3>
Enter numbers (comma separated): <input id="arr"><br><br>
<button Array Functions</button>
<p id="result"></p>
<script>
function showArray() {
let arr = [Link]("arr").[Link](",").map(Number);
let length = [Link];
let sorted = [...arr].sort((a, b) => a - b);
let reversed = [...arr].reverse();
let first = arr[0];
let last = arr[[Link] - 1];
let joined = [Link]("-");
let sum = [Link]((a, b) => a + b, 0);
let pushedArr = [...arr];
[Link](99);
let poppedArr = [...arr];
[Link]();
[Link]("result").innerHTML =
"Original Array: " + arr + "<br>" +
"Length: " + length + "<br>" +
"Sorted: " + sorted + "<br>" +
"Reversed: " + reversed + "<br>" +
"First Element: " + first + "<br>" +
"Last Element: " + last + "<br>" +
"Joined with '-': " + joined + "<br>" +
"Sum of Elements: " + sum + "<br>" +
"After Push(99): " + pushedArr + "<br>" +
"After Pop(): " + poppedArr;
</script>
</body>
</html>
(iv) Math Object Functions
<!DOCTYPE html>
<html>
<body>
<h3>Program: Math Object</h3>
Enter a number: <input id="num"><br><br>
<button Math Functions</button>
<p id="result"></p>
<script>
function showMath() {
let n = Number([Link]("num").value);
let sqrt = [Link](n);
let power = [Link](n, 2);
let abs = [Link](n);
let round = [Link](n);
let ceil = [Link](n);
let floor = [Link](n);
let random = [Link]([Link]() * 100);
let max = [Link](10, 25, 50, n);
let min = [Link](10, 25, 50, n);
[Link]("result").innerHTML =
"Square Root: " + sqrt + "<br>" +
"Square: " + power + "<br>" +
"Absolute: " + abs + "<br>" +
"Round: " + round + "<br>" +
"Ceil: " + ceil + "<br>" +
"Floor: " + floor + "<br>" +
"Random (0–100): " + random + "<br>" +
"Max (10,25,50,n): " + max + "<br>" +
"Min (10,25,50,n): " + min;
</script>
</body>
</html>
(v) Date Object Functions
<!DOCTYPE html>
<html>
<body>
<h3>Program: Date Object – DisplayDate Details</h3>
<button Date Details</button>
<p id="result"></p>
<script>
function showDate() {
let d = new Date();
let year = [Link]();
let month = [Link]() + 1; // months start from 0
let date = [Link]();
let day = [Link]();
let hours = [Link]();
let minutes = [Link]();
let seconds = [Link]();
let time = [Link]();
let fullDate = [Link]();
[Link]("result").innerHTML =
"Full Date: " + fullDate + "<br>" +
"Year: " + year + "<br>" +
"Month: " + month + "<br>" +
"Date: " + date + "<br>" +
"Day (0=Sun): " + day + "<br>" +
"Hours: " + hours + "<br>" +
"Minutes: " + minutes + "<br>" +
"Seconds: " + seconds + "<br>" +
"Current Time: " + time;
}
</script>
</body>
</html>
7. Program to demonstrate Node Types in JavaScript DOM.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Node Type</title>
<script type="text/JavaScript">
function checkNodeType()
var tag=[Link]("T1");
var value=[Link];
if(value==1)
[Link]("This is an element node type");
if(value==2)
[Link]("This is an attribute node type");
if(value==3)
[Link]("This is a text node type");
if(value==8)
[Link]("This is a comment node type");
if(value==9)
{
[Link]("This is a Document node type");
</script>
</head>
<body>
<h1>Check Node Type</h1>
<p id="T1">Welcome to the World of DOM!</p>
<input type="button" value="check">
</body>
</html>
6. Basic JavaScript Programs
(i) Swap two numbers using third variable
<!DOCTYPE html>
<html>
<body>
<h3>Program: Swap two numbers using third variable</h3>
Enter first number: <input id="a"><br>
Enter second number: <input id="b"><br><br>
<button >
<p id="result"></p>
<script>
function swap() {
let a = Number([Link]("a").value);
let b = Number([Link]("b").value);
let temp = a;
a = b;
b = temp;
[Link]("result").innerHTML = "After swapping: a=" + a + ", b=" + b;
</script>
</body>
</html>
(ii) Swap two numbers without using third variable
<!DOCTYPE html>
<html>
<body>
<h3>Program: Swap two numbers without using third variable</h3>
Enter first number: <input id="a"><br>
Enter second number: <input id="b"><br><br>
<button >
<p id="result"></p>
<script>
function swap() {
let a = Number([Link]("a").value);
let b = Number([Link]("b").value);
a = a + b;
b = a - b;
a = a - b;
[Link]("result").innerHTML = "After swapping: a=" + a + ", b=" + b;
</script>
</body>
</html>
(iii) Average of three subjects
<!DOCTYPE html>
<html>
<body>
<h3>Program: Find average of three subjects</h3>
Subject 1: <input id="s1"><br>
Subject 2: <input id="s2"><br>
Subject 3: <input id="s3"><br><br>
<button Average</button>
<p id="result"></p>
<script>
function avg() {
let s1 = Number([Link]("s1").value);
let s2 = Number([Link]("s2").value);
let s3 = Number([Link]("s3").value);
let average = (s1 + s2 + s3) / 3;
[Link]("result").innerHTML = "Average = " + average;
</script>
</body>
</html>
(iv) Find remainder when divided by 6
<!DOCTYPE html>
<html>
<body>
<h3>Program: Find remainder when number divided by 6</h3>
Enter number: <input id="num"><br><br>
<button Remainder</button>
<p id="result"></p>
<script>
function rem() {
let num = Number([Link]("num").value);
let r = num % 6;
[Link]("result").innerHTML = "Remainder = " + r;
</script>
</body>
</html>
(v) Shopkeeper increases price by 20%
<!DOCTYPE html>
<html>
<body>
<h3>Program: Increase price by 20%</h3>
Enter price: <input id="price"><br><br>
<button >
<p id="result"></p>
<script>
function calc() {
let price = Number([Link]("price").value);
let newPrice = price + (price * 0.20);
[Link]("result").innerHTML = "New Price = " + newPrice;
</script>
</body>
</html>
(vi) Check if number is multiple of 5
<!DOCTYPE html>
<html>
<body>
<h3>Program: Check if number is multiple of 5</h3>
Enter number: <input id="num"><br><br>
<button >
<p id="result"></p>
<script>
function check() {
let num = Number([Link]("num").value);
if (num % 5 == 0)
[Link]("result").innerHTML = "Multiple of 5";
else
[Link]("result").innerHTML = "Not a multiple of 5";
</script>
</body>
</html>
(vii) Give grades according to score
<!DOCTYPE html>
<html>
<body>
<h3>Program: Give grades according to score</h3>
Enter score: <input id="score"><br><br>
<button Grade</button>
<p id="result"></p>
<script>
function grade() {
let s = Number([Link]("score").value);
if (s >= 90)
[Link]("result").innerHTML = "Grade A";
else if (s >= 75)
[Link]("result").innerHTML = "Grade B";
else if (s >= 50)
[Link]("result").innerHTML = "Grade C";
else
[Link]("result").innerHTML = "Fail";
</script>
</body>
</html>
(viii) Check if divisible by both 3 and 5
<!DOCTYPE html>
<html>
<body>
<h3>Program: Check if number is divisible by both 3 and 5</h3>
Enter number: <input id="num"><br><br>
<button >
<p id="result"></p>
<script>
function check() {
let n = Number([Link]("num").value);
if (n % 3 == 0 && n % 5 == 0)
[Link]("result").innerHTML = "Divisible by both 3 and 5";
else
[Link]("result").innerHTML = "Not divisible by both";
</script>
</body>
</html>
(ix) Access granted if both true
<!DOCTYPE html>
<html>
<body>
<h3>Program: Access granted if isLoggedIn and isAdmin are true</h3>
Is Logged In (true/false): <input id="login"><br>
Is Admin (true/false): <input id="admin"><br><br>
<button Access</button>
<p id="result"></p>
<script>
function access() {
let isLoggedIn = [Link]("login").value === "true";
let isAdmin = [Link]("admin").value === "true";
if (isLoggedIn && isAdmin)
[Link]("result").innerHTML = "Access Granted";
else
[Link]("result").innerHTML = "Access Denied";
</script>
</body>
</html>
(x) Check if eligible to vote
<!DOCTYPE html>
<html>
<body>
<h3>Program: Check if eligible to vote</h3>
Enter age: <input id="age"><br><br>
<button >
<p id="result"></p>
<script>
function vote() {
let age = Number([Link]("age").value);
if (age >= 18)
[Link]("result").innerHTML = "Eligible to vote";
else
[Link]("result").innerHTML = "Not eligible to vote";
</script>
</body>
</html>
(xi) Bitwise AND, OR, XOR
<!DOCTYPE html>
<html>
<body>
<h3>Program: Bitwise AND, OR, XOR</h3>
Enter first number: <input id="a"><br>
Enter second number: <input id="b"><br><br>
<button Result</button>
<p id="result"></p>
<script>
function bit() {
let a = Number([Link]("a").value);
let b = Number([Link]("b").value);
let res = "AND = " + (a & b) + "<br>OR = " + (a | b) + "<br>XOR = " + (a ^ b);
[Link]("result").innerHTML = res;
</script>
</body>
</html>
(xii) Left shift by 4 positions
<!DOCTYPE html>
<html>
<body>
<h3>Program: Left shift number by 4 positions</h3>
Enter number: <input id="num"><br><br>
<button >
<p id="result"></p>
<script>
function shift() {
let num = Number([Link]("num").value);
let result = num << 4;
[Link]("result").innerHTML = "Result = " + result;
</script>
</body>
</html>
(xiii) Factorial of a number
<!DOCTYPE html>
<html>
<body>
<h3>Program: Find factorial of a number</h3>
Enter number: <input id="n"><br><br>
<button Factorial</button>
<p id="result"></p>
<script>
function fact() {
let n = Number([Link]("n").value);
let f = 1;
for (let i = 1; i <= n; i++) f *= i;
[Link]("result").innerHTML = "Factorial = " + f;
</script>
</body>
</html>
(xiv) Print all even numbers between 1 and 100
<!DOCTYPE html>
<html>
<body>
<h3>Program: Print even numbers between 1 and 100</h3>
<button Numbers</button>
<p id="result"></p>
<script>
function even() {
let res = "";
for (let i = 1; i <= 100; i++) {
if (i % 2 == 0) res += i + " ";
[Link]("result").innerHTML = res;
</script>
</body>
</html>
(xv) Sum of numbers from 1 to N
<!DOCTYPE html>
<html>
<body>
<h3>Program: Sum of numbers from 1 to N</h3>
Enter N: <input id="n"><br><br>
<button Sum</button>
<p id="result"></p>
<script>
function sum() {
let n = Number([Link]("n").value);
let s = 0;
for (let i = 1; i <= n; i++) s += i;
[Link]("result").innerHTML = "Sum = " + s;
</script>
</body>
</html>
(xvi) Keep taking input until user types “exit”
<!DOCTYPE html>
<html>
<body>
<h3>Program: Keep taking input until user types exit</h3>
<input id="txt">
<button >
<p id="result"></p>
<script>
let str = "";
function check() {
let val = [Link]("txt").value;
if (val == "exit") {
[Link]("result").innerHTML = "Program ended";
} else {
str += val + " ";
[Link]("result").innerHTML = "You entered: " + str;
[Link]("txt").value = "";
</script>
</body>
</html>
(xvii) Skip 4 and 7 using continue
<!DOCTYPE html>
<html>
<body>
<h3>Program: Print 1–10 but skip 4 and 7</h3>
<button Numbers</button>
<p id="result"></p>
<script>
function skip() {
let res = "";
for (let i = 1; i <= 10; i++) {
if (i == 4 || i == 7) continue;
res += i + " ";
[Link]("result").innerHTML = res;
</script>
</body>
</html>
(xviii) Break when divisible by both 7 and 9
<!DOCTYPE html>
<html>
<body>
<h3>Program: Break when number divisible by both 7 and 9</h3>
<button >
<p id="result"></p>
<script>
function find() {
for (let i = 1; i <= 50; i++) {
if (i % 7 == 0 && i % 9 == 0) {
[Link]("result").innerHTML = "Breaking at " + i;
break;
</script>
</body>
</html>
5. JavaScript Star and Number Pattern Programs
(i)
<!DOCTYPE html>
<html>
<head>
<title>Right-Angled Triangle Pattern</title>
</head>
<body>
<h2>Right-Angled Triangle Pattern</h2>
<pre id="output"></pre>
<script>
// Take input from the user
let n = 5;
let result = "";
for (let i = 1; i <= n; i++) {
for (let j = 1; j <= i; j++) {
result += "* ";
result += "\n";
}
// Display on page
[Link]("output").textContent = result;
</script>
</body>
</html>
(ii)
<!DOCTYPE html>
<html>
<head>
<title>Inverted Right-Angled Triangle</title>
</head>
<body>
<h2>Inverted Right-Angled Triangle</h2>
<pre id="output"></pre>
<script>
// Take input from the user
let n = 5;
let result = "";
for (let i = n; i >= 1; i--) {
for (let j = 1; j <= i; j++) {
result += "* ";
result += "\n";
// Display pattern on the webpage
[Link]("output").textContent = result;
</script>
</body>
</html>
(iii)
<!DOCTYPE html>
<html>
<head>
<title>Left-Aligned Triangle</title>
</head>
<body>
<h2>Left-Aligned Triangle</h2>
<pre id="output"></pre>
<script>
let n = 5;
let result = "";
for (let i = 1; i <= n; i++) {
// Add spaces to shift stars to the right
result += " ".repeat((n - i) * 2);
result += "* ".repeat(i);
result += "\n";
[Link]("output").textContent = result;
</script>
</body>
</html>
(iv)
<!DOCTYPE html>
<html>
<head>
<title>Pyramid Pattern</title>
</head>
<body>
<h2>Pyramid Pattern</h2>
<pre id="output"></pre>
<script>
let n = 5;
let result = "";
for (let i = 1; i <= n; i++) {
let row = "";
row += " ".repeat(n - i); // Spaces to align pyramid center
row += "* ".repeat(i * 2 - 1); // Stars with spacing
result += row + "\n";
// Display on the page
[Link]("output").textContent = result;
</script>
</body>
</html>
(v)
<!DOCTYPE html>
<html>
<head>
<title>Inverted Pyramid Pattern</title>
</head>
<body>
<h2>Inverted Pyramid Pattern</h2>
<pre id="output"></pre>
<script>
let n = 5;
let result = "";
for (let i = n; i >= 1; i--) {
let row = "";
row += " ".repeat(n - i); // Spaces to align stars to center
row += "* ".repeat(i * 2 - 1); // Stars with spacing (odd count)
result += row + "\n";
// Display on the page
[Link]("output").textContent = result;
</script>
</body>
</html>
(vi)
<!DOCTYPE html>
<html>
<head>
<title>Diamond Pattern</title>
</head>
<body>
<h2>Diamond Pattern</h2>
<pre id="output"></pre>
<script>
let n = 5;
let result = "";
// Upper part
for (let i = 1; i <= n; i++) {
let row = "";
row += " ".repeat(n - i); // Center alignment
row += "* ".repeat(2 * i - 1); // Star pattern
result += row + "\n";
// Lower part
for (let i = n - 1; i >= 1; i--) {
let row = "";
row += " ".repeat(n - i); // Center alignment
row += "* ".repeat(2 * i - 1); // Star pattern
result += row + "\n";
// Display on the page
[Link]("output").textContent = result;
</script>
</body>
</html>
(vii)
<!DOCTYPE html>
<html>
<head>
<title>Right Arrow Star Pattern</title>
</head>
<body>
<h2>Right Arrow Star Pattern</h2>
<pre id="output"></pre>
<script>
let n = 5;
let result = "";
// Upper half
for (let i = 1; i <= n; i++) {
result += "*".repeat(i) + "\n";
// Lower half
for (let i = n - 1; i >= 1; i--) {
result += "*".repeat(i) + "\n";
// Display on page
[Link]("output").textContent = result;
</script>
</body>
</html>
(viii)
<!DOCTYPE html>
<html>
<head>
<title>Plus Star Pattern</title>
</head>
<body>
<h2>Plus Star Pattern</h2>
<pre id="output"></pre>
<script>
let n = 5;
let result = "";
let mid = [Link](n / 2) + 1;
for (let i = 1; i <= n; i++) {
let row = "";
for (let j = 1; j <= n; j++) {
// Print star in middle row or middle column
if (i === mid || j === mid) {
row += "* ";
} else {
row += " ";
result += row + "\n";
// Display pattern on the page
[Link]("output").textContent = result;
</script>
</body>
</html>
(ix)
<!DOCTYPE html>
<html>
<head>
<title>Cross Star Pattern</title>
</head>
<body>
<h2>Cross (X) Star Pattern</h2>
<pre id="output"></pre>
<script>
let n = 5;
let result = "";
for (let i = 1; i <= n; i++) {
let row = "";
for (let j = 1; j <= n; j++) {
// Print star on both diagonals
if (i === j || j === (n - i + 1)) {
row += "* ";
} else {
row += " ";
result += row + "\n";
// Display pattern on page
[Link]("output").textContent = result;
</script>
</body>
</html>
(x)
<!DOCTYPE html>
<html>
<head>
<title>Butterfly Star Pattern</title>
</head>
<body>
<h2>Butterfly Star Pattern</h2>
<pre id="output"></pre>
<script>
let n = 5;
let result = "";
// Upper Wings
for (let i = 1; i <= n; i++) {
let row = "*".repeat(i); // Left stars
row += " ".repeat((n - i) * 2); // Center gap
row += "*".repeat(i); // Right stars
result += row + "\n";
// Lower Wings
for (let i = n; i >= 1; i--) {
let row = "*".repeat(i); // Left stars
row += " ".repeat((n - i) * 2); // Center gap
row += "*".repeat(i); // Right stars
result += row + "\n";
// Display pattern on the page
[Link]("output").textContent = result;
</script>
</body>
</html>
(xi)
<!DOCTYPE html>
<html>
<head>
<title>Inverted Left-Angled Triangle</title>
</head>
<body>
<h2>Inverted Left-Angled Triangle Star Pattern</h2>
<pre id="output"></pre>
<script>
let n = 5;
let result = "";
// Inverted left-angled triangle
for (let i = n; i >= 1; i--) {
let row = " ".repeat(n - i) + "*".repeat(i);
result += row + "\n";
[Link]("output").textContent = result;
</script>
</body>
</html>
(xii)
<!DOCTYPE html>
<html>
<head>
<title>Inverted Number Pyramid</title>
</head>
<body>
<h2>Inverted Pyramid of Numbers</h2>
<pre id="p6"></pre>
<script>
let output = "";
let n = 4; // total rows
for (let i = n; i >= 1; i--) {
// Add leading spaces for pyramid shape
for (let s = 0; s < n - i; s++) {
output += " ";
// Print decreasing numbers
for (let j = i; j >= 1; j--) {
output += j + " ";
output += "\n";
[Link]("p6").textContent = output;
</script>
</body>
</html>
(xiii)
<!DOCTYPE html>
<html>
<body>
<script>
let n = 5;
for (let i = 1; i <= n; i++) {
let row = "";
for (let j = 1; j <= i; j++) {
row += j + " ";
[Link](row + "<br>");
</script>
</body>
</html>
4. Program to demonstrate JavaScript Form Events
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Form Events Example</title>
<script>
// onload event
function pageLoaded() {
alert("Page loaded successfully!");
// onsubmit event
function handleSubmit() {
alert("Form submitted successfully!");
return false; // prevents actual submission
// onreset event
function handleReset() {
alert("Form has been reset!");
// onclick event
function handleClick() {
alert("Login button clicked!");
// onmousedown event
function mouseDownEvent() {
[Link]("loginBtn").[Link] = "lightgreen";
// onmouseup event
function mouseUpEvent() {
[Link]("loginBtn").[Link] = "lightblue";
</script>
<style>
body {
background-color: #f3e5f5;
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
form {
background-color: white;
display: inline-block;
padding: 25px 40px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
input[type="text"], input[type="password"] {
width: 250px;
padding: 8px;
margin: 8px 0;
border-radius: 5px;
border: 1px solid #ccc;
input[type="submit"], input[type="reset"], button {
padding: 8px 18px;
border: none;
border-radius: 5px;
background-color: lightblue;
cursor: pointer;
font-weight: bold;
margin: 5px;
}
input[type="submit"]:hover, input[type="reset"]:hover {
background-color: #4fc3f7;
</style>
</head>
<body >
<h2>Student Login Form</h2>
<form handleSubmit()" >
<label>Username:</label><br>
<input type="text" name="username" placeholder="Enter username" required><br>
<label>Password:</label><br>
<input type="password" name="password" placeholder="Enter password" required><br><br>
<input type="submit" value="Login" id="loginBtn"
>
>
>
<input type="reset" value="Reset">
</form>
</body>
</html>
3. Program to demonstrate Dialog Boxes in JavaScript
(i) Alert Dialog Box
<html>
<head>
<script type="text/javascript">
<!--
function Warn() {
alert ("This is a warning message!");
[Link] ("This is a warning message!");
//-->
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type="button" value="Click Me" />
</form>
</body>
</html>
(ii) Confirm Dialog Box
<html>
<head>
<script type="text/javascript">
<!--
function getConfirmation(){
var retVal = confirm("Do you want to continue ?");
if( retVal == true ){
[Link] ("User wants to continue!");
return true;
}else{
[Link] ("User does not want to continue!");
return false;
//-->
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type="button" value="Click Me" />
</form>
</body>
</html>
(iii) Prompt dialog box
<html>
<head>
<script type="text/javascript">
function getValue(){
var retVal = prompt("Enter your name : ", "your name here");
[Link]("You have entered : " + retVal);
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type="button" value="Click Me" />
</form>
</body>
</html>
