CSS Manual-1-18

Practical No.
1 : Write simple JavaScript with HTML for arithmetic expression Evaluation and message
printing.
Questions:-
1. State the features of JavaScript.
a. Light Weight Scripting language
b. Dynamic Typing
c. Object-oriented programming support
d. Functional Style
e. Platform Independent
f. Prototype-based
g. Interpreted Language
h. Async Processing
i. Client-Side Validation
j. More control in the browser
2. How to write a Hello World example of JavaScript?

<html>
<head>
<title>My First Javascript</title>
</head>
<body>
<center>
<script type="text/javascript">
// This is my first JavaScript program(Single line comment)

/* This is my first program
in JavaScript (Multiline comment)*/
document.write("Welcome to First Page of Javascript")
</script>
</center>
</body>
</html>
3. How to write a comment in JavaScript?

 Single Line Comments
 Single line comments start with //.
 Any text between // and the end of the line will be ignored by JavaScript (will not be executed).
 Multi-line Comments
 Multi-line comments start with /* and end with */.
 Any text between /* and */ will be ignored by JavaScript.
Exercise :
1. Write a program to read arithmetic expression from user, evaluate it and display the answer
using alert box.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Arithmetic Operators</title>
</head>
<body>
<script>
var x = 10;
var y = 4;
document.write("Addition:"+x + y); // Prints: 14
document.write("<br>");
document.write("Sub:"+x - y); // Prints: 6

document.write(x * y); // Prints: 40

document.write(x / y); // Prints: 2.5

document.write(x % y); // Prints: 2

</script>
</body>
</html>
Conclusion : ________________________________________________________________________
Marks Obtained Dated Sign of

Teacher
Process Related Product Related Total
(15) (10) (25)
Practical No. 2 : Develop JavaScript to use decision making and looping statements.
Excercise :
1. Write a program to display even and odd numbers.
Write a program to display even and odd numbers.
<html>
<head>
<title>Program to display ODD and Even numbers</title>
</head>
<body>
var no=prompt("Enter the number");
if(no%2==0)
{
alert("Number is Even");
}
else
{
alert("Number is ODD");
}
</script>
</body>
</html>
2. Write a program to display prime numbers

<head>
<title>Check a number is prime pr not using javascript</title>
function prime()
{
var n,i,flag=true;
n=document.myform.n.value;
for(i=2;i<=n/2;i++)
{
if(n%i==0)
{
flag=false;
break;
}
}
if(flag==true)
{
alert(n+"is prime");
}
else
{
alert(n+"is not prime");
}
}
</script>
</head>
<body>
<form name="myform">
Enter the Number:<input type="text" name=n value=" ">
<br><br>
<input type="button" value="Check" onClick="prime()">
<br>
</form>
</body>
</html>
Conclusion : ________________________________________________________________________

Teacher
(15) (10) (25)
Practical No. 3: Develop JavaScript to implement array functionalities.
Questions :
1. Explain array with an example.
Syntax :
name_of_array = new Array(size_of_array) Eg : scores = new Array(4);
Assigning values to array
To assign a value to the array, you use an index in brackets. Indexes begin with 0 scores[0] = 39;
scores[1] = 40;
scores[2] = 100;
scores[3] = 49;
2. Explain any 4 methods that can be used with arrays for adding elements.
1. Push : It is used for adding elements at end of array var fruits = ["Banana", "Orange", "Apple",
"Mango"]; fruits.push("Kiwi");
2. Unshift :It is used for adding elements at beginning of array var list = ["foo", "bar"];
list.unshift("baz", "qux");
["baz", "qux", "foo", "bar"] // result
3. Splice: it is used for adding elements in between var list = ["foo", "bar"];
list.splice( 1, 0, "baz"); // at index position 1, remove 0 elements, then add "baz" to that position
["foo", "baz", "bar"]
4. Concat: it is used for adding array to another array var list = ["foo", "bar"];
var newlist = list.concat( ["baz", "qux"] ); ["foo", "bar", "baz", "qux"] // newlist result
Exercise :
1. Write a program to perform all the array operations.
<html>
<head>
<title>Array Operation</title>
</head>
<body>
a=new Array();
a[0]="C";
a[1]="C++";
a[2]="Java";
a[3]="VB";
document.write("<br>The Array elements are:");
for(i=0;i<a.length;i++)
{
document.write(a[i]+"<br>");
}
document.write("<br>Select the operations you want to perform on array");
document.write("<br>A.Adding an array element using push() method");
document.write("<br>B.Adding an array element using pop() method");
document.write("<br>C.Adding an array element using unshift() method");
document.write("<br>D.Adding an array element in between using splice()
method");
document.write("<br>E.Adding an array element to another array using
concat() method");
document.write("<br>F.Adding an array element at perticular index");
document.write("<br>G.Sort an array ement using sort() method");
document.write("<br>H.Reverse an array element using reverse() method");
document.write("<br>I.Shift an array element using shift() method");
document.write("<br>J.Unshift an array element using unshift() method");
document.write("<br>K.Delete an array element using delete() method");
document.write("<br>L.Adding an array element using splice() method");
document.write("<br>M.Divide an array element using slice() method");
var choice=prompt("Enter your choice");
alert("You have selected option"+choice)
switch(choice)
{
case "A":
a.push("PHP");
document.write("<br>Array Element after applying push
method<br>");
{
}
break;
case "B":
a.pop();
document.write("<br>Array Element after applying pop
method<br>");
{
}
break;
case "C":
a.unshift("PHP","Pascal");
document.write("<br>Array Element after applying unshift()
method<br>");
{
}
break;
case "D":
a.splice(1,0,"PHP");
document.write("<br>Array Element after applying splice()
method<br>");
{
}
break;
case "E":
var newlist=a.concat("PHP","Pascal")
document.write("<br>Adding an Array Element into another array
concat() method<br>");
for(i=0;i<newlist.length;i++)
{
document.write(newlist[i]+"<br>");
}
break;
case "F":
a[2]=("PHP");
document.write("<br>Add an Array Element at a Particular
Index<br>");
{
}
break;
case "G":
a.sort();
document.write("<br>Sort an Array Element after applying
sort() method<br>");
{
}
break;
case "H":
a.reverse();
document.write("<br>Reverse an Array Element after applying
reverse() method<br>");
{
}
break;
case "I":
var newlist = a.join(" and ");
document.write("<br>Join-This method returns the array as a
string. The elements will be separated by a specified separator. The default
separator is comma (,)<br>");
for(i=0;i<newlist.length;i++)
{
document.write(newlist[i]+"<br>");
}
break;
case "J":
a.unshift("PHP");
document.write("<br>Removes first element of an array using
Shift()<br>");
{
}
break;
case "K":
delete a[0];
document.write("<br>Delete element of an array using
delete()<br>");
{
}
break;
case "L":
a.splice(2,0,"PHP","Pascal")
document.write("<br>add element in an array using splice()<br>");
{
}
break;
case "M":
var a1=a.slice(1);
document.write("<br>Slice: This method slices out a piece of
an array into a new array.<br>");
{
document.write(a1[i]+"<br>");
}
break;
default:
document.write("Such Color is not available");
}
</script>
</body>
</html>
2. Write a program to Accept the marks of 10 subjects from the user and store it in array. Sort them and
display
<html>
<body>
<h2>Accept and Display the marks</h2>
<script>
a = new Array();
length=prompt("For how many subjects do you want to enter a marks?");
alert("Enter Marks of Subjects")
for(i=0;i<length;i++)
{
a[i]=prompt("Enter marks of subject"+i);
}
document.write("<br/><br/>The entered subjects marks are<br\>");
{
document.write("Marks of subject"+i+"is :"+a[i]);
document.write("</br>");
}
document.write("<br/><br/>The array sorted subjects mareks are<br\>");
a.sort();
document.write("<br/>The element in the array are<br\>");
{
document.write("Marks of subject"+i+"is :"+a[i]);
document.write("</br>");
}
</script>
</body>
</html>
Conclusion : ________________________________________________________________________

Teacher
(15) (10) (25)
Practical No. 4: Develop JavaScript to implement Functions.
Exercise
1. Write a program to display even and odd numbers using function.
<html>
<head>
<title>Program to display ODD and Even numbers</title>
</head>
function odd_even()
{
var no=prompt("Enter the number");
if(no%2==0)
{
alert("Number is Even");
}
else
{
alert("Number is ODD");
}
}
</script>
<body>
<input type="button" value="Display ODD Even No" onClick="odd_even()">
</body>
</html>
2. Write a program to display prime numbers using function

<head>
<title>Check a number is prime pr not using javascript</title>
function prime()
{
var n,i,flag=true;
n=document.myform.n.value;
for(i=2;i<=n/2;i++)
{
if(n%i==0)
{
flag=false;
break;
}
}
if(flag==true)
{
alert(n+"is prime no");
}
else
{
alert(n+"is not prime no");
}
}
</script>
</head>
<body>
<form name="myform">
Enter the Number:<input type="text" name=n value=" ">
<br><br>
<input type="button" value="Check" onClick="prime()">
<br>
</form>
</body>
</html>
Conclusion : ________________________________________________________________________

Teacher
(15) (10) (25)
Practical No. 5: Develop JavaScript to implement Strings.
Exercise :
1. Write a program to perform all the string operations.
<html>
<head>
<title>Array Operation</title>
</head>
<body>
document.write("<br>Select the operations you want to perform on
string");
document.write("<br>A. indexOf() method");
document.write("<br>B. lastIndexOf() method");
document.write("<br>C. search() method");
document.write("<br>D. slice() method");
document.write("<br>E. Substring() method");
document.write("<br>F. Substr() method");
document.write("<br>G. replace() method");
document.write("<br>H. toUpperCase() method");
document.write("<br>I. toLowerCase() method");
document.write("<br>J. concat() method");
document.write("<br>K. trim() method");
document.write("<br>L. charAt(position) method");
document.write("<br>M. charCodeAt() method");
document.write("<br>N. parseInt(),parseFloat() method");
document.write("<br>O. toString() method");
var choice=prompt("Enter your choice");

alert("You have selected option"+choice)
switch(choice)
{
case "A":
var str = "Please locate where 'locate' occurs!";
var pos = str.indexOf("locate");
document.write("<br>index of locate is:"+pos+"<br>");
break;
case "B":
var pos = str.lastIndexOf("locate");
document.write("</br>last index of locate is:"+pos+"<br>");
break;
case "C":
var pos = str.search("locate");
document.write("<br>Search result is"+pos+"<br>");
break;
case "D":
var str = "Apple, Banana, Kiwi";
var res = str.slice(7, 13);
document.write("<br>Result of Slice method is:"+res+"<br>");
break;
case "E":
var res = str.substring(7, 13);
document.write("<br>Result of substring() method
is:"+res+"<br>");
break;
case "F":
var res = str.substr(7, 6);
document.write("<br>Result of substr() method
is:"+res+"<br>");
break;
case "G":
str = "Please visit Microsoft!";
var n = str.replace("Microsoft", "W3Schools");
document.write("<br>Result of replace() method
is:"+res+"<br>");
break;
case "H":
var text1 = "Hello World!"; // String
var text2 = text1.toUpperCase(); // text2 is text1 converted
to upper
document.write("<br>Result toUpperCase() method
is:"+text2+"<br>");
break;
case "I":
var text1 = "Hello World!"; // String
var text2 = text1.toLowerCase(); // text2 is text1 converted
to lower
document.write("<br>Result toLowerCase() method
is:"+text2+"<br>");
break;
case "J":
var text1 = "Hello";
var text2 = "World";
var text3 = text1.concat(" ", text2);
document.write("<br>Result concat() method is:"+text3+"<br>");
break;
case "K":
var str = " Hello World! ";
document.write("<br>Result trim() method
is:"+str.trim()+"<br>");
break;
case "L":
var str = "HELLO WORLD";
document.write("<br>Result charAt() method
is:"+str.charAt(0)+"<br>");
break;
case "M":
var str = "HELLO WORLD";
document.write("<br>Result charCodeAt(0)method
is:"+str.charCodeAt(0)+"<br>");
break;
case "N":
document.write("<br>Result parseInt(),parseFloat() method
is:"++"<br>");
break;
case "O":
document.write("<br>Result toString() method is:"++"<br>");

break;
default:
document.write("Such Color is not available");
}
</script>
</body>
</html>
Conclusion : ________________________________________________________________________

Teacher
(15) (10) (25)
Practical No.6: Create a webpage using Form Elements.
Questions:-
1. Explain form methods.
2. Write a webpage that accepts Username and Aadhar Card as input texts
Practical No.7: Create a webpage to implement Form Events. Part-I.

1. Explain form events.
3. Explain the difference between onblur and onfocus Event

OnFocus is when you give an item focus, by clicking on it, tabbing into it, using the tab key, or doing
anything that makes it the active element. OnBlur is when something loses focus, by clicking on
something else, tabbing out of it, using the tab key, or doing something that makes another
element the active element
Exercise :
2. Write a program to design a form and handle onload Event.
<html>
<head>
<title>Demo of onload Tag Attribute</title>
function my_fun()
{
alert("Welcome");
}
</script>
</head>
<body onload="my_fun()">
</body>
</html>
Conclusion : ________________________________________________________________________

Teacher
(15) (10) (25)
Practical No.8: Create a webpage to implement Form Events. Part-II. Mouse Event:
Questions :
1. Explain mouse events.
Attribute Value Description
onclick script Fires on a mouse click on the element
ondblclick script Fires on a mouse double-click on the element
onmousedown script Fires when a mouse button is pressed down on an element
onmousemove script Fires when the mouse pointer is moving while it is over an
element
onmouseout script Fires when the mouse pointer moves out of an element
onmouseover script Fires when the mouse pointer moves over an element
onmouseup script Fires when a mouse button is released over an element
onmousewheel script Deprecated. Use the onwheel attribute instead
onwheel script Fires when the mouse wheel rolls up or down over an
element
2. Explain key events.

Attribute Value Description
onkeydown script Fires when a user is pressing a key
onkeypress script Fires when a user presses a key
onkeyup script Fires when a user releases a key
Exercise:
1. Write a program to design a form and handle any 2 mouse Events.
<html>
<head>
<title>Demo of mouse event Tag Attribute</title>
function my_fun()
{
alert("Hello I am in my function");
}
</script>
</head>
<body>
<center>
<form>
<input type="button" value="Click" ondblclick="my_fun()">
</form>
</center>
</body>
</html>.
2. Write a program to design a form and handle any 2 Key Events.

<html>
<head>
<title>Demo of key event Tag Attribute</title>
function my_fun()
{
alert("you pressed the key");
}
function my_fun1()
{
alert("you pressed the key down");
}
</script>
</head>
<body>
<center>
<form>
Enter Name:<input type="text" onkeypress="my_fun()"/>
Enter Roll No:<input type="text" onkeydown="my_fun1()"/>
</form>
</center>
</body>
</html>
Conclusion : ________________________________________________________________________

Teacher
(15) (10) (25)

CSS Manual-1-18

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS Manual-1-18

Uploaded by

Copyright:

Available Formats

Practical No.

2. How to write a Hello World example of JavaScript?

// This is my first JavaScript program(Single line comment)

3. How to write a comment in JavaScript?

document.write("Sub:"+x - y); // Prints: 6

document.write(x * y); // Prints: 40

document.write(x / y); // Prints: 2.5

document.write(x % y); // Prints: 2

Marks Obtained Dated Sign of

2. Write a program to display prime numbers

Marks Obtained Dated Sign of

Marks Obtained Dated Sign of

2. Write a program to display prime numbers using function

Marks Obtained Dated Sign of

var choice=prompt("Enter your choice");

document.write("<br>Result toString() method is:"++"<br>");

Marks Obtained Dated Sign of

Practical No.7: Create a webpage to implement Form Events. Part-I.

3. Explain the difference between onblur and onfocus Event

Marks Obtained Dated Sign of

2. Explain key events.

2. Write a program to design a form and handle any 2 Key Events.

Marks Obtained Dated Sign of

You might also like