Learning JavaScript ...

[Chainsaw Hobbit]

I am a homeschooled high school student, and I have been given an assignment to learn JavaScript. I have opted to strike out on my own, and learn what I need to know from the internet.

What I would like to do, as an exercise, is make a character builder for some sort of tabletop roleplaying game - probably something simple and d20-based like Basic Fantasy or Castles & Crusades.

I can learn the basic principals of the language from internet tutorials, but I would like some help deciding how to approach making a character builder. How should I structure it? How long can I expect it to take? What are some possible pitfalls?

Thanks in advance!

[Douglas]

JavaScript can't really stand on its own, it is a language used to add certain types of features to things mostly built with another language. You are going to have to learn at least the basics of HTML and the Document Object Model (DOM) as well, possibly CSS and some other things depending on how ambitious you get with it.

If you want the characters generated by this to be stored and saved anywhere, you will have to learn some non-JavaScript means of doing that because JavaScript can't do it.

JavaScript has one enormous pitfall in that, while there is an official standard for the language, it is not followed in every detail by every browser. Somewhere along the line, you will almost certainly run into something that works in Internet Explorer but not Firefox, or vice versa, or some other combination with other browsers. It may even differ between consecutive versions of the same browser.

For design approach, think about the steps you would go through for character creation on paper, the order, and what depends on what. In general, if a later part depends on an earlier part then you will want the section of web page dealing with the later part to be not present, hidden, or disabled/blank until the earlier part is completed. If you want to get in the habit of acting as if security matters (which it obviously doesn't for this, but having it as a habit will help if you ever have a future project where security does matter), "not present" is the strongly preferred (but harder to implement) option. This is because browser plugins and special tools on the client machine can alter your web page in almost arbitrary ways, and if all they have to do is clear one hidden/disabled flag to bypass your lockout then it's really easy to do. Worrying about security is an optional extra credit type option on a project like this, though, so don't feel like you have to do it.

If at any point you find yourself using JavaScript to construct whole sections of a web page, stop, take a deep breath, and tear out that part of the code and replace it with a link/redirection/whatever to a separate page.

Do not, ever, under any circumstances, use JavaScript to implement the behavior of a link. There are standard HTML options for that, and using JavaScript instead prevents several highly developed and useful standard features of most browsers from working. This will annoy many users of your web pages. If disabling those features is for some reason desirable, think long and hard about why and whether the reasons are really that important.

In a project like this, I would expect JavaScript to be useful primarily for A) automatically calculating numbers and fields that are dependent on others, B) filling in the list of available choices for a later step that is dependent on an earlier step, and C) any minor changes to the page you would like to happen while a character is in progress without having to reload the page from the server. Category C should be quite small unless you are getting very fancy indeed. The vast majority of everything else should be handled with HTML and maybe CSS.

[Grindle]

I'd like to say that some internet Javascript tutorials are pretty low quality. (In particular, avoid W3Schools).

Also, some possibly helpful links:

http://dev.opera.com/articles/view/1...dards-cur/#toc

https://developer.mozilla.org/en-US/docs

http://eloquentjavascript.net/

http://javascript.crockford.com/javascript.html

[factotum]

Is it definitely JavaSCRIPT you're supposed to learn? Because the thing you said you want to do sounds more like a job for full-blown Java--as douglas points out, Javascript is really intended to add facilities to other languages and programs, not stand alone as a programming language.

[Chainsaw Hobbit]

Is it definitely JavaSCRIPT you're supposed to learn? Because the thing you said you want to do sounds more like a job for full-blown Java--as douglas points out, Javascript is really intended to add facilities to other languages and programs, not stand alone as a programming language.

My father was rather specific. I do know a small amount of HTML, though.

[Grindle]

I think you could use Javascript to make a character builder perfectly well. For examples of a site using Javascript for D&D related uses, see http://www.d20srd.org/extras/d20encountercalculator/ or http://www.d20srd.org/extras/d20dicebag/.

[Grinner]

It won't be pretty, but you could certainly do it in Javascript.

First, how much control should the user have over the final result? Keep in mind that the more control they have, the harder it will be to program.

I think you could use Javascript to make a character builder perfectly well. For examples of a site using Javascript for D&D related uses, see http://www.d20srd.org/extras/d20encountercalculator/ or http://www.d20srd.org/extras/d20dicebag/.

Same principle, yes, but a character generator is just a wee bit more complicated, especially where player characters are involved.

[Emmerask]

Javascript is really an odd choice in my opinion for a first programming language to learn.

Most of the heavy lifting will more or less be done in another language with javascript just doing some calculations from user inputs etc

If you (or more your father) is dead set on java script (instead of say java or c# or python) well be prepared to learn none javascript stuff too for that project.

If you want the characters generated by this to be stored and saved anywhere, you will have to learn some non-JavaScript means of doing that because JavaScript can't do it.

As for the storing of a user character couldn´t you use json for serializing/deserializing and store the string in the local storage?
Never done anything with javascript so its just a guess what might work

[Flickerdart]

It really depends on what you mean by "character builder". If it's something like what MythWeavers presents - a character sheet with some automatically calculated values - then that's mostly HTML and you barely need any Javascript at all. If you actually want to take people through the steps of building a character, that's still HTML, but there will be more scripting involved.

The only way to do it in "pure" JS is using HTML5 Canvas to construct all the bits, but Canvas isn't really intended for that.

[valadil]

JavaScript can't really stand on its own, it is a language used to add certain types of features to things mostly built with another language. You are going to have to learn at least the basics of HTML and the Document Object Model (DOM) as well, possibly CSS and some other things depending on how ambitious you get with it.

If you want the characters generated by this to be stored and saved anywhere, you will have to learn some non-JavaScript means of doing that because JavaScript can't do it.

By itself I agree. But presentation, DOM, and file saving can be bypassed if instead of writing the script in straight up javascript you do it as an extension for a Google Documents spreadsheet. That'll take care of storage and presentation. From what I've seen of the API, it's going to be a steeper learning curve than just javascript, but it'll be focused on one thing instead of divided over javascript, HTML, and maybe a PHP backend.

[Grindle]

If you want the characters generated by this to be stored and saved anywhere, you will have to learn some non-JavaScript means of doing that because JavaScript can't do it.

Here's an simple example I've made of how you can use Javascript to basically do file-saving: http://jsfiddle.net/a_e_m/e9wcW/show/
(Users could bookmark the page/save it to a file/print it out. Here's a simple example character.)

There are two files involved, a form page and a template page. When submitted, the form is sent (via GET request) to the template, which fills itself out using Javascript.

Pros:

• simple to implement, no dealing with servers, could work offline
• no learning another programming language

Cons:

• long enough URLs could cause problems in some browsers
• Javascript required for the character sheet (not really a reasonable con, because the character generator would be javascript-dependent too)