Web-based Application Development

Lecture 21

April 6, 2006

Anita Raja

Agenda Chapter 16 Chapter 17 Demos

Programming the Web using XHTML and JavaScript

Chapter 16

Custom Objects: Creating and Searching a Database

The Basics of Databases Database: group of associated variables Typical form is a table of

Records (rows) made up of Fields (columns), each containing data about

one attribute of interest for each record

The Basics of Databases

Name Address Phone

Bill 123 Main Street 321-4567

Mary 456 Elm Place 987-1234

The Basics of Databases How to implement a table in JavaScript? An object and its properties correspond

to a record and its fields One object might have three properties:

Name Address Phone

The Basics of Databases Creating a number of these objects would

correspond to a number of records (rows) in a table

Already have used objects that come with JavaScript: Images Dates

How can we define and create our own objects?

Custom Objects Use the constructor function to create a new

instance of an object then assign it to a variablevar someImage = new Image(69,120)

Technically, this creates an instance of the Image object

“Image” defines a basic template for a particular type of object

“new” creates a copy of this template The new Image object is named “someImage”

Custom Objects You can write your own custom constructor

functions in JavaScript Defines the “template” for the object

Properties Methods

Right now, don’t worry about methods For a JavaScript database we only need objects

with properties Start with the constructor function …

Custom Objects

function addressEntry(nm, adr, ph) {

this.name = nm

this.address = adr

this.phone = ph

}

Constructor function name

Asssignments

Properties

Custom Objects

function addressEntry(nm, adr, ph) { this.name = nm this.address = adr this.phone = ph}

“this object” In other words, the object we are creating with this constructor function

Custom Objectsfunction addressEntry(nm, adr, ph) { this.name = nm this.address = adr this.phone = ph }

var firstAddress = new addressEntry( “Bill”, “123 Main Street”, “321-4567” )

Custom Objects After creating an object, its properties are

available using standard dot notation:

firstAddress.name is “Bill”firstAddress.address is “123 Main Street”firstAddress.phone is “321-4567”

Ch16-Ex-01

Custom Objects Create a new instance of the

addressEntry object for each item in our database

Problem: they’re all named something unique: firstAddress, secondAddress, etc.

Hard to search such a database Need a common naming convention

Databases as Arrays of Objects Instead of creating separate variables We create an array Then we define each element of the

array as a new address object

Databases as Arrays of Objects

var addresses = new Array(6)addresses[0] = new addressEntry(“Bill”, “123 Main Street”, “321-4567”)addresses[1] = new addressEntry(“Mary”, “456 Elm Street”, “987-6543”)addresses[2] = new addressEntry(“Sam”, “789 Oak Avenue”, “123-1234”)

Databases as Arrays of Objects Now we can use dot notation to refer to

the object properties of each array element:

addresses[0].name is “Bill”

Ch16-Ex-02

Searching a Database By defining a database as an array of

objects and Using array notation and loops We can write search routines for

databases Ch16-Ex-03

Limitations JavaScript is not the ideal mechanism

to implement databases Client cannot change database so

Can’t add, delete, or edit records Database exists only in HTML

document so large database make pages slow to load

Assignment Use chapter and the Debugging Exercise

on p. 461 as a guide Define a database that records information

on books For each book record information on title,

author, publisher, and number of pages Create a database of at least four records Create a form that displays all the

information about any one book

Assignment Write a search function that accepts an author’s

name as input then displays the information about the book or an error message.

Post the completed document to your Web space as “Lagerstrom-Ch-16.html”

Grade based on: Appearance Technical correctness of code Proper results

Programming the Web using XHTML and JavaScript

Chapter 17

JavaScript with Frames and Windows

Dynamic Content with Frames CyberPizza Two side-by-side frames

Left – pizza order choices Right – display order

Documents CyberPizza.html – the frameset document SelectPizza.html – code for left frame DisplayChoices.html – code for right frame

Dynamic Content with Frames CyberPizza.html

Establishes the frameset Defines a function (more on that later)

SelectPizza.html Defines 3 forms

Toppings Crusts Submit order

Dynamic Content with Frames Problem

The left and right frames involve two separate documents

Functions declared in a document act only in the frame containing that document

How can we call a function from one document that acts on a different frame?

Dynamic Content with Frames Answer: by ensuring that both

documents are simultaneously present in different frames of the frameset

Since the code is “present” it can be called

Where to put the code? In a frame that’s always loaded – the

frameset document, CyberPizza.html

Dynamic Content with Frames How do you call a function declared in a

different document? Using the hierarchical dot notation

CyberPizza.html“frameset” document

aka “parent”

Documentin left frame

Documentin left frame

Dynamic Content with Frames The document that establishes a

frameset is considered to be the “parent” of the documents that define the individual frames

Thus, to refer to the displayOrder function we use

parent.displayOrder(…)

Dynamic Content with Frames The displayOrder function

Must be able to display user-selected data In the right-most frame

If the user changes their order, displayOrder must be able to update the right-most frame with the latest data

Dynamic Content with Frames This means that the displayOrder

function has to be able to: Write data To a specific frame

Writing data is accomplished with the write method of the document object:

document.write()

Dynamic Content with Frames The data written is specified as a

parameter

document.write(“Hello world”)

Ch17-Ex-01

Dynamic Content with Frames If writing to a different document,

specify the destination:

rightFrame.document.write(…)

Dynamic Content with Frames HTML tags and data can be included This means that a script can change the

document content dynamically Ch17-Ex-02 Variables can be used… Ch17-Ex-03

Dynamic Content with Frames The Document Output Stream

The document.write() method only works when the browser is loading an HTML source document

To do this, the browser opens the “document output stream” and starts interpreting the HTML and placing information on the screen

Dynamic Content with Frames The Document Output Stream (cont.)

Once the document contents have been displayed, the DOS is closed

When the DOS is closed, the document.write() method cannot be used

This means that write() cannot be used in conjunction with a form in the same document without completely replacing the current document

Manipulating Windows In Chapter 6 we showed how to open a

document in a new browser window:

<a href="http://www.uncc.edu" target="fred">

Click here to open page in a new window.

Ch06-Ex-11

Manipulating Windows Can open a window using the open()

method of the window object:

var sampleWindow = window.open(

“www.uncc.edu”,

“testWin”,

“width=250,height=200,left=100,top=60”)

Name of HTML source document to be opened

Name for use by target

Window features (in pixels

Name given to new window object (used in JavaScript)

Manipulating Windows The close() method can be used to

close a window if its name is known Ch17-Ex-04

Manipulating Windows Windows have more than 40 methods

and 50 properties (Appendix F)

if (sampleWindow.closed) …

sampleWindow.open(…) There are over 25 windows features

height, width, top, left toolbar, scrollbars, resizable, …

Manipulating Windows If you leave out the third parameter

var sampleWindow = window.open(“www.uncc.edu”,“testWin”)

a default window is created However, if you specify any value in the

third parameter, all unspecified values are considered to be “off”

Assignment

Implement the CyberPizza problem Post the completed documents to your

Web space Name the main (frameset) page

“CyberPizza.html”

Programming the Web Using Visual Studio .NET

Chapter 2. Programming

Introduction VS.NET permits programming in a

visual environment That means developing via forms using

drag-and-drop techniques Hand-coding is available also We’ll be using Visual Basic.NET

XML Extensible Markup Language Not actually a markup language

Specification for making markup languages XML documents have two fundamental

characteristics Must be “well-formed” May be associated with a DTD or XML

schema

XML Well-formed

Must comply with XML syntax rules DTD – Document Type Definition

Dictates what elements and attributes are permitted

Example<img src=“eiffel.jpg” alt=“Eiffel Tower”>

<img> element (tag) src and alt: attributes