6 Client Side Scripting Using JavaScript
Uploaded by
Kuntham Students Center6 Client Side Scripting Using JavaScript
Uploaded by
Kuntham Students Center1
6 CLIENT SIDE SCRIPTING USING
JAVASCRIPT
1. Javascript is developed by ………..
Brendan Eich
2. Which tag is used for include script in an HTML program? Explain its attribute?
The <SCRIPT> tag is used to include script in an HTML page.
Its Language attribute specifies the type of scripting language used.
Its source attribute specifies the location and file name of the external javascript file.
Its type attribute specifies the type of the linked file.
Example:-
<SCRIPT Language=”JavaScript”>
Or
<Script type = ”text/JavaScript” Src = “validation.js”>
3. ……………… function in Javascript used to print a text in HTML page?
document.write( )
4. What is a function in Javascript? Explain creation of Function in Javascript?
A function is a group of instructions with a name that can perform a specific
task. It is executed when it is called. Functions must be declared before they are
used. We can call a function any number of times to execute it.
In javascript a function is defined with the key word “Function”.
Normally functions are placed in the < HEAD> Tag of <HTML>. A function has two
parts function Header and function body(enclosed within { }).
Eg. function print( )
{
document.write(“Welcome to JavaScript”);
}
Calling a function
A function can be called using its name such as, print( ).
5. What is the use of Javascript engine?
Java script engine is a virtual machine for executing javascript. Every browser has a
java script engine. If the html page contain a java script then browser passes it to the
javascript engine.
6. What are the Javascript Data Types?
The three primitive data types in JavaScript are Number, String and Boolean.
Number:-They include integers , floating point numbers and signed numbers.
Strings:-A string is a combination of characters, numbers or symbols enclosed within
double quotes.
Second Year Computer Application (Commerce) Study Notes by Anil Kumar [HSSLiVE.IN]
2
Boolean:-A boolean data can be either True or False( Without double quotes).
7. How can a variable declare in java script?
A variable can be declared by using the key word var.
Eg. var n;
Data type of the variable is decided only when a value is assigned to it.
n=10;
Now n is of number type.
8. Explain the operators in javascript
i). Arithmetic Operator
Operator Description Example a b Result
+ Addition a+b 5 2 7
- Subtraction a-b 5 2 3
* Multiplication a*b 5 2 10
/ Division a/b 5 2 2.5
% Modulus a%b 5 2 1
++ Increment X=++a 5 X=6
-- Decrement X=--a 5 X=4
ii). Assignment operator
Operator Example Same As
= x=y x=y
+= x += y x=x+ y
-= x-=y x=x-y
*= x *= y x=x*y
/= x /= y x = x /y
%= x %= y x=x%y
iii). Logical operator
Operator Description Example a b Result
&& and a<10 && b>5 5 2 false
|| or a<10 || b>5 5 2 true
! not !a 5 2 false
Second Year Computer Application (Commerce) Study Notes by Anil Kumar [HSSLiVE.IN]
3
iv). Relational operator
Operator Description Example a b Result
== Equal to a==b 5 2 false
!= Not equal to a!=b 5 2 true
< Less than a<b 5 2 false
<= Less than or equal to a<=b 5 2 false
> Greater than a>b 5 2 true
>= Greater than or equal a>=b 5 2 true
to
v). String addition operator
The + operator can be used to add two strings.
Var x ,y ,z;
X = ”Hello ”;
Y = ” Good Morning”;
Z = x + y;
document.write(z);
Output:-
Hello Good Morning
9. ……………… key word is used to declare a variable in javascript
var
10. …………….. function is used to know the type of data in javascript
typeof()
11. What is the use of % operator in javascript?
It is modulus operator which used to extract the reminder of a division operation.
12. Write the output of the following javascript code. Give reason
Var x, y, z ;
X = “10”;
Y = 1;
Z = x + y;
document.write(z);
Ans. 101
Variable x is a string. So string addition takes place as y is also treated as string.
Second Year Computer Application (Commerce) Study Notes by Anil Kumar [HSSLiVE.IN]
4
13. Write the output of the following javascript code. Give reason
Var x, y, z;
X = “10”;
Y = 1;
Z = number(x) + y;
document.write(z);
Ans. 11
The number() function convert the string variable containing number. So numeric addition
takes place.
14. Explain the control structures in javascript
Control structures are used to change the sequential flow of execution in a program.
1). if statement
The if statement executes a group of statements based on a condition.The syntax
is
if(test_expression)
{
statements;
}
Eg. <script Language = “javascript”>
var mark;
mark=50;
if( mark > = 35)
{
document . write (“ Passed”);
}
else
{
document . write (“ Failed”);
}
</script>
2). Switch statement
The Switch statement is a multi-branching statement, which executes statement based
on value of the expression . syntax :
switch(expression)
{
case value 1 :
statement 1;
break;
case value 2:
statement 2;
Second Year Computer Application (Commerce) Study Notes by Anil Kumar [HSSLiVE.IN]
5
break;
… …. ….. …. ….
…. ….. …. ………
default:
statement;
}
<HTML>
<HEAD><TITLE>Javascript - switch</TITLE>
<SCRIPT Language="JavaScript">
function sw()
var d;
d=document.frmday.txtd.value;
switch(d)
case 1:
document . write (“ Sunday”);
break;
case 2:
document . write (“ Monday”);
break;
case 3:
document . write (“ Tuesday”);
break;
case 4:
document . write (“ Wednesday”);
break;
case 5:
document . write (“ Thursday”);
break;
Second Year Computer Application (Commerce) Study Notes by Anil Kumar [HSSLiVE.IN]
6
case 6:
document . write (“ Friday”);
break;
case 7:
document . write (“ Saturday”);
break;
default:
document.write("Invalid Day Number");
</script>
</HEAD>
<BODY>
<FORM Name="frmday">
<CENTER>
Enter the Day Number
<INPUT Type="text" Name="txtd">
<BR><BR>
<INPUT Type="button" value="Show" onClick="sw()">
</CENTER>
</form>
</BODY>
</HTML>
3). for ............Loop
The for loop executes a group of statements repeatedly. The syntax is
for(initialisation; expression; update_statement)
{
statements;
}
Second Year Computer Application (Commerce) Study Notes by Anil Kumar [HSSLiVE.IN]
7
Eg. . <script Language = “javascript”>
var n, s;
for (n = 1, n< =10; n++)
{
s=n*n;
document . write (s);
document . write (“<BR>”);
</script>
4). While ......... Loop
The while loop executes a group of statements repeatedly based on a condition.
Syntax :
while(expression)
{
statements;
}
Eg. . <script Language = “javascript”>
var n, s;
n=1;
while (n<= 1++)
{
s=n*n;
s=n*n;
document . write (s);
document . write (“<BR>”);
n+=1;
</script>
15. Explain built in functions in javascript
Javascript provides a large number of built in functions ( also known as methods). Some of
they are,
Second Year Computer Application (Commerce) Study Notes by Anil Kumar [HSSLiVE.IN]
8
1). alert( )
The alert( ) function is used to display a message on the screen. The syntax is
alert(“message”);
eg. alert (“ Welcome to Javascript”);
2)isNaN( )
The isNaN( ) function is check if a value is a number or not. The function returns True if
the value is a number otherwise False. syntax is;
isNaN(test_value);
eg. isNaN(“ Welcome”);
3). toUpperCase ( )
This function converts a string into uppercase.
Eg.
var a ,b;
a = ”abcd”;
b = a.toUpperCase( );
document.write(b);
Output : ABCD
4). toLowerCase( )
This function converts a string to lowercase.
Eg.
var a ,b;
a = ”ABCD”;
b = a.toLowerCase( );
document.write(b);
Output : abcd
5)charAt( )
The charAt() method returns the character at the specified index in a string. The index of
the first character is 0, the second character is 1, and so on.
Eg
Var str = "HELLO WORLD";
var res = str.charAt(0);
returns H
length Property
Second Year Computer Application (Commerce) Study Notes by Anil Kumar [HSSLiVE.IN]
9
The length property returns the length of a string(number of characters).
Example:-
var a=”Welcome”;
var len=a.length;
document.write(len);
Output:- 7
16. What are the different methods for adding scripts in an html page?
a). Inside the <Head >section of HTML
Placing the script in <HEAD> tag helps to execute scripts faster as the head
section is loaded before the body section. The main dis-advantage is that scripts that
are to be executed while loading the page will not work when they are placed in the
<HEAD> section.
b). Inside <Body>
Here, the script will be executed while the content of the web page is being
loaded. When the browser sees a script code, it renders the script and then the rest of
the web page is displayed in the browser window.
c). External JavaScript file
Scripts can be placed into an external file ,saved with .’js’ extension. It can be used by
multiple HTML pages and also helps to load pages faster. The file is linked to HTML
file using the <SCRIPT> tag.
Eg.,
<SCRIPT Type=”text/JavaScript” Src=”sum.js”>
17. Explain some common JavaScript events.
Event Description
onClick Occurs When the user clicks on an object
onMouseEnter Occurs When the mouse pointer is moved
onto an object
onMouseLeave Occurs When the mouse pointer is moved
out of an object
onKeyDown Occurs When the user is pressing a key on
the key board
onKeyUp Occurs When the user releases a key on the
key board
18. Create a web page which displays the sum of given two numbers using java
script
<html>
<head>
<title> Javasript page</title>
</head>
<body bgcolor= pink>
<form name ="frmdata">
Enter First Numer:
Second Year Computer Application (Commerce) Study Notes by Anil Kumar [HSSLiVE.IN]
10
<input type="text" name="txtnum1">
<br>
Enter Second Numer:
<input type="text" name="txtnum2">
<br>
Sum:
<input type="text" name="txtresult">
<br>
<br>
<input type="button" value="Sum" "onClick=sum()">
</form>
<script language = "JavaScript">
function sum();
{
var n1, n2, sum = 0;
n1 = Number(document.frmdata.txtnum1.value);
n2 = Number(document.frmdata.txtnum2.value);
sum = n1 + n2;
document.frmdata.txtresult.value = sum;
}
</script>
</body>
</html>
19. Create a web page which displays simple interest by accepting P, N and R
using JavaScript.
<html>
<head>
<title> Simple interest by Javasript page </title>
<script language = "JavaScript">
function interest();
{
var p, n, r, I;
p=Number(document.frminterest.txtprinciple.value);
n=Number(document.frminterest.txtyear.value);
r=Number(document.frminterest.txtrate.value);
I=p*n*r/100;
document.frminterest.txtinterest.value=I;
}
</script>
</head>
<body bgcolor= pink>
<form name ="frminterest">
Enter First Principle Amount :
<input type="text" name="txtprinciple">
<br>
Enter No. of Years :
Second Year Computer Application (Commerce) Study Notes by Anil Kumar [HSSLiVE.IN]
11
<input type="text" name="txtyear">
<br>
Interest rate:
<input type="text" name="txtrate">
<br>
Interest :
<input type="text" name="txtinterest">
<br
<br>
<input type="button" value="Simple Interest" onClick=”interest()">
</form>
</body>
</html>
20. Create a web page that displays whether a person is Major or Minor by
accepting the age.( If age >=18 is Major otherwise Minor). There must be provision
to validate the age as a number between 0 to 120
<html>
<head>
<title> Age Check by Javasript page </title>
<script language = "JavaScript">
function biggest();
{
var age;
age = Number(document.frmmajor.txtage.value);
if(isNaN(age))
{
alert(" Enter a valid age between 1 and 120 ");
return:
}
if((age<=0)||(age>120))
{
alert(" Enter a valid age between 1 and 120 ");
return:
}
if(age>=18)
{
document.write(" Major Person");
return;
}
else
{
document.write(" Minor Person");
return;
}
}
</script>
Second Year Computer Application (Commerce) Study Notes by Anil Kumar [HSSLiVE.IN]
12
</head>
<body bgcolor= f05585>
<form name ="frmmajor">
Enter age :
<input type="text" name="txtage">
<br>
<br>
<input type="button" value="Check Age" onClick=biggest()">
</form>
</body>
</html>
21. Create a web page which accept 3 numbers and display the largest among them
using JavaScript.
<html>
<head>
<title> Simple interest by Javasript page </title>
</head>
<body bgcolor= f05585>
<form name ="frmlarge">
Enter First Number :
<input type="text" name="txtno1">
<br>
Enter Second Number :
<input type="text" name="txtno2">
<br>
Enter Third Number:
<input type="text" name="txtno3">
<br>
Biggest Number :
<input type="text" name="txtbig">
<br
<br>
<input type="button" value="Bi No" onClick=”biggest()">
</form>
<script Language = "JavaScript">
function biggest();
{
var n1, n2, n3, big;
n1 = Number(document.frmlarge.txtno1.value);
n2 = Number(document.frmlarge.txtno2.value);
n3 = Number(document.frmlarge.txtno3.value);
if(n1>n2)
{
if(n1>n3)
{
big=n1;
Second Year Computer Application (Commerce) Study Notes by Anil Kumar [HSSLiVE.IN]
13
}
else
{
big=n3;
}
else
{
if(n2>n3)
{
big=n2;
}
else
{
big=n3;
}
}
document.frmlarge.txtbig.value = big;
}
</script>
</body>
</html>
22. Develpe a wep page to display a given string or a number is whether Palindrom or not
using JavaScript.
<html>
<body>
<script type="text/javascript">
function Palindrome()
var revStr = "";
var str = document.getElementById("str").value;
var i = str.length;
for(var j=i; j>=0; j--)
revStr = revStr+str.charAt(j);
if(str == revStr)
Second Year Computer Application (Commerce) Study Notes by Anil Kumar [HSSLiVE.IN]
14
alert(str+" -is Palindrome");
} else
alert(str+" -is not a Palindrome");
</script>
<form >
Enter a String/Number: <input type="text" id="str" name="string" /><br />
<input type="submit" value="Check" onclick="Palindrome();"/>
</form>
</body>
</html>
Previous Years Question
1.Develop a webpage to display the following login screen.
(a)The application number should be in the range 10000 to 99999.
(b)The password should contain atleast 8 characters.
2. Design the following web page to enter the mark of a student
Second Year Computer Application (Commerce) Study Notes by Anil Kumar [HSSLiVE.IN]
15
Write JavaScript to do the following validation :
(a) Write the HTML code for the website.
(b) Provide validation for the text box using Java Script.The mark should be in
the range 0 to 100 and should be a number.The text box should not be empty.
Second Year Computer Application (Commerce) Study Notes by Anil Kumar [HSSLiVE.IN]