0
JAVASCRIPT FOR PEOPLE
  WHO DON’T CODE
 Christopher Schmitt | http://twitter.com/teleject




          eduWeb 2009 | Chic...
JAVASCRIPT DOESN’T
 UNDERSTAND GRAPHIC
   DESIGN PRINCIPLES.
     ERGO, I DON’T
UNDERSTAND JAVASCRIPT
JAVASCRIPT FRAMEWORKS

• What’s   JavaScript?

• What’s   a JavaScript Framework?

• What   JavaScript Frameworks are out ...
WHAT IS JAVASCRIPT?
JavaScript is a scripting language most often used
for client-side web development. It was the
originating dialect of the ...
was renamed in a co-marketing deal between
Netscape and Sun, in exchange for Netscape
bundling Sun's Java runtime with the...
(X)HTML




JavaScript             CSS
(X)HTML
               noun




JavaScript               CSS
   verb                adjective
(X)HTML
               noun




JavaScript               CSS
   verb                adjective
WORD ABOUT
SEMANTIC MARKUP
Semantic
Markup
91
http://www.w3.org/TR/html4/index/elements.html
Some Common
       HTML Errors
• <p>&nbsp;</p>
• <p> ... <br><br><br> ... <br><br><br>...
• <h2>Subject Matter<br></h2>
• ...
WORD ABOUT
GREAT CSS CODING
Setting Up
the Easel
3D View of Box Model
“CSS Reset”

• http://developer.yahoo.com/yui/reset/
• http://meyerweb.com/eric/thoughts/
  2007/04/12/reset-styles/
  • h...
WHAT DOES
JAVASCRIPT MEAN TO ME?
EXAMPLES OF JAVASCRIPT
JAVASCRIPT FRAMEWORKS
WHAT IS A
JAVASCRIPT FRAMEWORK?
WHAT IS A
JAVASCRIPT FRAMEWORK?

•A collection of code that allows for cross-browser
 building of JavaScript functions wit...
AVAILABLE
JAVASCRIPT FRAMEWORKS
AVAILABLE
JAVASCRIPT FRAMEWORKS
• Prototype   : www.prototypejs.org/
AVAILABLE
JAVASCRIPT FRAMEWORKS
• Prototype   : www.prototypejs.org/

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

• script.aculo.us   : script.aculo.us/

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

• script.aculo.us   : script.aculo.us/

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

• script.aculo.us   : script.aculo.us/

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

• script.aculo.us   : script.aculo.us/

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

• script.aculo.us   : script.aculo.us/

• MooTools  ...
WHY JQUERY?

• Light    footprint at 15kb when gzipped & compressed

• Utilizes       knowledge of CSS selectors,

   • in...
http://www.flickr.com/photos/teleject/432030263/
WHY JQUERY?
• Light    footprint at 15kb when gzipped & compressed

• Utilizes       knowledge of CSS selectors,

   • inc...
WHERE IS JQUERY USED?
• Google              • WordPress

• Bank   of America   • Technorati

• Digg                • Major...
GETTING STARTED
  WITH JQUERY
DOWNLOAD HELPER FILES
  @ HTTP://TR.IM/CX8K
<SCRIPT TYPE="TEXT/JAVASCRIPT"
SRC="/_ASSETS/JS/JQUERY.JS"></SCRIPT>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
 // TELL JQUERY WHAT ...
<SCRIPT TYPE="TEXT/JAVASCRIPT"
SRC="_ASSETS/JS/JQUERY.JS"></SCRIPT>
<SCRIPT TYPE= "TEXT/JAVASCRIPT"
SRC="_ASSETS/JS/MICROW...
READY EVENT
<SCRIPT TYPE="TEXT/JAVASCRIPT"
SRC="/_ASSETS/JS/JQUERY.JS"></SCRIPT>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
 // TELL ...
<SCRIPT TYPE="TEXT/JAVASCRIPT"
SRC="/_ASSETS/JS/JQUERY.JS"></SCRIPT>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
 // TELL JQUERY WHAT ...
<SCRIPT TYPE="TEXT/JAVASCRIPT"
SRC="/_ASSETS/JS/JQUERY.JS"></SCRIPT>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
 // TELL JQUERY WHAT ...
<SCRIPT TYPE="TEXT/JAVASCRIPT"
SRC="/_ASSETS/JS/JQUERY.JS"></SCRIPT>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
 // TELL JQUERY WHAT ...
<SCRIPT TYPE="TEXT/JAVASCRIPT"
SRC="/_ASSETS/JS/JQUERY.JS"></SCRIPT>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
 // TELL JQUERY WHAT ...
<SCRIPT TYPE="TEXT/JAVASCRIPT"
SRC="_ASSETS/JS/JQUERY.JS"></SCRIPT>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
 // TELL JQUERY WHAT T...
“HELLO, WORLD”
                  IN REVIEW


1.Wait till page is finished loading

2.Select element(s) within the Web docum...
EXAMPLE:
STRIPING TABLE ROWS
<TABLE>
 <TR VALIGN="TOP" CLASS="ODD">
  <TD>SALMON</TD>
  <TD>OMEGA-3'S HELP THE BRAIN DEVELOP
PROPERLY, REDUCE THE RISK ...
TR.ODD {
  BACKGROUND-COLOR: #99FF99;
}
:NTH-CHILD CSS3 SELECTOR

• tr:nth-child(an+b)

  • tr:nth-child(2n)   // every even row

  • tr:nth-child(2n+1)   //every...
TR:NTH-CHILD(ODD) {
  BACKGROUND-COLOR: #99FF99;
}
PROBLEM :NTH-CHILD
• CSS3   Selector is supported by:

  • Safari   3

  • Opera     9.5

• Browsers       not supporting ...
ENTER JQUERY
ENTER JQUERY


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

<script type="text/javascript" src="/_assets/js/
jquery.js"></script>
<script type="text/javascript">
  // T...
ENTER JQUERY
<script type="text/javascript" src="/_assets/js/
jquery.js"></script>
<script type="text/javascript">
  // Te...
ENTER JQUERY
<script type="text/javascript" src="/_assets/js/
jquery.js"></script>
<script type="text/javascript">
  // Te...
PROOF OF IE6 SUPPORT
EXAMPLE:
HIGHLIGHTING A TABLE ROW
CSS :HOVER PSEUDO-CLASS


    #content tr:hover td {
     background-color: #fbc057;
    }
:HOVER PROBLEM

• Not     supported in:

  • IE6

  • IE7

• Supported    in IE8
ENTER JQUERY


#content tr.over td {

 background-color: #fbc057;
}
ENTER JQUERY



  $(".striping tr");
ENTER JQUERY



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



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


$(".striping tr").mouseover(function() {

 $(this);
});
ENTER JQUERY


$(".striping tr").mouseover(function() {

 $(this).addClass("over");
});
ENTER JQUERY

$(".striping tr").mouseover(function() {

 $(this).addClass("over");
});
$(".striping tr").mouseover(functio...
ENTER JQUERY

$(".striping tr").mouseover(function() {

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

$(".striping tr").mouseover(function() {

 $(this).addClass("over");
});
$(".striping tr").mouseout(fu...
CHAINING IN JQUERY

$(".striping tr").mouseover(function() {

 $(this).addClass("over");
}).mouseout(function() {

 
 $(th...
EXAMPLE:
SUBTLE ROLLOVERS
FADEIN AND FADEOUT

• jQuery   allows elements to fade in and fade out.

  • Disappear    and re-appear.

• Also   allows ...
DISAPPEARING <P>

 $("p").click(function(){
 
 $(this).fadeOut("slow");
 });
GOOD USES

• Error   warnings on forms, if JavaScript validation finds an error

• Hiding
       headings and showing form ...
MAKING A ROLLOVER
MAKING A CSS ROLLOVER

    #site-nav #certifylink a {
    
 text-indent: -9999em;
    
 width: 203px;
    
 height: 66px;
...
MAKING A CSS ROLLOVER
#site-nav #certifylink a:link,
#site-nav #certifylink a:visited {

 
 background-image: url(/_assets...
MAKING SUBTLE ROLLOVERS



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



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



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



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


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

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

 $("#site-nav a").mouseover(function () {
   $(this).fadeTo("slow", .50);
 }).mouseout(function (...
EXAMPLE:
USING PNGS FOR IE6
   AND BEYOND
PNGS THE EASY WAY

• Write   CSS rules with PNGs without worry

• Download     jquery.pngFix.js

  • http://jquery.andreas...
<div class="container"
  style="background-image: url(/_assets/img/
background_container.png);">
...
</div>
<script type="text/javascript" src="/_assets/js/
jquery.pngFix.js"></script>

<script type="text/javascript">

 $(document...
<!--[if lt IE 7]>
<script type="text/javascript" src="/_assets/js/
jquery.pngFix.js"></script>

<script type="text/javascr...
TROUBLE WITH PNGS
          IN IE6
• Use   proprietary filter properties in IE

• Placed   in backgrounds of elements

• Th...
JQUERY TAKE AWAYS
• Talked   about what is JavaScript

• How   important JavaScript is for people who don’t code

• Talked...
JQUERY TAKE AWAYS
• Example    of how to do table striping

  • Basic   premise of how jQuery works

  • Chaining   events...
JQUERY TAKE AWAYS
• How    to fade out and in elements of a page

• Use   FadeTo set the opacity of elements

  • Use this...
JQUERY SUMMIT
• Official   online conference for jQuery

  • All   jQuery, all-day with 8 speakers

• Coming     this Novem...
THANK YOU!


Christopher Schmitt
schmitt@heatvision.com
http://twitter.com/teleject
ChristopherSchmitt.com
JavaScript For People Who Don't Code
JavaScript For People Who Don't Code
JavaScript For People Who Don't Code
JavaScript For People Who Don't Code
JavaScript For People Who Don't Code
JavaScript For People Who Don't Code
JavaScript For People Who Don't Code
JavaScript For People Who Don't Code
JavaScript For People Who Don't Code
JavaScript For People Who Don't Code
JavaScript For People Who Don't Code
JavaScript For People Who Don't Code
JavaScript For People Who Don't Code
JavaScript For People Who Don't Code
JavaScript For People Who Don't Code
JavaScript For People Who Don't Code
JavaScript For People Who Don't Code
JavaScript For People Who Don't Code
JavaScript For People Who Don't Code
JavaScript For People Who Don't Code
JavaScript For People Who Don't Code
JavaScript For People Who Don't Code
JavaScript For People Who Don't Code
JavaScript For People Who Don't Code
JavaScript For People Who Don't Code
JavaScript For People Who Don't Code
JavaScript For People Who Don't Code
JavaScript For People Who Don't Code
JavaScript For People Who Don't Code
JavaScript For People Who Don't Code
JavaScript For People Who Don't Code
JavaScript For People Who Don't Code
JavaScript For People Who Don't Code
JavaScript For People Who Don't Code
JavaScript For People Who Don't Code
Upcoming SlideShare
Loading in...5
×

JavaScript For People Who Don't Code

3,349

Published on

Published in: Technology
2 Comments
13 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,349
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
126
Comments
2
Likes
13
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×