JavaScript For People Who Don't Code

3,653 views

Published on

Published in: Technology
2 Comments
15 Likes
Statistics
Notes
No Downloads
Views
Total views
3,653
On SlideShare
0
From Embeds
0
Number of Embeds
202
Actions
Shares
0
Downloads
126
Comments
2
Likes
15
Embeds 0
No embeds

No notes for slide

JavaScript For People Who Don't Code

  1. 1. JAVASCRIPT FOR PEOPLE WHO DON’T CODE Christopher Schmitt | http://twitter.com/teleject eduWeb 2009 | Chicago
  2. 2. JAVASCRIPT DOESN’T UNDERSTAND GRAPHIC DESIGN PRINCIPLES. ERGO, I DON’T UNDERSTAND JAVASCRIPT
  3. 3. JAVASCRIPT FRAMEWORKS • What’s JavaScript? • What’s a JavaScript Framework? • What JavaScript Frameworks are out there? • How can I get started with a JS Framework? • What can I do with a JS Framework? • or “How can I bring the bling?”
  4. 4. WHAT IS JAVASCRIPT?
  5. 5. JavaScript is a scripting language most often used for client-side web development. It was the originating dialect of the ECMAScript standard. It is a dynamic, weakly typed, prototype-based language with first-class functions. JavaScript was influenced by many languages and was designed to look like Java, but be easier for non-programmers to work with. Although best known for its use in websites (as
  6. 6. was renamed in a co-marketing deal between Netscape and Sun, in exchange for Netscape bundling Sun's Java runtime with their then- dominant browser. The key design principles within JavaScript are inherited from the Self and Scheme programming languages. "JavaScript" is a trademark of Sun Microsystems. It was used under license for technology invented and implemented by Netscape Communications and current entities such as the Mozilla Foundation. - Source: Wikipedia
  7. 7. (X)HTML JavaScript CSS
  8. 8. (X)HTML noun JavaScript CSS verb adjective
  9. 9. (X)HTML noun JavaScript CSS verb adjective
  10. 10. WORD ABOUT SEMANTIC MARKUP
  11. 11. Semantic Markup
  12. 12. 91 http://www.w3.org/TR/html4/index/elements.html
  13. 13. Some Common HTML Errors • <p>&nbsp;</p> • <p> ... <br><br><br> ... <br><br><br>... • <h2>Subject Matter<br></h2> • <p><h2>Subject Matter</h2></p> • <p><img ></p>
  14. 14. WORD ABOUT GREAT CSS CODING
  15. 15. Setting Up the Easel
  16. 16. 3D View of Box Model
  17. 17. “CSS Reset” • http://developer.yahoo.com/yui/reset/ • http://meyerweb.com/eric/thoughts/ 2007/04/12/reset-styles/ • http://meyerweb.com/eric/tools/css/reset/ index.html
  18. 18. WHAT DOES JAVASCRIPT MEAN TO ME?
  19. 19. EXAMPLES OF JAVASCRIPT
  20. 20. JAVASCRIPT FRAMEWORKS
  21. 21. WHAT IS A JAVASCRIPT FRAMEWORK?
  22. 22. WHAT IS A JAVASCRIPT FRAMEWORK? •A collection of code that allows for cross-browser building of JavaScript functions without losing your hair. • Well, without losing not much hair. • This is JavaScript we are talking about after all.
  23. 23. AVAILABLE JAVASCRIPT FRAMEWORKS
  24. 24. AVAILABLE JAVASCRIPT FRAMEWORKS • Prototype : www.prototypejs.org/
  25. 25. AVAILABLE JAVASCRIPT FRAMEWORKS • Prototype : www.prototypejs.org/ • script.aculo.us : script.aculo.us/
  26. 26. AVAILABLE JAVASCRIPT FRAMEWORKS • Prototype : www.prototypejs.org/ • script.aculo.us : script.aculo.us/ • MooTools : www.mootools.net/
  27. 27. AVAILABLE JAVASCRIPT FRAMEWORKS • Prototype : www.prototypejs.org/ • script.aculo.us : script.aculo.us/ • MooTools : www.mootools.net/ • Spry : labs.adobe.com/technologies/spry/
  28. 28. AVAILABLE JAVASCRIPT FRAMEWORKS • Prototype : www.prototypejs.org/ • script.aculo.us : script.aculo.us/ • MooTools : www.mootools.net/ • Spry : labs.adobe.com/technologies/spry/ • Dojo Toolkit : dojotoolkit.org
  29. 29. AVAILABLE JAVASCRIPT FRAMEWORKS • Prototype : www.prototypejs.org/ • script.aculo.us : script.aculo.us/ • MooTools : www.mootools.net/ • Spry : labs.adobe.com/technologies/spry/ • Dojo Toolkit : dojotoolkit.org • MochiKit : www.mochikit.com/
  30. 30. AVAILABLE JAVASCRIPT FRAMEWORKS • Prototype : www.prototypejs.org/ • script.aculo.us : script.aculo.us/ • MooTools : www.mootools.net/ • Spry : labs.adobe.com/technologies/spry/ • Dojo Toolkit : dojotoolkit.org • MochiKit : www.mochikit.com/ • jQuery : jquery.com/
  31. 31. WHY JQUERY? • Light footprint at 15kb when gzipped & compressed • Utilizes knowledge of CSS selectors, • including cool CSS3 selectors! • Active developer community = plugins! • It’s free!
  32. 32. http://www.flickr.com/photos/teleject/432030263/
  33. 33. WHY JQUERY? • Light footprint at 15kb when gzipped & compressed • Utilizes knowledge of CSS selectors, • including cool CSS3 selectors! • Active developer community = plugins! • It’s free! • Cross-browser support: • IE6+, Firefox 2+, Safari 2+, Opera 9+
  34. 34. WHERE IS JQUERY USED? • Google • WordPress • Bank of America • Technorati • Digg • Major League Baseball • NBC • Drupal • CBS • Mozilla.org • Netflix • Twitter
  35. 35. GETTING STARTED WITH JQUERY
  36. 36. DOWNLOAD HELPER FILES @ HTTP://TR.IM/CX8K
  37. 37. <SCRIPT TYPE="TEXT/JAVASCRIPT" SRC="/_ASSETS/JS/JQUERY.JS"></SCRIPT> <SCRIPT TYPE="TEXT/JAVASCRIPT"> // TELL JQUERY WHAT TO DO HERE... </SCRIPT>
  38. 38. <SCRIPT TYPE="TEXT/JAVASCRIPT" SRC="_ASSETS/JS/JQUERY.JS"></SCRIPT> <SCRIPT TYPE= "TEXT/JAVASCRIPT" SRC="_ASSETS/JS/MICROWAVEPOPCORN.JS"></ SCRIPT>
  39. 39. READY EVENT <SCRIPT TYPE="TEXT/JAVASCRIPT" SRC="/_ASSETS/JS/JQUERY.JS"></SCRIPT> <SCRIPT TYPE="TEXT/JAVASCRIPT"> // TELL JQUERY WHAT TO DO HERE... $(DOCUMENT).READY(FUNCTION() { }); </SCRIPT>
  40. 40. <SCRIPT TYPE="TEXT/JAVASCRIPT" SRC="/_ASSETS/JS/JQUERY.JS"></SCRIPT> <SCRIPT TYPE="TEXT/JAVASCRIPT"> // TELL JQUERY WHAT TO DO HERE... $(DOCUMENT).READY(FUNCTION() { $("A"); }); </SCRIPT>
  41. 41. <SCRIPT TYPE="TEXT/JAVASCRIPT" SRC="/_ASSETS/JS/JQUERY.JS"></SCRIPT> <SCRIPT TYPE="TEXT/JAVASCRIPT"> // TELL JQUERY WHAT TO DO HERE... $(DOCUMENT).READY(FUNCTION() { $("A").CLICK(); }); </SCRIPT>
  42. 42. <SCRIPT TYPE="TEXT/JAVASCRIPT" SRC="/_ASSETS/JS/JQUERY.JS"></SCRIPT> <SCRIPT TYPE="TEXT/JAVASCRIPT"> // TELL JQUERY WHAT TO DO HERE... $(DOCUMENT).READY(FUNCTION() { $("A").CLICK(FUNCTION(EVENT){ }); }); </SCRIPT>
  43. 43. <SCRIPT TYPE="TEXT/JAVASCRIPT" SRC="/_ASSETS/JS/JQUERY.JS"></SCRIPT> <SCRIPT TYPE="TEXT/JAVASCRIPT"> // TELL JQUERY WHAT TO DO HERE... $(DOCUMENT).READY(FUNCTION() { $("A").CLICK(FUNCTION(EVENT){ ALERT(); }); }); </SCRIPT>
  44. 44. <SCRIPT TYPE="TEXT/JAVASCRIPT" SRC="_ASSETS/JS/JQUERY.JS"></SCRIPT> <SCRIPT TYPE="TEXT/JAVASCRIPT"> // TELL JQUERY WHAT TO DO HERE... $(DOCUMENT).READY(FUNCTION() { $("A").CLICK(FUNCTION(EVENT){ ALERT("HELLO, WORLD!"); }); }); </SCRIPT>
  45. 45. “HELLO, WORLD” IN REVIEW 1.Wait till page is finished loading 2.Select element(s) within the Web document 3.Perform something on that element (or those elements)
  46. 46. EXAMPLE: STRIPING TABLE ROWS
  47. 47. <TABLE> <TR VALIGN="TOP" CLASS="ODD"> <TD>SALMON</TD> <TD>OMEGA-3'S HELP THE BRAIN DEVELOP PROPERLY, REDUCE THE RISK OF ALZHEIMER'S, AND HELP PREVENT HEART DISEASE.</TD> </TR> <TR VALIGN="TOP"> <TD>SPINACH</TD> <TD>GREAT SOURCE OF FOLATE AND LUTEIN. PREVENTS BIRTH DEFECTS, HEART DISEASE, STROKE, AND PROTECTS YOUR SKIN FROM SUN DAMAGE.</TD> </TR> <TR VALIGN="TOP" CLASS="ODD"> <TD>SWEET POTATOES</TD> <TD>BETA CAROTENE PROTECTS YOUR SKIN FROM SUN DAMAGE.</TD> </TR> </TABLE>
  48. 48. TR.ODD { BACKGROUND-COLOR: #99FF99; }
  49. 49. :NTH-CHILD CSS3 SELECTOR • tr:nth-child(an+b) • tr:nth-child(2n) // every even row • tr:nth-child(2n+1) //every odd row • Shortcut: • tr:nth-child(even) • tr:nth-child(odd)
  50. 50. TR:NTH-CHILD(ODD) { BACKGROUND-COLOR: #99FF99; }
  51. 51. PROBLEM :NTH-CHILD • CSS3 Selector is supported by: • Safari 3 • Opera 9.5 • Browsers not supporting :nth-child: • IE6+ • Firefox 2+ • Safari 2
  52. 52. ENTER JQUERY
  53. 53. ENTER JQUERY #content tr.diff td{ background-color: #cbc1be; }
  54. 54. ENTER JQUERY <script type="text/javascript" src="/_assets/js/ jquery.js"></script> <script type="text/javascript"> // Tell jQuery what to do here... $(document).ready(function() { }); </script>
  55. 55. ENTER JQUERY <script type="text/javascript" src="/_assets/js/ jquery.js"></script> <script type="text/javascript"> // Tell jQuery what to do here... $(document).ready(function() { $("tr:even").addClass("diff"); }); </script>
  56. 56. ENTER JQUERY <script type="text/javascript" src="/_assets/js/ jquery.js"></script> <script type="text/javascript"> // Tell jQuery what to do here... $(document).ready(function() { $(".striping tr:even").addClass("diff"); }); </script>
  57. 57. PROOF OF IE6 SUPPORT
  58. 58. EXAMPLE: HIGHLIGHTING A TABLE ROW
  59. 59. CSS :HOVER PSEUDO-CLASS #content tr:hover td { background-color: #fbc057; }
  60. 60. :HOVER PROBLEM • Not supported in: • IE6 • IE7 • Supported in IE8
  61. 61. ENTER JQUERY #content tr.over td { background-color: #fbc057; }
  62. 62. ENTER JQUERY $(".striping tr");
  63. 63. ENTER JQUERY $(".striping tr").mouseover();
  64. 64. ENTER JQUERY $(".striping tr").mouseover(function() { });
  65. 65. ENTER JQUERY $(".striping tr").mouseover(function() { $(this); });
  66. 66. ENTER JQUERY $(".striping tr").mouseover(function() { $(this).addClass("over"); });
  67. 67. ENTER JQUERY $(".striping tr").mouseover(function() { $(this).addClass("over"); }); $(".striping tr").mouseover(function() { $(this).addClass("over"); });
  68. 68. ENTER JQUERY $(".striping tr").mouseover(function() { $(this).addClass("over"); }); $(".striping tr").mouseout(function() { $(this).removeClass("over"); });
  69. 69. CHAINING IN JQUERY $(".striping tr").mouseover(function() { $(this).addClass("over"); }); $(".striping tr").mouseout(function() { $(this).removeClass("over"); });
  70. 70. CHAINING IN JQUERY $(".striping tr").mouseover(function() { $(this).addClass("over"); }).mouseout(function() { $(this).removeClass("over"); });
  71. 71. EXAMPLE: SUBTLE ROLLOVERS
  72. 72. FADEIN AND FADEOUT • jQuery allows elements to fade in and fade out. • Disappear and re-appear. • Also allows elements to fade to a set opacity.
  73. 73. DISAPPEARING <P> $("p").click(function(){ $(this).fadeOut("slow"); });
  74. 74. GOOD USES • Error warnings on forms, if JavaScript validation finds an error • Hiding headings and showing form elements like Flickr’s edit everywhere interface • Hiding extraneous information until it’s needed by the user, e.g. more information on a product, etc.
  75. 75. MAKING A ROLLOVER
  76. 76. MAKING A CSS ROLLOVER #site-nav #certifylink a { text-indent: -9999em; width: 203px; height: 66px; display: block; }
  77. 77. MAKING A CSS ROLLOVER #site-nav #certifylink a:link, #site-nav #certifylink a:visited { background-image: url(/_assets/img/ certifications.gif); } #site-nav #certifylink a:link:hover, #site-nav #certifylink a:visited:hover { background-image: url(/_assets/img/ certifications_on.gif); }
  78. 78. MAKING SUBTLE ROLLOVERS $("#site-nav a");
  79. 79. MAKING SUBTLE ROLLOVERS $("#site-nav a").mouseover();
  80. 80. MAKING SUBTLE ROLLOVERS $("#site-nav a").mouseover(function () { });
  81. 81. MAKING SUBTLE ROLLOVERS $("#site-nav a").mouseover(function () { });
  82. 82. MAKING SUBTLE ROLLOVERS $("#site-nav a").mouseover(function() { $(this).fadeTo("slow", .50); });
  83. 83. MAKING SUBTLE ROLLOVERS $("#site-nav a").mouseover(function({ $(this).fadeTo("slow", .50); }); $("#site-nav a").mouseout(function({ $(this).fadeTo("slow", 1); });
  84. 84. MAKING SUBTLE ROLLOVERS $("#site-nav a").mouseover(function () { $(this).fadeTo("slow", .50); }).mouseout(function () { $(this).fadeTo("slow", 1); });
  85. 85. EXAMPLE: USING PNGS FOR IE6 AND BEYOND
  86. 86. PNGS THE EASY WAY • Write CSS rules with PNGs without worry • Download jquery.pngFix.js • http://jquery.andreaseberhard.de/pngFix/ • Include activator • There is no step 4.
  87. 87. <div class="container" style="background-image: url(/_assets/img/ background_container.png);"> ... </div>
  88. 88. <script type="text/javascript" src="/_assets/js/ jquery.pngFix.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(document).pngFix(); }); </script>
  89. 89. <!--[if lt IE 7]> <script type="text/javascript" src="/_assets/js/ jquery.pngFix.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(document).pngFix(); }); </script> <![endif]-->
  90. 90. TROUBLE WITH PNGS IN IE6 • Use proprietary filter properties in IE • Placed in backgrounds of elements • Theimages stretch to fit the dimensions of the space taken up by the element • Makesure dimensions of PNG images match the dimensions of the element • Don’t count on PNGs repeating, tiling
  91. 91. JQUERY TAKE AWAYS • Talked about what is JavaScript • How important JavaScript is for people who don’t code • Talked about where to get jQuery and how to install it into Web pages, sites.
  92. 92. JQUERY TAKE AWAYS • Example of how to do table striping • Basic premise of how jQuery works • Chaining events to one area of a document • Continued table example by showing how to highlight rows within a table
  93. 93. JQUERY TAKE AWAYS • How to fade out and in elements of a page • Use FadeTo set the opacity of elements • Use this technique to create subtle, more complex rollovers than available with CSS • Simple solution to PNGs in older versions of the IE browser • Andhow to pinpoint the solution to only those browsers
  94. 94. JQUERY SUMMIT • Official online conference for jQuery • All jQuery, all-day with 8 speakers • Coming this November • Early bird pricing will be $99/$399 • To learn more, follow: • http://environmentsforhumans.com • http://twitter.com/e4h
  95. 95. THANK YOU! Christopher Schmitt schmitt@heatvision.com http://twitter.com/teleject ChristopherSchmitt.com

×