JavaScript

1
JavaScript

• CC292
• Web Application Programming
• Simon M. Lucas

2
Overview

• Introduction JavaScript basics
• Expressions and types
• Arrays
• Objects and Associative Arrays
• Functions
• JavaScript in a web browser
• Invoking JavaScript
• JavaScript for accessing and modifying HTML
  content
• Dynamic HTML (DHTML)
• Sample programs

3
Language Fundamentals

• Powerful Object Oriented Language
• But very different from Java, C, or C
• Dynamic and interpreted
• Can easily define new functions at runtime
• Built in support for regular expressions
• Designed for web browser interactions
• Actually a powerful programming language
• Can also be run stand-alone on server
• E.g. using Rhino

4
Types

• Boolean
• Number (just one type for number c.f. Java which
  has int, float, double, char, )
• Array
• Associative array / Object
• Function
• When programming in a given context e.g. a web
  browser
• Many additional types (e.g. HTML Elements and
  Attributes)
• These are all types of Object

5
Expressions (from Flanagan, p. 59)

• 1.7 // a numeric literal
• JavaScript is Fun! // string literal
• true // boolean literal
• null // the literal null value
• /java/ // a regular expression literal
• x2, y2 // an object literal or associative
  array
• 2, 3, 5, 6 // an array literal
• function(x) return xx // function literal
• i // the variable i
• sum // the variable sum

6
Higher Order Functions

• Functions can take other functions as arguments
• These are known as higher-order functions
• This allows for great flexibility when
  programming
• Question
• How can similar things be done with Java?
• There are two ways

7
Main Features

• Great for interactive web pages
• Validation, calculation, messages
• Supported by most full-feature browsers
• IE, Netscape, Mozilla, Opera, (though varying
  support)
• Place
• In-line
• Or reference in separate file (good for common
  functions)
• C-like syntax
• Access to current HTML page via DOM
• (Document Object Model)
• Weakly typed (c.f. Javas Strong Typing)
• Also called Duck Typing

8
JavaScript Programming

• Event Handling
• Statements (like C / Java)
• Operators
• Variables global (default)
• Or local (e.g. var x 1)
• Types can change
• Eg. x 1 x Hello
• Function definition (decompose problem / reuse)
• Message Alerts
• Page element access with Document Object Model
• Views HTML page as a tree of elements

9
Document Object Models (DOMs)

• Source of confusion there are two document
  object models
• Legacy DOM
• W3C DOM (Levels 1 and 2 details wont concern us
  too much here)
• They do similar things but in different ways
• Legacy DOM is concise but awkward
• W3C DOM is less concise, but has consistent
  naming conventions

10
Legacy DOM

• Idiosyncratic naming of page elements
• Youll need a reference guide constantly at hand
  to find the correct names to use
• The names of properties do NOT correspond to
  their HTML names
• Example
• document.anchors
• an object collection listing all the bookmarks
  in a document i.e. ltagt tags with name instead of
  href
• e.g. lta nameConclusionsgtConclusionslt/agt
• other examples include links, forms, images

11
W3C Document Object Model

• Has consistent naming scheme
• Example methods
• document.getElementById(uniqueId)
• Returns a single element
• document.getElementsByTagName(a)
• Returns an array of elements in this case all
  the ltagt tags in the document

12
Hello World Example

• This provides an annoying popup try it!
• lthtmlgt
• ltbodygt
• lta href"http//www.google.co.uk"
• onMouseOver"( alert(
• 'Follow link to search on Google') )"gt
• Search on Google
• lt/agt
• lt/bodygt
• lt/htmlgt

13
Invoking JavaScript

• From a URL
• lta hrefjavascript myFunc() gt Click here to
  invoke myFunc() lt/agt
• From an input event handler (see Hello World
  example)
• From a page load event ltbody onloadmyFunc()gt
• From a timer
• e.g. setInterval(imageRefresh, 100)
• Calls the (user defined) imageRefresh() function
  every 100 milliseconds

14
Handling Events

• An event can invoke any valid Javascript
• One or more statements
• Usually a function call
• Activated as we saw previously
• lttag attribute1 attribute2 onEventName"javascript
  code"gt

15
Common Events

• An event is given a Name to identify it
• The handler for an event gets called when the
  event occurs
• The handler takes the form onEventName
• E.g. the code for onMouseOver is called when the
  mouse hovers over a link
• Select
• User enters a form element (onSelect)
• Change
• Use changes a form element then leaves it
  (onChange)
• Submit
• clicks the submit button on a form (onSubmit)

16
Defining Functions

• function funcName(arg1,arg2, etc) statements
  
• Note
• No type information in function signature
• Can declare a function with no args, then pass it
  some!
• and access with arguments array within function
• Example factorial
• Recursive calculation
• Conditional statement
• Calling from Change event
• Use of document.getElementById
• Use of this.value gets value of current element

17
Factorial Form

• lthtmlgt
• ltheadgt
• ltscript language"JavaScript"gt
• function fac(n)
• // do it recursively...
• if (n lt 2)
• return 1
• else
• return n fac(n-1)
• lt/scriptgt
• lt/headgt

18
Factorial Form Contd.

• ltbodygt
• ltformgt
• ltpgt
• ltinput id"facArg" type"text"
• onchange" result fac(this.value)
• document.getElementById('facResu
  lt').value result " /gt
• lt/pgt
• ltpgt
• ltinput id"facResult" type"text" /gt
• lt/pgt
• lt/formgt
• lt/bodygt
• lt/htmlgt

19
Form in action
20
Invoking JS from Hyperlinks

• JavaScript code can be the destination for a
  hyperlink
• Use
• lta hrefjavascript myFunc(arg)gtClick here to
  invoke myFunc(arg)lt/agt
• Example below uses this to dynamically change the
  appearance of a list

21
List Change Function
22
List Change Usage
23
Note usage of

• In JavaScript function listStyle()
• document.getElementById(id)
• setAttribute(class, value)
• In HTML
• Function call on href
• Alternative string quotes to pass argument
• listStyle(noBullet)
• idmyList to identify the list

24
Sorting Example

• Sort Numbers or Strings
• Default everything converted to a string
• Provide a comparator to override this

25
Our JavaScript test() function
26
Running Sort

• This was after clicking middle (buggy) sort

27
Eval Function

• Any String can be interpreted as Live
  JavaScript code using the eval function
• Can use this to write a code runner

28
HTML for Eval
29
JavaScript Evaluation
30
Eval Screenshot (Firefox)
31
Multi-Window Communication

• The following simple example illustrates
  multi-window communication
• A child window is created, filled with content,
  and talks back to parent
• Can be used for Calendar controls etc.
• Note use of window.open() to create a new window
  (a child window)
• Then writing to the document object of that
  window
• And writing to the parent window (opener)

32
JS for Window Creation
33
Invisible HTML for Popup Content
34
Exercise Explain what happened
35
Summary

• Concise due to weak / dynamic typing
• DOM gives great power to access / modify HTML
  page
• See auto Table of Contents Example in Lab
• Can look up elements by ID
• Event-handling
• Makes forms interactive
• Good for validation / dialog
• Use Javascript console (Mozilla) for debugging
• See also AJAX (Google it)