Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Meta-Programming with JavaScript       John Resig     Mozilla / jQuery
Browser Web Dev       HTML       DOM      JavaScript
DOM + HTML<html><head><script>window.onload = function(){  var test = document.getElementById(“test”);  test.style.color =...
A JS Library          HTMLjQuery    DOM         JavaScript
jQuery<html><head><script src=”jquery.js”></script><script>$(function(){    $(“#test”).css(“color”,”green”).show();});</sc...
Meta Programming                  HTML Meta        jQuery    DOMLibrary                 JavaScript
jQuery “2”<html><head><script src=”jquery.js”></script><script src=”jquery2.js”></script><script type=”text/jquery”>#test:...
Demohttp://ejohn.org/apps/jquery2/
More Details• http://jquery.com/• http://ejohn.org/apps/jquery2/•   http://ejohn.org/blog/advancing-javascript-with-librar...
Upcoming SlideShare
Loading in …5
×

Meta Programming with JavaScript

1,489 views

Published on

A talk I gave at Ignite Boston 2007.

Published in: Technology
  • Be the first to comment

Meta Programming with JavaScript

  1. 1. Meta-Programming with JavaScript John Resig Mozilla / jQuery
  2. 2. Browser Web Dev HTML DOM JavaScript
  3. 3. DOM + HTML<html><head><script>window.onload = function(){ var test = document.getElementById(“test”); test.style.color = ‘green’; test.style.display = ‘block’;};</script></head><body><div id=”test” style=”display:none;”> You have JavaScript enabled!</div></body></html>
  4. 4. A JS Library HTMLjQuery DOM JavaScript
  5. 5. jQuery<html><head><script src=”jquery.js”></script><script>$(function(){ $(“#test”).css(“color”,”green”).show();});</script></head><body><div id=”test” style=”display:none;”> You have JavaScript enabled!</div></body></html>
  6. 6. Meta Programming HTML Meta jQuery DOMLibrary JavaScript
  7. 7. jQuery “2”<html><head><script src=”jquery.js”></script><script src=”jquery2.js”></script><script type=”text/jquery”>#test: css “color” ”green” show</script></head><body><div id=”test” style=”display:none;”> You have JavaScript enabled!</div></body></html>
  8. 8. Demohttp://ejohn.org/apps/jquery2/
  9. 9. More Details• http://jquery.com/• http://ejohn.org/apps/jquery2/• http://ejohn.org/blog/advancing-javascript-with-libraries/• http://yuiblog.com/blog/2007/04/16/video-resig/

×