CMSC434 TUTORIAL #3 HTML CSS JavaScript Jquery Ajax + Google AppEngine Mobile WebApp HTML5

Transcription

1 CMSC434 TUTORIAL #3 HTML CSS JavaScript Jquery Ajax + Google AppEngine Mobile WebApp HTML5

2 JQuery Recap JQuery source code is an external JavaScript file <script src="h;p://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> Provides convenient selectors for DOM $( tag ), $( #id ), $(.class ), $(this), $( tag#id ), $( tag.class ) $( #id >.class:first ) Simpler methods for DOM manipulason $().css( font- size, 16px ) $().html( <div> hello </div> ), $().append( <div> added text </div> ) $().hide(), $().show( fast ) $().addclass( bu;onselected ), $().removeclass( bu;onnormal ) Event listener $().click( funcson () { // do something here } ); $(document).ready( funcson() { } ); Request data and Process response $.get( myhtmlpage.html, funcson(response) { // do something with response });

3 JQuery DOM ManipulaSon > reference page $(selector).append(content) >link : insert content to the end of the selected DOM element(s) : e.g. expanding list of items in Google Image search before <div class="container >!!<div class="inner">hello</div>!!<div class="inner">goodbye</div>! </div>! afer $('.inner').append('<p>test</p>'); <div class="container >!!<div class="inner">hello!!!<p>text</p>!!</div>!!<div class="inner">goodbye!!!<p>text</p>!!</div>! </div>! similarly, before() insert content before the selected, prepend() insert to the beginning in the selected elements.

4 JQuery DOM ManipulaSon > reference page $(selector1).remove(selector2) >link : remove selected item from DOM structure : remove items(selector2) in items(selector1) before <div class="container">!!<div class="hello">hello</div>!!<div class="goodbye">goodbye</div>! </div>! afer $('.hello').remove(); or $( div').remove(.hello ); <div class="container >!!<div class= goodbye">goodbye</div>! </div>!

5 JQuery effects > reference page.animate >link : creates animason effect using any numeric CSS property $('#clickme').click(function() {! $('#book').animate({! opacity: 0.25,! left: '+=50',! height: 'toggle'! }, 5000, function() {! // Animation complete.! });! });!.toggle >link : show & hide alternasvely in one acson $('#clickme').click(function() {!!$('#book').toggle('slow', function() {!!!// Animation complete.!!});! });!

6 JQuery UI example > reference page include this first! <script type="text/javascript" src="js/jquery- ui custom.min.js"></script> sortable resizable accordion datepicker tabs slider

7 AJAX Asynchronous JavaScript and XML Exchanging data with a server, and update parts of a web page- without reloading the whole page Why Asynchronous? Nobody wants to hold process while waisng for response from the server Define CallBack func+on that will handle the response later Examples? Google Instant Search Facebook show more feeds bu7on Use Firebug > Net panel to monitor current web page s Ajax communicason

8

9 How to use AJAX Using XMH;pRequest object and pure Javascript var xmlhttp; if (window.xmlhttprequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }! xmlhttp.onreadystatechange=function() { if (xmlhttp.readystate==4 && xmlhttp.status==200) { document.getelementbyid("mydiv").innerhtml=xmlhttp.responsetext; } } xmlhttp.open("get","ajax_info.txt",true); xmlhttp.send();! Using Jquery method: the type of request: GET or POST url: the locason of the file on the server async: true (asynchronous) or false (synchronous) creasng object callback funcson it selects mydiv and replace its inner html with response from the server execute $.ajax({!type: GET,!!!!url: ajax_info.txt,!!!!success: function(response) { $( #mydiv ).html(response); }! });!

10 $.ajax in detail $.ajax({!type: POST, // GET (Default) or POST!!!!!!url: some.php,!!!!!!data : name=john&location=boston,!!!!!!async: true, // if false, browser holds until server responds!!!!!!success: function(response) {!!!!!!!var data = $.parsejson(response);!!!!!!!!!$( #console ).text(data.message);!!!!!!!$.each(data.games, function(i,v) {!!!!!!!!$( #gamelist ).append(!!!!!!!!! <DIV> +v.name+, +v.desc+ </DIV>!!!!!!!!);!!!!!!!});!!!!!!},!!! });! $.parsejson converts string to JavaScript object. In this example, we assumed to get response like { message : you have games below, games : [ [ name : call of duty, desc : black ops ], [ name : diablo 3, desc : awesome game ] ] } And parsed JavaScript object will be assigned to data, so that data.message = you have games below data.games[0].name = call of duty, This iterates each element of data.games. i : index number (0~ ), and v : element of each itera+on.

11 Google AppEngine (GAE) > reference page What is it? it s a web server + DB system Use Python or JAVA Why GAE? free when it s small No complex system administrason Scale up automascally RelaSvely simple to code Downside Stuck in GAE I m too spoiled to use PHP again L

12 GAE demo