1 / 45

Web-based Application Development

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

Télécharger la présentation

Web-based Application Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.


Presentation Transcript

  1. Web-based Application Development Lecture 21 April 6, 2006 Anita Raja

  2. Agenda • Chapter 16 • Chapter 17 • Demos

  3. Programming the Web using XHTML and JavaScript Chapter 16 Custom Objects: Creating and Searching a Database

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

  5. The Basics of Databases

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

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

  8. Custom Objects • Use the constructor function to create a new instance of an object then assign it to a variable var 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”

  9. 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 …

  10. Asssignments Properties Custom Objects Constructor function name function addressEntry(nm, adr, ph) { this.name = nm this.address = adr this.phone = ph }

  11. “this object” Custom Objects • function addressEntry(nm, adr, ph) { • this.name = nm • this.address = adr • this.phone = ph • } In other words, the object we are creating with this constructor function

  12. Custom Objects • function addressEntry(nm, adr, ph) { • this.name = nm • this.address = adr • this.phone = ph } • var firstAddress = new addressEntry( • “Bill”, • “123 Main Street”, • “321-4567” )

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

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

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

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

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

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

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

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

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

  22. Programming the Web using XHTML and JavaScript Chapter 17 JavaScript with Frames and Windows

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

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

  25. 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?

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

  27. 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” Document in left frame Document in left frame

  28. 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(…)

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

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

  31. Dynamic Content with Frames • The data written is specified as a parameter document.write(“Hello world”) • Ch17-Ex-01

  32. Dynamic Content with Frames • If writing to a different document, specify the destination: rightFrame.document.write(…)

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

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

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

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

  37. Name given to new window object (used in JavaScript) Name of HTML source document to be opened Name for use by target Window features (in pixels 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”)

  38. Manipulating Windows • The close() method can be used to close a window if its name is known • Ch17-Ex-04

  39. 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, …

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

  41. Assignment • Implement the CyberPizza problem • Post the completed documents to your Web space • Name the main (frameset) page “CyberPizza.html”

  42. Programming the Web Using Visual Studio .NET Chapter 2. Programming

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

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

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

More Related