Java Script Learning
-
Upload
narutobhat -
Category
Documents
-
view
223 -
download
0
Transcript of 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.
Introduction to JavaScript
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
-
8/11/2019 Java Script Learning
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.
Introduction to JavaScript
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
and understand. JavaScriptis capable of making a static pageas dynamic page,
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.
Introduction to JavaScript
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.
Introduction to JavaScript
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
-
8/11/2019 Java Script Learning
3/189
Software Requirements
Operating System: Windows or Linux with browser
Text Editor: Any text editor likes notepad or editplus etc.
Introduction to JavaScript
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 :
-
8/11/2019 Java Script Learning
4/189
script code
This is just syntax(how & where to type) we will learn it in detail after learning
variables.
Introduction to JavaScript
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
and understand. JavaScriptis capable of making a static pageas dynamic page,
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
-
8/11/2019 Java Script Learning
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
-
8/11/2019 Java Script Learning
6/189
Age is : 25
Click here to view this program in browser
Example
var hra=1585.25 document.write("HRA is : "+hra);
Understanding the program
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).
What is Data Type & Variables?
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 -
8/11/2019 Java Script Learning
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);
Understanding the program
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).
Output of this program
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/11/2019 Java Script Learning
8/189
var country=India
document.write("Country is : "+country);
Understanding the program
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).
Output of this program
Country is : India
Click here to run this program in browser
What is Data Type & Variables?
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 -
8/11/2019 Java Script Learning
9/189
var present = truevar attend = falsedocument.write("Student Status in School : "+present);
document.write("
Class Attended : "+attend);Understanding the program
present & absent are two variables of Boolean type havingvalues true and falserespectively.
is a html tag used to insert a new line.Output of this program
Student Status in School : true
Class Attended : false
What is Data Type & Variables?
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
-
8/11/2019 Java Script Learning
10/189
var food=null
document.write("food is : "+food);
Understanding the program
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 -
8/11/2019 Java Script Learning
11/189
Understanding the program
food is a variable of undefined type, because nothing is defined to it .
Output of this programfood is : undefined
What is Data Type & Variables?
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);
-
8/11/2019 Java Script Learning
12/189
-
8/11/2019 Java Script Learning
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
var- is 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
var- is 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;
-
8/11/2019 Java Script Learning
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
-
8/11/2019 Java Script Learning
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.
-
8/11/2019 Java Script Learning
16/189
Example
prompt ("Enter your name", "")
Understanding the program:
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 -
8/11/2019 Java Script Learning
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.
Click here to view result of this program on browser
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 :
http://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/ex2prompt.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/ex2prompt.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/ex2prompt.php -
8/11/2019 Java Script Learning
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);
Understanding the program:
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 :
-
8/11/2019 Java Script Learning
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); -
8/11/2019 Java Script Learning
20/189
Understanding the program:
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
-
8/11/2019 Java Script Learning
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
-
8/11/2019 Java Script Learning
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); -
8/11/2019 Java Script Learning
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
-
8/11/2019 Java Script Learning
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)); -
8/11/2019 Java Script Learning
25/189
document.write("
Result of (b -
8/11/2019 Java Script Learning
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
-
8/11/2019 Java Script Learning
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);Understanding program :
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
-
8/11/2019 Java Script Learning
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));Understanding program :
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.
-
8/11/2019 Java Script Learning
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); -
8/11/2019 Java Script Learning
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));Understanding program :
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
-
8/11/2019 Java Script Learning
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));Understanding program :
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.
-
8/11/2019 Java Script Learning
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
Click here to view result of this program on browser
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("
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
Value of c "+c+" type of c is "+typeof(c)); -
8/11/2019 Java Script Learning
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:
-
8/11/2019 Java Script Learning
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)
-
8/11/2019 Java Script Learning
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 ");}
Understanding program :
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
-
8/11/2019 Java Script Learning
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); -
8/11/2019 Java Script Learning
37/189
-
8/11/2019 Java Script Learning
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:
-
8/11/2019 Java Script Learning
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 "); -
8/11/2019 Java Script Learning
40/189
-
8/11/2019 Java Script Learning
41/189
var a=0;
while(a
-
8/11/2019 Java Script Learning
42/189
-
8/11/2019 Java Script Learning
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)
}
Understanding program :
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
-
8/11/2019 Java Script Learning
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
}
-
8/11/2019 Java Script Learning
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
Click here to view result of this program on browser
Example for continue:
var count;
for(count=0;count
-
8/11/2019 Java Script Learning
46/189
continue
}
document.write(" "+count)
}
Understanding program:
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:
-
8/11/2019 Java Script Learning
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]);}
Understanding program:
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
-
8/11/2019 Java Script Learning
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");
-
8/11/2019 Java Script Learning
49/189
}
var a
a=parseInt(prompt("Enter value",""));
if(a>10)
{
ff()
}
else
{
pp()
}
Understanding program:
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
Click here to view result of this program on browser
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 -
8/11/2019 Java Script Learning
50/189
function ff()
{
document.bgColor="red";
}
Understanding program:
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.
-
8/11/2019 Java Script Learning
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)
{
-
8/11/2019 Java Script Learning
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
Understanding program:
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.
Click here to view result of this program on browser
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 -
8/11/2019 Java Script Learning
53/189
function ff(f1)
{
document.bgColor=f1.t1.value;
}
Enter the Background Color you want
Understanding program:
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:
-
8/11/2019 Java Script Learning
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
-
8/11/2019 Java Script Learning
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)
Understanding program:
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:
-
8/11/2019 Java Script Learning
56/189
Click on me please
var a,sum a=sum=0 function recur()
{
if(a
-
8/11/2019 Java Script Learning
57/189
-
8/11/2019 Java Script Learning
58/189
m[7]=106
i=max(m)
document.write("Maximum Value is "+i)
Understanding program:
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
Click here to view result of this program on browser
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 -
8/11/2019 Java Script Learning
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:
-
8/11/2019 Java Script Learning
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 thefunction "+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 ")Understanding program:
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
-
8/11/2019 Java Script Learning
61/189
This is value of a global variablebeing accessed inside the function 75
Click here to view result of this program on browser
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("
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
Click on Me"); -
8/11/2019 Java Script Learning
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 :
-
8/11/2019 Java Script Learning
63/189
document.all.tt1.style.color='white'">
Address :
Click here to view result of this program on browser
Example:
events
In this example we used Javascript with in inverted quotes
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 -
8/11/2019 Java Script Learning
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
-
8/11/2019 Java Script Learning
65/189
events
-
8/11/2019 Java Script Learning
66/189
events
In this example we used Javascript with in inverted quotes
Name :
Address :
click here to view result of this program on browser
Example:
events
In this example we used Javascript with in inverted quotes
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 -
8/11/2019 Java Script Learning
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
-
8/11/2019 Java Script Learning
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
Type character in the textbox
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.
-
8/11/2019 Java Script Learning
69/189
Example:
events
Type character in the textbox
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:
-
8/11/2019 Java Script Learning
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
-
8/11/2019 Java Script Learning
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 :
-
8/11/2019 Java Script Learning
72/189
-
8/11/2019 Java Script Learning
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
-
8/11/2019 Java Script Learning
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)
}
-
8/11/2019 Java Script Learning
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 -
8/11/2019 Java Script Learning
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:
-
8/11/2019 Java Script Learning
77/189
-
8/11/2019 Java Script Learning
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 :
-
8/11/2019 Java Script Learning
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
-
8/11/2019 Java Script Learning
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 -
8/11/2019 Java Script Learning
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()
{
-
8/11/2019 Java Script Learning
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()
-
8/11/2019 Java Script Learning
83/189
-
8/11/2019 Java Script Learning
84/189
Click here to view result of this program on browser
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 -
8/11/2019 Java Script Learning
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 ")
Click here to view result of this program on browser
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')
win.document.write("This is a new window created by sandeep , it's name is sandeep,move the window & click on the button ")
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 -
8/11/2019 Java Script Learning
86/189
Click here to view result of this program on browser
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')
win.document.write("This is a new window created by sandeep , it's name is sandeep,move the window & click on the button ")
Click here to view result of this program on browser
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 -
8/11/2019 Java Script Learning
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
-
8/11/2019 Java Script Learning
88/189
-
8/11/2019 Java Script Learning
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 ");
Understanding the program:
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
Click here to view result of this program on browser
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 -
8/11/2019 Java Script Learning
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
Click here to view result of this program on browser
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 -
8/11/2019 Java Script Learning
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')
win.document.write("This is a new window created by sandeep , it's name is sandeep,move the window & click on the button ")
Click here to view result of this program on browser
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 -
8/11/2019 Java Script Learning
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
-
8/11/2019 Java Script Learning
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.
Click here to view result of this program on browser
Example
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 -
8/11/2019 Java Script Learning
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.
Click here to view result of this program on browser
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("
http://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/ex2prompt.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/ex2prompt.phphttp://ebizel.com/education/html/comp_courses/Scripting%20Language/Javascript/html_example/ex2prompt.php
Your Address : "+address); -
8/11/2019 Java Script Learning
95/189
-
8/11/2019 Java Script Learning
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)Click here to view result of this program on browser
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 -
8/11/2019 Java Script Learning
97/189
document.write("
My current browser is : "+navigator.onLine)Click here to view result of this program on browser
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("
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
My current operating system platform is : -"+navigator.platform) -
8/11/2019 Java Script Learning
98/189
Click here to view result of this program on browser
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)Click here to view result of this program on browser
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 -
8/11/2019 Java Script Learning
99/189
what is the version (advancement level) of users platform.
Example:
document.write("
My Browser's Details : - "+navigator.appVersion)Click here to view result of this program on browser
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 -
8/11/2019 Java Script Learning
100/189
document.write("
My Browser is Java Enabled ? : - "+navigator.javaEnabled())DOM (Document Object Model)
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:
-
8/11/2019 Java Script Learning
101/189
-
8/11/2019 Java Script Learning
102/189
-
8/11/2019 Java Script Learning
103/189
the height of screen in use.
Example:
document.write("
the work area height is "+screen.availheight + " px.")DOM (Document Object Model)
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()
-
8/11/2019 Java Script Learning
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)
Click here to view result of this program on browser
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 -
8/11/2019 Java Script Learning
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()
}
Click here to view result of this program on browser
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 -
8/11/2019 Java Script Learning
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()
}
Click here to view result of this program on browser
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 -
8/11/2019 Java Script Learning
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 Object Model)
DOM document
-
8/11/2019 Java Script Learning
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:
-
8/11/2019 Java Script Learning
109/189
this is anchor no. 1
this is anchor no. 2
this is anchor no. 3
this is anchor no 4
Total no of anchors in this page are :
document.write(document.anchors.length);
Output is:
this is anchor no. 1
this is anchor no. 2
this is anchor no. 3
this is anchor no 4
Total no of anchors in this page are : 4
Click here to view result of this program on browser
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 -
8/11/2019 Java Script Learning
110/189
this is anchor no. 1
this is anchor no. 2
this is anchor no. 3
this is anchor no 4
the name of anchor no 2 is:
document.write(document.anchors[1].name);
Output is:
this is anchor no. 1
this is anchor no. 2
this is anchor no. 3this is anchor no 4
the name of anchor 2 is : two
Click here to view result of this program on browser
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