Unit II- Scripting
JavaScript is an object-based scripting language which is lightweight and cross-
platform. JavaScript (js) is a light-weight object-oriented programming language
which is used by several websites for scripting the webpages. It is an interpreted,
full-fledged programming language that enables dynamic interactivity on
websites when applied to an HTML document. It was introduced in the year 1995
for adding programs to the webpages in the Netscape Navigator browser.
Features of JavaScript
There are following features of JavaScript:
1. All popular web browsers support JavaScript as they provide built-in
execution environments.
2. JavaScript follows the syntax and structure of the C programming language.
Thus, it is a structured programming language.
3. JavaScript is a weakly typed language, where certain types are implicitly cast
(depending on the operation).
4. JavaScript is an object-oriented programming language that uses prototypes
rather than using classes for inheritance.
5. It is a light-weighted and interpreted language. It is a case-sensitive language.
Application of JavaScript
JavaScript is used to create interactive websites. It is mainly used for:
Client-side validation,
Dynamic drop-down menus,
Displaying date and time,
Displaying pop-up windows and dialog boxes (like an alert dialog box,
confirm dialog box and prompt dialog box),
Displaying clocks etc.
JavaScript Example
1. <script>
2. document.write("Hello JavaScript by JavaScript");
3. </script>
JavaScript Variable
A JavaScript variable is simply a name of storage location. There are two types of
variables in JavaScript : local variable and global variable.
There are some rules while declaring a JavaScript variable (also known as
identifiers).
1. Name must start with a letter (a to z or A to Z), underscore( _ ), or dollar(
$ ) sign.
2. After first letter we can use digits (0 to 9), for example value1.
3. JavaScript variables are case sensitive, for example x and X are different
variables.
Correct JavaScript variables
1. var x = 10;
2. var _value="sonoo";
Incorrect JavaScript variables
1. var 123=30;
2. var *aa=320;
JavaScript local variable
A JavaScript local variable is declared inside block or function. It is accessible
within the function or block only. For example:
1. <script>
2. function abc(){
3. var x=10;//local variable
4. }
5. </script>
JavaScript global variable
A JavaScript global variable is accessible from any function. A variable i.e.
declared outside the function or declared with window object is known as
global variable. For
example:
1. <script>
2. var data=200;//gloabal variab
3. function a(){
4. document.writeln(data);
5. }
6. function b(){
7. document.writeln(data);
8. }
9. a();//calling JavaScript function
10. b();
11. </script>
JavaScript Data Types
JavaScript provides different data types to hold different types of values.
There are
two types of data types in JavaScript.
1. Primitive data type
2. Non-primitive (reference) data type
JavaScript is a dynamic type language, means you don't need to specify
type of the variable because it is dynamically used by JavaScript engine.
You need to use var here to specify the data type. It can hold any type of
values such as numbers, strings etc. For
example:
1. var a=40;//holding number
2. var b="Rahul";//holding string
JavaScript primitive data types
There are five types of primitive data types in JavaScript. They are as follows:
Data Type Description
String represents sequence of characters e.g. "hello"
Number represents numeric values e.g. 100
Boolean represents boolean value either false or true
Undefined represents undefined value
Null represents null i.e. no value at all
JavaScript non-primitive data types
The non-primitive data types are as follows:
Data Type Description
Object represents instance through which we can access members
Array represents group of similar values
RegExp represents regular expression
JavaScript Operators
JavaScript operators are symbols that are used to perform operations on
operands.
For example:
1. var sum=10+20;
Here, + is the arithmetic operator and = is the assignment operator.
There are following types of operators in JavaScript.
1) Arithmetic Operators
2) Comparison (Relational) Operators
3) Bitwise Operators
4) Logical Operators
5) Assignment Operators
6) Special Operators
JavaScript Arithmetic Operators
Arithmetic operators are used to perform arithmetic operations on the
operands. The following operators are known as JavaScript arithmetic
operators.
Operator Description Example
+ Addition 10+20 = 30
- Subtraction 20-10 = 10
* Multiplication 10*20 = 200
/ Division 20/10 = 2
% Modulus (Remainder) 20%10 = 0
++ Increment var a=10; a++; Now a =11
-- Decrement var a=10; a--; Now a =9
JavaScript Comparison Operators
The JavaScript comparison operator compares the two operands. The
comparison
operators are as follows:
Operator Description Example
== Is equal to 10==20 =
false
=== Identical (equal and of 10==20 =
same type) false
!= Not equal to 10!=20 = true
!== Not Identical 20!==20 =
false
> Greater than 20>10 = true
>= Greater than or equal to 20>=10 = true
< Less than 20<10 = false
<= Less than or equal to 20<=10 =
false
JavaScript Bitwise Operators
The bitwise operators perform bitwise operations on operands. The bitwise
operators are as follows:
Operator Description Example
& Bitwise AND (10==20 & 20==33) =
false
| Bitwise OR (10==20 | 20==33) =
false
^ Bitwise XOR (10==20 ^ 20==33) =
false
~ Bitwise NOT (~10) = -10
<< Bitwise Left Shift (10<<2) = 40
>> Bitwise Right Shift (10>>2) = 2
>>> Bitwise Right Shift with Zero (10>>>2) = 2
JavaScript Logical Operators
The following operators are known as JavaScript logical operators.
Operator Description Example
&& Logical AND (10==20 && 20==33) = false
|| Logical OR (10==20 || 20==33) = false
! Logical Not !(10==20) = true
JavaScript Assignment Operators
The following operators are known as JavaScript assignment operators.
Operator Description Example
= Assign 10+10 = 20
+= Add and assign var a=10; a+=20; Now a
= 30
-= Subtract and var a=20; a-=10; Now a =
assign 10
*= Multiply and var a=10; a*=20; Now a =
assign 200
/= Divide and assign var a=10; a/=2; Now a =
5
%= Modulus and var a=10; a%=2; Now a =
0
JavaScript Special Operators
The following operators are known as JavaScript special operators.
Operator Description
(?:) Conditional Operator returns value based on the
condition. It is like if-else.
, Comma Operator allows multiple expressions to
be evaluated as single statement.
delete Delete Operator deletes a property from the
object.
in In Operator checks if object has the given
property
instanceof checks if the object is an instance of given type
new creates an instance (object)
typeof checks the type of object.
void it discards the expression's return value.
yield checks what is returned in a generator by the
generator's iterator.
JavaScript If-else
The JavaScript if-else statement is used to execute the code whether
condition is true or false. There are three forms of if statement in JavaScript.
1. If Statement
2. If else statement
3. if else if statement
JavaScript If statement
It evaluates the content only if expression is true. The signature of JavaScript
if statement is given below.
1. if(expression){
2. //content to be evaluated
3. }
Flowchart of JavaScript If statement
Let’s see the simple example of if statement in javascript.
1. <script>
2. var a=20;
3. if(a>10){
4. document.write("value of a is greater than 10");
5. }
6. </script>
Output of the above example
value of a is greater than 10
JavaScript Loops
The JavaScript loops are used to iterate the piece of code using for, while, do
while or for-in loops. It makes the code compact. It is mostly used in array.
There are four types of loops in JavaScript.
1. for loop
2. while loop
3. do-while loop
4. for-in loop
1) JavaScript For loop
The JavaScript for loop iterates the elements for the fixed number of times. It
should be used if number of iteration is known. The syntax of for loop is given
below.
1. for (initialization; condition; increment)
2. {
3. code to be executed
4. }
Let’s see the simple example of for loop in javascript.
ADVERTISEMENT
1. <script>
2. for (i=1; i<=5; i++)
3. {
4. document.write(i + "<br/>")
5. }
6. </script>
Test it Now
Output:
1
2
3
4
5
2) JavaScript while loop
The JavaScript while loop iterates the elements for the infinite number of
times. It should be used if number of iteration is not known. The syntax of
while loop is given below.
1. while (condition)
2. {
3. code to be executed
4. }
Let’s see the simple example of while loop in javascript.
1. <script>
2. var i=11;
3. while (i<=15)
4. {
5. document.write(i + "<br/>");
6. i++;
7. }
8. </script>
Test it Now
Output:
11
12
13
14
15
3) JavaScript do while loop
The JavaScript do while loop iterates the elements for the infinite number of
times like while loop. But, code is executed at least once whether condition
is true or false. The syntax of do while loop is given below.
1. do{
2. code to be executed
3. }while (condition);
Let’s see the simple example of do while loop in javascript.
1. <script>
2. var i=21;
3. do{
4. document.write(i + "<br/>");
5. i++;
6. }while (i<=25);
7. </script>
Test it Now
Output:
21
22
23
24
25
JavaScript Function Example
Let’s see the simple example of function in JavaScript that does not has
arguments.
1. <script>
2. function msg(){
3. alert("hello! this is message");
4. }
5. </script>
6. <input type="button" onclick="msg()" value="call function"/>
Function with Return Value
We can call function that returns a value and use it in our program. Let’s see
the example of function that returns value.
1. <script>
2. function getInfo(){
3. return "hello javatpoint! How r u?";
4. }
5. </script>
6. <script>
7. document.write(getInfo());
8. </script>
