Javascript Introduction Notes

JAVA SCRIPT
What is JavaScript ?
JavaScript is a lightweight, interpreted programming language with object-oriented capabilities

that allows one to build interactivity into otherwise static HTML pages.
JavaScript is a dynamic language that executes within a browser. JavaScript code is embedded
within an HTML page using the JavaScript tag. The <script> tag is used to embed JavaScript code.
JavaScript code can be embedded in:
 An external file
 The header of the page
 The body of the page
 e.g Script in <head>...</head> section.

 Script in <body>...</body> section.
 Script in <body>...</body> and <head>...</head> sections.
 Script in and external file and then include in <head>...</head> section.
In this example, JavaScript is embedded within the header. As soon as the page is loaded this
code is executed.
<html>
<head>
<title>JavaScript Example</title>
<script language="JavaScript ">

</script>
</head>
<body>The body</body>
</html>
JavaScript code that is not found in a function is executed as the page containing it is loaded.
To illustrate this, JavaScript code is placed in the head and body section of an HTML page.
<html>
<head>
<title>JavaScript Example</title>
<script type="text/javascript">
document.write("Execute during page load from the head<br>");
</script>
</head>
<body>
document.write("Execute during page load from the body<br>");
1
</script>
</body>
</html>
Client-side JavaScript:
Client-side JavaScript is the most common form of the language. The script should be included in
or referenced by an HTML document for the code to be interpreted by the browser.
It means that a web page need no longer be static HTML, but can include programs that interact
with the user, control the browser, and dynamically create HTML content.
Advantages of JavaScript:
The merits of using JavaScript are:
 Less server interaction: User input can be validated before sending the page off to the
server. This saves server traffic, which means less load on your server.
 Immediate feedback to the visitors: The page need not to be reloaded to see missing
information.
 Increased interactivity: Interfaces can be created that react when the user hovers over
them with a mouse or activates them via the keyboard.
 Richer interfaces: Items such as drag-and-drop components can be used to give a Rich
Interface to visitors on the site.
Limitations with JavaScript:
 Client-side JavaScript does not allow the reading or writing of files. This has been kept for
security reason.
 JavaScript can not be used for Networking applications because there is no such support
available.
 JavaScript doesn't have any multithreading or multiprocess capabilities.
JavaScript Development Tools:
Javascript editing tools includes:
 Microsoft FrontPage:. FrontPage provides web developers with a number of JavaScript

tools to assist in the creation of an interactive web site.
 Macromedia Dreamweaver MX: Macromedia Dreamweaver MX is a very popular
HTML and JavaScript editor in the professional web development crowd. It provides
several handy prebuilt JavaScript components, integrates well with databases, and
conforms to new standards such as XHTML and XML.
 Macromedia HomeSite 5: This provides HTML and JavaScript editor, which manages
personal web site .
2
JAVASCRIPT DATATYPES
Data type specifies the size and type of values that can be stored in an identifier.
There are six data types in JavaScript :
 Numbers – Integer or floating point numbers

 Boolean – Either true/false or a number (0 being false) can be used for boolean values
 Strings – Sequence of characters enclosed in a set of single or double quotes
 Objects – Entities that typically represents elements of a HTML page
 Null – No value assigned which is different from a 0
 Undefined – Is a special value assigned to an identifier after it has been declared but before
a value has been assigned to it JavaScript also defines two trivial data types, null and
undefined, each of which defines only a single value.
JAVASCRIPT VARIABLES
JavaScript has variables. Variables can be thought of as named containers. You can place data into
these containers and then refer to the data simply by naming the container.
Before you use a variable in a JavaScript program, you must declare it. Variables are declared with
the var keyword as follows:

</script>
You can also declare multiple variables with the same var keyword as follows:

</script>
Storing a value in a variable is called variable initialization. You can do variable initialization at
the time of variable creation or later point in time when you need that variable as follows:
3
For instance, you might create a variable named money and assign the value 2000.50 to it later.
For another variable you can assign a value the time of initialization as follows:

</script>
Note: Use the var keyword only for declaration or initialization.once for the life of any variable
name in a document. You should not re-declare same variable twice.
JavaScript is untyped language. This means that a JavaScript variable can hold a value of any data
type. Unlike many other languages, you don't have to tell JavaScript during variable declaration
what type of value the variable will hold. The value type of a variable can change during the
execution of a program and JavaScript takes care of it automatically.
JavaScript Variable Scope:

The scope of a variable is the region of the program in which it is defined. JavaScript variable will
have only two scopes.
 Global Variables: A global variable has global scope which means it is defined
everywhere in your JavaScript code.
 Local Variables: A local variable will be visible only within a function where it is defined.
Function parameters are always local to that function.
Within the body of a function, a local variable takes precedence over a global variable with the
same name. If you declare a local variable or function parameter with the same name as a global
variable, you effectively hide the global variable. Following example explains it:

</script>
This produces the following result:
4
Local
To understand variable scope in better way you can Try it yourself.
JavaScript Variable Names:
While naming your variables in JavaScript keep following rules in mind.
 You should not use any of the JavaScript reserved keyword as variable name. These
keywords are mentioned in the next section. For example, break or boolean variable names
are not valid.
 JavaScript variable names should not start with a numeral (0-9). They must begin with a
letter or the underscore character. For example, 123test is an invalid variable name but
_123test is a valid one.
 JavaScript variable names are case sensitive. For example, Name and name are two
different variables.
JavaScript Reserved Words:
The following are reserved words in JavaScript. They cannot be used as JavaScript variables,
functions, methods, loop labels, or any object names.
abstract else instanceof switch

boolean enum int synchronized
break export interface this
byte extends long throw
case false native throws
catch final new transient
char finally null true
class float package try
const for private typeof
continue function protected var
debugger goto public void
default if return volatile
delete implements short while
do import static with
double in super
5
OPERATORS IN JAVASCRIPT
An operator in a programming language is a symbol that tells the compiler or interpreter to
perform specific mathematical, relational or logical operation and produce final result
e.g in the expression 9 + 10 is equal to 19. Here 9 and 10 are called operands and + is called
operator. JavaScript language supports following type of operators.
 Arithmetic Operators
 Comparision Operators
 Logical (or Relational) Operators
 Assignment Operators
 Conditional (or ternary) Operators
The Arithmatic Operators:
These are the arithmetic operators supported by JavaScript language:
Assume variable A holds 10 and variable B holds 20 then:
Operator Description Example
+ Adds two operands A + B will give 30
- Subtracts second operand from the first A - B will give -10
* Multiply both operands A * B will give 200
/ Divide numerator by denumerator B / A will give 2
% Modulus Operator and remainder of after an B % A will give 0

integer division
++ Increment operator, increases integer value by one A++ will give 11
-- Decrement operator, decreases integer value by A-- will give 9

one
Note: Addition operator (+) works for Numeric as well as Strings. e.g. "a" + 10 will give "a10".
6
The Comparison Operators:
These are the comparison operators supported by JavaScript language
== Checks if the value of two operands are equal or (A == B) is not true.

not, if yes then condition becomes true.
!= Checks if the value of two operands are equal or (A != B) is true.

not, if values are not equal then condition becomes
true.
> Checks if the value of left operand is greater than (A > B) is not true.
the value of right operand, if yes then condition
becomes true.
< Checks if the value of left operand is less than the (A < B) is true.
value of right operand, if yes then condition
becomes true.
>= Checks if the value of left operand is greater than (A >= B) is not true.
or equal to the value of right operand, if yes then
condition becomes true.
<= Checks if the value of left operand is less than or (A <= B) is true.
equal to the value of right operand, if yes then
condition becomes true.
The Logical Operators:
There are the logical operators supported by JavaScript language
7
&& Called Logical AND operator. If both the (A && B) is true.
operands are non zero then then condition
becomes true.
|| Called Logical OR Operator. If any of the two (A || B) is true.

operands are non zero then then condition
becomes true.
! Called Logical NOT Operator. Use to reverses the !(A && B) is false.
logical state of its operand. If a condition is true
then Logical NOT operator will make false.
The Bitwise Operators:
These are the bitwise operators supported by JavaScript language
& Called Bitwise AND operator. It performs a (A & B) is 2 .

Boolean AND operation on each bit of its integer
arguments.
| Called Bitwise OR Operator. It performs a (A | B) is 3.

Boolean OR operation on each bit of its integer
arguments.
^ Called Bitwise XOR Operator. It performs a (A ^ B) is 1.

Boolean exclusive OR operation on each bit of its
integer arguments. Exclusive OR means that either
operand one is true or operand two is true, but not
both.
~ Called Bitwise NOT Operator. It is a is a unary (~B) is -4 .

operator and operates by reversing all bits in the
operand.
8
<< Called Bitwise Shift Left Operator. It moves all (A << 1) is 4.
bits in its first operand to the left by the number of
places specified in the second operand. New bits
are filled with zeros. Shifting a value left by one
position is equivalent to multiplying by 2, shifting
two positions is equivalent to multiplying by 4,
etc.
>> Called Bitwise Shift Right with Sign Operator. It (A >> 1) is 1.

moves all bits in its first operand to the right by
the number of places specified in the second
operand. The bits filled in on the left depend on
the sign bit of the original operand, in order to
preserve the sign of the result. If the first operand
is positive, the result has zeros placed in the high
bits; if the first operand is negative, the result has
ones placed in the high bits. Shifting a value right
one place is equivalent to dividing by 2
(discarding the remainder), shifting right two
places is equivalent to integer division by 4, and
so on.
>>> Called Bitwise Shift Right with Zero Operator. (A >>> 1) is 1.

This operator is just like the >> operator, except
that the bits shifted in on the left are always zero,
The Assignment Operators:
These are assignment operators supported by JavaScript language:
= Simple assignment operator, Assigns values from C = A + B will assigne value

right side operands to left side operand of A + B into C
+= Add AND assignment operator, It adds right C += A is equivalent to C = C

operand to the left operand and assign the result to + A
left operand
9
-= Subtract AND assignment operator, It subtracts C -= A is equivalent to C = C -
right operand from the left operand and assign the A
result to left operand
*= Multiply AND assignment operator, It multiplies C *= A is equivalent to C = C

right operand with the left operand and assign the *A
/= Divide AND assignment operator, It divides left C /= A is equivalent to C = C /

operand with the right operand and assign the A
%= Modulus AND assignment operator, It takes C %= A is equivalent to C = C

modulus using two operands and assign the result %A
to left operand
Miscellaneous Operator
The Conditional Operator (? :)
There is an oprator called conditional operator. This first evaluates an expression for a true or false
value and then execute one of the two given statements depending upon the result of the evaluation.
The conditioanl operator has this syntax:
?: Conditional Expression If Condition is true ? Then value X :

Otherwise value Y
The typeof Operator
The typeof is a unary operator that is placed before its single operand, which can be of any type.
Its value is a string indicating the data type of the operand.
The typeof operator evaluates to "number", "string", or "boolean" if its operand is a number, string,
or boolean value and returns true or false based on the evaluation.
list of return values for the typeof Operator :
10
Type String Returned by typeof
Number "number"
String "string"
Boolean "boolean"
Object "object"
Function "function"
Undefined "undefined"
Null "object"
Programs to demonstrate the use of data types, variables and

operators
PROGRAM TO ADD TWO NUMBERS
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<script>
var x = 5;
var y = 2;
var z = x + y;
alert (z);
</script>
</body>
</html>
PROGRAM TO MULTIPLY TWO NUMBERS
<!DOCTYPE html>
<html>
<body>
<h1>The * Operator</h1>
<script>
var x = 5;
var y = 2;
var z = x * y;
11
alert(" the result is", z);
</script>
</body>
</html>
PROGRAM TO ADD TWO NUMBERS using a parseInt () function and textbox

<HTML>
<HEAD>
<TITLE>A simple program to add two numbers</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var NUM1 = parseInt(prompt("Please enter THE FIRST NUMBER"))

var NUM2= parseInt(prompt("Please enter THE SECOND NUMBER"))
var result = NUM1 + NUM2;
alert(" the result is", + result);

</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Note that
The parseInt() function is used to accept the string ,radix parameter and convert it
into an integer.
The parseFloat() function parses a string and returns a floating point number.
12

Javascript Introduction Notes

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Javascript Introduction Notes

Uploaded by

Copyright:

Available Formats

JAVA SCRIPT

JavaScript is a lightweight, interpreted programming language with object-oriented capabilities

 e.g Script in <head>...</head> section.

The merits of using JavaScript are:

Limitations with JavaScript:

JavaScript Development Tools:

Javascript editing tools includes:

 Microsoft FrontPage:. FrontPage provides web developers with a number of JavaScript

 Numbers – Integer or floating point numbers

JavaScript Variable Scope:

This produces the following result:

To understand variable scope in better way you can Try it yourself.

JavaScript Variable Names:

While naming your variables in JavaScript keep following rules in mind.

JavaScript Reserved Words:

abstract else instanceof switch

The Arithmatic Operators:

These are the arithmetic operators supported by JavaScript language:

Assume variable A holds 10 and variable B holds 20 then:

Operator Description Example

+ Adds two operands A + B will give 30

- Subtracts second operand from the first A - B will give -10

* Multiply both operands A * B will give 200

/ Divide numerator by denumerator B / A will give 2

% Modulus Operator and remainder of after an B % A will give 0

++ Increment operator, increases integer value by one A++ will give 11

-- Decrement operator, decreases integer value by A-- will give 9

These are the comparison operators supported by JavaScript language

Assume variable A holds 10 and variable B holds 20 then:

Operator Description Example

== Checks if the value of two operands are equal or (A == B) is not true.

!= Checks if the value of two operands are equal or (A != B) is true.

The Logical Operators:

There are the logical operators supported by JavaScript language

Assume variable A holds 20 and variable B holds 30 then:

Operator Description Example

|| Called Logical OR Operator. If any of the two (A || B) is true.

The Bitwise Operators:

These are the bitwise operators supported by JavaScript language

Assume variable A holds 2 and variable B holds 3 then:

Operator Description Example

& Called Bitwise AND operator. It performs a (A & B) is 2 .

| Called Bitwise OR Operator. It performs a (A | B) is 3.

^ Called Bitwise XOR Operator. It performs a (A ^ B) is 1.

~ Called Bitwise NOT Operator. It is a is a unary (~B) is -4 .

>> Called Bitwise Shift Right with Sign Operator. It (A >> 1) is 1.

>>> Called Bitwise Shift Right with Zero Operator. (A >>> 1) is 1.

The Assignment Operators:

These are assignment operators supported by JavaScript language:

Operator Description Example

= Simple assignment operator, Assigns values from C = A + B will assigne value

+= Add AND assignment operator, It adds right C += A is equivalent to C = C

*= Multiply AND assignment operator, It multiplies C *= A is equivalent to C = C

/= Divide AND assignment operator, It divides left C /= A is equivalent to C = C /

%= Modulus AND assignment operator, It takes C %= A is equivalent to C = C

Operator Description Example

?: Conditional Expression If Condition is true ? Then value X :

The typeof Operator

list of return values for the typeof Operator :

Programs to demonstrate the use of data types, variables and

PROGRAM TO ADD TWO NUMBERS using a parseInt () function and textbox

var NUM1 = parseInt(prompt("Please enter THE FIRST NUMBER"))

alert(" the result is", + result);

= Multiply AND assignment operator, It multiplies C = A is equivalent to C = C