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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (7)

Similaire à JavaScript For People Who Don't Code

Similaire à JavaScript For People Who Don't Code (20)

Plus de Christopher Schmitt

Plus de Christopher Schmitt (20)

Dernier

Dernier (20)

JavaScript For People Who Don't Code