MOBILE Web apps: Web wherever you want

1. MOBILE Web apps: Web wherever you want http://www.flickr.com/photos/yourdon/3599753183/

2. Mobile web apps vs native mobile apps: Key architectural differences • Mobile web app • Is actually a web page • That runs in a browser on the mobile device • Is started by going to a web page • Native mobile app • Is actually a binary executable • That is stored and runs on the mobile device • Is downloaded & installed (usually) from an app store

3. Differences mobile web vs “regular” web • In mobile… • Super-extra effort to extract as much information about presentation as possible into CSS • Typically somewhat shorter title tags • Include a meta tag that describes scaling, e.g., <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3"> • Access to a broader range of APIs via JavaScript

4. Mobile web applications in a nutshell Web server Programs Web server Mobile computer (Smartphone) Browser Programs Programs Web server Programs The focus of a mobile web app is here Web server Programs

5. Making slick mobile web apps requires JavaScript (JS) • JavaScript is universally supported by all mobile web browsers • As a side note, many native web apps are implemented with JS as well • And most of these require you to be pretty good in particular with writing JS functions

6. Examples of some scripting <script>alert("hello world!");</script> Just mix some script tags into the HTML. The alert function just shows a textual popup.

7. Variables <script> var x = confirm("do you like it?"); alert("you said: "+x); </script> The confirm function prompts the user and returns a Boolean. There is no static type system. The variable x will get treated as a Boolean at runtime when it is assigned. Its evaluated value will be converted to a string for concatenation.

8. Conditionals and comparisons <script>vari = 40; if (i == 41-1 && i != '40') document.write('looks nice'); else document.write('kindaweird'); </script> Concatenation with a string yields a string. Comparison with == or != allows for type conversion, though. Comparison with === or !== requires an exact equality.

9. Loops <script> for (var x = 0; x < 100; x++) document.write(x+"<BR>"); </script> Much as in C or Java.

10. Arrays <script> varmyarray = ["A", "B", "C", "D"]; document.write(myarray[1]+"obis the man!"); </script> Each array object is indexed from 0 and has a .length property that indicates its number of elements.

11. Associative arrays <script> varmyobj = {name:"Jimmy", age:54}; alert(myobj.name+" is " + myobj.age); </script> You can nest objects if you like. For example, myobj = {name:"Jimmy", age:54, son:{name:"Sam", age:20}};

12. Functions <script> function piEstimate() { return 3.14; } alert("PI is approximately "+piEstimate()); </script>

13. Functions are objects • All functions are objects, and references to functions can be passed like C pointers varmyfunc = function(a,b) {return a+" "+b;}; varrv = myfunc("happy", "birthday"); alert(rv);

14. Passing a reference to a function <script> function showem(myarr, fn) { for (var x = 0; x < myarr.length; x++) fn(myarr[x]); } var f = (confirm("be angry?")) ? function(e) {alert("Here is your answer, jerk: "+e);} : function(e) {alert("I'm delighted to tell you: "+e);} vararr = [1,2,3,4]; showem(arr, f); </script>

15. Functions can be defined inside functions • When a function is called, it can define more functions inside of it function setupTimers() { for (var i = 1; i <= 3; i++) { var timer = function() {alert("wake up!");} setTimeout(timer, i*10000); } } setupTimers();

16. Functions can be members(aka “methods”) • You can assign a function to a slot in an associative array / object. • The function can reference the containing object via the “this” variable, as in Java. var obj = { ctr:0, incr:function() {return ++this.ctr;} }; for (var i = 0; i < 10; i++) alert(obj.incr()+" ");

17. Functions can have members • Functions are objects, right? So they can have members if they are instantiated (with “new”) • This can be confusing to some programmers and is therefore often avoided (which is ok). varCounterObj = function() { this.ctr = 0; this.incr = function() {return ++this.ctr;}; }; varcobj = new CounterObj(); for (var i = 0; i < 10; i++) alert(cobj.incr()+" ");

18. Function variables are subject to closure. • When a function is invoked, it canaccess any variable that was in scope when the function was defined. • If variable x is available when function is created, then variable x should be available at invocation. • This can be very good or very annoying.

19. Good closure: when you want to create private or temp variables • The “ctr” variable below is only visible to the incr function… effectively, it is a private variable. varCounterObj = function() { var ctr = 0; this.incr = function() {return ++ctr;}; }; var cobj = new CounterObj(); for (var i = 0; i < 10; i++) alert(cobj.incr()+" ");

20. In case you need a refresher on local variables… • http://en.wikipedia.org/wiki/Local_variable • "In computer science, a local variable is a variable that is given local scope. Such a variable is accessible only from the function or block in which it is declared… contrasted with global variables."

21. A cleaner way to use private variables (no need for the “new” keyword) • Function defines private vars, then returns an object that contains functionality as members. varcounterObj = function() { var ctr = 0; return {incr: function() {return ++ctr;}} }; var cobj = counterObj(); for (var i = 0; i < 10; i++) alert(cobj.incr()+" ");

22. You can also use nameless functions to avoid polluting the namespace. • For example, this version of the example avoids polluting the namespace with “counterObj”. (function() { varcounterObj = function() { var ctr = 0; return {incr: function() {return ++ctr;}} }; var cobj = counterObj(); for (var i = 0; i < 10; i++) alert(cobj.incr()+" "); })();

23. Bad closure: when several functions access the same variable • All the “timer” functions access the same variable i • Closure means variables are not copied—they’re shared <script> function setupTimers() { for (var i = 1; i <= 3; i++) { var timer = function() {alert("wake up! "+i);} setTimeout(timer, i*1000); } } setupTimers(); </script>

24. Working around closure • Make a new variable for each function. • Each new variable is a local variable. function setupTimers() { for (var i = 1; i <= 3; i++) { var makeTimer = function(j) { var timer = function() {alert("wake up! "+j);} setTimeout(timer, j*1000); }; makeTimer(i); } } setupTimers();

25. What's next for you… • Work through the JS examples in this lecture. • If closures are confusing, search online for javascriptclosure examples • javascriptkit.com has some great examples • Still confused? Ask instructor for help. • This lecture's material is indispensable. You must understand it if you are going to succeed with JS.