1 Representation and Management of Data on the Web Client Side Programming.

1

Representation and Management

of Data on the Web

Client Side ProgrammingClient Side Programming

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<APPLET CODE=“AppletClass” WIDTH=x HEIGHT=y/>

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

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

JavascriptJavascript

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?

Web browser

HTML Page:

<SCRIPT>

…code..…

</SCRIPT>

Desktop access

InternetHTML/HTTP

TCP/IP

HTML/HTTP

TCP/IP

Web

(HTTP)

Server

HTML

pages w/

embedded

script

Remote host

built-in

JavaScript

interpreter

Web Architecture for JavaScript"CLIENT" "SERVER"

15

Example

<HTML>

<HEAD><TITLE>An Hello World Example</TITLE>

<SCRIPT LANGUAGE = "JavaScript">

document.write("<font size='+4'>");

document.writeln("Hello World!<br>");

document.writeln("What a boring example</font>")

</SCRIPT>

</HEAD>

<BODY>  </BODY>

</HTML>

Why do we need <br> if we used writeln?

17

Example

<HTML>




document.writeln("Hello World!<br>");

document.writeln("What a boring example</font>")

</SCRIPT>

</HEAD>

<BODY> <h1>My Hello World Example</h1> </BODY>

</HTML>

19

Example <HTML>




document.writeln("Hello World!<br></font>");

</SCRIPT>

</HEAD>

<BODY> <h1>My Hello World Example</h1>


document.writeln("What a boring example")

</SCRIPT>

</BODY>

</HTML>

What will happen?

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

– undefinedArrays can hold anything!

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)

+ - * / % ++ --

== != > < >= <=

&& || ! & | << >>

+= -= *= /= %=

27

The Special Plus Command

• Which of the following two is correct?

• What is the ‘type’ of the answer?

x = “The answer is” + 42y = 42 + “is the answer”

28

Which is correct?

• Which of the following two is correct?

• What is the ‘type’ of the answer?

x = "37" + 7y = "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?)

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) {...}

Boolean Operators

• and

if (true && true) {…}

• or

if (true || false) {…}

• not

if (! false) {...}

33

<HTML>

<HEAD><TITLE>Using Variables</TITLE>


var firstNumber = 11,

secondNumber = 23,

sum;

sum = firstNumber + secondNumber;

document.write("<FONT COLOR = 'blue' SIZE = '6'>The sum of

" + firstNumber + " and " + secondNumber + " is </FONT>");

document.write(" <FONT COLOR = ‘red' SIZE = '7'>" + sum +

"</FONT>");

</SCRIPT>

</HEAD>


</HTML>

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)

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..

…..


• condition (selection)if (condition) {statements if true}

else {statements if false}

if (metushelahAge < yourAverageAge) {

document.write ("<body><h2>its true that

Metushelah is younger than most of you,")

document.write ("<br>computers never lie!</h2>

</body>")

}


• loop (iteration): both for and while loops are

available

for (var i=0; i < inputAge.length; i++) {

var oneChar = inputAge.substring (i, i+1)

if (oneChar < "0" || oneChar > "9") {

alert("Please enter a valid number “

+ oneChar + " is not valid.")

}

}

39

<HTML>

<HEAD><TITLE>Loops Example</TITLE>


for (var counter = 1 ; counter <= 8 ; ++counter) {

document.write(“<P><FONT COLOR = ‘blue’ SIZE = ‘ “ +

counter + “ '> Now with font size " + counter + "

</FONT></P> “);

}

</SCRIPT>

</HEAD>


</HTML>

41

JavaScript Functions

• Functions are first class citizens

• The keyword function used to define a

function (subroutine):

function add(x,y) {

return(x+y);

}

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)

45

<HTML>

<HEAD><TITLE>Functions Example</TITLE>


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

}

</SCRIPT></HEAD>

46

<BODY>

<FORM NAME = "fibonacciForm">

<TABLE BORDER = "1" BGCOLOR = “fabbfc">

<TR><TD BGCOLOR = “eabbfc">Enter a number</TD>

<TD><INPUT NAME = "number" TYPE = "text"></TD>

<TD><INPUT TYPE = "button" VALUE = "Calculate"

ONCLICK = "fibonacciValue()"</TR>

<TR><TD BGCOLOR = “fabbfc">Fibonacci Value</TD>

<TD><INPUT NAME = "result" TYPE = "text"> </TD> </TR>

</TABLE>

</FORM>

</BODY>

</HTML>

47

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

48

Example

function myConcat(separator) {

result="" // initialize list

// iterate through arguments

for (var i=1; i<arguments.length; i++) {

result += arguments[i] + 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()

objectName.attributeName

objectName.methodName()

51

Objects Are Like Arrays

myCar.make = "Ford"myCar.model = "Mustang"myCar.year = 66;

myCar[“make”] = "Ford"

myCar[“model”] = "Mustang"

myCar[“year”] = 66;

52

function show_props(obj, obj_name) { var result = "" for (var i in obj) result += obj_name + "." + i +

" = " + obj[i] + "\n" return result}

myCar.make = FordmyCar.model = MustangmyCar.year = 66

So, the function call show_props(myCar, "myCar")would return the following:

53

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

54

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}}

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}

Setting the method

57

Eval Example

function stone(str) { eval("this."+str) this.y=43 this["z"] = 44}

flint = new stone("x=42")

document.write("<BR>flint.x is " + flint.x)document.write("<BR>flint.y is " + flint.y)document.write("<BR>flint.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 (i=0;i<a.length;i++)

a[i] += 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(arr1[0])

– document.writeln(arr1["abc"])

– arr1[10]=66

– 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

<HTML><HEAD><TITLE>Arrays Example</TITLE>


function start() {

var colors = ["red", "blue", "green"]

printArray(colors);

printArray(colors);

}

function printArray( arr) {

for (var i in arr) {

document.writeln("<FONT SIZE=5 COLOR=" + arr[i] + ">"

+ arr[i] + " </FONT><BR>");

arr[i] = "gray";

}

} </SCRIPT>

</HEAD><BODY ONLOAD = "start()"> </BODY></HTML>

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 myArray[i])

document.write(myArray[i][j]);

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

<HTML>

<HEAD><TITLE>Time Example</TITLE>


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;

}

</SCRIPT>

</HEAD>

72

<BODY>

<FORM NAME="timesForm">

<P>

<INPUT NAME = "getTimeButton" TYPE = "button"

VALUE = "Get Time" ONCLICK = "getTimes()">

<P>

<TEXTAREA NAME = "output" ROWS ="10" COLS="42">

</TEXTAREA>

</FORM>

</BODY>

</HTML>

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.forms[0].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

object’s 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 r=10

with (Math) {

a = PI * r * r

x = r * cos(PI)

y = r * sin(PI/2)

}

80

Dynamic HTML

HTML

CSSJava Script

HTML HTML

Dynamic HTML

HTML

CSS

Java Script

1 Representation and Management of Data on the Web Client Side Programming.

Documents

Transcript of 1 Representation and Management of Data on the Web Client Side Programming.