JavaScript For People Who Don't Code

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

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

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

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

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>

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

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

AVAILABLE
• Prototype : www.prototypejs.org/

AVAILABLE

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

AVAILABLE


• MooTools : www.mootools.net/

AVAILABLE



• Spry : labs.adobe.com/technologies/spry/

AVAILABLE




• Dojo Toolkit : dojotoolkit.org

AVAILABLE





• MochiKit : www.mochikit.com/

AVAILABLE





• 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.ﬂickr.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

• Netﬂix • Twitter

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>

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

READY EVENT

$(DOCUMENT).READY(FUNCTION() {

});
</SCRIPT>



$("A");

});
</SCRIPT>



$("A").CLICK();

});
</SCRIPT>



$("A").CLICK(FUNCTION(EVENT){

});

});
</SCRIPT>




ALERT();

});

});
</SCRIPT>

SRC="_ASSETS/JS/JQUERY.JS"></SCRIPT>



ALERT("HELLO, WORLD!");

});

});
</SCRIPT>

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

<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

#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


$("tr:even").addClass("diff");

});
</script>

ENTER JQUERY


$(".striping tr:even").addClass("diff");

});
</script>

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


$(this);
});

ENTER JQUERY


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

ENTER JQUERY


});

});

ENTER JQUERY


});
$(".striping tr").mouseout(function() {

$(this).removeClass("over");
});

CHAINING IN JQUERY


});
$(".striping tr").mouseout(function() {

});

CHAINING IN JQUERY


}).mouseout(function() {

});

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

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/
certiﬁcations.gif);
}
#site-nav #certifylink a:link:hover,
#site-nav #certifylink a:visited:hover {

background-image: url(/_assets/img/
certiﬁcations_on.gif);
}

MAKING SUBTLE ROLLOVERS

$("#site-nav a");


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


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


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


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


$("#site-nav a").mouseover(function () {
}).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.

jquery.pngFix.js"></script>


$(document).ready(function(){

$(document).pngFix();

});
</script>

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

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

THANK YOU!

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

JavaScript For People Who Don't Code

More Related Content

What's hot

Viewers also liked

Similar to JavaScript For People Who Don't Code

More from Christopher Schmitt

Recently uploaded

JavaScript For People Who Don't Code