Northcentral Technical College Introduction To Programming
10-152-310
Introduction to Programming with JavaScript NTC 10-152-310

Learning Plan 6 JavaScript Coding Standards

# JavaScript Coding Standards for 10-152-310

- Here are the coding standards for the course and a screencast overview. Your projects and labs will be graded partially on conformance to these rules. This document will be expanded as the semester progresses. The accompanying screencast is at the bottom page.

- One of the most important aspects of modern programming is readability. To be able to read code written by other people and understand it has become much more important than having condensed, optimal code. Modern programming languages can optimize your code better than you can. So, the number one criteria for the way we write is for other human beings to read it. These standards are about readability, making your could as readable as possible.

### 1. Indentation

- The unit of indentation of JavaScript source code will be four (4) spaces. Do not use the tab character. The course editor (jEdit) has been configured so that when you press the tab key it will insert 4 spaces instead of a tab. Keep this setting and if you use another text editor make sure you are not inserting tab characters into your code.

### 2. Line Length

- Avoid making any line of JavaScript code more than 80 characters. This improves readability. Sometimes this can't be avoided but when possible it is required to have 80 or fewer characters in a line of code. The course editor has been configured to show a vertical line at column 80 to help you with this standard:

### 3. Comments

> Good documentation will be required in your labs and projects files. Here is a minimal list of what the instructor will be looking for. Quality counts!

1. The student's name, section, and email at the top of lab and project files.
2. All functions need to have a block of comments describing what the function does. More details later when we get to functions.
3. All loop constructions will have a comment block immediately preceding the loop. The comments should describe what the loop accomplishes.
4. All difficult or confusing sections of code should have a preceding comment which explains the code.

### 4. Constant Declarations

- Constants must be declared before variables and labelled.
- Constants use the `var` statement like variables.
- Constants names will be in uppercase letters only.
- Multi-word constants will use the underscore `(_)` to separate words.
- Constants are always assigned their values when they declared.
- Examples:
- All labs and projects must use constants for all values that are fixed and don't change while the program runs. Examples of these include:
- Loops must be constructed with constants for the loop maximum value as in the following example:

### 5. Variable Declarations

> Good variable naming and usage is very important when learning to program computers. Here is a list of the rules for variables:

1. Variables must follow the naming conventions outlined below.
2. All variables must be declared before they are used. Many programming languages require this as part of their syntax. However, JavaScript does not require this so you need do this intentionally.
3. `var` statements must be at the top of your JavaScript code and functions, right after the constant declarations.
4. Every variable must be declared on its own line.

### 6. Calculations and Variables

- The results of all calculations must be assigned to a variable. No calculations should be performed inside a document.write() function except concatenation and `typeof`. Here's an example:
- All calculations must be performed with variables only. No hard-coded numbers are allowed in calculations.

### 7. Function Declarations

> Here are the new standards for functions.

- All functions must be declared in an external file, no functions are allowed in the HTML document.
- All functions must be declared before they are used. This is an important performance standard, not JavaScript syntax. Your code will run without conformance with this standard so care must be taken to follow it.
- There should be no space between the name of a function and the ( (left parenthesis) of its parameter list. There should be one space between the ) (right parenthesis) and the { (left curly brace) that begins the statement body. The body itself is indented four spaces. The } (right curly brace) is aligned with the line containing the beginning of the declaration of the function.
- `return` Statement
  - A return statement with a value should not use `( )` (parentheses) around the value. The return value expression must start on the same line as the return keyword in order to avoid semicolon insertion.

### 8. Naming Conventions

> How things are named in a computer program is very important. In the early days of programming names were very short and cryptic to save on RAM usage. You may have seen variables with names like "i", "fnme", and "cal_prc". These days our computers all have lots and lots of RAM and we can stop this old confusing habit. Here are the course rules for naming things:

1. Names must be created with the 26 upper and lower case letters (A..Z, a..z) and the 10 digits (0..9).
2. Do not use the underscore "_", the dollar sign "$", or slashes "/ \" in variable names.
3. Variables and functions must start with a lower case letter.
4. Variables must not have names that are 1 or 2 characters in length. (There are a few exceptions that we'll see in looping.)
5. Constructor plain functions must start with an upper case letter.
6. Constants must be in ALL CAPS.
7. Abbreviations must be avoided, use complete words wherever possible, which is the vast majority of the time. What does "cal_prc" mean? Calculate Price? Calculate Percentage? Calender Perfection? Names need to be very clear, for others and for you. You won't remember your own cryptic names in the future.
8. Names, other than constants, that have more than one word should use the "camel case" convention. The name starts with a lower case letter and then each new word in the name starts with an upper case letter. Examples:

### 9. Semicolons

- Semicolons are used in JavaScript to end a line. Most of the time they are not required by JavaScript. However, they are required in a few places so as a course standard, that is also a convention in the industry, the use of semicolons at the end of statements is required.
- Examples
- Exceptions to the rule
  - There are some statements that should not have semicolons. These are usually compound statements like this:

### 10. Statements

> The way we write statements is critical for code that is readable and easy to understand. Here is how we're going to write JavaScript statements.

- Every statement must end with a semicolon.
- Every simple statement must be on it own line. This code will work but it fails the course standards in a couple of ways:
- On line 1 there are two statements. JavaScript doesn't care but your instructor and future professional teammates will.
- On line 3 the statement is missing the semicolon at the end. JavaScript won't remind you to put them there. You will just have to get in the habit.
- Here's the correct version:
- Compound statements are different than simple statements. They are statements that contain lists of other statements enclosed in curly braces "{}".
  - Enclosed statements should be indented
  - The left { should be at the end of the line that starts the compound statement.
  - The right } should begin a line and should match the beginning of the compound statement.
  - Braces ( {} ) should be used on all enclosed statements, even if there is only one enclosed statement.
  - Here's an example using if statements:

### 11. Whitespace

> Whitespace can improve the readability of code. Here are the course standards for whitespace.

- Use blank lines liberally, your code shouldn't be all bunched together.
- Blank spaces should be use like this:
  - A keyword followed by a left parenthesis "(" should be separated by a space.
- Most operators should have a space on either side.
- A space should follow every comma ","
- The dot operator (`.`) should not have spaces on either side of it.
- Unary operators should not have spaces around them.

### 12. Algorithm and Pseudocode Coding Standards

> Here are the standards for pseudocode and algorithms.

#### All algorithms must start with a name and end with the word `END` in uppercase.

    createNewEmployee

        ...

    END

#### All pseudocode statements in an algorithm must be indented by four (4) spaces within each block.

    createNewEmployee

        read employee name
        create new employee record
        save record to file

    END

#### IF/ENDIF

- if/endif statements will be written as follows.
  - The if statement will start with `IF` in uppercase.
  - The if conditional will follow the word `IF` and not be surrounded with parentheses.
  - The end of the line with `IF` will be the word `THEN` in uppercase.
  - All `IF` statements will end with `ENDIF`
  - Pseudocode statements with the `IF` statement will be indented by four (4) spaces.

        IF conditional THEN
            pseudocode statements
            ...
        ENDIF

#### IF/ELSE/ENDIF

- if/else/endif statements will be written as follows.
  - The if statement will start with `IF` in uppercase.
  - The if conditional will follow the word `IF` and not be surrounded with parentheses.
  - The end of the line with `IF` will be the word `THEN` in uppercase.
  - The else statement will be on its own line and be the word `ELSE` in uppercase.
  - All `IF` statements will end with `ENDIF`
  - Pseudocode statements with the `IF` statement will be indented by four (4) spaces.

        IF conditional THEN
            pseudocode statements if true
            ...
        ELSE
            pseudocode statements if false
            ...
        ENDIF

#### IF/ELSE IF/ELSE/ENDIF

- if/else if/else/endif statements will be written as follows.
  - The if statement will start with `IF` in uppercase.
  - The if conditional will follow the word `IF` and not be surrounded with parentheses.
  - The end of the line with `IF` will be the word `THEN` in uppercase.
  - The else if statements will be on their own line and be the words `ELSE IF` in uppercase with a space in between the words. There can be many of these statements.
  - The else if conditional will follow the words `ELSE IF` and not be surrounded with parentheses.
  - The end of the line with `ELSE IF` will be the word `THEN` in uppercase.
  - The else statement will be on its own line and be the word `ELSE` in uppercase. In a if/else if/else/endif statement, the else is optional but must occur after all the else if statements and before the `ENDIF`.
  - All `IF` statements will end with `ENDIF`
  - Pseudocode statements with the `IF` statement will be indented by four (4) spaces.

        IF conditional THEN
            pseudocode statements if true
            ...
        ELSE IF conditional THEN
            pseudocode statements if "else if" is true
            ...
        ELSE IF conditional THEN
            pseudocode statements if "else if" is true
            ...
        ELSE
            pseudocode statements if false
            ...
        ENDIF

#### WHILE Loops

- while loop statements will be written as follows.
  - The while statement will start with the word `WHILE` in uppercase.
  - The while conditional will follow the word `WHILE` and not be surrounded with parentheses.
  - The end of the line with `WHILE` will be the word `DO` in uppercase.
  - All `WHILE` statements will end with `ENDWHILE`
  - Pseudocode statements with the `WHILE` statement will be indented by four (4) spaces.

        WHILE student_total < 50
            read student record
            print student name, address to report
            add 1 to student_total
        ENDWHILE

#### FOR Loops

- for loop statements will be written as follows.
  - The for statement will start with the word `FOR` in uppercase.
  - The for conditional will follow the word `FOR` and not be surrounded with parentheses.
  - The for conditional will consist of a statement about the looping bounds. Examples:
    - `count 0 to 10`
    - `each record in record set`
  - The end of the line with `FOR` will be the word `DO` in uppercase.
  - All `FOR` statements will end with `ENDFOR`
  - Pseudocode statements with the `FOR` statement will be indented by four (4) spaces.

        FOR count 0 to 10
            read a number
            output number
        ENDFOR

        FOR each record in the Student Exam Records
            read firstName
            read lastName
            create fullName as firstName + " " + lastName
            output fullName
        ENDFOR

#### Calculations and Generation in Algorithms

- All algorithms need to be complete. You need to fully represent all calculations and string generations in pseudocode.
- Statements like "`generate message`" are not acceptable. The statements need to be complete, like "`generate message as 'Hello, ' + fullName`". All spaces and punctuation need to be accounted for.
- Statements like "`calculate celsius temperature`" are not enough. The formula needs to be complete with parentheses, "`calculate celsius temperature as (fahrenheit - 32) * (5 / 9)`".

#### Variables

- Variables will be declared with the word `declare` in lowercase or `DECLARE` in uppercase.

          declare firstName

- Variables will be assigned values with the word `set` in lowercase or `SET` in uppercase.

          SET firstName to "Fred"

#### Algorithms must be complete.

- All algorithms must be complete with all input, processing, and output statements present.
- All calculations in algorithms must be complete and code ready.
- All string generations must be complete with all spaces, punctuation, and variables.

#### Don't forget the `END`!

#### Solution Algorithms with functions, parameters, and arguments

- Every function must have a separate Solution Algorithm.

    PassingParameters
        AddTwoNumbers(firstNumber, secondNumber)
    END

    AddTwoNumbers(numberOne, numberTwo)
        declare total
        declare output
        get the display element and assign it to output
        total = numberOne + numberTwo
        display total to the page
    END

- All Solution Algorithms will be written in the JavaScript (.js) file as a comment above the function.
- It's a great idea to have a comment at the beginning of the JavaScript file that lists all the modules in the file.

#### The `END`.