1. AJAX (Async JavaScript and XML) and Java Applets Bert Wachsmuth

2. Review Last-Last Time  Internet, IP addresses, ports, client-server, http, smtp  HTML, XHTML, XML  Style Sheets, external, internal, inline, selector, properties, ids, classes, elements  MS Expression Web, local and remote web site, synchronization, Dynamic Web Template  Dynamic Web Pages: client-side and server-side programming  Intro to JavaScript: basic operations, conditionals, loops, functions, dialog boxes  Intro to the DOM: defining an element, replacing innerHTML, refreshes without reloading Last Time  More DOM: element id's, replacing innerHTML or image source  Styles: switching between styles  Cookies: developed a library of cookie functions  External JavaScript files: for cookie handlers  Timers and Recursion: falling body problem

3. Homework  Created script to switch between 2 styles and library of cookie-handling scripts  add a third style and modify the document and scripts to allow switching between three styles  use the cookie script functions from our library to ensure that when a user re-visits your document within a week, it will be presented in the same style the user last selected  if you wanted the styles of your entire web site, not only of one page but of all pages, to be switchable, how would you do that?  Discussed timers and recursion and created a count-down timer page.  Modify the script to count up from 1 to 100 every 0.2 seconds  Add code to also keep track of the sum of counting numbers.

4. The XMLHttpRequest Object  At the heart of most data-oriented Web 2.0 pages like Google Maps or Facebook is the XMLHttpRequest  It lets you load data:  Without reloading the page  Synchronously  Asynchronously

5. The XMLHttpRequest Object Limitations:  IE 7, IE 8, and Firefox 2 and above handle XMLHttpRequest similarly  IE 5 and IE 6 handle XMLHttpRequest differently  Really old browsers do not handle XMLHttpRequest at all  XMLHttpRequest can only load data from the same server it is coming from  XMLHttpRequest cannot load data from a local disk at all

6. Need XML Data  To experiment with XMLHttpRequest we need access to data in XML format.  Could try, for example, to use weather info provided by Google: http://www.google.com/ig/api?weather=Frankfurt,Germany  Google makes this data available just fine, and it is in perfect XML format However, we are unable to use it for our own JavaScript weather- forecast program – why?

7. Need XML Data  XML data and script to load it must be on the same machine  XML data can not be loaded from local disk Must work on the server with Expression Web:  close your current web site  click “File | Open Site”  enter as site name: ftp://courses.shu.edu/ftp://courses.shu.edu/ You should be prompted for your Seton Hall username and password as usual. After login you can create and edit files on the server.

8. Our own XML Data (on server) File addressdata.xml Bert Wachsmuth wachsmut@shu.edu Silke von der Emde vonderemde@vassar.edu

9. Simple Use function showData() { var xml = new XMLHttpRequest(); xml.open("GET", "addressdata.xml", false); xml.send(""); var xmlDoc = xml.responseXML; var names = xmlDoc.getElementsByTagName("name"); var mails = xmlDoc.getElementsByTagName("email"); for (var i = 0; i < names.length; i++) { var name = names[i ].childNodes[0].nodeValue; var mail = mails[i ].childNodes[0].nodeValue; document.writeln(" " + name + "(" + mail + ") "); }

10. Problem  Only works on Firefox 3 and IE 7, 8 Solution  Use my JavaScript library xmltools.js <script language="javascript" type="text/javascript" src="/spring09/CEPS0100/wachsmut/JavaScript/xmltools.js"> <script language="javascript" type="text/javascript" function showData() { var xmlDoc = loadXMLDoc("addressdata.xml");... As before... }

11. Better Solution  Library to load XML data across browsers: http://courses.shu.edu/spring09/CEPS0100/wachsmut/JavaScript/xmltools.js  Use index variable to track current address and functions as follows: http://courses.shu.edu/spring09/CEPS0100/wachsmut/AJAX/addressbook.html var names = null; // an array of all names var emails = null; // an array of all emails var recno = 0; // current record displayed var rectot = 0; // total records available function loadData() // loads data file and sets names and emails arrays function showRecord() // displays the current record function nextRecord() // increments recno and calls showRecord function prevRecord() // decrements recno and calls showRecord function findRecord() // prompts for name and searches names array

12. How does it work?  What are the global variables?  What data do the global variables store?  What are the functions and what do they do?  What is the point of the variable recno  When does loadData get called?  When do nextRecord and prevRecord get called?  Who calls showRecord and how come it does not always display the same record?  Where is the data displayed and how?

13. Adding a Search Function 1 function findRecord() 2 { 3 var currentrecno = recno; 4 var found = false; 5 var searchfor = prompt("Enter name to search for:", ""); 6 if ((searchfor != null) && (searchfor != "")) 7 {recno = 0; 8while ((!found) && (recno < rectot)) 9{var name = names[recno].childNodes[0].nodeValue; 10if (name.toLowerCase().indexOf(searchfor.toLowerCase()) >= 0) 11found = true; 12else 13recno++; 14} 15if (found) 16showRecord(); 17else 18{recno = currentrecno; 19alert("Nobody with that name found, sorry."); 20} 21 } 22 }

14. Google’s Search API  Google does provide XML data – even to its flagship “search” data  It also provides suitable JavaScript functions  Both data and JavaScript are coming from the same domain, so there are no security restrictions!  For details, check: http://code.google.com/apis/ajaxsearch/  or for even more information, check: http://code.google.com/apis/ajax/

15. Google's Search API <script src="http://www.google.com/jsapi" type="text/javascript"> google.load('search', '1'); function loadSearch() { var searchControl = new google.search.SearchControl(); searchControl.addSearcher(new google.search.LocalSearch()); searchControl.addSearcher(new google.search.WebSearch()); var location = document.getElementById("searchcontrol"); searchControl.draw(location); } Loading...

16. Google Options var localSearch = new google.search.LocalSearch(); localSearch.setCenterPoint("South Orange, NJ");... searchControl.addSearcher(localSearch); __________________________________________ var opt = new google.search.DrawOptions(); opt.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);... searchControl.draw(location, opt); __________________________________________ var siteSearch = new google.search.WebSearch(); siteSearch.setUserDefinedLabel("SHU"); siteSearch.setUserDefinedClassSuffix("siteSearch"); siteSearch.setSiteRestriction("www.shu.edu");... searchControl.addSearcher(localSearch);

17. AJAX This is all the AJAX examples we have time for  our code is not asynchronously (loads data in the background). Some sites using the XMLHttpRequest object are:  maps.google.com  www.flickr.com  www.facebook.com www.facebook.com For more info and examples, check:  http://www.xul.fr/en-xml-ajax.html http://www.xul.fr/en-xml-ajax.html  http://www.w3schools.com/ajax/default.asp http://www.w3schools.com/ajax/default.asp  http://www.ajaxdaddy.com/ http://www.ajaxdaddy.com/

18. Java is:  Java is a complete, object-oriented, modern programming language that has nothing to do with JavaScript other than part of its name. Java is:  Strongly typed  Fully object oriented  Compiled  Independent of the operating system  Supports TCPIP programming

19. Java can:  Java can be used:  To create complete stand-alone programs that run on any operating system  To create applets that run inside a web browser  To create server-side programs via JSP  To support small-device programming for cell phone  Java Rivals  Applet rivals: Adobe Flash or Microsoft Silverlight (for “casual” games)  Program rivals: C++ and C# (.NET)  Server-Side: Microsoft's ASP, Ruby on Rails, PHP  Java – just as JavaScript – has the big advantage that it is free.

20. Java Programming  To program in Java you need:  A source-code editor  A Java compiler  A Java Virtual Machine (JVM)

21. Real Java Tools  The JDK (Java Developer’s Kit) from Sun  visit http://java.sun.com/ and look for the Java SE (Standard Edition).http://java.sun.com/  download the latest release of the Java JDK (JDK) and install it on your computer  Provides compiler, JVM, and tools  The Eclipse IDE (Integrated Developer’s Environment)  visit http://www.eclipse.org/http://www.eclipse.org/  download the latest release of the Eclipse IDE for Developers.  once downloaded you need to unzip the program  you cannot use Window’s build-in unzip program, you must use an external program such as WinZip (not free) or 7Zip (free).  create shortcut to the main Eclipse program to run Eclipse

22. A Java Program Your first Java stand-alone program: public class BasicProgram { public static void main(String args[]) { System.out.println("Hello World"); }

23. A Java Applet Your first Java Applet: import javax.swing.JApplet; import javax.swing.JLabel; public class BasicApplet extends JApplet { JLabel label = new JLabel("Hello World"); public void init() { add(label); }

24. Embedding an Applet To embed an applet in a web page you use the tag: Simple Applet Simple Applet <applet code="BasicApplet.class" width="200" height="80">

25. Embedding a foreign Applet Applet from another site embedded via the codebase attribute: <applet code="com.tlabs.MitosisApplet" codebase="http://theoreticgames.com/mitosis" height="320" width="400" archive="./Mitosis.jar">

26. Embedding a foreign Applet (2)  find an applet you like  look at the page source  copy the … code  add a codebase attribute to the base URL where you found the applet  see if it works Try: http://www.mathcs.org/java/programs/Calculator/Calculator.html http://www.mathcs.org/java/programs/Calculator/Calculator.html

27. Applet Framework import javax.swing.JApplet; // import necessary classes... public class AppletFramework extends JApplet implements ActionListener { // fields (global variables) JButton button = new JButton("A button"); // methods (aka functions) public void init() public void start() public void stop() public void actionPerformed(ActionEvent ae) } See http://courses.shu.edu/spring09/CEPS0100/wachsmut/Java/

28. More on Java We barely scratched the Java surface but time is up. For more details, check the lecture notes and:  http://www.mathcs.org/java/jbd - complete online text book, very thorough with plenty math examples. In addition, exercises can be provided upon request http://www.mathcs.org/java/jbd  http://java.sun.com/docs/books/tutorial/ - ultra-complete with lots of tricks, but not that easy to understand http://java.sun.com/docs/books/tutorial/  http://java.sun.com/javase/6/docs/ - technical overview of the Java language http://java.sun.com/javase/6/docs/  http://java.sun.com/javase/6/docs/api/ - the classes and functions you need to know (essential reference but this is not a tutorial – it really is a reference) http://java.sun.com/javase/6/docs/api/

29. Your own Web Site Download your own web server software.  You will be the web master and the content provider  you can experiment with any technique you wish, including server-side scripts.  Downside: no permanent IP name or address.  can be used by you using the web address http://localhost/http://localhost/  Can be used by others who know your IP (depends on firewall)  More info: http://www.apache.org/ (lookup and download the httpd server)http://www.apache.org/

30. Your own Web Site (2) Establish a Google web site  up to 100MB free  fair amount of freedom with regards to page hierarchy  some choice of themes  integration with Google docs, s  shared editing possible  Downside: no JavaScript, Java, or style sheets allowed.  More info: http://sites.google.com/http://sites.google.com/  Your page: http://sites.google.com/site/wachsmut/ http://sites.google.com/site/wachsmut/

31. Your own Web Site (3) Set up a Windows Live site:  Up to ___ (?) MB free  integrates pictures, blogs, SkyDrive, etc. via Windows Live  Downside:  no JavaScript, Java, or Style sheets allowed  Restrictive design  Somewhat confusing.  More info: http://spaces.live.com/http://spaces.live.com/  Your page: http://wachsmut.spaces.live.com/http://wachsmut.spaces.live.com/

32. Your own Web Site (4) Setup your own domain and web hosting:  Complete freedom to design your pages  Create your own domain name  Include client-side scripts, CSS, Java, etc.  Includes email boxes and sub-domains.  Downside:  $4.99 a month for 120 GB space and 1.2 TB monthly volume  No server-side scripting allowed  More info: http://www.1and1.com/http://www.1and1.com/  Your page: http://www.anything.you.want/http://www.anything.you.want/

33. Your own Web Site (5) Rent your own Virtual Server.  Complete freedom to create interactive sites  include client-side and server-side scripts  online database access  shell access  Downside:  starts at $29.99 a month  "with great power comes great responsibility" (to learn how to program)  More info: http://www.1and1.com/http://www.1and1.com/