1 Lecture #6 Dynamic 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 An Hello World Example document.write(" "); document.writeln("Hello World! "); document.writeln("What a boring example ") Why do we need if we used writeln?

9 Example – Cont.

10 Example 2 An Hello World Example document.write(" "); document.writeln("Hello World! "); document.writeln("What a boring example ") My Hello World Example

11 Example 2 – Cont.

12 Example 3 An Hello World Example document.write(" "); document.writeln("Hello World! "); My Hello World Example document.writeln("What a boring example")

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 –Strings“ Let it be ” –Boolean: true false –Arrays: [1, “ ab ba ”,17.234] –null –undefined Arrays can hold anything!

18 Operators Arithmetic, comparison, assignment, bit wise, Boolean (pretty much just like Java) + - * / % == != > = <= && || ! & | > += -= *= /= %=

19 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” String

20 Which is correct? Which of the following two is correct? What is the ‘type’ of the answer? x = "37" + 7 y = "37" - 7 String, output: 377 Number, output: 30

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 >= b) {...} less than or equal to if (a <= b) {...}

23 Boolean Operators and if (true && true) {…} or if (true || false) {…} not if (! false) {...}

24 Using Variables var firstNumber = 11, secondNumber = 23, sum; sum = firstNumber + secondNumber; document.write(" The sum of " + firstNumber + " and " + secondNumber + " is "); document.write(" " + sum + " ");

25

26 JavaScript Constructs condition (selection) if (condition) {statements if true} else {statements if false} if (metushelahAge < yourAverageAge) { document.write (" its true that Metushelah is younger than most of you,") document.write (" computers never lie! ") }

27 JavaScript Constructs loop (iteration): both for and while loops are available for (var i=0; i < myform.myAge.value.length; i++) { var oneChar=myform.myAge.value.substring (i, i+1) if (oneChar "9") { alert("Please enter a valid number " + oneChar + " is not valid.") }

28 Loops Example for (var counter = 1 ; counter <= 8 ; ++counter) { document.write( “ Now with font size " + counter + " “ ); }

29

30 JavaScript Functions Functions are first class citizens The keyword function used to define a function (subroutine): function add(x,y) { return(x+y); }

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 Functions Example function fibonacciValue() { var value = parseInt(document.fibonacciForm.number.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 ); }

34 Enter a number <INPUT TYPE = "button" VALUE = "Calculate" ONCLICK = "fibonacciValue()" Fibonacci Value

35 Function Arguments Within a function, its arguments can be accessed with arguments[i]. 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 i=1; i<arguments.length; i++) { result += arguments[i] + separator } return result } myConcat(“%","red","orange","blue") red%orange%blue

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() objectName.attributeName objectName.methodName()

38 Objects Are Like Arrays myCar.make = "Ford" myCar.model = "Mustang" myCar.year = 66; myCar[“make”] = "Ford" myCar[“model”] = "Mustang" myCar[“year”] = 66;

39 function show_props(obj, obj_name) { var result = "" for (var i in obj) result += obj_name + "." + i + " = " + obj[i] + "\n" return result } myCar.make = Ford myCar.model = Mustang myCar.year = 66 So, the function call show_props(myCar, "myCar") would return the following:

40 Creating a New Object There are two ways to create new objects: Object Initializer: –objectName={prop1:val1, …, propN:valN} 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 = {make:”Honda”, year:1992, color:"red",wheels:4, engine:{cylinders:4,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 }