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?”
6. 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
7. 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
35. 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.
46. 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+
47. WHERE IS JQUERY USED?
• Google • WordPress
• Bank of America • Technorati
• Digg • Major League Baseball
• NBC • Drupal
• CBS • Mozilla.org
• Netflix • Twitter
65. “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)
68. <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>
78. 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>
79. 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>
80. 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>
103. 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.
119. 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.
125. 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
126. 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.
127. 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
128. 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
129. 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