|
Web designers are a special breed - we're one of a
small group of professionals that actively seeks out to improve
ourselves and our craft through any means possible. This generally
means on our own, from each other, and through an awful lot of 'guess, test and revise.' Web design isn't for the faint of heart or those with any fear of failure.
The most daunting 'learning experience' for developing developers is
to make the jump from the HTMLs and the CSSs of the world to web
scripting. It looks good from the outside - all that added
interactivity and animation and cool effects and features - oh my. But
for some designers, it proves to be a difficult lesson to learn, as
scripting can require more focus, logic, and organization than the
coding that you are used to.
Getting on Your Feet Fast
Let's take a look at bulletproof ways to ease into Javascript at an accelerated
pace. Javascript is the perfect place to start to learn scripting
because it is generally less complex than other scripting languages,
and is client-side - meaning that you will be able to test your scripts
on your computer as you script it, in real time, without setting up
servers or putting forth any more effort than you really need to.
However you code pages now is great - don't do anything differently to
accommodate Javascript - she's easy to get along with.
The first place I start when looking to learn anything new is on the
web - makes sense to learn the web from the web, right? Yeah, books are
nice, and they can make you look intelligent, but the truth of the
matter is that you'll find most (if not all) of that same information
out on the web, and, out on the web, you can find the most updated
tutorials. If books suit you, there are a plethora of books out there
on Javascript - feel free to help yourself to any of them.
Websites That Teach Javascript
Something to remember about Javascript websites as you scour the web for help - there are essentially two types
of Javascript websites; those that are focused on scripts, and those
that are focused on teaching Javascript. I say this because I've worked
with a lot of students that have stumbled across script websites,
started reading scripts on those pages as if they were tutorials and
then got confused and discouraged when they couldn't follow the code -
this would be akin to trying to read Braille by shouting at it.
Javascript learning sites spend more time on simple logic and
processes. Stuff you will never really do on a website (as you'll see
below) but it will get you into the scripting mindset and help you ease
into the building blocks that will creep into every script you work
with.
Let's take a look at two 'learning' Javascript sites.
I don't know where this site came from or remember how I found it,
but I constantly reference Tizag for many of their tutorials. They are
straightforward and direct, but move through the topic in a way that
makes it easy to understand. Their lessons aren't too long, giving you
just enough to take out and test before returning for the next lesson.
This site is a step up from the rest in teaching you Javascript (or
anything for that matter) and there's one really simple reason why -
they let you try it for yourself right there in the tutorial. A lot of
people don't like learning from books because you can't try it for
yourself; that is unless, of course, you find some ridiculous way to
prop the book up against your monitor, so you can read it without
holding it open and type all at once, but that's not very conducive to
being able to focus on the script at hand.
About.com offers premium advice and tutorials on just about anything
for free. It's pretty much to a multi-information oriented site.
Fortunately, here you'll be able to find a variety of tutorials and
workshops focused on begginer to advanced JavaScript users.
The Academic Tutorials site is very similar to the W3 schools
learning center. It provides extensive and well organized facts on
JavaScript. You will also find yourself with more hands-on experience
than you thought, since almost every tutorial has various examples.
This site contains front-line examples and begginer JavaScript
experiences for the novice of users. Tutorials showcase several useful
scripts and images that aid you in the advancement of your skills as a
designer.
Walk Before You Can Run
Let's try it ourselves! In Javascript, the word 'document' refers to
the current page. The word 'write' allows me to write text on the page.
In the majority of cases, your scripts will be included in a script tag
- this is how the browser identifies that you've switched gears. It's
just like the style tag, but it happens whenever you need javascript
(even in the body tag) and uses a type of text/javascript instead of
the more familiar text/css. So, if I wanted to build a script to put my
name on the screen it would look like this...
document.write("My name is Matt");
It's that simple - as you learn more, you'll do more impressive
things, but, hey, we all have to start somewhere, right? Consider
'document.write' like the fast food job you had in high school. It's
probably not something you will impress your friends with, but once
you're an investment banker, you'll look back on it with nostalgia.
Head out to w3schools.com, get into their Javascript tutorial, and
choose the first example - use this and build your first script for
yourself! Replace the text with whatever text you want, or add
additional 'document.write' commands to put more text in your page.
Subtleties of JS
Keep in mind that Javascript is like an oompa loompa in your web
factory - its not building the page, its helping you build the code.
So, when you put text on the screen, the script you wrote is not
putting text directly on the screen... its putting text in the code, and
the browser is displaying it as it normally would. Don't believe me?
Try this:
Add a second 'document.write' command. You should notice that the
two pieces of text follow directly after one another on your webpage.
Now, between the "quotes" where your text is, add HTML tags. Add a
paragraph tag on each command. You should have something like this:
document.write("<p>My name is Matt</p>");
document.write("<p>This is my first script</p>");
Because the Javascript will write this directly into the code, you
can use things like HTML tags because the browser will be able to
interpret and display them!
As you get to more and more complicated topics, the value of being
able to code alongside the tutorials on w3schools.com will be
invaluable to your ability to learn Javascript fast and feel
comfortable doing so.
Put It to Use
The best way to motivate yourself is to see what you could do if you
put the time into learning Javascript. While there are a ton of ways to
enhance your HTML, I've included some tutorials and demos below that
will show you how Javascript can play nice with your CSS to create some
pretty impressive results, relying a lot on your current skill to help
enhance the Javascript you are learning.
As you learn Javascript, you should know about suckerfish dropdowns.
Essentially, these dropdowns use a lightweight combination of both CSS
and Javascript to create accessible menus that can be used to add
additional links to your navigation.
What's interesting about this is that the Javascript is literally
adding a class to the elements - so, think about it like this - you've
set up a class that determines a specific look and feel... but Javascript
plays the role in 'invoking' that class - creative uses of such a trick
like this could yield some very interesting results. Here it is being
used to apply hover effects to specific elements, but the application
of this technique could be limitless.
You probably already know that you can use alternate style sheets on
a page, but didn't know how to switch them on the fly - Javascript will
help you do this. If you had different colored themes that you wanted
your users to be able to customize, you could use Javascript to switch
between the two. You could even get creative - create a different theme
for different times of day (morning, day, night) and display a
stylesheet based on the user's local time.
This tutorial from CSS-Tricks shows us a way that we can use
Javascript to change the way we are highlighting active fields in
forms. So, generally, the cursor blinks in that form field, and some
browsers have taken it upon themselves to do something a little
different, but this tutorial takes a look at how we can use Javascript
and jQuery to improve the highlighting with a little style.
This tutorial will show you how to create a group of collapsible
folders using JavaScript and some elements of JQuery. The code will be
featured in a way that allows for ease of implementation into a dynamic
page - in this situation, the number of folders may be unknown.
Within this tutorial you'll be able to walk through the
configuration and structuring of a javascript based progress bar that
can be triggered by a variety of things. For example, you could have it
triggered by the progress of a sign-up sheet, or even by the amount of
checkboxes that are checked.
This tutorial will aid you in creating a registration form that
includes a password strength checker to tell the user how strong
(security wise) their password is. This form will also include several
boxes for password use and other vital information.
The End of Our Road - Javascript Frameworks
jQuery is what is called a 'Framework'. Frameworks contain
sets of pre-written controls which make it easier and more efficient
for you to develop your scripts. Instead of rewriting the same basic
scripts over and over, or managing your own library, javascript
frameworks such as jQuery, prototype, script.aculo.us, mootools, and others exist to save you the time. In most cases, these frameworks are extended in ways that add more functionality.
Unfortunately, a complete discussion on Javascript frameworks
comparing the functions included in each is a discussion for another
time, but its something to know is out there.
Check it out for Yourself: jQuery for Designers
And the Best Way of All to Learn Javascript...
Go do it. No really, go do it.
|