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

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

3. 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

4. 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 =

5. 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

6. Internet Application Programming, June 2008 6 Output with document.writeln( str ); or document.write Simple input with val = window.prompt(“msg”); Simple I/O

7. 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

8. 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

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

10. 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

11. Internet Application Programming, June 2008 11 More Control Statements switch (choice) { case val: stmt break; … default: // optional stmt } do stmt while (cond); break and continue as in C/C++

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

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

14. 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

15. 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)

16. 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

17. 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

18. 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

19. 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

20. 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 functions Math.sin(x), Math.max(x, y), Math.sqrt(x), etc.

21. 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

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

23. 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

24. 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

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

26. 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

27. 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

28. 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

29. 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

30. 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

31. 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)

32. 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

33. 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/ http://pages.google.com/ Google Docs (Web substitute for MS Office) http://docs.google.com/

34. Internet Application Programming, June 2008 34 Ajax vs. Classic Page Loads

35. Internet Application Programming, June 2008 35 Classic Synchronous Loads

36. Internet Application Programming, June 2008 36 Ajax Asynchronous Loads

37. 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

38. Internet Application Programming, June 2008 38 Programming interface to incorporate Google maps into web pages http:code.google.com/apis/maps/ Maplet = maps + gadgets Free registration required Uses built-in AJAX for map updates Google Maps API

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

40. 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