Chris Greenhalgh G54UBI / 2011-03-03

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

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

3. HTML describes a tree of elements <p style="font-size: 10"> Some 10-point text, <b> Bold </b> </p> Attributes: p style “font-size: 10” “Some 10-point text,” b “Bold” Chris 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 Chris 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/ • (There are lots of others, too) • JQuery includes support for (amongst other things): • DOM and CSS manipulation • Network operations (AJAX) Chris Greenhalgh (cmg@cs.nott.ac.uk)

6. Setting up JQuery • Before you can use JQuery (or an Javascriptlibrary) 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: <script type="text/javascript" src=" jquery-1.4.2.min.js"></script> Chris 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 Chris 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 elementsto be operated on Chris 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” <p>A paragraph.</p> <p>Another paragraph.</p> <p class="sans"> Paragraph with class sans</p> <p class="sans"> Another paragraph with class sans</p> <p class="sans" id="Alice"> Paragraph with class sans and id Alice.</p> Chris 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('<p>Stuff…</p>'); • 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/ Chris 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 Chris Greenhalgh (cmg@cs.nott.ac.uk)