copyright Penny McIntire, 2007 - PowerPoint Presentation

ubiquad . @ubiquad

342 views
Uploaded On 2020-06-22

copyright Penny McIntire, 2007 - PPT Presentation

1 Scripting Languages and the DOM 2 copyright Penny McIntire 2007 Contents Scripting Languages The Document Object Model Referencing an object Eventdriven programming Note purpose of the JavaScript lectures is to give you the background to learn more advanced usage on your own ID: 782620

copyright object mcintire penny object copyright penny mcintire 2007 javascript document dom browser window objects form scripting html referencing

Link:

Copy

Embed:

<iframe width="560" height="315" src="https://www.docslides.com/embed/782620" frameborder="0" allowfullscreen></iframe>

Download Presentation from below link

Download The PPT/PDF document "copyright Penny McIntire, 2007" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.

Presentation Transcript

Slide1

Scripting Languages

and the DOM

Slide2

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.

Slide3

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.

Slide4

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…

Slide5

Scripting Languages

Accessing document content.

Can include cool graphics features such as displaying a different image on mouse-over.

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).

Slide6

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.

Slide7

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.

Slide8

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.

Slide9

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.

Slide10

Scripting Languages

Two major scripting languages used in browsers:

VBScript

JavaScript

Slide11

VBScript

Developed by Microsoft.

Technically, VBScript works only in IE, not in Firefox, although there is an add-on for Firefox.

Due to its proprietary nature, VBScript is less portable.

We won’t use it.

Slide12

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.

Slide13

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.

Slide14

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

similar to that of Java, C, and C++.

Slide15

JavaScript

Three implementations of JavaScript:

Server-side JavaScript

Client-side JavaScript

Core JavaScript

Slide16

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.

Slide17

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.

Slide18

JavaScript

Core JavaScript

Generic term for the overlapping features of JavaScript that are available to both server-side and client-side JavaScript.

Slide19

Document Object Model (DOM)

The

Document Object Model (DOM)

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.

Slide20

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, right, when it comes to Microsoft.)

Slide21

Document Object Model (DOM)

Refer to Chapter 9 of

DHTML

for the DOMs of both browsers – critical for coding and debugging JavaScript.

Slide22

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.

JavaScript Introduction

Slide23

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.

Slide24

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.

Slide25

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.

Slide26

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.

Slide27

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.

Slide28

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

Slide29

Document Object Model (DOM)

The DOM has three types of pre-defined 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.

Slide30

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 elements…

Slide31

Browser Interaction Objects

Let’s look at the Window object…

Window

Document

Form[ ]

Image[ ]

Link[ ]

Applet[ ]

Text

input[ ]

Checkbox

[ ]

Radio[ ]

Submit[ ]

Textarea[ ]

History

Slide32

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.

Slide33

Browser Interaction Objects

Under the Window Object is a hierarchy of other objects, including:

History Object

to track URLs associated with forward and back, like the forward and back buttons on the browser.

Document Object

represents the HTML document that is displayed in that window.

Slide34

Browser Interaction Objects

Let’s look at the Document object…

Window

Document

Form[ ]

Image[ ]

Link[ ]

Applet[ ]

Text

input[ ]

Checkbox

[ ]

Radio[ ]

Submit[ ]

Textarea[ ]

History

Slide35

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

Slide36

Tag-Associated Objects

Within the Document object are tag-associated objects that are dynamically-built (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…

Slide37

Tag-Associated Objects

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.”

Slide38

Tag-Associated Objects

Let’s look at assigning properties such as these to another tag-associated object, this time a

<form>

Slide39

HTML tags

<form name = “userInfo”

method = “post”

action = “prgrm.name”>

…

</form>

FORM Object in DOM

Properties

name = “userInfo”

method = “post”

action = “prgm.name”

Methods

submit()

reset()

Events

onSubmit

onReset

As the HTML document loads, the Form Object is created using the attributes from the

<form>

tag.

Ignore these for now.

Slide40

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

… />

Slide41

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.

Slide42

window

document

link

image

form

text field

submit button

anchor

link

Window

Document (HTML file)

link

anchor

link

form

text field

image

text field

submit button

Slide43

Referencing an Object

Using JavaScript

So, if we had the following (incomplete) HTML code…

<input name = “zipcode”

type = “text”

value = “60115” />

</form>

</body>

Slide44

Form object

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

Window object, contains...

Document object, contains...

Slide45

Referencing an Object

Using JavaScript

To access the the

<input>

named

zipCode

window.document.userInfo.zipCode

Window object, contains...

Document object, contains...

Form object, contains...

Form element

Slide46

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

Slide47

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

Slide48

Referencing an Object

Using JavaScript

Referencing the first image tag in the document

Referencing the fourth form tag in the document

Examples of referencing objects:

document.getdata.customerName

Refers to the customerName input from the getdata form from the document.

document.img[0]

document.form[3]

document.myForm.submit[2]

Referencing the third submit button in myForm

Slide49

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”>

Slide50

Referencing an Object

Using JavaScript

To reference the

contents

of the text field, specify the

alue

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

document.getElementById

zipCode

Slide51

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.

Slide52

Event-driven Programming

Next, we need to understand the concepts of event-driven programming.

Slide53

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.

Slide54

Event-driven Programming

In contrast, event-driven programs are, well, driven by events.

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.

Slide55

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.

Slide56

Event-driven Programming

Remember the object creation slide earlier, when we looked at putting values into a form, which was a tag-associated 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”.

Slide57

HTML tags

<form name = “userinfo”

method = “post”

action = “/prgrm.name”>

</form>

Form object in DOM

Properties

name = “userInfo”

method = “post”

action = “/prgm.name”

Methods

submit()

reset()

Events

onSubmit

onReset

The onSubmit

event

automatically triggers the submit( )

method

, which is the default unless overridden.

The submit method accesses the method and action

properties

to know how to invoke the program on the server.

Slide58

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.

Slide59

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)

copyright Penny McIntire, 2007 - PowerPoint Presentation

copyright Penny McIntire, 2007 - PPT Presentation

Share:

Link:

Embed:

Related Contents