Website Development

1
Website Development Management
MIS 3353 -- Fall 2002

• JavaScript Wrap-Up Intro to Server-Side
  Scripting

Instructor John Seydel, Ph.D.
2
Student Objectives

• Break large code blocks into reusable subprograms
  (i.e., functions)
• Use JavaScript to code branching (i.e.,
  selection) control structures
• Work with built-in JavaScript methods for Math,
  String, Array, and Date objects
• Write looping structures with JavaScript using
  either standard approach
• Create simple server-side scripts
• Work within typical development environment for
  ASP to write, test, and debut web applications

3
Student Objectives

• Create simple server-side scripts
• List the 4 server objects
• Become familiar with the VBScript approach to
  scripting
• Work within typical development environment for
  ASP to write, test, and debut web applications
• HTML editor (Arachnophilia)
• File transfer (WS_FTP)
• Server (AITP)

4
First, Some Administrative Stuff

• Exam 2
• Grading
• Points per section
• Part 1 (classroom) 67 points
• Part 2 (lab) 33 points
• Everyone who tried received full points for Part
  2
• Return exams
• Well be looking at the coding shortly
• Grades to date

5
Wrapping Up JavaScript

• Review of applications
• Working with functions
• Branching
• if then else
• select switch
• Comments about JavaScript objects

6
JavaScript Application Summary

• Recall that our focus has been on functionality
  and web page usefulness, not flashiness
• Means of providing web page interactivity
• Rollovers more info on a single screen
• Images
• Menus
• Popups provide info and help without taking
  permanent screen space
• Alerts
• Prompts
• New windows
• Form handling
• Setting focus
• Calculations
• Validation

7
Some Important JavaScript Features

• Built-in functions (i.e., methods)
• Math object
• String object
• Array object
• Date object
• User-defined functions (!_at_!/_at_!)
• Selection structures
• if then else
• switch case (like VB Select Case Case)
• Looping structures
• while loops
• for loops

8
Working with Functions

• Functions are simply subprograms
• There are 2 kinds of functions
• Those that just do something
• Built-in window.alert()
• User-defined CheckInput()
• Those that give back (return) a value
• Built-in window.prompt()
• User-Defined CurrencyAmount()
• Actually all functions return values (true) by
  default
• Built-in functions are called methods because
  they are functions that belong to objects
• User-defined functions

9
User-Defined Functions

• Naming conventions
• Capitalize first letter
• Use verbs (well, usually!)
• Often involve arguments (values passed into
  function)
• Variable scope must be considered
• Global declared/assigned outside of any
  function and available to all functions
• Local declared/assigned within function and not
  available outside (must return value needed
  outside)
• Consider Exam 2

10
Application Structure for Exam 2

• Script needs to do 3 primary tasks
• Validate form
• Calculate BMI and display results
• Determine order charges and display results
• Can be done as one large function that executes
  when the button is clicked
• Makes sense to modularize
• Each task lends itself to a function
• Some info needs to be passed back and forth
• Also reasonable to modularize the roundoff
  process
• Modularity is essential with larger scripts,
  since tasks are commonly executed multiple times
  in various areas of the programs

11
Syntax for Selection Structures

• if then else (e.g., pay processing script)
• For limited branching, can get messy !
• Syntax
• if (condition)
• . . . what to do if true . . .
• else
• . . . What to do if false . . .
• switch case (e.g., revised pay processing
  script)
• Use when many possible branches
• Syntax
• Switch (varname)
• case value1 what to do
• case value2 what to do
• . . .
• default what to do

12
Looping Structures

• Enable repetitive ifthenelse processing
• Several options exist well be using
• while loops
• for loops
• Syntax
• for (start terminal condition step)
• . . . statements . . .
• while (condition)
• . . . statements . . .
• Automatic incrementing takes place with for loop
• Must have something to cause while loop to
  terminate
• Consider form processing of multiple radio buttons

13
Working with Built-In Functions

• Methods associated with
• Math object
• String object
• Array object
• Date object
• Window object
• Need to know they exist, examples of how they
  might be useful, and where to find out the
  details, syntax, etc.
• You should become familiar with the examples
  given in the text
• There may or may not be additional exercises
  assigned

14
Typical Uses for the Math Object

• Reference Appendix E (page 677)
• Rounding
• Uses the Math.round() method
• Rounds only to nearest whole number
• Cant round to specific number of places
• But can write simple function
• Raising to a power
• Uses the Math.pow()
• Two arguments base, exponent
• Examples Exam 2
• Rounding to 2 places
• Squaring the height

15
Using the String Object

• Reference Appendix E (page 679)
• Changing case
• toLowerCase()
• Why?
• Manipulating text and portions thereof
• Most commonly used methods
• indexOf()
• substring()
• split()
• Why?
• Example prompt for full name and then parse

16
The Array Object

• Reference Appendix E (page 673)
• Important properties
• length
• Example rate.length
• Important methods
• join
• sort()
• Working with arrays is particularly helpful when
  looping through data

17
Lonely? Get a Date!

• Reference Appendix E (page 675)
• Provides date and time information
• Allows for calculating elapsed time
• Interest calculations
• Timing exams, responses, etc.
• Can determine ages, etc.
• Conversions across time zones
• Numerous methods facilitate date/time arithmetic

18
The Window Object

• Reference Chapter 17 (pp. 503-511)
• Note a major difference
• Previous objects (Date, Array, String, Math) are
  data-type objects
• The window object is one of the browser objects
  (recall DOM)
• Commonly used methods
• alert() and prompt()
• open() ? see Handouts page at
  course website
• resizeTo()
• Important sub-objects
• location (for loading new pages, parsing URLs,
  etc.0
• navigator (especially for browser sniffing)
• document (for manipulating parts of the current
  web page

19
Now, Lets Move to the Server Side

• Adding Functionality to Web Pages
• Client side (processing done by browser)
• Scripting (JavaScript)
• Applets ActiveX
• Server side scripting (processing done on server)
• ASP (VBScript)
• PHP
• CGI
• Servlets
• Well be working with ASP on the server side

20
Where Are We Going?
21
Consider Simple Example

• Greet the user and provide appropriate message
• Good morning!
• Good afternoon!
• Good evening!
• Client side approach (note the source code)
• Server side approach (note the source code)
• Why one or the other?
• Client side local time no network time
• Server side time _at_ server hide source code

22
Some Things to Note

• Some differences from JavaScript
• VBS If/Then/Else, Time, case, no
• ASP , .asp, case
• VBScript is case-insensitive, but dont count on
  it

23
Server-Side Development Process

• Typical ASP development environment for writing,
  testing, and debugging web applications
• HTML editor (Arachnophilia)
• File transfer (FTP)
• Server (AITP)
• Professional tools that help
• Server-side specialty tools
• Visual InterDev (ASP technology)
• Dreamweaver/UltraDev (PHP technology)
• General web development tools
• FrontPage
• Dreamweaver
• Homesite
• Well be working with the former environment

24
Developing ASP Applications

• Must be tested on a server
• Actual server (AITP), running IIS
• Possibly local IIS if running Win2000
• Recommended process
• Write code locally
• Upload
• Test
• Modify locally
• Upload new version
• Test
• Repeat as necessary

25
Intrinsic Functions

• Many built-in (intrinsic) functions come as part
  of VB (and VBScript)
• Some categories are
• Date Time
• String Manipulation
• Numeric
• Its important to start getting familiar with
  these
• Well look closely at a number of these in the
  next several weeks

26
Now, Lets Write a Form Handler

• Simple form
• Name
• Gender
• Form handler simply confirms what was sent

27
Summary of Objectives

• Break large code blocks into reusable subprograms
  (i.e., functions)
• Use JavaScript to code branching (i.e.,
  selection) control structures
• Work with built-in JavaScript methods for Math,
  String, Array, and Date objects
• Create simple server-side scripts

28
Appendix
29
Exam 2 Validation Routine

• if (window.document.frmBMI.txtWeight.value lt
  100)
• window.alert("Your weight can't be that
  little!")
• return false
• else
• if (window.document.frmBMI.txtWeight.value gt
  250)
• window.alert("You can't weight that much!")
• return false

30
Exam 2 Calculating BMI (a)

• Basic calculations
• var intFeet, intInches, intTotalInches,
  intWeight, dblIndex
• var blnHealthy
• var strComment new String("You need some work,
  . . . ")
• intFeet window.document.frmBMI.cmbFeet.value
• intInches window.document.frmBMI.cmbInches.valu
  e
• intWeight window.document.frmBMI.txtWeight.valu
  e
• intTotalInches intFeet12 intInches1
• dblIndex intWeight / Math.pow(intTotalInches,2)
  703
• dblIndex Math.round(dblIndex10) / 10

31
Exam 2 Calculating BMI (b)

• Output Processing
• if (dblIndex gt 18.5)
• if (dblIndex lt 25.0)
• blnHealthy true
• if (blnHealthy)
• strComment "You're healthy . . . advice!"
• window.document.frmBMI.txtAnalysis.value
  strComment
• window.document.frmBMI.txtBMI.value dblIndex

32
Exam 2 Determining Charges (a)

• Basic calculations
• var dblPrice, dblMoneyFee, dblCardFee
• dblPrice 19.95
• dblMoneyFee 0.15
• dblCardFee 0.25
• if (blnHealthy)
• dblPrice 0.00
• dblMoneyFee 0.00
• dblCardFee 0.00
• dblHandlingFee dblMoneyFee dblPrice
• if (window.document.frmBMI.optPaymentType1.chec
  ked)
• dblHandlingFee dblCardFee dblPrice
• dblTotal dblPrice dblHandlingFee

33
Exam 2 Determining Charges (b)

• Output Processing
• dblHandlingFee Math.round(dblHandlingFee100)/1
  00
• dblTotal Math.round((dblTotal)100)/100
• window.document.frmBMI.txtAmount.value
  dblPrice
• window.document.frmBMI.txtHandling.value
  dblHandlingFee
• window.document.frmBMI.txtTotal.value
  dblTotal

34
Exam 2 Modular Approach

• function ProcessForm()
• var blnHealthy
• var strComment new String
• if (CheckInput())
• strComment "You need some work, . . . "
• blnHealthy CalcBMI()
• if (blnHealthy)
• strComment "You're healthy . . . "
• window.document.frmBMI.txtAnalysis.value
  strComment
• CalcOrder(blnHealthy)
• function CalcOrder(healthy)
• var dblRounded

35
Programming Control Structures

• Three basic structures comprise all programs
  (scripts)
• Sequence
• Selection (i.e., branching)
• Loop
• Most programs involve all three

36
Pay Rate Assignment (ifthenelse)

• if (catWork "carpentry")
• payRate rate0
• else
• if (catWork "labor")
• payRate rate1
• else
• if (catWork "roofing")
• payRate rate2
• else
• if (catWork "supervision")

37
Pay Rate Assignment (selectswitch)

• switch (catWork)
• case "carpentry"
• payRate rate0
• break
• case "labor"
• payRate rate1
• break
• case "roofing"
• payRate rate2
• break
• case "supervision"
• payRate rate3