web-based application development lecture 21 april 6, 2006 anita raja
Post on 21-Dec-2015
216 Views
Preview:
TRANSCRIPT
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
top related