June 2008 Florida Atlantic University Department of Computer Science & Engineering ISM 4052 –Internet Application Programming Dr. Roy Levow Session 2

Internet Application Programming, June 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 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 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 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 Output with document.writeln( str ); or document.write Simple input with val = window.prompt(“msg”); Simple I/O

Internet Application Programming, June 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 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 Wrap each code segment with <!-- // code goes here --> Comment avoids problems is browse doesn’t recognize scripts Use on Web Page (2)

Internet Application Programming, June 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 More Control Statements switch (choice) { case val: stmt break; … default: // optional stmt } do stmt while (cond); break and continue as in C/C++

Internet Application Programming, June Examples Bullet lists with switch (Ex. 8.7) Headings with do-while (Ex. 8.9)

Internet Application Programming, June Logical Values and Operators Logical Values are truefalse Can’t use 0, not 0 as in C Usual logical operators !&&|| Short-circuit evaluation

Internet Application Programming, June 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 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 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 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 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 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 Objects Use similar to C++ or Java Declared with new Components accessed with dot notation Math object has elements that are standard mathematical functions Math.sin(x), Math.max(x, y), Math.sqrt(x), etc.

Internet Application Programming, June 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 Split and substring, Ex 11.6

Internet Application Programming, June Date Object Access and format date and time See definitions at W3Schools Example: DateTime.html fig. 12.9fig. 12.9

Internet Application Programming, June 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

Internet Application Programming, June Cookies Accessed through Document cookie property Example: cookie.html, Ex Quiz Example Ex , 11.17

Internet Application Programming, June From Session 1, Slides 23 & 24 XHTML Forms

Internet Application Programming, June 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 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 Viewing and Manipulating DOM Tree

Internet Application Programming, June 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 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 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 Rollovers mouseover, mouseout Ex Form processing with onfocus and onblur Ex Form processing with onsubmit and onreset Ex Event bubbling, Ex Events (2)

Internet Application Programming, June 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 Ajax Site Example Google Suggest Google Maps Gmail Google Page Creator Google Docs (Web substitute for MS Office)

Internet Application Programming, June Ajax vs. Classic Page Loads

Internet Application Programming, June Classic Synchronous Loads

Internet Application Programming, June Ajax Asynchronous Loads

Internet Application Programming, June AJAX uses XMLHttpRequest to fetch data for page updates Coding data as XML is normative but not essential Ex Key Elements XMLHttpRequest object properties & methods Callback Functions Exception Handling Full development requires server-side program Simple AJAX Interaction

Internet Application Programming, June Programming interface to incorporate Google maps into web pages Maplet = maps + gadgets Free registration required Uses built-in AJAX for map updates Google Maps API

Internet Application Programming, June Basic Map Objects Map Events Map Controls Map Overlays Map Services Google Maps Concepts

Internet Application Programming, June 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