JavaScript For People Who Don't Code

1. JAVASCRIPT FOR PEOPLE WHO DON’T CODE Christopher Schmitt | http://twitter.com/teleject eduWeb 2009 | Chicago

2. JAVASCRIPT DOESN’T UNDERSTAND GRAPHIC DESIGN PRINCIPLES. ERGO, I DON’T UNDERSTAND JAVASCRIPT

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. WHAT IS JAVASCRIPT?

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 ﬁrst-class functions. JavaScript was inﬂuenced 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. 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. (X)HTML JavaScript CSS

8. (X)HTML noun JavaScript CSS verb adjective

9. (X)HTML noun JavaScript CSS verb adjective

10. WORD ABOUT SEMANTIC MARKUP

11. Semantic Markup

12. 91 http://www.w3.org/TR/html4/index/elements.html

13. Some Common HTML Errors • <p> </p> • <p> ... <br><br><br> ... <br><br><br>... • <h2>Subject Matter<br></h2> • <p><h2>Subject Matter</h2></p> • <p><img ></p>

14. WORD ABOUT GREAT CSS CODING

15. Setting Up the Easel

16. 3D View of Box Model

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. WHAT DOES JAVASCRIPT MEAN TO ME?

19. EXAMPLES OF JAVASCRIPT

20. JAVASCRIPT FRAMEWORKS

21. WHAT IS A JAVASCRIPT FRAMEWORK?

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. AVAILABLE JAVASCRIPT FRAMEWORKS

24. AVAILABLE JAVASCRIPT FRAMEWORKS • Prototype : www.prototypejs.org/

25. AVAILABLE JAVASCRIPT FRAMEWORKS • Prototype : www.prototypejs.org/ • script.aculo.us : script.aculo.us/

26. AVAILABLE JAVASCRIPT FRAMEWORKS • Prototype : www.prototypejs.org/ • script.aculo.us : script.aculo.us/ • MooTools : www.mootools.net/

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. 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. 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. 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. 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. http://www.ﬂickr.com/photos/teleject/432030263/

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. WHERE IS JQUERY USED? • Google • WordPress • Bank of America • Technorati • Digg • Major League Baseball • NBC • Drupal • CBS • Mozilla.org • Netﬂix • Twitter

35. GETTING STARTED WITH JQUERY

36. DOWNLOAD HELPER FILES @ HTTP://TR.IM/CX8K

37. <SCRIPT TYPE="TEXT/JAVASCRIPT" SRC="/_ASSETS/JS/JQUERY.JS"></SCRIPT> <SCRIPT TYPE="TEXT/JAVASCRIPT"> // TELL JQUERY WHAT TO DO HERE... </SCRIPT>

38. <SCRIPT TYPE="TEXT/JAVASCRIPT" SRC="_ASSETS/JS/JQUERY.JS"></SCRIPT> <SCRIPT TYPE= "TEXT/JAVASCRIPT" SRC="_ASSETS/JS/MICROWAVEPOPCORN.JS"></ SCRIPT>

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. <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. <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. <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. <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. <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. “HELLO, WORLD” IN REVIEW 1.Wait till page is ﬁnished loading 2.Select element(s) within the Web document 3.Perform something on that element (or those elements)

46. EXAMPLE: STRIPING TABLE ROWS

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. TR.ODD { BACKGROUND-COLOR: #99FF99; }

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. TR:NTH-CHILD(ODD) { BACKGROUND-COLOR: #99FF99; }

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. ENTER JQUERY

53. ENTER JQUERY #content tr.diff td{ background-color: #cbc1be; }

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. 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. 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. PROOF OF IE6 SUPPORT

58. EXAMPLE: HIGHLIGHTING A TABLE ROW

59. CSS :HOVER PSEUDO-CLASS #content tr:hover td { background-color: #fbc057; }

60. :HOVER PROBLEM • Not supported in: • IE6 • IE7 • Supported in IE8

61. ENTER JQUERY #content tr.over td { background-color: #fbc057; }

62. ENTER JQUERY $(".striping tr");

63. ENTER JQUERY $(".striping tr").mouseover();

64. ENTER JQUERY $(".striping tr").mouseover(function() { });

65. ENTER JQUERY $(".striping tr").mouseover(function() { $(this); });

66. ENTER JQUERY $(".striping tr").mouseover(function() { $(this).addClass("over"); });

67. ENTER JQUERY $(".striping tr").mouseover(function() { $(this).addClass("over"); }); $(".striping tr").mouseover(function() { $(this).addClass("over"); });

68. ENTER JQUERY $(".striping tr").mouseover(function() { $(this).addClass("over"); }); $(".striping tr").mouseout(function() { $(this).removeClass("over"); });

69. CHAINING IN JQUERY $(".striping tr").mouseover(function() { $(this).addClass("over"); }); $(".striping tr").mouseout(function() { $(this).removeClass("over"); });

70. CHAINING IN JQUERY $(".striping tr").mouseover(function() { $(this).addClass("over"); }).mouseout(function() { $(this).removeClass("over"); });

71. EXAMPLE: SUBTLE ROLLOVERS

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. DISAPPEARING <P> $("p").click(function(){ $(this).fadeOut("slow"); });

74. GOOD USES • Error warnings on forms, if JavaScript validation ﬁnds 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. MAKING A ROLLOVER

76. MAKING A CSS ROLLOVER #site-nav #certifylink a { text-indent: -9999em; width: 203px; height: 66px; display: block; }

77. MAKING A CSS ROLLOVER #site-nav #certifylink a:link, #site-nav #certifylink a:visited { background-image: url(/_assets/img/ certiﬁcations.gif); } #site-nav #certifylink a:link:hover, #site-nav #certifylink a:visited:hover { background-image: url(/_assets/img/ certiﬁcations_on.gif); }

78. MAKING SUBTLE ROLLOVERS $("#site-nav a");

79. MAKING SUBTLE ROLLOVERS $("#site-nav a").mouseover();

80. MAKING SUBTLE ROLLOVERS $("#site-nav a").mouseover(function () { });

81. MAKING SUBTLE ROLLOVERS $("#site-nav a").mouseover(function () { });

82. MAKING SUBTLE ROLLOVERS $("#site-nav a").mouseover(function() { $(this).fadeTo("slow", .50); });

83. MAKING SUBTLE ROLLOVERS $("#site-nav a").mouseover(function({ $(this).fadeTo("slow", .50); }); $("#site-nav a").mouseout(function({ $(this).fadeTo("slow", 1); });

84. MAKING SUBTLE ROLLOVERS $("#site-nav a").mouseover(function () { $(this).fadeTo("slow", .50); }).mouseout(function () { $(this).fadeTo("slow", 1); });

85. EXAMPLE: USING PNGS FOR IE6 AND BEYOND

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. <div class="container" style="background-image: url(/_assets/img/ background_container.png);"> ... </div>

88. <script type="text/javascript" src="/_assets/js/ jquery.pngFix.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(document).pngFix(); }); </script>

89.

90. TROUBLE WITH PNGS IN IE6 • Use proprietary ﬁlter properties in IE • Placed in backgrounds of elements • Theimages stretch to ﬁt 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. 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. 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. 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. JQUERY SUMMIT • Ofﬁcial 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. THANK YOU! Christopher Schmitt schmitt@heatvision.com http://twitter.com/teleject ChristopherSchmitt.com