Lecture

1
Lecture 6Dynamic Web Documents

• HAIT
• Summer 2005
• Shimrit Tzur-David

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
• There are cases where we cannot choose where to
  perform the computation
• For example, accessing a database

3
Form Validation

• Consider the case where a user is required submit
  his 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?

4
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
• 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

5
JavaScript 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

6
Overview Cont.

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

7
Abilities

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

8
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

9
Example Cont.
10
Example 2

• 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

11
Example 2 Cont.
12
Example 3

• 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

13
Example 3 Cont.
14
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!
15
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)

16
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

17
Literals

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

18
Operators

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

19
The Special Plus Command

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

String
x The answer is 42 y 42 is the answer
20
Which is correct?

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

String, output 377
Number, output 30
x "37" 7 y "37" - 7
21
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?)

true
false
22
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) ...

23
Boolean Operators

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

24

• 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

25
(No Transcript)
26
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")

27
JavaScript Constructs

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

28

• 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

29
(No Transcript)
30
JavaScript Functions

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

31
Function Input and Output

• 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

32
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)

33

• 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

34

• 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

35
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

36
Example

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

redorangeblue
37
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()
38
Objects Are Like Arrays
myCar.make "Ford" myCar.model
"Mustang" myCar.year 66
myCarmake "Ford" myCarmodel
"Mustang" myCaryear 66
39
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
40
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

41
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
42
Creating a Method

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

object.methodName functionName
43
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