Clientside Dynamic Programming: JavaScript

1
Client-side Dynamic Programming JavaScript

• Dan Wang

2
Introduction

• Web browsers support client-side script languages
• JavaScript
• Jscript (MS name for JavaScript)
• VBScript
• PerlScript
• JavaScript provides client-side interactivities
• Add content to a web page dynamically.
• Alter a web page in response to user actions.
• React to user events
• Interact with frames
• Manipulate browser cookies

3
Introduction

• JavaScript is not
• Java - Java is an application language
• Java Beans - Java Beans are components
• Applet - Applets are applications that can be
  invoked in a browser
• JavaScript is
• developed by Netscape
• embedded in an HTML page (any place, head or
  body)
• a simple scripting language
• Syntax is similar to Java
• an interpreted language, errors are identified by
  browsers

4
JavaScript Format

• The script must be between script tags
• ltSCRIPT LANGUAGE "JavaScript"gt
• lt!-- HIDE FROM OTHER BROWSERS
• .. code goes here ..
• //STOP HIDING FROM OTHER BROWSERS--gt
• lt/SCRIPTgt
• Note the comments are used to prevent problems
  in old browsers

5
JavaScript Syntax

• Variables
• Data types
• Operators
• Control Structures
• Objects

6
Variables

• Untyped!
• Can be declared with var keyword
• var a
• Can be created automatically by assigning a
  value
• a1
• blah"Hi Dave"
• Using var to declare a variable results in a
  local variable (inside a function).
• Without using var, the variable is a global
  variable

7
Data Types

• Typical data types
• Numbers 17 123.45
• Strings "Hello Dave"
• Boolean true false
• Arrays 1,"Hi Dave",17.234

Arrays can hold anything!
8
Operators

• Operators are used just like Java
• Arithmetic - / --
• Comparison ! gt lt
• Assignment
• bitwise ! ltlt gtgt
• boolean

9
Control Structures

• Like Java
• if
• if-else
• ?
• for
• while
• do-while
• switch

10
If

• The if statement is from Java
• if (hours lt 40)
• wage hours rate
• else
• wage (hours - 40) rate 1.5 40 rate
• Ex If else

11
While

• The while statement is from Java
• number 1
• while (number lt 4)
• document.writeln (number)
• number
• Note the number
• Ex While

12
For

• The for statement is from Java
• var number
• for (number1 number lt 4 number)
• document.writeln (number)
• Note again the number
• Ex For

13
Functions

• The keyword function is used to define a function
  (subroutine)
• function add(x,y)
• return(xy)
• It is common to put function code in the head
  section
• Functions can have arguments and a return
• To call function
• zadd(x,y)
• Ex

14
Math

• Properties E LN10 LOG2E PI SQRT2
• Methods (some)
• Abs ceil/floor exp/log max/min pow random round
  sqrt sin/cos/tan
• Ex Math

15
Objects

• Objects have properties, methods and event
  handlers.
• There are many pre-defined objects.
• Using objects follows the syntax of Java
• objectname.propertyname
• objectname.methodname()
• objectname.onevent()

16
Array

• Array is an object.
• Constructor new Array()
• Property length
• Methods include
• concat join reverse sort
• Example
• var a 8,7,6,5
• var a new Array(foo,bar)
• for (i0ilta.lengthi)
• ai 2
• b a.reverse()

17
String

• Constructor new String(value)
• Property length
• Methods (some)
• charAt(index) concat fontsize indexOf match
  search split substring toLowerCase
• Example
• string newString string1.concat(string2)
• var test foo,bar,baz.split(,)
• vat test this is a test.substring(5,7)

18
Number

• Constructor new Number(value)
• Properties MAX_VALUE MIN_VALUE NaN
• Methods
• toString(radix) toString() valueOf()
• Example
• var a Number(15)
• var b a.toString()

19
Date

• Constructor
• new Date(year,month,day,hrs,min,secs)
• Property none
• Methods
• getDate (Second, Minutes, Hours, Day, Month,
  Year)
• setDate (Second, Minutes, Hours, Day, Month,
  Year)
• toGMTString() toLocaleSring()
• Ex Date

20
Events

• JavaScript supports an event handling system.
• The browser can execute JavaScript commands when
  some event occurs.
• The value of the command may determine the
  browser action.

21
Events

• onUnLoad
• onLoad
• onClick
• onMouseUp
• onMouseDown
• onDblClick
• onMouseOver

Window events
Button events
Link events
22
Window

• Window object is used to describe a browser
  window or frame. Current window is available
  through the window reference.
• Properties (some) document frames innerHeight
  innerWidth location Math menubar name navigator
  outerHieght outerWidth scrollbars statusbar
  toolbar self parent top
• Methods alert back captureEvents close focus
  handleEvent open prompt setTimeout
• Event Handlers onfocus onerror onload onmove
  ondragdrop onunload onresize
• Example
• Upon clicking the Okay button, the page links
  to another site
• ltSCRIPT LANGUAGE"JavaScript"gt
• lt!-- HIDE FROM OTHER BROWSERS
• alert("After this you will open a new window")
• window.location.href "http//www.comp.polyu.ed
  u.hk/"
• //STOP HIDING FROM OTHER BROWSERS--gt
• lt/SCRIPTgt
• ex

23
Document

• Document object is an attribute of window object
• It has many properties
• anchors applets bgColor fgColor cookie forms
  images lastModified linkColor vlinkColor
  alinkColor links location title referrer URL
• Methods
• clear close open write writeln
• Example document.write() prints the output onto
  the HTML document.
• document.write("My title is" document.title)
• ex

24
Navigator

• Navigator object provides information about the
  browser.
• Properties
• appName appVersion platform plugins userAgent
  mimeType language
• Example
• document.writeln("Browser name "
  navigator.appName)
• document.writeln("Browser version "
  navigator.appVersion)
• document.writeln("Browser platform "
  navigator.platform)
• document.writeln("Browser plugins "
  navigator.plugins)
• Ex

25
Button

• Button object corresponds to form elements
  created via
• ltINPUT TYPE"button" NAME VALUE"
• onClickfunction(this.form)"gt
• Properties form name type value
• Methods click focus blur
• Event Handlers onclick ondbclick onfocus onblur

26
Form

• Form object correspond to elements created with
  the HTML form element
• function callAlert (form)
• alert ("Your name is " form.name1.value)
• ltFORMgt
• ltINPUT TYPE"text" NAME"name1" SIZE 10gt
• ltINPUT TYPE"button" NAME"show"
• VALUE"Show" onClick"callAlert (this.form)"gt
• lt/FORMgt
• Properties action method target
• Methods reset submit
• Event Handlers onreset onsubmit

27
Form

• Form1 uses a function invoked by a button called
  name1
• Form2 uses a function invoked by a button to
  populate the form
• Form3 shows the mail form
• Form4 shows the addition of a list box to the
  mail form
• Form5 uses a function invoked by ONSUBMIT
  return checkFields (form1)

28
Other Objects

• Checkbox
• Radio
• Select
• Text
• Textarea

29
JavaScript Summary

• 1. JavaScript must occur between ltscriptgt and
  lt/scriptgt tags.
• 2. JavaScript is case sensitive.
• myfunction different than MyFunction
• 3. Functions and blocks of statements are
  enclosed in
• 4. JavaScript ignores white space.
• 5. JavaScript array elements are indicated using
  .
• 6. Comments may be /.. . / or //
• 7. HTML comments are used to hide JavaScript from
  nonscript-handling browsers.