Scribd
Upload
12 views48 pages

FSP Js Lab Exp - 100105

Uploaded by

Huzef Attar
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
12 views48 pages

FSP Js Lab Exp - 100105

Uploaded by

Huzef Attar
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/ 48

Diploma in Computer Engg.

Java Script Practical (22519)

CSS Lab Practical

Pathan Firozkhan S. 1 Jamia Polytehnic, Akkalkuwa


Diploma in Computer Engg. Java Script Practical (22519)

Exp 1 : Simple javascript with HTML for arithmetic expression


<!DOCTYPE html>
<html lang="en">
<head>
<title>Exp 1</title>
</head>
<body>
<h2>Arithmetic Expression</h2>
<script>
const num1 = parseInt(prompt('Enter the first number '));
const num2 = parseInt(prompt('Enter the second number '));
var sum;
//add two numbers
sum = num1 + num2;
console.log(`The Addition of ${num1} and ${num2} is ${sum}`);
document.write("The Addition of "+num1+" and " +num2+" is "+sum+"<br>");
//sub two numbers
sum = num1 - num2;
console.log(`The Subtraction of ${num1} and ${num2} is ${sum}`);
document.write("The Subtraction of "+num1+" and " +num2+" is "+sum+"<br>");
//mult two numbers
sum = num1 * num2;
console.log(`The Multiplication of ${num1} and ${num2} is ${sum}`);
document.write("The Multiplication of "+num1+" and " +num2+" is "+sum+"<br>");
//div two numbers
sum = num1 / num2;
console.log(`The Divisison of ${num1} and ${num2} is ${sum}`);
document.write("The Divisison of "+num1+" and " +num2+" is "+sum+"<br>");
</script>
</body>
</html>

Pathan Firozkhan S. 2 Jamia Polytehnic, Akkalkuwa


Diploma in Computer Engg. Java Script Practical (22519)

Program Output :
Screen accepting user input for First No.

Screen accepting user input for Second No.

Result :

(To see the output in the Console, right click mouse button on the browser screen and go to inspect
option)

Pathan Firozkhan S. 3 Jamia Polytehnic, Akkalkuwa


Diploma in Computer Engg. Java Script Practical (22519)

Exp 2 : Develop JS decision making and looping statement


2.1 Decision making statements
<!DOCTYPE html>
<html lang="en">
<head>
<title>Exp 2.1</title>
</head>
<body>
<h2>Decision Making Statement</h2>
<h3>Largest of 3 numbers</h3>
<script>
const num1 = parseFloat(prompt("Enter first number: "));
const num2 = parseFloat(prompt("Enter second number: "));
const num3 = parseFloat(prompt("Enter third number: "));
let largest;
// check the condition
if (num1 >= num2 && num1 >= num3) {
largest = num1;
} else if (num2 >= num1 && num2 >= num3) {
largest = num2;
} else {
largest = num3;
}
// display the result
console.log("The largest number is " + largest);
document.write("First number is " + num1 + "<br>");
document.write("Secong number is " + num2 + "<br>");
document.write("Third number is " + num3 + "<br>");
document.write("Largest of given number is " + largest);
</script>
</body>
</html>

Pathan Firozkhan S. 4 Jamia Polytehnic, Akkalkuwa


Diploma in Computer Engg. Java Script Practical (22519)

Program Output :

Pathan Firozkhan S. 5 Jamia Polytehnic, Akkalkuwa


Diploma in Computer Engg. Java Script Practical (22519)

2.2 Looping statements


<!DOCTYPE html>
<html lang="en">
<head>
<title>Exp 2.2</title>
</head>
<body>
<h2>Looping Statement</h2>
<h3>Program to check if given number is prime or not</h3>
<script>
const number = parseInt(prompt("Enter a positive number: "));
let isPrime = true;
if (number === 1)
{
console.log("1 is neither prime nor composite number.");
}
else if (number > 1){
for (let i = 2; i < number; i++)
{
if (number % i == 0)
{ isPrime = false;
break;
}
}
if (isPrime)
{
console.log(`${number} is a prime number`);
document.write("Given number " + number + "is prime" + "<br>");
}
else
{
console.log(`${number} is a not prime number`);
document.write("Given number " + number + "is not prime" + "<br>");
}
}
else
{
console.log("The number is not a prime number.");
Pathan Firozkhan S. 6 Jamia Polytehnic, Akkalkuwa
Diploma in Computer Engg. Java Script Practical (22519)

document.write("Given number " + number + "is not prime" + "<br>");


}
</script>
</body>
</html>
Program Output :

Pathan Firozkhan S. 7 Jamia Polytehnic, Akkalkuwa


Diploma in Computer Engg. Java Script Practical (22519)

Exp 3 : Develop JS to implement Array functionalities


<!DOCTYPE html>
<html lang="en">
<head>
<title>Exp 3</title>
</head>
<body>
<h2>Array Functionalities</h2>
<script>
document.write("<b>Initializing and finding length of array<br></b>");
var arr = new Array(1, 21, 13, 4, 5);
for (let i = 0; i < arr.length; i++) {
document.write("arr[" + i + "] =" + arr[i] + "<br>");
}
document.write("Length of array is " + arr.length);
document.write("<b><br>Adding element using push() method<br></b>");
var number = 100;
arr.push(number);
for (let i = 0; i < arr.length; i++) {
document.write(arr[i] + " ");
}
document.write("<b><br>Adding element using unshift() method<br></b>");
number = 1000;
arr.unshift(number);
for (let i = 0; i < arr.length; i++) {
document.write(arr[i] + " ");
}
document.write("<b><br>Sorting array elements<br></b>");
arr.sort(function(a, b) { return a - b });
for (let i = 0; i < arr.length; i++) {
document.write(arr[i] + " ");
}
document.write("<b><br>Combining string using concat() and join() method<br></b>");
var str = new Array("one", "two", "three");
var s1 = str.join(); //adds all element of an array using default (,) separator
document.write(s1 + "<br>");
var s2 = str.join('--'); //adds element using given (--) separator
document.write(s2 + "<br>");
Pathan Firozkhan S. 8 Jamia Polytehnic, Akkalkuwa
Diploma in Computer Engg. Java Script Practical (22519)

var msg = new Array(" Ten", " Eleven", " Twelve");


var s3 = str.concat(msg); // joins two or more arrays
document.write(s3 + "<br>");
document.write("<b>Splitting array using slice() method<br></b>");
for (let i = 0; i < arr.length; i++) {
document.write(arr[i] + " ");
}
var spl = arr.slice(3, 7);
document.write("<br>After slice method<br>" + spl + "<br>");
document.write("<b>Removing array element using shift() and pop() method<br></b>");
for (let i = 0; i < arr.length; i++) {
document.write(arr[i] + " ");
}
arr.shift(); //removes first element from array
document.write("<br>After shift() method<br>");
for (let i = 0; i < arr.length; i++) {
document.write(arr[i] + " ");
}
arr.pop(); //removes last element from array
document.write("<br>After pop() method<br>");
for (let i = 0; i < arr.length; i++) {
document.write(arr[i] + " ");
}
</script>
</body>
</html>

Pathan Firozkhan S. 9 Jamia Polytehnic, Akkalkuwa


Diploma in Computer Engg. Java Script Practical (22519)

Program Output :

Pathan Firozkhan S. 10 Jamia Polytehnic, Akkalkuwa


Diploma in Computer Engg. Java Script Practical (22519)

Exp 4 : Develop JS to implement Functions


//Passing argument and returning value from function
<!DOCTYPE html>
<head> <title>Exp 4</title> </head>
<body>
<h3>Program to find factorial of numbers using recursive function</h3>
<script>
function factorial(x) // passing argument
{ if (x == 0) {
return 1;
}
else {
return x * factorial(x - 1);
}
}
const num = prompt('Enter a positive number: ');
if (num >= 0) {
const result = factorial(num); //function call
document.write("<br>The factorial of " + num + " is " + result + "<br>");
console.log(`The factorial of ${num} is ${result}`);
} else {
document.write("<br>Enter positive number<br>");
}
</script></body>
</html>
Program Output :

Pathan Firozkhan S. 11 Jamia Polytehnic, Akkalkuwa


Diploma in Computer Engg. Java Script Practical (22519)

Exp 4.1 : Calling function from HTML


<!DOCTYPE html>
<html lang="en">
<head>
<title>Exp 4.1</title>
<script>
function welcome() {
alert("Function call when web page is loaded");
}
function goodbye() {
alert("Function call when web page is closed");
}
</script>
</head>
<body onload="welcome()" onunload="goodbye()">
<h3>Calling function from HTML</h3>
</body>
</html>
Program Output :

Pathan Firozkhan S. 12 Jamia Polytehnic, Akkalkuwa


Diploma in Computer Engg. Java Script Practical (22519)

Exp 5 : Develop JS to implement Strings


<!DOCTYPE html>
<html lang="en">
<head>
<title>Exp 5</title>
</head>
<body>
<h3>Check Palindrome using In-built String function</h3>
<script>
function checkPalindrome(str) {
// convert string to an array
const arrayValues = string.split('');
// reverse the array values
const reverseArrayValues = arrayValues.reverse();
// convert array to string
const reverseString = reverseArrayValues.join('');
if (string == reverseString) {
document.write("<br>It is Palindrome string " + string + "<br>");
console.log('It is a palindrome');
} else {
document.write("<br>It is not Palindrome string " + string + "<br>");
console.log('It is not a palindrome');
}
}
//take input
const string = prompt('Enter a string: ');
checkPalindrome(string);
</script>
</body>
</html>

Pathan Firozkhan S. 13 Jamia Polytehnic, Akkalkuwa


Diploma in Computer Engg. Java Script Practical (22519)

Program Output :

Pathan Firozkhan S. 14 Jamia Polytehnic, Akkalkuwa


Diploma in Computer Engg. Java Script Practical (22519)

Exp 5.1 : Develop JS to implement Strings


<!DOCTYPE html>
<html lang="en">
<head> <title>Exp 5.1</title> </head>
<body>
<h3>String function in JS</h3>
<script>
var txt = "jamia polytechnic akkalkuwa";
document.write("Length of " + txt + " is " + txt.length + "<br>");
//Joining of string
var str1 = new String("jamia");
var str2 = new String("Polytechnic");
var str3 = new String("Akkalkuwa");
var s1 = str1 + str2;
document.write("s1 = " + s1 + "<br>");
var s2 = s1.concat(str3);
document.write("s2 = " + s2 + "<br>");
//Retriving character from position
document.write("str1 = " + str1 + " CharAt(2) is " + str1.charAt(2) + "<br>");
document.write("str2 = " + str2 + " CharAt(5) is " + str2.charAt(5) + "<br>");
//Retriving position of character
document.write("str1 = " + str1 + " IndexOF('m') is " + str1.indexOf('m') + "<br>");
document.write("str2 = " + str2 + " IndexOF('t') is " + str2.indexOf('t') + "<br>");
document.write("txt = " + txt + " search('jamia') is at location " + txt.search('jamia')+ "<br>");
//Dividing text
var str = "How are you doing today?"; var res = str.split(" ");
document.write("str = " + str + " text separated by (,) " + res + "<br>");
var res = str.split("o");
document.write("str = " + str + " text separated by ('o') " + res + "<br>");
//Copying a substring
var res = s1.substr(5,8);
document.write("s1 = " + s1 + " substring is " + res + "<br>");
//Converting string to number
var size='42inch'; var no = parseInt(size,10);
document.write("size = " + size + " to number is " + no + "<br>");
var size='3.14inch'; var no = parseFloat(size);
document.write("size = " + size + " to float is " + no + "<br>");
document.write("Number('1234') = " + Number('1234') + "<br>");
Pathan Firozkhan S. 15 Jamia Polytehnic, Akkalkuwa
Diploma in Computer Engg. Java Script Practical (22519)

//Converting number to string


var num=100;
document.write("Number is "+num+" Its datatype is "+typeof(num)+ "<br>");
s1=num.toString();
document.write("Number is "+num+" Its datatype is "+typeof(s1)+ "<br>");
//Changing case of character
s1 = str1.toUpperCase();
document.write("String is "+str1+" change to upper case "+s1+ "<br>");
str1 = s1.toLowerCase();
document.write("String is "+s1+" change to lower case "+str1+ "<br>");
//Finding unicode ot character
document.write("String is "+str1+" unicode of j is "+str1.charCodeAt(4)+ "<br>");
document.write("String is "+str2+" unicode of y is "+str2.charCodeAt(3)+ "<br>");
var name = String.fromCharCode(106,97,109,105,97)
document.write("String is "+name+ "<br>");
</script></body></html>
Program Output :

Pathan Firozkhan S. 16 Jamia Polytehnic, Akkalkuwa


Diploma in Computer Engg. Java Script Practical (22519)

Exp 6 : Create a web page using form elements


<!DOCTYPE html>
<head> <title>Exp 6</title> </head>
<body> <form action="">
<h3>Form Elements</h3>
<fieldset>
<legend>Personalia Information:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"><br>
<label for="addr">Enter address:</label><br>
<textarea name="addr" rows="3" cols="30"></textarea><br>
<label for="pin">Pincode:</label>
<input type="number" id="pin" name="pin" max="6"><br>
<label for="gender">Enter gender:</label><br>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label><br>
<label for="phone">Enter mobile number:</label><br>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{5}"><br>
<label for="birthday">Birthday:</label><br>
<input type="date" id="birthday" name="birthday"><br>
<label for="email">Enter your email:</label><br>
<input type="email" id="email" name="email"><br>
<label for="hobbi">Hobbies you like:</label><br>
<input type="checkbox" id="h1" name="h1" value="Reading">
<label for="vehicle1"> Reading</label><br>
<input type="checkbox" id="h2" name="h2" value="Playing">
<label for="vehicle2"> Playing Games</label><br>
<input type="checkbox" id="h3" name="h3" value="Prog">
<label for="vehicle3"> Programming</label><br>
<label for="favcolor">Select your favorite color:</label><br>
<input type="color" id="favcolor" name="favcolor"><br>
<label for="year">Admission in Year :</label>
Pathan Firozkhan S. 17 Jamia Polytehnic, Akkalkuwa
Diploma in Computer Engg. Java Script Practical (22519)

<select id="year" name="year">


<option value="fy">FY</option> <option value="sy">SY</option>
<option value="ty">TY</option>
</select><br>
<label for="branch">Admission in Branch :</label>
<select id="br" name="br">
<option value="ae">Automobile</option> <option value="ce">Civil</option>
<option value="co">Computer</option> <option value="ee">Electrical</option>
<option value="me">Mechanical</option>
</select><br>
<label for="myfile">Attach a file:</label>
<input type="file" id="myfile" name="myfile"><br>
<button type="button" onclick="alert('Want to confrim')">Confirm</button>
<input type="reset">
</fieldset>
</form></body></html>
Program Output :

Pathan Firozkhan S. 18 Jamia Polytehnic, Akkalkuwa


Diploma in Computer Engg. Java Script Practical (22519)

Exp 7 : Create a web page to implement Form Event – I


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exp 7</title>
<script>
function myFunction1() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
function myFunction2() {
var x = document.getElementById("name");
x.value = x.value.toLowerCase();
}
function myFunction3(x) {
x.style.background = "yellow";
}
function myFunction4() {
document.getElementById("demo").innerHTML = "You selected some text";
}
function myFunction5() {
alert("You pressed a key inside the input field");
}
function myFunction6() {
var x = document.getElementById("sname");
x.value = x.value.toUpperCase();
}
function color(color) {
document.forms[0].myInput.style.background = color;
}
function confirmInput() {
fname = document.forms[0].fname.value;
alert("Hello " + fname + "! You will now be redirected to www.jamiapolytechnic.com");
}
function displayDate() {
document.getElementById("demo1").innerHTML = Date();
}
Pathan Firozkhan S. 19 Jamia Polytehnic, Akkalkuwa
Diploma in Computer Engg. Java Script Practical (22519)

function myFunction7() {
document.getElementById("demo2").innerHTML = "Welcome to Jamia Polytechnic";
}
function myFunction8() {
document.getElementById("demo3").innerHTML = "Welcome to Computer Dept";
}
</script>
</head>
<body>
<h3>Input Form Events</h3>
Enter your name: <input type="text" id="fname" onblur="myFunction1()"><br>
When you leave the input field, a event onblur is triggered which transforms the input text to upper
case.<br>
Enter your name: <input type="text" id="name" onchange="myFunction2()"><br>
When you leave the input field, a event onchange is triggered which transforms the input text to lower
case.<br>
Enter your name: <input type="text" onfocus="myFunction3(this)"><br>
When the input field gets focus, a event onfocus is triggered which changes the background-color.<br>
Enter some text: <input type="text" value="Hello world!" onselect="myFunction4()">
<p id="demo"></p>
<form>
Write a message:
<input type="text" onkeydown="color('yellow')" onkeyup="color('white')" name="myInput">
</form><br>
<form onsubmit="confirmInput()" action="https://www.jamiapolytechnic.com/">
Enter your name: <input id="fname" type="text" size="20">
<input type="submit"><br>
When we click on submit, an onsubmit event is triggered which redirect to assign website.<br>
</form>
<br>A onkeydown event is triggered when the user is pressing a key in the input field.<br>
Enter some text:<input type="text" onkeydown="myFunction5()"><br>
A onkeydown event is triggered when the user releases a key in the input field. The function
transforms the character to upper case.<br>
Enter your name: <input type="text" id="sname" onkeyup="myFunction6()"><br>
<h3>Click Form Events</h3>
<p id="demo1">This is a paragraph.</p>
<button type="button" onclick="displayDate()">Display Date</button>
<br>Click the button to trigger onclick function.<br>

Pathan Firozkhan S. 20 Jamia Polytehnic, Akkalkuwa


Diploma in Computer Engg. Java Script Practical (22519)

<button onclick="myFunction7()">Click me</button>


<p id="demo2"></p>
<p ondblclick="myFunction8()">Doubleclick this paragraph to trigger a function.</p>
<p id="demo3"></p>
</body>
</html>
Program Output :

Pathan Firozkhan S. 21 Jamia Polytehnic, Akkalkuwa


Diploma in Computer Engg. Java Script Practical (22519)

Exp 8 : Create a web page to implement Form Event – II


<!DOCTYPE html>
<html lang="en">
<head>
<title>Exp 8</title>
<script>
function myFunction(elmnt, clr) {
elmnt.style.color = clr; }
function whichElement(e) {
var targ;
if (!e) {
var e = window.event; }
if (e.target) {
targ = e.target;
} else if (e.srcElement) {
targ = e.srcElement; }
var tname;
tname = targ.tagName;
alert("You clicked on a " + tname + " element.");
}
function myFunction(e) {
x = e.clientX;
y = e.clientY;
coor = "Coordinates: (" + x + "," + y + ")";
document.getElementById("demo").innerHTML = coor }
function clearCoor() {
document.getElementById("demo").innerHTML = ""; }
function bigImg(x) {
x.style.height = "50px";
x.style.width = "70px"; }
function normalImg(x) {
x.style.height = "150px";
x.style.width = "170px"; }
</script>
</head>
<body onmousedown="whichElement(event)">
<h3 onmouseover="style.color='red'" onmouseout="style.color='black'">Mouse Events</h3>
<p onmousedown="myFunction(this,'red')" onmouseup="myFunction(this,'green')">
Pathan Firozkhan S. 22 Jamia Polytehnic, Akkalkuwa
Diploma in Computer Engg. Java Script Practical (22519)

Click the text to change the color. A function, with parameters, is triggered when the mouse button is
pressed down,<br> and again, with other parameters, when the mouse button is released.</p>
Click somewhere in the document. An alert box will alert the name of the element you clicked on.
<h3>This is a heading</h3>
<img border="0" src="img1.jpg" alt="Nature" width="50" height="70">
<div id="coordiv" style="width:199px;height:99px;border:1px solid"
onmousemove="myFunction(event)" onmouseout="clearCoor()"></div>
<p>Mouse over the rectangle above, and get the coordinates of your mouse pointer.</p>
<p id="demo"></p>
Moves the mouse pointer over the image.<br>
<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="img1.jpg"
alt="Nature" width="50" height="70">
</body>
</html>
Program Output :

Pathan Firozkhan S. 23 Jamia Polytehnic, Akkalkuwa


Diploma in Computer Engg. Java Script Practical (22519)

Exp 9 : Develop a web page using intrinsic javascript function


<!DOCTYPE html>
<html>
<head>
<title>Exp 8.1</title>
<script>
function changeText(id) {
id.innerHTML = "Ooops!"; }
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
function todis() {
var text = document.getElementById("mytext");
if ('disabled' in text) {
text.disabled = !text.disabled; }
}
</script>
</head>
<body>
<h1 onclick="changeText(this)">Click on this text!</h1>
<p>Click the button to display the date.</p>
<button onclick="displayDate()">The time is?</button>
<p id="demo"></p>
<form action="" name="myform">
First Name : <input type="text" name="fname"><br>
Last Name : <input type="text" name="lname"><br>
<img src="submit1.jpg" width="100" height="100" onclick="document.forms.myform.submit()">
<img src="reset1.jpg" width="100" height="100" onclick="document.forms.myform.reset()">
</form>
<input type="text" id="mytext" disabled="disabled" value="Disable value">
<input type="button" onclick="todis();" value="Change stage">
</body>
</html>

Pathan Firozkhan S. 24 Jamia Polytehnic, Akkalkuwa


Diploma in Computer Engg. Java Script Practical (22519)

Program Output :

Pathan Firozkhan S. 25 Jamia Polytehnic, Akkalkuwa


Diploma in Computer Engg. Java Script Practical (22519)

Exp 9 : Develop a web page for creating session and persistent cookies. Observer the effect with
Browser cookie setting.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Exp 10</title>
<h3>Creating and Reading cookie</h3>
<script>
function setCookie() {
var name = document.getElementById('person').value
document.cookie = "name=" + name + ";"
alert("Cookie Created")
}
function readCookie() {
var cookie = document.cookie
var panel = document.getElementById('panel')
if (cookie == "")
panel.innerHTML = "Cookie not found"
else
panel.innerHTML = cookie
}
</script>
</head>
<body>
<form name="myForm">
Enter your name <input type="text" id="person" /><br />
<input type="button" value="Set Cookie" onclick="setCookie()" />
<input type="button" value="Read Cookie" onclick="readCookie()" />
<p id="panel"></p>
</form>
//Creating a persistent cookies
<script>
var date = new Date();
var days=2;
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = date.toGMTString();
document.cookie = "user=Jamia; expires="+ expires + ";"
alert("Cookie Created\n"+document.cookie)
Pathan Firozkhan S. 26 Jamia Polytehnic, Akkalkuwa
Diploma in Computer Engg. Java Script Practical (22519)

</script>
</body>
</html>
Program Output :

Pathan Firozkhan S. 27 Jamia Polytehnic, Akkalkuwa


Diploma in Computer Engg. Java Script Practical (22519)

Exp 11: Develop a web page for placing the window on the screen and working with child window
<!DOCTYPE html>
<html lang="en">
<head>
<title>Exp 11</title>
<script>
function openWindow() {
myWindow = window.open("https://www.google.com", "My Window", "top=100, left=200,
width=500, height=500,status=1")
}
function init() {
var win = window.open("", "MyWindow", "top=1000,left=300,width=200, height=200")
win.document.write("<h3>Hello World!!!</h3>")
}
function createWindows() {
for (i = 500; i < 750; i += 50) {
var x = i + 100;
var y = i + 100;
var mywin = window.open("", "win" + i, "width=100, height=100,top=" + x + ",left=" + y + "
,status=1")
}
}
</script>
</head>
<body onload="init()">
<h3>Creating a Child window</h3>
<form action="#">
<input type="button" value="Open Window" onclick="openWindow()" />
<input type="button" value="Create Multiple Windows" onclick="createWindows()" />
</form>
<h3>Writing content on Child window</h3>
<script>
var myWindow = open('', 'mywin', 'height=300, width=300');
myWindow.document.write('Hi there.');
myWindow.document.write('This is my new window');
myWindow.document.close();
myWindow.focus();
</script>
Pathan Firozkhan S. 28 Jamia Polytehnic, Akkalkuwa
Diploma in Computer Engg. Java Script Practical (22519)

</body>
</html>
Program Output :

Pathan Firozkhan S. 29 Jamia Polytehnic, Akkalkuwa


Diploma in Computer Engg. Java Script Practical (22519)

Exp 12 : Develop a web page for validation of form field us regular expression.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Exp 12</title>
<script>
function testexp() {
var patt = /jamia/i;
var str = txt.value;
var res = patt.test(str)
document.getElementById("demo").innerHTML = res;
}
function searchexp() {
var patt = /abc/gmi;
var str = txt1.value;
var res = str.search(patt);
document.getElementById("demo1").innerHTML = res;
}
function matchexp() {
var patt = /abc/g;
var str = txt2.value;
var res = str.match(patt);
document.getElementById("demo2").innerHTML = res;
}
function rangeexp() {
var patt = /[^abc]/;
var str = txt3.value;
var res = patt.test(str);
document.getElementById("demo3").innerHTML = res;
}
function checkmail() {
var patt = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
var str = txt4.value;
var res = patt.test(str)
if (res == true) {
document.getElementById("demo4").innerHTML = "email address is valid";
} else {
document.getElementById("demo4").innerHTML = "email address is invalid";
Pathan Firozkhan S. 30 Jamia Polytehnic, Akkalkuwa
Diploma in Computer Engg. Java Script Practical (22519)

}
}
function myfun() {
var str = txt5.value;
var res = str.replace("is", "was");
document.getElementById("demo5").innerHTML = res;
}
function mynum() {
var str = txt6.value;
//var patt = /^(?:(?:\+|0{0,2})91(\s*[\-]\s*)?|[0]?)?[789]\d{9}$/;
var patt = "(0/91)?[7-9][0-9]{9}";
if (str.match(patt)) {
document.getElementById("demo6").innerHTML = "Valid Mobile N0."
} else {
document.getElementById("demo6").innerHTML = "Invalid Mobile N0."
}
}
function mypass() {
var str = txt7.value;
var patt = /^(?=.*\d)(?=.*[a-zA-Z])[a-zA-Z0-9]{7,}$/
if (str.match(patt)) {
document.getElementById("demo7").innerHTML = "Valid Password."
} else {
document.getElementById("demo7").innerHTML = "Password must contain more then 8
char, Uppercase, Lowercase, digit and special character";
} }
</script>
</head>
<body>
The test() method to test string contains "jamia" matching patter<br>
Enter any text : <input type="text" id="txt">
<input type="button" onclick="testexp()" value="Check"><br>
The string contains patter : <span id="demo"></span><br><br>

The search() method use to search "abc" a specified RegExp in string<br>


Enter any text : <input type="text" id="txt1">
<input type="button" onclick="searchexp()" value="Check"><br>
The search pattarn is at : <span id="demo1"></span><br><br>
Pathan Firozkhan S. 31 Jamia Polytehnic, Akkalkuwa
Diploma in Computer Engg. Java Script Practical (22519)

The match() method use to search a matching "abc" string<br>


Enter any text : <input type="text" id="txt2">
<input type="button" onclick="matchexp()" value="Check"><br>
The match pattern are: <span id="demo2"></span><br><br>

Searching range of characters start with /[^abc]/<br>


Enter any text : <input type="text" id="txt3">
<input type="button" onclick="rangeexp()" value="Check"><br>
The matching chracter are: <span id="demo3"></span><br><br>

Searching for valid email address<br>


Enter your mail : <input type="text" id="txt4">
<input type="button" onclick="checkmail()" value="Check"><br>
<span id="demo4"></span><br><br>

Regular expression to test valid mobile no<br>


Enter mobile no : <input type="number" id="txt6">
<input type="button" onclick="mynum()" value="Check"><br>
Mobile no is : <span id="demo6"></span><br><br>

Regular expression to test passward <br>


Enter mobile no : <input type="text" id="txt7">
<input type="button" onclick="mypass()" value="Check"><br>
Passward is : <span id="demo7"></span><br><br>

Replacing text "is with was" using regular expression<br>


Enter any text : <input type="text" id="txt5">
<input type="button" onclick="myfun()" value="Check"><br>
Replaced string is : <span id="demo5"></span><br><br>
</body>
</html>

Pathan Firozkhan S. 32 Jamia Polytehnic, Akkalkuwa


Diploma in Computer Engg. Java Script Practical (22519)

Program Output :

Pathan Firozkhan S. 33 Jamia Polytehnic, Akkalkuwa


Diploma in Computer Engg. Java Script Practical (22519)

Exp 13 : Create a webpage using Rollover effect.


13.1 Image Rollover
<!DOCTYPE html>
<html lang="en">
<head>
<title>Exp 13.1</title>
</head>
<body>
<h1>
Image RollOver Program
</h1>
<a>
<img src="download1.jpg" onmouseover="src='download2.jpg'" onmouseout =
"src='download3.jpg'">
</a>
</body>
</html>
Program Output :

Pathan Firozkhan S. 34 Jamia Polytehnic, Akkalkuwa


Diploma in Computer Engg. Java Script Practical (22519)

13.2 Text Rollover


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exp 13.2</title>
</head>
<body>
<a onmouseover="document.fruit.src='strawbarry.jpg'">
<h2>
<font onmouseover="this.style.color='red';" onmouseout ="this.style.color
='black';">Strawbarry</font>
</h2>
</a>
<a onmouseover="document.fruit.src='pinapple.jpg'">
<h2>
<font onmouseover="this.style.color='red';" onmouseout ="this.style.color
='black';">Pineapple</font>
</h2>
</a>
<a onmouseout="document.fruit.src='oranges.jpg'">
<h2>
<font onmouseover="this.style.color='red';" onmouseout="this.style.color
='black';">Oranges</font>
</h2>
</a>
<a>
<img src="strawbarry.jpg" name="fruit" width="200" height="300">
</a>
</body>
</html>

Pathan Firozkhan S. 35 Jamia Polytehnic, Akkalkuwa


Diploma in Computer Engg. Java Script Practical (22519)

Program Output :

Pathan Firozkhan S. 36 Jamia Polytehnic, Akkalkuwa


Diploma in Computer Engg. Java Script Practical (22519)

Exp 13.3 : Multiple action of rollover


<html>
<title>Exp 13.3</title>
<head>
<script language="Javascript" type="text/javascript">
function OpenNewWindow(book) {
if (book == 1) {
document.cover.src = 'java.jpg'
MyWindow = window.open('', 'myAdWin', 'titlebar="0" status="0", toolbar="0",
location="0", menubar="0", directories="0", resizable="0", height="50", width="150",
left="500",top="200"')
MyWindow.document.write('10% Discount for Java Demystified!')
}
if (book == 2) {
document.cover.src = 'oop.jpg'
MyWindow = window.open('', 'myAdWin', 'titlebar="0" status="0", toolbar="0",
location="0", menubar="0", directories="0", resizable="0", height="50", width="150",
left="500",top="200"')
MyWindow.document.write('20% Discount for OOP Demystified!')
}
if (book == 3) {
document.cover.src = 'data.jpg'
MyWindow = window.open('', 'myAdWin', 'titlebar="0" status="0", toolbar="0",
location="0", menubar="0", directories="0", resizable="0", height="50", width="150",
left="500",top="200"')
MyWindow.document.write("15% Discount for Data Structures Demystified!")
}
}
</script></head>
<body>
<table width="100%" border="0">
<tbody>
<tr valign="top">
<td width="50">
<a>
<img height="92" src="java.jpg" width="70" border="0" name="cover">
</a>
</td>

Pathan Firozkhan S. 37 Jamia Polytehnic, Akkalkuwa


Diploma in Computer Engg. Java Script Practical (22519)

<td>
<img height="1" src="" width="10">
</td>
<td>
<a onmouseover="OpenNewWindow(1)" onmouseout="MyWindow.close()">
<b><u>Java Demystified </u></b>
</a>
<br>
<a onmouseover="OpenNewWindow(2)" onmouseout="MyWindow.close()">
<b><u>OOP Demystified</u></b>
</a>
<br>
<a onmouseover="OpenNewWindow(3)" onmouseout="MyWindow.close()">
<b><u>Data Structures Demystified</u></b>
</a>
</td>
</tr>
</tbody>
</table></body></html>
Program Output :

Pathan Firozkhan S. 38 Jamia Polytehnic, Akkalkuwa


Diploma in Computer Engg. Java Script Practical (22519)

Exp 14 : Develop a webpage for implementing menus


14.1 Dynamically changing Pull-down menu
<!DOCTYPE html>
<html lang="en">
<head>
<title>Exp 14.2</title>
<script>
compdept = new Array("Afzal Sir", "Waseem Sir", "Shakeel Sir")
electdept = new Array("Aabid Sir", "Hammad Sir", "Faisal Sir")
function getemp(branch) {
//clear out the current options
for (i = document.form1.employees.options.length - 1; i > 0; i--) {
document.form1.employees.options.remove(i)
}
dept = branch.options[branch.selectedIndex].value;
if (dept != "") {
if (dept == '1') {
for (i = 1; i <= compdept.length; i++) {
document.form1.employees.options[i] = new Option(compdept[i - 1]);
}
}
if (dept == '2') {
for (i = 1; i <= electdept.length; i++) {
document.form1.employees.options[i] = new Option(electdept[i - 1]);
}
}
}
}
</script>
</head>
<body>
<h3> Dynamically Changing Menu</h3>
<form action="" name="form1">
<select name="department" onchange="getemp(this)">
<option value="0">Departments</option>
<option value="1">Computer</option>
<option value="2">Electrical</option>
</select>
Pathan Firozkhan S. 39 Jamia Polytehnic, Akkalkuwa
Diploma in Computer Engg. Java Script Practical (22519)

<select name="employees">
<option value="0">Employees</option>
</select>
<br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body></html>
Program Output :

Pathan Firozkhan S. 40 Jamia Polytehnic, Akkalkuwa


Diploma in Computer Engg. Java Script Practical (22519)

14.2 Tree view menu


<!DOCTYPE html>
<html lang="en">
<head>
<title>Exp 14.3</title>
<style>
ul,
#myUL {
list-style-type: none;
}
#myUL {
margin: 0;
padding: 0;
}
.caret {
cursor: pointer;
-webkit-user-select: none;
/* Safari 3.1+ */
-moz-user-select: none;
/* Firefox 2+ */
-ms-user-select: none;
/* IE 10+ */
user-select: none;
}
.caret::before {
content: "\25B6";
color: black;
display: inline-block;
margin-right: 6px;
}
.caret-down::before {
-ms-transform: rotate(90deg);
/* IE 9 */
-webkit-transform: rotate(90deg);
/* Safari */
transform: rotate(90deg);
}
.nested {
Pathan Firozkhan S. 41 Jamia Polytehnic, Akkalkuwa
Diploma in Computer Engg. Java Script Practical (22519)

display: none;
}
.active {
display: block;
}
</style>
</head>
<body>
<h2>Tree View Menu</h2>
<p>A tree view represents a hierarchical view of information,<br> where each item can have a
number of subitems.</p>
<p>Click on the arrow(s) to open or close the tree branches.</p>
<ul id="myUL">
<li><span class="caret">Beverages</span>
<ul class="nested">
<li>Water</li>
<li>Coffee</li>
<li><span class="caret">Tea</span>
<ul class="nested">
<li>Black Tea</li>
<li>White Tea</li>
<li><span class="caret">Green Tea</span>
<ul class="nested">
<li>Sencha</li>
<li>Gyokuro</li>
<li>Matcha</li>
<li>Pi Lo Chun</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<script>
var toggler = document.getElementsByClassName("caret");
var i;
for (i = 0; i < toggler.length; i++) {
Pathan Firozkhan S. 42 Jamia Polytehnic, Akkalkuwa
Diploma in Computer Engg. Java Script Practical (22519)

toggler[i].addEventListener("click", function() {
this.parentElement.querySelector(".nested").classList.toggle("active");
this.classList.toggle("caret-down");
});
}
</script>
</body>
</html>
Program Output :

Pathan Firozkhan S. 43 Jamia Polytehnic, Akkalkuwa


Diploma in Computer Engg. Java Script Practical (22519)

Exp 15 : Develop a webpage for implementing status bar and web page protection
<!DOCTYPE html>
<html lang="en">
<head>
<title>Exp 15</title>
<script>
msg = "This is an example of scrolling message";
spacer = "............ .............";
pos = 0;
function ScrollMessage() {
window.status = msg.substring(pos, msg.length) + spacer + msg.substring(0, pos);
pos++;
if (pos > msg.length)
pos = 0;
window.setTimeout("ScrollMessage()", 100);
}
</script>
<script>
window.onload = function() {
document.addEventListener("contextmenu", function(e) {
e.preventDefault();
}, false);
}
</script>
</head>
<body onfocus="window.status = 'Welcome to Java Script!'; return true">
<h3>Right click is disabled, for protecting webpage source code</h3>
<p>Scrolling Message<br>
<input type="button" value="click Me" onclick="ScrollMessage()">
Look at the status line at the bottom of the page</p>
<p>Changing the message using Rollover<br>
<input type="button" name="btn" value="Click Me" onMouseOver="window.status='Mouse
cursor in on Button';return true" onMouseOut="window.status='Mouse cursor in not on Button';return
true"></p>
</body>
</html>

Pathan Firozkhan S. 44 Jamia Polytehnic, Akkalkuwa


Diploma in Computer Engg. Java Script Practical (22519)

Program Output :

Pathan Firozkhan S. 45 Jamia Polytehnic, Akkalkuwa


Diploma in Computer Engg. Java Script Practical (22519)

Exp 16 : Design a web page showing Slideshow and Banner


16.1 Displaying Banner :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Exp 16.1</title>
<script language="Javascript">
MyBanners = new Array('google.jpg', 'flipkart.jpg', 'msbte.jpg', 'w3schools.jpg')
MyBannerLinks = new Array('http://www.google.com/', 'http://flipkart.com/',
'https://msbte.org.in/','https://www.w3schools.com/')
banner = 0
function ShowLinks() {
document.location.href = "" + MyBannerLinks[banner]
}
function ShowBanners() {
if (document.images) {
banner++
if (banner == MyBanners.length) {
banner = 0
}
document.ChangeBanner.src = MyBanners[banner]
setTimeout("ShowBanners()", 1000)
}
}
</script>
<body onload="ShowBanners()">
<center>
<h3>Displaying Banner Advertise with Links to URLs</h3>
<a href="javascript: ShowLinks()">
<img src="red.jpg" width="200" height="250" name="ChangeBanner" /></a>
</center>
</body>
</html>

Pathan Firozkhan S. 46 Jamia Polytehnic, Akkalkuwa


Diploma in Computer Engg. Java Script Practical (22519)

Program Output :

Pathan Firozkhan S. 47 Jamia Polytehnic, Akkalkuwa


Diploma in Computer Engg. Java Script Practical (22519)

16.2 : Displaying Slide show


<!DOCTYPE html>
<html lang="en">
<head>
<title>Exp 16.2</title>
<script>
Silder = new Array("image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg");
i = 0;
function display(sn) {
i = i + sn;
if (i > Silder.length - 1)
{ i = 0; }
if (i < 0)
{ i = Silder.length - 1; }
document.SlideID.src = Silder[i]; }
</script></head>
<body>
<center>
<h1>Slide Show Enjoy Nature !</h1>
<img src="image1.jpg" name="SlideID" width="500" height="250"><br><br>
<input type="button" value="Back" onclick="display(-1)">
<input type="button" value="Next" onclick="display(-1)">
</center>
</body></html>
Program Output :

Best of Luck
Pathan Firozkhan S. 48 Jamia Polytehnic, Akkalkuwa

You might also like