1. Martin Kruliš 18. 4. 2016 by Martin Kruliš (v1.1)1

2.  DOM Node Traversing ◦ Node.firstChild, Node.lastChild ◦ Node.childNodes ◦ Node.nextSibling, Node.previousSibling ◦ Node.parentNode, Node.parentElement ◦ Node.nodeName, Node.nodeValue ◦ Node.attributes – relevant for elements only ◦ Document.documentElement – root element ◦ Document.getElementsByTagName(tagName) ◦ Document.getElementById(id) 18. 4. 2016 by Martin Kruliš (v1.1)2

3.  DOM Content Manipulation ◦ Document.createElement(), … ◦ Node.appendChild(), Node.insertBefore() ◦ Node.replaceChild(), Node.removeChild() ◦ Element.getAttribute(), Element.setAttribute() ◦ Element.removeAttribute() ◦ Node.cloneNode(deep)  Extra Features ◦ Node.innerHTML, Node.outerHTML ◦ Document.evaluate(xpath) 18. 4. 2016 by Martin Kruliš (v1.1)3

4.  Event Model ◦ Top-level scripts are executed immediately ◦ Other code can be attached to various events ◦ One event loop processed in single thread 18. 4. 2016 by Martin Kruliš (v1.1)4 Event Queue Mouse Moved User Clicked Loading Finished Window Resized Dispatcher DOM Tree Target Processes one event at a time Target element is found … If the event is not processed, it bubbles up

5.  Event Handling ◦ Events may be handled by callback functions  Attached directly in HTML  Or by Javascript code myButton.onclick = function(event) {... } or myButton.addEventListener('click', fnc, capture); ◦ Todays choice – addEventListener()  Allows multiple handlers on one event  Works on any DOM element (not just HTML)  Allows early event capturing 18. 4. 2016 by Martin Kruliš (v1.1)5 Example 1

6.  DOM Issues ◦ DOM is generic API  It aims to cover functionality, not to streamline code  It is also being steered by other languages (e.g. XML) ◦ Writing DOM code is rather tedious  Considering most task have repetitive pattern (e.g., binding event handlers) ◦ Compatibility issues in mainstream browsers  DOM1 is supported, DOM2 mostly, and DOM3 partially 18. 4. 2016 by Martin Kruliš (v1.1)6

7.  jQuery Library ◦ Modern JavaScript library for basic operations  Easy to learn and use  Lightweight footprint  Supports almost all currently used browsers ◦ Key features  Simplified DOM traversal and manipulation  Event handling  CSS based animations and effects  Unified AJAX API with support for data (de)serialization  Extendable with plugins and UI libraries 18. 4. 2016 by Martin Kruliš (v1.1)7

8.  jQuery Object ◦ Function object in global name jQuery and $ ◦ Acts as a function that returns set of nodes and as a container object for library functions  “Select and Do” Philosophy 1.Select a set of DOM nodes 2.Apply (a sequence of) operation(s) on the whole set of selected nodes  Most methods support invocation chaining $(selector).doIt().doAnother().doSometingElse(); 18. 4. 2016 by Martin Kruliš (v1.1)8

9.  Selector ◦ Selects set of DOM nodes for further usage $("selector") or $(DOMnode) or $("HTMLfragment") ◦ jQuery Selectors are inspired by CSS3 selectors  "div" – select elements of given name  "#id" – select element by its ID  ".class" – select elements with specific CSS class  "ancestor descendant" – express DOM relations  :disabled, :visible, :checked, … ◦ Subsequent operations work on the whole set $("h1").hide(); 18. 4. 2016 by Martin Kruliš (v1.1)9

10.  Manipulating HTML Structure ◦ Wrappers for DOM manipulation functions  prepend(), append(), before(), after() – insert content before/after inside/outside selected elements  remove(), empty(), detach() – remove (child) nodes  replaceAll(), replaceWith()  html(), text() – manipulate with content  clone() – create a deep copy of the element  attr(), prop(), removeAttr(), removeProp()  Attr ~ HTML attributes, prop ~ properties (checked, …) ◦ Reading methods take only the first element in set 18. 4. 2016 by Martin Kruliš (v1.1)10

11.  Traversing DOM Tree ◦ Similar to XPath processing ◦ Using set of nodes as starting point  add() – unite one set with another  children() – get children of all nodes  next() – get next sibling for each node  parents() – get all node ancestors ◦ Node set filtering  filter() – filter by functor or selector  not() – remove given nodes (or by selector)  slice() – get a subrange (by indices) 18. 4. 2016 by Martin Kruliš (v1.1)11

12.  Event Handlers Binding ◦ Bind handlers by event name on(), off(), one()  jQuery.proxy() – binds functor within a context ◦ Triggering events - trigger(), triggerHandler() ◦ Document loading events $(document).load(),. unload(),. ready() ◦ Specialized event handling/triggering functions click(), mousedown(), hover(), keydown(), … ◦ Event object is wrapped in jQuery.Event 18. 4. 2016 by Martin Kruliš (v1.1)12

13.  Cascading Style Sheets Manipulation ◦ Reading writing all properties css(property [, value]) ◦ Manipulation with CSS classes addClass(), removeClass(), hasClass(), toggleClass() ◦ Element position position(), offset() ◦ Element size height(), width(), innerHeight(), outerWidth() ◦ The CSS management mechanism can be overridden for specific properties by jQuery.cssHooks() 18. 4. 2016 by Martin Kruliš (v1.1)13

14.  Animations ◦ Achieved using CSS properties and timers ◦ Each element have its own effect queue  Animations are inserted in the queue and processed iteratively by timer handler  queue(), dequeue(), clearQueue(), stop(), finish(), delay()  animate() – inserting custom CSS animations  With specified duration and interpolation function  hide(), show(), toggle()  fadeIn(), fadeOut(), slideDown(), slideUp() 18. 4. 2016 by Martin Kruliš (v1.1)14

15.  Wrapper for Asynchronous Transfers ◦ jQuery.ajax() – create request  Allows many parameters to be set easily  Handlers can be attached to created request object ajaxComlete(), ajaxError(), ajaxSend(), … ◦ Helper functions for data (de)serialization serialize(), serializeArray(), jQuery.param() ◦ Shorthand functions for usual use cases get(), getJSON(), getScript(), post(), load() 18. 4. 2016 by Martin Kruliš (v1.1)15

16.  Asynchronous Events ◦ Problem with chaining handlers of async. operations ◦ jQuery.Deferred object represents pending action  The action can end successfully or fail resolve(), resolveWith(), fail(), failWith()  Handlers can be attached to various events done(), fail(), always(), then()  Operation progress can be reported (if applicable) notify(), notifyWith(), progress()  promise() – returns promise object  Restricted API that do not allow object modification ◦ Deferred object aggregation jQuery.when() 18. 4. 2016 by Martin Kruliš (v1.1)16

17.  Managing Callback Queues ◦ If you create complex APIs, your objects may need to report events as well ◦ jQuery.Callbacks() – returns callback list object  Basic functions for callback manipulation add(), remove(), has()  Fire the event and call all callbacks fire(), fireWith()  And provide some additional control disable(), lock() ◦ Note that callbacks are called synchronously  Be careful when firing callbacks inside callbacks 18. 4. 2016 by Martin Kruliš (v1.1)17

18.  CSS Classes as Flags ◦ CSS class assigned to an element is typically used to alter appearance ◦ It may also be used as a state indicator $(".selectable").click(function(){ $(this).toggleClass("selected"); }); $("#saveBtn").click(function(){ var items = []; $(".selected").each(function(){ items.push($(this).attr("id")); });... }); 18. 4. 2016 by Martin Kruliš (v1.1)18

19.  Content Hiding ◦ The entire content of the web (page) is loaded ◦ Currently irrelevant parts are hidden by a script ◦ Used in various UI patterns  Page tabs, Accordion, Expanding tree, Form wizard, …  Content Replication ◦ Repetitive parts of HTML structure  Data table rows, multi-input forms, … ◦ Hidden HTML fragment (template) ◦ The template is cloned, inserted at a proper place, and shown 18. 4. 2016 by Martin Kruliš (v1.1)19 Example 2

20.  AJAX Overrides ◦ Action Buttons  Simple operations that does not require input  Switch state, delete, generate password, start service, …  Designed as a hyperlink, but handled by JavaScript  Click event initiates AJAX POST request instead ◦ AJAX Forms  Submit event is overridden, form contents is assembled into POST request and sent by AJAX request  Much simpler handling of user errors (invalid fields)  Does not require session storage like sticky forms 18. 4. 2016 by Martin Kruliš (v1.1)20 Example 3

21.  jQuery User Interface Widgets ◦ Separate library with non-standard UI components ◦ Containers  Accordion, Tabs, Dialog ◦ Text input augmentations  Autocomplete, Date picker, Spinner ◦ Specialized controls  Progress bar, Slider, (Nested) Menu ◦ Various helpers  Button, Tooltip ◦ API (abstraction) for your own widgets 18. 4. 2016 by Martin Kruliš (v1.1)21 Example

22.  jQuery Mobile ◦ Specialize branch for handheld devices ◦ Particular emphasis on portability ◦ HTML5-based UI, which is optimized for touch screens  Integrated with modern CSS and theme support  Widgets specialized for various screen sizes 18. 4. 2016 by Martin Kruliš (v1.1)22

23.  Unit Tests for JavaScript ◦ Platform for in-browser JS code testing ◦ Used along with (and also tests) jQuery, jQuery UI, and jQuery Mobile ◦ API for test specification test( "hello test", function() { ok( 1 == "1", "Passed!" ); }); ◦ Various helper functions for creating assertions 18. 4. 2016 by Martin Kruliš (v1.1)23

24. 18. 4. 2016 by Martin Kruliš (v1.1)24