A really fairly simple guide to mobile browser based application development part 3 javascript
Download
1 / 20

Chris Greenhalgh G54UBI / 2011-02-24 - PowerPoint PPT Presentation


  • 51 Views
  • Uploaded on

A really fairly simple guide to: mobile browser-based application development (part 3, JavaScript). Chris Greenhalgh G54UBI / 2011-02-24. Content. Inline scripting in HTML Using external scripts in HTML A quick introduction to Javascript Javascript in the browser Events and functions.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Chris Greenhalgh G54UBI / 2011-02-24' - megara


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
A really fairly simple guide to mobile browser based application development part 3 javascript

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
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
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
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

  • 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
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 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
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
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

  • 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
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

  • 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
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
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
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
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
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
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
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
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)