Web Development 1

1
Web Development 1
\WD1\week_01A
2
Web Dev. I

• In this course you will cover client side
  development
• Page can run locally no need to upload to a web
  server
• In Web Dev II you will learn the server side
• pages will run from a central server which
  contains the database needed for operation
• Apps like order/shopping cart, customer profile

3
What is covered

• Enhancing web pages using
• JavaScript (first half of course)
• Java (second half of course)
• Use browsers
• Internet Explorer
• Netscape
• Use DreamWeaver to create and edit web pages

4
Historical Perspective

• Eich at Netscape in 1995
• Netscape developed LiveScript
• Simple object-oriented programming language
• Browser-based, HTML-imbedded
• Renamed JavaScript
• Netscape and Sun Microsystems collaboration
• To ride on Suns Java popularity
• JavaScript is a subset of Java similar syntax

5
Historical Perspective contd

• Microsoft introduces JScript with IE 3.0
• Also a scripting language
• Used a different object model than Netscapes
• ECMAA standards group created ECMAScript standard
  in 1997
• basis for future releases of both
• now can develop code that works well with both
  browers
• BUT still there are differences so pages will
  behave differently in different browsers

6
Why?

• More web/user interaction
• React to more user events
• e.g. mouse movement
• Multiple activities per user event
• Processing power at desktop
• memory on web page
• Automatic background activities

7
Fundamental Concepts

• Instances incarnations of objects
• Values content for properties
• Variables containers for data
• Arrays ordered collections of data
• Operators Assignment versus Comparison
• Functions groups of statements

8
The Document Object Model

• Internal road map of objects on a web page
• Hierarchical model of web browser objects
• Old DOMs for Netscape, Microsoft
• New browsers use the standard DOM by W3C

9
Fundamental Concepts

• Objects
• The nouns of the language
• window, document, image, status bar, cat, dog
• Properties
• attributes of objects
• window.status - window status bar
• window.location - URL showing in browser
• window
• document.myPic.src - source text of object named
• myPic
• cat.paws.front.left.color - color of cats paw

10
basic constructs, contd

• Methods
• The verbs of the language or things you can do
  to objects
• document.write(lth2gtCool!lt/h2gt)
• cat.sound(purrrr)
• scrollStatus()
• Parentheses ( ) indicate a method, not a
  property
• Also allows us to pass parameters to the method.
• Must be present even if no parameters are
  required.

11
Events

• onAbort user aborted loading
• page
• onBlur user left object
• onChange user changed object
• onClick user clicked on object
• onError script encountered an
• error
• onFocus user made object active
• onLoad object finished loading
• onMouseover cursor moved over object
• onMouseout cursor moved off object
• onSelect user selected obj
• contents
• onSubmit user submitted a form
• onUnload user left the window

• Events
• Actions the user performs
• Dealt with by event handlers
• Code just those you need special action for.