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


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


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 =


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


Output with document.writeln( str );

or document.write Simple input with

val = window.prompt(“msg”);

Simple I/O


Basic Control Structures Like C/C++

• if (cond)stmt

else // optional else part

stmt

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

stmt

• for (init; test; incr) stmt


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

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

• Comment avoids problems is browse doesn’t recognize scripts

Use on Web Page (2)


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


More Control Statements switch (choice) {

case val: stmtbreak;

…default: // optional

stmt}

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


Examples Bullet lists with switch (Ex. 8.7)

Headings with do-while (Ex. 8.9)


Logical Values and Operators Logical Values are

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

Usual logical operators! && ||

Short-circuit evaluation


Defining Functions function fname(parm1, parm2, …)

{

//code

return expr;

}

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


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)


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


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


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


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


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.


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


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


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


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

Quiz Example Ex. 11.16, 11.17


From Session 1, Slides 23 & 24

XHTML Forms


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


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


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


Dynamic Styles Styles can change dynamically

• Any style element can be changed• Refer to

DOM_element.style.style_attrib

• Ex. 12.4


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


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)


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


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/


Ajax vs. Classic Page Loads


Classic Synchronous Loads


Ajax Asynchronous Loads


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


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


Basic Map Objects Map Events Map Controls Map Overlays Map Services

Google Maps Concepts


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

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

Documents

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