CSS Manual-1-18
CSS Manual-1-18
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
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>");
Conclusion : ________________________________________________________________________
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>
<script type="text/javascript">
var no=prompt("Enter the number");
if(no%2==0)
{
alert("Number is Even");
}
else
{
alert("Number is ODD");
}
</script>
</body>
</html>
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 : ________________________________________________________________________
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>
<script type="text/javascript">
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>");
for(i=0;i<a.length;i++)
{
document.write(a[i]+"<br>");
}
break;
case "B":
a.pop();
document.write("<br>Array Element after applying pop
method<br>");
for(i=0;i<a.length;i++)
{
document.write(a[i]+"<br>");
}
break;
case "C":
a.unshift("PHP","Pascal");
document.write("<br>Array Element after applying unshift()
method<br>");
for(i=0;i<a.length;i++)
{
document.write(a[i]+"<br>");
}
break;
case "D":
a.splice(1,0,"PHP");
document.write("<br>Array Element after applying splice()
method<br>");
for(i=0;i<a.length;i++)
{
document.write(a[i]+"<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>");
for(i=0;i<a.length;i++)
{
document.write(a[i]+"<br>");
}
break;
case "G":
a.sort();
document.write("<br>Sort an Array Element after applying
sort() method<br>");
for(i=0;i<a.length;i++)
{
document.write(a[i]+"<br>");
}
break;
case "H":
a.reverse();
document.write("<br>Reverse an Array Element after applying
reverse() method<br>");
for(i=0;i<a.length;i++)
{
document.write(a[i]+"<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>");
for(i=0;i<a.length;i++)
{
document.write(a[i]+"<br>");
}
break;
case "K":
delete a[0];
document.write("<br>Delete element of an array using
delete()<br>");
for(i=0;i<a.length;i++)
{
document.write(a[i]+"<br>");
}
break;
case "L":
a.splice(2,0,"PHP","Pascal")
document.write("<br>add element in an array using splice()<br>");
for(i=0;i<a.length;i++)
{
document.write(a[i]+"<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>");
for(i=0;i<a.length;i++)
{
document.write(a1[i]+"<br>");
}
break;
default:
document.write("<br>");
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\>");
for(i=0;i<length;i++)
{
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\>");
for(i=0;i<length;i++)
{
document.write("Marks of subject"+i+"is :"+a[i]);
document.write("</br>");
}
</script>
</body>
</html>
Conclusion : ________________________________________________________________________
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>
<script type="text/javascript">
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>
Conclusion : ________________________________________________________________________
Exercise :
1. Write a program to perform all the string operations.
<html>
<head>
<title>Array Operation</title>
</head>
<body>
<script type="text/javascript">
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");
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 str = "Apple, Banana, Kiwi";
var res = str.substring(7, 13);
document.write("<br>Result of substring() method
is:"+res+"<br>");
break;
case "F":
var str = "Apple, Banana, Kiwi";
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":
default:
document.write("<br>");
document.write("Such Color is not available");
}
</script>
</body>
</html>
Conclusion : ________________________________________________________________________
Questions:-
1. Explain form methods.
2. Write a webpage that accepts Username and Aadhar Card as input texts
Conclusion : ________________________________________________________________________
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>
<script type="text/javascript">
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>.
Conclusion : ________________________________________________________________________