CS 330 Class 4

1
CS 330 Class 4

• Programming plan for today JavaScript overview
• Where are we?
• Crossing the line from formatting information to
  interacting with it
• Browsers are now becoming the universal means for
  presenting interactive information
• Line between documents and programs is becoming
  blurred
• Client languages
• JavaScript is the major language for client-side
  programming.
• VBScript is supported by Microsoft, but not
  Netscape

2
JavaScript

• A scripting language developed by Netscape and
  Sun
• JavaScript code is embedded in the HTML page and
  executed by the browser
• Allows pages with executable content
• User interaction
• Document content that can be manipulated on the
  fly
• Limitations
• Not a general (stand-alone) language
• No graphics
• No file I/O
• Not yet stable or universal (but ECMA standard is
  coming)
• A programming language supported by and
  particular to a particular program

3
Language Features

• I/O
• document.write( ) for output
• form input
• Data types
• number, string, boolean, object
• weak typing type is inferred from context and
  can change
• Control statements like C
• Functions like C
• Classes not the full support of C, but
  object-oriented
• built-in objects (document, window, )
• user-defined objects

4
JavaScript is Object-Based

• Objects (document, forms,) have properties,
  methods, and events
• Properties (values associated with an object)
• theForm.theSum.value in add.htm
• The object is theForm.theSum, the property is
  value
• aString.length
• The object is aString, the property is
  length
• Methods (something done with respect to an
  object)
• document.write(ltbrgtHello there)
• The object is document, the method is write
• Events
• onClick alert(You got my goat) in door.htm
  is triggered by the users action. The object is
  button, the event is alert.

5
Data Types and Values (Ch. 3)

• Number integer, octal, hex, float inferred from
  the context
• var aNumber 4.5 // note, no typing
• 
  //declaration optional, but recommended
• String
• Text within single or double quotes. Since HTML
  uses double quotes, some conventions use single
  quotes for JavaScript.
• onClick"alert('You win a car') //alert is HTML
  with string param.
• Exception a literal single quote name Susys
  place
• Concatenation via
• firstname Mary
• name firstname Smith
• Property name.length
• Method name.charAt(0) returns the first letter
• See p. 673 for other string features

6
Using JavaScript

• Structure
• Similar to C. Use Chapters 2-7 as language
  reference
• Where to put JavaScript code in an HTML document
• ltheadgt functions that are called from the body,
  initialization code
• ltbodygt what appears on the page
• Hiding from non-JavaScript browsers (add.htm)
• Type conversion (Chapter 11)
• automatic JavaScript will attempt to convert
  values to the type needed in a context. Try the
  following.
• javascriptalert(hello 5), alert(35),
  alert(35)
• explicit (good examples on p. 186)
• parseInt(aString) returns an integer at the
  beginning of aString
• parseFloat(aString) returns a float

7

• fact.htm (server-side listing)
• lthtmlgtltheadgt
• ltscript language"JavaScript"gt
• function factorial(n)
• if (nlt1) return 1
• return nfactorial(n-1)
• lt/scriptgt
• lt/headgt
• ltbodygt
• lth2gtltcentergtFactoriallt/centergtlt/h2gt
• ltscript language"JavaScript"gt
• document.write("ltulgt")
• for (i1ilt10i)
• document.write("ltligt", i," factorial is
  ",factorial(i))
• document.write("lt/ulgt")

8

• count.htm (server-side listing)
• lthtmlgtltheadgt
• ltscript language"JavaScript"gt
• function countCharacters( testString,
  testChar )
• var charCount 0
• for ( var strIndex0 strIndex lt
  testString.length strIndex)
• if (testString.charAt(strIndex)testC
  har)
• charCount
• return charCount
• lt/scriptgt
• lt/headgt
• ltbodygt
• lth2gtCounting Characterslt/h2gt
• ltscript language"JavaScript"gt
• var aString "aaaaaxa"
• var aLetter "a"