JAVA SCRIPT PROGRAMS
1 A . Program for primitive datatypes in javascript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Primitive Datatypes in JavaScript</title>
</head>
<body>
<h1>Primitive Data Types Example</h1>
<script>
// Number data type
let x = 250;
let y = 40.5;
document.write("Value of x: " + x +'<br>');
document.write("Value of y: " + y +'<br>');
// String data type
let str = 'Hello All';
let str1 = "Welcome to all";
document.write("Value of str: " + str +'<br>');
document.write("Value of str1: " + str1 +'<br>');
// Undefined data type
let z;
document.write("Value of z: " + z +'<br>');
// Boolean data type
let bool = true;
document.write("Value of bool: " + bool +'<br>');
// Null data type
let n = null;
document.write("Value of n: " + n +'<br>');
// BigInt data type
let bigNum = 123422227653456n;
document.write(bigNum +'<br>');
</script>
</body>
</html>
b. Program to embedding the external java script
<!DOCTYPE html>
<html>
<head>
<title>Your Web Page</title>
<script src="./script.js" defer></script>
</head>
<body>
<h1>These are some external java script buttons</h1>
<button onclick="Clickme()">Try !</button>
<button onclick="greet()">Click me</button>
<button onclick="ok()">OK</button>
</body>
</html>
c. Program for mathematical operations
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mathematical Operations in JavaScript</title>
<style>
*{
background-color: aquamarine;
}
</style>
</head>
<body style="text-align: left; font-weight: bold;">
<h1>Math Operations in JavaScript</h1>
<script>
var addition = 20 + 3;
var subtraction = 95 - 35;
var multiplication = 12 * 4;
var division = 50 / 4;
var remainder = 11 % 9;
var exponent = 2 ** 2;
document.write('Addition: 20 + 3 = ' + addition + '<br>');
document.write('Subtraction: 95 - 35 = ' + subtraction + '<br>');
document.write('Multiplication: 12 * 4 = ' + multiplication + '<br>');
document.write('Division: 50 / 4 = ' + division + '<br>');
document.write('Remainder: 11 % 9 = ' + remainder + '<br>');
document.write('Exponent: 2 ** 2 = ' + exponent + '<br>');
</script>
</body>
</html>
d. Program for control structures
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Control statements in javascript</title>
</head>
<body style="font-size: 22px;">
<h1 style="text-align: center;">Control structures in JavaScript:</h1>
<script>
document.write('If Statement:<br>');
const num1 = 10;
if (num1 > 0) {
document.write("The number " + num1 + " is positive.<br><br>");
};
document.write('If-Else Statement:<br>');
let num = -10;
if (num > 0)
document.write(num + "The number is positive.");
else
document.write(num + "The number is negative.<br><br>");
document.write('Switch Statement:<br>');
let x = 10
switch (x) {
case 0:
document.write(x + "Number is zero.");
break;
case 1:
document.write(x + "Number is one.");
break;
default:
document.write(x + " is greater than 2.<br><br>");
};
document.write('For Loop:<br>');
for (var i = 0; i <= 20; i++) {
if (i % 5 === 0) {
document.write(i+"<br>");
}
};
</script>
</body>
</html>
e. Program for Popup boxes alert confirm and prompt box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>JavaScript Alert</h1>
<h3>This is an Alert box</h3>
<button onclick="myFunction()">Click here</button>
<br>
<h3> This is an Cofirm box</h3>
<button onclick="confirm()">Try it</button>
<br>
<h3> This is an Prompt box</h3>
<button onclick="ok()">Try it</button>
<p id="demo"></p>
<p id="demo2"></p>
<script>
function myFunction() {
var txt;
if (confirm("Press a button!")) {
txt = "You pressed OK!";
} else {
txt = "You pressed Cancel!";
}
document.getElementById("demo").innerHTML = txt;
}
function myFunction() {
alert("I am an alert box!");
}
function ok() {
let text;
let person = prompt("Please enter your name:", "");
if (person == null || person == "") {
text = "User cancelled the prompt.";
} else {
text = "Hello you clicked ok ";
}
document.getElementById("demo2").innerHTML = text;
}
</script>
</body>
</html>
f. Program for functions variable with local and global scope
Local scope:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript scope</title>
</head>
<body>
<h2>JavaScript Scope</h2>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
myFunction();
function myFunction() {
let carName = "Volvo";
document.getElementById("demo1").innerHTML = typeof carName + " " + carName;
}
document.getElementById("demo2").innerHTML = typeof carName;
</script>
</body>
</html>
Global scope:
<body>
<p id="demo3"></p>
<script>
let carName = "Volvo";
myFunction();
function myFunction() {
document.getElementById("demo3").innerHTML = "I can display " + carName;
}
</script>
g. Program to create object insert and delete properties
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Object properties</title>
</head>
<body>
<h1>Object properties</h1>
<p>Add a new property to an existing object:</p><br>
<p>Deleting object properties.</p>
<p id="demo"></p>
//deleting
<p id="demo2"></p>
<script>
{
const person = {
firstname: "John",
lastname: "smith",
};
person.age = 45;
document.getElementById("demo").innerHTML =
person.firstname + " is " + person.age + " Years old.";
}
{
// deleting object
const person = {
firstname: "John",
lastname: "smith",
age: 50,
}
;
delete person.age;
document.getElementById("demo2").innerHTML =
person.firstname + " is " + person.age + " years old.";
}
</script>
</body>
</html>
h. Program to working with methods and properties of array objects.
2.
