Representation and Management of Data on the Web

1
Client Side Programming

• Representation and Management of Data on the Web

2
Client-Server Architecture

• In a client-server architecture, computation is
  done either in the client or in the server
• There are cases where we can choose whether to
  perform the computation in the client or in the
  server
• For example, transforming an XML document using
  XSL
• There are cases where we cannot choose where to
  perform the computation
• For example, accessing a database

3
Strengths and Weaknesses of Server-Side
Computation

• Strengths
• allows access to server files and databases
• makes no assumptions about client computer
  capabilities, puts little burden on it
• easier to manage and control on server
• more secure for client

• Weaknesses
• puts most of processing load on server
• requires round-trip for every submission, using
  valuable bandwidth
• cannot provide instantaneous response expected
  with GUI
• less secure for server

4
Form Validation

• Consider the case where a user is required submit
  her name to a server application
• Where, for example, should we check that the
  inserted value is not an empty string?
• In the client (i.e., the Web browser)?
• In the server?

5
Client Side Technologies

• Javascript
• Developed by Netscape
• Supported by all browsers (although not all
  support the standard)
• Very light (no graphics) and good interaction
  with HTML
• VBScript
• Developed by Microsoft
• Supported only by Microsoft Internet Explorer
• A light version of Microsoft Visual Basic
• Java Applets
• Developed by Sun
• In the past it was supported by all browsers, but
  not any more
• Capable of doing almost anything that Java allows

6
About Applets

• An Applet is a Java application, embedded in a
  Web page
• ltAPPLET CODEAppletClass WIDTHx HEIGHTy/gt
• When a browser loads the Web page, the applet
  byte-code is downloaded to the client box and
  executed by the browser
• Commonly used for games, graphics, etc.

7
(No Transcript)
8
Applets Limitations

• Security Restrictions Applets cannot access
  files in the client computer nor files (or
  databases) behind a firewall
• The Bandwidth Problem Applets are usually large
  in comparison to HTML files, thus , the download
  time becomes unacceptable
• Compatibility
• Client must have a compatible browser
• Thin clients may not support the whole Java API

9
Javascript
10
Overview

• A "scripting" language for HTML pages
• The code is embed in HTML pages
• The browser interprets and executes the script
  (it is not compiled)
• Do not declare data types for variables (loose
  typing)
• Dynamic binding object references checked at
  runtime

11
Overview (cont.)

• Scripts can manipulate "browser objects"
• HTML form elements
• Images
• Frames
• etc.
• For security cannot write to disk (when run on
  a client)

12
Abilities

• Generating HTML content dynamically
• Monitoring and responding to user events
• Validate forms before submission
• Manipulate HTTP cookies
• Interact with the frames and windows of the
  browser
• Customize pages to suit users

13
It is not Java

• Java
• compilation required (not a script)
• can create stand alone application
• object-oriented
• Why is it called Javascript then?

14
Web Architecture for JavaScript
"CLIENT"
"SERVER"
Desktop access
Remote host
Web browser
Web (HTTP) Server
HTML Page ltSCRIPTgt code.. lt/SCRIPTgt
Internet
HTML/HTTP TCP/IP
HTML/HTTP TCP/IP
built-in JavaScript interpreter
HTML pages w/ embedded script
15
Example
Why do we need ltbrgt if we used writeln?

• ltHTMLgt
• ltHEADgtltTITLEgtAn Hello World Examplelt/TITLEgt
• ltSCRIPT LANGUAGE "JavaScript"gt
• document.write("ltfont size'4'gt")
• document.writeln("Hello World!ltbrgt")
• document.writeln("What a boring
  examplelt/fontgt")
• lt/SCRIPTgt
• lt/HEADgt
• ltBODYgt lt!-- An empty document body --gt lt/BODYgt
• lt/HTMLgt

16
(No Transcript)
17
Example

• ltHTMLgt
• ltHEADgtltTITLEgtAn Hello World Examplelt/TITLEgt
• ltSCRIPT LANGUAGE "JavaScript"gt
• document.write("ltfont size'4'gt")
• document.writeln("Hello World!ltbrgt")
• document.writeln("What a boring
  examplelt/fontgt")
• lt/SCRIPTgt
• lt/HEADgt
• ltBODYgt lth1gtMy Hello World Examplelt/h1gt lt/BODYgt
• lt/HTMLgt

18
(No Transcript)
19
Example

• ltHTMLgt
• ltHEADgtltTITLEgtAn Hello World Examplelt/TITLEgt
• ltSCRIPT LANGUAGE "JavaScript"gt
• document.write("ltfont size'4'gt")
• document.writeln("Hello World!ltbrgtlt/fontgt")
• lt/SCRIPTgt
• lt/HEADgt
• ltBODYgt lth1gtMy Hello World Examplelt/h1gt
• ltSCRIPT LANGUAGE "JavaScript"gt
• document.writeln("What a boring example")
• lt/SCRIPTgt
• lt/BODYgt
• lt/HTMLgt

20
Some of Javascript Reserved Keywords

• break
• case
• continue
• delete
• do
• else
• false
• for

• function
• if
• in
• new
• null
• return
• switch
• this

• true
• typeof
• var
• void
• while
• with

21
Non Used Reserved Words

• catch
• class
• const
• debugger
• default
• enum
• export

• extends
• finally
• import
• super
• try

22
Javascript Variables

• Untyped!
• Can be declared with var keyword
• var foo
• Can be created automatically by assigning a
  value
• val 1
• val Thank for all the fish"

val has changed from an int to a String!
23
Variables Names

• A variable name can be any valid identifier
• The identifier is a series of characters
• Consisting of letters (lower and upper case),
  digits, and underscores (_)
• Does not begin with a digit
• Does not contain any space
• Javascript is case sensitive (foo and FOO are
  different)

24
Variables

• Local variable is available only in the function
  where it is declared
• Global variable is available all over the
  document
• A variable declaration
• Inside a function creates a local variable
• Outside a function creates a global variable
• Local variables must be declared with var

25
Literals

• The typical bunch
• Numbers 17 123.45
• Strings Let it be
• Boolean true false
• Arrays 1,ab ba,17.234
• null
• undefined

You can use typeof(A) to get the type of
A number, string, object..
26
Operators

• Arithmetic, comparison, assignment, bit wise,
  Boolean (pretty much just like Java)
• - / --
• ! gt lt gt lt
• ! ltlt gtgt
• - /

27
The Special Plus Command

• Which of the following two is correct?
• What is the type of the answer?

x The answer is 42 y 42 is the answer
28
Which is correct?

• Which of the following two is correct?
• What is the type of the answer?

x "37" 7 y "37" - 7
29
Types of Equality

• The equals checks if both operands are equal
  after performing type conversion
• The equals checks if both operands are of the
  same type and equal
• Example
• Is 3 "3" (true or false?)
• Is 3 "3" (true or false?)

30
Types of Inequality

• The equals ! checks if both operands are unequal
  after performing type conversion
• The equals ! checks if both operands are not of
  the same type and or not equal
• Example
• Is 3 ! "3" (true or false?)
• Is 3 ! "3" (true or false?)

31
Conditional Operators

• equals
• if (a b)
• not equals
• if (a ! b)
• greater than or equal to
• if (a gt b) ...
• less than or equal to
• if (a lt b) ...

32
Boolean Operators

• and
• if (true true)
• or
• if (true false)
• not
• if (! false) ...

33

• ltHTMLgt
• ltHEADgtltTITLEgtUsing Variableslt/TITLEgt
• ltSCRIPT LANGUAGE "JavaScript"gt
• var firstNumber 11,
• secondNumber 23,
• sum
• sum firstNumber secondNumber
• document.write("ltFONT COLOR 'blue' SIZE
  '6'gtThe sum of " firstNumber " and "
  secondNumber " is lt/FONTgt")
• document.write(" ltFONT COLOR red' SIZE
  '7'gt" sum "lt/FONTgt")
• lt/SCRIPTgt
• lt/HEADgt
• ltBODYgt lt!-- An empty document body --gt lt/BODYgt
• lt/HTMLgt

34
(No Transcript)
35
Control Structures

• Some just like Java
• if if-else ? switch
• for while do-while
• And a few not like in Java
• for (var in object)
• with (object)

36
JavaScript Constructs

• sequence (block)
• executes with no conditions
• semicolons optional using one statement per line,
  but not a bad thing to use all the time
• var metushelahAge 130 var yourAverageAge
• yourAverageAge metushelahAge - 98
• var myObject new Object("initial value")
• more statements here..
• ..

37
JavaScript Constructs

• condition (selection)
• if (condition) statements if true
• else statements if false
• if (metushelahAge lt yourAverageAge)
• document.write ("ltbodygtlth2gtits true that
• Metushelah is younger than most of you,")
• document.write ("ltbrgtcomputers never lie!lt/h2gt
  
• lt/bodygt")

38
JavaScript Constructs

• loop (iteration) both for and while loops are
  available
• for (var i0 i lt inputAge.length i)
• var oneChar inputAge.substring (i, i1)
• if (oneChar lt "0" oneChar gt "9")
• alert("Please enter a valid number
• oneChar " is not valid.")

39

• ltHTMLgt
• ltHEADgtltTITLEgtLoops Examplelt/TITLEgt
• ltSCRIPT LANGUAGE "JavaScript"gt
• for (var counter 1 counter lt 8 counter)
  
• document.write(ltPgtltFONT COLOR blue SIZE
  counter 'gt Now with font size " counter
  " lt/FONTgtlt/Pgt )
• lt/SCRIPTgt
• lt/HEADgt
• ltBODYgt lt!-- An empty document body --gt lt/BODYgt
• lt/HTMLgt

40
(No Transcript)
41
JavaScript Functions

• Functions are first class citizens
• The keyword function used to define a function
  (subroutine)
• function add(x,y)
• return(xy)

42
Function Input and Outout

• Numbers and Boolean values always passed to
  functions using call-by-value
• For objects, a call-by-reference is used to pass
  them to the functions
• Numbers and Boolean values are always returned by
  value
• Objects returned by reference

43
Example

• The next example uses functions to computing the
  Fibonacci numbers
• Note the use of recursion
• Be careful, some browsers may not deal well with
  very big numbers in the input (i.e., too many
  recursive calls)

44
(No Transcript)
45

• ltHTMLgt
• ltHEADgtltTITLEgtFunctions Examplelt/TITLEgt
• ltSCRIPT LANGUAGE "JavaScript"gt
• function fibonacciValue()
• var value parseInt(document.fibonacciForm.nu
  mber.value )
• window.status "Calculating Fibonacci number
  for " value
• document.fibonacciForm.result.value
  fibonacci(value)
• window.status "Done Calculating Fibonacci
  number"
• function fibonacci( n )
• if (n 0 n 1) return n
• else return fibonacci( n - 1 ) fibonacci( n
  - 2 )
• lt/SCRIPTgtlt/HEADgt

46

• ltBODYgt
• ltFORM NAME "fibonacciForm"gt
• ltTABLE BORDER "1" BGCOLOR fabbfc"gt
• ltTRgtltTD BGCOLOR eabbfc"gtEnter a numberlt/TDgt
• ltTDgtltINPUT NAME "number" TYPE
  "text"gtlt/TDgt
• ltTDgtltINPUT TYPE "button" VALUE
  "Calculate"
• ONCLICK "fibonacciValue()"lt/TR
  gt
• ltTRgtltTD BGCOLOR fabbfc"gtFibonacci Valuelt/TDgt
• ltTDgtltINPUT NAME "result" TYPE "text"gt
  lt/TDgt lt/TRgt
• lt/TABLEgt
• lt/FORMgt
• lt/BODYgt
• lt/HTMLgt

47
Function Arguments

• Within a function, its arguments can be accessed
  with argumentsi.
• The number of arguments is arguments.length
• A function can be created that takes any number
  of arguments

48
Example

• function myConcat(separator)    result"" //
  initialize list   // iterate through
  arguments   for (var i1 iltarguments.length
  i)       result argumentsi
  separator      return result
• //What does this return?
• myConcat(", ","red","orange","blue")

49
Global Functions

• Javascript include several predefined functions
  that you can use
• For example,
• eval(code-string) gets a string of JavaScript
  code, evaluates it and executes it
• It allows dynamic code execution
• parseInt(string) takes a string argument and
  converts its beginning to an integer number (or
  return NaN)

50
Objects

• Objects have attributes and methods
• There are pre-defined objects and user-defined
  object types
• Using objects has similarity to the syntax of
  C/Java

objectName.attributeName objectName.methodName()
51
Objects Are Like Arrays
myCar.make "Ford" myCar.model
"Mustang" myCar.year 66

• myCarmake "Ford"
• myCarmodel "Mustang"
• myCaryear 66

52
function show_props(obj, obj_name) var
result "" for (var i in obj) result
obj_name "." i " " obji "\n"
return result
So, the function call show_props(myCar,
"myCar") would return the following
myCar.make Ford myCar.model
Mustang myCar.year 66
53
Creating a New Object

• There are two ways to create new objects
• Object Initializer
• objectNameprop1val1, , propNvalN
• Constructor Function
• define a constructor function
• create the new object using new

54
Example
function car(make, model, year) this.make
make this.model model this.year year
theMazda new car(Mazda", 323", 1991) theHonda
makeHonda, year1992,
color"red",wheels4, enginecylinders4,size
2.2
55
Creating a Method

• A method of an object is a function that has been
  assigned to the object

object.methodName functionName
56
Example
function displayCar() var result "A
Beautiful " this.year " " this.make "
" this.model document.writeln(result)
function car(make, model, year) this.make
make this.model model this.year year
this.displayCar displayCar
57
Eval Example
function stone(str) eval("this."str)
this.y43 this"z" 44 flint new
stone("x42") document.write("ltBRgtflint.x is "
flint.x) document.write("ltBRgtflint.y is "
flint.y) document.write("ltBRgtflint.z is "
flint.z)
58
Deleting an Object

• To delete an object just set the object reference
  to null
• When are objects that are not set to null being
  removed?

59
Array Objects

• Arrays are supported as objects
• Attribute length
• Methods include
• concat, join, pop, push, reverse, sort

60
Creating a New Array

• var a red, blue, green
• Allocates an array of 3 cells and initializes the
  values
• var b new Array(5)
• Allocates an array of 5 cells without
  initializing values
• var c new Array()
• Creates a new empty array

61
Array Example Code
var a 8,7,6,5 for (i0ilta.lengthi) ai
2 b a.reverse()
62
Understanding Arrays

• Array literals
• arr1 "hello", 1, 33
• Accessing arrays (what is the result of)
• document.writeln(arr1.length)
• document.writeln(arr10)
• document.writeln(arr1"abc")
• arr11066
• document.writeln(arr1.length)

63
Passing Arrays to Functions

• Arrays can be passed to functions as arguments
• The array is passed by call-by-reference
• The name of the array is given to the function

64

• ltHTMLgtltHEADgtltTITLEgtArrays Examplelt/TITLEgt
• ltSCRIPT LANGUAGE "JavaScript"gt
• function start()
• var colors "red", "blue", "green"
• printArray(colors)
• printArray(colors)
• function printArray( arr)
• for (var i in arr)
• document.writeln("ltFONT SIZE5 COLOR"
  arri "gt"
• arri " lt/FONTgtltBRgt")
• arri "gray"
• lt/SCRIPTgt
• lt/HEADgtltBODY ONLOAD "start()"gt lt/BODYgtlt/HTMLgt

65
(No Transcript)
66
Multidimentional Arrays

• var matrix 0, 1, 1, 1, 1, 0, 0, 0, 0
• var myArray 1, 2, 3, 1, 1, 2
• Going over the array
• for (var i in myArray )
• for (var j in myArrayi)
• document.write(myArrayij)

67
Other Object Types

• String manipulation methods
• Math trig, log, random numbers
• Date date conversions
• RegExp regular expressions
• Number limits, conversion to string

68
Math Common Methods

• abs(x)
• round(x)
• ceil(x)
• floor(x)
• max(x, y)
• min(x, y)

• cos(x)
• sin(x)
• tan(x)
• exp(x)
• pow(x, y)
• sqrt(x)
• log(x)

Math Also includes constants such as Math.E,
Math.PI
69
String Common Methods

• charAt (index)
• charCodeAt(index)
• concat(string)
• fromCharCode(value1, value2, )
• indexOf(substring, index)
• lastIndexOf(substring, index)

• slice(start, end)
• split(string)
• substr(start, length)
• substring(start, end)
• toLowerCase()
• toUpperCase()
• toString()
• valueOf()

70
Date Common Methods

• getDate(), getFullYear(), getMonth(), getDay
• getTime(), getHours(), getMinutes(),
  getSeconds(), getMilliseconds()

71

• ltHTMLgt
• ltHEADgtltTITLEgtTime Examplelt/TITLEgt
• ltSCRIPT LANGUAGE "JavaScript"gt
• function getTimes()
• var current new Date()
• var out "Day " current.getDay()"\n"
• out out.concat("Month "
  current.getMonth() "\n")
• out out.concat("Year "
  current.getFullYear() "\n")
• out out.concat("GMT Time "
  current.toUTCString() "\n")
• out out.concat("Time "
  current.toString() "\n")
• document.timesForm.output.value out
• lt/SCRIPTgt
• lt/HEADgt

72

• ltBODYgt
• ltFORM NAME"timesForm"gt
• ltPgt
• ltINPUT NAME "getTimeButton" TYPE "button"
  VALUE "Get Time" ONCLICK "getTimes()"gt
• ltPgt
• ltTEXTAREA NAME "output" ROWS "10" COLS"42"gt
• lt/TEXTAREAgt
• lt/FORMgt
• lt/BODYgt
• lt/HTMLgt

73
(No Transcript)
74
Predefined Objects

• In JavaScript the following objects are
  automatically created for you (always available)
• document
• navigator
• screen
• window

75
The document Object

• Many attributes of the current document are
  available via the document object
• title cookie
• URL images
• forms links
• (fg/bg)Color forms
• and more

76
Objects Hierarchy

• JavaScript objects include object hierarchy
  (property or method)
• window.document.lastModified
• window.document.clear()
• need not be fully qualified
• document.lastModified
• proceeds from most to least general
• window.document.forms0.inputText1.value
• all names are case sensitive

77
Objects ? Object Oriented

• Objects complex data types or containers that
  have both data and code
• Methods code or functions that work on an
  objects properties
• Properties data that are stored and retrieved
  via object references
• This is not true "OO" because the object
  hierarchy is not extensible, you can create new
  objects, but cannot extend existing ones

78
The with Statement

• Establishes the default object for a set of
  statements
• Within the set of statements, any property
  references that do not specify an object are
  assumed to be for the default object

79
Example of with

• var a, x, y
• var r10
• with (Math)    a PI r r   x r
  cos(PI)   y r sin(PI/2)

80
Dynamic HTML
Java Script
Java Script
HTML
CSS
HTML
HTML
CSS
HTML