Chapter 10 in textbook.

JavaScript - a way of programming the browser's behaviour

No connection with Java. Name reflects marketing decisions

Comparison with Java:

• scripting language, interpreted
• source downloaded, no bytecodes
• no networking, graphics as in Java

• Java can be used to write a web browser
• JavaScript relies on the existence of a web browser
• use JavaScript for convenience proof-of-concept solutions
• Java - full; featured programming language

Example, more short examples.

JavaScript Syntax

References, Tutorials

Literal Values

Strings

• enclosed in simple or double quotes
• quotation inside the string must be escaped

Numbers

• integers
• floating point

Logical Values

• true
• false

References

• objects can refer to each other using references
• no pointers

Comments

• //
• /* ... */

Type Conversions

• automatic
• eval
• parseInt
• parseFloat

• loosely typed language (like Perl)
• variable names case sensitive
• no need to declare variables before use

• arithmetic expressions
• + operator for strings

• if/else
• curly brackets group statements in blocks
• conditional assignment statement
• no switch
• < overloaded (strings, numbers)

• for
• while
• examples with document.writeln
• break, continue
• for .. in like Perl's foreach (iterates over all properties of a JavaScript object)

• use the function statement
• no return type
• make variables local with var (global by default) (li> you can assign a function to a variable and then use the variable as if it were the function (example)

• several predefined arrays (get access to history list, current document's links, list of frames in a window)
• square brackets, 0-based indexing
• arrays have special read-only property length
• you can't create your own arrays but you can simulate (mock) them

• not really an OOPL, but supports OO style of programming
• JavaScript objects really associative arrays
• JavaScript objects contain data parts (properties) and functions (methods)
• new objects are created with new

• these are built-in into the JavaScript/Netscape system
• these objects give you access to various parts of the browser:
  • the history
  • the status bar
  • location
  • the hierarchy of Netscape objects:

  window --+-- frame ... 
           |
           +-- frame --+-- document --+-- form1 --+-- elem1
           .                          |           |   
           .                          |           +-- elem2
           .                          |         
                                      +-- form2 --+-- elem1
                                                  |
                                                  +-- elem2
                                                  |
                                                  +-- elem3
                                                  |

Event           Description         Relevant for                 

onLoad             [1]              documents, framesets
onUnload           [2]              documents, framesets
onSubmit           [3]              forms 
onClick            [4]              radio, check, submit, links
onFocus            [5]              text fields, passwords, etc. 
onBlur             [6]              text fields, passwords, etc. 
onChange           [7]              text fields, scrolling, select
onMouseOver        [8]              hypertext links 
onSelect           [9]              text fields

1. document loaded into browser
2. document unloaded from browser
3. submit button pressed in a form
4. user has clicked on an element
5. form field has become active
6. form field has become inactive
7. form field has changed
8. mouse is over the element
9. the selected are of a field has changed

• top-level object
• can create new windows on the fly
• window Properties:
  • defaultStatus
  • status
  • history
  • location
  • frames
  • name
  • document

• window Methods:
  • alert()
  • confirm()
  • prompt()
  • open()
  • close()
  • setTimeOut()
  • clearTimeOut()

• window Options

• document Properties:
  • alinkColor
  • bgColor
  • fgColor
  • linkColor
  • vlinkColor

  • anchors
  • forms
  • links

  • cookie
  • lastModified
  • location
  • referrer
  • title

• document Methods:
  • open()
  • close()
  • clear()
  • write()
  • writeln()

• form properties:

  • action
  • method
  • encoding
  • target
  • elements
  • length

• form Element Properties

  Property         Description                      Property of  
  name             the element's name               all 
  value            the element's value              all 
  checked          button checked?                  check, radio
  defaultChecked   checked by default?              check, radio
  options          array of options in a list       lists. menus
  text             the text label of a list option  list & menu items 
  selectedIndex    first selected option            lists, menus 
  selected         option selected                  list & menu items 
  defaultSelected  selected by default?             lists, menus 
    

• form Methods
  • submit()

• Properties of the links array
  • href
  • target
  • protocol
  • hostname
  • port
  • pathname
  • search
  • hash

• String Methods:
  • String transformation
  • HTML creation
• navigator
• Date
• Math

• true forward and backward buttons
• turn status bar into a marquee
• control contents of another frame from a menu
• defaults for textfield
• validating fill-out forms (use only as a convenience, beware of security holes)