Post on 11-Jan-2016
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