Problems

1. Problems • What issues js libraries address

2. Why? • COMMON tasks involved too many hack work arounds • Internet Explorer didn’t support standards • Internet Explorer didn’t fully support what it claimed • Libraries of work around solutions • DOM lacks useful features; too slow to add new features; too technical in nature

3. Common Tasks • Advanced websites have common needs • Even a widely supported DOM still does not make common tasks easier • Libraries address browser problems; usually its easy to add the missing feature everybody wished DOM had • Why re-invent the wheel (fixing browser bugs) when popular features can be bundled and save space

4. AJAX • AJAX background • XML requests over javascript; alternative predates it and is used in libraries as a fall back • similar to URL queries or submits to a hidden frame and DOM to access resulting page • Security limitations (same as DOM frames limits) • Complex; most use library implementations

5. JSON • Javascript can be loaded from anywhere • JSON is a notation short form for javascript objects • Security risks - trust outside javascript?? • JSON parsers written in javascript make sure no code is executed (use a library) • no-security limitation. google likes to use it

6. getElementBySelector() • Uses CSS style syntax to search for tags • EXTREMELY POPULAR & USEFUL • Possibly in DOM3 - NOT SUPPORTED • popular alternative to getElementById() • Libraries abstract this functionality

7. jQuery • THE javascript compatibility library

8. jQuery • Most popular at this time - built-into MS IE8+ • Primary purpose is to FIX flaws in MS IE 6 • Makes life easier for developers • adds some useful features • Today, its primary purpose is GONE! • habits, new feature bloat keep it in use

9. Background Concepts • What makes jQuery clever

10. Browser Problems • NEVER test for the browser name (navigator object) • document.getElementById() didn’t even exist on IE • IE6 lacked support; but minor updates fixed it • Testing for browser name might fail ! • New features are not widely supported for years • add features with hacks or alternative functions

11. Variables & Namespaces • Namespace = {scope} where variables exist • multiple js includes - conflicting names problem • use really long names • modify an object - add everything to 1 object • var myLibrary = new Object(); • myLibrary.get = function(x){ return ...get...ById(x);}

12. jQuery’s use of $ • Javascript names allow $ in variable names (many languages require $ it was put there for those people) • Most the planet didn’t think of using $ • var x; //is ok • var $; //is just as ok • var jQuery; // object jQuery puts its library in • $= jQuery; // jQuery also uses this

13. Flexible Parameters • 1 main function used • $(“#cssid”) • string = css selector search • html string (it tests the string to decide) • function = runs after page loads • element (html tag object)

14. Parameter notation • common convention from unix, used everywhere • method( param1, param2 | param3, [param4] ) • param1 is typical • param2 or param3 - not both - () may be used • param4 is OPTIONAL

15. Chaining • “elegant” for some, bad for others. • cout<<“string”<<endl<<45<<hex<<15; //c++ • object methods return the same object • $(“#cssid”) = jQuery object (and also an array too) • $(“#cssid”).css(“color”,”red”).show(); • all 3 return jQuery object (basically)

16. Encapsulation • Encapsulation - create a new object that contains others • Maximum flexibility • more work to implement • perfect for when the objects may change (browsers) • this is a BIG part of OOP programming design

17. Binding variables (closure) • “breaks” the normal scoping rules for variables; not all languages support this as a built-in feature • function f(){ • var parameter= “data”; • setTimeout( function(){ alert(parameter); } , 50); • } • Normally, variables die outside of scope; not here.

18. prototype.js • Popular alternative to jQuery • used in web frameworks • Ruby on Rails and others

19. Javascript "Hacking" • Inheritance - modify the parent, child objects inherit • Javascript does this with "prototype" object • You can't make classes, but you can hack objects • all objects have .prototype property which POINTS to an object with more properties (or it is undefined) • Prototype "patches" or "repairs" DOM objects • Makes bad browsers act good. adds some stuff too

20. Javascript's prototype • Element (all HTML tags "inherit" from Element) • Element.prototype.newProperty = 5; • Now all HTML tag objects have .newProperty • Element.prototype.hacked_On_Method = function(){}; • You can add missing DOM features or make new ones • PROBLEM: name conflicts.

21. jQuery features • jquery.com - GREAT documentation

22. getBySelector • $(‘#cssid’) • $(‘.cssclass’) • $(‘tagname’) • returns an Array but modified with jQuery features • Items in the array are HTML Elements not jQuery objects: • $( $(‘#cssid’)[0] ).css(‘color’, ‘red’);

23. in Firebug console (WITH jQuery.js script used on page) • $(‘#cssid’); • [div#cssid] //jQuery hacked array • $(‘input’); • [input, input, input, input] //jQuery hacked array • $(‘input’).css(‘color’,‘red’); //changes css on all • $(‘input’)[1]; • input // html element object; no jQuery features • $( $(‘input’)[1] ); // same thing jQuery object wrapped

24. css(‘propertyname’) = value • css(‘propertyname’, ‘value’) = jquery object • MSIE didn’t have style object - this fixes that • hide() / show() / toggle() - changes display: none/etc • hide/show(duration, [callback]) • duration = milliseconds or ‘fast’ or ‘slow’ • callback = function to run after animation is done • IFF duration then it alters more than display to perform the animation and changes the display

25. height / width / innerHeight / innerWidth / outerHeight / outerWidth • calculates and returns dimensions of element • this is a difficult process so jQuery really is useful on this one - but it could be slow • NOTE: since searches return an array, functions that return values only work on the 1st item in the array • addClass, removeClass, hasClass, toggleClass • multiple html classes --- class=”c1 c2 c3”

26. fadeIn() / fadeOut() • ( [duration], [callback function] ) works like hide/show • $(‘#id’).animate( {top:”10px”}, “fast”, “linear”, function(){ alert(‘callback: done’); } ); • this moves from anywhere to top 10px • note the use of an Object Literal when specifying the css properties to animate

27. Tree Transversal • HTML tags are in a hierarchy / tree • $(…).children() returns an jQuery array of the children tags (only direct children; not grandchildren • first, last, next, previous all return siblings • find / filter / __ Until provide searching features on descendants • Recommend using FireBug and an ordered outline HTML page to explore these features

28. Remote Data • “AJAX” and “JSON” / Javascript • $(‘#sometag’).load(‘your URL’, function(){ alert(‘done loading’) }); • this is similar to loading an invisible frame and using javascript to access the DOM of that frame - limitations and all. also see jQuery.get() • jQuery.getScript() / getJSON() • add javascript by URL - some less limitations

29. Common Uses • AJAX is mostly used by web frameworks which merely use it to replace parts of a page with HTML • simulation of frames without the pitfalls • no javascript coding needed; server tools insert a simple javascript that just replaces HTML • JSON is heavily used by google • javascript heavy client side; faster running; less security; sometimes javascript, sometimes JSON.

30. jQuery Events • DOM event handling

31. HTML - onclick, onkeyup, onmouseover, etc • DOM - click, keyup, mouseover, etc (subtract ‘on’) • TagObject.addEventListener( ‘click’, functionName ); • listener function is passed an event object • jQuery - same as dom; but encapsulated + simplified • easier to use • a few cross browser issues still exist; hack work arounds can only go so far on MSIE

32. $(‘#id’).click( function(){ } ) • no “on” like HTML uses • give it your function’s name to run • commonly an “anonymous” function with no name • function(e){ alert(e); } • "this"refers to the tag itself • jQuery passes tweaks DOM Event Object to function

33. Chaining Examples • $(‘#id’).fadeIn(‘slow’).addClass(‘alert’).html( "<h1>Hi!</h1>" ).click( function(){ alert("you clicked");} ); • finds tag with the id=“msg”, adds css class ‘alert’, replaces the inner HTML, slowly fades in, adds click • $(‘.expand’).click(function(){ $(this).children().toggle(); }); • finds all tags with class=“expand”, adds click event handler to hide/show toggle the children tags

34. References • Many books now exist for jQuery, some for prototype • Most are padded by introducing concepts from DOM • http://docs.jquery.com • http://docs.jquery.com/Tutorials • http://docs.jquery.com/Tutorials:Live_Examples_of_jQuery • http://visualjquery.com