introduction to javascript:

javascript:
javascript is a client-side scripting language
using javascript we can able to communicate with the html and using javascript we
can write the program to perform various activities in the webpage/application
generally in the webpage,we can perform following operations with javascript:
dom manipluation
form validations
events
effects
and other operations on the webpage
javascript is scripting language,beacause of that,it contains the following
language fundamentals:
characterset:
in any language we have the a set of characters, in the javascript,we have the
following:
A,B,C,D,E...Z
a,b,c,d,e,f...z
0,1,2,3,4,5,6,7,8,9
keywords:
keyword are also called as "reserved words"
these words are used for the sake a spesific purpose in the program/it is used to
perform a spesific activity in the program
the following are keywords/reserved words in the javascript:
var,let,if,else,for,do,while,class,function,new,delete,switch,case,default,break,co
ntinue,.......
datatypes:
data:
data means "which can be recorded or stored in the computer memory
is known as "data""
information:
processed data/after processing the data we will get information
in javascript,data type refers "what kind of data we have in the
variable/constant...."
in javascript we have the following datatypes:
number type:
it can allow two types of numbers:
integers:10,20,-100,-200,456,...
floating point numbers/real numbers:1.233,4.567,8.90,....
string type:
single character:a,b,c,d
sting(group of characters):hello,hai,world,....
in javascript string/character will be stored in sinlge/double quotes
example:
'a','hello,"world","bye".......

boolean type:
boolean types are two values
those are true and false
null type:
null type "nothing or no value"
undefined type:
if we not assign any value to the variable,then it is going to by default
"undefined " as the value
object type:
in the javascript the object type are arrays,strings,object......
identifiers:
identifier is a name and it is may represents variable name/constant name/function
name.......
to create an identifier in the javascript,we will use the following:
1.every identifier name must start with letter or underscore(_) only
2.every identifier must only the following characters:
all alphabets(A-Z/a-z)
all digits
underscore(_) only
3.every identifier name never be keyword name
4.identifier name may be alphanumeric(it means that it may contain
both leters and digits in the name)
variables:
variable is used to store a value and the value of the variable can changes the
throught program
to create the variable in the javascript,we need to the following syntax:
var varable_name=value;
or
var variable_name;
example:
var a=10;<---variable intilized with value at the time of decalration
var x;<---variable declaration
constants:
constant is used to store a value and the value of the constant will never changes
once we assign the value
to create the constant in javascript we will use the following:
const constant_name=value;
example:
const X=100;
operators:
in javascript we have the following operators:
airthmetic operators:
these operators are used to perform all airthmetic operations
are like addition,subtraction,multiplication,division and modulo division
+--->addition--->a=10,b=20---->a+b--->30
----->subtraction--->a=10,b=20---->a-b-->-10
*----->multiplication---->a=10,b=20--->a*b=200
/----->division------>a=10,b=20----->a/b=10/20=0.5
%---->modulo division--->a=10,b=20--->a%b--->10
**--->power---->a=10,b=3---->1000
[note:
/---->it is always gives "quotient"
%---->it is alwyas gives "remainder"
if n1%n2(n1<n2),then the remainder is "n1"
if n1%n2(n1>n2),then the remiander is "actual reminader"
20%10--->0,56%7---->0,47%3--->2
4%5--->4
]
relational operators:
relational operators are used to "compare any two values"
in javascript relational operators are going give the result in the form of
"boolean" values
the following are the relational operators in the javascript:
greater than(>):
symbol:>
example:
a=10,b=20
a>b--->false
b>a--->true
less than(>):
symbol:<
example:
a=10,b=20
a<b--->true
b<a--->false
greater than or equal to(>=):
symbol:>=
example:
a=10,b=20
a>=b--->false
b>=a--->true
less than or equal to(<=):
symbol:<=
example:
a=10,b=20
a<=b--->true
b<=a--->false
equal to(==):
symbol:==
example:
a=10,b=20
a==b--->false
a=10,b=10--->a==b--->true
not equal to:
a=10,b=20
symbol:!=
example:
a=10,b=20
a!=b-->true
a=10,b=10
a!=b--->false
logical operators:
we will use logical operators "to compare any two conditions"
we will use logical operator compare conditions and the following are the logical
operators:
logical or:
if any one condition is true,in case of logical or "the entire output is
true",otherwise false
symbol:||
example:
a=10,b=20
((a>b)||(a<b))--->true
((a>b)||(b<a))---->false
logical and:
if any one condition is false,in the case of logical and "the entire output
is false",otherwise true
symbol:&&
example:
a=10,b=20
((a>b)&&(a<b))--->false
((a>b)&&(b<a))---->false
logical not:
in the case of logical not ,the result true means false/false means true
symbol:!
example:
a=10,b=20
!((a>b)||(a<b))--->false
!((a>b)||(b<a))---->true
assignment operators:
assignment operator is used "to assign any value to the variable/constant/...."
the symbol for assignment operator is "="
to use assignment operator,we will use the following syntax:
a=10<---the value of a is 10
a+=10--->a=a+10--->a=20
a-=10---->a=a-10---->a=10
a*=10--->a=a*10---->a=100
a/=10--->a=a/10--->a=10
a%10--->a=a%10--->a=0
bitwise operators:
bitwise operators are going to perform operations on the binary data of the given
data
it means that,when we give the data to bitwise operators,the data is going to be
converted into binary,on that bitwise operations will be performed
how to write the binary numbers for given numbers:
256 128 64
32 16 8 4 2 1
1-----> 0 0 0
0 0 0 0 0 1---1
3-----> 0 0 0
0 0 0 0 1 1-->3
10-----> 0 0 0 0
0 1 0 1 0-->1010
24-----------> 0 0 0 0
1 1 0 0 0-->1100
56,78,90
56--->111000
78--->1001110
90--->1011010
bitwise or:
in case of bitwise or,"if any one value is 1",then entire output is 1,otherwise
zero
symbol:|
example:
a=10--->01010
b=20-->10100
---------------
a|b---->11110---->30
bitwise and:
in case of bitwise and,"if any one value is 0",then entire output is 0,otherwise 1
symbol:&
example:
a=10--->01010
b=20-->10100
---------------
a&b---->00000---->0
bitwise ex-or:
in case of bitwise ex-or,"if both inputs are same ",then entire output is
0,otherwise one
symbol:^
example:
a=10--->01010
b=20-->10100
---------------
a^b---->11110---->30
bitwise left shift:
symbol:<<
formula:
n<<s=n*2 power s(where s =number of times to shift)
example:
a=10,b=20
a<<4--->10<<4=10* 2 power 4=10*16=160
b<<3--->20<<3=20*2 power 3=20*8=160
bitwise right shift:
symbol:>>
formula:
n>>s=n/2 power s(where s =number of times to shift)
example:
a=10,b=20
a>>4--->10>>4=10/ 2 power 4=10/160=0
b>>3--->20>>3=20/2 power 3=20/8=2
bitwise one's complement:
symbol:~
formula:
~n=-(n+1)
example:
a=10,b=20
~a=-(a+1)=-11
~b=-(b+1)=-21
increment operator:
increment operator is a operator and it is used to increase the value by 1
generally in the javascript,we have two types of increment:
pre-increment(before):
pre-increment is used to increment value by 1 and pre-increment will increase the
value by 1 even it having any other operation also
syntax for pre-increment:
++variable_name;
example:
a=10
++a;a=11
b=(++a)+100=112//a=12,b=112
post-increment(after):
pos-increment is used to increment value by 1 and post-increment will increase the
value by 1 if after any other operation,otherwise it will increment the value
syntax for post-increment:
variable_name++;
example:
a=10
a++;a=11
b=(a++)+100=111//a=12,b=111
c=(++a)+(b++)+1000=13+111+1000=1124//a=13,b=112,c=1124
decrement operator:
decrement operator is used to decrease the value by one
in javascript we have two types decrements:
pre-decreemnt
post-decrement
pre-decrement is used to decrement value by 1 and pre-decrement will decrease the
value by 1 even it having any other operation also
syntax for pre-decrement:
--variable_name;
example:
a=10
--a;a=9
b=(--a)+100=108//a=8,b=108
post-decrement:
post-decrement is used to decrement value by 1 and post-decrement will decrease the
value by 1 after having any other operation,otherwise it performs decrement
operation only
syntax for post-decrement:
variable_name--;
example:
a=10
a--;a=9
b=(a--)+100=109//a=8,b=109
new operator:
new operator is used to create the object
generally is used to create array object,string object,we can use new operator
delete operator:
generally delete operator is used to delete the any object in the javascript
conditional operator:
this operator is used to perform any operation based on the a particular
condition,then we can use conditional operator
syntax for constional operator:
result=(condtion)?expresssion/oprend:expression/operend
here in above syntax:
"?" is represents "true" part .it means the condition is true means ,"?" part will
be excuted,otherwise ":" part will be excuted,it means that
":" is a false part
example:
a=10,b=20
c=(a>b)?a:b;
c=b
d=(a<b)?a:b;
d=a
typeof operator:
typeof operator is used to "check what type of the data is avaliable in the
variable/constant"
syntax:
typeof variable_name/constant_name;
conditinal statements:
conditional statements are also used to "execute a logic based on the condition"
in the javascript,we have the following conditional statements:
simple if-statement:
this is statement is used to "execute only one condition" at a time
the following is the syntax for simple if-statement:
if(condition)
{
//write the logic
}
if we have only one statement for "if",we will use the following syntax:
if(condtion)
statement;
if-else statement:
if we have two conditions,then we will use "if-else"
syntax for if-else:
if(condition)
{
//logic for if
}
else
{
//logic for else
}
or
if(condition)
statement;
else
statement;
else-if ladder:
if we have more than 2 conditions,then we will use "else-if ladder"
to create the else-if ladder,we will use the following statements:
if(Conditon)
{
//logic
}
else if(condition)
{
//logic
}
else if(condition)
{
//logic
}
.
.
else
{
}
rules:
else-if ladder is always start with if and always end with else
suppose,we have 10 conditions,we want to write else-if ladder,then
1 is if,1 is else and other 8 are else-if conditions
suppose we have 2 condition,then there no need to create the "else-if lader"
to create the else-if ladder we must have atleast 3 conditions
switch statement:
switch statement is used for "to execute the logic based on the choice/case value"
or to create the based on any menu
syntax for switch case statement:
switch(choice)
{
case value1:statements;break;
case value2:statements;break;
case value3:statements:break;
case value4:statements:break;
.
.
.
.
default:statement
}
nested if-else statements:
writing the conditonal statements inside another condional statements,we will use
nested condtional statements
example:
if(condtion)
{
//logic for if
if(condtion)
{
//logic
}
}
how to write the javascript code in the html or how to embed javascript code in the
html:
to write the javascript code in the html,we will use the following formats:
internal javascript:
internal javascript,wrting the javascript in side the html webpage,with a tag
called "<script></script>"
we can write the javascript code either in the <head> or <body> tag
external javascript:
we can write the javascript code saparatly and we can link the html cod e and
javascript code with help of <script> tag only
<script src="wriete the filename.js"></script>
javascript comments:
comments are used to explain about eac and every line of code in detail
comments are written by programmer or developers when they write the code
comments are increases the "reability" of the program
in javascript we have two types of comments:
single line comments:
to write the single line comments,we will use the following syntax in the
javascript:
//write the comments here
multi-line comments:
to write the comments in a multi-line we will use the following format in the
javascript:
/*write the comments here */
javascript output statements:
in the javascript we will use the following output statements:
1.document.write()<---document.write() function is used to display the output on
the webpage
2.console.log()<---console.log() fucntion is used to display the output on console
of the webpage
javscript input statements:
to take any input from the user ,in the javascript we are going to use a function
called "prompt()",by using prompt we can able to get the input from the user
1.write a javascript program to display "hello world":
<html>
<head>
<title>javascript-1</title>
</head>
<body>
<script>
document.write("hello wolrd");
console.log("hello");
</script>
</body>
</html>
2.write a javascript program to demonstrate variables:
<html>
<head>
<title>javascript-1</title>
</head>
<body>
<script>
//creating the variables
var a=10,b=20;
//printing the values of both a and b
document.write(a+"<br>");
document.write(b+"<br>");
//change the value of a and b as 100 and 200
a=100;
b=200;
//printing the values of a and b
document.write(a+"<br>");
document.write(b+"<br>");

</script>
 </body>
</html>
3.write a javascript program to demonstrate constants:
<html>
<head>
<title>javascript-1</title>
</head>
<body>
<script>
//creating the constants
const A=10,B=20;
//printing the values of both a and b
document.write(A+"<br>");
document.write(B+"<br>");
//change the value of a and b as 100 and 200
A=100;
B=200;
//printing the values of a and b
document.write(A+"<br>");
document.write(B+"<br>");

</script>
</body>
</html>
4.write a javascript program to work with airthmetic operators(+,-.*,/,%,**)
<html>
<head>
<title>javascript-1</title>
</head>
<body>
<script>
//creating the constants
var a=10,b=20;
//working with airthmetic operators
document.write((a+b)+"<br>");//30
document.write((a-b)+"<br>");//-10
document.write((a*b)+"<br>");//200
document.write((a/b)+"<br>");//0.5
document.write((a%b)+"<br>");//10
document.write((a**b)+"<br>");//100000000000000000000000
</script>
</body>
</html>
5.working with relational operators:

<html>
<head>
<title>javascript-1</title>
</head>
<body>
<script>
//creating the variables
var a=10,b=20;
//working with relational operators
document.write((a>b)+"<br>");//false
document.write((a<b)+"<br>");//true
document.write((a>=b)+"<br>");//false
document.write((a<=b)+"<br>");//true
document.write((a==b)+"<br>");//false
 document.write((a!=b)+"<br>");//true
</script>
</body>
</html>
working with assignment operators:
<html>
<head>
<title>assignment operators</title>
</head>
<body>
<script>
//taking two varibales
var a=10,b=20;
a+=10;//a=a+10=10+10=20
document.write(a+"<br>");//20
b*=200;//b=b*200=20*200=4000
document.write(b+"<br>");//4000
</script>
</body>
</html>
working with bitwise operators:
<html>
<head>
<title>assignment operators</title>
</head>
<body>
<script>
//taking two varibales
var a=10,b=20;
//bitwise-or
document.write((a|b)+"<br>");//30
//bitwise-and
document.write((a&b)+"<br>");//0
//bitwise-ex-or
document.write((a^b)+"<br>");//30
//bitwise leftshift
document.write((a<<2)+"<br>");//40
//bitwise right shift
document.write((a>>2)+"<br>");//2
//bitwise one's complement
document.write((~a)+"<br>");//-11
</script>
</body>
</html>
working with conditional operator:
<html>
<head>
<title>assignment operators</title>
</head>
<body>
<script>
//taking two varibales
var a=10,b=20;
//using conditional operator
var c=(a>b)?a:b;//c=b=20
document.write(c+"<br>");//20
//using conditional operator
var d=(a<b)?a:b;//d=a=10
document.write(d+"<br>");//10
 </script>
</body>
</html>

working with typeof operator:

<html>
<head>
<title>assignment operators</title>
</head>
<body>
<script>
//taking two varibales
var a=10,b=20;
//knowing type of data in a
document.write(typeof a+"<br>");
//knowing the type of data in b
document.write(typeof b+"<br>");
var c=1.234;
//knowing the type of data in c
document.write(typeof c+"<br>");
var d="hello";
//knowing the type of data in d
document.write(typeof d+"<br>");
</script>
</body>
</html>
working with increment operators:
<html>
<head>
<title>assignment operators</title>
</head>
<body>
<script>
//taking two varibales
var a=10,b=20;
//working with pre-increment
document.write((++a)+"<br>");//a=11
var b=(++a)+100;//b=(12)+100=112,a=12
document.write(a+"<br>");
//working with post-increment
document.write(((a++)+10)+"<br>");//22
document.write(a+"<br>");
</script>
</body>
</html>
working with decrement operators:
<html>
<head>
<title>assignment operators</title>
</head>
<body>
<script>
//taking two varibales
var a=10,b=20;
//working with pre-decrement
document.write((--a)+"<br>");//a=9
var b=(--a)+100;//b=(8)+100=108,a=8
document.write(a+"<br>");//8
//working with post-decrement
 document.write(((a--)+10)+"<br>");//18
document.write(a+"<br>");//7
</script>
</body>
</html>
write the javascript programs for the following:
1.find the area of triangle:
code:
<html>
<head>
<title>assignment operators</title>
</head>
<body>
<script>
//taking two varibales
var base=10,height=20;
//find the area
var area=(0.5)*base*height;
//displaying the area
document.write(area+"<br>")

</script>
</body>
</html>
2.find the simple interest:
code:
<html>
<head>
<title>assignment operators</title>
</head>
<body>
<script>
//taking two varibales
var p=10000,t=20,r=5;
//find the si
var si=(p*t*r)/100
//displaying the si
document.write(si+"<br>")

</script>
</body>
</html>
3.find the average of five numbers
4.find the given number is even or odd
example:
<html>
<head>
<title>assignment operators</title>
</head>
<body>
<script>
//taking two variables
var a=2;
//checking a is even or odd
(a%2==0)?document.write("a is even"):document.write("a is odd");
</script>
</body>
</html>
5.find the given number is positiv or negative
example:
<html>
<head>
<title>assignment operators</title>
</head>
<body>
<script>
//taking two variables
var a=2;
//checking a is even or odd
(a>0)?document.write("a is +ve"):document.write("a is -ve");
</script>
</body>
</html>
how to get the input from the user in the javascript:
to get the input from the user,we will use the following syntax:
in javascrit we will use a function called "prompt()",using prompt()
we can get any kind of input from the user
syntax for prompt():
var variable_name=prompt("enter the value for variable_name");
example:
var a=prompt("enter the value for a:");
var b=prompt("enter the value for b:");
example:
<html>
<head>
<title>prompt</title>
</head>
<body>
<center>
<script>
//taking the data for a,b
var a=prompt("enter the value for a:");//100
var b=prompt("enter the value for b:");//200
document.write(a+"<br>");//100
document.write(b+"<br>");//200
document.write(a+b);//100200
</script>
</center>

</body>
</html>
whatever data is comes from "prompt()" fucntion,the data is in the format of string
so,even if we give any number it is also come like string only
so,in order to get the data as it is,we need to implement a process
called "typecasting/type conversion"
typecasting/type conversion are two types:
implicit type conversion:
in this lower datatype converted atumatically into higher data type
it is done machine itself
generally,int---->float/double----->string type
it also called as "widening"
explicit type conversion:
in this type conversion,the programmer or developer will convert the data into
highder data type to lower datatype
it done by programmer /deveelopers
it is also called as "narrowing"
how to any data into integer type:
to convert any data into integer type,we will use the following fucntion:
parseInt()
syntax:
var variable_name=parseInt(prompt());
or
variable_name=parseInt(variable_name));
example:
<html>
<head>
<title>prompt</title>
</head>
<body>
<center>
<script>
//taking the data for a,b
var a=prompt("enter the value for a:");//100
var b=prompt("enter the value for b:");//200
a=parseInt(a);
b=parseInt(b);
document.write(typeof a+"<br>");//100
document.write(typeof b+"<br>");//200
document.write(a+b);//300
</script>
</center>

</body>
</html>
how to convert any type into float/real number:
to convert any type data into float/real number,in javascript,we will use a
function called as "parseFloat()"
syntax:
var variable_name=parseFloat(prompt());
or
variable_name=parseFloat(variable_name);
example:
<html>
<head>
<title>prompt</title>
</head>
<body>
<center>
<script>
//taking the data for a,b
var a=prompt("enter the value for a:");//100.12
var b=prompt("enter the value for b:");//200.23
a=parseFloat(a);
b=parseFloat(b);
document.write(typeof a+"<br>");//number
document.write(typeof b+"<br>");//number
document.write(a+b);//300.35
</script>
</center>

</body>
</html>
-----------------------------------------------------------------------------------
--
arrays:
arrays are used to store the "group of values under single name"
in general we use variable,the variable can able to store single value
arrays can be empty
arrrays can be store duplicate values
arrays can have any kind of data,based on the type of data arrays can be classified
into two types
homogeneous arrays:
in homogenelous arrays,arrays can have same kind of data
hetrogeneous arrays:
in hetrogeneous arrays,arrays can have different kinf of data
how to create the arrays in the javascript:
to create the arrays in the javascript,we will use the following syntax:
var array_name=[values_list];
or
var array_name=new Array();

in the javascipt "all array type is object type"

example:
<html>
<body>
<center>
<script>
//creating the array
var a1=[1,2,3,4,5,6,7,8,9,10];//integer type(homogeneous)
document.write(a1+"<br>");
document.write(typeof a1+"<br>");
var b1=[1,2,3,4,5,1.2,3.4,5.6,7.8];//integer,float/real
number(hetrogeneous)
document.write(b1+"<br>");
document.write(typeof b1+"<br>");
var c1=[1,2,3,1.2,3.4,"abc","cba"];//integers,float,chatacter/string
document.write(c1+"<br>");
document.write(typeof c1+"<br>");
</script>
</center>
</body>
</html>

length of the array:

length of the array=the number of elements in the array
to find the length of the array in javascript,we will use the following:
length=arrayname.length;
example:
<html>
<body>
<center>
<script>
//creating the array
var a1=[1,2,3,4,5,6,7,8,9,10];//integer type(homogeneous)
document.write(a1.length+"<br>");//10

var b1=[1,2,3,4,5,1.2,3.4,5.6,7.8];//integer,float/real
number(hetrogeneous)
document.write(b1.length+"<br>");//9

var c1=[1,2,3,1.2,3.4,"abc","cba"];//integers,float,chatacter/string
document.write(c1.length+"<br>");//7

</script>
</center>
</body>
</html>
how to access the array elements individually from the array:
to access the array elements individually from the array,we can use
a concept called "indexing"
in the javascript,the indexing will start from 0 to n-1
example:
<html>
<body>
<center>
<script>
//creating the array
var a1=[1,2,3,4,5,6,7,8,9,10];//integer type(homogeneous)
document.write(a1[0]+"<br>");//1
document.write(a1[2]+"<br>");//3
document.write(a1[4]+"<br>");//5
document.write(a1[7]+"<br>");//8
document.write(a1[9]+"<br>");//10
document.write(a1[5]+"<br>");//6

</script>
</center>
</body>
</html>

how to display the array elements using while loop:

<html>
<body>
<center>
<script>
//creating the array
var a1=[1,2,3,4,5,6,7,8,9,10];//integer type(homogeneous)
var i=0;
while(i<a1.length)
{
document.write(a1[i]+"<br>");//1 2 3 4 5 6 7 8 9 10
i++;
}

</script>
</center>
</body>
</html>
how to display the array elements using do-while loop:
<html>
<body>
<center>
<script>
//creating the array
var a1=[1,2,3,4,5,6,7,8,9,10];//integer type(homogeneous)
var i=0;
do
{
document.write(a1[i]+"<br>");//1 2 3 4 5 6 7 8 9 10
i++;
}while(i<a1.length);

</script>
 </center>
</body>
</html>
how to display the array elements using for loop:
<html>
<body>
<center>
<script>
//creating the array
var a1=[1,2,3,4,5,6,7,8,9,10];//integer type(homogeneous)
for(var i=0;i<a1.length;i++)
{
document.write(a1[i]+"<br>");//1 2 3 4 5 6 7 8 9 10

</script>
</center>
</body>
</html>
how to display the array elements using for-in loop:
<html>
<body>
<center>
<script>
//creating the array
var a1=[1,2,3,4,5,6,7,8,9,10];//integer type(homogeneous)
for(var i in a1)//here i represents "index"
{
document.write(a1[i]+"<br>");//1 2 3 4 5 6 7 8 9 10

</script>
</center>
</body>
</html>

how to print the array elements from the array using for-of loop:
<html>
<body>
<center>
<script>
//creating the array
var a1=[1,2,3,4,5,6,7,8,9,10];//integer type(homogeneous)
for(var i of a1)//here i represents "data/element/value"
{
document.write(i+"<br>");//1 2 3 4 5 6 7 8 9 10

</script>
</center>
</body>
</html>

strings:
string are "a group of characters"
to store string in the javascript we will use the following formats:
using single quotes
using double quotes
using new operator
example:
<html>
<body>
<center>
<script>
//creating the string
var s1='hello';
document.write(s1+"<br>");
document.write(typeof s1+"<br>");//string
var s2="hello";
document.write(s2+"<br>");
document.write(typeof s2+"<br>");//string
var s3=new String("hello world");
document.write(s3+"<br>");
document.write(typeof s3+"<br>");//object

</script>
</center>
</body>
</html>
in strings also "we will use same indexing like arrays"
how to pring the string using while loop:
<html>
<head>
<title>string</title>
</head>
<body>
<script>
var s1="hello world";
var i=0;
while(i<s1.length)
{
document.write(s1[i]+"<br>");
i++;
}
</script>

</body>
</html>
how to display the string using do-while loop:
<html>
<head>
<title>string</title>
</head>
<body>
<script>
var s1="hello world";
var i=0;
do
{
document.write(s1[i]+"<br>");
i++;
}while(i<s1.length);
</script>
 </body>
</html>
how to display the string using for loop:
<html>
<head>
<title>string</title>
</head>
<body>
<script>
var s1="hello world";
for(var i=0;i<s1.length;i++)
{
document.write(s1[i]+"<br>");
}
</script>

</body>
</html>
how to display the string using for in loop:
<html>
<head>
<title>string</title>
</head>
<body>
<script>
var s1="hello world";
for(var i in s1)
{
document.write(s1[i]+"<br>");
}
</script>

</body>
</html>
how to display string using for of loop:
<html>
<head>
<title>string</title>
</head>
<body>
<script>
var s1="hello world";
for(var i of s1)
{
document.write(i+"<br>");
}
</script>

</body>
</html>
functions:
function is "a block of statements which are used to perform a spesified task"
functions are avoid "code duplication/code reduancy"
it means function are follows "write once ,use any where"
function are excuted with help of "calling the functions"
function are never excuted if write the function in the program,if we want to
excute the function means we need to call the function
how to create the function in the javascript:
to create the function in the javascript we will use the following syntax:
function name_of_the fucntion(arguments)
{
//write the logic for the function
}
the arguments in the function are data/values
in javascript we have two types of arguments:
formal arguments/parameters:
the arguments which we can used in the function,are going to call as
"formal" arguments
actual arguments/parameters
the arguments which can used for the fucntion call/the argument which we pass to
the fucntion via calling are known as "actual arguments"
how to call the function:
to call the function,we will use the following syntax:
name_of_the_fucntion();
note:
every function/function will never takes always arguments
arguments to function are optional
example:
<html>
<head>
<title>string</title>
</head>
<body>
<script>
//creating the function
function display()//<--no arguments
{
document.write("this is my first function in the javascript")
}
//calling the function
display();
</script>

</body>
</html>
function types/model(what way we can write the function in the javascript):
function without arguments and without returntype:
example:
<html>
<head>
<title>string</title>
</head>
<body>
<script>
//creating the function
function display()//<--no arguments
{
var a=parseInt(prompt("eneter the value for a:"));//100
var b=parseInt(prompt("enter the value for b:"));//200
document.write(a+b);//300
}
//calling the function
display();
</script>

</body>
</html>
function with argument and without return type:
<html>
<head>
<title>string</title>
</head>
<body>
<script>
//creating the function
function display(x,y)//<--x=a,y=b
{
document.write(x+y);//300
}
var a=parseInt(prompt("eneter the value for a:"));//100
var b=parseInt(prompt("enter the value for b:"));//200

//calling the function

display(a,b);
</script>

</body>
</html>
function with arguments and with return type:
<html>
<head>
<title>string</title>
</head>
<body>
<script>
//creating the function
function display(x,y)//<--x=a,y=b
{
return x+y;//return should be last statement in any fucntion
}
var a=parseInt(prompt("eneter the value for a:"));//100
var b=parseInt(prompt("enter the value for b:"));//200

//calling the function

var result=display(a,b);
document.write(result);//300
</script>

</body>
</html>
function without arguments and with return type:
<html>
<head>
<title>string</title>
</head>
<body>
<script>
//creating the function
function display()
{
var a=parseInt(prompt("eneter the value for a:"));//100
var b=parseInt(prompt("enter the value for b:"));//200
return a+b;//return should be last statement in any fucntion
}
//calling the function
var result=display();
document.write(result);//300
 </script>

</body>
</html>
example:
<html>
<head>
<title>string</title>
</head>
<body>
<script>
//creating the function
function display()
{
var a=parseInt(prompt("eneter the value for a:"));//100
var b=parseInt(prompt("enter the value for b:"));//200
return a+b;//return should be last statement in any fucntion
}
//calling the function

document.write(display());//300
</script>

</body>
</html>
working with arrays with fucntions:
array merging:
array merging means "combing the arrays into single array"
array merging is also called as "array concatenation"
to concatenate the arrays in the javascript,we will sue a fucntion called
"concat()"
example:
<html>
<head>
<title>datalist</title>
</head>
<body>
<center>
<script>
var a=[1,2,3,4];
var b=[5,6,7,8,9];
var c=a.concat(b);
document.write(c+"<br>");//1,2,3,4,5,6,7,8,9
var d=["abc","bca","cab"];
var f=d.concat(a,b);
document.write(f+"<br>");//abc,bca,cab,1,2,3,4,5,6,7,8,9

</script>
</center>
</body>
</html>
how to copy the array elements in the array:
to copy the array elements we will use the following example:
example:
<html>
<head>
<title>datalist</title>
</head>
<body>
 <center>
<script>
var a=[1,2,3,4];
var c=a;
document.write(c+"<br>");//1,2,3,4
var d=["abc","bca","cab"];
var f=d;
document.write(f+"<br>");//abc,bca,cab

</script>
</center>
</body>
</html>
how to update the array elements in the array:
example:
<html>
<head>
<title>datalist</title>
</head>
<body>
<center>
<script>
var a=[1,2,3,4];
a[0]=100;
document.write(a+"<br>");//100,2,3,4
a[1]=200;
document.write(a+"<br>");//100,200,3,4
a[3]=500;
document.write(a+"<br>");//100,200,3,500

</script>
</center>
</body>
</html>
how to slice the arrays in the javascript:
array slicing will be done in the array with help a function called
"slice()
example-1:
<html>
<head>
<title>datalist</title>
</head>
<body>
<center>
<script>
var a=[1,2,3,4,5,6,7,8,9,10];

document.write(a.slice(0,3)+"<br>");//1,2,3
document.write(a.slice(0,7)+"<br>");//1,2,3,4,5,6,7
document.write(a.slice(0,9)+"<br>");//1,2,3,4,5,6,7,8,9

</script>
</center>
</body>
</html>
example-2:
<html>
<head>
<title>datalist</title>
 </head>
<body>
<center>
<script>
var a=[1,2,3,4,5,6,7,8,9,10];

document.write(a.slice(-5,-1)+"<br>");//6,7,8,9
document.write(a.slice(-8,-1)+"<br>");//3,4,5,6,7,8,9
document.write(a.slice(-10,-1)+"<br>");//1,2,3,4,5,6,7,8,9

</script>
</center>
</body>
</html>
example-3:
<html>
<head>
<title>datalist</title>
</head>
<body>
<center>
<script>
var a=[1,2,3,4,5,6,7,8,9,10];

document.write(a.slice(1,1)+"<br>");//empty
document.write(a.slice(4,5)+"<br>");//5
document.write(a.slice(-1,-10)+"<br>");//empty
document.write(a.slice(10,1)+"<br>");//empty
</script>
</center>
</body>
</html>
example-4:
<html>
<head>
<title>datalist</title>
</head>
<body>
<center>
<script>
var a=[1,2,3,4,5,6,7,8,9,10];

document.write(a.slice(1)+"<br>");//2,3,4,5,6,7,8,9,10
document.write(a.slice(10)+"<br>");//empty
document.write(a.slice(-5)+"<br>");//6,7,8,9,10
document.write(a.slice(-2)+"<br>");//9,10
</script>
</center>
</body>
</html>
how to reverse the array in the javascript:
<html>
<head>
<title>datalist</title>
</head>
<body>
<center>
<script>
var a=[1,2,3,4,5,6,7,8,9,10];
 //using fucntion called reverse()
document.write(a.reverse()+"<br>");
document.write(a);
a.reverse();
//using for loop
for(var i=a.length-1;i>=0;i--)
{
document.write(a[i]+"<br>");//
}
</script>
</center>
</body>
</html>
how to insert the elements to the array:
insert at begin:
<html>
<head>
<title>datalist</title>
</head>
<body>
<center>
<script>
var a=[];
//using fucntion "unshift()",we can insert the elements at begin
a.unshift(1);
document.write(a+"<br>");//1
a.unshift(2);
document.write(a+"<br>");//2,1
a.unshift(3);
document.write(a+"<br>")//3,2,1
a.unshift(4);
document.write(a+"<br>")//4,3,2,1

</script>
</center>
</body>
</html>
insert at end:
<html>
<head>
<title>datalist</title>
</head>
<body>
<center>
<script>
var a=[];
//using fucntion "push()",we can insert the elements at end
a.push(1);
document.write(a+"<br>");//1
a.push(2);
document.write(a+"<br>");//1,2
a.push(3);
document.write(a+"<br>")//1,2,3
a.push(4);
document.write(a+"<br>")//1,2,3,4

</script>
 </center>
</body>
</html>
how to delete the elements from array in the javascript:
<html>
<head>
<title>datalist</title>
</head>
<body>
<center>
<script>
var a=[1,2,3,4,5,6,7,8,9,10];
//using fucntion "pop())",we can delete the elements from end
a.pop();
document.write(a+"<br>");
a.pop();
document.write(a+"<br>");
a.pop();
document.write(a+"<br>");
a.pop();
document.write(a+"<br>");

</script>
</center>
</body>
</html>
delete at the begin:
<html>
<head>
<title>datalist</title>
</head>
<body>
<center>
<script>
var a=[1,2,3,4,5,6,7,8,9,10];
//using fucntion "shift()",we can delete the elements from start
a.shift();
document.write(a+"<br>");//2,3,4,5,6,7,8,9,10
a.shift();
document.write(a+"<br>");//3,4,5,6,7,8,9,10
a.shift();
document.write(a+"<br>");//4,5,6,7,8,9,10
a.shift();
document.write(a+"<br>");//5,6,7,8,9,10

</script>
</center>
</body>
</html>
insert the element at any position:
<html>
<head>
<title>datalist</title>
</head>
 <body>
<center>
<script>
var a=[1,2,3,4,5];
//using fucntion "splice()" fucntion we can isnert the element at any
position
a.splice(5,0,6);
document.write(a+"<br>");//1,2,3,4,5,6
a.splice(4,0,10,20);
document.write(a+"<br>");//1,2,3,4,10,20,5,6

</script>
</center>
</body>
</html>
delete the element at any position from the array:
example:
<html>
<head>
<title>datalist</title>
</head>
<body>
<center>
<script>
var a=[1,2,3,4,5,6,7,8,9,10];
//using fucntion "splice()" fucntion we can isnert the element at any
position
a.splice(5,3);
document.write(a+"<br>");//1,2,3,4,5,9,10
a.splice(4,2);
document.write(a+"<br>");//1,2,3,4,10
a.splice(2,3,10,20);
document.write(a+"<br>");//1,2,10,20

</script>
</center>
</body>
</html>

working with strings:

string concatenation or merging:
<html>
<body>
<script>
var a="hello";
var b=" world";
//using + operator
document.write(a+b+"<br>");
//using concat method
document.write(a.concat(b));
</script>
</body>
</html>
string charAt() fucntion:
<html>
<body>
<script>
var a="hello world";//
document.write(a[0]+"<br>");//h
document.write(a[1]+"<br>");//e
document.write(a.charAt(0)+"<br>");//h
document.write(a.charAt(1)+"<br>");//e
document.write(a.charAt(10));//d
</script>
</body>
</html>
string charCodeAt():
<html>
<body>
<script>
var str1="ABCDEF";
document.write(str1.charCodeAt(0)+"<br>");//65
document.write(str1.charCodeAt(1)+"<br>");//66
document.write(str1.charCodeAt(2)+"<br>");//67
document.write(str1.charCodeAt(3)+"<br>");//68
document.write(str1.charCodeAt(4)+"<br>");//69

</script>
</body>
</html>
string fromCharCode():
<html>
<body>
<script>

document.write(String.fromCharCode(97)+"<br>");//a
document.write(String.fromCharCode(98)+"<br>");//b
document.write(String.fromCharCode(105)+"<br>");//i
document.write(String.fromCharCode(59)+"<br>");//;

</script>
</body>
</html>
string indexOf():
<html>
<body>
<script>
var a="hello world hello world";
document.write(a.indexOf("hello"));//0
document.write(a.indexOf("world"));//6
document.write(a.indexOf("hai"));//-1
</script>
</body>
</html>
string lastIndexOf():
<html>
<body>
<script>
var str1="hello world,hi this is ram";
document.write(str1.lastIndexOf("i")+"<br>");
document.write(str1.lastIndexOf("h")+"<br>");
</script>
 </body>
</html>
string replace():
<html>
<body>
<script>
var a="hello world hello";
a=a.replace("hello","hi")
document.write(a+"<br>");//hi world hello
a=a.replace("hello","hi")
document.write(a+"<br>");//hi world hi

</script>
</body>
</html>
string search():
<html>
<body>
<script>
var a="hello world hello world hai how are you";
document.write(a.search("hello"));

</script>
</body>
</html>
string slice():
<html>
<body>
<script>
var a="hello world"
document.write(a.slice(0,4)+"<br>");//hell
document.write(a.slice(1,7)+"<br>");//ello w
document.write(a.slice(1,10)+"<br>");//ello wor
document.write(a.slice(4,4)+"<br>");//empty
document.write(a.slice(-5,-1)+"<br>");//worl
document.write(a.slice(-7,-1)+"<br>");//o worl
document.write(a.slice(-2,-8)+"<br>");//empty
</script>
</body>
</html>
string substr():
<html>
<body>
<script>
var a="hello world";
document.write(a.substr(0,4)+"<br>");//hello world
document.write(a.substr(5,3)+"<br>");// world
document.write(a.substr(2,6));// world
</script>
</body>
</html>
string substring():
<html>
<body>
<script>
var a="hello world";
document.write(a.substring(0,5)+"<br>");//hello
document.write(a.substring(0,7)+"<br>");
 document.write(a.substring(0,8)+"<br>");
document.write(a.substring(6,5)+"<br>");//empty
</script>
</body>
</html>
string toLowerCase():
<html>
<body>
<script>
var a="HELLO WORLD";
document.write(a.toLowerCase());
</script>
</body>
</html>
string toUpperCase():
<html>
<body>
<script>
var a="hello world";
document.write(a.toUpperCase());
</script>
</body>
</html>
-----------------------------------------------------------------------------------
--javascript events:
events are nothing but actions
to perform an action via javascript on the html elements,we can use the following
events in the javascript:
onclick():
it is used to perform an event,when we click any html element on the webpage
example:
<html>
<head>
<script>
function display()
{
alert("you clicked the buttton");
}

</script>
</head>
<body>
<button onclick="display()">clickme</button>
</body>

</html>
ondblclick():
it is used to perform an action,when we click the any html element for
2 times
example:
<html>
<head>
<script>
function display()
{
alert("you clicked the buttton for 2 times");
}
 </script>
</head>
<body>
<button ondblclick="display()">clickme</button>
</body>

</html>
onload():
it is used to perform an action,while loading of the webpage
example:
<html>
<head>
<script>
function display()
{
alert("page is loading");
}

</script>
</head>
<body onload="display()">

</body>

</html>

onresize():
it is used to perform an action,when we "resize the browser window"
example:
<html>
<head>
<script>
function display()
{
alert("browser resized");
}

</script>
</head>
<body onresize="display()">

</body>

</html>
onmouseenter():
it is used to perform an action,when we keep the mouse on any html element
example:
<html>
<head>
<script>
function display()
{
alert("mouse is entered");
}

</script>
 </head>
<body>
<p onmouseenter="display()">
this is paragraph tag
</p>
</body>

</html>
onmouseout():
it is used to perform an action when we away the mouse from the any html element
example:
<html>
<head>
<script>
function display()
{
alert("mouse is away from the paragraph tag");
}

</script>
</head>
<body>
<p onmouseout="display()">
this is paragraph tag
</p>
</body>

</html>

onmouseover()
onmouseleave()
onkeypress():
it is used to perform an action,when we press any key from the keyboard
example:
<html>
<head>
<script>
function display()
{
alert("key is pressed");
}

</script>
</head>
<body>
<input type="number" onkeypress="display()"/>
</body>
</html>
onkeyup()
onkeydown()
-----------------------------------------------------------------------------------
browser object model:
this is used to work with browser related activities with help of
"javascript"
in browser object we have the following objects:
screen:
by using screen object,we can able to know the following
width
height
availWidth
availHeight
colorDeapth
pixelDeapth
example:
<html>
<body>
<script>
document.write(screen.width+"<br>");
document.write(screen.height+"<br>");
document.write(screen.availWidth+"<br>");
document.write(screen.availHeight+"<br>");
document.write(screen.colorDepth+"<br>");
document.write(screen.pixelDepth+"<br>");
</script>
</body>
</html>
window:
prompt() or window.prompt()
alert() or window.alert()
open() or window.open()
example:
<html>
<body>
<script>
//workinh with open()
window.open("http://www.google.co.in");
open("http://www.youtube.com");
</script>
</body>
</html>
confirm():
<html>
<body>
<script>
//workinh with confirm()
var result=window.confirm("do you want to delete the file:");
if(result==true)
alert("file is deleted")
else
window.alert("file is not deleted");
</script>
</body>
</html>
settimeout():
example:
<html>
<body>
<script>
//workinh with settimeout
window.setTimeout(function(){
alert("this is timeout");
},3000);
setTimeout(function(){
alert("this is timeout");
},10000);
</script>
 </body>
</html>
navigator:
example:
<html>
<body>
<script>
//workinh with navigator
document.write(navigator.appName);
document.write(navigator.appCodeName);
document.write(navigator.appVersion);
document.write(navigator.platform);
document.write(navigator.plugins);
</script>
</body>
</html>
history
location