Aug 04 2009

Javascript For Designers: Getting on Your Feet Fast

Advertisement

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

Javascript For Designers

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

Javascript For Designers

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

Javascript For Designers

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

Javascript For Designers

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

Javascript For Designers

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

Javascript For Designers

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

Javascript For Designers

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

Javascript For Designers

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

Javascript For Designers

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

Javascript For Designers

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

Javascript For Designers

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

Javascript For Designers

And the Best Way of All to Learn Javascript…

Go do it. No really, go do it.

Author: Joel Reyes

Joel Reyes Has been designing and coding web sites for several years, this has lead him to be the creative mind behind Looney Designer a design resource and portfolio site that revolves around web and graphic design.

Write for Us! We are looking for exciting and creative articles, if you want to contribute, just send us an email.

About the Author

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.

Homepage

Comments and Discussions
  • John, 04 August 2009

    A few good points here, great article

  • yasser, 04 August 2009

    good :)

    I was searching for some sources to learn Javascript , and here we are ! :)

  • Jaspal, 04 August 2009

    nice write up .. will mention it on my blog

  • Soufiane, 04 August 2009

    This is a cool article, this made me love javascript cause I hated it before. thank you.

  • helpful resources for learn to javascript. thanks for post.

  • Thomas, 05 August 2009

    Nice list thanks

  • James, 05 August 2009

    The only site I recommend out of the ones you listed is javascript.about.com … the rest are out-dated and frankly, leave a lot to be desired!

    Also, I don’t think “document.write” is really the best way to introduce someone to JavaScript; actually, I’d go so far as to say it’s the worst…

    Heck, it looks like you’ve googled for “JavaScript” and simply listed the top results on the page…

    • Yëco, 06 August 2009

      Then James, I’ll be waiting for your article about how and where to learn JavaScript.

      I mean, your blog is quite useful for some of us. But not the best resource to learn it.

      Looking forward for that post ;)

    • Dayna, 08 April 2013

      How is W3 Schools outdated?

      They are THE people who say what’s what in the coding and web building world.

      About.com is good, but can very often come highly unreliable.

  • Tim, 05 August 2009

    Thank you for this great post. As a beginner that has finally gotten comfortable with xhtml and css, I have been wanting to improve my skills by learning javascript. This post has given me some direction and I thank you for it.

  • Tehseen | Ijaar, 05 August 2009

    Excellent tips and resources. Will come in handy for sure.

  • Karl Oakes, 05 August 2009

    Excellent article…. A word of advice for any js newbies even if you have a design or development background. Try and grasp some of the basics of js and the Document Object Model(DOM), i.e. unobstrusive scripting, events etc, before messing with the frameworks, i.e jQuery, mootools etc. Once you are comfortable with basics, I would recommend using the frameworks (hint:jQuery) as they normalise all the browser quirks that you have to fight with when using raw js, good luck..

  • website design, 05 August 2009

    These will be very useful for my next project. Many thanks!

  • martin, 05 August 2009

    For those of you who prefer the old fashioned method of learning, as a designer I would recommend Jeremy Keith’s (of Clearleft fame) ‘Dom Scripting’ book.

  • DesignDazzling, 05 August 2009

    very good resources of javascript

  • gideon, 06 August 2009

    Nice article. Could do with some proof reading though. Just being the grammar-nazi ;)

  • Webhostright, 09 August 2009

    Thanks for putting this together, i wasn’t aware of Learn-JavaScript-Tutorial, looks good, it all does.

  • setiawanpj, 09 August 2009

    Thanks friends for your info.its nice tutorials and i hope get more info about javascript or jquery from your blogg.

  • Matt, 10 August 2009

    “…there are a plethora of books out there on Javascript – feel free to help yourself to any of them.”

    Actually, I’m pretty sure the bookstores would prefer you pay.

    This article caught my eye because I’ve just started exploring learning Javascript–seems like a great jumping off point.

  • Bader, 23 August 2009

    Great resources, i used to know java script from the college but now and when i’ve some ideas to make .. i forget every thing :(

  • claudio merino, 30 August 2009

    great article :)
    helps me a lot with my fear of the “what all this something.something” means
    it’s no so difficult, isn’t it?

  • JXL94, 22 October 2009

    Each one of us can contribute to building society. ,

  • Pol38, 23 October 2009

    Granted I do not necessarily believe all the responses he gave, actually very few. ,

  • Ranjit, 11 December 2009

    Really its Rocking.. Awesome.. Thanks.

  • denbagus, 21 January 2010

    great javascript resources for web designers. thank you

  • Ronda Ekins, 07 November 2010

    Is definitely blogengine better than blogger for some reason? Should be because it is ever more popluar recently.

  • Digital Caliper, 01 December 2010

    of course when you dont have time to cook, fastfoods would always be the best option :;,

  • Download redtube Videos, 13 December 2010

    I so enjoyed your blog. Excellent content. Please keep posting such great cotent.

  • calvin frank, 18 January 2011

    Great artical, had no problems printing this page either.

  • wisdom teeth removal, 27 January 2011

    i was looking for
    it do you have any wisdom teeth remedy coz im looking for my bro

  • moteur hors bord occasion, 28 January 2011

    i was looking for
    it do you have any moteur hors bord occasion

  • Karrie Heally, 15 February 2011

    Strange this post is totaly irrelevant for the search query I entered in google but it really was listed on the 1st page. – When in doubt, tell the truth. – Mark Twain 1835 – 1910

  • David, 28 February 2012

    Great article. Tizzag and W3schools is definitely the way to go, both of these websites are helping me out tremendously.

  • Andrew Gale, 28 June 2012

    You forgot http://codeavengers.com on this list! :)

  • For a website designer like ourselves, I must say that http://www.tizag.com/ and http://www.w3schools.com/ are invaluable resources that we reference on a regular basis.

search form
 
image description image description