JavaScript For People Who Don't Code

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    8 Favorites & 1 Event

    JavaScript For People Who Don't Code - Presentation Transcript

    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 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. 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>&nbsp;</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.flickr.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 • Netflix • 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 finished 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 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. 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/ certifications.gif); } #site-nav #certifylink a:link:hover, #site-nav #certifylink a:visited:hover { background-image: url(/_assets/img/ certifications_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. <!--[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. 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. 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 • 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. THANK YOU! Christopher Schmitt schmitt@heatvision.com http://twitter.com/teleject ChristopherSchmitt.com

    + Christopher SchmittChristopher Schmitt, 4 months ago

    custom

    1431 views, 8 favs, 4 embeds more stats

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 1431
      • 1270 on SlideShare
      • 161 from embeds
    • Comments 0
    • Favorites 8
    • Downloads 40
    Most viewed embeds
    • 139 views on http://www.christopherschmitt.com
    • 20 views on http://christopherschmitt.com
    • 1 views on http://192.168.10.100
    • 1 views on http://www.christopherschmitt.com.

    more

    All embeds
    • 139 views on http://www.christopherschmitt.com
    • 20 views on http://christopherschmitt.com
    • 1 views on http://192.168.10.100
    • 1 views on http://www.christopherschmitt.com.

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Groups / Events