Javascript II

1
Javascript II
2
The JavaScript Object Model

• JavaScript is a very simple object-oriented
  language.
• Objects are entities which have properties and
  methods attached to them.
• Properties themselves can be other objects
  (within a complicated hierarchy).
• At the bottom level a property eventually becomes
  a simple variable.

3
The JavaScript Object Model

• Up till now
• JavaScript used to illustrate basic programming
  concepts
• JavaScript can also
• Manipulate every element of an HTML document from
  a script
• This lecture
• Provide more formal treatment of objects
• Overview and serve as reference for
• Several of JavaScripts built-in objects
• Demonstrates their capabilities

4
Format of JavaScript objects

• All objects have the same syntax
• objectName.propertyName
• Methods perform specific functions on an object
• objectName.method()

5
Object Oriented Paradigm Classes Objects

• Two distinct objects of class Person
• Possess
• Unique IDENTITY
• STATE (possibly same)
• Operations (functions)

age 28 sex
male first_name thomas surname jones
celebrate_birthday got_married
age 24 sex
male first_name peter surname
smith celebrate_birthday got_married
6
Object Oriented Paradigm Operations
with new state
7
Thinking About Objects

• JavaScript - object-based programming language
• Objects
• Two categories
• Animate
• Inanimate
• Attributes
• Behaviors
• Encapsulate data and methods
• Property Information hiding
• Communicate with programs through interfaces
• Most future software will be built by combining
  objects

8
Thinking About Objects (II)

• JavaScript uses objects to
• Interact with elements (or objects) of an HTML
  document
• window object
• Enables script to manipulate browser window
• window.status
• window.alert
• document object
• Provides access to every element of an HTML
  document
• Encapsulate various capabilities in a script
• array object
• Enables script to manipulate a collection of data

9
Pre-defined objects

• The table on the following slide gives a list of
  pre-defined JavaScript objects.
• These relate to HTML elements.
• They provide JavaScript with access to the basic
  HTML building blocks.
• Each object has a set of properties and methods
  associated with it.

10
Pre-defined objects
11
Example - setting properties

• lth1gtColour Examplelt/h1gt
• ltscript language "JavaScript"gt
• lt!-- Hide JavaScript from old browsers
• document.bgColor "Green"
• document.fgColor "Yellow"
• //--gt
• lt/scriptgt
• ltpgtThis text will be yellow on green!lt/pgt

12
Demonstration colour.htm
13
Defining custom objects

• JavaScript allows you to define your own custom
  objects.
• You can then define properties and methods for
  them.
• This will be covered in any good book on
  JavaScript (see resources) and the next lecture.

14
JavaScript Events

• JavaScript applications are generally
  "event-driven".
• Events occur as a result of an action performed
  by the user.
• JavaScript code can be written to recognise and
  process such events.
• Usually they are related to HTML forms.

15
Event Handlers Supported
16
Event Handling

• Events are linked to JavaScript code using the
  following syntax
• ltELEMENT eventHandler "JavaScript code"gt
• JavaScript code can be embedded directly within
  the " ".
• Typically the JavaScript code calls a function
  defined in the header section.

17
Example - colour swapping

• The swap function is defined in the ltheadgt
  section
• function swap(colour)
• if (colour "Green")
• document.bgColor "Green"
• else
• document.bgColor "Yellow"

18
Calling the swap function

• ltbodygt
• lth1gtColour Swapping Examplelt/h1gt
• ltformgt
• ltinput type "button" value"green"
  onClick"swap('Green')"gt
• ltinput type "button" value"yellow"
  onClick"swap('Yellow')"gt
• lt/formgt
• lt/bodygt

19
Demonstration swap.htm
20
Updating the form

• You may wish to update your form within a
  JavaScript function.
• If so you must pass the current form as a
  parameter to the function.
• To do this use this.form.
• The form value can then be updated using
• myForm.result.value .

21
Counting Function Example

• The count function is defined in the ltheadgt
  section
• function count(myForm)
• myForm.result.value

22
Calling the count function

• lth1gtCounting Examplelt/h1gt
• ltformgt
• ltinput type "text" name "result"
  value"0"gt
• ltinput type "button" value "Count" onClick
  "count(this.form)"gt
• lt/formgt

23
Demonstration count.htm
24
JavaScript Calculator

• The JavaScript calculator is an example of what
  can be achieved with basic JavaScript.
• It demonstrates the use of JavaScript functions
  interacting with HTML forms.

25
Demonstration jscalc.htm
26
Math Object

• Math.E
• Eulers constant. Approximately 2.718.
• Math.LN2
• Natural logarithm of 2. Approximately 0.693.
• Math.LN10
• Natural logarithm of 10. Approximately 2.302.
• Math.LOG2E
• Base 2 logarithm of Eulers constant. Approximatel
  y 1.442.
• Math.LOG10E
• Base 10 logarithm of Eulers constant. Approximate
  ly 0.434.
• Math.PI
• PI - ratio of circles circumference to its
  diameter. Approximately 3.141592653589793.
• Math.SQRT1_2
• Square root of 0.5. Approximately 0.707.
• Math.SQRT2 Square root of 2.0.
• Approximately 1.414.

27
Math Object

• abs( x )
• absolute value of x abs( -3.67 ) is 3.67
• ceil( x )
• rounds x to the next highest integer ceil( 9.2 )
  is 10.0
• cos( x )
• trigonometric cosine of x (x in radians) cos( 0.0
  ) is 1.0
• floor( x )
• rounds x to the next lowest integer floor( -9.8 )
  is -10.0
• log( x )
• natural logarithm of x (base e) log( 2.718282 )
  is 1.0

28
Math Object

• max( x, y )
• larger value of x and y max( 2.3, 12.7 ) is
  12.7max( -2.3, -12.7 ) is -2.3
• min( x, y )
• smaller value of x and y min( 2.3, 12.7 ) is
  2.3min( -2.3, -12.7 ) is -12.7
• pow( x, y )
• x raised to power y (xy) pow( 2.0, 7.0 ) is
  128.0pow( 9.0, .5 ) is 3.0
• round( x )
• rounds x to the closest integer round( 9.75 ) is
  10round( 9.25 ) is 9
• sin( x )
• trigonometric sine of x (x in radians) sin( 0.0 )
  is 0.0
• sqrt( x )
• square root of x sqrt( 900.0 ) is 30.0sqrt( 9.0 )
  is 3.0
• tan( x )
• trigonometric tangent of x (x in radians) tan(
  0.0 ) is 0.0

29
String Object

• String Object
• JavaScripts string and character processing
  capabilities
• Appropriate for developing
• Text editors
• Word processors
• Page layout software
• Computerized typesetting systems
• Other kinds of text-processing software

30
Fundamentals of Characters and Strings

• Characters
• Fundamental building blocks of JavaScript
  programs
• String
• Series of Characters treated as a single unit
• May include
• Letters
• Digits
• Special Characters
• , _, /, , etc.

31
Fundamentals of Characters and Strings

• String literals / string constant
• Written as sequence of characters in single or
  double quotation marks
• Strings may be assigned to variables in
  declarations
• var color blue
• Strings may be compared with
• Relational operators
• Equality operators

32
Methods of the String Object

• String object
• Encapsulates the attributes and behaviors of a
  string of characters
• Format for calling methods (except in certain
  cases)
• stringName.methodName( )
• Provides methods for
• Selecting characters from a string
• Combining strings (concatenation)
• Obtaining substrings of a string
• Searching for substrings within a string
• Tokenizing a string
• Converting strings to all uppercase or lowercase
• Generate HTML tags

33
Methods of the String Object

• concat( string )
• slice( start, end )
• substr( start, length )
• toString()
• valueOf()
• charAt( index )
• charCodeAt( index )
• fromCharCode( value1, value2, )
• toLowerCase()
• toUpperCase()
• indexOf( substring, index )
• lastIndexOf( substring, index
• split( string )
• substring( start, end )

34
Methods of the String Object

• lt?xml version "1.0"?gt
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
  "gt
• lt!-- Markup functions --gt
• lthtml xmlns "http//www.w3.org/1999/xhtml"gt
• ltHTMLgt
• ltHEADgt
• ltTITLEgtString Objectlt/TITLEgt
• ltSCRIPT LANGUAGE "JavaScript"gt
• var mystring "web engineering"
• document.writeln( "ltPgtCharacter at index 7 in '"
  mystring "' is " mystring.charAt( 7 ) )
• document.writeln("ltBRgt'"mystring"' in uppercase
  is '" mystring.toUpperCase() "'lt/Pgt")
• lt/SCRIPTgt
• lt/HEADgtltBODYgtlt/BODYgt
• lt/HTMLgt

35
HTML Markup Methods

• anchor( name )
• Wraps source string in anchor element ltAgtlt/Agt
  with name as anchor name.
• big()
• Wraps source string in a ltBIGgtlt/BIGgt element.
• blink()
• Wraps source string in a ltBLINKgtlt/BLINKgt element.
• bold()
• Wraps source string in a ltBgtlt/Bgt element.
• fixed()
• Wraps source string in a ltTTgtlt/TTgt element.
• fontcolor( color )
• Wraps source string in a ltFONTgtlt/FONTgt element
  with color as the font color.
• fontsize( size )
• Wraps source string in a ltFONTgtlt/FONTgt element
  with size as HTML font size.

36
HTML Markup Methods

• italics()
• Wraps source string in an ltIgtlt/Igt element.
• link( url )
• Wraps source string in an ltAgtlt/Agt with url as the
  hyperlink location.
• small()
• Wraps source string in a ltSMALLgtlt/SMALLgt element.
• strike()
• Wraps source string in a ltSTRIKEgtlt/STRIKEgt
  element.
• sub()
• Wraps source string in a ltSUBgtlt/SUBgt element.
• sup()
• Wraps source string in a ltSUPgtlt/SUPgt element.

37
HTML Markup Methods

• lt?xml version "1.0"?gt
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
  "gt
• lt!-- Markup functions --gt
• lthtml xmlns "http//www.w3.org/1999/xhtml"gt
• ltHTMLgtltHEADgt
• ltTITLEgtHTML Markup Methods of the String
  Objectlt/TITLEgt
• ltSCRIPT LANGUAGE "JavaScript"gt
• var strikeText "strike a light guvnor!"
• document.writeln( "ltBRgt" strikeText.strike() )
  
• lt/SCRIPTgt
• lt/HEADgtltBODYgtlt/BODYgt
• lt/HTMLgt

38
Date Object

• JavaScripts Date object
• Provides methods for date and time manipulation
• Date and time processing can be performed based
  on
• Local time zone
• Universal Coordinated Time (UTC) /
• Greenwich Mean Time (GMT)
• Most methods in Date object have local time zone
  and UTC versions
• When using Date object
• Initialize Date object with current date and time
• var current new Date()
• Allocates memory for object, calls Date object
  constructor (initializer method for an object)

39
Date Object

• New Date object creation
• new Date( year, month, date, hours, minutes,
  seconds, milliseconds )
• Hours, minutes, seconds and milliseconds are
  optional
• If argument to the right is specified, all
  arguments to the left must also be specified
• Month represented internally as integers from
  0-11
• Therefore, March is indicated by 2, November by
  10, etc.
• Write out years in 4-digit form (i.e. 2000, not
  00)
• Avoid potential Y2K problems

40
Date Object

• lt?xml version "1.0"?gt
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
  "gt
• lthtml xmlns "http//www.w3.org/1999/xhtml"gt
• ltHTMLgtltHEADgtltTITLEgtDate Objectlt/TITLEgt
• ltSCRIPT LANGUAGE "JavaScript"gt
• var mydate new Date()
• document.writeln( "getDate " mydate.getDate()
  
• "ltBRgtgetDay " mydate.getDay()
• "ltBRgtgetMonth " mydate.getMonth()
• "ltBRgtgetFullYear " mydate.getFullYear()
• "ltBRgtgetMilliseconds " mydate.getMilliseconds()
  
• mydate.getTimezoneOffset() )
• mydate.setFullYear( 1066 )
• document.writeln( "ltBRgtAfter the 'set' function
  " mydate )
• lt/SCRIPTgtlt/HEADgtltBODYgtlt/BODYgtlt/HTMLgt