JavaScript Code Conventions

All JavaScript projects adhere to the same coding standards.

JavaScript Code Conventions

Code conventions typically include the following aspects:

• Naming rules for variables and functions
• Rules for the use of white space, indentation, and comments
• Other common practices...

Consistent code is easier to read and maintain.

Code conventions are usually defined before development begins and can be set in consultation with your team members.

Variable Names

It is recommended to use camelCase for variable names:

firstName = "John";
lastName = "Doe";
price = 19.90;
tax = 0.20;
fullPrice = price + (price * tax);

Spaces and Operators

Usually, spaces are added around operators ( = + - * / ):

Example:

var x = y + z;
var values = ["Volvo", "Saab", "Fiat"];

Code Indentation

Typically, code blocks are indented using four spaces:

Function:

function toCelsius(fahrenheit) {
    return (5 / 9) * (fahrenheit - 32);
}

| | Do not use the TAB key for indentation, as different editors interpret TABs differently. | | --- | --- |

Statement Rules

General rules for simple statements:

• A statement usually ends with a semicolon.

Example:

var values = ["Volvo", "Saab", "Fiat"];
var person = {
    firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue"
};

General rules for complex statements:

• Place the opening brace at the end of the first line.
• Use one space before the opening brace.
• Place the closing brace on a new line.
• Do not end a complex statement with a semicolon.

Function:

function toCelsius(fahrenheit) {
    return (5 / 9) * (fahrenheit - 32);
}

Loop:

for (i = 0; i < 5; i++) {
    x += i;
}

Conditional Statement:

if (time < 20) {
    greeting = "Good day";
} else {
    greeting = "Good evening";
}

Object Rules

Rules for object definitions:

• Place the opening brace on the same line as the object name.
• Use a space between the colon and the property value.
• Use double quotes for strings, numbers do not need quotes.
• Do not add a comma after the last property-value pair.
• Place the closing brace on a new line and end with a semicolon.

Example:

var person = {
    firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue"
};

Short object code can be written on a single line:

Example:

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Line Length Less Than 80

For better readability, it is recommended that each line of code does not exceed 80 characters.

If a JavaScript statement exceeds 80 characters, it is advisable to break it after an operator or a comma.

Example:

document.getElementById("demo").innerHTML =
    "Hello tutorialpro.";

Naming Conventions

Many programming languages share similar naming conventions, such as:

• Variables and functions use lowerCamelCase, i.e., the first letter of each word except the first is capitalized.
• Global variables are written in uppercase.
• Constants (like PI) are written in uppercase.

Do you use these rules for variable names: hyp-hens, camelCase, or under_scores?

HTML and CSS Hyphen(-) Character:

HTML5 attributes can be prefixed with data- (e.g., data-quantity, data-price).

CSS uses hyphens to connect property names (e.g., font-size).

| | Hyphens are typically considered subtraction in JavaScript and are therefore not allowed. | | --- | --- |

Underscores:

Many programmers prefer underscores (e.g., date_of_birth), especially in SQL databases.

PHP often uses underscores.

PascalCase:

PascalCase is commonly used in C languages.

Camel Case:

Camel case is generally recommended in JavaScript, and jQuery and other JavaScript libraries use it.

| | Do not start variable names with $, as it may conflict with many JavaScript libraries. | | --- | --- |

Loading External JavaScript Files

Use a concise format to load JavaScript files (the type attribute is not necessary):

<script src="myscript.js">

Accessing HTML Elements with JavaScript

Poorly formatted HTML can cause JavaScript errors.

The following two JavaScript statements will produce different results:

Example

var obj = getElementById("Demo")
var obj = getElementById("demo")

Try to use the same naming conventions for both HTML and JavaScript.

Access HTML(5) Code Conventions.

File Extensions

HTML files can have the extension .html (or .htm).

CSS files have the extension .css.

JavaScript files have the extension .js.

Using Lowercase File Names

Most web servers (Apache, Unix) are case-sensitive: london.jpg cannot be accessed as London.jpg.

Other web servers (Microsoft, IIS) are not case-sensitive: london.jpg can be accessed as London.jpg or london.jpg.

You should maintain a consistent style, and we recommend using lowercase file names.