Just wondering if anyone has got some tips for introducing learners to JavaScript? Whether you’ve learned Javascript on your own or you’re currently helping others to learn – I’d be keen to hear your ideas!
I find the difficulty is finding practical examples of where simple Javascript is useful to students. In the past we’d use image rollovers or scrolling text as nice visual examples, but thesedays they’re both no-no’s as they can either be done with just HTML/CSS or are simply bad practise! A year or two ago it seemed that there was nothing useful that Javascript could do and it was on the way out.
But now Javascript is making a huge comeback with excellent AJAX features on websites that are really useful and usable – meaning that there’s real worth for students to learn Javascript. On the other hand, the code for this kind of stuff is definitely not for learners… so where does that leave us? How can learners be introduced to Javascript with useful examples that can be applied straight away?
I can think of only three simple applications of Javascript:
- The great pop-up window – ok, so it’s not always the best idea, but it can be useful for browsing image galleries, and is a great visual example.
- Form validation – again, Javascript might not be the best tool for this. These days most people prefer to use the server-side programming as you can provide more helpful feedback (and we don’t need to worry as much as we used to about the page re-loading). None the less, it provides a great way to see if-statements in action.
- Expanding/collapsing sections on a Form – nice way to see Javascript tied in with CSS to provide a useful feature.
Hopefully you can think of other simple applications of Javascript, or maybe you disagree totally… let me know! Perhaps we should just be helping learners to utilise Javascript rather than write code from scratch? It’d certainly be more useful…
Uncategorized 
Hi Michael,
first up: thanks for some great resources.
AFA JavaScript exercises go – I think a re-creation of the death clock
http://www.deathclock.com/ might be fun – doing the client side checking of the user inputs perhaps with some regular expression matching, displaying colour coded error messages using the DOM), allowing for bmi conversoin of ft/in/lb to m/cm/kg using a js function and radio button (or look at some other conversion method, like:
http://www.onlineconversion.com/weight_common.htm) and displaying the result as a visual countdown of seconds-till-death on the same page without a round trip back to the server.
wrt client side form checking – it’s still helpful, because it gives instant feedback (less load on a busy server, faster feedback for the user), of course you have to do server side checking too, but client side still has a place.
hope that gives you some food for thought,
Peter
Thanks Peter.
The deathclock looks really fun, but waay too complex for the learners in our course… (to start with anyway – perhaps we can build up to it!)
I really like the bunch of Favourite Javascripts for Designers that BlakeMS has put together… I might even try to simplify a few of those to get people started.
Good point about the client-side form checking too… it is still useful, especially some of the more modern scripts that use the DOM rather than the alert method.
Oh, and another one that’s occurred to me (while I was procrastinating over
the assignment I’m meant to be writing) – you might want to have your class
take a look at the Rico demos http://openrico.org/rico/home.page and see
what they can come up with themselves.
Hi Peter,
Coincidence should never go unexpected! I have been struggling with the same issue of simple examples, suitable for nurturing students on JavaScript. I have no issue with teaching the mouse-over effects as I use that to introduce the better practice (as you mention) such as CSS.
Another justification is to get some of the tacky approaches out of their system by setting a bad taste assignment (mouse overs, tickers, cursor effects, the works). The results can be fun and deeply disturbing. (ideas from http://www.effectmaker.com/gallery/jseyestrailer/index.html)
A more useful source by Moore (http://info200.infc.ulst.ac.uk/~adrian/mwp/chapter3.html) may prove useful or some simple game creation activities.
Ha! True about using tacky approaches to get it out of their systems! That’s exactly what I thought when I threw together Getting to know your window – where learners learn how to create annoying popup ads (using the ‘onload’ event and window.open() ). Most seemed to enjoy it!
Thanks for the links too Peter, I’ll check them out!