JavaScript - Popup Boxes, Operators, Type Convertion

Popup Boxes
Operators
Type Convertion

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

<html>

<head>

</head>

<body>

alert("Hit me to proceed")

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

</script >

</body>

</html>

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

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 method's text box , this value can be assigned to some variable and can be used as and when require.

Example

<html>

<head>

</head>

<body>

prompt ("Enter your name", "")

</script >

</body>

</html>

Understanding the program:

A dialog box with a text box and two buttons will appear, the message typed with prompt method will be displayed on the dialog box the text box will appear blank , if any text is typed at the place of blank (" "), that text will appear in the text box on dialog box.

Example

<html>

<head>

</head>

<body>

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

</script >

</body>

</html>

Understanding the program :

A dialog box with a text box and two buttons will appear, the message typed with prompt method will be displayed on the dialog box the text box will appear filled with " enter your name here " text.

Storing value accepted from a prompt box in variables :

<html>

<head>

</head>

<body>

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("<br>Your Address : "+address);

</script >

</body>

</html>

Understanding program :

As we know that prompt method has the ability to return the text stored in it's text box, 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 :

Your Name : Rhythm

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

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 by the 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

<html>

<head>

</head>

<body>

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

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

</script >

</body>

</html>

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

Operators

Arithmetic Operators

Arithmetic operators are used in daily life, like adding , subtracting, multiplying , dividing etc. The arithmetic operators are supported by JavaScript are :

Operator	Description
+	Addition
-	Subtraction
*	Multiplication
/	Division
%	Modulus
++	Increment
--	Decrement

Example

<html>

<head>

</head>

<body>

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

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

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

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

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

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

d= a*c;

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

d=b/c;

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

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

a++; b--;

document.write("<br>Value of A is now "+a);

document.write("<br>Value of b is now "+b);

</script >

</body>

</html>

Understanding the program:

Variable d store the result of every arithmetic operation with the two operands and displays the result. Division operator (/) returns the quotient of the division like 40/5= 8 but 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+1 and b-- is equal to b = b-1. so the value of a was 40 it got incremented with one and became 41 while 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: 50
Value 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

Logical Operators

Logical operators are used to perform Boolean operations on operands. Logical operators are and (&&), or ( || ) , not (!) . The value returned after using a logical operator is Boolean value true or false. Logical operators are connectors of expressions also.

Operator	Description
&&	Both the expression should be correct then it returns true else it returns false. It is known as "and" operator
\|\|	If Any of the given expressions is found true then it returns true else it returns false.
!	If the given expression is true it returns false and if given expression is false it returns true.

Example

<html>

<head>

</head>

<body>

var a=9

var b=8

var c=25

document.write("<br> a is : "+a)

document.write("<br> a is : "+b)

document.write("<br> a is : "+c)

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

</script>

</body>

</html>

Output:

a is : 9
a is : 8
a is : 25
is a greater than b and greater c also ? : false
is a greater than b or greater c ? : true
not c is greater than a ? : false

Assignment Operators

As the name suggest these operators are used to assign values to variables. The right hand value or variable is assigned to the left hand variable. Different assignment operators are listed below with these use.

Operator	Description	Example
=	This operator is used to assign value of variable/value only at right hand of it to the variable at left hand of this operator.	a=5 b=6 c=a+b
+=	Increments the left hand variable with the right hand variable	a+=b or a=a+b
-=	Decrements the left hand variable with the right hand variable	a-=b or a=a-b
*=	Multiplies the left hand variable with the right hand variable	a=b or a=ab
/=	Divides the left hand variable with the right hand variable	a/=b or a=a/b
%=	Keeps the remainder of division of left hand variable by right hand variable in the left hand variable	a%=b or a=a%b

Example

<html>

<head>

</head>

<body>

var a,b

a=5

b = 6

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

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

a+=b;

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

a-=b

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

a*=b

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

a/=b

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

a%=b

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

</script>

</body>

</html>

Output:

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

Comparison Operators

As the name suggest these operators are used to compare two variable values. 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 value which tell that whether comparisons is true or false. A programmer can program for either situation. Different comparison operators are listed below.

Operator	Description	Example
==	This operator is used to compare value or variable at right hand of it to the variable at left hand of this operator.	A==b 5==9 (returns false)
===	This three times equal sign is called strictly equal sign it checks for values as well type of datas contained by the variables at left hand and right hand	A=90 B=90 C="90" A===B will return true because value of A & B is 90 and both are number A===C will return false because value of A & C is 90 but types are different
!=	This operator is called not equal it checks whether the left and right operands are not equal then it returns true else returns false	A=50 B=90 C=50 A!=B will return true A!=C will return false
>	This operator is known as greater than if the left operand is greater than right operand then returns true else return false	A=45 B=15 C=90 a>b will return true a>c will return false
<	This operator is known as less than if the left operand is less than right operand then returns true else return false	A=45 B=15 C=90 A<b will return false A<c will return true
>=	This operator is known as greater than equal to if the left hand operand is greater than or equal to right hand operand then it returns true else false	A=45 B=95 C=45 A>=b will return false A>=c will return true because both are equal.
<=	This operator is known as less than equal to if the left han operand is lesser than or equal to the right hand operand then it returns true else it returns false.	A=45 B=95 C=45 A<=b will return true A<=c will return true because both are equal.

Example

<html>

<head>

</head>

<body>

var a,b,c; var d;

a=5

b = 6

c=4

d="6"

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

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

document.write("<br>Value of c : "+c);

document.write("<br>Value of d : "+d);

document.write("<br>Result of a==b : "+(a==b));

document.write("<br>Result of a===b : "+(a===b));

document.write("<br>Result of b===d : "+(b===d));

document.write("<br>Result of a!=b : "+(a!=b))

document.write("<br>Result of a>=b : " +(a>=b));

document.write("<br>Result of a<=b : " +(a<=b));

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

document.write("<br>Result of (b<=c) : " + (b<c));

</script>

</body>

</html>

Output:

Value of a : 5
Value of b : 6
Value of c : 4
Value of d : 6
Result of a==b : false
Result of a===b : false
Result of b===d : false
Result of a!=b : true
Result of a>=b : false
Result of a<=b : true
Result of (a>d) : false
Result of (b<=c) : false

Understanding the program:

In above program, we have used all the operators described and the result is also displayed from which we can understand the functioning of comparison operators.

String Operators

A string operator joins two string values of two string variables and creates a third string value. String operators concatenates two strings. Even the value is numeric in a string variable it is also concatenated.

Like "20" + "30"

the answer will be 2030, not 50.

Operator	Description	Example
+	This operator joins the string at left hand side with the string at right hand side	A="India" B="Gate" C=A+B - C is holding a value IndiaGate

Example

<html>

<head>

</head>

<body>

var a=" India "

var b = "Gate"

var c= a+b

document.write("<br>Value of a "+a);

document.write("<br>Value of b "+b);

document.write("<br>Value of c "+c);

</script >

</body>

</html>

Output:

Value of a India
Value of b Gate
Value of c IndiaGate

Ternary Operators

Ternary operator require one expression, on variable or value for true case 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

Variable to which you want to assign value = condition ? in case of condition is true this value will be assigned : in case of condition is false this value will be assigned

like:

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

p is having value 90 we are comparing that whether p is greater than 100 which is false because p is 90 so the value 50 will be assigned to a. If p =150 then value 25 will be assigned to a.

Example

<html>

<head>

</head>

<body>

var a=50

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

document.write("<br>Value of b "+b);

</script >

</body>

</html>

Understanding program :

value of a is 50 we are checking that if a is greater than or equal to 50 then "Greater than or equal to 50" should be assigned to it else "Lesser than 50" should be assigned to variable b . here value of a is 50 so the condition becomes true and "Greater than or equal to 50" will be placed in variable b.

Output:

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

Type Convertion

Conversion to Boolean

Conversion to Boolean means a number or string type variable is changing it's type to Boolean. In JavaScript a 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 Boolean is very easy it could be seen by below given program.

Example

<html> <head> </head> <body> <script type="text/javascript"> var str, num, bool str="ram"; num=20 bool=true document.write(" <br>type of str is : "+typeof(str)); document.write(" <br>Value of str is : "+ (str)); document.write(" <br>type of num is : "+typeof(num)); document.write(" <br>Value of num is : "+ (num)); document.write("<br> type of bool is : "+typeof(bool)); document.write(" <br>Value of bool is : "+ (bool)); str=bool num = bool document.write(" <br>type of str is : "+typeof(str)); document.write(" <br>Value of str is : "+ (str)); document.write(" <br>type of num is : "+typeof(num)); document.write(" <br>Value of num is : "+ (num)); document.write("<br> type of bool is : "+typeof(bool)); document.write(" <br>Value of bool is : "+ (bool)); </script > </body> </html>

Understanding program :
bool is having value true of Boolean type, str of type string and num of 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.

Output:

type of str is : string Value of str is : ram type of num is : number Value of num is : 20 type of bool is : boolean Value of bool is : true type of str is : boolean Value of str is : true type of num is : boolean Value of num is : true type of bool is : boolean Value of bool is : true

Conversion to Number

Conversion to Number means a Boolean or string type variable is changing it's type to Number. In JavaScript a 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

<html>

<head>

</head>

<body>

var a,b,c;

c= false

b= "23"

a=20

document.write("<br>Value of c "+c);

document.write("<br>Value of b "+b);

document.write("<br>Value of a "+a);

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

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

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

c=a

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

b=a

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

</script>

</body>

</html>

Understanding program :

In the above given program a is of number type , b is of string type, c is of Boolean type but when number variable (a) is assigned to b& c they both becomes of number type.

Output:

Value of c false
Value 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 number
After conversion Data type of b numbe

Conversion to String

Conversion to String means a number or Boolean type variable is changing it's type to String. In JavaScript a 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 String is very easy it could be seen by below given program.

Example

<html>

<head>

</head>

<body>

var a,b,c;

c= false

b= "23"

a=20

document.write("<br>Value of c "+c);

document.write("<br>Value of b "+b);

document.write("<br>Value of a "+a);

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

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

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

c=b

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

a=b

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

</script>

</body>

</html>

Understanding program :

In the above given program a is of number type , b is of string type, c is of Boolean type but when string variable (b) is assigned to a & c they both becomes of string type.

Output:

Value of c false
Value of b 23
Value of a 20
Data type of c boolean
Data type of b string
Data type of a number
After conversion Data type of c string
After conversion Data type of a string

ParseInt():-

This function is used to convert a number data of string type to number type.

If there are two numbers of string type data and we want to perform arithmetic calculation with them then we should use parseInt or parseFloat() functions to convert the type of values to number because the arithmetic calculations can be performed only with number type data.

<html>

<head>

</head>

<body>

var a,b,c;

c= "15"

b= "25"

a=20

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

a = c+b+a

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

a=20

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

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

</script >

</body>

</html>

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 function is used to convert a floating number of string type to number type.

Example:

<html>

<head>

</head>

<body>

var a,b,c;

c= "15.25"

b= "25.62"

a=20.45

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

a = c+b+a

document.write("<br>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("<br>After using parseInt function result is "+a);

</script >

</body>

</html>

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

« Previous Next Chapter »

SHARE THIS PAGE

JavaScript - Popup Boxes, Operators, Type Convertion

0 Comments:

Post a Comment