Javascript For Designers: Getting on Your Feet Fast

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.

Tizag.com

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.

W3schools.com

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

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.

Academic Tutorials

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.

Learn-JavaScript-Tutorial.com

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.

Suckerfish Dropdowns

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.

Switching Stylesheets

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.

Improved Current Field Highlighting

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.

JavaScript Folder Collapser for Dynamic Content

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.

JavaScript Progress Bar

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.

Password Verification and Strength Checker

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.