KEMBAR78
Javascript sivasoft | PPT
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

Javascript sivasoft

  • 1.
    JAVASCRIPT By K.Siva Kumar
  • 2.
    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
  • 3.
    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
  • 4.
  • 5.
    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>
  • 6.
    Variables  JavaScriptvariables 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.
  • 7.
    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 (--).
  • 8.
    Assignment Operators  Assignment operators are used to assign values to JavaScript variables.  Operators like '=', '+=', -=, *=, /=, %=.  For Example x+=y represents (x=x+y).
  • 9.
    + Operator onString  The + operator can also be used to add string variables or text values together.
  • 10.
    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)
  • 11.
    Popup Boxes  JavaScripthas three kind of popup boxes: Alert box, Confirm box, and Prompt box.
  • 12.
    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>
  • 13.
    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.
  • 14.
    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
  • 15.
    If Statement  ifstatement to execute some code only if a specified condition is true. Syntax : if (condition) { code to be executed if condition is true }
  • 16.
    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 }
  • 17.
    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 }
  • 18.
    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 }
  • 19.
    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
  • 20.
    For Loop  Forloop 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 }
  • 21.
    While Loop  Whileloop loops through a block of code while a specified condition is true. Syntax : while (variable<=endvalue) { code to be executed }
  • 22.
    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);
  • 23.
    Break & ContinueStatement  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.
  • 24.
    Functions  A functionwill 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.
  • 25.
    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.
  • 26.
    What is anArray  An array is a special variable, which can hold more than one value, at a time.
  • 27.
    Objects  Object BasedProgramming  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.
  • 28.
    Date Object  TheDate 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)
  • 29.
     Math Object  The Math object allows you to perform mathematical tasks.  The Math object includes several mathematical constants and methods.
  • 30.
    Regular Expressions  Aregular 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.
  • 31.
     The Navigatorobject contains information about the visitor's browser.
  • 32.
     A cookieis 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