JAVA SCRIPT FUNDAMENTAL
Java script is a dynamic computer programming language.
It is light weight and most commonly used to develop dynamic
websites, as a part of web pages, whose implementation allow
client side script to interact with the user.
It is a case sensitive interpreted programming language with object
oriented capabilities.
It was developed by Netscape and originally called LiveScript in
1995.
Features of Java Script
It is a standard scripting and supported by most of the browser.
It is lightweight and efficient interpreted programming language.
It is complementary to and integrated with HTML and java
It is object-oriented event driven programming language.
It is open source and cross platform (independent to OS).
Importance of Java Script
It is designed for solving client side application with prompt
responds.
It can dynamically modify webpage as per requirement.
It can valid and respond user input.
It can be used to create cookies. (a piece of information on the
user’s computer by the web browser while browsing a web site.)
It does not require any interaction to web server while processing
scripts on web browser.
Simple User Interaction Functions:
Alert(msg): It helps to make alerts to the user that something has
happened.
Confirm(msg): It helps to asks the user to confirm or cancel
something
Prompt(msg, default value): it helps to ask user to enter some text
value.
Java script syntax:
It has two attributes
1. language = “javascript”
2. type = text/javascript
<script language=“javascript” type = text/javascript >
Java script code
</script>
Example:
<! DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HELLO WORLD IN JAVASCRIPT</TITLE>
<BODY>
<script language=“javascript” type = text/javascript >
[Link](“Hello world”);
</script>
</BODY>
</HTML>
JAVA SCRIPT DATA TYPES
Java script provides three types of data types:
1. Numbers
2. String
3. Boolean ----à true / false
Java script variables:
Keyword of the variable is Var
Eg:
Var sum;
Var a=1;
Var sum, a; //multiple declaration
Example:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HELLO WORLD IN JAVASCRIPT</TITLE>
<BODY>
<script language=“javascript” type = text/javascript >
Var x=100;
[Link](“The value of x=+x”);
</script>
</BODY>
</HTML>
The value is displayed on page by using the function [Link]().
The +operator also helps to concatenate the string. The value of x= and
the value of variable x.
Operators:
1. Arithmetic operators
2. Comparison Operators
3. Logical Operators
4. Assignment Operators
5. Ternary Operators (Conditional)
Control structure:
It is used to control the flow of program statements in a program.
Mainly controls structures are classified into the following two categories:
1. Branching (if else, if else if and switch case)
2. Looping (while, do while and for)
1. if else statement:
When condition is true, first statement is executed otherwise the second statement
is executed.
Syntax:
if(condition)
first statement;
else
second statement;
Example:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HELLO WORLD IN JAVASCRIPT</TITLE>
<BODY>
<script language=“javascript” type = text/javascript >
Var n=prompt(“enter a number=”);
if(n%2==0)
[Link](“number is even”+n);
else
[Link](“number is odd”+n);
</script>
</BODY>
</HTML>
2. if else if statement
When two or more conditions to be checked in a series we can use this
statement. This is also called ladder type in which statement is executed
based on multiple given conditions.
If all conditions become false then last statement is executed.
Syntax:
if(Condition 1)
first statement;
else if(condition 2)
second statement;
……
else
last statement;
Example:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HELLO WORLD IN JAVASCRIPT</TITLE>
<BODY>
<script language=“javascript” type = text/javascript >
Var a=1;
Var b=2;
Var c=3;
[Link](“<br>a=1<br>b=2<br>c=3”);
if(a>b && a>c)
[Link](“Greater Number is=”+a);
else(b>c)
[Link](“Greater Number is=”+b”);
else
[Link](“Greater Number is=”+c”);
</script>br
</BODY>
</HTML>
3. Switch case statement:
Problem is divided into multipath path statement.
It selects the case based on the value of expression of the switch statement.
Syntax:
switch(expression)
case “1”:
statements;
break;
case “2”:
statements;
break;
default:
default statement;
Example:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HELLO WORLD IN JAVASCRIPT</TITLE>
<BODY>
<script>
Var day=prompt(“enter a number=”);
switch(day)
{
case “1”:
[Link](“<br>Sunday”);
break;
case “2”:
[Link](“<br>Monday”);
break;
case “3”:
[Link](“<br>Tuesday”);
break;
case “4”:
[Link](“<br>Wednesday”);
break;
case “5”:
[Link](“<br>Thursday”);
break;
case “6”:
[Link](“<br>Friday”);
break;
case “7”:
[Link](“<br>Saturday”);
break;
default:
[Link](“<br> Invalid Day”);
}
</script>
</BODY>
</HTML>
LOOPING:
It is the process of executing the same program statement or block
of program statements repeatedly for specified number of times or
till the given condition is satisfied.
In every loop there are three expressions: initialization, condition
and counter (increment and decrement).
1. While loop:
It is entry control loop or pre test loop.
Syntax:
while(condition)
{
Statements; // Body of loop;
Increment / decrement;
}
Example:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HELLO WORLD IN JAVASCRIPT</TITLE>
<BODY>
<script language=“javascript” type = text/javascript >
var i=1;
while(i<=10)
{
[Link](“<br>” +i”);
i++;
}
</script>
</BODY>
</HTML>
2. Do….while loop
It is the exit control loop or post test loop.
Syntax:
do
statement;
increment/decrement;
while(condition);
Example:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HELLO WORLD IN JAVASCRIPT</TITLE>
<BODY>
<script language=“javascript” type = text/javascript >
var i=1;
do
{
[Link](“<br” +i”);
i++;
} while(i<=10);
</script>
</BODY>
</HTML>
3. For Loop:
It is mostly used loop in programming.
The initialization, condition and counter are defined at the same line
within the loop.
Syntax:
for(initialization; condition; counter)
Statement;
Example:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HELLO WORLD IN JAVASCRIPT</TITLE>
<BODY>
<script language=“javascript” type = text/javascript >
var i;
for(i=1; i<=10; i++)
{
[Link](“<br>”+i);
}
</script>
</BODY>
</HTML>
Object Oriented Programming:
In object-oriented programming, an object is defined as people, person thing
etc.
Object has two fundamental characteristics: the collection of properties and
set of behaviors.
Car, student, bank_account, employee, data, time etc are the examples of
objects.
The properties of car like model, make, year etc and set of behaviors are
start(), stop(), break(), turn() etc.
Accessing properties:
Properties of an object can be accessed by using syntax:
[Link]
example:
[Link]=”Toyato”
[Link]=”Rav4”
[Link]=2022
Example:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HELLO WORLD IN JAVASCRIPT</TITLE>
<BODY>
<script language=“javascript” type = text/javascript >
<h2>Java script Object</h2>
var car={
make:”Toyato”,
model:”Rav4”,
year:2022,
};
[Link]([Link]+”-”+[Link]+”-“+[Link]+”-“);
</script>
</BODY>
</HTML>
Accessing Methods:
The methods of an object can be accessed by suing syntax:
[Link]()
Example:
[Link]();
[Link]();
[Link]();
Event handling:
It is one of the features of object oriented programming.
It is an efficient and user-friendly mechanism in GUI environment.
Event is defined as an action of an application or user such as mouse click,
mouse over, pressing any key, open window, close window etc. that triggers
an action related to object.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script language=“javascript” type = text/javascript >
function test()
{
[Link](“Example of Event);
}
</script>
</HEAD>
<BODY>
<P>Click on Buttom to trigger the function</p>
<input type=”button” value=”click”>
</BODY>
</HTML>
Function () constructor:
In object oriented programming, a constructor is a special type of function
which helps to create an object.
It creates a new object wit some initial values for respective member
variables.
The keywords new Function() are used to define a new constructor.
The syntax to define a new constructor:
Var variable_name=new Function(arg1, arg2, agr3……., “function body”);
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script language=“javascript” type = text/javascript >
var area= new Function(“L”,”B”, “return L*B:”);
function display()
{
var result;
result = area(10, 20);
document. write(result);
</script>
</HEAD>
<BODY>
<P>Click on Buttom to trigger the function</p>
<form>
<input type=”button” value=”call function”>
</form>
</BODY>
</HTML>
Array object:
An array can also be defined as an object in javascript.
It is the collection of similar types of data treated as a single unit.
Each of the items of array can be accessed by using array index which starts
from 0 and ends with the array size-1, where the size defines the length n
the array.
It is defined by using the keyword: new Array()
var arrayName= new Array();
var arrayName= new Array(size); //size defines the size of array.
var a= new Array(5);
var a={“1,2,3,4,5”};
Example:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HELLO WORLD IN JAVASCRIPT</TITLE>
<BODY>
<script language=“javascript” type = text/javascript >
var a= new Array(5);
var a={“1,2,3,4,5”};
[Link](a);
</script>
</BODY>
</HTML>
