Chris Greenhalgh G54UBI / 2011-02-24

A really fairly simple guide to:mobile browser-based application development (part 3, JavaScript) Chris Greenhalgh G54UBI / 2011-02-24 Chris Greenhalgh (cmg@cs.nott.ac.uk)

Content • Inline scripting in HTML • Using external scripts in HTML • A quick introduction to Javascript • Javascript in the browser • Events and functions Chris Greenhalgh (cmg@cs.nott.ac.uk)

Inline Scripting http://www.cs.nott.ac.uk/~cmg/G54UBI/mobile/HeaderScript.html • An HTML document can include <script> elements containing scripting language instructions • These are executed as they are read by the browser <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Hello</title> <meta name="viewport" content="width=device-width"> <script type="text/javascript"> alert('Hello from the header'); </script> </head> <body> <h1>Hello</h1> </body> </html> Chris Greenhalgh (cmg@cs.nott.ac.uk)

External scripts http://www.cs.nott.ac.uk/~cmg/G54UBI/mobile/ScriptFile.html • <script> elements can link to external files of scripting language • These are loaded and run by the browser <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Hello</title> <meta name="viewport" content="width=device-width"> <script type="text/javascript" src="ScriptFile.js"></script> </head> <body> <h1>Hello</h1> </body> </html> /* ScriptFile.js */ alert('Hello from the Script file'); Chris Greenhalgh (cmg@cs.nott.ac.uk)

JavaScript • JavaScript is the most commonly used web (client-side) scripting language • It is based on the ECMAScript standard • It has very little in common with Java except for some elements of surface syntax • Case-sensitive • Uses ‘{‘ … ‘}’ around blocks of statements • Uses ‘;’ to end statements • Uses // … and /* … */ as comments Chris Greenhalgh (cmg@cs.nott.ac.uk)

JavaScript data types • The main data types are: • Boolean: true or false • Number: 0, 1, -1, 1.5, … • String: ‘some text’, “some more text”, ‘a newline\n’ • Array: [], [1], [1,2,3], … • Object: {}, {a:1,b:’foo’}, … • Other special values are: • null – exists but has no value • undefined – does not exist Chris Greenhalgh (cmg@cs.nott.ac.uk)

JavaScript variables and expressions • JavaScript has untyped variables, defined using var, e.g.: var a, b;a = 4;b=a+4;var b=‘hello’; • There is a standard range of operators, e.g., + (number add, string concat.), -, * (multiply), / (divide), >, <, <=, >=, == (equal), != (not equal), && (logical and), || (logical or), ! (logical not) Chris Greenhalgh (cmg@cs.nott.ac.uk)

Arrays • An empty array can be created like this: • var a=new Array(); • Array elements are accessed/set using [] notation, e.g. • a[0] = 1;a[1] = 2;a[2] = a[1]; • The array’s length is exposed as the length property: • alert(‘length is ‘+a.length); Chris Greenhalgh (cmg@cs.nott.ac.uk)

Objects • An object is a set of properties (named values), e.g. • var o1={a:2}; • Properties are accessed/set using ‘.’ (dot) or [] notation, e.g. • o1.b = 5;var c = o1.a;o1[‘b’] = 6; // same as o1.b=6! • Setting a property creates it if it doesn’t exist • Reading a property that doesn’t exist returns undefined Chris Greenhalgh (cmg@cs.nott.ac.uk)

Conditional execution • Conditional execution uses if/else, e.g. • if (4>3) alert(‘hooray’); • if (3<4) { alert(‘eh?’); } else { alert(‘good’);} Chris Greenhalgh (cmg@cs.nott.ac.uk)

For loops (see also while) • Repeated execution and iteration uses for, e.g. • vari;for (i=0; i<5; i++) alert(‘i is now ‘+i); • For iterating over an array’s elements or an object’s properties you can also use, for…in, e.g.: • var values=[1,2,4,6];for (var key in values) alert(‘values[‘+key+’]=‘+values[key]); Chris Greenhalgh (cmg@cs.nott.ac.uk)

Functions • Functions are declared using function, e.g. • function square(x) { return x*x;} • Functions are called using the name and parameters in brackets, e.g. • var a = square(4); • An object’s properties can be functions, i.e. effectively Java methods, e.g. • someObject.someFunction(5); // calls method Chris Greenhalgh (cmg@cs.nott.ac.uk)

Exceptions • Sometimes Javascript errors cause “exceptions” to be “thrown”; to detect the error it must be “caught”, e.g. • try { // this code might go wrong…boguscode(123);} catch (err) { alert(‘Found an error: ‘+err.description);} Chris Greenhalgh (cmg@cs.nott.ac.uk)

Other Objects and methods • There are quite a lot of other classes and functions available in JavaScript • E.g. Math, Date, RegExp, … • Please refer to other resources for details Chris Greenhalgh (cmg@cs.nott.ac.uk)

Javascript in the browser • In the browser, javascript has access to some standard objects which let it do stuff, including: • document – the browser’s model of the HTML document • window – the browser window itself • Each object has a set of properties and methods which allow Javascript to find out what is happening and affect the browser and the document/page (=dynamic HTML) Chris Greenhalgh (cmg@cs.nott.ac.uk)

Example of document.write http://www.cs.nott.ac.uk/~cmg/G54UBI/mobile/DocumentWrite.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Hello</title> <meta name="viewport" content="width=device-width"> </head> <body> <h1>Hello</h1> <p>2+2= <script type="text/javascript"> document.write(2+2); </script> </p> </body> </html> You probably won’t use document.write most of the time –see the later material on JQuery and the DOM Chris Greenhalgh (cmg@cs.nott.ac.uk)

Browser Events • The browser can also run javascript when events occur in the browser • E.g. page finishes loading, user clicks a link or button, after a certain time, network data received • This allows the page in the browser to respond to user input and be proactive Chris Greenhalgh (cmg@cs.nott.ac.uk)

Onclick example • The function click() is defined when the header is read • Later, when the user clicks the link the function is executed • Because it returns false the browser does not try to load the referenced page <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Hello</title> <meta name="viewport" content="width=device-width"> <script type="text/javascript"> function click() { alert('You clicked!'); return false; } </script> </head> <body> <h1>Hello</h1> <a href="#dummy" onclick="click()"> Click me!</a> </body> </html> Chris Greenhalgh (cmg@cs.nott.ac.uk)

Conclusions • Javascript is a common scripting language for adding behaviour to web pages in the browser • i.e. the server is not involved in running javascript • Javascript can be executed as the page loads and when events (e.g. user input) happen in the browser, and it can dynamically change the page • You should now: • Know how to include javascript in a web page, both inline and in an external script file • Be able to read and write simple fragments of javascript Chris Greenhalgh (cmg@cs.nott.ac.uk)

Other resources • ECMAScript specification(s), http://www.ecma-international.org/publications/standards/Ecma-262.htm • Online tutorials, e.g. • http://www.w3schools.com/ • http://en.wikipedia.org/wiki/JavaScript • Eclipse with the Javascript Development tools (and other web development tools) will do syntax highlighting and code suggestions Chris Greenhalgh (cmg@cs.nott.ac.uk)

Chris Greenhalgh G54UBI / 2011-02-24