Pencil Code Reference > camelCaps
Most programming languages (including CoffeeScript and Javascript) are case-sensitive:
tagName ≠ tagname
It is important to pay attention to the capitalization of standard names.
In CoffeeScript and Javascript, names of variables are not allowed to contain spaces or punctuation such hyphens, so programmers sometimes use other conventions to denote phrases.
With the camelCaps convention, words in a phrase are written together as a single word, but with a capital letter at the start of each word. The first letter is often left lowercase if the intention is for the whole word to be "lowercase".
For example the standard function to "add event listener" is written as a single name:
addEventListener
The convention is called camelCaps because of the camel humps in the middle.
While camelCaps is the most common spelling seen for long names in code on the Web, there are other captialization conventions that are often seen.
Context | Convention | Example |
---|---|---|
Turtle functions | lowercase | jumpto |
Javascript/Coffee functions | lowerCamelCase | toString |
Javascript/Coffee classes | UpperCamelCase | RegExp |
Constant values | UPPER_UNDERSCORE | SQRT1_2 |
Special floating point numbers | UpperCamelCase | Infinity |
HTML tags and attributes | lowercase | onclick |
DOM event names | lowercase | mousemove |
DOM properties | lowerCamelCase | tagName |
DOM value for element.tagName | UPPERCASE | CANVAS |
CSS property names and values | lower-case-hyphen | font-size |
C++, python, ruby names | lower_underscore | out_of_range |
Wikipedia has a whole article about naming conventions in different programming languages.
There ocassional oddball exceptions; for example in CSS, different values for the "white-space" property include "pre-wrap" (hyphenated, as usual) and "nowrap" (no hyphens, an exception).
Some inconsistencies have to do with acronyms:
encodeURIComponent
In camelCase names, acronyms are usually fully-capitalized, but not always. In this standard function name, we see two approaches within the same name:
XMLHttpRequest
All the different conventions mean that you need to do a little extra work when using a new set of names. If you cannot remember the capitalization of the function you need, look it up!
In some domains, the capitalization rules are very consistent.
Within CSS stylesheet files, hyphens are allowed, and all property names are all-lowercase-hyphenated.
When CSS style properties are referenced in Javascript and CoffeeScript where hyphens are not allowed, the convention is to convert the names to camelCaps in a uniform way: every letter after a hyphen is capitalized, even if the hyphen comes at the start.
CSS property name | Property name in JS or Coffee |
---|---|
border-width | borderWidth |
font-size | fontSize |
color | color |
text-decoration | textDecoration |
-webkit-user-select | WebkitUserSelect |
When CSS property names are used in script, (like in the jQuery css function or the turtle label function), they are used in the camelCaps form.
label 'Styling!', fontSize: 50 textDecoration: 'underline' color: blue↑