Java script

Chapter 3 Introduction of java script

Meaning of scripting language :-
A scripting or script language is a programming language that supports scripts: programs written
for a special run-time environment that automate the execution of tasks that could alternatively be
executed one-by-one by a human operator.

What is the difference between a programming language and a scripting language?

Basically, all scripting languages are programming languages. The
theoretical difference between the two is that scripting languages do not require the compilation step
and are rather interpreted. For example, normally, a C program needs to be compiled before running
whereas normally, a scripting language like JavaScript or PHP need not be compiled.

Types of scripting language

Some of the most widely used scripting languages are JavaScript, VBScript, PHP, Perl, Python, Ruby,
ASP and Tcl. Since a scripting language is normally used in conjunction with another programming
language, they are often found alongside HTML, Java or C++.

JavaScript

JavaScript is a object-based scripting language and it is light weighted. It is first implemented by

Netscape (with help from Sun Microsystems). JavaScript was created by Brendan Eich at Netscape in

1995 for the purpose of allowing code in web-pages (performing logical operation on client side).

It is not compiled but translated. JavaScript Translator is responsible to translate the JavaScript code

which is embedded in browser.

Netscape first introduced a JavaScript interpreter in Navigator 2. The interpreter was an extra software

component in the browser that was capable of interpreting JavaSript source code inside an HTML

document. This means that web page developer no need other software other than a text editor of

develop any web page.

VBScript
VBScript (Visual Basic Script) is developed by Microsoft with the intention of developing dynamic web
pages. It is client-side scripting language like JavaScript. VBScript is a light version of Microsoft Visual
Basic. The syntax of VBScript is very similar to that of Visual Basic. If you want your webpage to be more
lively and interactive, then you can incorporate VBScript in your code.

VBScript is just a scripting language. So, it cannot run its code on its own. It needs a bigger programming
language to host it.
Perl
Perl is a general-purpose, high level interpreted and dynamic programming language. It was developed by
Larry Wall, in 1987. There is no official Full form of the Perl, but still, the most used expansion is “Practical
Extraction and Reporting Language“. Some of the programmers also refer Perl as the “Pathologically
Eclectic Rubbish Lister” Or “Practically Everything Really Likable“. The acronym “Practical Extraction and
Reporting Language” is used widely because Perl was originally developed for the text processing like
extracting the required information from a specified text file and for converting the text file into a different
form.

Perl supports both the procedural and Object-Oriented programming. Perl is a lot similar to C syntactically
and is easy for the users who have knowledge of C, C++.

ASP.NET
ASP.NET is a web development platform, which provides a programming model, a comprehensive
software infrastructure and various services required to build up robust web applications for PC, as well
as mobile devices.
ASP.NET works on top of the HTTP protocol, and uses the HTTP commands and policies to set a browser-
to-server bilateral communication and cooperation.
ASP.NET is a part of Microsoft .Net platform. ASP.NET applications are compiled codes, written using the
extensible and reusable components or objects present in .Net framework. These codes can use the
entire hierarchy of classes in .Net framework.
The ASP.NET application codes can be written in any of the following languages:

• C#
• Visual Basic.Net
• Jscript
• J#
ASP.NET is used to produce interactive, data-driven web applications over the internet. It consists of a
large number of controls such as text boxes, buttons, and labels for assembling, configuring, and
manipulating code to create HTML pages.

PHP
• PHP is an acronym for "PHP: Hypertext Preprocessor"
• PHP is a widely-used, open source scripting language
• PHP scripts are executed on the server
• PHP is free to download and use

PHP started out as a small open source project that evolved as more and more people found out how
useful it was. Rasmus Lerdorf unleashed the first version of PHP way back in 1994.
• PHP is a recursive acronym for "PHP: Hypertext Preprocessor".
• PHP is a server side scripting language that is embedded in HTML. It is used to manage dynamic
content, databases, session tracking, even build entire e-commerce sites.
• It is integrated with a number of popular databases, including MySQL, PostgreSQL, Oracle, Sybase,
Informix, and Microsoft SQL Server.
• PHP is pleasingly zippy in its execution, especially when compiled as an Apache module on the
Unix side. The MySQL server, once started, executes even very complex queries with huge result
sets in record-setting time.
 • PHP supports a large number of major protocols such as POP3, IMAP, and LDAP. PHP4 added
support for Java and distributed object architectures (COM and CORBA), making n-tier
development a possibility for the first time.
• PHP is forgiving: PHP language tries to be as forgiving as possible.
• PHP Syntax is C-Like.

Different between client-side server-side scripts

What is JavaScript
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. Since then, it has been adopted by
all other graphical web browsers. With JavaScript, users can build modern web applications to interact
directly without reloading the page every time. The traditional website uses js to provide several forms of
interactivity and simplicity.

Although, JavaScript has no connectivity with Java programming language. The name was suggested and
provided in the times when Java was gaining popularity in the market. In addition to web browsers,
databases such as CouchDB and MongoDB uses JavaScript as their scripting and query language.

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.
6. It is a case-sensitive language.
7. JavaScript is supportable in several operating systems including, Windows, macOS, etc.
8. It provides good control to the users over the web browsers.

History of JavaScript
In 1993, Mosaic, the first popular web browser, came into existence. In the year 1994, Netscape was
founded by Marc Andreessen. He realized that the web needed to become more dynamic. Thus, a 'glue
language' was believed to be provided to HTML to make web designing easy for designers and part-time
programmers. Consequently, in 1995, the company recruited Brendan Eich intending to implement and
embed Scheme programming language to the browser. But, before Brendan could start, the company
merged with Sun Microsystems for adding Java into its Navigator so that it could compete with Microsoft
over the web technologies and platforms. Now, two languages were there: Java and the scripting
language. Further, Netscape decided to give a similar name to the scripting language as Java's. It led to
'Javascript'. Finally, in May 1995, Marc Andreessen coined the first code of Javascript named 'Mocha'.
Later, the marketing team replaced the name with 'LiveScript'. But, due to trademark reasons and
certain other reasons, in December 1995, the language was finally renamed to 'JavaScript'. From then,
JavaScript came into existence.
 Application of JavaScript
JavaScript is used to create interactive websites. It is mainly used for:

o Client-side validation,
o Dynamic drop-down menus,
o Displaying date and time,
o Displaying pop-up windows and dialog boxes (like an alert dialog box, confirm dialog box and
prompt dialog box),
o Displaying clocks etc.

Example

<html>

<body>

<h2>Welcome to JavaScript</h2>

<script>

document.write("Hello JavaScript by JavaScript");

</script>

</body>

</html>

JavaScript Variable
1. JavaScript variable
2. JavaScript Local variable
3. JavaScript Global 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;
<html>
 <body>

<script>

var x = 10;

var y = 20;

var z=x+y;

document.write(z);

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

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>

Or,

1. <script>
2. If(10<13){
3. var y=20;//JavaScript 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:

<html>

<body>

<script>

var data=200;//gloabal variable

function a(){

document.writeln(data);

function b(){

document.writeln(data);

}
 a();//calling JavaScript function

b();

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

JavaScript Global Variable

A JavaScript global variable is declared outside the function or declared with window object. It can be
accessed from any function.

Let’s see the simple example of global variable in JavaScript.

<html>

<body>

<script>

var value=50;//global variable

function a(){

alert(value);

function b(){

alert(value);

a();

</script>

</body>

</html>

Declaring JavaScript global variable within function

To declare JavaScript global variables inside function, you need to use window object. For example:

1. window.value=90;

Now it can be declared inside any function and can be accessed from any function. For example:

Internals of global variable in JavaScript

When you declare a variable outside the function, it is added in the window object internally. You can
access it through window object also. For example:

1. var value=50;
2. function a(){
3. alert(window.value);//accessing global variable
4. }

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

We will have great discussion on each data type later.

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 same type) 10==20 = 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 assign var a=20; a-=10; Now a = 10
*= Multiply and assign var a=10; a*=20; Now a = 200
/= Divide and assign var a=10; a/=2; Now a = 5
%= Modulus and assign 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

While writing a program, there may be a situation when you need to adopt one out of a given set of paths.
In such cases, you need to use conditional statements that allow your program to make correct decisions
and perform right actions.

JavaScript supports conditional statements which are used to perform different actions based on different
conditions. Here we will explain the if..else statement.
Flow Chart of if-else
The following flow chart shows how the if-else statement works.

JavaScript supports the following forms of if..else statement −

• if statement
• if...else statement
• if...else if... statement.

if statement
The if statement is the fundamental control statement that allows JavaScript to make decisions and
execute statements conditionally.

Syntax

The syntax for a basic if statement is as follows −

if (expression) {
Statement(s) to be executed if expression is true
}

Here a JavaScript expression is evaluated. If the resulting value is true, the given statement(s) are
executed. If the expression is false, then no statement would be not executed. Most of the times, you will
use comparison operators while making decisions.

Example

Try the following example to understand how the if statement works.

1)<html>
<body>
 <script type = "text/javascript">
<!--
var age = 20;

if( age > 18 ) {

document.write("<b>Qualifies for driving</b>");
}
//-->
</script>

<p>Set the variable to different value and then try...</p>

</body>
</html>

2)<html>
<body>
<script>
var a=20;
if(a>10){
document.write("value of a is greater than 10");
}
</script>
</body>
</html>

if...else statement
The 'if...else' statement is the next form of control statement that allows JavaScript to execute
statements in a more controlled way.

Syntax

if (expression)
{
Statement(s) to be executed if expression is true
}
else
{
Statement(s) to be executed if expression is false
}

Here JavaScript expression is evaluated. If the resulting value is true, the given statement(s) in the ‘if’
block, are executed. If the expression is false, then the given statement(s) in the else block are executed.

<html>
<body>

<script type = "text/javascript">

<!--
var age = 15;

if( age > 18 ){

document.write("<b>Qualifies for driving</b>");
}

else{
document.write("<b>Does not qualify for driving</b>");
}
 //-->
</script>

<p>Set the variable to different value and then try...</p>

</body>
</html>

2) <html>
<body>
<script>
var a=20;
if(a%2==0){
document.write("a is even number");
}
else{
document.write("a is odd number");
}
</script>
</body>
</html>

if...else if... statement

The if...else if... statement is an advanced form of if…else that allows JavaScript to make a correct
decision out of several conditions.

Syntax
The syntax of an if-else-if statement is as follows −

if (expression 1)
{
Statement(s) to be executed if expression 1 is true
}
else if (expression 2)
{
Statement(s) to be executed if expression 2 is true
}
else if (expression 3)
{
Statement(s) to be executed if expression 3 is true
}
else {
Statement(s) to be executed if no expression is true
}

There is nothing special about this code. It is just a series of if statements, where each if is a part of the
else clause of the previous statement. Statement(s) are executed based on the true condition, if none of
the conditions is true, then the else block is executed.

Example
Try the following code to learn how to implement an if-else-if statement in JavaScrip

<html>
<body>
<script>
var a=20;
if(a==10){
document.write("a is equal to 10");
}
else if(a==15){
document.write("a is equal to 15");
}
else if(a==20){
document.write("a is equal to 20");
}
else{
document.write("a is not equal to 10, 15 or 20");
}
</script>
</body>
</html>

JavaScript Switch
The JavaScript switch statement is used to execute one code from multiple expressions. It is just like
else if statement that we have learned in previous page. But it is convenient than if..else..if because it can
be used with numbers, characters etc.

The signature of JavaScript switch statement is given below.

switch(expression)
{
case value1:

code to be executed;

break;

case value2:

code to be executed;

break;
......

default:

code to be executed if above values are not matched;

}

<html>
<body>

<script>

var grade='B';

var result;

switch(grade)
{
case 'A':

result="A Grade";

break;
case 'B':

result="B Grade";

break;

case 'C':

result="C Grade";

break;

default:

result="No Grade";

}
document.write(result);
</script>
</body>
</html>

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.

for (initialization; condition; increment)

{
code to be executed
}
<html>
<body>
<script>
for (i=1; i<=5; i++)
{
document.write(i + "<br/>")
}
</script>
</body>
</html>
 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.

while (condition)
{
code to be executed
}
Let’s see the simple example of while loop in javascript.

<html>
<body>
<script>
var i=11;
while (i<=15)
{
document.write(i + "<br/>");
i++;
}
</script>
</body>
</html>

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.

Do
{
code to be executed
}

while (condition);

Let’s see the simple example of do while loop in javascript.

<html>
<body>
<script>
var i=21;
do{
document.write(i + "<br/>");
i++;
}while (i<=25);
</script>
</body>
</html>

Array