<!doctype html>
<html>
<head>
<title> Welcome to JS! </title>
<script type=”text/javascript”>
//JS Variables
const max = 10;
let i = 10;
var x = 5;
/* loop and conditions */
for(x = 1; x <= 10; x++)
{
if(x%2 ==0)
document.write(‘The value of x is =’+x+'<br>’);
}
var x = ‘Text’;
//JS Object
const person = {
firstName: “John”,
lastName: “Doe”,
age: 50,
eyeColor: “blue”
};
document.write(“<br> Age =”+ person.age );
//JS Array
const cars = [“Saab”, “Volvo”, “BMW”];
const cars2 = new Array(“Saab”, “Volvo”, “BMW”);
document.write(“<br> First element:”+cars[0]);
document.write(“<br> No. of Item:”+cars.length);
//Array Sorting
const fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
document.write(“<br> Ascending Sort: “+fruits.sort());
document.write(“<br> Descending: “+fruits.reverse());
// foreach iteration
var numbers = [45, 4, 9, 16, 25];
numbers[’20’] = ‘Test’;
let txt = “”;
numbers.forEach(myFunction);
function myFunction(value, index, array) {
txt += index+’=>’+value + “, <br>”;
}
document.write(“<br>Foreach: “+txt);
//String operations
let text = “Please locate where ‘locate’ occurs!”;
let index = text.indexOf(“locate”);
document.write(“<br>Index: “+index);
//Number methods
var x = ‘2023’;
x = parseInt(x) + 5;
document.write(“<br>Sum: “+x);
//JS Functions
//alert(‘Welcome to JS!’);
function change_btn(){
//document.write(‘<textarea rows=”5″> </textarea>’);
document.getElementById(“demo”).innerHTML = ‘<textarea rows=”5″> </textarea>’;
}
function change_color(){
document.getElementById(‘h1’).style.color = ‘green’;
}
</script>
</head>
<body>
<header>
<h1 onmouseover=”change_color();” id=”h1″> DCC CSE Lab </h1>
<nav>
<a href=””>Home</a>
<a href=””>About</a>
</nav>
</header>
<article>
<h2 class=”head”>Adding JS practice</h2>
<button onclick=”change_btn();”>Click here</button>
<div id=”demo”></div>
<p> Some text about applying JS to html webpage. </p>
</article>
<footer>
<h2 id=”comp”> MyWeb</h2>
<p> Footer links </p>
</footer>
</body>
</html>
