jQuery: makes you want to write javascript again (or for the first time)
In the other thread, Nato mentioned jQuery. jQuery is more than just
jQuery is an open-source javascript library led by John Resig, an employee of the Mozilla Foundation. Given this fact, he knows a thing or two about javascript, about best practices in the language, and about the directions that Firefox is taking (Firefox 3.0 will integrate Adobe's Tamarin engine, which runs javascript code 10x faster).
Wait...javascript library?
I used to not want to touch javascript with a 20-foot pole. It's a great language, but across browser implementations, there were a lot of quirks, so that code you wrote for Opera might not work in IE, and Safari might choke on something extremely simple for Firefox. Even with cut-and-paste code from sites like dynamicdrive.com, you might have it work in two browsers but not in one, which ain't fun.
That's where javascript libraries come in handy. They simplify the code that you have to write AND keep you from worrying about cross-browser and cross-platform issues by abstracting the details while keeping everything nice and orderly behind the curtain. Abstraction can be a bad thing, mind you, particularly if there are bugs in the code that is doing the abstracting, if you don't understand the underlying principles well enough to understand where the problem is, but many of the javascript libraries have been around long enough that they've ironed out these problems.
Wait... javascript libraries?
Yes, there are LOTS of javascript libraries out there.
jQuery is no slouch when compared to the above: it's got solid documentation, a rabidly enthusiastic and eager-to-help community, solid code at a small (20KB compressed!) file size, and it's built around a plug-in architecture that makes it dirt simple to put in only the functionality that you want, as well as to write and share your own code plug-ins.
jQuery is built around two steps:
Before I go further, to give you an idea of what this does, and how it looks in action, go check out this short short tutorial. Go on.
No, really. It's short. I'll wait.
See? Isn't that cool?! It leverages everything you may already know about CSS* as a designer, and makes the javascript that much simpler. In five lines of code!
Now lets say that you want to make some nifty accordion effects, like the ones you see on all those big muggity-mug sites nowadays. Easy:
http://www.learningjquery.com/2007/03/accordion-madness
Learning jQuery is a blog by English majors who happen to also be coders, so it's written in simple and clear language. (They've got a book by the same name that's out now, and having read almost the whole thing, I highly highly recommend it.)
So, if you follow that tutorial, you can make something like this:
[HTML]
<script type="text/javascript" src="http://huah.net/junk/jquery.js"></script>
<script type="text/javascript">
<!--
jQuery(document).ready(function() {
// you should use $() instead of jQuery()
jQuery('div.crazy> h3').addClass('orangish');
jQuery('div.crazy> div').addClass('creamsicle');
jQuery('div.crazy> div').hide();
jQuery('div.crazy> h3').click(function() {
jQuery(this).next('div').slideToggle('fast')
.siblings('div:visible').slideUp('fast');
});
});
//-->
</script>
<style type="text/css">
.crazy
{
width: 400px;
}
.orangeish
{
color: #cccccc;
background-color: #cc6600;
border-top: solid #996633;
border-bottom: solid #996633;
margin: 1px 0 0 0;
padding: 3px 3px 3px 3px;
width: 100%
}
.creamsicle
{
padding: 5px 5px 10px 30px;
background-color: white;
width: 100%;
}
</style>
<h2>Hierarchy of needs:</h2>
<div class="crazy">
<h3>Food</h3>
<div>Food is essential for nourishment, but boy, can it be tasty as well! Sadly, most food is made from whatever is left in the fridge. While this can lead to imaginative concoctions, its health value is questionable.</div>
<h3>Sleep</h3>
<div>Let's face it, you never get enough. But when you don't, and you've worked up that nice <i>sleep defecit</i>, my how the world ceases to make sense in the most wonderful ways.</div>
<h3>Comics</h3>
<div>You would have put games. Just because that's you. But comics. Oh, sweet sweet comics. How can you not help but see the world as discretized functions of juxtaposed sequential images? (Okay, ...yeah. You're right. That's a very good reason.)</div>
</div>
[/HTML]
Er...something like...well, since the security measures of the forum don't allow raw html and javascript in the BB code, just cut and paste the above into a text file, save it as a .html and open it in your web browser of choice. Voila!
Maybe Nato wasn't too far off.
There's so much more to jQuery that I don't have time to get into here (drag-and-drop! on-the-fly DOM-element creation! easy AJAX!), but hopefully you can see why I get stoked about it. Go play! Noodle around with jQuery and post your experiments here!
* If you're new to CSS, I recommend
http://www.w3schools.com/css/ and
http://snook.ca/archives/html_and_css/six_keys_to_understanding_css_layouts/
** Yes, that is a DEVO hat.
*** No, you didn't ask, but you were totally gonna.
...it's something that even hardcore javascript h4xx0rz are getting smitten with.Fancy JavaScript For Idiots Like Me.
jQuery is an open-source javascript library led by John Resig, an employee of the Mozilla Foundation. Given this fact, he knows a thing or two about javascript, about best practices in the language, and about the directions that Firefox is taking (Firefox 3.0 will integrate Adobe's Tamarin engine, which runs javascript code 10x faster).
Wait...javascript library?
I used to not want to touch javascript with a 20-foot pole. It's a great language, but across browser implementations, there were a lot of quirks, so that code you wrote for Opera might not work in IE, and Safari might choke on something extremely simple for Firefox. Even with cut-and-paste code from sites like dynamicdrive.com, you might have it work in two browsers but not in one, which ain't fun.
That's where javascript libraries come in handy. They simplify the code that you have to write AND keep you from worrying about cross-browser and cross-platform issues by abstracting the details while keeping everything nice and orderly behind the curtain. Abstraction can be a bad thing, mind you, particularly if there are bugs in the code that is doing the abstracting, if you don't understand the underlying principles well enough to understand where the problem is, but many of the javascript libraries have been around long enough that they've ironed out these problems.
Wait... javascript libraries?
Yes, there are LOTS of javascript libraries out there.
- Prototype + Script.aculo.us, the oldest of the libraries, used by lots of big-name sites, like Apple
- Mochikit, a js library for Python programmers that makes js more Python-like
- MooTools, another library becoming popular with big-name sites like c|net, but it doesn't play well with Prototype
- Yahoo! UI, ostensibly the best-documented of the js libraries, and rock solid, from what I hear
- Dojo
- Rico
- Adobe Spry
- etc., etc., ad nauseam...
jQuery is no slouch when compared to the above: it's got solid documentation, a rabidly enthusiastic and eager-to-help community, solid code at a small (20KB compressed!) file size, and it's built around a plug-in architecture that makes it dirt simple to put in only the functionality that you want, as well as to write and share your own code plug-ins.jQuery is built around two steps:
- Find stuff.
- Do things to the stuff you find.
jQuery('#photos>img').hide();
or
$('#photos>img').hide();
for short.Before I go further, to give you an idea of what this does, and how it looks in action, go check out this short short tutorial. Go on.
No, really. It's short. I'll wait.
See? Isn't that cool?! It leverages everything you may already know about CSS* as a designer, and makes the javascript that much simpler. In five lines of code!
Now lets say that you want to make some nifty accordion effects, like the ones you see on all those big muggity-mug sites nowadays. Easy:
http://www.learningjquery.com/2007/03/accordion-madness
Learning jQuery is a blog by English majors who happen to also be coders, so it's written in simple and clear language. (They've got a book by the same name that's out now, and having read almost the whole thing, I highly highly recommend it.)
So, if you follow that tutorial, you can make something like this:
[HTML]
<script type="text/javascript" src="http://huah.net/junk/jquery.js"></script>
<script type="text/javascript">
<!--
jQuery(document).ready(function() {
// you should use $() instead of jQuery()
jQuery('div.crazy> h3').addClass('orangish');
jQuery('div.crazy> div').addClass('creamsicle');
jQuery('div.crazy> div').hide();
jQuery('div.crazy> h3').click(function() {
jQuery(this).next('div').slideToggle('fast')
.siblings('div:visible').slideUp('fast');
});
});
//-->
</script>
<style type="text/css">
.crazy
{
width: 400px;
}
.orangeish
{
color: #cccccc;
background-color: #cc6600;
border-top: solid #996633;
border-bottom: solid #996633;
margin: 1px 0 0 0;
padding: 3px 3px 3px 3px;
width: 100%
}
.creamsicle
{
padding: 5px 5px 10px 30px;
background-color: white;
width: 100%;
}
</style>
<h2>Hierarchy of needs:</h2>
<div class="crazy">
<h3>Food</h3>
<div>Food is essential for nourishment, but boy, can it be tasty as well! Sadly, most food is made from whatever is left in the fridge. While this can lead to imaginative concoctions, its health value is questionable.</div>
<h3>Sleep</h3>
<div>Let's face it, you never get enough. But when you don't, and you've worked up that nice <i>sleep defecit</i>, my how the world ceases to make sense in the most wonderful ways.</div>
<h3>Comics</h3>
<div>You would have put games. Just because that's you. But comics. Oh, sweet sweet comics. How can you not help but see the world as discretized functions of juxtaposed sequential images? (Okay, ...yeah. You're right. That's a very good reason.)</div>
</div>
[/HTML]
Er...something like...well, since the security measures of the forum don't allow raw html and javascript in the BB code, just cut and paste the above into a text file, save it as a .html and open it in your web browser of choice. Voila!
Maybe Nato wasn't too far off.
There's so much more to jQuery that I don't have time to get into here (drag-and-drop! on-the-fly DOM-element creation! easy AJAX!), but hopefully you can see why I get stoked about it. Go play! Noodle around with jQuery and post your experiments here!
* If you're new to CSS, I recommend
http://www.w3schools.com/css/ and
http://snook.ca/archives/html_and_css/six_keys_to_understanding_css_layouts/
** Yes, that is a DEVO hat.
*** No, you didn't ask, but you were totally gonna.
Comments
Specifically http://www.w3.org/TR/CSS21/ and http://www.w3.org/TR/html401/- as far as JavaScript goes, I frankly don't know who maintains specs.
Yep, W3C is the site for the specs for CSS, HTML, and the like. ECMA supposedly holds the specs for JavaScript, although, frankly, Mozilla's got a much better reference site for the language.
Welcome, apas!