JAVASCRIPT
Chapter 6
• 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 supported by almost all web browsers.
• Javascript follows exact the same syntax of C++.
• JavaScript ignores spaces, tabs, and newlines that
appear in JavaScript programs.
• JavaScript is a case-sensitive language.
<SCRIPT> Tag
• The <SCRIPT> tag is used to include(embed)
script in an HTML page.
– Example:-
<SCRIPT Language=”JavaScript”>
</SCRIPT>
Output Functions
• The function [Link]( ) which writes a
string into our HTML document.
<html><body>
<script language="javascript" >
[Link]("Welcome to JavaScript") ;
</script>
</body></html>
Input Function
• The function prompt( ) which takes a string
from keyboard to HTML document.
<script language="javascript">
n=prompt("Enter your Name");
[Link](n);
</script>
Primitive data types
• The three primitive data types in JavaScript
– Number
– String
– 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
• Variables are used for storing values.
• They are declared using the keyword var as:
var x;
• The variable definition is complete only when
it is assigned a value as follows.
var x, y;
x = 30;
y = “ Kerala”;
• In the above example, the variable x is of Number type
and y is of String type
A web page to find the sum of two numbers
<HTML>
<HEAD> <TITLE>JAVASCRIPT_DEMO</TITLE> </HEAD>
<BODY>
<SCRIPT Language="JavaScript">
var a,b,c;
a=10; b=2; c=a+b;
[Link]("Sum is");
[Link](c);
</SCRIPT>
</BODY> </HTML>
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.
• Functions can be placed in the < HEAD> Tag of
<HTML> Tag.
• A function in JavaScript does not return type.
• A function is defined using the function
keyword.
• The function statements are enclosed in curly
brace { } .
• Once a function is defined it can be called
A web page to find the sum of two numbers Using Function
<HTML><HEAD> <TITLE>JAVASCRIPT_DEMO</TITLE>
<SCRIPT Language="JavaScript">
function sum()
{ var a,b,c;
a=10; b=2;
c=a+b;
[Link]("Sum is");
[Link](c);
}
</SCRIPT> </HEAD>
<BODY>
<SCRIPT Language="JavaScript">
sum( );
</SCRIPT>
</BODY>
</HTML>
Operators in JavaScript
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;
[Link](c);
• Output:-Hello How are you
Number function in JavaScript
• The Number( ) function is used to convert a string
data into a number.
– Example:-Number(“42”); //returns 42
– Number(“eggs”); //returns NaN
• String that can’t be converted to number returns
NaN.
– Number(false);//returns 0
– Note:-NaN stands for Not a Number.
– Eg: [Link](Number(true));//returns 1
Built-in Functions
1) alert( ) function
The alert( ) function is used to display a message
on the screen.
– 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
string.
– isNaN(test_value);
– Eg: isNaN(“Test ”); output: true
– Eg: isNaN(“24”); output: false
3) toUpperCase ( ) function
This function converts a string into uppercase.
a=”abcd”;
b=[Link]( );
[Link](b);
Output:ABCD
4) toLowerCase( ) function
This function converts a string to lowercase.
a=”abcd”;
b=[Link]( );
[Link](b);
Output: abcd
5) charAt( ) function
The charAt() method returns the character at
the specified index in a string.
var str = "HELLO WORLD";
var res = [Link](1);
returns E
6) length Property
The length property returns the length of a
string(number of characters).
Example:-var a=”Welcome”;
var len=[Link];
[Link](len);
Output:-7
Control structures in JavaScript
• Control structures are used to alter the normal
sequence of execution of a program.
• They are If, while, switch, for etc. Syntax same
as in C++
1) if statement
The if statement executes a group of statements
based on a condition. The syntax is
if(test_expression)
{
Statements;
}
2) While .......... Loop
The while loop executes a group of statements
repeatedly based on a condition. The syntax
is
while(expression)
{
statements; }
3) Switch statement
The Switch statement is a multi-branching
statement, which executes statement based on
value of the expression.
switch(expression)
{
case value1:statement1;break;
case value2:ststement2;break;
…..
default:statement;
}
4) for......Loop
The for loop executes a group of statements
repeatedly. The syntax is
for(initialisation;expression;update_statement)
{
Statements;
}
Accessing values in a textbox
• 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= [Link];
The above statement stores the value in txtnum in
variable n.
JavaScript Events
• JavaScript’s interaction with HTML is
controlled using events. JavaScripts reacts to
events (click, keydown, keyup etc). Events are
actions that are initiated by the user.
Mouse Events
Different methods to add script
• 1) Script can be placed inside the <BODY>
• 2) Script can be placed inside the <Head>
– Placing the script in <HEAD> tag helps to execute
scripts faster as the head section is loaded before
the body section.
• 3) Scripts can be placed into an external file ,
saved with .’js’ extension.
• When scripts are placed in an external file it
can be used by multiple HTML pages and also
helps to load pages faster. For example,
• <script Type=”text/JavaScript” src=”[Link]”>
– The above code links the external file named
[Link] to the HTML page
Thanku
