Javascript Tutorial PPT - PowerPoint PPT Presentation

About This Presentation

Title:

Javascript Tutorial PPT

Description:

JavaScript, often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and multi-paradigm. It has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-class functions. – PowerPoint PPT presentation

Number of Views:216

Slides: 84

Provided by: eymockups

Category: How To, Education & Training

more less

Transcript and Presenter's Notes

Title: Javascript Tutorial PPT

1
JavaScript
2
History

First web scripting language
Developed by Netscape and Sun
Initiated by Netscape and called LiveScript
In parallel with this, Sun was developing Java

3
History

Netscape and Sun got together and realized that
many of the specifications for Java could apply
to LiveScript
Result is JavaScript

4
JavaScript Versus Java

JavaScript is interpreted while Java is compiled
But server-side JavaScript is compiled
JavaScript is object-based while Java is
object-oriented
Object-based languages can utilize pre-defined
objects, but you are limited in terms of creating
your own objects

5
JavaScript Versus Java

JavaScript has loose data typing, while Java has
strong data typing
Loose data typing means that a variable can hold
any kind of data
JavaScript code is embedded in an HTML document
while Java applets are stand-alone applications
that can be accessed from HTML

6
JavaScript Versus Java

JavaScript has dynamic binding, while Java has
static binding
Names bound at runtime
JavaScript can access browser objects and
functionality, while Java cannot

7
Client-Side JavaScript

Client-side JavaScript scripts operate on a
client running Netscape Navigator (Microsoft
Internet Explorer also supports it now) and are
interpreted by Netscape Navigator

8
Client-Side JavaScript

Detect whether the browser supports a certain
plug-in
Control a plug-in
Validate user form input
Prompt a user for confirmation
Perform post-processing of information retrieved
from server-side JavaScript scripts

9
Server-Side JavaScript

JavaScript scripts that run on the server are
called LiveWire applications because they use the
Netscape LiveWire development environment
This is the only system that supports server-side
JavaScript development

10
Server-Side JavaScript

Unlike CGI scripts, LiveWire applications are
more closely integrated to the HTML pages that
control them
Can have a page that accepts credit card payments
and gives user immediate feedback on the same
page about whether card was accepted

11
Client Scripts

To display error or information boxes
To validate user input
To display confirmation boxes
To process server data, such as aggregate
calculations
To add programmable logic to HTML

12
Client Scripts

To perform functions that dont require
information from the server
To produce a new HTML page without making a
request to the server

13
Server Scripts

To maintain data shared among applications or
clients
To maintain information during client accesses
To access a database
To access server files
To call server C libraries
To customize Java applets

14
Scripts

Client-side and server-side JavaScript scripts
are both embedded in an HTML file
For server-side JavaScript scripts, this HTML
file is compiled with the LiveWire compiler
Creates a file that is in a platform-independent
and compiled bytecode format

15
Scripts

Client-side JavaScript needs Netscape Navigator
and a standard HTML server
Server-side JavaScript needs the LiveWire
compiler, the LiveWire Application Manager, and a
Netscape HTML server that supports the LiveWire
server extension

16
Scripts

Examples js1.htm, js2.htm, js3.htm
The ltheadgt portion of an HTML page is the first
to load, so it is best to define the functions
for a page in this portion
Functions can be called in the ltbodygt portion

17
JavaScript Program Code

Main body
Event handlers
Functions

18
Main Body

Main Body
Any code that is between ltscriptgt and lt/scriptgt
that is not a function definition

19
Events

Events
Mouse click
Re-sizing window

20
Event Handlers

Event handlers
Scripts that link events to JavaScript functions
Embed in HTML documents as attributes of HTML
tags
lttag eventHandler JavaScript Codegt
Example js4.htm

21
More Events

Top-level actions causing change in web page
being displayed
Navigation
Interaction with an element of an HTML form

22
Navigation

Selecting a hypertext link
Moving forward or backward in the history list
Opening a new URL
Quitting the browser

23
Navigation

In these events, some page is being loaded or
unloaded
These are document-level events that can be
handled by JavaScript

24
JavaScript Events

button
click
checkbox
click
document
load
unload

25
JavaScript Events

form
submit
link
click
mouseover
radio
click

26
JavaScript Events

selection
blur
change
focus
submit
click

27
JavaScript Events

text
change
focus
A text field is said to have focus when it is
currently accepting typed input
Clicking anywhere inside a text item gives it
focus
Moving the mouse over the text field may give it
focus
blur
The opposite of focus
select

28
JavaScript Events

textarea
blur
change
focus
select

29
Functions

Defining a function to create an object
function house(rms, stl, yr, gar)
this.rooms rms
this.style stl
this.yearBuilt yr
this.hasGarage gar
var myhouse new house(8, Ranch, 1990, true)

30
Functions

Every object is an array of its property values
and every array is an object
0-based indexing
Thus,
myhouse0 8
myhouse1 Ranch
myhouse2 1990
myhouse3 true

31
Functions

Every object is also an associative array
Thus,
myhouserooms 8
myhousestyle Ranch
myhouseyearBuilt 1990
myhousehasGarage true

32
Functions

Can dynamically extend an object instance
yourhouse new house(12, Tudor, 1934, true)
yourhouse.hasPorch false
yourhouse.windows 46
Doesnt affect other object instances nor the
object itself

33
Functions

A variable-length array-of-strings object
function stringarr(howMany, initStr)
this.length howMany
for (var j 1 j lt howMany j)
thisj initStr

34
for..in Statement

for (varName in objName)
forBody
varName takes on the successive property names of
the object objName

35
for..in Statement

function showAny(anyObj)
for (var iter in anyObj)
document.write(ltbrgtProperty iter is
anyObjiter)
document.write(ltbrgt)

36
Methods

function house(rms, stl, yr, garp)
this.length 5
this.rooms rms
this.style stl
this.yearBuilt yr
this.hasGarage gar
this.show mshowHouse

37
Methods

function mshowHouse( )
var nprops this.length
for (var iter 1 iter lt nprops iter)
document.write(ltbrgtProperty iter
is thisiter)
document.write(ltbrgt)
myhouse.show( )

38
Techniques for Including JavaScript Code in HTML

Embed script between ltscriptgt and lt/scriptgt
Event-handler functions
Through the javascript URL pseudo-protocol
The JavaScript HTML entity
lt

39
The ltscriptgtlt/scriptgt Tags

ltscriptgt-tag may appear in head or body
The language attribute is optional
ltscript language JavaScriptgt
// JavaScript code
lt/scriptgt
Works for both Navigator 2.0 and Navigator 3.0
language JavaScript1.1 works only for
Navigator 3.0

40
The ltscriptgtlt/scriptgt Tags

JavaScript is not the only language to use the
ltscriptgt-tag
ltscript language VBScriptgt
' VBScript code
lt/scriptgt
JavaScript is the default scripting language
Can leave out the language attribute

41
The ltscriptgtlt/scriptgt Tags

An HTML document may contain more than one pair
of non-overlapping ltscriptgt and lt/scriptgt-tags
Statements executed in order of appearance
They constitute part of the same JavaScript
program, however
ltscriptgt var x 1 lt/scriptgt
ltscriptgt document.write(x) lt/scriptgt

42
The ltscriptgtlt/scriptgt Tags

Selectively displaying text in JavaScript-ignorant
browsers
ltscript language nonegt
Your browser doesnt understand JavaScript.
This page wont work for you.
lt/scriptgt

43
The ltscriptgtlt/scriptgt Tags

Selectively displaying text in JavaScript-ignorant
browsers
Browsers that recognize the ltscriptgt-tag will
know there is no such language as none and will
ignore everything between the ltscriptgt and
ltscriptgt-tags
Browsers that dont understand the ltscriptgt and
lt/scriptgt-tags will ignore them and display the
two lines in-between them

44
The ltscriptgtlt/scriptgt Tags

Including JavaScript files
ltscript src ../../javascript /prog.jsgt
lt/scriptgt
Simplifies your HTML files
Can share JavaScript among different HTML files

45
The ltscriptgtlt/scriptgt Tags

Including JavaScript files
When they are used by more than one HTML file,
this allows them to be cached by the browser,
allowing them to load more quickly
The time savings of caching outweighs the delay
incurred by the browser opening a network
connection to download the JavaScript file

46
The ltscriptgtlt/scriptgt Tags

Including JavaScript files
A JavaScript program from one machine can use
code located on other machines
This only works for Netscape 3.0 and higher
Can include JavaScript code in-between the
ltscriptgt and lt/scriptgt-tags for Netscape 2.0
browsers, as this is ignored by Netscape 3.0
browsers if the SRC attribute is defined

47
Event Handler Functions

Area
onClick( ), onMouseOver( ), onMouseOut( )
Button
onClick( )
Checkbox
onClick( )

48
Event Handler Functions

FileUpload
onBlur( ), onChange( ), onFocus( )
Form
onSubmit( )
Frame
onLoad( ), onUnload( )
Image
onAbort( ), onError( ), onLoad( )

49
Event Handler Functions

Link
onClick( ), onMouseOver( ), onMouseOut( )
Radio
onClick( )
Reset
onClick( )
Select
onChange( )

50
Event Handler Functions

Submit
onClick( )
Text
onBlur( ), onChange( ), onFocus( )
Textarea
onBlur( ), onChange( ), onFocus( )
Window
onBlur( ), onError( ), onFocus( ), onLoad( ),
onUnload( )

51
JavaScript in URL's

javascriptfunctiongreetingnamemessage
Multiple statements separated by semi-colons
Value of last expression evaluated becomes the
document that URL refers to and this value will
be formatted and displayed

52
JavaScript in URL's

javascriptalert(Hello World!)
Has side-effect but returns no value
Browser executes the code but doesnt modify
currently displayed document

53
JavaScript in URL's

Can use void operator to remove returned value
and just have side-effect of assignment
javascriptvoid function( )
Microsoft has syntax,
lta href script-enginescript-codegt
Supports vbscript

54
JavaScript Entities

JavaScript-statements
Can only appear within the value of HTML
attributes
ltbody bgcolor favorite_color( )gt

55
Order of Execution

Scripts
JavaScript statements that appear between
ltscriptgt and lt/scriptgt-tags are executed in the
order they appear
When more than one script appears in a page, they
are executed in the order they appear

56
Order of Execution

Scripts
JavaScript code evaluation occurs as part of the
browsers HTML parsing process
Thus, if script appears in the ltheadgt portion of
an HTML document, none of the ltbodygt of the
document will have been defined yet
Thus, many JavaScript objects, such as form
objects, havent as yet been created and cannot
be manipulated by this code

57
Order of Execution

Functions
Functions shouldnt be executed before the
objects they manipulate exist
Functions should be defined before they are
invoked
Can define function to manipulate objects before
these objects exist

58
Order of Execution

Event handlers
May be invoked before a page is fully loaded and
parsed
In a slow network connection, some links can
initially appear and be clicked before page fully
loads
Thus, if your event handler invokes functions,
you must make sure they are defined
Put all function definitions in the ltheadgt

59
Order of Execution

Event handlers
Also, you must take care that event handlers
dont try to manipulate HTML objects that havent
been parsed and created
Can test for existence of object to be
manipulated
if ((parent.frames1) (parent.frames1.docume
nt) (parent.frames1.document.myform))

60
Order of Execution

Event handlers
Also, you must take care that event handlers
dont try to manipulate HTML objects that havent
been parsed and created
Place this small script at very end of document
which sets a flag and have event handlers test
this flag
ltscriptgtdone_loading1lt/scriptgtlt/bodygtlt/htmlgt

61
Order of Execution

Event handlers
onLoad( ) and onUnload( ) event handlers
In Netscape 3.0, the onLoad( ) handler is
executed when document or frameset is fully
loaded
When using multiple frames, one doesnt know in
what order the onLoad( ) handler will be invoked
for the various frames
Handler for child frames can be invoked before
handler for parent frame

62
Order of Execution

Event handlers
onLoad( ) and onUnload( ) event handlers
The onUnload( ) handler is executed when user
requests the browser to move to some other page
and just before the browser leaves current
document

63
Order of Execution

JavaScript URLs
This is not executed when the document containing
the URL code is loaded
Only interpreted when the browser tries to load
the document to which URL refers

64
Order of Execution