Scribd
Upload
35 views18 pages

MIT 22043 WAD JavaScript Practice Code 19 20 2022

Uploaded by

Shibly Hasan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
35 views18 pages

MIT 22043 WAD JavaScript Practice Code 19 20 2022

Uploaded by

Shibly Hasan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 18

South Eastern University of Sri Lanka

Faculty of Management and Commerce


Department of Management and Information Technology

MIT 22043 Web Application Development


Semester - II, Academic Year – 2019 /2020

JS Practice Code
Prepared by Dr. MBM. Irshad, PhD (ICT)
Duration: 2 Hours

1.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript new Date()</h2>
<p>Using new Date(), creates a new date object with the current date and
time:</p>
<p id="demo"></p>
<script>
const d = new Date();
document.getElementById("demo").innerHTML = d;
</script>
</body>
</html>

2. <!DOCTYPE html>
<html>
<body>

<h2>JavaScript const</h2>

1
<p id="demo"></p>
<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>

3.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Storing Single Values</title>
</head>
<body>
<script>
// Creating variables
var color1 = "Red";
var color2 = "Green";
var color3 = "Blue";

// Printing variable values


document.write(color1 + "<br>");
document.write(color2 + "<br>");
document.write(color3);
</script>
</body>
</html>

4.
<!DOCTYPE html>

2
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Access Individual Elements of an Array</title>
</head>
<body>
<script>
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];

document.write(fruits[0] + "<br>"); // Prints: Apple


document.write(fruits[1] + "<br>"); // Prints: Banana
document.write(fruits[2] + "<br>"); // Prints: Mango
document.write(fruits[fruits.length - 1]); // Prints: Papaya
</script>
</body>
</html>

5.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Assignment Operators</title>
</head>
<body>
<script>
var x; // Declaring Variable

x = 10;
document.write(x + "<br>"); // Prints: 10
x = 20;
x += 30;

3
document.write(x + "<br>"); // Prints: 50
x = 50;
x -= 20;
document.write(x + "<br>"); // Prints: 30
x = 5;
x *= 25;
document.write(x + "<br>"); // Prints: 125
x = 50;
x /= 10;
document.write(x + "<br>"); // Prints: 5
x = 100;
x %= 15;
document.write(x); // Prints: 10
</script>
</body>
</html>

6.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Join Two or More Strings</title>
</head>
<body>
<script>
var hello = "Hello";
var world = "World";
var greet = hello + " " + world;
document.write(greet + "<br>"); // Prints: Hello World
var wish = "Happy";
wish += " New Year";

4
document.write(wish); // Prints: Happy New Year
</script>
</body>
</html>

7.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Do-While Loop</title>
</head>
<body>
<script>
var i = 1;
do {
document.write("<p>The number is " + i + "</p>");
i++;
}
while(i <= 5);
</script>
</body>
</html>

8.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript For Loop</title>
</head>
<body>

5
<script>
for(var i=1; i<=5; i++) {
document.write("<p>The number is " + i + "</p>");
}
</script>
</body>
</html>

9.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Iterate Over an Array Using For Loop</title>
</head>
<body>
<script>
// An object with some properties
var person = {"name": "Clark", "surname": "Kent", "age": "36"};

// Loop through all the properties in the object


for(var prop in person) {
document.write("<p>" + prop + " = " + person[prop] + "</p>");
}
</script>
</body>
</html>

10.
<!DOCTYPE html>
<html lang="en">
<head>

6
<meta charset="utf-8">
<title>JavaScript While Loop</title>
</head>
<body>
<script>
var i = 1;
while(i <= 5) {
document.write("<p>The number is " + i + "</p>");
i++;
}
</script>
</body>
</html>

11.
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Properties</h2>

<p>The length property returns the length of a string:</p>

<p id="demo"></p>

<script>
let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo").innerHTML = text.length;
</script>

</body>
</html>

7
12.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript typeof Operator</title>
</head>
<body>
<script>
// Numbers
document.write(typeof 15 + "<br>"); // Prints: "number"
document.write(typeof 42.7 + "<br>"); // Prints: "number"
document.write(typeof 2.5e-4 + "<br>"); // Prints: "number"
document.write(typeof Infinity + "<br>"); // Prints: "number"
document.write(typeof NaN + "<br>"); // Prints: "number". Despite
being "Not-A-Number"

// Strings
document.write(typeof '' + "<br>"); // Prints: "string"
document.write(typeof 'hello' + "<br>"); // Prints: "string"
document.write(typeof '12' + "<br>"); // Prints: "string". Number
within quotes is document.write(typeof string

// Booleans
document.write(typeof true + "<br>"); // Prints: "boolean"
document.write(typeof false + "<br>"); // Prints: "boolean"

// Undefined
document.write(typeof undefined + "<br>"); // Prints: "undefined"
document.write(typeof undeclaredVariable + "<br>"); // Prints:
"undefined"

8
// Null
document.write(typeof Null + "<br>"); // Prints: "object"

// Objects
document.write(typeof {name: "John", age: 18} + "<br>"); // Prints:
"object"

// Arrays
document.write(typeof [1, 2, 4] + "<br>"); // Prints: "object"

// Functions
document.write(typeof function(){}); // Prints: "function"
</script>
</body>
</html>

13.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Search an Array for a Specific Value</title>
</head>
<body>
<script>
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];

document.write(fruits.indexOf("Apple") + "<br>"); // Prints: 0


document.write(fruits.indexOf("Banana") + "<br>"); // Prints: 1
document.write(fruits.indexOf("Pineapple")); // Prints: -1
</script>
</body>

9
</html>

14.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Sort an Array Alphabetically</title>
</head>
<body>
<script>
var fruits = ["Banana", "Orange", "Apple", "Papaya", "Mango"];
var sorted = fruits.sort();

document.write(fruits + "<br>"); // Outputs:


Apple,Banana,Mango,Orange,Papaya
document.write(sorted); // Outputs: Apple,Banana,Mango,Orange,Papaya
</script>
</body>
</html>

15.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Handling the Mouseover Event</title>
</head>
<body>
<button type="button" onmouseover="alert('You have placed mouse
pointer over a button!');">Place Mouse Over Me</button>
<a href="#" onmouseover="alert('You have placed mouse pointer over a
link!');">Place Mouse Over Me</a>

10
</body>
</html>
16.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Handling the Mouseout Event</title>
</head>
<body>
<button type="button" onmouseout="alert('You have moved out of the
button!');">Place Mouse Inside Me and Move Out</button>
<a href="#" onmouseout="alert('You have moved out of the
link!');">Place Mouse Inside Me and Move Out</a>
</body>
</html>

17.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Handling the Submit Event</title>
</head>
<body>
<form action="/examples/html/action.php" method="post"
onsubmit="alert('Form data will be submitted to the server!');">
<label>First Name:</label>
<input type="text" name="first-name" required>
<input type="submit" value="Submit">
</form>
</body>
</html>

11
18.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Handling the Change Event</title>
</head>
<body>
<select onchange="alert('You have changed the selection!');">
<option>Select</option>
<option>Male</option>
<option>Female</option>
</select>
<p><strong>Note:</strong> Select any option in select box to see
how it works.</p>
</body>
</html>

19.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Local Variable</title>
</head>
<body>
<script>
// Defining function
function greetWorld() {
var greet = "Hello World!";
document.write(greet);

12
}

greetWorld(); // Prints: Hello World!

document.write(greet); // Uncaught ReferenceError: greet is not


defined
</script>
</body>
</html>

20.
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Global Variable</title>
</head>
<body>
<script>
var greet = "Hello World!";

// Defining function
function greetWorld() {
document.write(greet);
}

greetWorld(); // Prints: Hello World!


document.write("<br>");
document.write(greet); // Prints: Hello World!
</script>
</body>
</html>

13
21.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Add Parameters to a Function</title>
</head>
<body>
<script>
// Defining function
function displaySum(num1, num2) {
var total = num1 + num2;
document.write(total);
}

// Calling function
displaySum(6, 20); // Prints: 26
document.write("<br>");
displaySum(-5, 17); // Prints: 12
</script>
</body>
</html>

22.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Find the Maximum and Minimum Value in an
Array</title>
</head>

14
<body>
<script>
var numbers = [3, -7, 10, 8, 15, 2];

// Defining function to find maximum value


function findMax(array){
return Math.max.apply(null, array);
}

// Defining function to find minimum value


function findMin(array){
return Math.min.apply(null, array);
}

document.write(findMax(numbers) + "<br>"); // Outputs: 15


document.write(findMin(numbers)); // Outputs: -7
</script>
</body>
</html>

23.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Sort an Array of Objects</title>
</head>
<body>
<script>
var persons = [
{ name: "Harry", age: 14 },
{ name: "Ethan", age: 30 },

15
{ name: "Peter", age: 21 },
{ name: "Clark", age: 42 },
{ name: "Alice", age: 16 }
];

// Sort by age
persons.sort(function (a, b) {
return a.age - b.age;
});

console.log(persons);

// Sort by name
persons.sort(function(a, b) {
var x = a.name.toLowerCase(); // ignore upper and lowercase
var y = b.name.toLowerCase(); // ignore upper and lowercase
if(x < y) {
return -1;
}
if(x > y) {
return 1;
}
// names must be equal
return 0;
});

// Loop through all the elements in the array


for(var i in persons) {
// Loop through all the properties in the object
for(var prop in persons[i]) {
document.write(prop + ": " + persons[i][prop] + "<br>");
}

16
document.write("<hr>");
}
</script>
</body>
</html>

24.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Convert a String to Uppercase Characters</title>
</head>
<body>
<script>
var str = "Hello World!";
var result = str.toUpperCase();
document.write(result); // Prints: HELLO WORLD!
</script>
</body>
</html>

25.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Convert a String to Lowercase Characters</title>
</head>
<body>
<script>
var str = "Hello World!";

17
var result = str.toLowerCase();
document.write(result); // Prints: hello world!
</script>
</body>
</html>

26.
<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>


<p>My first paragraph.</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>

18

You might also like