View
217
Download
4
Embed Size (px)
Citation preview
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.
7
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> <!-- An empty document body --> </BODY>
</HTML>
Why do we need <br> if we used writeln?
16
17
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> <h1>My Hello World Example</h1> </BODY>
</HTML>
18
19
Example <HTML>
<HEAD><TITLE>An Hello World Example</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
document.write("<font size='+4'>");
document.writeln("Hello World!<br></font>");
</SCRIPT>
</HEAD>
<BODY> <h1>My Hello World Example</h1>
<SCRIPT LANGUAGE = "JavaScript">
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>
<SCRIPT LANGUAGE = "JavaScript">
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>
<BODY> <!-- An empty document body --> </BODY>
</HTML>
34
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..
…..
JavaScript Constructs
• 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>")
}
JavaScript Constructs
• 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>
<SCRIPT LANGUAGE = "JavaScript">
for (var counter = 1 ; counter <= 8 ; ++counter) {
document.write(“<P><FONT COLOR = ‘blue’ SIZE = ‘ “ +
counter + “ '> Now with font size " + counter + "
</FONT></P> “);
}
</SCRIPT>
</HEAD>
<BODY> <!-- An empty document body --> </BODY>
</HTML>
40
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)
44
45
<HTML>
<HEAD><TITLE>Functions Example</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
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>
<SCRIPT LANGUAGE = "JavaScript">
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>
65
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>
<SCRIPT LANGUAGE = "JavaScript">
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>
73
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