Javascript sivasoft

JAVASCRIPT
By
K.Siva Kumar

Topics Covered

Introduction to Javascript

Javascript Basic Concepts

Creating DHTML Pages

Rollovers

Working with Forms

Working with Events

DOM, NODE and OBJECTS

Working with Date and Times

Realtime Examples

Introduction to JAVASCRIPT

It is used to add interactivity to our webpages

It is a scripting language

Javascript scripts are text on Web pages that
are interpreted and run by Web Browsers

We can create active user interface

Validate user input on Forms

First Script

<script type=”text/javascript”>
document.write(“Welcome to Javascript”);
</script>

Comments
Single Comments are //
<script type="text/javascript">
document.write("Hello"); // This will write "Hello"
document.write("Dolly"); // This will write "Dolly"
</script>
Multi line comments are /* */
<script type="text/javascript">
/*
document.write("<h1>This is a header</h1>"); document.write("<p>This
is a paragraph</p>");
document.write("<p>This is another paragraph</p>");
*/
</script>

Variables


JavaScript variables are used to hold values or
expressions.

A variable can have a short name, like x, or a more
descriptive name, like carname.
Rules for JavaScript variable names:

Variable names are case sensitive (y and Y are two
different variables)

Variable names must begin with a letter, the $ character, or
the underscore character

Note: Because JavaScript is case-sensitive, variable names
are case-sensitive.

Arithmetic Operators


Arithmetic operators are used to perform
arithmetic between variables and/or values.

Operators like Addition (+), Subtraction (-),
Multiplication (*), Division (/), Modulus (%)
(division remainder), Increment (++),
Decrement (--).

Assignment Operators


Assignment operators are used to assign
values to JavaScript variables.

Operators like '=', '+=', -=, *=, /=, %=.

For Example x+=y represents (x=x+y).

+ Operator on String


The + operator can also be used to add
string variables or text values together.

Comparison Operators

Comparison operators are used in logical
statements to determine equality or difference
between variables or values.

Operators like
== (equal to)
=== (exactly equal to)
!= (not equal)
> (greater than)
< (less than)
>= (greater than or equal to)
<= (less than or equal to)

Popup Boxes


JavaScript has three kind of popup boxes:
Alert box, Confirm box, and Prompt box.

Alert box


An alert box is often used if you want to
make sure information comes through to the
user.

When an alert box pops up, the user will
have to click "OK" to proceed.
<script type=”text/javascript”>
alert(“Welcome to Javascript”);
</script>

Confirm Box


A confirm box is often used if you want the
user to verify or accept something.

When a confirm box pops up, the user will
have to click either "OK" or "Cancel" to
proceed.

If the user clicks "OK", the box returns true.
If the user clicks "Cancel", the box returns
false.

Conditional Statements

Conditional statements are used to perform
different actions based on different
conditions.

if statement - to execute some code only if a
specified condition is true

if...else statement - to execute some code if the
condition is true and another code if the condition is
false

if...else if....else statement - to select one of many
blocks of code to be executed

switch statement - to select one of many blocks of
code to be executed

If Statement

if statement to execute some code only if a
specified condition is true.

Syntax :

if (condition)
{
code to be executed if condition is true
}

If...else Statement

if....else statement to execute some code if
a condition is true and another code if the
condition is not true.
Syntax :
if (condition)
{
code to be executed if condition is true
}
else
{
code to be executed if condition is not true
}

If...else if...else Statement

if....else if...else statement to select one of
several blocks of code to be executed.
Syntax :
if (condition1)
{
code to be executed if condition1 is true
}
else if (condition2)
{
code to be executed if condition2 is true
}
else
{
code to be executed if neither condition1 nor condition2 is true
}

Switch Statement

switch statement to select one of many
blocks of code to be executed.
Syntax :
switch(n)
{
case 1:
execute code block 1
break;
case 2:
execute code block 2
break;
default:
code to be executed if n is different from case 1 and 2
}

Loops

Loops execute a block of code a specified
number of times, or while a specified
condition is true.

In JavaScript, there are two different kind of
loops:

for - loops through a block of code a specified number
of times

while - loops through a block of code while a specified
condition is true

For Loop


For loop is used when you know in advance
how many times the script should run.
Syntax :
for (variable=startvalue;variable<=endvalue;variable=variable+increment)
{
code to be executed
}

While Loop

While loop loops through a block of code
while a specified condition is true.

Syntax :

while (variable<=endvalue)
{
code to be executed
}

do...while Loop

do...while loop is a variant of the while loop.
This loop will execute the block of code
ONCE, and then it will repeat the loop as long
as the specified condition is true.
Syntax :
do
{
code to be executed
}
while (variable<=endvalue);

Break & Continue Statement


break statement will break the loop and
continue executing the code that follows after
the loop (if any).

continue statement will break the current
loop and continue with the next value.

Functions

A function will be executed by an event or
by a call to the function.

A function contains code that will be executed by an
event or by a call to the function.

You may call a function from anywhere within a page
(or even from other pages if the function is embedded in
an external .js file).

Functions can be defined both in the <head> and in the
<body> section of a document. However, to assure that
a function is read/loaded by the browser before it is
called, it could be wise to put functions in the <head>
section.

Define a Function
Syntax :
function functionname(var1,var2,...,varX)
{
some code
}

The parameters var1, var2, etc. are variables or values passed into the
function. The { and the } defines the start and end of the function.
Note: A function with no parameters must include the parentheses () after
the function name.
Note: Do not forget about the importance of capitals in JavaScript! The
word function must be written in lowercase letters, otherwise a
JavaScript error occurs! Also note that you must call a function with
the exact same capitals as in the function name.

What is an Array


An array is a special variable, which can
hold more than one value, at a time.

Objects


Object Based Programming

JavaScript is an Object Based Programming language, and
allows you to define your own objects and make your own variable
types.

However, creating your own objects will be explained later, in the
Advanced JavaScript section. We will start by looking at the built-in
JavaScript objects, and how they are used.

Date Object


The Date object is used to work with dates and times.

Date objects are created with the Date() constructor.

There are four ways of instantiating a date:

new Date() // current date and time

new Date(milliseconds) //milliseconds since 1970/01/01

new Date(dateString)

new Date(year, month, day, hours, minutes, seconds,
milliseconds)


Math Object

The Math object allows you to perform mathematical tasks.

The Math object includes several mathematical constants and
methods.

Regular Expressions


A regular expression is an object that describes a pattern of
characters.

When you search in a text, you can use a pattern to describe
what you are searching for.

A simple pattern can be one single character.

A more complicated pattern can consist of more characters, and
can be used for parsing, format checking, substitution and more.

Regular expressions are used to perform powerful pattern-
matching and "search-and-replace" functions on text.


The Navigator object contains information
about the visitor's browser.


A cookie is often used to identify a user.

A cookie is a variable that is stored on the visitor's computer.
Each time the same computer requests a page with a browser, it
will send the cookie too. With JavaScript, you can both create and
retrieve cookie values.
Examples of cookies:

Name cookie - The first time a visitor arrives to your web page, he
or she must fill in her/his name. The name is then stored in a
cookie. Next time the visitor arrives at your page, he or she could
get a welcome message like "Welcome SivaSoft!" The name is
retrieved from the stored cookie

Date cookie - The first time a visitor arrives to your web page, the
current date is stored in a cookie. Next time the visitor arrives at
your page, he or she could get a message like "Your last visit was
on Tuesday August 11, 2005!" The date is retrieved from the stored
cookie

Javascript sivasoft

More Related Content

What's hot

Viewers also liked

Similar to Javascript sivasoft

More from ch samaram

Javascript sivasoft