Transcript Web-based Application Development

Scripting Languages
and the DOM
1
copyright Penny McIntire, 2007
Contents
•
•
•
•
Scripting Languages
The Document Object Model
Referencing an object
Event-driven programming
• Note: purpose of the JavaScript lectures
is to give you the background to learn
more advanced usage on your own.
2
copyright Penny McIntire, 2007
Scripting Languages
• Scripting language: a programming
language that is interpreted as
opposed to being compiled.
– The interpreter executes the script directly,
similar to the scripting used in Unix shells.
– Slower than compiled languages.
– Essentially “light” programming languages,
with a stripped-down functionality.
– Nonetheless, JavaScript is quite powerful,
and quite complex.
3
copyright Penny McIntire, 2007
Scripting Languages
• Static web pages are merely displayed,
while dynamic web pages “do” things.
• Scripting languages are what enable us
to create dynamic web pages, which
can do things like…
4
copyright Penny McIntire, 2007
Scripting Languages
• Accessing document content.
– Can include cool graphics features such as
displaying a different image on mouseover.
• Accessing the browser.
– Can determine browser type and version,
pop windows up, reroute to a different
page, route to previous or next pages (e.g,
doing the same thing as forward and back
buttons on the browser window).
5
copyright Penny McIntire, 2007
Scripting Languages
• Saving user information with a cookie: a
piece of data that allows a web site to
“remember” things.
– Example: saving log-in data about a user,
which would allow the user to breeze
through the log-in process after the first
time on the site.
– Cookies are saved on the user’s computer,
if the user has not disabled cookies.
6
copyright Penny McIntire, 2007
Scripting Languages
• Interacting with the user.
– Provides event handlers for capturing
events like mouse clicks.
• Capturing user input from HTML forms
and validating the format of that input
before sending off to the server.
• Performing calculations.
• All of these have been examples of
dynamic content.
7
copyright Penny McIntire, 2007
Scripting Languages
• Scripting languages are specifically
designed not to do things that might
violate the security of the client.
– Cannot (uhm, should not?) do such things as
mess around with the browser’s preference
settings or reading or writing files on the
user’s computer (exception: cookies).
– “Sandbox” metaphor similar to Java: they are
given a sandbox in which to play and cannot
leave that sandbox.
8
copyright Penny McIntire, 2007
Scripting Languages
• Scripting language standards:
– European Computer Manufacturer’s
Association (ECMA, pronounced ECK-ma,
www.ecma.ch ) maintains scripting
standards.
– All browser manufacturers have pledged to
follow the standard, but even so, they
follow their own interpretations of the
standards.
9
copyright Penny McIntire, 2007
Scripting Languages
• Two major scripting languages used in
browsers:
– VBScript
– JavaScript
10
copyright Penny McIntire, 2007
VBScript
• Developed by Microsoft.
• Technically, VBScript works only in IE,
not in Firefox, although there is an addon for Firefox.
• Due to its proprietary nature, VBScript
is less portable.
• We won’t use it.
11
copyright Penny McIntire, 2007
JavaScript
• Developed by Netscape but supported
by all major browsers.
• Cross-platform.
• Microsoft has its own, proprietary,
implementation of JavaScript, called
Jscript.
• We will simply refer to all versions by
the generic name JavaScript.
12
copyright Penny McIntire, 2007
JavaScript
• First announced in December 1995.
• Various versions of JavaScript are
supported by various browser versions.
• Always keep in mind that different
versions of even the same browser
support JavaScript differently.
13
copyright Penny McIntire, 2007
JavaScript
• JavaScript and Java are not the same:
– Netscape got permission to use “Java” in
the JavaScript name.
– Good marketing ploy, but JavaScript should
not be confused with the Java
programming language.
– JavaScript is a scripting language that is
interpreted on the browser, while Java is a
full-blown programming language.
– However, the syntax of JavaScript is very
14
similar to that of Java, C, and C++.
copyright Penny McIntire, 2007
JavaScript
• Three implementations of JavaScript:
– Server-side JavaScript
– Client-side JavaScript
– Core JavaScript
15
copyright Penny McIntire, 2007
JavaScript
• Server-side JavaScript
– JavaScript used to access data from web
servers.
– Intended to be an alternative to CGI, PHP,
etc.
– Not the best way of doing data access.
– We won’t be doing any server-side stuff in
here, including server-side JavaScript.
16
copyright Penny McIntire, 2007
JavaScript
• Client-Side JavaScript
– Is interpreted by the browser.
– Most common implementation of JavaScript.
– It has no direct access to the web server at
all, because it exists only on the client.
– We will use only client-side JS in this class.
– Used, along with the Document Object
Model (more in a bit…), to create “dynamic”
documents.
17
copyright Penny McIntire, 2007
JavaScript
• Core JavaScript
– Generic term for the overlapping features of
JavaScript that are available to both serverside and client-side JavaScript.
18
copyright Penny McIntire, 2007
Document Object Model (DOM)
• The Document Object Model (DOM) is
what allows us to have dynamic access
to the contents of otherwise static
documents.
• The DOM is a hidden, internal,
hierarchical roadmap of all of the
scriptable elements within a document
loaded in a browser.
19
copyright Penny McIntire, 2007
Document Object Model (DOM)
• It is an evolving standard that specifies
how a scripting language can access
and manipulate the detailed structure of
an HTML (or XML) document.
• The DOM standardization effort is being
led by the World Wide Web Consortium
(W3C).
• Again, all browser manufacturers
pledge to follow the standards. (Yeah,
20
right, when it comes to Microsoft.)
copyright Penny McIntire, 2007
Document Object Model (DOM)
• Refer to Chapter 9 of DHTML for the
DOMs of both browsers – critical for
coding and debugging JavaScript.
21
copyright Penny McIntire, 2007
JavaScript Introduction
• JavaScript is object-based, not truly
object-oriented.
• Still, we manipulate objects using their
associated methods much as we would
with an object-oriented language.
22
copyright Penny McIntire, 2007
Document Object Model (DOM)
• Before looking at what the DOM
actually is, let’s review what objects
are…
• Object: a self-contained module of data
and its associated processing.
– Includes a collection of named pieces of
data called properties (fields and their
values) and methods that can modify those
properties.
23
copyright Penny McIntire, 2007
Document Object Model (DOM)
• Methods versus functions
– Methods are behaviors tied directly to
specific objects to act upon those objects.
• Many predefined JavaScript methods are
provided by the browser.
– Functions are programmer-defined routines
and are not necessarily associated with a
specific object.
24
copyright Penny McIntire, 2007
Document Object Model (DOM)
• Let’s look at one generic object, the
Document Object (represents a single
page in a browser):
– One property would be the document’s
URL; the value of that URL field might be
“www.mysite.com/index.html”.
– Other properties include the last-modified
date, title, background color of the
document, etc.
25
copyright Penny McIntire, 2007
Document Object Model (DOM)
– Some properties are stored as arrays,
representing things such as:
• forms
• images
• links
• applets
– A method could be a mechanism to display
something on the window, such as
document.writeln(), or performing
mathematics.
26
copyright Penny McIntire, 2007
Document Object Model (DOM)
• When an HTML page loads into a
scriptable browser, the browser
organizes all of the scriptable HTML
elements and page information into a:
– hidden
– internal
– hierarchical
– object roadmap, referred to as the DOM.
27
copyright Penny McIntire, 2007
Document Object Model (DOM)
• A basic understanding of the
architecture of the DOM is important,
because you can’t access an object
without knowing the hierarchical path
to the object; e.g.:
document.myForm.myTextArea
28
copyright Penny McIntire, 2007
Document Object Model (DOM)
• The DOM has three types of predefined objects:
– “Utility” objects, such as String or Math.
• We will look at these later, when we examine
JavaScript syntax.
– Dynamically-built objects which have a
one-to-one relationship with major HTML
tags, such as Image or Table.
– Browser interaction objects, such as
Window, Document, Location, or History.
29
copyright Penny McIntire, 2007
Browser Interaction Objects
• To understand browser interaction
objects, you must understand the
object containment hierarchy:
– The most global (highest-level) object in
the DOM is the Window Object.
– That, in turn, contains the Document
Object that represents the HTML
document.
– The document, in turn, may contain a
Form Object, which in turn contains form
30
elements…
copyright Penny McIntire, 2007
Browser Interaction Objects
Window
History
Form[ ]
Text
input[ ]
Document
Image[ ]
Checkbox
[]
Let’s look at
the Window
object…
Radio[ ]
Link[ ]
Submit[ ]
Applet[ ]
Textarea[ ]
31
copyright Penny McIntire, 2007
Browser Interaction Objects
• The Window Object represents the
window that displays the document.
– The Window Object is global, with global
variables.
– It defines the properties and methods for
the web browser window.
32
copyright Penny McIntire, 2007
Browser Interaction Objects
– Under the Window Object is a hierarchy of
other objects, including:
• A History Object to track URLs associated with
forward and back, like the forward and back
buttons on the browser.
• A Document Object represents the HTML
document that is displayed in that window.
33
copyright Penny McIntire, 2007
Browser Interaction Objects
Window
History
Form[ ]
Text
input[ ]
Document
Image[ ]
Checkbox
[]
Let’s look at
the Document
object…
Radio[ ]
Link[ ]
Submit[ ]
Applet[ ]
Textarea[ ]
34
copyright Penny McIntire, 2007
Browser Interaction Objects
• Now, let’s look at the Document Object.
– This is confusing, because the Document
Object is only one of the many objects
contained in the Document Object Model.
35
copyright Penny McIntire, 2007
Tag-Associated Objects
• Within the Document object are tagassociated objects that are dynamicallybuilt (when the page loads) and have a
one-to-one relationship with major
HTML tags, such as Image or Table.
• Attributes from individual HTML tags
must be associated with their DOM
objects…
36
copyright Penny McIntire, 2007
Tag-Associated Objects
<input type = “text” name =“firstName”
value = “Type your name here.” />
• type = specifies that this will be stored as
a text input in the DOM.
• name = and value = are associated with
properties of the input object.
– The name object property is assigned
“firstName” and the value object property is
assigned “Type your name here.”
37
copyright Penny McIntire, 2007
Tag-Associated Objects
• Let’s look at assigning properties such
as these to another tag-associated
object, this time a <form>.
38
copyright Penny McIntire, 2007
HTML tags
<form
FORM Object in DOM
name = “userInfo”
• Properties
method = “post”
• name = “userInfo”
action = “prgrm.name”>
• method = “post”
<input … />
• action = “prgm.name”
<textarea …>… </textarea>
• Methods
…
</form>
As the HTML document
loads, the Form Object is
created using the attributes
from the <form> tag.
• submit()
• reset()
• Events
• onSubmit
• onReset
Ignore these
for now.
Referencing an Object
Using JavaScript
• Next, we need to understand the way that
JavaScript can access DOM objects...
• Remember how in HTML many tags had
the name attribute?
<input name ="firstname" type ="text"… />
40
copyright Penny McIntire, 2007
Referencing an Object
Using JavaScript
• We can now use those names to access
those objects through the DOM
hierarchy.
• That is, you have to drill down the path
through the DOM hierarchy in order to
get to the object, just like you have to
list upper-level subdirectories to get to
a lower-level subdirectory on a
computer disk.
41
copyright Penny McIntire, 2007
Window
Document (HTML file)
link
image
form
text field
text field
submit button
anchor
link
window
– document
– link
– image
– form
–
–
–
text field
text field
submit button
– anchor
– link
Referencing an Object
Using JavaScript
So, if we had the following (incomplete)
HTML code…
<body ...>
<form name = “userinfo” ...>
<input
name = “zipcode”
type = “text”
value = “60115” />
</form>
</body>
43
copyright Penny McIntire, 2007
Referencing an Object
Using JavaScript
• To access the <form> named userInfo,
drill down through each object in the
hierarchy, separating the various
elements with periods:
window.document.userInfo
Document object,
contains...
Window object,
contains...
Form object
44
copyright Penny McIntire, 2007
Referencing an Object
Using JavaScript
• To access the the <input> named
zipCode:
window.document.userInfo.zipCode
Document object,
contains...
Window object,
contains...
Form element
Form object,
contains...
45
copyright Penny McIntire, 2007
Referencing an Object
Using JavaScript
• However, referring to the Window
Object is actually unnecessary.
• Because the window object is the most
“global” object and only exists once per
document, it is always assumed unless
there are naming overlaps with other
objects properties (such as
window.location versus
document.location).
46
copyright Penny McIntire, 2007
Referencing an Object
Using JavaScript
• Anyway, as a result, the part of the
containment hierarchy that refers to the
window can usually be omitted:
window.document.userInfo.zipCode
becomes just
document.userInfo.zipCode
47
copyright Penny McIntire, 2007
Referencing an Object
Using JavaScript
• Examples of referencing objects:
document.getdata.customerName
Refers to the customerName input from
the getdata form from the document.
Referencing the first image tag
document.img[0]
in the document
document.form[3]
Referencing the fourth form tag
document.myForm.submit[2] in the document
Referencing the third submit
button in myForm
48
copyright Penny McIntire, 2007
Referencing an Object
Using JavaScript
• References like these get you to the
field, but they won’t get you to the
value property, which is the content
that the field holds.
<input name = “zipcode”
type=“text”
value = “60115”>
49
copyright Penny McIntire, 2007
Referencing an Object
Using JavaScript
• To reference the contents of the text
field, specify the value property of that
field:
document.userInfo.zipCode.value
• This, then, contains the value currently
associated with the zipCode input tag.
• Alternate way to reference:
var x=document.getElementById("zipCode")
50
copyright Penny McIntire, 2007
Referencing an Object
Using JavaScript
• DOM Reference: Chapter 9 of DHTML.
– Be careful to note which browser uses a
particular property or method.
– The DOM is a bit different for each
browser.
51
copyright Penny McIntire, 2007
Event-driven Programming
• Next, we need to understand the
concepts of event-driven programming.
52
copyright Penny McIntire, 2007
Event-driven Programming
• Event-driven programs are very
different from programs that are
executed and run to completion without
further user interference.
– Example of non-event-driven
programming: the programs you wrote in
most of your programming classes.
– With those types of programs, the only
“event” is the user executing the program.
53
copyright Penny McIntire, 2007
Event-driven Programming
• In contrast, event-driven programs are,
well, driven by events.
• An event is some action, which may or
may not be user-initiated.
– An example of a user-initiated event would
be clicking a button on a web page.
– An example of a timed event (rather than a
user-initiated event) would be a splash
page timed to redirect a user to the home
page after 10 seconds.
54
copyright Penny McIntire, 2007
Event-driven Programming
• So, although HTML alone is static (that
is, once a page loads, it will not change
on its own), dynamic HTML using
JavaScript is triggered by events.
• By telling the browser to “listen” for
specific events, JavaScript can be
associated with those events.
55
copyright Penny McIntire, 2007
Event-driven Programming
• Remember the object creation slide
earlier, when we looked at putting
values into a form, which was a tagassociated object?
• Let’s take a look at that same example
to see how methods and events are
associated with objects and used to
make “static” HTML “dynamic”.
56
copyright Penny McIntire, 2007
HTML tags
Form object in DOM
<form
• Properties
• name = “userInfo”
• method = “post”
• action = “/prgm.name”
• Methods
• submit()
• reset()
• Events
• onSubmit
• onReset
name = “userinfo”
method = “post”
action = “/prgrm.name”>
<input …>
</form>
The submit method accesses the
method and action properties to
know how to invoke the
program on the server.
The onSubmit event
automatically triggers the
submit( ) method, which
is the default unless
overridden.
Scripting Languages
and the DOM
• Everything so far has been background
information, stuff you need to know to
write JavaScript.
• In the next lecture, we will look at
JavaScript examples and examine
JavaScript syntax.
58
copyright Penny McIntire, 2007
References
• If you are serious about JavaScript, get
a good JS book.
– The JavaScript Bible by Danny Goodman,
published by IDG Books. (how-to)
– JavaScript: The Definitive Guide by David
Flanagan, published by O'Reilly &
Associates. (reference)
59
copyright Penny McIntire, 2007