1 / 34

Problems

Problems. What issues js libraries address. 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

tory
Download Presentation

Problems

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related