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

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 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?”

WHAT IS JAVASCRIPT?

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

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

(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>
• <p><h2>Subject Matter</h2></p>
• <p><img ></p>

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/
• http://meyerweb.com/eric/tools/css/reset/
index.html

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 without losing your hair.
• Well, without losing not much hair.
• This is JavaScript we are talking about after all.

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 : www.mootools.net/

AVAILABLE
JAVASCRIPT FRAMEWORKS
• Prototype : www.prototypejs.org/
• script.aculo.us : script.aculo.us/
• MooTools : www.mootools.net/
• Spry : labs.adobe.com/technologies/spry/

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

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/

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/

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!

http://www.flickr.com/photos/teleject/432030263/

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+

WHERE IS JQUERY USED?
• Google • WordPress
• Bank of America • Technorati
• Digg • Major League Baseball
• NBC • Drupal
• CBS • Mozilla.org
• Netflix • Twitter

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 TO DO HERE...
</SCRIPT>

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

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>

<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>

<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>

<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>

<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>

<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>

“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)

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 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>

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 odd row
• Shortcut:
• tr:nth-child(even)
• tr:nth-child(odd)

TR:NTH-CHILD(ODD) {
BACKGROUND-COLOR: #99FF99;
}

PROBLEM :NTH-CHILD
• CSS3 Selector is supported by:
• Safari 3
• Opera 9.5
• Browsers not supporting :nth-child:
• IE6+
• Firefox 2+
• Safari 2

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">
// Tell jQuery what to do here...
$(document).ready(function() {
});
</script>

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>

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>

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(function() {
$(this).addClass("over");
});

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

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

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

EXAMPLE:
SUBTLE ROLLOVERS

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.

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

MAKING A ROLLOVER

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

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);
}

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").mouseout(function({
$(this).fadeTo("slow", 1);
});

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

EXAMPLE:
USING PNGS FOR IE6
AND BEYOND

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.

<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).ready(function(){
$(document).pngFix();
});
</script>

<!--[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]-->

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

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.

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

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

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

THANK YOU!
Christopher Schmitt
schmitt@heatvision.com
http://twitter.com/teleject
ChristopherSchmitt.com