JavaScript notes (3)

What is JavaScript ?
JavaScript started life as LiveScript, but Netscape changed the name, possibly because of the excitement
being generated by Java.to JavaScript. JavaScript made its first appearance in Netscape 2.0 in 1995 with a
name LiveScript.
JavaScript is a lightweight, interpreted programming language with object-oriented capabilities that allows
you to build interactivity into otherwise static HTML pages.
The general-purpose core of the language has been embedded in Netscape, Internet Explorer, and other
web browsers
The ECMA-262 Specification defined a standard version of the core JavaScript language.
JavaScript is:
 JavaScript is a lightweight, interpreted programming language

 Designed for creating network-centric applications
 Complementary to and integrated with Java
 Complementary to and integrated with HTML
 Open and cross-platform
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.
The JavaScript client-side mechanism features many advantages over traditional CGI server-side scripts. For
example, you might use JavaScript to check if the user has entered a valid e-mail address in a form field.
The JavaScript code is executed when the user submits the form, and only if all the entries are valid they
would be submitted to the Web Server.
JavaScript can be used to trap user-initiated events such as button clicks, link navigation, and other actions
that the user explicitly or implicitly initiates.
Advantages of JavaScript:
The merits of using JavaScript are:
 Less server interaction: You can validate user input before sending the page off to the server.
This saves server traffic, which means less load on your server.
 Immediate feedback to the visitors: They don't have to wait for a page reload to see if they
have forgotten to enter something.
 Increased interactivity: You can create interfaces that react when the user hovers over them with
a mouse or activates them via the keyboard.
 Richer interfaces: You can use JavaScript to include such items as drag-and-drop components and
sliders to give a Rich Interface to your site visitors.
Limitations with JavaScript:

We cannot treat JavaScript as a full-fledged programming language. It lacks the following important
features:
 Client-side JavaScript does not allow the reading or writing of files. This has been kept for security
reason.
 JavaScript cannot be used for Networking applications because there is no such support available.
 JavaScript doesn't have any multithreading or multiprocess capabilities.
Once again, JavaScript is a lightweight, interpreted programming language that allows you to build
interactivity into otherwise static HTML pages.
JavaScript Development Tools:

One of JavaScript's strengths is that expensive development tools are not usually required. You can start
with a simple text editor such as Notepad.
Since it is an interpreted language inside the context of a web browser, you don't even need to buy a
compiler.
To make our life simpler, various vendors have come up with very nice JavaScript editing tools. Few of them
are listed here:
 Microsoft FrontPage: Microsoft has developed a popular HTML editor called FrontPage. FrontPage
also 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 provided a well-liked HTML and JavaScript editor, which will
manage their personal web site just fine.
Where JavaScript is Today ?

The ECMAScript Edition 4 standard will be the first update to be released in over four years. JavaScript 2.0
conforms to Edition 4 of the ECMAScript standard, and the difference between the two is extremely minor.
The specification for JavaScript 2.0 can be found on the following site:http://www.ecmascript.org/
Today, Netscape's JavaScript and Microsoft's JScript conform to the ECMAScript standard, although each
language still supports features that are not part of the standard.
JavaScript Syntax
A JavaScript consists of JavaScript statements that are placed within the <script>... </script> HTML tags in
a web page.
You can place the <script> tag containing your JavaScript anywhere within you web page but it is preferred
way to keep it within the <head> tags.
The <script> tag alert the browser program to begin interpreting all the text between these tags as a script.
So simple syntax of your JavaScript will be as follows
<script ...>
JavaScript code
</script>
The script tag takes two important attributes:
 language: This attribute specifies what scripting language you are using. Typically, its value will
be javascript. Although recent versions of HTML (and XHTML, its successor) have phased out the
use of this attribute.
 type: This attribute is what is now recommended to indicate the scripting language in use and its
value should be set to "text/javascript".
So your JavaScript segment will look like:

<script language="javascript" type="text/javascript">
JavaScript code
</script>
Your First JavaScript Script:

Let us write our class example to print out "Hello World".
<html>
<body>

</script>
</body>
</html>
We added an optional HTML comment that surrounds our Javascript code. This is to save our code from a
browser that does not support Javascript. The comment ends with a "//-->". Here "//" signifies a comment
in Javascript, so we add that to prevent a browser from reading the end of the HTML comment in as a piece
of Javascript code.
Next, we call a function document.write which writes a string into our HTML document. This function can be
used to write text, HTML, or both. So above code will display following result:
Hello World!
Whitespace and Line Breaks:

JavaScript ignores spaces, tabs, and newlines that appear in JavaScript programs.
Because you can use spaces, tabs, and newlines freely in your program so you are free to format and indent
your programs in a neat and consistent way that makes the code easy to read and understand.
Semicolons are Optional:

Simple statements in JavaScript are generally followed by a semicolon character, just as they are in C, C++,
and Java. JavaScript, however, allows you to omit this semicolon if your statements are each placed on a
separate line. For example, the following code could be written without semicolons


</script>
But when formatted in a single line as follows, the semicolons are required:


</script>
Note: It is a good programming practice to use semicolons.

Case Sensitivity:
JavaScript is a case-sensitive language. This means that language keywords, variables, function names, and
any other identifiers must always be typed with a consistent capitalization of letters.
So identifiers Time, TIme and TIME will have different meanings in JavaScript.
NOTE: Care should be taken while writing your variable and function names in JavaScript.
Comments in JavaScript:
JavaScript supports both C-style and C++-style comments, Thus:
 Any text between a // and the end of a line is treated as a comment and is ignored by JavaScript.
 Any text between the characters /* and */ is treated as a comment. This may span multiple lines.
 JavaScript also recognizes the HTML comment opening sequence  is not recognized by JavaScript so it should be written as
//-->.
Example:


</script>
JavaScript Placement in HTML File

There is a flexibility given to include JavaScript code anywhere in an HTML document. But there are
following most preferred ways to include JavaScript in your HTML file.
 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 the following section we will see how we can put JavaScript in different ways:
JavaScript in <head>...</head> section:
If you want to have a script run on some event, such as when a user clicks somewhere, then you will place
that script in the head as follows:
<html>
<head>
<script type="text/javascript">

</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>
This will produce following result:
JavaScript in <body>...</body> section:
If you need a script to run as the page loads so that the script generates content in the page, the script goes
in the <body> portion of the document. In this case you would not have any function defined using
JavaScript:
<html>
<head>
</head>
<body>

</script>
<p>This is web page body </p>
</body>
</html>
Advertisements
Hello World
This is web page body
JavaScript in <body> and <head> sections:
You can put your JavaScript code in <head> and <body> section altogether as follows:
<html>
<head>

</script>
</head>
<body>

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

Advertisements
Hello World
JavaScript in External File :
As you begin to work more extensively with JavaScript, you will likely find that there are cases where you
are reusing identical JavaScript code on multiple pages of a site.
You are not restricted to be maintaining identical code in multiple HTML files. The script tag provides a
mechanism to allow you to store JavaScript in an external file and then include it into your HTML files.
Here is an example to show how you can include an external JavaScript file in your HTML code
using script tag and its src attribute:
<html>
<head>
<script type="text/javascript" src="filename.js" ></script>
</head>
<body>
.......
</body>
</html>
To use JavaScript from an external file source, you need to write your all JavaScript source code in a simple
text file with extension ".js" and then include that file as shown above.
For example, you can keep following content in filename.js file and then you can use sayHellofunction in
your HTML file after including filename.js file:
}
JavaScript Variables and DataTypes
JavaScript DataTypes:
One of the most fundamental characteristics of a programming language is the set of data types it supports.
These are the type of values that can be represented and manipulated in a programming language.
JavaScript allows you to work with three primitive data types:
 Numbers eg. 123, 120.50 etc.

 Strings of text e.g. "This text string" etc.
 Boolean e.g. true or false.
JavaScript also defines two trivial data types, null and undefined, each of which defines only a single value.
In addition to these primitive data types, JavaScript supports a composite data type known asobject. We will
see an object detail in a separate chapter.
Note: Java does not make a distinction between integer values and floating-point values. All numbers in
JavaScript are represented as floating-point values. JavaScript represents numbers using the 64-bit floating-
point format defined by the IEEE 754 standard.
JavaScript Variables:
Like many other programming languages, 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:
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 your 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:
local
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
What is an operator?
Simple answer can be given using expression 4 + 5 is equal to 9. Here 4 and 5 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
Lets have a look on all operators one by one.
The Arithmatic Operators:

There are following arithmatic 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 integer B % A will give 0

division
++ Increment operator, increases integer value by one A++ will give 11
-- Decrement operator, decreases integer value by one A-- will give 9
Note: Addition operator (+) works for Numeric as well as Strings. e.g. "a" + 10 will give "a10".
The Comparison Operators:

There are following comparison operators supported by JavaScript language
== Checks if the value of two operands are equal or not, if (A == B) is not true.
yes then condition becomes true.
!= Checks if the value of two operands are equal or not, if (A != B) is true.

values are not equal then condition becomes true.
> Checks if the value of left operand is greater than the (A > B) is not true.
value of right operand, if yes then condition becomes true.
< Checks if the value of left operand is less than the value of (A < B) is true.
right operand, if yes then condition becomes true.
>= Checks if the value of left operand is greater than or equal (A >= B) is not true.
to the value of right operand, if yes then condition
becomes true.
<= Checks if the value of left operand is less than or equal to (A <= B) is true.
the value of right operand, if yes then condition becomes
true.
The Logical Operators:

There are following logical operators supported by JavaScript language
&& Called Logical AND operator. If both the operands are non (A && B) is true.
zero then then condition becomes true.
|| Called Logical OR Operator. If any of the two operands are (A || B) is true.

non zero then then condition becomes true.
! Called Logical NOT Operator. Use to reverses the logical !(A && B) is false.
state of its operand. If a condition is true then Logical NOT
operator will make false.
The Bitwise Operators:

There are following bitwise operators supported by JavaScript language
& Called Bitwise AND operator. It performs a Boolean AND (A & B) is 2 .

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

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

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 operator (~B) is -4 .

and operates by reversing all bits in the operand.
<< Called Bitwise Shift Left Operator. It moves all bits in its (A << 1) is 4.
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 moves all (A >> 1) is 1.
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. This (A >>> 1) is 1.
operator is just like the >> operator, except that the bits
shifted in on the left are always zero,
The Assignment Operators:

There are following assignment operators supported by JavaScript language:
= Simple assignment operator, Assigns values from right C = A + B will assigne value of A +
side operands to left side operand B into C
+= Add AND assignment operator, It adds right operand to C += A is equivalent to C = C + A

the left operand and assign the result to left operand
-= Subtract AND assignment operator, It subtracts right C -= A is equivalent to C = C - A

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

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

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

two operands and assign the result to left operand
Note: Same logic applies to Bitwise operators so they will become like <<=, >>=, >>=, &=, |= and ^=.
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.
Here is the list of return values for the typeof Operator :
Type String Returned by typeof
Number "number"
String "string"
Boolean "boolean"
Object "object"
Function "function"
Undefined "undefined"
Null "object
JavaScript if...else Statements

While writing a program, there may be a situation when you need to adopt one path out of the given two
paths. So you need to make use of 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 if..else statement.
JavaScript supports 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:
if (expression){
Statement(s) to be executed if expression is true
}
Here JavaScript expression is evaluated. If the resulting value is true, given statement(s) are executed.
If expression is false then no statement would be not executed. Most of the times you will use comparison
operators while making decisions.
Example:

</script>
Qualifies for driving
if...else statement:
The if...else statement is the next form of control statement that allows JavaScript to execute statements in
more controlled way.
Syntax:
if (expression){
}else{
Statement(s) to be executed if expression is false
}
Here JavaScript expression is evaluated. If the resulting value is true, given statement(s) in theif block, are
executed. If expression is false then given statement(s) in the else block, are executed.
Example:

</script>
Does not qualify for driving

if...else if... statement:
The if...else if... statement is the one level advance form of control statement that allows JavaScript to
make correct decision out of several conditions.
Syntax:
if (expression 1){
Statement(s) to be executed if expression 1 is true
}else if (expression 2){
}else if (expression 3){
}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 part of
the else clause of the previous statement. Statement(s) are executed based on the true condition, if non of
the condition is true then else block is executed.
Example:

</script>
Maths Book
JavaScript Switch Case

You can use multiple if...else if statements, as in the previous chapter, to perform a multiway branch.
However, this is not always the best solution, especially when all of the branches depend on the value of a
single variable.
Starting with JavaScript 1.2, you can use a switch statement which handles exactly this situation, and it
does so more efficiently than repeated if...else if statements.
Syntax:
The basic syntax of the switch statement is to give an expression to evaluate and several different
statements to execute based on the value of the expression. The interpreter checks each case against the
value of the expression until a match is found. If nothing matches, adefault condition will be used.
switch (expression)
{
case condition 1: statement(s)
break;
case condition 2: statement(s)
break;
...
case condition n: statement(s)
break;
default: statement(s)
}
The break statements indicate to the interpreter the end of that particular case. If they were omitted, the
interpreter would continue executing each statement in each of the following cases.
We will explain break statement in Loop Control chapter.
Example:
Following example illustrates a basic while loop:

</script>
Entering switch block

Good job
Exiting switch block
Example:
Consider a case if you do not use break statement:

</script>
Entering switch block

Good job
Pretty good
Passed
Not so good
Failed
Unknown grade
Exiting switch block
JavaScript while Loops

While writing a program, there may be a situation when you need to perform some action over and over
again. In such situation you would need to write loop statements to reduce the number of lines.
JavaScript supports all the necessary loops to help you on all steps of programming.
The while Loop

The most basic loop in JavaScript is the while loop which would be discussed in this tutorial.
Syntax:
while (expression){
}
The purpose of a while loop is to execute a statement or code block repeatedly as long asexpression is true.
Once expression becomes false, the loop will be exited.
Example:
Following example illustrates a basic while loop:

</script>
Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped!
The do...while Loop:

The do...while loop is similar to the while loop except that the condition check happens at the end of the
loop. This means that the loop will always be executed at least once, even if the condition is false.
Syntax:
do{
Statement(s) to be executed;
} while (expression);
Note the semicolon used at the end of the do...while loop.
Example:
Let us write above example in terms of do...while loop.

</script>
Starting Loop
Current Count : 0
Loop stopped
JavaScript for Loops
The for Loop

The for loop is the most compact form of looping and includes the following three important parts:
 The loop initialization where we initialize our counter to a starting value. The initialization statement
is executed before the loop begins.
 The test statement which will test if the given condition is true or not. If condition is true then code
given inside the loop will be executed otherwise loop will come out.
 The iteration statement where you can increase or decrease your counter.
You can put all the three parts in a single line separated by a semicolon.
Syntax:
for (initialization; test condition; iteration statement){

Statement(s) to be executed if test condition is true
}
Example:
Following example illustrates a basic for loop:

</script>
This will produce following result which is similar to while loop:
Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped!
JavaScript for...in loop

There is one more loop supported by JavaScript. It is called for...in loop. This loop is used to loop through
an object's properties.
Because we have not discussed Objects yet, so you may not feel comfortable with this loop. But once you
will have understanding on JavaScript objects then you will find this loop very useful.
Syntax:
for (variablename in object){

statement or block to execute
}
In each iteration one property from object is assigned to variablename and this loop continues till all the
properties of the object are exhausted.
Example:
Here is the following example that prints out the properties of a Web browser's Navigatorobject:

</script>
Navigator Object Properties

appCodeName
appName
appMinorVersion
cpuClass
platform
plugins
opsProfile
userProfile
systemLanguage
userLanguage
appVersion
userAgent
onLine
cookieEnabled
mimeTypes
Exiting from the loop!
JavaScript Loop Control

JavaScript provides you full control to handle your loops and switch statement. There may be a situation
when you need to come out of a loop without reaching at its bottom. There may also be a situation when
you want to skip a part of your code block and want to start next iteration of the look.
To handle all such situations, JavaScript provides break and continue statements. These statements are
used to immediately come out of any loop or to start the next iteration of any loop respectively.
The break Statement:

The break statement, which was briefly introduced with the switch statement, is used to exit a loop early,
breaking out of the enclosing curly braces.
Example:
This example illustrates the use of a break statement with a while loop. Notice how the loop breaks out
early once x reaches 5 and reaches to document.write(..) statement just below to closing curly brace:

</script>
Entering the loop

2
3
4
5
Exiting the loop!
We already have seen the usage of break statement inside a switch statement.
The continue Statement:

The continue statement tells the interpreter to immediately start the next iteration of the loop and skip
remaining code block.
When a continue statement is encountered, program flow will move to the loop check expression
immediately and if condition remain true then it start next iteration otherwise control comes out of the loop.
Example:
This example illustrates the use of a continue statement with a while loop. Notice how
thecontinue statement is used to skip printing when the index held in variable x reaches 5:

</script>
Entering the loop

2
3
4
6
7
8
9
10
Exiting the loop!
Using Labels to Control the Flow:

Starting from JavaScript 1.2, a label can be used with break and continue to control the flow more
precisely.
A label is simply an identifier followed by a colon that is applied to a statement or block of code. We will see
two different examples to understand label with break and continue.
Note: Line breaks are not allowed between the continue or break statement and its label name. Also, there
should not be any other statement in between a label name and associated loop.
Example 1:

</script>
Entering the loop!

Outerloop: 0
Innerloop: 0
Innerloop: 1
Innerloop: 2
Innerloop: 3
Outerloop: 1
Innerloop: 0
Innerloop: 1
Innerloop: 2
Innerloop: 3
Outerloop: 2
Outerloop: 3
Innerloop: 0
Innerloop: 1
Innerloop: 2
Innerloop: 3
Outerloop: 4
Exiting the loop!
Example 2:

</script>
Entering the loop!

Outerloop: 0
Innerloop: 0
Innerloop: 1
Innerloop: 2
Outerloop: 1
Innerloop: 0
Innerloop: 1
Innerloop: 2
Outerloop: 2
Innerloop: 0
Innerloop: 1
Innerloop: 2
Exiting the loop!
JavaScript Functions
A function is a group of reusable code which can be called anywhere in your programme. This eliminates the
need of writing same code again and again. This will help programmers to write modular code. You can
divide your big programme in a number of small and manageable functions.
Like any other advance programming language, JavaScript also supports all the features necessary to write
modular code using functions.
You must have seen functions like alert() and write() in previous chapters. We are using these function
again and again but they have been written in core JavaScript only once.
JavaScript allows us to write our own functions as well. This section will explain you how to write your own
functions in JavaScript.
Function Definition:
Before we use a function we need to define that function. The most common way to define a function in
JavaScript is by using the function keyword, followed by a unique function name, a list of parameters (that
might be empty), and a statement block surrounded by curly braces. The basic syntax is shown here:

</script>
Example:
A simple function that takes no parameters called sayHello is defined here:

</script>
Calling a Function:
To invoke a function somewhere later in the script, you would simple need to write the name of that function
as follows:

</script>
Function Parameters:
Till now we have seen function without a parameters. But there is a facility to pass different parameters
while calling a function. These passed parameters can be captured inside the function and any manipulation
can be done over those parameters.
A function can take multiple parameters separated by comma.
Example:
Let us do a bit modification in our sayHello function. This time it will take two parameters:

</script>
Note: We are using + operator to concatenate string and number all together. JavaScript does not mind in
adding numbers into strings.
Now we can call this function as follows:

</script>
The return Statement:

A JavaScript function can have an optional return statement. This is required if you want to return a value
from a function. This statement should be the last statement in a function.
For example you can pass two numbers in a function and then you can expect from the function to return
their multiplication in your calling program.
Example:
This function takes two parameters and concatenates them and return resultant in the calling program:

</script>
Now we can call this function as follows:

</script>
JavaScript Events
What is an Event ?
JavaScript's interaction with HTML is handled through events that occur when the user or browser
manipulates a page.
When the page loads, that is an event. When the user clicks a button, that click, too, is an event. Another
example of events are like pressing any key, closing window, resizing window etc.
Developers can use these events to execute JavaScript coded responses, which cause buttons to close
windows, messages to be displayed to users, data to be validated, and virtually any other type of response
imaginable to occur.
Events are a part of the Document Object Model (DOM) Level 3 and every HTML element have a certain set
of events which can trigger JavaScript Code.
Please go through this small tutorial for a better understanding HTML Event Reference. Here we will see few
examples to understand a relation between Event and JavaScript:
onclick Event Type:

This is the most frequently used event type which occurs when a user clicks mouse left button. You can put
your validation, warning etc against this event type.
Example:
<html>
<head>

</script>
</head>
<body>
</body>
</html>
This will produce following result and when you click Hello button then onclick event will occur which will
trigger sayHello() function.
onsubmit event type:

Another most important event type is onsubmit. This event occurs when you try to submit a form. So you
can put your form validation against this event type.
Here is simple example showing its usage. Here we are calling a validate() function before submitting a form
data to the webserver. If validate() function returns true the form will be submitted otherwise it will not
submit the data.
Example:
<html>
<head>

</script>
</head>
<body>
<form method="POST" action="t.cgi" onsubmit="return validate()">
.......
<input type="submit" value="Submit" />
</form>
</body>
</html>
onmouseover and onmouseout:

These two event types will help you to create nice effects with images or even with text as well.
The onmouseover event occurs when you bring your mouse over any element and theonmouseout occurs
when you take your mouse out from that element.
Example:
Following example shows how a division reacts when we bring our mouse in that division:
<html>
<head>

</script>
</head>
<body>
<div onmouseover="over()" onmouseout="out()">
<h2> This is inside the division </h2>
</div>
</body>
</html>
You can change different images using these two event types or you can create help baloon to help your
users.
HTML 4 Standard Events

The standard HTML 4 events are listed here for your reference. Here script indicates a Javascript function to
be executed agains that event.
Event Value Description
onchange script Script runs when the element changes
onsubmit script Script runs when the form is submitted
onreset script Script runs when the form is reset
onselect script Script runs when the element is selected
onblur script Script runs when the element loses focus
onfocus script Script runs when the element gets focus
onkeydown script Script runs when key is pressed
onkeypress script Script runs when key is pressed and released
onkeyup script Script runs when key is released
onclick script Script runs when a mouse click
ondblclick script Script runs when a mouse double-click
onmousedown script Script runs when mouse button is pressed
onmousemove script Script runs when mouse pointer moves
onmouseout script Script runs when mouse pointer moves out of an

element
onmouseover script Script runs when mouse pointer moves over an element
onmouseup script Script runs when mouse button is released
Javascript - The Arrays Object

The Array object let's you store multiple values in a single variable.
Syntax:
Creating a Array object:
var fruits = new Array( "apple", "orange", "mango" );
The Array parameter is a list of strings or integers. When you specify a single numeric parameter with the
Array constructor, you specify the initial length of the array. The maximum length allowed for an array is
4,294,967,295.
You can create array by simply assigning values as follows:
var fruits = [ "apple", "orange", "mango" ];
You will use ordinal numbers to access and to set values inside an array as follows:
 fruits[0] is the first element

 fruits[1] is the second element
 fruits[2] is the third element
Array Properties:
Here is a list of each property and their description.
Property Description
constructor Returns a reference to the array function that created the object.
index The property represents the zero-based index of the match in the string
input This property is only present in arrays created by regular expression matches.
length Reflects the number of elements in an array.
prototype The prototype property allows you to add properties and methods to an object.
Array Methods
Here is a list of each method and its description.
Method Description
concat() Returns a new array comprised of this array joined with other array(s) and/or
value(s).
every() Returns true if every element in this array satisfies the provided testing function.
filter() Creates a new array with all of the elements of this array for which the provided
filtering function returns true.
forEach() Calls a function for each element in the array.
indexOf() Returns the first (least) index of an element within the array equal to the specified
value, or -1 if none is found.
join() Joins all elements of an array into a string.
lastIndexOf() Returns the last (greatest) index of an element within the array equal to the specified
value, or -1 if none is found.
map() Creates a new array with the results of calling a provided function on every element in
this array.
pop() Removes the last element from an array and returns that element.
push() Adds one or more elements to the end of an array and returns the new length of the
array.
reduce() Apply a function simultaneously against two values of the array (from left-to-right) as
to reduce it to a single value.
reduceRight() Apply a function simultaneously against two values of the array (from right-to-left) as
to reduce it to a single value.
reverse() Reverses the order of the elements of an array -- the first becomes the last, and the
last becomes the first.
shift() Removes the first element from an array and returns that element.
slice() Extracts a section of an array and returns a new array.
some() Returns true if at least one element in this array satisfies the provided testing
function.
toSource() Represents the source code of an object
sort() Sorts the elements of an array.
splice() Adds and/or removes elements from an array.

toString() Returns a string representing the array and its elements.
unshift() Adds one or more elements to the front of an array and returns the new length of the
array.
JavaScript - The Date Object

The Date object is a datatype built into the JavaScript language. Date objects are created with the new
Date( ) as shown below.
Once a Date object is created, a number of methods allow you to operate on it. Most methods simply allow
you to get and set the year, month, day, hour, minute, second, and millisecond fields of the object, using
either local time or UTC (universal, or GMT) time.
The ECMAScript standard requires the Date object to be able to represent any date and time, to millisecond
precision, within 100 million days before or after 1/1/1970. This is a range of plus or minus 273,785 years,
so the JavaScript is able to represent date and time till year 275755.
Syntax:
Here are different variant of Date() constructor:
new Date( )
new Date(milliseconds)
new Date(datestring)
new Date(year,month,date[,hour,minute,second,millisecond ])
Note: Paramters in the brackets are always optional
Here is the description of the parameters:
 No Argument: With no arguments, the Date( ) constructor creates a Date object set to the current
date and time.
 milliseconds: When one numeric argument is passed, it is taken as the internal numeric
representation of the date in milliseconds, as returned by the getTime( ) method. For example,
passing the argument 5000 creates a date that represents five seconds past midnight on 1/1/70.
 datestring:When one string argument is passed, it is a string representation of a date, in the
format accepted by the Date.parse( ) method.
 7 agruments: To use the last form of constructor given above, Here is the description of each
argument:
1. year: Integer value representing the year. For compatibility (in order to avoid the Y2K
problem), you should always specify the year in full; use 1998, rather than 98.
2. month: Integer value representing the month, beginning with 0 for January to 11 for
December.
3. date: Integer value representing the day of the month.
4. hour: Integer value representing the hour of the day (24-hour scale).
5. minute: Integer value representing the minute segment of a time reading.
6. second: Integer value representing the second segment of a time reading.
7. millisecond: Integer value representing the millisecond segment of a time reading.
Date Properties:
constructor Specifies the function that creates an object's prototype.
Date Methods:
Method Description
Date() Returns today's date and time
getDate() Returns the day of the month for the specified date according to local time.
getDay() Returns the day of the week for the specified date according to local time.
getFullYear() Returns the year of the specified date according to local time.
getHours() Returns the hour in the specified date according to local time.
getMilliseconds() Returns the milliseconds in the specified date according to local time.
getMinutes() Returns the minutes in the specified date according to local time.
getMonth() Returns the month in the specified date according to local time.
getSeconds() Returns the seconds in the specified date according to local time.
getTime() Returns the numeric value of the specified date as the number of
milliseconds since January 1, 1970, 00:00:00 UTC.
getTimezoneOffset() Returns the time-zone offset in minutes for the current locale.
getUTCDate() Returns the day (date) of the month in the specified date according to
universal time.
getUTCDay() Returns the day of the week in the specified date according to universal
time.
getUTCFullYear() Returns the year in the specified date according to universal time.
getUTCHours() Returns the hours in the specified date according to universal time.
getUTCMilliseconds() Returns the milliseconds in the specified date according to universal time.
getUTCMinutes() Returns the minutes in the specified date according to universal time.
getUTCMonth() Returns the month in the specified date according to universal time.
getUTCSeconds() Returns the seconds in the specified date according to universal time.
getYear() Deprecated - Returns the year in the specified date according to local
time. Use getFullYear instead.
setDate() Sets the day of the month for a specified date according to local time.
setFullYear() Sets the full year for a specified date according to local time.
setHours() Sets the hours for a specified date according to local time.
setMilliseconds() Sets the milliseconds for a specified date according to local time.
setMinutes() Sets the minutes for a specified date according to local time.
setMonth() Sets the month for a specified date according to local time.
setSeconds() Sets the seconds for a specified date according to local time.
setTime() Sets the Date object to the time represented by a number of milliseconds
since January 1, 1970, 00:00:00 UTC.
setUTCDate() Sets the day of the month for a specified date according to universal time.
setUTCFullYear() Sets the full year for a specified date according to universal time.
setUTCHours() Sets the hour for a specified date according to universal time.
setUTCMilliseconds() Sets the milliseconds for a specified date according to universal time.
setUTCMinutes() Sets the minutes for a specified date according to universal time.
setUTCMonth() Sets the month for a specified date according to universal time.
setUTCSeconds() Sets the seconds for a specified date according to universal time.
setYear() Deprecated - Sets the year for a specified date according to local time.
Use setFullYear instead.
toDateString() Returns the "date" portion of the Date as a human-readable string.
toGMTString() Deprecated - Converts a date to a string, using the Internet GMT

conventions. Use toUTCString instead.
toLocaleDateString() Returns the "date" portion of the Date as a string, using the current
locale's conventions.
toLocaleFormat() Converts a date to a string, using a format string.
toLocaleString() Converts a date to a string, using the current locale's conventions.
toLocaleTimeString() Returns the "time" portion of the Date as a string, using the current
locale's conventions.
toSource() Returns a string representing the source for an equivalent Date object; you
can use this value to create a new object.
toString() Returns a string representing the specified Date object.
toTimeString() Returns the "time" portion of the Date as a human-readable string.
toUTCString() Converts a date to a string, using the universal time convention.
valueOf() Returns the primitive value of a Date object.
Date Static Methods:

In addition to the many instance methods listed previously, the Date object also defines two static methods.
These methods are invoked through the Date( ) constructor itself:
Method Description
Date.parse( ) Parses a string representation of a date and time and returns the internal
millisecond representation of that date.
Date.UTC( ) Returns the millisecond representation of the specified UTC date and time.
Javascript - The Math Object

The math object provides you properties and methods for mathematical constants and functions.
Unlike the other global objects, Math is not a constructor. All properties and methods of Math are static and
can be called by using Math as an object without creating it.
Thus, you refer to the constant pi as Math.PI and you call the sine function as Math.sin(x), where x is the
method's argument.
Syntax:
Here is the simple syntax to call properties and methods of Math.
var pi_val = Math.PI;

var sine_val = Math.sin(30);
Math Properties:
E Euler's constant and the base of natural logarithms, approximately 2.718.
LN2 Natural logarithm of 2, approximately 0.693.
LN10 Natural logarithm of 10, approximately 2.302.
LOG2E Base 2 logarithm of E, approximately 1.442.
LOG10E Base 10 logarithm of E, approximately 0.434.
PI Ratio of the circumference of a circle to its diameter, approximately 3.14159.
SQRT1_2 Square root of 1/2; equivalently, 1 over the square root of 2, approximately 0.707.
SQRT2 Square root of 2, approximately 1.414.
Math Methods
Method Description
abs() Returns the absolute value of a number.
acos() Returns the arccosine (in radians) of a number.
asin() Returns the arcsine (in radians) of a number.
atan() Returns the arctangent (in radians) of a number.
atan2() Returns the arctangent of the quotient of its arguments.
ceil() Returns the smallest integer greater than or equal to a number.
cos() Returns the cosine of a number.
exp() Returns EN, where N is the argument, and E is Euler's constant, the base of the
natural logarithm.
floor() Returns the largest integer less than or equal to a number.
log() Returns the natural logarithm (base E) of a number.
max() Returns the largest of zero or more numbers.
min() Returns the smallest of zero or more numbers.
pow() Returns base to the exponent power, that is, base exponent.
random() Returns a pseudo-random number between 0 and 1.
round() Returns the value of a number rounded to the nearest integer.
sin() Returns the sine of a number.
sqrt() Returns the square root of a number.
tan() Returns the tangent of a number.
toSource() Returns the string "Math".
Javascript - The String Object

The String object let's you work with a series of characters and wraps Javascript's string primitive data type
with a number of helper methods.
Because Javascript automatically converts between string primitives and String objects, you can call any of
the helper methods of the String object on a string primitive.
Syntax:
Creating a String object:
var val = new String(string);
The string parameter is series of characters that has been properly encoded.
String Properties:
constructor Returns a reference to the String function that created the object.
length Returns the length of the string.
String Methods
Method Description
charAt() Returns the character at the specified index.
charCodeAt() Returns a number indicating the Unicode value of the character at the given index.
concat() Combines the text of two strings and returns a new string.
indexOf() Returns the index within the calling String object of the first occurrence of the
specified value, or -1 if not found.
lastIndexOf() Returns the index within the calling String object of the last occurrence of the
specified value, or -1 if not found.
localeCompare() Returns a number indicating whether a reference string comes before or after or is
the same as the given string in sort order.
match() Used to match a regular expression against a string.
replace() Used to find a match between a regular expression and a string, and to replace the
matched substring with a new substring.
search() Executes the search for a match between a regular expression and a specified string.
slice() Extracts a section of a string and returns a new string.
split() Splits a String object into an array of strings by separating the string into substrings.
substr() Returns the characters in a string beginning at the specified location through the
specified number of characters.
substring() Returns the characters in a string between two indexes into the string.
toLocaleLowerCase() The characters within a string are converted to lower case while respecting the
current locale.
toLocaleUpperCase() The characters within a string are converted to upper case while respecting the
current locale.
toLowerCase() Returns the calling string value converted to lower case.
toString() Returns a string representing the specified object.

toUpperCase() Returns the calling string value converted to uppercase.
valueOf() Returns the primitive value of the specified object.
String HTML wrappers

Here is a list of each method which returns a copy of the string wrapped inside the appropriate HTML tag.
Method Description
anchor() Creates an HTML anchor that is used as a hypertext target.
big() Creates a string to be displayed in a big font as if it were in a <big> tag.
blink() Creates a string to blink as if it were in a <blink> tag.
bold() Creates a string to be displayed as bold as if it were in a <b> tag.
fixed() Causes a string to be displayed in fixed-pitch font as if it were in a <tt> tag
fontcolor() Causes a string to be displayed in the specified color as if it were in a <font

color="color"> tag.
fontsize() Causes a string to be displayed in the specified font size as if it were in a <font
size="size"> tag.
italics() Causes a string to be italic, as if it were in an <i> tag.
link() Creates an HTML hypertext link that requests another URL.
small() Causes a string to be displayed in a small font, as if it were in a <small> tag.
strike() Causes a string to be displayed as struck-out text, as if it were in a <strike> tag.
sub() Causes a string to be displayed as a subscript, as if it were in a <sub> tag
sup() Causes a string to be displayed as a superscript, as if it were in a <sup> tag
JavaScript HTML DOM

« Previous
Next Chapter »
With the HTML DOM, JavaScript can access all the elements of an HTML document.
The HTML DOM (Document Object Model)

When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML DOM model is constructed as a tree of Objects:

The HTML DOM Tree
With a programmable object model, JavaScript gets all the power it needs to create
dynamic HTML:
 JavaScript can change all the HTML elements in the page

 JavaScript can change all the HTML attributes in the page
 JavaScript can change all the CSS styles in the page
 JavaScript can react to all the events in the page
What is the DOM?

The DOM is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing documents:
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that
allows programs and scripts to dynamically access and update the content, structure, and
style of a document."
The W3C DOM standard is separated into 3 different parts:
 Core DOM - standard model for all document types

 XML DOM - standard model for XML documents
 HTML DOM - standard model for HTML documents
What is the HTML DOM?

The HTML DOM is a standard object model and programming interface for HTML. It
defines:
 The HTML elements as objects

 The properties of all HTML elements
 The methods to access all HTML elements
 The events for all HTML elements
In other words: The HTML DOM is a standard for how to get, change, add, or delete
HTML elements.
JavaScript HTML DOM - Document

Often, with JavaScript, you want to manipulate HTML elements.
To do so, you have to find the elements first. There are a couple of ways to do this:
 Finding HTML elements by id

 Finding HTML elements by tag name
 Finding HTML elements by class name
 Finding HTML elements by HTML object collections
Finding HTML Elements by Id

The easiest way to find HTML elements in the DOM, is by using the element id.
This example finds the element with id="intro":
Example
var x=document.getElementById("intro");
If the element is found, the method will return the element as an object (in x).
If the element is not found, x will contain null.
Finding HTML Elements by Class Name

If you want to find all HTML elements with the same class name. Use this method:
document.getElementsByClassName("intro");
The example above returns a list of all elements with class="intro".
Finding HTML Elements by HTML Object Collections

This example finds the form element with id="frm", in the forms collection, and displays all
element values:
Example
var x=document.forms["frm1"];
for (var i=0;i<x.length;i++)
{
document.write(x.elements[i].value);
document.write("<br>");
}
JavaScript HTML DOM Navigation
With the HTML DOM, you can navigate the node tree using node relationships.
Navigating Node Relationships

The nodes in the node tree have a hierarchical relationship to each other.
The terms parent, child, and sibling are used to describe the relationships. Parent nodes
have children.
 In a node tree, the top node is called the root (or root node)
 Every node has exactly one parent, except the root (which has no parent)
 A node can have any number of children
 Siblings are nodes with the same parent (brothers or sisters)
The following image illustrates a part of the node tree and the relationship between the
nodes:
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
From the HTML above:
 The root node <html> has no parents

 The parent node of the <head> and <body> nodes is the <html> node
 The parent node of the "Hello world!" text node is the <p> node
and:
 The <html> node has two child nodes: <head> and <body>
 The <head> node has one child node: the <title> node
 The <title> node also has one child node: the text node "DOM Tutorial"
 The <h1> and <p> nodes are siblings and child nodes of <body>
and:
 The <head> element is the first child of the <html> element

 The <body> element is the last child of the <html> element
 The <h1> element is the first child of the <body> element
 The <p> element is the last child of the <body> element
You can use the node properties like parentNode, firstChild, and lastChild, to navigate in an
HTML document structure.
Warning !
A common error in DOM processing is to expect an element node to contain text.
In this example: <title>DOM Tutorial</title>, the element node <title> does not
contain text. It contains a text nodewith the value "DOM Tutorial".
The value of the text node can be accessed by the node's innerHTML property, or
the nodeValue.
Child Nodes and Node Values

In addition to the innerHTML property, you can also use the childNodes and nodeValue
properties to get the content of an element.
The following code gets the value of the <p> element with id="intro":
Example
<html>
<body>
<p id="intro">Hello World!</p>
<script>
var txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);
</script>
</body>
</html>
In the example above, getElementById is a method, while childNodes and nodeValue are
properties.
In this tutorial we use the innerHTML property. However, learning the method above is
useful for understanding the tree structure and the navigation of the DOM.
Using the firstChild property is the same as using childNodes[0]:
Example
<html>
<body>
<p id="intro">Hello World!</p>
<script>
txt=document.getElementById("intro").firstChild.nodeValue;
document.write(txt);
</script>
</body>
</html>
DOM Root Nodes

There are two special properties that allow access to the full document:
 document.documentElement - The full document

 document.body - The body of the document
Example
<html>
<body>
<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>document.body</b> property.</p>
</div>
<script>
alert(document.body.innerHTML);
</script>
</body>
</html>
JavaScript HTML DOM Events

Reacting to Events
A JavaScript can be executed when an event occurs, like when a user clicks on an HTML
element.
To execute code when a user clicks on an element, add JavaScript code to an HTML event
attribute:
onclick=JavaScript
Examples of HTML events:
 When a user clicks the mouse

 When a web page has loaded
 When an image has been loaded
 When the mouse moves over an element
 When an input field is changed
 When an HTML form is submitted
 When a user strokes a key
In this example, the content of the <h1> element is changed when a user clicks on it:
Example
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>
</body>
</html>
In this example, a function is called from the event handler:
Example
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on this text!</h1>
</body>
</html>
HTML Event Attributes

To assign events to HTML elements you can use event attributes.
Example
Assign an onclick event to a button element:
<button onclick="displayDate()">Try it</button>
In the example above, a function named displayDate will be executed when the button is
clicked.
Assign Events Using the HTML DOM

The HTML DOM allows you to assign events to HTML elements using JavaScript:
Example
Assign an onclick event to a button element:

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>
In the example above, a function named displayDate is assigned to an HTML element with
the id="myBtn".
The function will be executed when the button is clicked.
The onload and onunload Events

The onload and onunload events are triggered when the user enters or leaves the page.
The onload event can be used to check the visitor's browser type and browser version, and
load the proper version of the web page based on the information.
The onload and onunload events can be used to deal with cookies.
Example
<body onload="checkCookies()">
The onchange Event

The onchange event are often used in combination with validation of input fields.
Below is an example of how to use the onchange. The upperCase() function will be called
when a user changes the content of an input field.
Example
<input type="text" id="fname" onchange="upperCase()">
The onmouseover and onmouseout Events

The onmouseover and onmouseout events can be used to trigger a function when the user
mouses over, or out of, an HTML element.
The onmousedown, onmouseup and onclick Events

The onmousedown, onmouseup, and onclick events are all parts of a mouse-click. First
when a mouse-button is clicked, the onmousedown event is triggered, then, when the
mouse-button is released, the onmouseup event is triggered, finally, when the mouse-click
is completed, the onclick event is triggered.
Traversing and Modifying a DOM Tree

The DOM gives you access to the elements of a document, allowing you to modify the contents of a page
dynamically using event-driven JavaScript. This section introduces properties and methods of all DOM
nodes that enable you to traverse the DOM tree, modify nodes and create or delete content dynamically.
Example shows some of the functionality of DOM nodes, as well as two additional methods of
the document object. The program allows you to highlight, modify, insert and remove elements.
1 <?xml version = "1.0" encoding = "utf-8"?>

2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 
6 
7 <html xmlns = "http://www.w3.org/1999/xhtml">
8 <head>
9 <title>Basic DOM Functionality</title>
10 <style type = "text/css">
11 h1, h3 { text-align: center;
12 font-family: tahoma, geneva, sans-serif }
13 p { margin-left: 5%;
14 margin-right: 5%;
15 font-family: arial, helvetica, sans-serif }
16 ul { margin-left: 10% }
17 a { text-decoration: none }
18 a:hover { text-decoration: underline }
19 .nav { width: 100%;
20 border-top: 3px dashed blue;
21 padding-top: 10px }
22 .highlighted { background-color: yellow }
23 .submit { width: 120px }
24 </style>
25 <script type = "text/javascript">
26 
114 </script>
115 </head>
116 <body onload = "currentNode = document.getElementById( 'bigheading' )">
117 <h1 id = "bigheading" class = "highlighted">
118 [bigheading] DHTML Object Model</h1>
119 <h3 id = "smallheading">[smallheading] Element Functionality</h3>
120 <p id = "para1">[para1] The Document Object Model (DOM) allows for
121 quick, dynamic access to all elements in an XHTML document for
122 manipulation with JavaScript.</p>
123 <p id = "para2">[para2] For more information, check out the
124 "JavaScript and the DOM" section of Deitel's
125 <a id = "link" href = "http://www.deitel.com/javascript">
126 [link] JavaScript Resource Center.</a></p>
127 <p id = "para3">[para3] The buttons below demonstrate:(list)</p>
128 <ul id = "list">
129 <li id = "item1">[item1] getElementById and parentNode</li>
130 <li id = "item2">[item2] insertBefore and appendChild</li>
131 <li id = "item3">[item3] replaceChild and removeChild </li>
132 </ul>
133 <div id = "nav" class = "nav">
134 <form onsubmit = "return false" action = "">
135 <table>
136 <tr>
137 <td><input type = "text" id = "gbi"
138 value = "bigheading" /></td>
139 <td><input type = "submit" value = "Get By id"
140 onclick = "byId()" class = "submit" /></td>
141 </tr><tr>
142 <td><input type = "text" id = "ins" /></td>
143 <td><input type = "submit" value = "Insert Before"
144 onclick = "insert()" class = "submit" /></td>
145 </tr><tr>
146 <td><input type = "text" id = "append" /></td>
147 <td><input type = "submit" value = "Append Child"
148 onclick = "appendNode()" class = "submit" /></td>
149 </tr><tr>
150 <td><input type = "text" id = "replace" /></td>
151 <td><input type = "submit" value = "Replace Current"
152 onclick = "replaceCurrent()" class = "submit" /></td>
153 </tr><tr><td />
154 <td><input type = "submit" value = "Remove Current"
155 onclick = "remove()" class = "submit" /></td>
156 </tr><tr><td />
157 <td><input type = "submit" value = "Get Parent"
158 onclick = "parent()" class = "submit" /></td>
159 </tr>
160 </table>
161 </form>
162 </div>
163 </body>
164 </html>
Lines 117–132 contain basic XHTML elements and content. Each element has an id attribute, which is
also displayed at the beginning of the element in square brackets. For example, the id of the h1 element
in lines 117–118 is set to bigheading, and the heading text begins with[bigheading]. This allows the
user to see the id of each element in the page. The body also contains an h3 heading,
several p elements, and an unordered list.
A div element (lines 133–162) contains the remainder of the XHTML body. Line 134 begins
a formelement, assigning the empty string to the required action attribute (because we're not submitting
to a server) and returning false to the onsubmit attribute. When a form's onsubmit handler
returnsfalse, the navigation to the address specified in the action attribute is aborted. This allows us to
modify the page using JavaScript event handlers without reloading the original, unmodified XHTML.
A table (lines 135–160) contains the controls for modifying and manipulating the elements on the page.
Each of the six buttons calls its own event-handling function to perform the action described by its value.
The JavaScript code begins by declaring two variables. The variable currentNode (line 27) keeps track of
the currently highlighted node, because the functionality of the buttons depends on which node is
currently selected. The body's onload attribute (line 116) initializes currentNode to the h1element with id
bigheading. Variable idcount (line 28) is used to assign a unique id to any new elements that are
created. The remainder of the JavaScript code contains event handling functions for the XHTML buttons
and two helper functions that are called by the event handlers. We now discuss each button and its
corresponding event handler in detail.

JavaScript notes (3)

Uploaded by

JavaScript notes (3)

Uploaded by

What is JavaScript ?

 JavaScript is a lightweight, interpreted programming language

Limitations with JavaScript:

JavaScript Development Tools:

Where JavaScript is Today ?

The script tag takes two important attributes:

So your JavaScript segment will look like:

Your First JavaScript Script:

Whitespace and Line Breaks:

Semicolons are Optional:

<script language="javascript" type="text/javascript">

<script language="javascript" type="text/javascript">

Note: It is a good programming practice to use semicolons.

<script language="javascript" type="text/javascript">

// This is a comment. It is similar to comments in C++

JavaScript Placement in HTML File

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

JavaScript in <head>...</head> section:

This will produce following result:

JavaScript in <body>...</body> section:

This will produce following result:

JavaScript in <body> and <head> sections:

This will produce following result:

JavaScript in External File :

JavaScript Variables and DataTypes

JavaScript allows you to work with three primitive data types:

 Numbers eg. 123, 120.50 etc.

JavaScript Variable Scope:

This produces the following result:

JavaScript Variable Names:

JavaScript Reserved Words:

abstract else instanceof switch

Lets have a look on all operators one by one.

The Arithmatic Operators:

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 integer B % A will give 0

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

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

The Comparison Operators:

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

Operator Description Example

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

The Logical Operators:

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

Operator Description Example

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

The Bitwise Operators:

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

Operator Description Example

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

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

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

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

The Assignment Operators:

Operator Description Example

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

-= Subtract AND assignment operator, It subtracts right C -= A is equivalent to C = C - A

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

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

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

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

The typeof Operator

Here is the list of return values for the typeof Operator :

Type String Returned by typeof

JavaScript if...else Statements

JavaScript supports following forms of if..else statement:

This will produce following result:

Qualifies for driving

This will produce following result:

Does not qualify for driving

This will produce following result:

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