1 browser scripting javascript. 2 introduction 3 client-server architecture in a client-server...
Post on 21-Dec-2015
231 Views
Preview:
TRANSCRIPT
1
Browser ScriptingBrowser Scripting
JavaScript
2
IntroductionIntroduction
3
Client-Server ArchitectureClient-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, validating forms
• There are cases where we cannot choose where to
perform the computation
- For example, accessing a database
4
Client Side TechnologiesClient Side Technologies
• JavaScript
- Developed by Netscape, standardized by ECMA
- Supported by all browsers (although not all support the standard)
• VBScript
- Developed by Microsoft
- Supported only by Microsoft Internet Explorer
- A light version of Microsoft Visual Basic
• Java Applets
- Developed by Sun
5
About AppletsAbout Applets
• An applet is a Java class that runs in a frame that is
embedded in a Web page
<object type="application/x-java-applet"
classid="myApplet.class" width="x" height="y">
• When a browser loads the Web page, the applet byte-
code (.class file) is downloaded to the client box and
executed by the browser
• Commonly used for games, graphics, etc.
6
7
Browser ScriptingBrowser Scripting
• Browser scripts are procedural programs
embedded inside HTML
<script type="text/javascript">script</script>
<script type="text/vbscript">script</script>
• Can read and manipulate HTML elements, CSS properties, and the browser itself
Web browser
HTML Page:
<SCRIPT>
…code..…
</SCRIPT>
InternetHTML/HTTP
TCP/IP
HTML/HTTP
TCP/IP
Web
(HTTP)
Server
HTML
pages with
embedded
script
built-in
Script
interpreter
Web Architecture for ScriptsWeb Architecture for Scripts
Client Server
9
Why are Scripts Needed?Why are Scripts Needed?
• Generating HTML content dynamically
• Monitoring and responding to user events
• Validating forms before submission
• Manipulating HTTP cookies
• Interaction among the frames and windows of
the browser
10
JavaScript HistoryJavaScript History
• Introduced in Netscape 2 (1996)
• Standardized by ECMA under the name
ECMAScript (1997-1999)
• The latest version is ECMAScript 3, and it is
equivalent to JavaScript 1.5
11
JavaScript BasicsJavaScript Basics
12
JavaScript is NOT Java!JavaScript is NOT Java!
• JavaScript is not compiled
• JavaScript is typically executed by Web
browsers and not as stand-alone applications
• JavaScript and Java have some similarity in
syntax
• The choice of the name is mainly for historical
reasons
13
Dynamic HTML Content: Dynamic HTML Content: Example 1Example 1
<html>
<head><title>JS Example</title></head> <body>
<h2>Before the script</h2>
<script type="text/javascript">
document.write('<h1>In the script<\/h1>')
</script>
<h2>After the script</h2>
</body></html>
14
15
Dynamic HTML Content: Dynamic HTML Content: Example 2Example 2
<html>
<head><title>JS Example</title></head><body>
<h2>Before the script</h2><h1>
<script type="text/javascript">
document.write(new Date().toLocaleString())
</script>
</h1><h2>After the script</h2>
</body></html>
16
Dynamic HTML Content: Dynamic HTML Content: Example 3Example 3
<h2>Hello and
<i><script type="text/javascript">
hours = new Date().getHours();
if (hours < 10) { document.write("good morning") }
else {document.write("good day") }
</script></i>.
</h2>
17
Basic ConstructsBasic Constructs
• Statement blocks
- Semicolon (;) is optional at end of line
var x=5document.write(x);
var x=5, y=7;document.write(x+y);
if (condition) {statements if true}else {statements if false}
• Conditions: if, if-else, ?:, switch
x= (y>0)? y:0
• Loops: for, while, do-whilewhile (condition) {statements}
18
VariablesVariables
• JavaScript variables are not typed! (but values are)
- var x = 5; x="abcd";...
• Thus, the value of a variable is characterized by both
value and type
• Variables are declared with var keyword:
- var x; var y=5;
• A variable name consists of letters, digits, and
underscores (_), and does not begin with a digit
19
Data TypesData Types
• Values have one the following types:
- number: 5, 2.3, 0xFF, 6.67e-11
- object: new Date()
• Arrays: [1,"ab ba",17.234]
• null
- string: "Hello World"
- boolean: true, false
- undefined: no value assigned...You can use typeof(x)
to get the type of x:number, string, object...
20
Some of the Reserved WordsSome of the Reserved Words
abstractas
breakcasecatchclassconst
continuedefault delete
doin
instanceofinterface
isnamespace
newnull
packageprivate
publicreturnelse
export extends
falsefinal
finallyfor
function
ifimplements
import staticsuperswitch
thisthrowtruetry
typeofusevar
void whilewith
21
OperatorsOperators
• Arithmetic: + ++ - -- * / %
• Comparison: == != === !== > >= < <=
• Logical: & && | || !
• Bitwise: & | ^ ~ << >> >>>
• String: +
• Assignments: = += -= *= /= <<= |= ...
22
Types of EqualityTypes 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 34 == "34" ? Is 34 == "3"+"4" ?
- Is 34 === "3"+"4" ? Is 34 !== "3"+"4" ?
23
An ExampleAn Example
<script type="text/javascript">
for (var counter = 1 ; counter <= 8 ; ++counter) {
var fontsize = counter + 10; fontsize+="pt";
document.write("<p style='font-size: "+fontsize+"'>" + "Font size " + fontsize + " <\/p>"); }
</script>
24
25
FunctionsFunctions
26
FunctionsFunctions
• JavaScript functions are special objects with operator ()
• Syntax: function fname(args...) {statements}
• Usually, functions are defined at the head of the file
- Why?
• Some functions are predefined
- For example, parseInt(string)
• Functions can return values
27
Function ExampleFunction Example
<html> <head> <script type="text/javascript"> function add(x,y) { return x+y; } </script> </head>
<body> <h1> <script type="text/javascript"> sum = add(4,5); document.write("4+5="+sum); </script> </h1> </body></html>
28
Function ValuesFunction Values
• Numbers and Booleans are passed to functions
by value
• Objects and strings are passed to functions by
reference
• Numbers and Boolean values are always
returned by value
• Objects and strings are returned by reference
29
Undeclared ArgumentsUndeclared Arguments
• Function may receive arguments without declaring them
• Within a function, its arguments are held in the
arguments array
- can be accessed with arguments[i]
- The number of arguments is arguments.length
• Hence, it is possible to define functions that take any
number of arguments
30
An ExampleAn Example
What is the result of the following code?function myConcat(separator) { var result=""; // iterate through arguments for (var i=1; i<arguments.length; i++) { result += arguments[i] + separator; } return result;}
con = myConcat(", ","red","orange","blue");
31
Predefined FunctionsPredefined Functions
• JavaScript include several predefined functions
• 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 (or return NaN)
32
Variable ScopesVariable Scopes
• JavaScript variables are recognized inside their
declaration scope
• Hence, global variables should be declared
outside the functions
• A variable declared in a function can also be
global, if var is omitted
- However, avoid this bad style...
33
Objects and ArraysObjects and Arrays
34
Object ModelObject Model
• JavaScript objects are similar to associative arrays
• That is, an object associates identifiers (e.g., firstName)
with values (attributes) (e.g., "John")
• Those values may be other objects (nested objects)
• Those values can also be functions (methods)
- e.g., function setPersonAge(age) {this.age = age}
• When o.f() is invoked, o can be referred to as this
35
Creating ObjectsCreating Objects
• Objects can be created in several ways:
• Object initializers
• Object assignments
var theNissan = {make:"Nissan", year:2003, color:"blue"}
theMazda = { make:"Nissan" } theMazda.year = 2002;theMazda.color="black";
36
Creating Objects (cont)Creating Objects (cont)
• Object Constructors
- define a constructor function
- create the new object using new
function car(make,year,color) { this.make = make this.year = year this.color = color}
theHonda = new car("Honda", 2001, "green")
37
Defining MethodsDefining Methods
• Methods are associated with objects just like attributes
function niceString() { return "<span style='color:"+ this.color + "'>" + this.make + " "+ this.year + "<\/span>"}
theNissan = {make:"Nissan",year:2003,color:"blue",str:niceString}
38
Defining Methods (cont)Defining Methods (cont)
function car(make,year,color) { this.make = make this.year = year this.color = color this.str = niceString}
theHonda = new car("Honda", 2001, "green")
theNissan = {make:"Nissan", year:2003, color:"blue"} theNissan.str = niceString;
39
Accessing Object PropertiesAccessing Object Properties
• Object attributes can be accessed in several ways:
- object.attName
- object["attName"]
• Thus, object methods are invoked in Java/C++ style:
- object.method(arguments)
• Alternatively:
- object["method"](arguments)
40
The Complete ExampleThe Complete Example
function niceString() { return "<span style='color:"+ this.color + "'>" + this.make + " "+ this.year + "<\/span>"}
function car(make,year,color) { this.make = make; this.year = year; this.color = color; this.str = niceString}
var theHonda = new car("Honda", 2001, "green");
document.write(theHonda.str());
41
Array ObjectsArray Objects
• Arrays are supported as objects
• Attribute length
• Methods include:
concat, join, pop, push, reverse, sort, shift, ...
• Arrays can be passed to functions as arguments
• The array is passed by-reference
42
Creating ArraysCreating Arrays
• 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
43
Array ElementsArray Elements
• Array elements need not have the same type
- arr1 = ["hello", 1, true]
• Java-like access: arr[i]
• Array indices need not be contiguous
- arr1[10] = 66
• Multi-dimensional arrays are arrays of arrays
- var matrix = [ [0, 1, 1], [1, 1, 0], [0, 0, 0]]
44
MiscellaneousMiscellaneous
45
JavaScript and XHTML StrictJavaScript and XHTML Strict
• Embedding JavaScript code inside XHTML may violate
XML rules
- e.g., x<5 && x>2
• One solution is to import JavaScript code from external
files, e.g.: <script type="..." src="jsfile.js"/>
- Always a good habit...
• Another solution: wrap the code in an XML CDATA
section
46
Wrapping Code in Wrapping Code in CDATACDATA
<script type="text/javascript"/>
//<![CDATA[
regular JavaScript code
...
//]]>
</script>
47
The String ObjectThe String Object
• JavaScript has a built-in String object
- not the primitive string!
• Create a String object from a string primitive:- myString = new String("This is a string object")
• Extract the primitive string from a String object:- str = myString.valueOf()
48
StringString Common Methods 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()
• valueOf()
• match(regexp)
49
An Example - Format VerificationAn Example - Format Verification
• What does the following function do?function getString() { var result = null; while(result==null) { var answer = prompt("Your first name:") if(answer!=null) { result = new String(answer); result = result.toLowerCase().match("^[a-z]+$"); } if(result==null) { alert("Don't mess with me!") } } return answer }
50
The The MathMath Object Object
• The object Math is used for mathematical operations
- E.g., Math.pow(x,2)
• Other useful functions:
• abs(x)
• round(x)
• ceil(x)
• floor(x)
• cos(x)
• sin(x)
• tan(x)
• exp(x)
• pow(x, y)
• sqrt(x)
• log(x)
• max(x, y)
• min(x, y)
• Math Also includes constants such as: Math.E, Math.PI
51
The The withwith Statement 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 of the default object
var a, x, yvar r=10with (Math) { a = PI * r * r; x = r * cos(PI); y = r * sin(PI/2) }
52
The Date ObjectThe Date Object
• Create the current date: new Date()
• Create an arbitrary date: new Date(date-string)
• Common methods of Date:• getDate()
• getFullYear()
• getMonth()
• getDay
• getTime()
• getHours()
• getMinutes()
• getSeconds()
• getMilliseconds()
• toLocaleString()
top related