-
Notifications
You must be signed in to change notification settings - Fork 1
Coding Style::Javascript
camelCase for identifier names (variables and functions).
All names start with a letter.
firstName = "John";
lastName = "Doe";
price = 19.90;
tax = 0.20;
fullPrice = price + (price * tax);
Always put spaces around operators ( = + - * / ), and after commas:
var x = y + z;
var values = ["Volvo", "Saab", "Fiat"];
Always use 4 spaces for indentation of code blocks:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
General rules for simple statements: Always end a simple statement with a semicolon.
var values = ["Volvo", "Saab", "Fiat"];
var person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
General rules for complex (compound) statements:
- Put the opening bracket at the end of the first line.
- Use one space before the opening bracket.
- Put the closing bracket on a new line, without leading spaces.
- Do not end a complex statement with a semicolon.
Functions:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
Loops:
for (i = 0; i < 5; i++) {
x += i;
}
Conditionals:
if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
General rules for object definitions:
- Place the opening bracket on the same line as the object name.
- Use colon plus one space between each property and its value.
- Use quotes around string values, not around numeric values.
- Do not add a comma after the last property-value pair.
- Place the closing bracket on a new line, without leading spaces.
- Always end an object definition with a semicolon.
var person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
Short objects can be written compressed, on one line, using spaces only between properties, like this:
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
For readability, avoid lines longer than 80 characters. Max 120 if you have to. If a JavaScript statement does not fit on one line, the best place to break it, is after an operator or a comma.
document.getElementById("demo").innerHTML =
"Hello Dolly.";
Always use the same naming convention for all your code. For example:
- Variable and function names written as camelCase
- Global variables written in UPPERCASE (We don't, but it's quite common)
- Constants (like PI) written in UPPERCASE
Should you use hyp-hens, camelCase, or under_scores in variable names?
- Hyphens in HTML and CSS
- HTML5 attributes can start with data- (data-quantity, data-price).
- CSS uses hyphens in property-names (font-size).
- Hyphens can be mistaken as subtraction attempts.
- Hyphens are not allowed in JavaScript names.
Use simple syntax for loading external scripts (the type attribute is not necessary):
<script src="myscript.js"></script>
A consequence of using "untidy" HTML styles, might result in JavaScript errors.
These two JavaScript statements will produce different results:
var obj = getElementById("Demo")
var obj = getElementById("demo")
If possible, use the same naming convention (as JavaScript) in HTML.
HTML files should have a .html extension (not .htm).
CSS files should have a .css extension.
JavaScript files should have a .js extension.