WIXLIB

JavaScript and Ajaxhttp://www.w3schools.com/js/js examples.asp

Unless otherwise noted, the content of this course material is licensed under a CreativeCommons Attribution 3.0 License. ght 2009, Charles Severance, Jim Eng

ponsePOSTGETPythonData StorememcacheTemplatesWebAppMVC

JavaScript In addition to HTML and CSS. Browsers have a powerful programming language calledJavaScript that runs in the browser Actually not much like Java - more like C Very powerful and flexible - we keep “discovering” newpowerhttp://en.wikipedia.org/wiki/JavaScript

Language Syntax Whitespace does not matter - spaces and new lines Begin and end of blocks are curly braces Statements must end in semicolonsfunction message(){alert("This alert box was called with the onload event");}

Language Syntax Javascript supports comment characters that start andend a comment and can be multiline as well as acomment character that comments to the end of thecurrent linefunction message(){/* I am amulti-line comment */alert("This alert box was called with the onload event");// I am a comment to the end of one line}

The Most Useful JavaScript The alert box is often the way we debug simpleJavaScript When it runs - alert makes a pop up boxalert("Hello from JavaScript");

Including JavaScript in a Page Include an File from a URL Inline Code As an Attribute on a Tag

Including a File from a URL html xmlns "http://www.w3.org/1999/xhtml" head title App Engine - HTML /title link href "/static/glike.css" rel "stylesheet" type "text/css" / script type "text/javascript" src "/static/js/jquery-1.2.6.min.js" /script /head body div id "header"

Inline Javascript html head /head body h1 Here is my Document /h1 script type "text/javascript" alert("Hello from JavaScript"); /script h1 Here is my second Header /h1 /body /html Inline JavaScriptruns as the pageloads.inline.htm

Validating Inline Javascript html head /head body h1 Here is my Document /h1 script type "text/javascript" /* ![CDATA[ */alert("Hello from JavaScript");/* ]] */ /script h1 Here is my second Header /h1 /body /html We add Javascriptcomments and aCDATA tag to passXHTML andHMTL4 StrictValidationinline.htm

html head /head body h1 Here is my Document /h1 script type "text/javascript" alert("Hello from JavaScript"); /script h1 Here is my second Header /h1 /body /html http://www.dr-chuck.com/javascript/one.htm

Event Handling Certain tags have attributes which contain JavaScriptwhich run when things (events) “happen” to the tag http://www.w3schools.com/jsref/jsref events.asp onchange, onclick, onmousedown, onmouseup . a href "http://www.umich.edu" onclick "alert('Ouch!')" Plan A /a

body p a href "http://www.umich.edu" onclick "alert('Ouch!')" Plan A /a /p p a href "http://www.umich.edu" onclick "alert('Yow!');return false;" Plan B /a /p /body Returning false in theseevents means “don’t dowhat you were going todo”. In this case, Plan Bwill not follow the linkafte the popup.http://www.dr-chuck.com/javascript/two.htm

http://www.dr-chuck.com/javascript/three.htm html head script type "text/javascript" function message(){alert("This alert box was called with the onload event");} /script /head body onload "message()" Another h1 Hello World /h1 /body Event /html http://www.w3schools.com/js/tryit.asp?filename tryjs headsection

form method "post" action "/apply" p label for "name" Name: /label input type "text" name "name" id "name"/ /p p label for "account" Account: /label input type "text" name "account" id "account"/ /p p label for "password" Password: /label input type "password" name "password" id "password"/ /p input type "submit" name "Login"/ input type "button" onclick "window.location '/'; return false;"value "Cancel" / /form

input type "button" onclick "window.location '/'; return false;"value "Cancel" / When this button is clicked, navigate thiswindow’s location to the “/” URL, and do notsubmit this form.

Document Object Modelhttp://en.wikipedia.org/wiki/Document Object Model

Document Object Model JavaScript can manipulate the current HTML docment The “Document Object Model” tells us the syntax touse to access various “bits” of the current screen toread and/or manipulate You can even find pieces of the model by id attributeand change themhttp://en.wikipedia.org/wiki/Document Object Model

input type "button" onclick "window.location '/'; return false;"value "Cancel" / When this button is clicked, go into thedocument model at window.location andchange it to be “/”, and do not submit thisform.

http://www.dr-chuck.com/javascript/four.htm p a href "#"onclick "document.getElementById('stuff').innerHTML 'BACK';" BACK /a a href "#"onclick "document.getElementById('stuff').innerHTML 'FORTH';" FORTH /a /p p Hello b span id "stuff" Stuff /span /b there. /p Updating the BrowserDocumentThis is one reason whyyou can only have one idper document.

JavaScriptErrors Generally silently ignoredbyt hte browser FireFox: Tools - e.htm html body h1 Here is my Document /h1 script type "text/javascript" alort("Hello from JavaScript); /script h1 Here is my second Header /h1 /body /html

FireBug - JavaScript / DOM If you are going to do *any* non-trivial JavaScript and/or DOMmanipulation Get FireBug for FireFox addons.mozila.org Many Javascript errors are *silent* - FireBug notices the errors

JavaScript Summary There is a lot of power in JavaScript - we keep “discovering” newuses and capabilities of JavaScript JavaScript is increasingly being treated as a very serious language- including using it in the server as well as the browser People now specialize as JavaScript developershttp://www.w3schools.com/js/js examples.asp

JavaScript “Compilers” Some languages can be “compiled” into Javascript Google Web Tool Kit - Java Ruby - Red Pyjamas - Python Google Chrome - Very Fast Javascript

Asynchronous JavaScript andXML (Ajax)http://en.wikipedia.org/wiki/Ajax (programming)

In The Good Old Days A user would take some action like a click on a link or button The Browser would make a TCP/IP connection to the webserver The browser would send a POST or GET request The Server would send back a page to display to the user Repeat the Request-Response Cycle.

ePagePOSTRedrawWholePageGETWholePage

XMLHttpRequest By 1999, Microsoft wanted to move some of the processing of webpages from the web server to the web browser The idea was instead of sending whole pages of HTML to the browser,send out the data to be displayed as XML and then producepresentation in JavaScript in the browser Originally a Microsoft innovation - other browsers soon adopted theidea and it became a defacto standard with a little variation betweenbrowsers :) It soon became clear that this could send *anything* - not just XMLback and forth between a browser and clienthttp://en.wikipedia.org/wiki/XMLHttpRequest

FragmentHTTPREQFragmentHTTPREQUpdateFragment

Ajax Arms Race The race was on to build better and better web sites that beganto replace things like frames and full-screen updates withXmlHttpRequest operations and very selective screen updates. With clever JavaScript programmers - the impossible becamepossible - drag and drop, automatic field completion - automaticdata saving. It made the web operate much more like thedesktop. Applications like GMail and Google Maps - feel very un-web.

Ajax versus Request/Response Standard Request/Response Each click presents a whole new screen Ajax - Asynchronous JavaScript and XML Each action sends data and receives results in the background. The browser typically gets back a fragment of HTML or XMLwhich is used to update a portion of the screen using thebrowser document model

Lots of Flexibility When you combine the ability to rewrite the Browser documentmodel with the ability to interact with the web server fromJavaScript - there is lots of potential fun Different browsers did things a *little* differently - this led to therise of Ajax Libraries

Ajax Libraries Prototype - Basic portability and common functionality http://www.prototypejs.org/ Script.aculo.us - Animation and effects http://script.aculo.us/ jQuery - General purpose - http://jquery.com/ Google Web Toolkit - http://code.google.com/webtoolkit/

Accessibility with Ajax It is not perfect Needs further study Lots of investment going on Fluid Project - Univ. Toronto http://www.fluidproject.org/

Google App EnginejQuery and Ajaxae-12-ajaxhttp://ae-12-ajax.appspot.com/

Topics Installing jQuery and adding it to base.htm Create new HTML fragment of messages at /messages - do notextend base.htm Change chat.htm to use JQuery / Javascript and a timer

Ajax Enabled Chat We will update the list of messages in the background every fourseconds This way we will see messages from other people “appear” onour screen - even if we are typing

We will put the chat messages in a divand update the div using Ajax.

Intalling JQuery Go to jquery.com - download the latest version - source code Place it in your application under the static folder

Installing jQuery To use the jQuery library in your HTML, you need to include it Typically this is done in base.htm in the head area head title App Engine - HTML /title link href "/static/glike.css" rel "stylesheet" type "text/css" / script type "text/javascript" src "/static/js/jquery-1.2.6.min.js" /script /head

HTML Fragments We need a page that just gives us message content No head material - not even a body tag

def main():application webapp.WSGIApplication([('/login', LoginHandler),('/logout', LogoutHandler),('/apply', ApplyHandler),('/members', MembersHandler),('/chat', ChatHandler),('/messages', MessagesHandler),('/.*', MainHandler)],debug )New Routing Entry

class MessagesHandler(webapp.RequestHandler):def get(self):que db.Query(ChatMessage).order("-created");chat list que.fetch(limit 10)doRender(self, 'messagelist.htm', {'chat list': chat list})Retrieve the recent the ChatMessage messages andput them in the context for out new messages.htmtemplate.

templates\messagelist.htm{% for chat in chat list %} p {{ chat.text }} ({{chat.user.acct}}){{chat.created date:"D d M Y"}} /p {% endfor %}Do not extend base.htm - we do not wantthe headers. Loop through the messages inthe context and print out each messageenclosed in a paragraph tag.

templates\messages.htm{% for chat in chat list %} p {{ chat.text }} ({{chat.user.acct}}){{chat.created date:"D d M Y"}} /p {% endfor %}

{% extends " base.htm" %}{% block bodycontent %} h1 Appengine Chat /h1 form method "post" action "/chat" p input type "text" name "message"size "60"/ input type "submit" name "Chat"/ /p /form {% ifnotequal error None %} p {{ error }} /p {% endifnotequal %}chatscreen.htm div id "chatcontent" Loading. /div script /* ![CDATA[ */function updateMsg() { .ajax({url: "/messages",cache: false,success: function(frag){ Msg()', 4000);}updateMsg();/* ]] */ /script {% endblock %}

div id "chatcontent" Loading. /div script /* ![CDATA[ */function updateMsg() { .ajax({url: "/messages",cache: false,success: function(frag){ Msg()', 4000);}updateMsg();/* ]] */ /script {% endblock %}The chatcontent div is where we willput the messages which we retrievefrom the /messages url.The ajax() call is from jQuery. Itretrieves a URL and then looks up anamed div and replaces its htmlcontent.Then we request that this be doneevery 4 seconds.

You can watch the log as the Ajax requestscome in every 4 seconds.The timestamp changes to make sure that thepages are not cached.

class ChatHandler(webapp.RequestHandler):def get(self):que db.Query(ChatMessage).order('-created');chat list que.fetch(limit 10)doRender(self,'chatscreen.htm',{ 'chat list': chat list })The chatscreen.htm no longer needs the list ofmessages since they comes out in “/messages”.

class ChatHandler(webapp.RequestHandler):def get(self):que db.Query(ChatMessage).order('-created');chat list que.fetch(limit 10)doRender(self,'chatscreen.htm')The chatscreen.htm no longer needs the list ofmessages since they comes out in “/messages”.