JavaScript

1
JavaScript

• H. Leonard Liaw
• LIS 385T

2
What is JavaScript?

• JavaScript ? Java
• Developed by Netscape
• Purpose to Create Dynamic websites
• Widely Used

3
How JS Works in HTML

• ltSCRIPTgt lt/SCRIPTgt
• lt!--
• // --gt

4

• lthtmlgt
• ltheadgt
• lttitlegtJavaScript Pagelt/titlegt
• ltscript LANGUAGEJavaScriptgt
• lt!-- actual JavaScript follows below
• alert (Welcome to the Test Site!)
• // ending the script --gt
• lt/scriptgt
• lt/headgt
• ltbodygt Content of the Page lt/bodygt
• lt/htmlgt

5

• Running It on a Browser
• www.artsci.wustl.edu/hmliaw/Test-01.htm

6
Elements of JavaScript

• Variables
• Arrays
• Functions

7
Variables

• ltscript languageJavaScriptgt
• lt!-- definition of variables
• var num_car 25
• var passenger_per_car 3
• //calculation of total number of people
• var total_passenger num_car passenger_per_car
• Alert(total_passenger)
• // end of script --gt
• lt/scriptgt
• www.artsci.wustl.edu/hmliaw/Test-Variable.htm

8
Arrays

• var score new Array(3)
• score0 35
• score1 56
• score2 10
• Alternative var score new Array(35,56,10)
• sumscore0score1score2
• alert(sum)
• www.artsci.wustl.edu/hmliaw/Test-02.htm

9
Function

• ltscript langauge"JavaScript"gt
• lt!-- hide me
• function announceTime( )
• //get the date, the hour, minutes, and seconds
• var the_date new Date()
• var the_hour the_date.getHours()
• var the_minute the_date.getMinutes()
• var the_second the_date.getSeconds()
• //put together the string and alert with it
• var the_time the_hour "" the_minute ""
  the_second
• alert("The time is now " the_time)
• // show me --gt

10
JavaScript in Action

• ROLLOVER BUTTONS
• www.nbc.com
• ltscript language"javascript" src"/js_scripts/rol
  lover.js"gtlt/scriptgt
• --------------------------------------------------
  ---------
• ltscript language "JavaScript"gtlt!-- Hide from
  non-JavaScript Browsersif (document.images)butt
  on1 new Image()button1.src
  "../assets/images/picture1.gif"button2 new
  Image()button2.src "../assets/images/picture2.g
  if"// --gtlt/scriptgt

11
JavaScript in Action

• INPUT-TEXT FIELD
• www.rottentomatoes.com
• function textRestore (input) if ( input.value
  "" ) input.value input.defaultValue
• ------------------------------------------------
• ltinput typetext size"7" value""
  onBlur"JavaScripttextRestore(this)"
  namesearch style"background-colorFFFFFFfont-f
  amilyVerdana, Arial font-size12
  color113402 width100px"gt

12
JavaScript in Action

• FORMS
• http//edit.yahoo.com/config/eval_register?.intl
  new1.done.srcym.partner.ppromo.last
• ------------------------------------------------
• function IsFormComplete(FormName)
• var x 0
• var FormOk true
• while ((x lt document.formsFormName.elements.leng
  th) (FormOk))
• if (document.formsFormName.elementsx.
  value '')
• alert('Please enter the
  'document.formsFormName.elementsx.name '
  and try again.')
• document.formsFormName.elementsx.focus
  ()
• FormOk false
• x
• return FormOk

13
JavaScript in Action

• PLUG-IN DETECTION
• http//edit.yahoo.com/config/eval_register?.intl
  new1.done.srcym.partner.ppromo.last
• ------------------------------------------------
• WM_easyDetect('flash')
• WM_easyDetect('quicktime')
• WM_easyDetect('shockwave')
• WM_easyDetect('realaudio')
• var hasFlash WM_easyDetect('flash')
• if(hasFlash) window.location
  'flashversion.html'
• else window.location 'noflashversion.html'

14
JavaScript in Action

• FLIP-BOOK ANIMATION
• http//hotwired.lycos.com/webmonkey/html/97/42/ben
  dy/img_flip.html
• ----------------------------------------
• // make the array of imagesbendyList new
  Array('bendy000.gif', 'bendy001.gif',
  'bendy002.gif', 'bendy003.gif', 'bendy004.gif',
  'bendy005.gif', 'bendy006.gif', 'bendy007.gif',
  'bendy008.gif', 'bendy009.gif', 'bendy010.gif',
  'bendy011.gif', 'bendy012.gif', 'bendy013.gif',
  'bendy014.gif') // daPosition will point to
  successive images in the bendyList array
  daPosition 0 function imageFlip() //
  increment the pointer if(daPosition
  bendyList.length-1) daPosition 0 else
  daPosition // change the image
  document.images'daImg'.src bendyListdaPositio
  n // do it again setTimeout('imageFlip()',
  200)

15
JavaScript in Action

• SCROLL
• www.chinatimes.com.tw
• ---------------------------------
• lt!-- start scroller script --gt
• lta id"scroller_anchor"gtlt/agt
• ltscript language"JavaScript1.2"gt
• var scrollerwidth405
• var scrollerheight76
• var scrollerbgcolor'eeeeee'
• ..
• slideimages'lta href

16
Why Use JavaScript?

• Necessity
• http//www.cah.utexas.edu/
• Amusement
• http//www.disney.com

17
Whos got the time to Write JS?!

• CHEAT!!
• STEAL!!
• HOW? Heres the answer!
• http//hotwired.lycos.com/webmonkey/99/30/index1a.
  html?twprogramming

18
Resources

• http//www.webreference.com/js/tools/
• http//workbench.netobjects.com/javascript_home.ht
  ml
• http//hotwired.lycos.com/webmonkey/programming/ja
  vascript/index.html
• http//developer.netscape.com/docs/manuals/javascr
  ipt.html
• http//www.htmlgoodies.com/primers/jsp/hgjsp_1.htm
  l