Hints: On the JavaScript Naming Convention

[phil karras]

A method by any other name:

I believe that Michael has covered this in his books, but it seems that we're getting a number of questions which end with the same basic solution, renaming something the way JS expects.

The standard naming convention is: The first word is all lower case, then Uppercase the First Letter of all other words in a method name, as in things like: getElementById, etc .

Convert hypenated names to the standard JS convention name by removing the hyphen as in: font-weight to fontWeight.

Also, it seems that sometimes a method can be all lower case and if that works so does making the internal words first letters upper case. I'm not sure why that is unless for those it simply doesn't matter, or they were in the language before the conventino? There is probably a reason for it like the programmers were lazy, but I don't know it.

The safe bet I believe is to stick with the standard naming convention if it works since that should insure compatibility with the most browsers.
_________________
Phil K
Circle Software Consulting
Test website: http://cs.yrex.com/
Guidelines for Posting: http://jsworkshop.com/posting.html
IHBAAA = It Has Been Asked And Answered
KISS: http://jsworkshop.com/bb/viewtopic.php?t=508

[mgm]

Good article topic!

The naming convention actually predates JavaScript, it was called Hungarian something-or-other as I recall and is used in the Windows APIs. There are a few cases where JavaScript is case-insensitive, but you should generally assume that it is going to be picky about these things. For example, 'document' and 'window' can often be whatever case you want, but lowercase is the correct way.

The worst one is getElementById - it follows the convention but the lowercase 'd' gets people every time.

In CSS, remember NOT to use the JavaScript method. CSS directives are lowercase (and case-insensitive, I think) but allow hyphens. So...
> in HTML/CSS:
<p style="background-color: black; border-bottom-width: 10px;">
> in JavaScript:
obj.style.backgroundColor="black";
obj.style.borderBottomWidth="10px";

Here's a good reference for most of the CSS (not JavaScript) property names.
_________________
Michael Moncur
Owner and Moderator, The JavaScript Workshop
Read the guidelines before posting: http://jsworkshop.com/posting.html

[zachariah]

I am replying to this seemingly finished thread for two reasons. One is that there is a better place to go if you want all of the CSS property names. The second reason is that there is little mention in the posts here about the place to go for many webdesign answers, and that is the W3 Specification of the language you are using. Sure, you often have to look elsewhere to find out if a browser even follows the specs, but for the most part the specs are a good place to start, since they are the definition of the language you are trying to use.

Furthermore, these three specs are pretty darn easy to read IMHO:
HTML http://www.w3.org/TR/html401/
CSS1 http://www.w3.org/TR/REC-CSS1
CSS2 http://www.w3.org/TR/REC-CSS2/

Here are the lists for all of the CSS2 properties:
CSS1 http://www.w3.org/TR/REC-CSS2/propidx.html
Just look at the CSS1 table of contents to see all of the CSS1 properties.

Enjoy!

[mgm]

Good point. All of those specs are linked from our links page for future reference.

I don't generally refer people to the W3C specs because they tend to be confusing to beginners, and most of our questions are from beginners. I very frequently use them myself when answering questions, though.
_________________
Michael Moncur
Owner and Moderator, The JavaScript Workshop
Read the guidelines before posting: http://jsworkshop.com/posting.html