June 2008 Florida Atlantic University Department of Computer Science & Engineering ISM 4052...

Post on 11-Jan-2016

212 views 0 download

Transcript of June 2008 Florida Atlantic University Department of Computer Science & Engineering ISM 4052...

June 2008

Florida Atlantic UniversityDepartment of Computer Science & Engineering

ISM 4052 –Internet Application Programming

Dr. Roy Levow

Session 2

Internet Application Programming, June 2008 2

Lesson Plan – Session 2

Client-Side Programming• JavaScript

• Literals, Variables, Expressions, Control Statements, Functions, Arrays, Objects

• Document Object Model (DOM)• Objects and Collections

• JavaScript Events• Event & Handlers

• Introduction to AJAX• XMLHttpRequest

• Google Maps API

Internet Application Programming, June 2008 3

JavaScript Programming language with some object-

oriented features Interpreted from source code Supported by most browsers Executed on client system in browser Program text output is treated as HTML and

rendered by browser Includes extensive support for generating

web page and window elements

Internet Application Programming, June 2008 4

Variables and Assignment Variable names essentially as in C++ No type in declaration

var name1, name2, …;

Type depends on value and can change on assignment of new value

Assignment operator =

Internet Application Programming, June 2008 5

Expressions Very similar to C++ Arithmetic Operators:

+ - * / % ++ -- etc. as in C++ Comparison operators: < <= == <> …

• If one operand is a string and the other a number, comparison is numeric by converting string

Use === and !== for strict comparison• No conversion; “5” === 5 -> false

String concatenation with +• Concatenation with string converts other values to

string if possible

Internet Application Programming, June 2008 6

Output with document.writeln( str );

or document.write Simple input with

val = window.prompt(“msg”);

Simple I/O

Internet Application Programming, June 2008 7

Basic Control Structures Like C/C++

• if (cond)stmt

else // optional else part

stmt

• { … } // block• while (cond)

stmt

• for (init; test; incr) stmt

Internet Application Programming, June 2008 8

Use on Web Page Code in body

• Executed when encountered• Output becomes part of page HTML at that

place Functions and initializations can go in head

• Init code output goes at top of body

Internet Application Programming, June 2008 9

Wrap each code segment with<script type = “text/javascript”><!--

// code goes here--></script>

• Comment avoids problems is browse doesn’t recognize scripts

Use on Web Page (2)

Internet Application Programming, June 2008 10

Examples Class Average 2 (Ex. 7.9)

• Sentinel for end of input

Analysis (Ex. 7.11)

Interest Table (Ex. 8.6)• Observe that tags and other HTML must be

written by script

Internet Application Programming, June 2008 11

More Control Statements switch (choice) {

case val: stmtbreak;

…default: // optional

stmt}

do stmt while (cond); break and continue as in C/C++

Internet Application Programming, June 2008 12

Examples Bullet lists with switch (Ex. 8.7)

Headings with do-while (Ex. 8.9)

Internet Application Programming, June 2008 13

Logical Values and Operators Logical Values are

true false• Can’t use 0, not 0 as in C

Usual logical operators! && ||

Short-circuit evaluation

Internet Application Programming, June 2008 14

Defining Functions function fname(parm1, parm2, …)

{

//code

return expr;

}

Notes• No return type• expr in return omitted if no return value

Internet Application Programming, June 2008 15

Example Table of Random Numbers, Ex. 9.4

• Note use of functions from class Math

Die Roll Simulation (Ex. 9.5)

Craps Game (Ex. 9.6)

Internet Application Programming, June 2008 16

Arrays Array is a class Declare array with

var list = new Array(size); Access with list[index];

• Start index with 0 Can hold any type of value Deallocation is automatic when another value is

assigned to variable list.length returns length of array

Internet Application Programming, June 2008 17

Arrays Initialization In constructor

new Array(“red”, “green”, “blue”); By array object

x = [1, 2, 3, 4]; Can have undefined values; never assigned Example: DieRoll with array, Ex. 10.6

Internet Application Programming, June 2008 18

Reference Parameters Arrays and objects are passed by reference

so a change of value in the function changes the calling value

Scalars are passed by value

Internet Application Programming, June 2008 19

Two-dimensional Arrays Declare an Array for rows Then assign an Array to each element Does not enforce rectangular form Access with Array[i][j]

• In for statement can use

for (var j in theArray[i])

instead of counting

Internet Application Programming, June 2008 20

Objects Use similar to C++ or Java Declared with new Components accessed with dot notation Math object has elements that are standard

mathematical functionsMath.sin(x), Math.max(x, y), Math.sqrt(x), etc.

Internet Application Programming, June 2008 21

Strings Class String supports character strings Constants are surrounded by “ “ Can use usual C++ \ escapes Has many methods for string manipulation Operator + for concatenation Examples:

• String methods, Ex. 11.4• Split and substring, Ex 11.6

Internet Application Programming, June 2008 22

Date Object Access and format date and time See definitions at W3Schools Example: DateTime.html fig. 12.9

Internet Application Programming, June 2008 23

Document and Window Objects Document object allows access to all

components of a document See definitions at W3Schools

Window object allows control of window features

See definitions at W3Schools Example: Window.html, Ex. 11.13

Internet Application Programming, June 2008 24

Cookies Accessed through Document cookie property Example: cookie.html, Ex. 11.15

Quiz Example Ex. 11.16, 11.17

Internet Application Programming, June 2008 25

From Session 1, Slides 23 & 24

XHTML Forms

Internet Application Programming, June 2008 26

Dynamic Object Model (DOM) Tree structure represents elements of

document XHTML XHTML elements accessed as objects

• Navigate and manipulate tree• XHTML attributes become properties of the

objects• The properties can be manipulated by scripts

for dynamic effect• The id attribute permits direct access by name

Internet Application Programming, June 2008 27

Tools to view DOM tree• Firefox – DOM Inspector• IE7 – Developer Toolbar

Accessing nodes in DOM tree with JavaScript• Access, Insert, Delete, Replace, Remove, Get

Parent• Ex. 122.2

Viewing and Manipulating DOM Tree

Internet Application Programming, June 2008 28

DOM Collections A collection is basically an array of related

objects• Many collections; defined by node type• ‘all’ collection consists of all XHTML elements

of a document• ‘children’ collection of an object consists of all

the immediately contained elements• links, anchors, images, forms

Ex. 12.3

Internet Application Programming, June 2008 29

Dynamic Styles Styles can change dynamically

• Any style element can be changed• Refer to

DOM_element.style.style_attrib

• Ex. 12.4

Internet Application Programming, June 2008 30

XHTML tags can contain an event attribute with a call to a function to execute when that event is triggered on the item• Event handlers can also be registered through

DOM manipulation Sample events: onclick, onmouseover,

onload Ex. 13.1, 13.2, 13.3

JavaScript Events

Internet Application Programming, June 2008 31

Rollovers• mouseover, mouseout• Ex. 13.5

Form processing with onfocus and onblur• Ex. 13.6

Form processing with onsubmit and onreset• Ex. 13.7

Event bubbling, Ex. 13.8

Events (2)

Internet Application Programming, June 2008 32

Ajax Asynchronous JavaScript And XML Provides a framework for the development of

web pages that are• Interactive• Highly dynamic

Small transfers that update current page provide faster, smoother response

Internet Application Programming, June 2008 33

Ajax Site Example Google Suggest

http://www.google.com/webhp?complete=1&hl=en Google Maps

http://maps.google.com/ Gmail

http://gmail.google.com/ Google Page Creator

http://pages.google.com/ Google Docs (Web substitute for MS Office)

http://docs.google.com/

Internet Application Programming, June 2008 34

Ajax vs. Classic Page Loads

Internet Application Programming, June 2008 35

Classic Synchronous Loads

Internet Application Programming, June 2008 36

Ajax Asynchronous Loads

Internet Application Programming, June 2008 37

AJAX uses XMLHttpRequest to fetch data for page updates

Coding data as XML is normative but not essential

Ex. 15.5 Key Elements• XMLHttpRequest object properties & methods

• Callback Functions

• Exception Handling Full development requires server-side program

Simple AJAX Interaction

Internet Application Programming, June 2008 38

Programming interface to incorporate Google maps into web pageshttp:code.google.com/apis/maps/• Maplet = maps + gadgets• Free registration required• Uses built-in AJAX for map updates

Google Maps API

Internet Application Programming, June 2008 39

Basic Map Objects Map Events Map Controls Map Overlays Map Services

Google Maps Concepts

Internet Application Programming, June 2008 40

Choose one of the following• Customizable web page• Simple calculator• Sudoku player

XHTML DOM Project

Maplet Project Develop a web application that incorporates a

Maplet• Use a from to collect data to manipulate map