[geeks] javascript tutorial sought?

[Joshua Boyd]

On Aug 12, 2008, at 3:23 AM, der Mouse wrote:

> I'm looking for a javascript tutorial.  But not just any JS tutorial
> will do; I've done some searching and found a lot of them, but if any
> of them outline what I need, I'm missing them.
>
> I want to build a card-game client.  This means I need to handle  
> images
> (mostly the cards, but not entirely) and network connections.  There's
> nothing here that I couldn't do perfectly well in C for X, and indeed
> I'll have a version in C for X, but I want a version that runs on a
> Windows machine, and it seems to me that the least-pain way to do that
> is to write in JavaScript (almost certainly a lot less pain than  
> trying
> to teach myself to write Windows apps, especially since I don't,  
> have a
> Windows machine and this isn't important enough to me to make me get
> one for the purpose - I can test in Firefox).
>
> And none of the tutorials I've found describes how to handle network
> connections or moving images around the way I want to (basically, my
> mental model matches the physical model of a bunch of cards on a
> tabletop fairly closely).

> Suggestions?  I'm interested in webpages, books, text files, even  
> PDFs,
> whatever, as long as I can contrive to read it...

Do you understand javascript the language, networking and images  
aside?  If so, hopefully this message helps a little more with the rest.

First, you can't open arbitrary network connections in the web  
browser.  You can only open http connections to the server that  
delivered the web page.  The method for doing this is generally  
called XMLHttpRequest.  This is generally a good page on that topic:
http://ajaxpatterns.org/XMLHttpRequest_Call
The one problem with it how they fall back to ActiveX controls for IE  
older than 7.    They try the official XMLHttpRequest function first,  
then fall back to Msxml2.XMLHTTP then Microsoft.XMLHTTP.  According  
to Microsoft, the best order is the official XMLHttpRequest, then  
MSXML2.XMLHTTP.6.0, then MSXML2.XMLHTTP.  Otherwise, that page goes  
into good detail about gets versus posts, asynchronous usage, and  
provides links to patterns for doing it effectively.

The page points out that XMLHttpRequest is not actually XML specific,  
which is correct.  You can receive any arbitrary text.  My suggestion  
is to use Javascript Object Notation.  See http://json.org/.

I am still working on moving images myself. What I've been able to  
figure out so far came from http://www.webdesignerwall.com/tutorials/ 
css-decorative-gallery/
That's not exactly a guide to javascript at all, that just showed me  
the CSS trick needed to move images about, and I combined that with  
javascript to manipulate the styles to animate the images.

More flexible graphics can be done with the CANVAS tag (the elements  
of which can be manipulated with Javascript).  This is part of HTML5,  
and as such support across the browsers varies.  This is a good place  
to use an abstraction library.  Google provides one that does do  
anything more than try to implement CANVAS on IE on top of an  
included ActiveX control.  If at all possible, I'd stick with using  
CSS, even if that means pre-rendering a bunch of sprites.

BTW, there is a lot to be said for using a toolkit like jQuery or  
prototype or YUI or something like that.  There are two reasons that  
I am using plain javascript directly without a framework.  First, I  
want to know how the stuff works in the first place.  Second, I can  
fit it into smaller designs.  Even the compressed stripped versions  
of those libraries won't really fit well into one of the small ARM  
chips I'm using as a web server at work when combined with the  
program code and other pieces I need (128K flash).

Finally, if you aren't familiar with Javascript, the ORA books are  
fair.  I feel I've been able to get enough together off the web with  
help from Google to do without books on Javascript.  None of the  
books I've looked at have really been targeted as Javascript for  
People Who Already Know Lisp/Python/Other Dynamic Language And Just  
Want To Know How To Do The Cool Stuff Rather Than Treat As A Dumbed  
Down Language.  Of course, that would make an awful title anyway.

I hope this helps.