1. A really fairly simple guide to: mobile browser-based application development (part 4, JQuery & DOM) Chris Greenhalgh G54UBI / 2011-03-03 1Chris Greenhalgh (cmg@cs.nott.ac.uk)

2. Contents DOM concepts JQuery – Selectors – Some common operations 2Chris Greenhalgh (cmg@cs.nott.ac.uk)

3. HTML describes a tree of elements Some 10-point text, Bold p style“font-size: 10” Attributes: “Some 10-point text,” b “Bold” 3Chris Greenhalgh (cmg@cs.nott.ac.uk)

4. The Document Object Model The DOM is an API onto the browser’s internal tree model of the web page – Allows Javascript in a web page to manipulate the page itself Add, delete and move “nodes”, i.e. elements and text Change attributes, including CSS styling – Exposed through the “document” object The API is quite verbose and not completely consistent in different browsers 4Chris Greenhalgh (cmg@cs.nott.ac.uk)

5. JQuery JQuery is a Javascript library or framework which makes it easier to write dynamic web pages – http://jquery.com/ http://jquery.com/ (There are lots of others, too) JQuery includes support for (amongst other things): – DOM and CSS manipulation – Network operations (AJAX) 5Chris Greenhalgh (cmg@cs.nott.ac.uk)

6. Setting up JQuery Before you can use JQuery (or an Javascript library) you must include it in your page… – Copy the javascript library, e.g. jquery-1.4.2.min.js – Add a script element to the HTML file header before any other scripts which depend on JQuery: 6Chris Greenhalgh (cmg@cs.nott.ac.uk)

7. Ready? Browsers are inconsistent in when Javascript runs and when the DOM is available So JQuery provides a way to run code as soon as the DOM is ready: $(document).ready( function() { alert(‘ready!’); } ); – i.e. “when the document is read, run the code for the given function” This is an anonymous (unnamed) function – just a wrapper for its statements 7Chris Greenhalgh (cmg@cs.nott.ac.uk)

8. JQuery code structure Most Jquery commands look something like this: $ ('#maindiv'). show('fast'); Global function Element selector Operation(s) (methods) Produces a list of elements to be operated on 8Chris Greenhalgh (cmg@cs.nott.ac.uk)

9. JQuery Selectors As with CSS, by – element (tag) name E.g. “p” – ID attribute E.g. “#Alice” – class attribute E.g. “.sans” And in a lot more ways – See JQuery “selectors” A paragraph. Another paragraph. Paragraph with class sans Another paragraph with class sans Paragraph with class sans and id Alice. 9Chris Greenhalgh (cmg@cs.nott.ac.uk)

10. JQuery operations Show/hide an element (animation) –.show(‘fast'),.hide () Get/set an attribute –.attr('value'),.attr('value','14'); Get/set the HTML content of an element –.html(),.html(' Stuff… '); Get/set a CSS style property value –.css('width'),.attr('width','100px'); Change CSS class –.addClass('boldc'),.removeClass('boldc'); Lots more – See JQuery API documentation http://api.jquery.com/ http://api.jquery.com/ 10Chris Greenhalgh (cmg@cs.nott.ac.uk)

11. Summary You should now be able to – Include JQuery in your browser app – Use JQuery to dynamically change the content and appearance of your application page Showing and hiding elements Changing content Changing CSS styling 11Chris Greenhalgh (cmg@cs.nott.ac.uk)