JavaScript

1
JavaScript
http//academic2.strose.edu/math_and_science/golds
chd/index-nys.html

• August 2, 2007
• David Goldschmidt, Ph.D.
• The College of Saint Rose
• goldschd_at_strose.edu

2
Course Outline Day Four

• JavaScript
• Constants (revisited)
• Special values (null and undefined)
• More Forms and Form Elements
• Images
• Objects
• Date and Time
• Cookies

3
Defining Constants (i)

• Define reusable constants using the const keyword

// Define constants const MIN_AGE 21 ... if
(age gt MIN_AGE) alert(Youre old
enough.)
4
Defining Constants (ii)

• Since the const keyword is not defined in
  Internet Explorer, consider alternatives

// Define constants via naming convention var
MIN_AGE 21 // Or define constant via
function function getMinimumAge() return 21
if (age gt getMinimumAge()) alert(Youre
old enough.)
5
Null and Undefined

• A variable is null if it has been defined, but
  has not been assigned a value
• An undefined variable has been declared, but not
  initialized

alert(output) // error (null)
var output // declare output alert(output)
// undefined if (output) // ...
6
Form Validation and Auto-Focus on Error

• Validate form input by testing for required
  fields
• Also validate specific numeric, age, email
  address fields via pattern matching
• Use setTimeout() function to auto-focus the user
  on the field that contains the error

/\w-(\.\w-)_at_(\w-\.)a-zA-Z2,7/
setTimeout(focusElement(...), 0)
7
Form Validation and Auto-Focus on First Error
(i)

• Use an array or build up an output string of
  error messages

var output Fix these errors\n\n if
(isNumber(age) false) output Age is
invalid.\n if (isValidEmail(email) false)
output Email is invalid.\n alert(outp
ut)
8
Form Validation and Auto-Focus on First Error
(ii)

• Use setTimeout() to focus the user on the first
  field that contains an error

if (isNumber(age) false) valid false
output Age field is invalid.\n if
(!firstErrorFieldName) firstErrorFieldName
age setTimeout(focusElement(...),
0)
9
Multiple submit buttons

• Use multiple submit buttons by altering the
  forms action

ltform actiondoSomething.phpgt ltinput
typesubmit valueSend to X
onClickthis.form.actiondoX.php /gt ltinput
typesubmit valueSend to Y
onClickthis.form.actiondoY.php /gt lt/formgt
10
The Browser Object Model
11
Loading new page or anchor

• Use window.location or just location to redirect
  a user
• Redirect to a relative URL
• Redirect to an absolute URL
• Redirect to an anchor

location.href next.html location.href
http//www.strose.edu location.hash
partFour
12
Creating Dropdown Boxes (i)

• Use the ltselectgt tag in conjunction with
  JavaScript code

ltselect namechooser idchooser
onChangenavigate(this)gt ltoption
valuegtChooselt/optiongt ltoption
valuehttp//..gtHomelt/optiongt ltoption
valuehttp//..gtAboutlt/optiongt lt/selectgt
13
Creating Dropdown Boxes (ii)

• When a dropdown selection is changed by the user,
  call the navigate function

function navigate(choice) var index
choice.selectedIndex var url
choice.optionsindex.value if (url)
location.href url
14
Checkboxes Radio Buttons (i)

• Apply JavaScript code to checkboxes and radio
  buttons via events

ltinput typecheckbox nameallow
onClick... /gt ltinput typeradio
namegenderGroup valuemale
onClick...gt Malelt/inputgt ltinput
typeradio namegenderGroup
valuefemale onClick...gt Female
lt/inputgt
15
Checkboxes Radio Buttons (ii)

• Checkboxes and radio buttons both use the checked
  property
• Radio buttons are treated as an array

if (document.userInput.allow.checked) //
checkbox checked by user var numOptions
document.userInput.genderGroup.length var
firstOption document.userInput.genderGroup0

16
Working with Images

• Images within an HTML document are available via
  the document.images array
• Use mouse events to change images

lta hrefnext.html onMouseOver
document.n.srcimages/a1.gif onMouseOut
document.n.srcimages/a2.gifgt ltimg
namen srcimages/a1.gif /gt lt/agt
17
Creating JavaScript Objects (i)

• Creating reusable objects within JavaScript is
  far from rigorous

// constructor function function Person(name,
age) this.name name this.age age 0
// default to 0 // Create a Person object var
p1 new Person(David, 34)
18
Creating JavaScript Objects (ii)

• Also create reusable objects with shortcut
  supported in more recent browsers

// Create object (v4 browsers and later) var p2
name Deanna, age 21 // Change (or add!)
object attributes p1.name Dave p2.eyes
green
19
Creating JavaScript Objects (iii)

• Add methods/functions to existing objects

function showInfo() var output Person
this.name output is this.age
output years old. return output
20
Creating JavaScript Objects (iv)

• Add methods/functions to existing objects

// constructor function function Person(name,
age) this.name name this.age age 0
// default to 0 this.show showInfo //
call the new function p1.show()
21
Date Time Manipulation (i)

• Create Date objects within JavaScript

var now new Date() // current date/time var
d1 new Date(yyyy, mm, dd, hh, mm, ss) var d2
new Date(yyyy, mm, dd) var d3 new
Date(monthName dd, yyyy hhmmss) var d4
new Date(monthName dd, yyyy) var d5 new
Date(epochMilliseconds)
22
Date Time Manipulation (ii)

• Perform date and time calculations via get and
  set functions
• Display in users default date format

var now new Date() // add 10
days date.setDate(date.getDate() 10) var
output Date date.toLocaleDateString()
23
Date Time Manipulation (iii)

• Get and set methods of the Date object

gsetTime() // ms since Jan 1
1970 gsetSeconds() // seconds
0-59 gsetMinutes() // minutes
0-59 gsetHours() // hours 0-23 gsetDay()
// day 0-6 is Sunday, etc. gsetDate() //
date 1-31 gsetMonth() // month
0-11 gsetFullYear() // 1970-...
24
Using Cookies (i)

• Cookies are small files stored on user machines
  by a Web browser
• Cookie file format is a semicolon-separated list
  of attribute/value pairs
• Once stored, JavaScript code can retrieve the
  cookie later to customize the current session

useridgoldschmidt expiresdate pathpath
domaindomain secure
25
Using Cookies (ii)

• Use a function to set document.cookie

function setCookie(name, value, exp, path,
domain, secure) document.cookie
name escape(value) (exp ?
expires expires ) (path ? path
path ) (domain ? domain domain
) (secure ? secure )
26
Using Cookies (iii)

• Use onLoad and onUnload events to retrieve or
  store cookies

// Set a cookie setCookie(userid,
document.userInput.username.value) // Retrieve
a cookie var userid getCookie(userid)
27
Thank You!

• Thank you for your interest and attention
• Parting thoughts
• Trial and error
• Watch out for versioning problems
• Also watch out for browser-specific JavaScript
  coding techniques
• Contact me with questions, etc.