Java Script Learning

8/11/2019 Java Script Learning

1/189

Java Script

JavaScriptis a powerful, object-based scripting

language;JavaScriptprograms can be embedded directly in HTML

web pages.

When combined with the Document Object Model(DOM) defined

by a web browser, JavaScriptallows you to create DynamicHTMLcontent and interactive client-side web

applications. JavaScriptsyntax is based on the popular

programming languages C, C++, andJava, which makes it familiar

and easy to learn for experienced

programmers. At the same time, JavaScriptis an interpreted scripting language,

providing a flexible programming environment in which new programmers can learn

easily.

Introduction to JavaScript

What is JavaScript?

Htmlis providing static web pages but with the developments in internet& World

Wide Webthe interactive communication became a necessity. The World Wide Webis

a heap of pages having information if form of text, graphics, pictures, soundsetc.

Every page is linked to another page on web and the linked page can have links to other

pages.

Browseris a programresponsible to understand and interpret the language and

perform according to the instructions written in HTML file. Internet

Explorer,Netscape Navigator, Fire Foxetc. are such programs.

HTML, JavaScriptis integrated with browser & this integration enables the

programmer to add dynamic interaction to the text, picture, information on the web

page. JavaScript is case sensitive language i.e.; state is different from State or STATE

(these are three different words for JavaScript). JavaScript is capable of sensing the

events like mousing clicking, mousing moving etc. JavaScript files are directly executed

when user double clicks on them or opens them in Browser.


JavaScript is Java or what?

No, JavaScriptis not java.

Javais a complex and much more powerful language like C& C++.

While

HTML, JavaScriptare integrated with browser & this integration enables the

programmer to add dynamic interactionto the text, picture, information on the web

page. JavaScriptis case sensitive language i.e.; state is different from State


2/189

orSTATE(these are three different words for JavaScript). JavaScriptis capable of

sensing the events like mousing clicking, mousing moving etc. JavaScript filesare

directly executed when user double clickson them or opens them in Browser.

HTML codersare not programmerbut using JavaScriptan html operatorcan do

programming in a very simple way because JavaScriptis very simple and easy to learn

and understand. JavaScriptis capable of making a static pageas dynamic page,

where the programmer can put variables. JavaScripthas the ability to sense

theeventslike mouse click, movement, keyboardingeventsetc. We can

use HTMLinJavaScripti.e. JavaScript can understand HTML. The JavaScript

programhence decreasing the unnecessary traffic on lines and useless processing at

server end can validate the data fed by the user at client end.


What we can do using JavaScript?

HTML codersare not programmerbut using JavaScripta html operator can do

programming in a very simple way because JavaScriptis very simple and easy to learn


where the programmer can put variables. JavaScripthas the ability to sense the

events like mousing click, movement, keyboarding events etc. We can use HTML in

JavaScript i.e. JavaScript can understand HTML. The JavaScript programhence

decreasing the unnecessary traffic on lines and useless processing at server end can

validate the data fed by the user at client end.


What we should know before learning JavaScript ?

We should have knowledge of HTMLbefore learning JavaScript. A JavaScript

programcan be typed in heador in bodypart of the HTMLpage or it could

beattached externallyto the web page.


What minimum Hardware and Software requirements are to runJavaScript?

Hardware Requirements

Processor: 486 dx4 or above

RAM: 16 MB

VDU: VGA or SVGA

HDD: 1.2 GB or above


3/189

Software Requirements

Operating System: Windows or Linux with browser

Text Editor: Any text editor likes notepad or editplus etc.


How to use JavaScript into HTML code?

A JavaScript programcan be kept in html pageunder JavaScript

program tag. We can place unlimited number of scripts in the html

program in heador bodysection.

Keeping JavaScript in head section

If we want that the JavaScript programshould be executedwhen it is called, then

we should keep it in head section.

How to keep JavaScript in head section of a HTML file:

script code

This is just syntax(how & where to type), we will learn it in detail after learning

functions.

Keeping JavaScript in body section

If we want that the scriptshould be executedwhen the page loads then we should

keep the JavaScript programin body section.

How to keep JavaScript in body section of a HTML file :


4/189

script code

This is just syntax(how & where to type) we will learn it in detail after learning

variables.


Is semi colon needed to end the statement in JavaScript?

Putting semi colorat the end of the statementis optional, if you want you can place

else you can leave. Putting semi colorat end of the statement depends on the user's

choice.

HTML codersare not programmer but using JavaScriptan html operatorcan do

programming in a very simple way because JavaScript is very simple and easy to learn


where the programmer can put variables. JavaScripthas the ability to sense the

events like mouse click, movement, keyboarding eventsetc. We can

use HTMLinJavaScripti.e. JavaScript can understand HTML. The JavaScript program

hencedecreasingthe unnecessary trafficon lines and useless processing at server

end can validate the data fed by the user at client end.

HTML, JavaScriptare integrated with browser& this integrationenables the

programmer to add dynamic interactionto the text, picture, information on theweb

page. JavaScriptis case sensitive language i.e.; state is different from State

orSTATE(these are three different words for JavaScript). JavaScriptis capable of

sensing the events like mousing clicking, mousing movingetc. JavaScript filesaredirectly executed when user double clickson them or opensthem in Browser.

What is Data Type & Variables?

Number


5/189

The number type deals with digits, It covers both floating point numbers andintegers.

Floating pointnumbers are like - 412.562, 9.2, 0.468

Integernumbers are like : 25, 1258, 968

Initializing number type variables

Var age = 25

Varisjavascript keyword, ageis a variable name, 25is value assigned to age

variable, variable age is of number type because the value assigned to age is ofnumber

type.

Var hra = 1585.56

Varisjavascript keyword, hra is a variable name, 1585.56is value assigned to hra

variable, variable hra is of number type because the value assigned to hra is of

number type.

In the examplegiven below we have used keyworddocument.write(messge) which

is used to print the message or variable value given with it.

Example

var age=25 document.write("Age is : "+age);

Understanding the program

tagis the start of ajavascript program, varis to declare a variable of

name age and 25 is the value assigned to the variable age. document.writeis used to

print the given message and/orvalue of a given variable. We have used +signhere

which is used to concatenate the message (Age is :) and the value of variablea (25).

Output of this program


6/189

Age is : 25

Click here to view this program in browser

Example

var hra=1585.25 document.write("HRA is : "+hra);


tagis the start of ajavascript program, var is to declare a variable of name

hra and 1585.25 is the value assigned to the variable hra. document.writeis used to

print the given message and/or value of a given variable. We have used +sign here

which is used to concatenate the message ( HRA is : ) and the value of variable a

(1585.25).


String

String type deals with a single character or a series of characters enclosed withsingle quotes or double quotes respectively.

Initializing string type variables

var sect = a

varis JavaScript keyword, sect is a variable name, ais value assigned to sect

variable, variable sect is of string type because the value assigned to sect is of string

type.

var country=India

var is JavaScript keyword, country is a variable name, India is value assigned to

country variable, variable country is of string typebecause the value assigned to
http://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exnumber.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exnumber.php


7/189

country is of string type.

In the examplegiven below we have used keyword document.write(message )

which is used to print the messageor variablevalue given with it.

Example 1

var sect=a

document.write("Section is : "+sect);


tag is the start of a JavaScript program, var is to declare a variable ofname sect and a is the value assigned to the variable sect. document.writeis used

to print the given message and/orvalue of a given variable. We have used +sign here

which is used to concatenate the message(Section is : ) and the value of

variable sect (a).


sectoion is : a

Click here to run this program in browser

Example 2:
http://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exstring.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exstring.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exstring.php


8/189

var country=India

document.write("Country is : "+country);


tag is the start of a JavaScript program, var is to declare a variable of

name country andIndia

is the value assigned to the variablecountry.document.write is used to print the given message and/orvalue of a given

variable. We have used +sign here which is used

to concatenatethe message( Country is :) and the value of variable country

(India).


Country is : India

Click here to run this program in browser


Boolean

Boolean type has only two values true and false. These constant values are case-sensitive.

Initializing Boolean type variables

var present = true

var is JavaScript keyword, present is a variable name, true is value assigned to

present variable, variable present is of Boolean type because the value assigned topresent is of boolean type.

In the example given below we have used keyword document.write (message )which is used to print the message or variable value given with it.

Example 1
http://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/ex1string.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/ex1string.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/ex1string.php


9/189

var present = truevar attend = falsedocument.write("Student Status in School : "+present);

document.write("
Class Attended : "+attend);


present & absent are two variables of Boolean type havingvalues true and falserespectively.
is a html tag used to insert a new line.


Student Status in School : true

Class Attended : false


null & undefined

Null type has only one value, null. The null value means no data or this variable do

not have any useful data.

Undefined type has one value, undefined, undefined means nothing is stored in thisvariable. Undefined is not even null.

Initializing null type variable

var food = null

var is JavaScript keyword, food is a variable name, null is value assigned to food

variable.

In the example given below we have used keyword document.write(message)

which is used to printthe message or variable valuegiven with it.

Example 1


10/189

var food=null

document.write("food is : "+food);


foodis a variable of null type having no type of valuesor data.

output of this programfood is : null

click here to view result of this program in browser

Knowing undefined type variablevar food ;

var is JavaScript keyword, food is a variable name, no value is assigned to variable

food.

In the examplegiven below we have used keyword document.write(message)

which is used to print the message or variable value given with it.

Example 2

var food;

document.write("food is : "+food);
http://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exnull%20&%20undefined.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exnull%20&%20undefined.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exnull%20&%20undefined.php


11/189


food is a variable of undefined type, because nothing is defined to it .

Output of this programfood is : undefined


infinity and NAN

infinity is a property of a number. It represents mathematical infinity.

Example

Var infi= 1e400*1e350;

Var isjavascript keyword, infi is a variable name, 1e400 * 1e350value assigned

toinfi variable.

In the examplegiven below we have used keyword document.write(message)

which is used to print the messageor variablevalue given with it.

Example 1

var infi = 1e300 * 1e300;

document.write("Value stored in infi is : "+infi);


12/189


13/189

the same name in an ordered way. It helps in creating many variables. There is no

need of remembering their names because they all have the same name but different

positions in the array. The count of location in an array starts from 0not from 1,

means thefirst locationis 0th location and 12this 11th.

Declaring an array variable

Method 1var d = new Array (One, Two, Three, Four);

Understanding the declaration

varis reserve word

d- is the name of the array

new - is a reserve word , sets that much number of locations in memory as much

parameters given with Array( );

Array( )- is a reserve word , provides the input to new that how much memory

locations are to be reserved.

One, Two, Three, Fourare the values to set in d named array variable as

much the count of these variables is that much of locations in memory will

be reservedby new (reserve word).

Method 2var sales = new Array (12);

Understanding the declaration

varis reserve word

sales- is the name of the array

new- is a reserve word , sets that much number of locations in memory as much

parameters given with Array( ), in this case 12 locationswill be occupied;

Array( )- is a reserve word , provides the input to new that how much memory

locationsare to be reserved. 12is the count of locations to be reserved.

Assigning values to an array locations

Sales[0] = Rubber;

Sales [1] = 12000;


14/189

Sales[2] = Plastic;

Sales [3] = 18000;

At 0thposition of sales named arraythe value isRubber and

at 1stposition12000is stored. So we can place different data types data in the samearray.

Example 1

var d = new Array("One","Two","Three","Four");document.write("Value at 0th position of d is "+d[0]);document.write("
Value at 1st position of d is "+d[1]);document.write("
Value at 2nd position of d is "+d[2]);

document.write("
Value at 3rd position of d is "+d[3]);

Output is

Value at 0th position of d is One

Value at 1st position of d is Two

Value at 2nd position of d is Three

Value at 3rd position of d is Four

Example 2

var sales = new Array(12);sales[0]="Rubber";sales[1]=12000;sales[2]="Plastic"sales[3]=18000;document.write("Value at 0th position of sales is "+sales[0]);document.write("
Value at 1st position of sales is "+sales[1]);

Output is

Value at 0th position of sales is Rubber

Value at 1st position of sales is 12000

Popup Boxes


15/189

Alert Box

Alert boxis a dialog boxwhich displays a message in a small window with

an OKbutton, user have to click on the ok button to proceed.

Example

alert("Hit me to proceed")

document.write(" Have a nice day ");

Understanding the program:

Usercan type his desired messagewith the alert boxin the quotes likealert(what

ever text user want ). This message will be displayed with the alert window to guide

the user.

Output is:

Have a nice day

Popup Boxes

Prompt Box

Prompt boxis a dialog box which displays a message in a small window with a text

box along with two buttons . One OKand other Cancel. Prompt methodhas ability to

return the text kept with theprompt method's text box, this value can be assigned

to some variable and can be used as and when require.


16/189

Example

prompt ("Enter your name", "")


A dialog boxwith a text box and two buttons will appear, the message typed

withprompt methodwill be displayed on the dialog box the text box will appear blank ,

if any text is typed at the place of blank ( ), that text will appear in the text box

ondialog box.

Click here to view result of this program on browser

Example

prompt ("Enter your name", " enter your name here")
http://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/ex1prompt.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/ex1prompt.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/ex1prompt.php


17/189

Understanding the program :

A dialog boxwith a text boxand two buttons will appear, the message typed

withprompt methodwill be displayed on the dialog box the text box will appear filled

with enter your name here text.


Storing value accepted from a prompt box in variables :

var name,address name=prompt ("Enter your name", " enter your name here")

address = prompt ("Enter your address", "Address Please ")

document.write("Your Name : "+name);

document.write("
Your Address : "+address);

Understanding program :

As we know that prompt methodhas the ability to return the text storedin its textbox, so the name fed by the user will be stored in the name variable and address of

user in address variable, which will be displayed on the screen by document.write

method.

Output is :


18/189

Your Name : Rhythm

Your Address : A -45, Preet Vihar, Delhi 110092

Popup Boxes

Confirm Box

Confirm boxis a dialog boxwhich displays a message in a small window with two

buttons. One Okand other Cancel. This method can be used to get the response of user

in positive by clicking on okand in negative by clicking on cancel. The value returned

by the confirm methodin case of OK is true and in case of Cancel is false. A

programmer can program the code for positive and negative situations depending on

the response returned by the user.

Example

a=confirm(" Want to Proceed ? ");

document.write("Your have clicked on : "+a);


If user will clicks on Okthen you have clicked on truewill appear

If user will clicks on Cancelthen you have clicked on falsewill appear

Operators

Arithmetic Operators

Arithmetic operators are used in daily life, like adding , subtracting, multiplying ,

dividing etc. The arithmetic operators are supported by JavaScript are :


19/189

Operator Description

+ Addition

- Subtraction

* Multiplication

/ Division

% Modulus

++ Increment

-- Decrement

Example

var a=40; var b = 50; var c= 5;

var d; d = a+b document.write("
Value of a is : "+a);

document.write("
Value of b is : "+b);

document.write("
Value of c is : "+c);

document.write("
Sum of a & b is : "+d);

d=b-c; document.write("
Difference of b & c is : "+d);

d= a*c;

document.write("
Multiplication of a & c is : "+d);

d=b/c;

document.write("
Quotient of Division of b & c is : "+d);

d = a%c; document.write("
Remainder of Division of a & c is : "+d);

a++; b--;

document.write(
Value of A is now +a);

document.write(
Valueof b is now +b);


20/189


Variabled store the result of every arithmetic operationwith the two operands and

displays the result. Division operator (/)returns the quotient of the division

like40/5= 8but modulus(%)returns the remainder of the division like 40%5 =

0.the value of a will get increment with one a++is equal to a=a+1and b--is equal

to b = b-1. so the value of a was 40 it got incremented with one and became 41while

the value of b was 50 and got decremented with one and became 49.

Output is:

Value of a is: 40

Value of b is: 50Value of c is: 5

Sum of a & b is: 90

Difference of b & c is: 45

Multiplication of a & c is: 200

Quotient of Division of b & c is: 10

Remainder of Division of a & c is: 0

Value of A is now 41

Value of b is now 49

Operators

Logical Operators

Logical operatorsare used to perform Boolean operations on operands. Logical

operatorsare and (&&), or ( || ), not (!). The value returnedafter using a logical

operator is Boolean valuetrue or false. Logical operators are connectors of

expressions also.

Operator Description

&&Both the expression should be correct then it returns trueelse itreturns false. It is known as andoperator

||If Any of the given expressions is found truethen itreturnstrueelseit returns false.

!If the given expression is trueit returns falseand if givenexpression is falseit returns true.

Example


21/189

var a=9

var b=8

var c=25

document.write("
a is : "+a)

document.write("
a is : "+b)

document.write("
a is : "+c)

document.write("
is a greater than b and greater c also ? : "+(a>b && a>c))document.write("
is a greater than b or greater c ? : "+(a>b || a>c))document.write("
not c is greater than a ? : "+!(c>a))

Output:

a is : 9a is : 8a is : 25is a greater than b and greater c also ? : falseis a greater than b or greater c ? : truenot c is greater than a ? : false

Operators

Assignment Operators

As the name suggest these operators are used to assign valuesto variables. Theright

hand value or variable is assigned to the left hand variable. Different assignment

operators are listed below with these use.

Operator Description Example


22/189

=This operator is used to assign value of variable/value only atright hand of it to the variable at left hand of this operator.

a=5 b=6c=a+b

+= Increments the left hand variable with the right hand variablea+=b ora=a+b

-= Decrements the left hand variable with the right hand variablea-=b or a=a-b

*= Multiplies the left hand variable with the right hand variable a*=b ora=a*b

/= Divides the left hand variable with the right hand variablea/=b ora=a/b

%=Keeps the remainder of division of left hand variable by righthand variable in the left hand variable

a%=b ora=a%b

Example

var a,b

a=5

b = 6

document.write("
Value of a : "+a);

document.write("
Value of b : "+b);

a+=b;

document.write("
Value of a after a+=b : "+a);

a-=b

document.write("
Value of a after a-=b : "+a);

a*=b

document.write("
Value of a after a*=b : "+a);

a/=b

document.write("
Value of a after a/=b : "+a);


23/189

a%=b

document.write("
Value of a after a%=b : "+a);

Output:

Value of a : 5Value of b : 6Value of a after a+=b : 11Value of a after a-=b : 5Value of a after a*=b : 30Value of a after a/=b : 5Value of a after a%=b : 5

Operators

Comparison Operators

As the name suggest these operatorsare used to comparetwo variablevalues. The

left hand variable is compared with the right hand operator using these operators. The

answer returned after use of these expressions is a Boolean valuewhich tell that

whether comparisons is true or false. A programmercan program for either

situation.Different comparison operators are listed below.

Operator Description Example

== This operator is used to compare valueor variable at right hand of it to thevariable at left hand of this operator.

A==b 5==9 (returns false)

=== This three times equal sign is calledstrictly equal sign it checks for valuesas well type of datas contained by thevariables at left hand and right hand

A=90 B=90 C=90 A===B willreturn true because value of A & B is90 and both are number A===C willreturn false because value of A & C is90 but types are different

!= This operator is called not equal itchecks whether the left and rightoperands are not equal then it returnstrue else returns false

A=50 B=90 C=50 A!=B will returntrue A!=C will return false

> This operator is known as greater thanif the left operand is greater than rightoperand then returns true else returnfalse

A=45 B=15 C=90 a>b will returntrue a>c will return false

< This operator is known as less than ifthe left operand is less than rightoperand then returns true else returnfalse

A=45 B=15 C=90 A=b will returnfalse A>=c will return true because


24/189

greater than or equal to right handoperand then it returns true else false

both are equal.

=b));

document.write("
Result of ad) : " + (a>d));


25/189

document.write("
Result of (b


26/189

var a=" India "

var b = "Gate"

var c= a+b

document.write("
Value of a "+a);

document.write("
Value of b "+b);

document.write("
Value of c "+c);

Output:

Value of a IndiaValue of b GateValue of c IndiaGate

Operators

Ternary Operators

Ternary operatorrequire one expression, on variable or value for truecase and one

variable or value for false case. If the condition in given expression is found true it

assigns value to variable present in true value position else the value of false value

position will be assigned.

variable = condition ? true value : false value

Variableto which you want to assign value = condition ?in case of condition

is truethis value will be assigned : in case of condition is false this value will be

assigned

like:

var p=90var a = p>100 ? 25:50

p is having value 90we are comparing that whether p is greater than 100which is


27/189

false because pis 90so the value 50will be assigned to a. If p =150then value

25will be assigned to a.

Example

var a=50

var b b= a>=50 ? "Greater then or equal to 50 " : "Lesser than 50"document.write("
Value of a "+a);

document.write("
Value of b "+b);


valueof a is 50we are checking that if a is greaterthan or equalto 50thenGreater

than or equal to 50should be assigned to it elseLesser than 50should beassigned to variable b . here value of a is 50 so the condition becomes true

andGreater than or equal to 50will be placed in variable b.

Output:

Value of a 50Value of b Greater then or equal to 50

Type Convertion

Conversion to Boolean

Conversionto Booleanmeans a number or string type variableis changing it's type

to Boolean. In JavaScripta variable can contain any type of data and the data

contained by the variable represents the type of that variable. Type

conversioninJavaScriptis done implicitly . The conversion to Boolean is very easy it

could be seen by below given program.

Example


28/189

var str, num, bool str="ram";

num=20 bool=true

document.write("
type of str is : "+typeof(str));

document.write("
Value of str is : "+ (str));

document.write("
type of num is : "+typeof(num));

document.write("
Value of num is : "+ (num));

document.write("
type of bool is : "+typeof(bool));

document.write("
Value of bool is : "+ (bool));

str=bool num = bool

document.write("
type of str is : "+typeof(str));

document.write("
Value of str is : "+ (str));

document.write("
type of num is : "+typeof(num));

document.write("
Value of num is : "+ (num));

document.write("
type of bool is : "+typeof(bool));

document.write("
Value of bool is : "+ (bool));


boolis having value trueof Boolean type, strof type string and numof number

type, so str and num will get the value of bool and will become of type Boolean. We

have used a method typeof() , which is used to know the data type of any variable

given with this method.


29/189

Output:

type of str is : stringValue of str is : ramtype of num is : numberValue of num is : 20type of bool is : booleanValue of bool is : truetype of str is : booleanValue of str is : truetype of num is : booleanValue of num is : truetype of bool is : booleanValue of bool is : true

Type Convertion

Conversion to Number

Conversionto Number meansa Booleanor string type variable is changing it's type to

Number. In JavaScripta variable can contain any type of data and the data contained by the

variable represents the type of that variable. Type conversion in JavaScript is done implicitly .

The conversion to Number is very easy it could be seen by below given program.

Example

var a,b,c;

c= false

b= "23"

a=20

document.write("
Value of c "+c);

document.write("
Value of b "+b);

document.write("
Value of a "+a);


30/189

document.write("
Data type of c "+typeof(c));

document.write("
Data type of b "+typeof(b));

document.write("
Data type of a "+typeof(a));

c=a

document.write("
After conversion Data type of c "+typeof(c));

b=a

document.write("
After conversion Data type of b "+typeof(b));


In the above given program ais of number type, bis of string type, cis ofBoolean

typebut when number variable (a)is assigned to b& cthey both becomes of number

type.

Output:

Value of c falseValue of b 23Value of a 20Data type of c booleanData type of b string

Data type of a numberAfter conversion Data type of c numberAfter conversion Data type of b number

Type Convertion

Conversion to String

Conversionto String meansa number or Boolean typevariable is changing it's type

to String. In JavaScripta variable can contain any type of data and the data

containedby the variable represents the type of that variable. Type

conversioninJavaScript is done implicitly . The conversion to Stringis very easy it

could be seen by below given program.

Example


31/189

var a,b,c;

c= false

b= "23"

a=20

document.write("
Value of c "+c);

document.write("
Value of b "+b);

document.write("
Value of a "+a);

document.write("
Data type of c "+typeof(c));

document.write("
Data type of b "+typeof(b));

document.write("
Data type of a "+typeof(a));

c=b

document.write("
After conversion Data type of c "+typeof(c));

a=b

document.write("
After conversion Data type of a "+typeof(a));


In the above given program ais of number type, bis of string type, cis ofBoolean

typebut when string variable (b) is assigned toa & cthey both becomes of string

type.


32/189

Output:

Value of c falseValue of b 23

Value of a 20

Data type of c boolean

Data type of b string

Data type of a number

After conversion Data type of c string

After conversion Data type of a string


ParseInt():-

This functionis used to converta number dataof string typeto number type.

If there are two numbersof string type dataand we want to perform arithmetic

calculationwith them then we should use parseIntor parseFloat() functionsto

convert the type of values to number because the arithmetic calculationscan be

performed only with number type data.

var a,b,c;

c= "15"

b= "25"

a=20

document.write("
Value of c "+c+" type of c is "+typeof(c));
http://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/ex2constring.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/ex2constring.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/ex2constring.php


33/189

document.write("
Value of b "+b+ "type of b is " + typeof(b));document.write("
Value of a "+a+"type of a is "+typeof(a));

a = c+b+a

document.write("
without using any conversion function result of a=a+b+c is"+a);

a=20

a = parseInt(c)+parseInt(b)+parseInt(a)

document.write("
After using parseInt function result is "+a);

output is:

Value of c 15 type of c is string

Value of b 25type of b is string

Value of a 20type of a is number

without using any conversion function result of a=a+b+c is 152520

After using parseInt function result is 60

ParseFloat() :-

This functionis used to converta floating numberof string typeto number type.

Example:


34/189

var a,b,c;

c= "15.25"

b= "25.62"

a=20.45

document.write("
Value of c "+c+" type of c is "+typeof(c));document.write("
Value of b "+b+ "type of b is " + typeof(b));document.write("
Value of a "+a+"type of a is "+typeof(a));

a = c+b+a

document.write("
without using any conversion function result of a=a+b+c is"+a);

a=20.45

a = parseFloat(c)+parseFloat(b)+parseFloat(a)

document.write("
After using parseInt function result is "+a);

Output is:

Value of c 15.25 type of c is string

Value of b 25.62type of b is string

Value of a 20.45type of a is number

without using any conversion function result of a=a+b+c is 15.2525.6220.45

After using parseInt function result is 61.32000000000001

Condition Checking

If statement

We can usethis statement if we want to executea set of code in case the given

conditionis true. Let us say if today is Sunday go to market.

syntax (How it is written):

if (condition)


35/189

{

job to be done if condition is found true

}

Example

var a,b;

a=100

b=50

document.write("
Value of a "+a);

document.write("
Value of b "+b);

if (a>b)

{

document.write("
value of a is greater than b ");

}


Value of ais 100and value of bis 50. In if statement, we are checking that

if aisgreaterthan bthen the message should be printed.

Output:

Value of a 100Value of b 50value of a is greater than b


36/189

Condition Checking

if - - else statement

We can usethis statement if we want to execute a set of code in case the given

condition is trueand other code in case of given condition is false. For example:

if today is Sunday

go to market

else go to office

syntax (How to write):

if (condition)

{

job to be done if condition is found true

}

else

{

job to be done if condition is found false

}

Example

var a,b;

a=parseInt(prompt("Enter value for a",""))

b=parseInt(prompt("Enter value for b",""))

document.write("
Value of a "+a);


37/189


38/189

syntax (How to write) :

switch(variablename)

{

case 1 :

code to be executed

break

case 2 :

code to be executed

break

case 3 :

code to be executed

break

default :

code to be executed if non of the above give cases are found

}

Example

var day

a=parseInt(prompt("Enter Weekday please",""))

switch(a)

{

case 1:


39/189

document.write("
It is Sunday ");

document.write("
Enjoy...");

break

case 2:

document.write("
It is Monday ");

document.write("
go to College ");

break

case 3:

document.write("
It is Tuesday ");

document.write("
go to College ");

break

case 4:

document.write("
It is Wednesday ");

document.write("
go to College ");

break

case 5:

document.write("
It is Thrusday ");

document.write("
go to College ");

break

case 6:

document.write("
It is Friday ");

document.write("
go to College ");

break

case 7:

document.write("
It is Saturday ");

document.write("
go to College ");


40/189


41/189

var a=0;

while(a


42/189


43/189

the loopand terminationandincrement/decrementsegments are executed every

time till the condition remains true.

syntax:

for(initialization; termination; increment/decrement)

{

code to be executed

}

Example

var a;

for(a=100;a>0;a-=5)

{

document.write(" "+a)

}


Value of a is initially 100 , the condition with for loop is while ais greater 0the

statements typed should be executed. a-=5 means a=a-5, so the awill

getdecrementedwith 5every time. As soon as a becomes 0the loop gets

terminated.

Output:

100 95 90 85 80 75 70 65 60 55 50 45 40 35 30 25 20 15 10 5

Looping


44/189

break and continue

These statementsare used with in a loop. Breakas the name suggests is usedtobreakor terminate the loopin between & continue is to continue the loop

breakingit for current loop value.

break:

This statement breaks the loop & shifts the control out of the loop.

continue:

This statement breaks the loop for current value and resumes the loop with new value.

Example for break:

var count;

for(count=0;count10)

{

break

}


45/189

document.write(" "+count)

}

Understanding program:

The loop gets terminatedbecause we have kept a conditionthat if the count is more

than 10 than break, break statement will end the loop at that point.

Output is:

0 1 2 3 4 5 6 7 8 9 10


Example for continue:

var count;

for(count=0;count


46/189

continue

}

document.write(" "+count)

}


As soon as the value of count becomes equals to 10, the loop gets terminatedfor

this value and the loop resumes with new value.

Output is:

0 1 2 3 4 5 6 7 8 9 11 12 13 14 15 16 17 18 19

Looping

for - - in

This loop is used with arrays and objects , to access their elements andproperties respectively.

In for..in loopingthe variable starts from zeroand increases itself with one until it

reach to the length of array.

Syntax:

for( variablename in objectname)

{

lines to be executed

}

Example:


47/189

var color;

var shop=new Array()

shop[0]="Red"

shop[1]="Blue"

shop[2]="Green"

shop[3]="Yellow"

shop[4]="Magenta"

for(color in shop)

{

document.write("
"+shop[color]);

}


Coloris a undefined variableand shopis an array, when color is kept as a subscript

of array shop then the color variable becomes of number typeand from 0 to 4 gets

incremented by for in loop. It is increased up to 4only because shop arrayhave 5

elements and an array start from 0 position.

Output is:Red

BlueGreenYellowMagenta

Function


48/189

User defined simple functions

Function is a set of statementsrecognized by a name and can be used as and when

required (it is reusable). In JavaScript functionscan be created inside

theJavaScript tagonly. functionis a reserve word after which we type the name ofthe function to be created and then brackets. The code from where the function starts

and where ends is kept in side curly braces.

Syntax:

function functionname()

{

lines to be kept under this name

}

Example:

function ff()

{

document.write("Have a nice day");

}

function pp()

{

document.write("Try again");


49/189

}

var a

a=parseInt(prompt("Enter value",""));

if(a>10)

{

ff()

}

else

{

pp()

}


In the above program ff function is being called if the value entered is more than

10else pp functionis called. Function ff contains a line showing a message have a

nice dayand function pp contains a line showing messages Try again , so which

function will be calleddepends on the value entered.

Output is:

If value entered is more than 10 then

Have a nice day

Else

Try again


Example
http://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exuserdeffunction.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exuserdeffunction.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exuserdeffunction.php


50/189

function ff()

{

document.bgColor="red";

}


We created a button and onclick eventof that button we calledthe function ff(), in

which we have typed that the background colorof the document should be turned to

red.

Function

Parameterized functions

Function is a set of statementsrecognized by a name and can be used as and when

required (it is reusable).

A functioncan accept parametersand can used those accepted values for his

purpose. A function can accept many parameters to which we can manageor useas

per requirement in the code of that function.


51/189

Syntax:

function functionname(var1, var2,..)

{

lines to be kept under this name

}

Example:

function ff(f1)

{

var a,b,c

a=parseInt(f1.t1.value)

b=parseInt(f1.t2.value)

c=parseInt(f1.t3.value)

if (a>b && a>c)

{

f1.t4.value="First Value is greatest"

}

if (b>a && b>c)

{


52/189

f1.t4.value="Second Value is greatest"

} if(c>a && c>b)

{

f1.t4.value="Third Value is greatest"

}

}

Enter first Value

Enter Second Value

Enter Third Value

Result


In the above program we type numeric values in top three textboxes and on clicking

on hit mebutton we get result in fourth textboxwhich one value is greater.


Example:
http://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/ex1Parameterized%20functions.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/ex1Parameterized%20functions.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/ex1Parameterized%20functions.php


53/189

function ff(f1)

{

document.bgColor=f1.t1.value;

}

Enter the Background Color you want


we created a buttonand onclick eventof that button we calledthe function ff(), to

which we passed the function name (f1), this f1 (form)contains a textbox named

t1, the value of t1on form f1can be accessed by f1.t1.valueto which we

areassigningto the background colorof document so whatever coloryou will type in

the text boxwill appear on the background.

Function

Functions Returning Values

Functionis a set of statements recognizedby a nameand can be used as and when

required (it is reusable).

A functioncan accept parameters and can return a value back to the calling position.

The parameters accepted by a functioncan be used in the code of that function.

Syntax:


54/189

function functionname(var1, var2,..)

{

lines to be kept under this name return(variablename)

}

Example:

function max(m)

{

var x,y

y=m[0];

for(x=0;xy)

{

y=m[x]

}

}

return(y)

}

var m=new Array()

m[0]=50

m[1]=12


55/189

m[2]=99

m[3]=45

m[4]=120

m[5]=110

m[6]=22

m[7]=106

i=max(m)

document.write("Maximum Value is "+i)


An arrayis passed to the functionand the greatest value is searched in

the arrayand returned back, at calling positiona provision to keep the returned

value is kept in form of a variable, means whatever value the functionwill return, will

be kept in i variable.

Function

Recursive Functions

A functionwhich calls itself, is calleda recursive function. When A function calls

itself it gets repeatedagain and again until the desired condition meets. Recursive

functionsare such type of functions which calls themselves. A provision to escape

from indefinite loopis made in the program.

Example:


56/189

Click on me please

var a,sum a=sum=0 function recur()

{

if(a


57/189


58/189

m[7]=106

i=max(m)

document.write("Maximum Value is "+i)


In the above given program we have declared two variablesnamed aand sum a

function is there name recur which is being called onclick event(discussed in events

section), when user clicks on the web page this function will

be calledthis functionisaddingthe incremented value of a to sum variable and

calling again the recur function which again adds the new value of a to sum a conditioncheckis there to check the value of a. when it will become 101the statement typed

under else scope will get executed.

Output is:

Sum of counts from 0-100is 5050


Example:

Click on me please

var a=5 fact=1

function recur()
http://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exrecursivefunctions.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exrecursivefunctions.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exrecursivefunctions.php


59/189

{

if(a>0)

{

fact=fact*a a-- recur()

}

else

{

document.write("
Factorial of "+a+" is "+ fact)

}

}

Output is:

Factorial of 0 is 120

Function

Scope of a variable

Any variable in a function is localto that function & the variables declared outside the

function are called a global variables, the local variables can be accessed within the

function only, while global variables can be accessed anywhere in the

program.

Example:


60/189

var global=75

function pp()

{

var local=45

document.write("
This is value of a local variable "+local);

document.write("
This is value of a global variable being accessed inside the

function "+global)

}

document.write("
This is value of a global variable "+global)

document.write("
If we tried to print or access local variable's value here it willgenerate an error for non declaration of variable ")

document.write("
Click in The white area to view the value of local variable ")


In the above given program we have declared two

variablesnamed globalandlocal, global variableis declared outside the function so

it is a global variable means could be accessed in the function as well outside the

functionalso, while local variableis declared inside the function pp so it can be

accessed within the function in which it is declared , if we tried to access or print it

outside the function an error will generate showing the message that the variable is notdeclared, because the local variable do not have that scope where we are accessing it

so it requires a separate declaration.

Output is:

This is value of a local variable 45


61/189

This is value of a global variablebeing accessed inside the function 75


Example:

var global =75

function mm()

{

var local local=45

document.write("
local variable's Value inside mm function "+local);

document.write("
Global Variable's Value inside mm function "+global) pp();

}

function pp()

{

local=12 document.write("
local variable's Value inside pp function "+local);

document.write("
Global Variable's Value inside pp function"+global)

}

document.write("
Global Variable's Value outside function "+global)

document.write("
Click on Me");
http://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exScope%20of%20a%20variable.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exScope%20of%20a%20variable.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exScope%20of%20a%20variable.php


62/189

Output is:

local variable's Value inside mm function 45

Global Variable's Value inside mm function 75

local variable's Value inside pp function 12

Global Variable's Value inside pp function75

Events

onBlur events

This event occurswhen objects loses the focus. When we move to other object and

looses one object the first object is called blurred orlost focus. In javascript we can

program this loosing focus using the onblur event.

Example:

events

In this example we used Javascript with in inverted quotes

just type text in text boxes and click on button

Name :


63/189

document.all.tt1.style.color='white'">

Address :


Example:

events


just type text in text boxes and click on button

Name :

Address :
http://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exeventonblur.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exeventonblur.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exeventonblur.php


64/189

Events

onclick events

This event occurs when the user clickson an object. When the mouse left

buttonisclicked on an object the onclick event fires to which we can connect withafunctionalityand can it programmed accordingly.

Example:

events


65/189

events


66/189

events


Name :

Address :

click here to view result of this program on browser

Example:

events


just click in second text box and type some thing

Name :

Address :
http://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exeventonfocus.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exeventonfocus.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exeventonfocus.php


67/189

Events

Onkeydown event

This event occurs when user presses a key, at the time of pressing the key thisevent

gets fired. When user presses a key from keyboard the key goes down and as soon asthe key goes down this event gets fired and can be trapped by using onkeydown event.

A programmer can get the key pressed by the user before flashingthe character on

the screen.

Example:

events

Type character in the textbox

You will notice that the dialogbox appears before the characterappears in the textbox

name :

function ff()

{

alert("you pressed "+ event.keyCode)

}

Events

Onkeypress event

This event gets fired when the key is pressed from keyboard and the handfrom the

key gets removed. This event even can sense the shiftor alt key


68/189

pressedwhileonkeydown eventis unable to sense these special keys. So many key

combinations can be made using this event or the menu shortcut keys can be

programmed using this key event.

Example:

events


You will notice that the dialogbox appears before the character appears in thetextbox

name :

function ff()

{

alert("ASCII Code of the key you pressed :"+ event.keyCode)

}

Events

Onkeyup event

This event occurswhen a key is pressed from the keyboard and pressure from the key

gets removed. When the key comes up or there is no more pressure is on the key this

event gets fired. If a key is pressed for a long and the character got printed on screen

20 timesthis event will get firedonly once when the finger will be removed from that

key.


69/189

Example:

events


You will notice that the dialogbox appears before the character appears in thetextbox

name :

function ff()

{

alert("ASCII Code of the key you pressed :"+ event.keyCode)

}

Events

onLoad

This event occurs when the web page gets loaded, this event should be typed in body

tag of document.

Example:


70/189

events

Welcome

function wel()

{

document.bgColor='yellow'

document.fgColor='blue'

}

Events

Onmousedown events

This event occurs when the mouse left keyis pressed on some object. This event

generates when the mouse keygot pressed in onclick eventwhen it is pressed are

released then onclick event fires but onmousedown eventgets fired when the key is

pressed only before releasing the key this event gets fired.

Example:

events


71/189

Please click on the web page anywhere you want

function ff()

{

alert("You clicked at : X "+event.screenX+ " Y: "+event.screenY)

}

Events

onmousemove events

This event occurswhen the user moves mouse. The xand ycoordinates of

themouse pointerare trapped and when the position changes any of xor ythis event

fires. We can program the change of position of mouse on the web page using this

event.

Example:

events

Please move the mouse

The X axis and Y axis position of Cursor on screen will be displayed in textbox

name :


72/189


73/189

function ff1()

{

document.all.img1.width="200" document.all.img1.height="200"

}

Events

Onmouseover events

This event occurs when the cursor is brought overthe specified object,

thecoordinatesof the object are noted and if the position of cursor falls inside

those coordinatesthis event gets fired, to which we can program accordingly.

Example:

events


74/189

Events

Onmouseup events

This event occurswhen the user clickson some specified object

and releasesthemouse keythis event gets fired. The time between the clickingand

the releasingthe key is the time of fire of this event.

Example:

events

Please Drag the mouse on the web page anywhere youwant

var x,y,x1,y1 function ff()

{

x=event.screenX y=event.screenY

}

function ff1()

{

x1=event.screenX y1=event.screenY alert("You brought mouse down at : X "+x+ " Y:

"+y+ " and brought it up at X:" +x1+" Y: "+y1)

}


75/189

Events

onreset event

This event gets firedwhen user clicks on the reset buttonon a form. A form contains

reset button which fires onreset event when it is clicked resulting it vacates all the filled

objects like textbox, checkboxesetc.

Example:

events

Name :

Address :

click here to view results of this program on browser

Example:
http://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exeventonreset.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exeventonreset.php


76/189

events

Name :

Address :

function pp()

{

document.all.tt1.style.background='yellow'document.all.tt2.style.background='yellow' document.all.bb1.style.background='red'document.all.bb1.style.color='white' document.bgColor='magenta'

}

Events

onresize event

This event gets firedwhen resizesthe web page window. A web page windowcan

be resized, an onresize event gets fired when a web page window is resized, to which

we can program accordingly.

Example:


77/189


78/189

Events

onselect event

This event gets firedwhen user selects textin a textboxor text field. A text

fieldcontains textand we can select that text but when we select text of a text

fieldonselect event gets fired.

Example:

events

Name :

Address :

Educational Qualification :

10th

12th

Graduate

Post Graduate

PhD

Comments :


79/189

You can type this text and type your comments here

function ff()

{

alert("The value being set is " +document.all.tt1.value)

}

Events

onsubmit events

This event gets firedwhen user clickson the submit button. a form containssubmit

buttonwhich contains the onsubmit event. When this button is clicked this event

gets fired.

Example:

events


80/189

Name :

Address :

click here to view results of this program on browser

Example:

events

Name :

Address :

function ff()

{

alert("The value being set is " +document.all.tt1.value)

}
http://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/ex1eventonsubmit.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/ex1eventonsubmit.php


81/189

Events

Unload Events

This event occurs when the focusfrom the pagegets lostbecause of some linketc.

Example:

events

Welcome

Click on link to unload this page

hit me to unload this page

function wel()

{

document.bgColor='yellow'

document.fgColor='blue'

}

function thx()

{


82/189

alert("Thanx to visit me ")

}

DOM (Document Object Model)

DOM window

Window is the top most level object in the JavaScript hierarchy as we saw in DOM topic,

window object represents a browser window. Every tag creates an window

object. As we know that an object can have properties and methods or functions.

Window object have man properties and methods listed below to know about any

property click on that property.

Properties:

document

History

Location

Name

closed

toolbar

scrollbars

Methods

Open()

print()

alert()

confirm()

close()

moveTo()


83/189


84/189


Closed

This window property is used to know whether the specified window is closed or not

many times a processing is to be done but before that it becomes necessary to check

whether the page is open or not we can use this window property to know the status of

the window. The below given example shows how to get the status of the window in

use.

Example:

function nm()

{

if (win.closed)

{

document.write("
Sorry.. The window has been closed")

}

else

{

document.write("
The window is open enjoy.. it")

}

}
http://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exnamewindow.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exnamewindow.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exnamewindow.php


85/189

win=window.open('','Sandeep','width=150,height=150')

win.document.write("This is a new window created by sandeep , it's name is sandeep,move the window & click on the button ")


Toolbar

This window property is used to add the toolbar to the window at the time of creation of

window , Standard toolbar appears which can be used to move forward or back , go or

refresh etc. properties of the toolbar could be accessed. The below given example

shows how to set the toolbar to the window.

Example:

win=window.open('','Sandeep','width=450,height=350,toolbar')

http://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exclosedwindow.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exclosedwindow.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exclosedwindow.php


86/189


Scrollbars

This window property is used to add the scrollbars to the window at the time of creation

of window , scrollbars are used to move up or down on the page having matter more

than the window size. The below given example shows how to set the scrollbars to the

window.

Example:

win=window.open('','Sandeep','width=450,height=350,toolbar,scrollbars')



Methods

Open()
http://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/extoolbarwindow.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/extoolbarwindow.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exscrollbarwindow.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exscrollbarwindow.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exscrollbarwindow.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/extoolbarwindow.php


87/189

This window method is used to open the specified window. Using this method we can

open any window from code as and when required. The below given example shows

how to open a window using JavaScript code.

Example:

var i=0

var winname="sandeep"

for(i=0;i


88/189


89/189

Alert Box

Alert box is a dialog box which displays a message in a small window with an OK

button, user have to click on the ok button to proceed.

Example:

alert("Hit me to proceed")

document.write(" Have a nice day ");


user can type his desired message with the alert box in the quotes like alert(what ever

text user want ). This message will be displayed with the alert window to guide the

user.

output is:

Have a nice day

http://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exalert.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exalert.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exalert.php


90/189

Confirm Box

Confirm box is a dialog box which displays a message in a small window with two

buttons. One Ok and other Cancel. This method can be used to get the response of user

in positive by clicking on ok and in negative by clicking on cancel. The value returned bythe confirm method in case of OK is true and in case of Cancel is false. A programmer

can program the code for positive and negative situations depending on the response

returned by the user.

Example:

a=confirm(" Want to Proceed ? ");

document.write("Your have clicked on : "+a);

understanding the program:

If user will clicks on Ok then you have clicked on true will appear

If user will clicks on Cancel then you have clicked on false will appear


Close
http://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/ex1confirm.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/ex1confirm.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/ex1confirm.php


91/189

This window method is used to close the specified window. Using this method we can

closed any window from code as and when required. The below given example shows

how to close a window after clicking on a button.

Example:

function ff()

{

win.close()

}

win=window.open('','Sandeep','width=450,height=350,toolbar')



moveTo()
http://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exclosewindow.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exclosewindow.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exclosewindow.php


92/189

This window method is used to move the specified window to desired location on

screen. The two parameter s are passed with this function one for x coordinate and

other for y coordinate. Using this method we can position window to our desired

position using code. The below given example shows how to position a window using

JavaScript code.

Example:

var i=0

var winname="sandeep"

for(i=0;i


93/189

Prompt Box

Prompt box is a dialog box which displays a message in a small window with a text box

along with two buttons . One OK and other Cancel. Prompt method has ability to return

the text kept with the prompt methods text box , this value can be assigned to some variable and can be used as and when require.

Example:

prompt ("Enter your name", "")

understanding the program :

A dialog box with a text box and two buttons will appear, the message typed with

prompt method will be displayed on the dialog box the text box will appear blank , if

any text is typed at the place of blank ( ), that text will appear in the text box on

dialog box.


Example


94/189

prompt ("Enter your name", " enter your name here")

understanding the program :

A dialog box with a text box and two buttons will appear, the message typed with

prompt method will be displayed on the dialog box the text box will appear filled with

enter your name here text.


Storing value accepted from a prompt box in variables :

var name,address

name=prompt ("Enter your name", " enter your name here")

address = prompt ("Enter your address", "Address Please ")

document.write("Your Name : "+name);

document.write("
Your Address : "+address);


95/189


96/189

Properties

appName()

This navigator property returns the current browser's name. Different users usedifferent browser program many times it becomes very necessary to know the browser

name of the user because it is possible that some particular command do not work on

some specific browser. To know the name of the browser we can use this method.

Example:

document.write("
My current browser is : "+navigator.appName)


onLine ()

This navigator property returns true if the computer is in offline mode else false. If our

computer is online this method returns false else it returns true.

Example:
http://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exnavigatorappname.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exnavigatorappname.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exnavigatorappname.php


97/189

document.write("
My current browser is : "+navigator.onLine)


platform ()

This navigator property returns the operating system platform. Any operating system

follows a platform (some basic rules set) , like whether it is 16 bit program or 32 bit

program. This method provides facility to know the operating system platform so that

with this knowledge the user can put desired condition in his program.

Example:

document.write("
My current operating system platform is : -"+navigator.platform)
http://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exnavigatoronline.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exnavigatoronline.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exnavigatoronline.php


98/189


appCodeName ()

This navigator property returns browsers code name. Every browser performs certain

code. To know the code name of that browser we can use this method.

Example:

document.write("
My current operating system platform is : -"+navigator.appCodeName)


appVersion ()

This navigator property returns browsers platform and version (version is the

advancement level). This property is used to know that what platform the user is using
http://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exnavigatorplatform.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exnavigatorplatform.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exnavigatorappCodeName.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exnavigatorappCodeName.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exnavigatorappCodeName.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exnavigatorplatform.php


99/189

what is the version (advancement level) of users platform.

Example:

document.write("
My Browser's Details : - "+navigator.appVersion)


Method

JavaEnabled()

This navigator property returns true if the browser is java enabled else false. Java is a

very powerful language, our web page may require connectivity to a Java program but

in that case the browser should be java enabled. If the browser will not be java enabled

then the functionalities programmed in java will not work properly. To know whether

the browser is java enabled or not we can use this method.

Example:
http://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exnavigatorappVersion.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exnavigatorappVersion.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exnavigatorappVersion.php


100/189

document.write("
My Browser is Java Enabled ? : - "+navigator.javaEnabled())


DOM screen

Screen object contains information about the client's screen . Different users can have

different screen sizes and types. In case we want to create something we should keep

in mind the screen dimensions will not be same and because the screen sizes will not be

same so other properties will also require attention. The properties of screen object are

listed below.

Properties:

height

width

availHeight

availWidth

height

This screen property returns the screen height .

Example:


101/189


102/189


103/189

the height of screen in use.

Example:

document.write("
the work area height is "+screen.availheight + " px.")


DOM History

History object contains information about the URLs user has accessed or visited using

browser window. When a user access a web page the details of that web page are

stored on computer by browser in form of history. We can access these details using the

history object .The properties and methods of history object are listed below.

Properties:

Length

Methods

Back()

Forward()

Go()


104/189

Properties

length

length property of history object returns total number of elements in history list. The

number of objects in the history list may be different at different times because

generally person do not visit same number of pages. Length property returns us the

total number of pages available in history collection.

Example:

history length will tell you that how many

elements are in history list

document.write(history.length)


Method

Back()
http://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exhistorylength.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exhistorylength.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exhistorylength.php


105/189

This history objects method loads the previous URL in the history list. The page we just

left after moving to new page is history for current page. We can access the previous

page by using back() method. This method will drop us back to the previous page.

Example:

If any page is opened in the browser before

this page the it will call that page back

function ff()

{

history.back()

}


Forward()
http://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exhistoryback.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exhistoryback.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exhistoryback.php


106/189

This history objects method loads the next URL in the history list. There is a list page

name in history. To go to the page next to current page or url can be accessed by

forward () method. It will drop us on the next page to current page.

Example:

If any page is opened in the browser before

this page the it will call next page

function ff()

{

history.forward()

}

http://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exhistoryforward.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exhistoryforward.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exhistoryforward.php


107/189

go()

This history objects method loads the specified web page number in the history list. To

load any page in history we can use go () method. This method calls the specified web

page and loads it on browser.

Example:

It will call the specified page number inthe

history list

function ff()

{

history.go(-2)

}


DOM document


108/189

window is the top most level object in the JavaScript hierarchy as we saw in DOM topic,

document object is child object of window object. Object model also contains

collections. A collection is an array holding one or more objects. The collection in

document object is all which represent all the elements in the document. A document

object can be used to access all the elements on a page using all collection. The

collections, properties, objects are listed below.

Collections:

anchors[]

forms[]

images[]

Properties:

cookietitle

URL

lastmodified

Methods

getElementById()

getElementbyTagName()

write()

Collection

Anchors

Anchor collection returns details about anchors available on your web page. Anchors are

links created in a document to get connected with other documents. Using these links

we can call other specified document on the browser.

Example:


109/189

this is anchor no. 1



this is anchor no 4

Total no of anchors in this page are :

document.write(document.anchors.length);

Output is:




this is anchor no 4

Total no of anchors in this page are : 4


Example:

anchors
http://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exanchor.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exanchor.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/exanchor.php


110/189




this is anchor no 4

the name of anchor no 2 is:

document.write(document.anchors[1].name);

Output is:



this is anchor no. 3this is anchor no 4

the name of anchor 2 is : two


Example:

anchors
http://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/ex1anchor.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/ex1anchor.phphttp://ebizel.com/education/html/comp_courses/Scri

Java Script Learning

Documents

Transcript of Java Script Learning