a really fairly simple guide to mobile browser based application development part 3 javascript
Download
Skip this Video
Download Presentation
Chris Greenhalgh G54UBI / 2011-02-24

Loading in 2 Seconds...

play fullscreen
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 ([email protected])

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 ([email protected])

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 ([email protected])

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 ([email protected])

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 ([email protected])

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 ([email protected])

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 ([email protected])

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 ([email protected])

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 ([email protected])

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 ([email protected])

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 ([email protected])

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 ([email protected])

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 ([email protected])

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 ([email protected])

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 ([email protected])

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 ([email protected])

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 ([email protected])

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 ([email protected])

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 ([email protected])

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 ([email protected])

ad