JavaScript

Designed By:

By : Nivarutti Patil
Introduction to JavaScript
¾ JavaScript is Netscape’s cross-platform, object-oriented scripting
language.
¾ Core JavaScript contains a core set of objects, such as Array,
Date, and Math, and a core set of language elements such as
operators, control structures, and statements.
¾ Core JavaScript can be extended for a variety of purposes by
supplementing it with additional objects
ƒ Client-side JavaScript
• control a browser and its Document Object Model (DOM).
ƒ Server-side JavaScript
• allow an application to communicate with a relational
database,
• provide continuity of information from one invocation to
another of the application, or perform file manipulations on
a server.
JavaScript Characteristics
¾ JavaScript is Scripting Language
¾ JavaScript is an interpreted language (means that scripts execute
without preliminary compilation)
¾ JavaScript is Object Orientated (JavaScript 1.3)
¾ JavaScript is Even Driven
¾ JavaScript is Platform-independent
¾ JavaScript enables Quick development
¾ JavaScript is relatively easy to learn
¾ JavaScript is supported by all major browsers, like Netscape and
Internet Explorer
What can a JavaScript Do?

¾ JavaScript gives HTML designers a programming tool

¾ JavaScript can put dynamic text into an HTML page
¾ JavaScript can react to events
¾ JavaScript can read and write HTML elements
¾ JavaScript can be used to validate data - A JavaScript can be
used to validate form data before it is submitted to a server, this
will save the server from extra processing
Extension: Client vs. Server

¾ Client-Side
ƒ Objects to control a browser
ƒ Document Object Model – DOM

¾ Server-Side
ƒ Communication with a relational database
ƒ File manipulation on a server
ƒ Continuity of information for applications
 Pros & Cons

¾ Pros ¾ Cons
ƒ Saves bandwidth ƒ Browser-specific DOM
ƒ Easy to implement implementations
ƒ Adds interaction ƒ security
ƒ Works well with HTML
 JavaScript & Java
¾ JavaScript
ƒ Interpreted (not compiled) by
client.
ƒ Object-oriented. No
distinction between types of
objects. Inheritance is through
the prototype mechanism, and
properties and methods can be
added to any object
dynamically.
¾ Java
ƒ Compiled bytecodes downloaded
from server, executed on client
ƒ Class-based. Objects are divided
into classes and instances with all
inheritance through the class
hierarchy. Classes and instances
cannot have properties or methods
added dynamically.
JavaScript How and Where
¾ How to Put a JavaScript Into an HTML Page
¾ Where to Put the JavaScript
¾ How to Run an External JavaScript
¾ Ending Statements With a Semicolon
¾ How to Handle Older Browsers
¾ Comments
JavaScript Variables
¾ Variables
ƒ A variable is a "container" for information you want to store.
ƒ Variable names are case sensitive
ƒ They must begin with a letter or the underscore character
¾ Declare a Variable
ƒ var strname = some value
¾ Assign a Value to a Variable
var strname = "Hege" or like strname = "Hege"
¾ Lifetime of Variables
ƒ local variables ( inside Function)
ƒ variable outside a function
 JavaScript Operators
¾ Arithmetic Operators
¾ Operator Description Example Result
ƒ + Addition x=2x+2 4
ƒ - Subtraction x=25-x 3
ƒ * Multiplication x=4x*5 20
ƒ / Division 15/5, 5/2 3, 2.5
ƒ % Modulus 5%2 10%8 10%2 120
ƒ ++ Increment x=5 x++ x=6
ƒ -- Decrement x=5 x-- x=4
¾ Assignment Operators
Operator Example Is The Same As
ƒ = x=y x=y
ƒ += ,-=, *= , /=, %=
 Continued..
¾ Comparison Operators
Operator Description Example
== is equal to 5==8 returns false
=== is equal to (checks for both value and type) x=5
EXAMPLE
y="5"
x==y returns true
x===y returns false
!= is not equal 5!=8 returns true
> is greater than 5>8 returns false
< is less than 5<8 returns true
>= is greater than or equal to 5>=8 returns false
<= is less than or equal to 5<=8 returns true
Continued..
¾ Logical Operators
¾ Operator Description Example
ƒ && and x=6 y=3 (x < 10 && y > 1)
returns true
ƒ || or x=6 y=3 ( x == 5 || y == 5 )
returns false
ƒ ! not x=6 y=3 !( x == y )
returns true
¾ String Operator
txt1="What a very“
txt2="nice day!“
txt3=txt1+txt2
JavaScript Conditional Statements

¾ Conditional Statements
Very often when you write code, you want to perform
different actions for
different decisions. You can use conditional statements in
your code to do this.
¾ In JavaScript we have three conditional statements:
ƒ if statement - use this statement if you want to execute a set
of code when a condition is true
ƒ if...else statement - use this statement if you want to select
one of two sets of lines to execute
ƒ if...else if....else statement - use this statement if you want to
select one of many sets of lines to execute
ƒ switch statement - use this statement if you want to select
one of many sets of lines to execute
Conditional Operator
¾ JavaScript also contains a conditional operator that assigns a
value to a variable based on some condition.
¾ Syntax
¾ variablename=(condition)?value1:value2
¾ Example
¾ greeting=(visitor=="PRES")?"Dear President ":"Dear "
JavaScript Looping

¾ In JavaScript we have the following looping statements:

¾ • while - loops through a block of code while a condition is true

¾ • do...while - loops through a block of code once, and then

repeats the loop while a condition is true

¾ • for - run statements a specified number of times

Summary
¾ Scripting languages were developed to overcome the drawbacks
of HTML.
¾ Disadvantages of HTML:
ƒ Client –Side validation not possible in HTML.
ƒ Does not provide event-handling and other features required to make
Web pages more interactive.
¾ JavaScript was developed by Netscape. It was initially called
LiveScript.
¾ JavaScript can be used to client side as well as server-side
scripts.
¾ JavaScript is interpreted on the client side by browser, Unlike Java
or any other programming language.
¾ JavaScript does not require the definition of variable datatypes
¾ JavaScript can be embedded in HTML. (Inside head, body and
external file as well)
¾ A variable can be a local variable or global variable.
Continued..
¾ Programming constructs offer methods of controlling the flow of
program.
¾ There are two types of constructs:
ƒ Conditional
ƒ Iterative
¾ Following are the different types of conditional constructs:
ƒ If…else
ƒ Additional conditions
ƒ If…else if…else
ƒ Switch case
¾ There are the types if iterative constructs:
ƒ While
ƒ Do…While
ƒ For
¾ The following two statements help control expression in loop:
ƒ Break
ƒ Continue