Scribd
Upload
269 views

Chapter 6-Client Side Scripting Using JavaScript-hsslive

The document provides an overview of client-side scripting using JavaScript. It discusses key JavaScript concepts like the <script> tag, functions, data types, variables, operators, control structures, built-in functions and events. It includes code examples to demonstrate various JavaScript features like defining functions, accessing values from textboxes, and performing arithmetic operations.

Uploaded by

Alan gomez
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
269 views

Chapter 6-Client Side Scripting Using JavaScript-hsslive

The document provides an overview of client-side scripting using JavaScript. It discusses key JavaScript concepts like the <script> tag, functions, data types, variables, operators, control structures, built-in functions and events. It includes code examples to demonstrate various JavaScript features like defining functions, accessing values from textboxes, and performing arithmetic operations.

Uploaded by

Alan gomez
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 29

HSSLIVE

Chapter 6

Client Side Scripting Using Java Script

Java Script

Java script is a client side scripting language used to validate data.It is embedded in
HTML document.The <SCRIPT> tag is used to include scripts in an HTML
page.JavaScript was developed by Brendan Eich.It is ssupported by almost all web
browsers. JavaScript was first known as LiveScript.

<SCRIPT> Tag

The <SCRIPT> tag is used to include(embed) script in an HTML page.The Language


attribute of <SCRIPT> tag specifies the type of scripting language used.

Example:

<SCRIPT Language=”JavaScript”>

</SCRIPT>

The document.write ( ) function

The function document.write which writes a string into our HTML document.

First JavaScript Script


<html>

<body>

<script language="javascript" >

document.write("Welcome to JavaScript") ;

</script>

</body>

</html>

Prepared by ANISHKUMAR G.S([email protected] 9446784924,8547572421) Page 1


HSSLIVE

Note:- We use Notepad for creating the above script and save the file with extension
.HTML or .HTM. JavaScript ignores spaces, tabs, and newlines that appear in JavaScript
programs.Java-

script is a case-sensitive language.

Creating functions in JavaScript

A function is a self-contained unit of a program that perform a specific task.It is an


independent part of a program which is executed when it is called.A function is often
referred to as a ‘black box’.Normally functions are placed in the HEAD tag of HTML.

Defining a function

Functions must be declared before they are used.A function is defined using the
function keyword.The function statements are emclosed in curley brace.Once a function
is defined it can be called many times.A function has two parts function header and
function body.

Example:- Function header Function body

function print( )

document.write(“Welcome to JavaScript Programming”);

Note:-A function in JavaScript does not return type.

Calling a function

A function can be called using its name such as, print( ).

Difference between function in JavaScript and C++

A function is a named group of instructions.A function in JavaScript is defined using the


keyword function.C++ does not use the keyword function to define a function.There is

Prepared by ANISHKUMAR G.S([email protected] 9446784924,8547572421) Page 2


HSSLIVE

no return type for a function in JavaScript,whereas a function in C++ by default eturns


an integer value.

Data types in JavaScript

Data type specifies the type of data and the operations that can be performed on the
data.data types in JavaScript is classiffied into two primitive data type and compositive
data type.

Primitive data types

The three primitive data types in JavaScript are Number,String and Boolean.

Number:-They include integers and floating point numbers.

Strings:-A string is a combination of characters,numbers or symbols enclosed within


double quotes.

Boolean:-A boolean data can be either True or False.

Variables in JavaScript

A variable is a data type whose value changes during program execution.Variables in


JavaScript are declared using the var keyword.

Example: var a;

Declares a variable a.

Example: var msg=”Hello”;

Note:-Javascript determines the typeof variable only when assigning a value.

Undefined data type

The Undefined data type is used to represent a variable that has been named, but has

had no data assigned to it. The undefined data type is similar to null, in that it only has

one possible value: undefined.

Example:-

Prepared by ANISHKUMAR G.S([email protected] 9446784924,8547572421) Page 3


HSSLIVE

A web page to find the sum of two numbers

<HTML>

<HEAD>

<TITLE>JAVASCRIPT_DEMO</TITLE>

<SCRIPT Language="JavaScript">

function sum()

var a,b,c;

a=10;

b=2;

c=a+b;

document.write("Sum is");

document.write(c);

</SCRIPT>

</HEAD>

<BODY>

<SCRIPT Language="JavaScript">

sum( );

</SCRIPT>

</BODY>

</HTML>

Output:-

Prepared by ANISHKUMAR G.S([email protected] 9446784924,8547572421) Page 4


HSSLIVE

Operators in JavaScript

An operator is a symbol used to perform a specific task.Operators in JavaScript are


classified into two,Arithmetic operator , Relational operator. and Logical operator.

Arithmetic Operator

Arithmetic operator is used to perform arithmetic operations.

Relational Operator

Relational operator is used for comparison operations.

Prepared by ANISHKUMAR G.S([email protected] 9446784924,8547572421) Page 5


HSSLIVE

Assignment Operator

The assignment operator(=) operator is used to assign a value to a variable.

Example:- var a=10;

Assigns 10 to the variable a.

Arithmetic Assignment Operator

The arithmetic assignment operators includes +=,- =,* =,/ =,% =.They are used to simplify
the use of assignment operator.

Example:-

a+=10 is equal to a=a+10

a% =10 is equal to a=a%10

Logical Operator

Logical operators are used for comparison.

Given that x = 6 and y = 3, the table below explains the logical operators:

Prepared by ANISHKUMAR G.S([email protected] 9446784924,8547572421) Page 6


HSSLIVE

Arithmetic Operator Precedence


The following table lists JavaScript arithmetic operators, ordered from highest to lowest
precedence:

Operator Precedence

() Expression grouping

++ -- Increment and decrement

*/% Multiplication, division, and modulo division

+- Addition and subtraction

String addition

The + operator can be used to add(Join) two strings.

Example:-

var a,b,c

a=”Hello”;

b=”How are you”;

c=a+b;

document.write(c);

Output:-

Hello How are you

Number function in JavaScript

The Number( ) function is used to convert a string data into a number.

Example:

Prepared by ANISHKUMAR G.S([email protected] 9446784924,8547572421) Page 7


HSSLIVE

Number(“42”); //returns 42

Number(“eggs”); //returns NaN String that can’t be converted to number retyrns NaN.

Number(true);//returns 1

Number(false);//returns 0

Note:-

NaN stands for Not a Number.

Control structures in JavaScript

Control structures are used to alter the normal sequence of execution of a program.The
important

Control structures in JavaScript are,

1)if statement

The if statement executes a group of statements based on a condition.The syntax is

if(test_expression)

Statements;

2)Switch statement

The Switch statement is a multi-branching statement,which executes statement based on


value of the expression.The syntax is

switch(expression)

case value1:statement1;break;

case value2:ststement2;break;

- -----------------------

Prepared by ANISHKUMAR G.S([email protected] 9446784924,8547572421) Page 8


HSSLIVE

Default:statement;

3)for ............Loop

The for loop executes a group of statements repeatedly.The syntax is

for(initialisation;expression;update_statement)

statements;

4)While ......... Loop

The while loop executes a group of statements repeatedly based on a condition.The


syntax is

while(expression)

statements;

Built-in Functions

Built-in functions are also called methods.The following are the important methods in
JavaScript.

1)alert( ) function

The alert( ) function is used to display a message on the screen.The syntax is

alert(“message”);

2)isNaN( ) function

The isNaN( ) function is check if a value is a number or not.The function returns True if
the value is a number.The syntax is

Prepared by ANISHKUMAR G.S([email protected] 9446784924,8547572421) Page 9


HSSLIVE

isNaN(test_value);

3)toUpperCase ( ) function

This function converts a string into uppercase.

Example:-

var a,b;

a=”abcd”;

b=a.toUpperCase( );

document.write(b);

Output:ABCD

4)toLowerCase( ) function

This function converts a string to lowercase.

5)charAt( ) function

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.

Example:-

var str = "HELLO WORLD";


var res = str.charAt(0);

returns H

length Property

The length property returns the length of a string(number of characters).

Example:-

var a=”Welcome”;

var len=a.length;

document.write(len);

Prepared by ANISHKUMAR G.S([email protected] 9446784924,8547572421) Page 10


HSSLIVE

Output:-

Difference between function and property

A function has paremeters within parenthesis after the function name,but property
doesnot have paremeters within parenthesis.

Events in JavaScript

JavaScript programs use event driven programming model.In an event driven


programming model code remains idle until called upon by an event.An event is an
action triggered(initiated) by an use such as mouseclick,keypress etc.The important
events in JavaScript are

Event Description
onClick Occurs when the user clicks on an object
onMouseEnter Occurs when the mouse pointer is moved
out of an object.
onMouseLeave Occurs when the mouse pointer is moved
out of an object.
onKeyDown Occurs when the user press a key on the
keyboard.
onKeyUp Occurs when the user releases a key on the
keyboard.

Accessing values in a textbox using JavaScript

Names are provided to textboxes to access them.

The following HTML code is used to specify name to textbox.

<INPUT Type=”Text” Name=”txtnum”;

The above textbox can be accessed as

var n= document.txtnum.value;

The above statement assigns the value in txtnum.

Different ways to add Scripts to a web page

Prepared by ANISHKUMAR G.S([email protected] 9446784924,8547572421) Page 11


HSSLIVE

JavaScript code can be placed in the Head or Body section of a web page.It can also be
placed as an external file with ‘.js’ extension.Placing JavaScript code as external file
helps to use it in multiple web pages.It also helps to load the page faster.The external
script can be linked to HTML file by the Src attribute of <Script> tag.

Placing JavaScript in head section allows to execute the script faster as the head section
is loaded before the body section.Placing the script in Body section allows to execute the
script when the page is loaded.

Conclusion:-

 JavaScript is a client side scripting language.


 JavaScript was developed by Brendan Eich for Netscape web browser.It was early
knows as Mocha.
 The <SCRIPT> tag is used to include script in HTML page.
 The JavaScript code is interpreted at runtime by JavaScript engine.JavaScript
engine is a virtual machine for executing JavScript code.
 The Keyword Var is used to declare a variable in JavaScript.
 The Keyword function is used to declare a function in JavaScript.
 The addition operator(+) is used to add two strings together.
 The document in document.write function refers to the body section of the web
page(HTML document).
 By default the content of text box is treated as string type.
 The Number( ) function is used to convert a string data into number.
 The value property of a textbox is used to access data in a textbox.

Previous Questions
1.Develop a webpage to display the following login screen.

Prepared by ANISHKUMAR G.S([email protected] 9446784924,8547572421) Page 12


HSSLIVE

Write JavaScript to do the following validation :

(a)The application number should be in the range 10000 to 99999.

(b)The password should contain atleast 8 characters. March 2016

2.Design the following web page to enter the mark of a student:

(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.
June 2016

JavaScript Practice Programs

Prepared by ANISHKUMAR G.S([email protected] 9446784924,8547572421) Page 13


HSSLIVE

1)Develop a web page to display the following screen.User can enter a number in the
first text box.On clicking the show button ,product of all numbers from 1 to the entered
limit should be displayed in the second text box.

<html>

<head>

<Script Language="JavaScript">

function Product()

var p=1,i;

var n=document.frmProduct.txtNum.value;

for(i=1;i<=n;i++)

p=p*i;

document.frmProduct.txtResult.value=p;

</Script>

</head>

<body>

<center>

<form name="frmProduct">

Enter the limit&nbsp;&nbsp;<input type="text" name="txtNum">

<br><br><br>

Prepared by ANISHKUMAR G.S([email protected] 9446784924,8547572421) Page 14


HSSLIVE

Product upto the limit&nbsp;&nbsp;<input type="text" name="txtResult">

<br><br><br>

<input type="button" value="Show" onClick="Product()">

</form>

</body>

</center>

</html>

Output:-

2)Develop a web page to display the following screen.User anter a number in the first
text box.On clicking the show button,Even or Odd should be displayed in the second text
box depending whether the number is even or odd.

<html>

<head>

<Script Language="JavaScript">

function Check()

var n=document.frmCheck.txtNum.value;

Prepared by ANISHKUMAR G.S([email protected] 9446784924,8547572421) Page 15


HSSLIVE

if(n%2==0)

document.frmCheck.txtResult.value="Even";

else

document.frmCheck.txtResult.value="Odd";

</Script>

</head>

<body>

<center>

<form name="frmCheck">

Enter a number&nbsp;&nbsp;<input type="text" name="txtNum">

<br><br><br>

The number is&nbsp;&nbsp;<input type="text" name="txtResult">

<br><br><br>

<input type="button" value="Show" onClick="Check()">

</form>

</body>

</center>

</html>

Output:-

Prepared by ANISHKUMAR G.S([email protected] 9446784924,8547572421) Page 16


HSSLIVE

3)Develop a web page to display the following screen.The user can enter an age in the
text box.if the user enter an alphabet,instead of a number in the text box,on clicking the
show button,it should display a message “Invalid Age” to the user.Other wise it should
display a message “Correct Data”.

<html>

<head>

<Script Language="JavaScript">

function Check()

var age=document.frmCheck.txtNum.value;

var flag;

flag=isNaN(age);

if(flag==true)

alert("Invalid Age");

else

alert("Correct Data");

Prepared by ANISHKUMAR G.S([email protected] 9446784924,8547572421) Page 17


HSSLIVE

</Script>

</head>

<body>

<center>

<form name="frmCheck">

Enter age &nbsp;&nbsp;<input type="text" name="txtNum">

<br><br><br>

<input type="button" value="Show" onClick="Check()">

</form>

</body>

</center>

</html>

Output:-

4) Develop a web page to display the following screen.The user can enter a number in
the text.If the user entered a Number ,on clicking the check button,it should display
“Number” other wise it should display “Not a Number”.

Prepared by ANISHKUMAR G.S([email protected] 9446784924,8547572421) Page 18


HSSLIVE

<HTML>

<HEAD>

<TITLE>Calculator</TITLE>

<SCRIPT Language="JavaScript">

function Check( )

var num;

var Flag;

num=document.frmCheck.txtNum.value;

Flag=isNaN(num);

if(Flag==true)

document.frmCheck.txtResult.value="Not a Number";

else

document.frmCheck.txtResult.value="Number";

</SCRIPT>

</HEAD>

<FORM name=frmCheck>

<CENTER>

Enter a Number:

<INPUT Type="text" name="txtNum">

Prepared by ANISHKUMAR G.S([email protected] 9446784924,8547572421) Page 19


HSSLIVE

<BR><BR>

Result:

<INPUT Type="text" name="txtResult">

<INPUT Type="button" value="Check" onClick="Check()">

</CENTER>

</FORM>

</BODY>

</HTML>

Output:-

5) A web page should contain one text box for entering a text. There should be two
buttons labelled "To Upper Case" and "To Lower Case".On clicking each button, the
content in the text box should be converted to upper case or lower case accordingly.
Write the required

JavaScript for these operations. <HTML>

<HEAD>

<TITLE>String_Convertion</TITLE>

<SCRIPT Language="JavaScript">

function upper( )

Prepared by ANISHKUMAR G.S([email protected] 9446784924,8547572421) Page 20


HSSLIVE

document.frmconvert.txtconvert.value=document.frmconvert.txtstring.value.toUpperCa
se();

function lower( )

document.frmconvert.txtconvert.value=document.frmconvert.txtstring.value.toLowerCa
se();

</SCRIPT>

</HEAD>

<BODY>

<FORM Name="frmconvert">

<CENTER>

Enter the String:

<INPUT Type="text" Name="txtstring">

<BR><BR>

<INPUT Type="text" Name="txtconvert">

<BR><BR>

<INPUT Type="button" value="“To Upper Case" onClick="upper( )">

<INPUT Type="button" value="To Lower Case”" onClick="lower( )">

Prepared by ANISHKUMAR G.S([email protected] 9446784924,8547572421) Page 21


HSSLIVE

</CENTER>

</FORM>

</BODY>

</HTML>

Output:-

6) Develop a simple calculator using JavaScript. The web page should contain two text
boxes of entering two numbers and another text box for displaying the answer. There
should be four buttons to perform addition, subtraction, multiplication and division. On
clicking a button, the corresponding result should be displayed in the answer box. Write
the required JavaScript.

<HTML>
<HEAD>
<TITLE>Calculator</TITLE>
<SCRIPT Language="JavaScript">
function plus( )
{
var num1,num2,result;
num1=document.frmcalc.txtNum1.value;
num2=document.frmcalc.txtNum2.value;
result=Number(num1)+Number(num2);
document.frmcalc.txtResult.value=result;
}
function minus( )

Prepared by ANISHKUMAR G.S([email protected] 9446784924,8547572421) Page 22


HSSLIVE

{
var num1,num2,result;
num1=document.frmcalc.txtNum1.value;
num2=document.frmcalc.txtNum2.value;
result=Number(num1)-Number(num2);
document.frmcalc.txtResult.value=result;
}
function div( )
{
var num1,num2,result;
num1=document.frmcalc.txtNum1.value;
num2=document.frmcalc.txtNum2.value;
result=Number(num1)/Number(num2);
document.frmcalc.txtResult.value=result;
}
function mul( )
{
var num1,num2,result;
num1=document.frmcalc.txtNum1.value;
num2=document.frmcalc.txtNum2.value;
result=Number(num1)*Number(num2);
document.frmcalc.txtResult.value=result;
}
</SCRIPT>
</HEAD>
<FORM name=frmcalc>
<CENTER>
Number 1
<INPUT Type="text" name="txtNum1">
<BR><BR>
Number 2
<INPUT Type="text" name="txtNum2">
<BR><BR>
Answer

Prepared by ANISHKUMAR G.S([email protected] 9446784924,8547572421) Page 23


HSSLIVE

<INPUT Type="text" name="txtResult">


<BR><BR>
<INPUT Type="button" value="+" onClick="plus()">
<INPUT Type="button" value="-" onClick="minus()">
<INPUT Type="button" value="*" onClick="mul()">
<INPUT Type="button" value="/" onClick="div()">
</CENTER>
</FORM>
</BODY>
</HTML>
Output:-

7) Develop a web page to find the capital of Indian States. The page should contain a
dropdown list from which the user can select a state.On clicking the show button, the
web page should display the capital of the state in another text box. Write the required
JavaScript.

<HTML>
<HEAD>
<TITLE>Capital Of States</TITLE>
<SCRIPT Language="JavaScript">
function Capital( )
{
var n,answer;
n=document.frmCapital.cboState.selectedIndex;

Prepared by ANISHKUMAR G.S([email protected] 9446784924,8547572421) Page 24


HSSLIVE

switch (n)
{
case 0: answer="Thiruvananthapuram";break;
case 1:answer="Bengaluru";break;
case 2:answer="Chennai";break;
case 3:answer="Mumbai";break;
}
document.frmCapital.txtCapital.value=answer;
}
</SCRIPT>
</HEAD>
<FORM Name="frmCapital">
<CENTER>State:
<SELECT Size=1 Name="cboState">
<OPTION>Kerala</OPTION>
<OPTION>Karnataka</OPTION>
<OPTION>Tamilnadu</OPTION>
<OPTION>Maharashtra</OPTION>
</SELECT>
<BR><BR>
Capital:
<INPUT Type="Text" Name="txtCapital">
<BR><BR>
<INPUT Type="Button" value="Show" onClick="Capital ( )">
</CENTER>
</FORM>
</BODY>
</HTML>
Output:-

Prepared by ANISHKUMAR G.S([email protected] 9446784924,8547572421) Page 25


HSSLIVE

8)Develop a web page to accept a Register Number of a student.Provide validation for this
textbox.The validation are 1)It should not be empty 2)It should be a number 3)It should be
greater than 8 characters.

<html>

<head>

<title>Javascript-Validation</title>

<Script Language="Javascript">

function checkData()

var rno=document.frmvalid.txtRegno.value;

if(rno==" ")

alert("Please enter Register Number");

if(isNaN(rno))

alert("Invalid Register Number");

Prepared by ANISHKUMAR G.S([email protected] 9446784924,8547572421) Page 26


HSSLIVE

if(rno.length<8)

alert("The register No must have 8 Characters");

</Script>

</head>

<body>

<form name="frmvalid">

Enter Register Number&nbsp;&nbsp;

<input type="text" name="txtRegno">

<br>

<input type="submit" value="Get Result" onClick="checkData()">

</form>

</body>

</html>

Output:-

Prepared by ANISHKUMAR G.S([email protected] 9446784924,8547572421) Page 27


HSSLIVE

9)Develop a webpage to find the factorial of a given number .User can enter a number
in a text box.On clicking the Show button factorial should be displayed on second text
box.

<html>

<head>

<Script Language="JavaScript">

function factorial()

var f=1,i;

var n=document.frmfact.txtNum.value;

for(i=1;i<=n;i++)

f=f*i;

document.frmfact.txtResult.value=f;

</Script>

</Head>

<body>

<center>

<form name="frmfact">

Enter the Number:&nbsp;&nbsp;

<input type="text" name="txtNum" >

<br> <br> <br>

Prepared by ANISHKUMAR G.S([email protected] 9446784924,8547572421) Page 28


HSSLIVE

Factorial:&nbsp;

<input type="text" name="txtResult">

<br>

<input type ="button" value="show" onClick="factorial()">

</form>

</body>

</center>

</html>

Output:-

Prepared by ANISHKUMAR G.S([email protected] 9446784924,8547572421) Page 29

You might also like