JavaScript csc667867 Spring 2005 Ilmi Yoon

1
JavaScriptcsc667/867Spring 2005Ilmi Yoon
2
Outline

• Basics of JavaScript,
• Some simple examples
• Basics of the language
• variables, types, arrays, objects, and functions
• operators, expressions, strings, and statements
• JavaScript Full Reference at http//wp.netscape.co
  m/eng/mozilla/3.0/handbook/javascript/

3
What is JavaScript

• JavaScript is a simple, interpreted,
  programming language with elementary
  object-oriented capabilities
• JavaScript has two distinct but overlapping
  systems
• client-side JavaScript runs on Web browsers
• server-side JavaScript runs on Web servers
• Syntactically JavaScript resembles C, C, Java
• JavaScript was developed by Netscape (formerly
  called LiveScript)

4
JavaScript is Embedded in HTML

• ltHTMLgt
• ltHEADgt
• lt/HEADgt
• ltBODYgt
• ltSCRIPT LANGUAGEJavaScriptgt
• //the Javascript here produces content for the
  BODY on loading
• lt/SCRIPTgt
• lt/BODYgt
• lt/HTMLgt
• Deferred Script
• ltHTMLgt
• ltHEADgt
• ltSCRIPT LANGUAGEJavaScriptgt
• //the Javascript here creates functions for later
  use
• lt/SCRIPTgt
• lt/HEADgt
• ltBODYgtlt/BODYgtlt/HTMLgt

5
A Simple Example

• ltHTMLgt
• ltHEADgt
• ltTITLEgtSimple Javascriptlt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltH1gtFirst Example of JavaScriptlt/H1gt
• ltSCRIPT LANGUAGEJavaScriptgt
• lt!-- hide from old browsers by embedding in a
  comment
• document.write(Last updated on
  document.lastModified
• .)
• // end script hiding --gt
• lt/SCRIPTgt
• lt/BODYgt
• lt/HTMLgt

6
Example 1 Browser Output
7
Another Example

• ltHTMLgt
• ltHEADgtltTITLEgtComputing Factorialslt/TITLEgtlt/HEADgt
• ltBODYgt
• ltH1gtAnother Example of JavaScriptlt/H1gt
• ltSCRIPT LANGUAGEJavaScriptgt
• document.write(ltH1gtFactorial Tablelt/H1gt)
• for ( i 1, fact 1 i lt 10 i, fact fact
  i)
• document.write(i ! fact)
• document.write(ltBRgt)
• lt/SCRIPTgt
• lt/BODYgt
• lt/HTMLgt

8
Another Example
9
JavaScript has Event Handlers

• ltHTMLgt
• ltHEADgtltTITLEgtHandling Events Examplelt/TITLEgtlt/HEAD
  gt
• ltBODYgt
• ltH1gtHandling Events in JavaScriptlt/H1gt
• ltFORMgt
• ltINPUT TYPEbutton VALUEClick me
• onClickalert(You clicked me) gt
• lt/FORMgt
• lt/BODYgt
• lt/HTMLgt

10
Example 3
11
What JavaScript Programs Can Do

• Write programs to perform any computation it is
  equivalent in power to a general purpose
  programming language
• Control Web page appearance and content (this is
  its intended use)
• Control the Web browser, open windows and frames
• Interact with document content
• Retrieve and manipulate all hyperlinks
• Interact with the user
• Read/write client state with cookies

12
JavaScript - The Basics

• JavaScript is case-sensitive
• sum, SUM and Sum are 3 different identifiers
• HTML is NOT case-sensitive
• JavaScript ignores spaces, tabs, newlines
• Semicolon is optional
• but multiple statements on a line require a
  semicolon
• i 1 j 2
• C and C style comments are supported
• //comment to end of line
• / this can be a
• multiple line comment /

13
JavaScript Literals

• Literals
• numbers, strings, true, false, null
• All numbers are treated as floating point
• base10 -(1-9)(0-9)
• base8 -0(0-7)
• base16 -0(xX)(0-9a-fA-F)
• float (-)digits.digits(Ee)(-)digits
  
• There are special numerical constants
• Number.MAX_VALUE, Number.MIN_VALUE,
• Number.POSITIVE_INFINITY, Number.NEGATIVE_INFINIT
  Y

14
String Literals

• Any sequence of zero or more characters enclosed
  within single or double quotes
• Examples
• a single quoted string
• a double quoted string
• alert(Please Click OK)

15
JavaScript Data Types

• Type Example Description
• String a string a series of characters inside
• quote marks
• Number 123.45 Any number not inside quote
  marks
• Boolean true a logical true and false
• Null null completely devoid of any value,
  not a number, not a string, different than
  0 in C/C
• Object all properties and methods belonging
  to the object
• Function a function

16
JavaScript Arrays and Objects

• Arrays
• one dimensional, indexed from zero
• array elements can contain any type of data
  including references to other arrays, to objects,
  to functions
• array elements can have different types
• Objects
• a collection of data where each item has a name
• e.g. document has a property images array whose
  elements have properties width and height, e.g.
  document.imagesi.width

17
Arrays

• Elements are normally accessed using
• arr0 1
• arrarr0 2
• Arrays in JavaScript are sparse
• arr0 1 arr10000 a string
• only 2 indices are allocated
• Arbitrary expressions are permitted in
• framesij12
• document.framesi.elementsj
• Even expressions that evaluate to a string
• documentlastModified

18
Array and Objects

• Objects and arrays are really identical
• typeof(array) typeof(object) object
• typeof() returns a string which is the type of
  its argument (number, string, boolean,
  object, function, undefined)
• Object elements are accessed using dot (.)
• An object/array on the left requires a field name
  on the right of dot
• document.lastModified
• frames0.length
• The dot operator can be used with arrays
• arr1 is identical to arr.1
• but if i 1, arr1 is not equivalent to arr.i
  since property names are not evaluated

19
Date Browser Output
20
Using alert(), confirm(), and prompt()

• ltHTMLgtltHEADgtltTITLEgtExample of alert, confirm,
  promptlt/TITLEgt
• ltSCRIPT LANGUAGEJavaScriptgt
• function alertUser()
• alert("An alert box contains an exclamation
  mark")
• function confirmUser()
• var msg "\n please confirm that you want\n"
• "to test another button?"
• if (confirm(msg))
• document.write("lth2gtYou selected OKlt/h2gt")
• else document.write("lth2gtYou selected
  Cancellt/h2gt")
• function promptUser()
• name1prompt("What is your name?, )
• document.write("lth2gtwelcome to this page "
  name1 "lt/h2gt") lt/SCRIPTgtlt/HEADgt

21
Using alert(), confirm(), and prompt()

• ltBODYgtwelcome to this pageltbrgt
• ltFORMgt
• ltINPUT TYPEbutton VALUE"Click here to test
  alert() onClick"alertUser()"gtltBRgt
• ltINPUT TYPEbutton VALUE"Click here to test
  confirm()" onClick"confirmUser()"gtltBRgt
• ltINPUT TYPEbutton VALUE"Click here to test
  prompt()" onClick"promptUser()"gtlt/FORMgtlt/BODYgtlt/H
  TMLgt

22
Clicking on alert()
23
Clicking on confirm()
24
Clicking on prompt()
25
Supporting IE and NS

• IE and NS do not support the same JavaScript
  language
• they include similar/identical capabilities, but
  the way to invoke them is different
• We must write JavaScript that works across both
  browsers
• if a client gets a JavaScript error it is
  annoying and there is nothing viewers can do

26
Determining the Browser

• navigator is a built-in object with properties
  that describe the browser
• defined in both IE and NS
• navigator.appName is a string with the browser
  name
• navigator.appVersion is a string with the version
  number
• to determine the correct version you may need to
  convert from string to number
• parseFloat returns a number from a string, and
  ignores any part of the string after the number
• Number only converts a string that is a number to
  a number

27
Determining the Browser

• ltHTMLgtltHEADgtltTITLEgtCheck Browserlt/TITLEgt
• lt/HEADgtltBODYgt
• ltSCRIPT languageJavaScriptgt
• document.write(ltBRgt This browser is
• navigator.appName)
• document.write(ltBRgt Version
• navigator.appVersion)
• if (parseFloat(navigator.appVersion) gt 4)
• document.write(ltBRgt You have an up-to-date
• browser)
• lt/SCRIPTgt
• lt/BODYgt
• lt/HTMLgt

28
Browser Output
29
Avoiding Errors

• Since IE and NS differ somewhat in JavaScript, it
  is useful to first check if an object, property
  or method exists
• One can refer to any name in a conditional and if
  it is undefined the conditional returns false
• newItem something//produces an error if
• //something is undefined
• if ( something ) newItem something
• does not produce an error, but only changes
  newItem if something exists

30
Example Checking Window Size

• NS and IE use different object properties to hold
  the window size
• IE document.body.clientwidth or clientheight
• NS window.innerWidth or innerHeight
• Suppose you want to vary the response depending
  upon the size of the browser window
• lets write a program that does this

31
Re-Direct the Browser

• ltHTMLgtltHEADgtltTITLEgtre-direct based upon window
  sizelt/TITLEgtlt/HEADgt
• ltBODYgtltSCRIPT languageJavaScriptgt
• function windowHeight( )
• if (document.body //test for IE
  document.body.clientHeight)
• return document.body.clientHeight
• else if (window.innerHeight) //test for NS
• return window.innerHeight
• else return 0 //both tests have failed
• if (windowHeight() gt 500)
• document.location fancy.html
• else document.location lessfancy.html
• lt/SCRIPTgtlt/BODYgtlt/HTMLgt

32
Points to Observe

• If the check for IE and NS both fail then a
  height of 0 is returned and the lessfancy file is
  displayed
• The conditional with the clause is checked
  left-to-right in short-circuit mode

33
Example A Dynamically Changing Banner

• Use JavaScript to have a region where the HTML is
  dynamic
• use the STYLE attribute to create an HTML block
  that is accessed by JavaScript
• use a periodically scheduled event
• id setInterval(JSstring, msec)
• JSstring is JavaScript code and msec is
  milliseconds
• JSstring is called every time

34
Browser Output
35
HEAD of the banner Example

• ltHTMLgtltHEADltTITLEgtchanging bannerlt/TITLEgt
• ltSCRIPT languageJavaScriptgt
• var banners new Array()
• banners0 banner0
• banners1 banner1
• banners2 banner2
• var which 0
• function update()
• display(banner, bannerswhich)
• which
• if (which banners.length) which 0
• display function
• lt/SCRIPTgtltBODYgt...

36
What Document HEAD does

• Defines array banners of HTML to display
• Defines counter, called which, that tells which
  element is being displayed
• Defines update which calls display() with ID
  banner and the current element of banners, then
  increments which

37
Changing HTML in a Region

• function display(id, str)
• if (document.all)
• document.allid.innerHTMLstr
• else
• documentid.document.open()
• documentid.document.write(str)
• documentid.document.close()

38
BODY of Banner Example

• ltHEADgtltTITLEgtVarying a Bannerlt/TITLEgt
• ltSCRIPT LanguageJavaScriptgt
• function update()/load new banner for
  eachcall/
• lt/SCRIPTgtlt/HEADgt
• ltBODY onload "if (setInterval)
  setInterval('update()', 5000)"gt
• ltpgtAn example of a changing text bannerlt/Pgt
• ltPgtltSPAN ID"banner" STYLE"positionabsolute"gtltI
  gt
• ltSCRIPT LanguageJavascriptgt
• if (setInterval)
• document.write('the banner is loading')
• else document.write('Get a new browser')
• lt/SCRIPTgtlt/Igtlt/SPANgt
• ltBRgtltPgtHere is the remainder of the documentlt/Pgt
• lt/BODYgtlt/HTMLgt

39
Points to Observe

• Uses onload event handler to start a periodic
  event with setInterval
• runs the function update() every 5 seconds
• update must be defined in the HEAD
• does nothing if setInterval is not defined
• Uses an HTML SPAN tag to define the element that
  the update function will change
• has an ID (similar to a name, but for all tags
  and is unique in the document)
• has a STYLE attribute specifying absolute
  position
• needed in NS to modify the region

40
Something on STYLE

• When an HTML tag specifies a style, the position
  of the element can be controlled
• very useful for layout
• for NS to change the text, the position must be
  absolute
• this creates some awkwardness
• the next element is relative, and it turns out
  this means it will overlap the SPAN region that
  is being changed
• fix this using some BR tags to skip ahead

41
Changing the SPAN region

• NS and IE uses different ways to alter what is in
  an HTML region
• IE has innerHTML property which when set to a new
  value displays that HTML in the region
• document.allid.innerHTML str
• NS has a document object for each such region
• open this document, write to it, and then close
  it
• documentid.document.open()
• documentid.document.write(str)
• documentid.document.close()

42
About display()

• Checks to see if document.all is defined
• if so, uses IE4 convention of changing innerHTML
• Otherwise assumes NS and uses NS conventions
• note, this function will not be called for older
  browsers, because setInterval is not defined so
  the onload method does nothing

43
Accessing the SPAN Region

• A SPAN tag with an ID attribute creates a
  JavaScript variable that can be used to modify
  that region of the document
• array of objects, one for each HTML tag, with an
  ID attribute
• accessed using the ID - string with a name
• slightly different in NS and IE
• document.allid in IE
• documentid in NS
• e.g. document.allbanner or documentbanner

44
Highlighting Menus

• Menus whose elements are temporarily highlighted
  as the mouse moves over them
• One way use two images for each menu item and
  change between them using the mouseover and
  mouseout events
• this works in NS and IE version 4 or later
• Second way use STYLE attributes to dynamically
  change color, but this is harder to get working
  on both browsers

45
Image Object

• Each image in an HTML document has an associated
  JavaScript object
• the properties of the object include
• width and height in pixels
• src, URL of the image file, changes image when
  set
• complete, true after images finishes loading
• can refer to object by NAME attribute of HTML IMG
  tag, or via built-in array of images
• document.images.name
• document.imagesindex where index is either a
  number or a string containing the name of the
  image

46
More on Image Object

• An image object is created automatically for each
  IMG tag in a document
• if there is no name attribute, then one cannot
  refer to it by name in JavaScript
• An image object can also be created in JavaScript
• var myImage new Image()
• this can be used to load images into a document
  that are not visible in the displayed document
• pre-fetching to make images appear immediately

47
An Image Rollover

• Image rollover is the effect used to change
  between two images when the mouse moves over it
• the images must be the same size
• for the changes to be immediate, images must be
  pre-fetched
• Generally used in highlighting menus, can be used
  wherever you want an image to change when the
  mouse moves over it
• try http//www.ruleweb.com/dhtml/index.html

48
Rollover Example

• ltHTMLgtltHEADgtltTITLEgtImage rolloverlt/TITLEgt
• ltSCRIPT languagejavascriptgt
• function highlightdocs()
• if (document.images)
• document.imagesdocs.src docsOn.src
• function unhighlightdocs()
• if (document.images)
• document.imagesdocs.src docsOff.src
• if (document.images)
• docsOn new Image()
• docsOn.src images/docs_on.gif
• docsOff new Image()
• docsOff.src images/docs_off.gif
• lt/SCRIPTgtlt/HEADgtltBODYgtltPgt
• ltA HREFdocuments.html onMouseOverhighlightdoc
  s() onMouseOutunhighlightdocs()gt
• ltIMG SRCimages/docs_off.gif height25 width25
  namedocs border0 altdocumentsgtlt/Agtlt/Pgtlt/BODYgtlt/
  HTMLgt

49
Observe in the BODY

• The BODY creates an anchor with an image inside
• there are mouse event handlers
• image tag sets height, width, no border, alt text
  and name
• the name is used to refer to the image in
  javaScript, document.imagesdocs
• the HEAD defines two functions
• only runs if browser supports image object
• changes image by setting its src property to that
  of another, pre-fetched image called docs_on.gif

50
More on the HEAD

• Highlighting requires two images
• the image is created, then set is src property
  which loads the image
• the names docsOn and docsOff are only used inside
  the functions, so it is OK to define them after
• not used until the event handlers are activated
  by the mouse moving over the image

51
Generalizing to Multiple Images

• Suppose we want a general highlight/unhighlight
  functions for any image in a document
• define two arrays onImages and offImages
• store pre-fetched images in these arrays,
  according to the same name as used for the image
  in the HTML
• in general arrays can be indexed by strings as
  well as numbers

52
Pre-fetching Required Images

• If (document.images)
• var onImages new Array
• var offimages new Array
• onImagesdocs new Image()
• onImagesdocs.src images/docs_on.gif
• offImagesdocs new Image()
• offImagesdocs.src images/docs_off.gif
• onImagestech new Image()
• onImagestech.src images/tech_on.gif
• offImagestech new Image()
• offImagestech.src images/tech_off.gif

53
General Highlighting Functions

• Name each image in the HTML document with the
  same name used in the pre-fetch arrays, onImages
  and offImages
• e.g. the name docs was used for the images, so
  use the same name in the HTML
• then one can highlight by simply setting the src
  property of an element in document.images to the
  src property of that element in onImages
• ltIMG SRCimages/docs_off.gif height25 width25
  namedocs border0 altdocumentsgt

54
Code for General Highlighting

• function highlight(imgName)
• if (document.images)
• document.imagesimgName.src
• onImagesimgName.src
• function unhighlight(imgName)
• if (document.images)
• document.imagesimgName.src
• offImagesimgName.src

55
Summary

• How to write JavaScript that works across
  browsers
• checking that the browser supports a given
  feature such as document.images, before using it
• avoid annoying JavaScript errors that occur when
  viewing in one browser or the other
• the built-in image object in JavaScript
• accessing via name or array of images
• created automatically for each IMG tag in the
  HTML
• can also be created using new Image() in
  JavaScript

56
But Pre-fetching Repeats Code

• Each image to be highlighted requires creating
  two images and setting their src properties
• Repeated code is an indication of where to use
  subroutines
• Alternate strategy create a global array with
  the names of all the images that will be used
• must be the same as the names in IMG tags
• this code requires images stored on the server to
  have file names based on these names
• specify a path and extension
• path name _on. ext(noteappends)
• so path images/, namedocs, extgif then
  file must be in relative location
  images/docs_on.gif
• loop over the elements in this name array,
  creating and loading the images

57
Pre-Fetching Function

• function prefetch(path, extension)
• var imageName, i
• if (document.images)
• for ( i 0 i lt imageNames.length i)
• imageName imageNamesi
• onImagesimageName new Image()
• onImagesimageName.src path imageName
  _on. extension
• offImagesimageName new Image()
• offImagesimageName.src path imageName
  _off. extension

58
Remainder of set-up

• var imageNames new Array(docs, tech,
  banner1, banner2)
• if (document.images)
• var onImages new Array()
• var offImages new Array()
• prefetch(images/, gif)
• There are four highlighting images in array

59
Body of Four Images

• ltBODYgt
• ltPgtltA HREFdocuments.html onMouseOverhighlight(
  docs) onMouseOutunhighlight(docs)gt
• ltimg srcimages/docs_off.gif namedocs border0
  altdocuments width25 height25gtlt/AgtltBRgt
• ltA HREFtechnology.html onMouseOverhighlight(
  tech) onMouseOutunhighlight(tech)gt
• ltimg srcimages/tech_off.gif nametech border0
  alttechnology width25 height25gtlt/AgtltBRgt
• ltA HREFmembers.html onMouseOverhighlight(bann
  er1) onMouseOutunhighlight(banner1)gt
• ltimg srcimages/banner1_off.gif namebanner1
  border0 altbanner1 width25 height25gtlt/AgtltBRgt
• . . . But there is still lots of repeated HTML

60
Reducing Repeated Code

• Use document.write to produce the required HTML
• document.write(ltA HREF hrefsI
  onmouseoverhighlight(\ imageName \)
  onmouseoutunhighlight(\ imageName
  \)gt
• ltIMG src path imageName _off.
  extension name imageName
  border0 alt altTextI
  width w height h gtlt/Agtlt/BRgt

61
Some Explanations

• Consider
• document.write(ltA HREF hrefsi )
• which produces the HTML
• ltA HREFdocuments.html
• Consider
• document.write(onmouseoverhighlight(\
  imageName \)
• which produces the HTML
• onmouseoverhighlight(docs)
• where imageName has value docs

62
Function for Creating the Menu

• Function createHighlightMenu(path, extension, w,
  h)
• var imageName, I
• for (i0 i ltimagesNames.length i)
• imageNameimageNamesi
• if (document.images)
• onImagesimageName new Image()
• onImagesimageName.src path imageName
• _on. extension
• offImagesimageName new Image()
• offImagesimageName.src path imageName
• _off. extension
• document.write(ltA HREF hrefsi
  onmouseoverhighlight(\imageName \)
  onmouseoutunhighlight(\ imageName
  \)gtltIMG src path imageName _off.
  extension nameimageName border0
  alt altTexti width w
  height h gtlt/AgtltBRgt)

63
Document Body Using this function

• ltBODYgtltPgtltSCRIPT languageJavaScriptgt
• var imageNames new Array(docs, tech,
  banner1, banner2)
• var hrefs new Array(document.html,
  tech.html, banner1.html, banner2.html)
• var altText new Array(Docs, Techs, banner1,
  banner2)
• if (document.images)
• var onImages new Array()
• var offImages new Array()
• createHighlightMenu(images/, gif, 25, 25)
• lt/SCRIPTgtlt/Pgtlt/BODYgtlt/HTMLgt

64
JavaScript Object Hierarchy

• self, window, parent, top
• plugins
• navigator
• mimetypes
• frames
• location forms elements
• Current
• Window history anchors buttons
• checkboxes
• document links fileUpload
• hidden
• packages images password
• radio
• applets reset
• select options
• embeds submit
• Java packages text
• JavaClass objects textarea

65
JavaScript Built-in Objects and HTML Tags

• Object HTML Tag Object HTML Tag
• window N/A button ltINPUT TYPEbutton
• frame ltFRAMEgt checkbox ltINPUT TYPEcheckbox
• history N/A hidden ltINPUT TYPEhidden
• location N/A passwordltINPUT TYPEpassword
• document ltBODYgt radio ltINPUT TYPEradio
• form ltFORMgt reset ltINPUT TYPEreset
• select ltSELECTgt submit ltINPUT TYPEsubmit
• textarea ltTEXTAREAgt text ltINPUT TYPEtext
• link ltA HREFgt anchor ltA NAMEgt
• navigator N/A

66
Key Objects

• Document object is responsible for all content on
  a page contains all the user interface elements
  of a page
• Window object represents a browser window or
  frame. This is the top-level object for each
  document,Location, and History object group.
• Frame object
• Location object
• History object
• Form objects can contain user interface elements
  for user input
• Button objects include a button, submit and reset
  buttons

67
Example Document Object Property Values

• Property Value
• document.title My Home Page"
• document.fgColor 000000
• document.bgColor ffffff
• location.href "http//www.usc.edu/in.html
  "
• history.length 8

68
window.open() Method Attribute Examples

• To create a new window that shows only the
  toolbar and status bar and is resizable
• window.open(newURL, New Window,
  toolbar,status,resizable)
• the height and width defaults are the same as the
  browser
• a new window is positioned in the upper left hand
  corner of the screen
• a call to window.open() returns a value of the
  new windows object this should always be
  assigned to a variable, e.g.
• newWindow window.open(,)
• if (newWindow ! null)
• newWindow.document.write(ltHTMLgtltHEADgtltTITLEgtHilt/
  TITLEgtlt/HEADgt)

69
Example

• ltHTMLgtltHEADgtltTITLEgtPutting Up a Help
  Windowlt/TITLEgt
• ltSCRIPT LANGUAGEJavaScriptgt
• function displayHelp()
• hWin window.open(, Help,
  height200,width400)
• hWin.document.write(ltBODYgtA Sample Help
  WindowltBRgt)
• hWin.document.write(Please provide your first
  and last nameltBRgt)
• hWin.document.write(Your Phone number should
  have no hyphens)
• hWin.document.write(ltFORMgtltINPUT TYPEbutton
  valueOK onClickwindow.close() gt)
• hWin.document.write(lt/FORMgtlt/BODYgt)
• lt/SCRIPTgtlt/HEADgtltBODYgt
• ltFORM NAMEmyform methodPOSTgtltH2gtHere is my
  Formlt/H2gt
• NAME ltINPUT TYPEtext namenamegtltBRgt
• Address ltINPUT TYPEtext nameaddressgtltBRgt
• Phone ltINPUT TYPEtext namephonegtltBRgt
• ltINPUT TYPEsubmit VALUEClick Heregt
• ltINPUT TYPEbutton VALUEHelp
  onClickdisplayHelp()gt
• lt/FORMgtlt/BODYgtlt/HTMLgt

70
Help Window Browser Output
71
Example Checking for Empty Fields

• ltHTMLgtltHEADgtltTITLEgtElements Arraylt/TITLEgt
• ltSCRIPT LANGUAGE"javaScript"gt
• function doit()
• for (i 0 i lt 3 i)
• if (document.forms0.elementsi.value "")
• alert("Please fill out all fields.")
• document.forms0.elementsi.focus()
• break
• lt/SCRIPTgtlt/HEADgtltBODYgt ltFORM METHOD"POST"gt
• Enter your first name ltINPUT TYPE"text"
  NAME"firstname"gtltPgt
• Enter your last name ltINPUT TYPE"text
  NAME"lastname"gtltPgt
• ltINPUT TYPE"radio" NAME"gender"gtMale
• ltINPUT TYPE"radio" NAME"gender"gtFemaleltPgt
• ltINPUT TYPE"checkbox" NAME"retired"gtI am
  retiredltbrgt
• ltINPUT TYPE"button" NAME"act" VALUE"Verify
  onClick"doit()"gt
• lt/FORMgtlt/BODYgtlt/HTMLgt

72
Checking for Empty Fields Browser Output
73

• ltHTMLgtltHEADgtltTITLEgtChecking Elements in a
  Formlt/TITLEgt
• ltSCRIPT LANGUAGEJavaScriptgt
• function checkFields()
• var size document.myform.elements.length
• var Flag true
• for (var i 0 i lt size i)
• if ((document.myform.elementi.value null
  
• document.myform.elementi.value )
• (typeof document.myform.elementi.value !
  submit
• typeof document.myform.elementi.value !
  reset)
• Flagtrue alert(The document.myform.elem
  entsi.name field is blank. Please enter a
  value.) break //endif
• //end of for
• return Flag
• lt/SCRIPTgtlt/HEADgtltBODYgt

74

• ltFORM NAMEmyform methodPOST
  onSubmitreturn checkFields()gt
• ltH2gtHere is my Formlt/H2gt
• Name ltINPUT TYPEtext namenamegtltBRgt
• Address ltINPUT TYPEtext nameaddressgtlt BRgt
• Phone ltINPUT TYPEtext namephonegtlt BRgt
• ltINPUT TYPEsubmit VALUEClick Heregtlt BRgt
• lt/FORMgtlt/BODYgtlt/HTMLgt

75
Browser Output
76
Multiple Selection Example

• ltHTMLgtltHEADgtltTITLEgtUsing Multiple Selection
  Listslt/TITLEgt
• ltSCRIPT LANGUAGE"JavaScript"gt
• function displaySelectionValues(objectName) var
  ans ""
• for (var i 0 i lt objectName.length i)
• if(objectName.optionsi.selected)
• ans objectName.optionsi.text "ltBRgt"
• myWin window.open("", "Selections",
  "height200,width400")
• myWin.document.write("you picked these
  teamsltBRgt")
• myWin.document.write(ans)
• lt/SCRIPTgtlt/HEADgtltBODYgt
• ltFORM NAME"myform" method"POST"gt
• ltSELECT NAME"teams" size3 multiplegt
• ltOPTION value"dodgers"gtDodgersltOPTION
  value"yankees"gtYankees
• ltOPTION value"angels"gtAngels lt/SELECTgtltBRgt
• ltINPUT TYPE"button" value"Show Selected Items"
• onClick"displaySelectionValues(this.form.teams)"gt
  
• lt/FORMgtlt/BODYgtlt/HTMLgt

77
Multiple Selection Lists Browser Output
78
Working with the Date Object

• getDate() returns date within month (1-31)
• getDay() returns day within week (0-6)
• getHours() returns hour within day (0-23)
• getMinutes() returns minutes within hour (0-59)
• getMonth() returns month within year (0-11)
• getSeconds() getTime()
• getYear() getTimeZoneOffSet()
• setDate(arg) sets date within month (1-31)
• setHours(arg) sets hour within day (0-23)
• setMinutes(arg)sets minutes within hour (0-59)
• setMonth(arg) sets month within year (0-11)
• setSeconds() setTime() setYear()

Objects have get and set functions
79

• ltHTMLgtltHEADgtltTITLEgtUsing the Date Object
  lt/TITLEgtlt/HEADgt
• ltBODYgt
• The Date object has methods getMonth(),
  getDay(), getYear()ltbrgt
• ltSCRIPT LANGUAGEJavaScriptgt
• update new Date(document.lastModified)
• theMonth update.getMonth() 1
• theDay update.getDay()
• the Year update.getYear()
• document.writeln(ltIgtLast updated theMonth
  / theDay / theYear lt/Igt)
• lt/SCRIPTgt
• lt/BODYgtlt/HTMLgt

80
Date Object Browser Output