JavaScript

Archived

This page has been archived and will receive no further updates.

General

Resources

Notes

  • Interactive shells:

    • Use Chrome’s built-in console (just create a blank page by going to about:blank and then press Ctrl+Shift+J)
    • Mozilla provides an interactive javascript shell:

      https://developer.mozilla.org/en/Introduction_to_the_JavaScript_shell

      • To install in ubuntu/elementary:

        sudo apt-get install rhino
        

        Then call js to run it

    • To write messages to the console:

      console.log("test");
      

Basics

Gotchas

  • Use === and !== instead of == and != (similar to PHP)

  • Use let (ES6) instead of var when declaring variables since var uses function-level scoping whereas let uses block-level scoping which will act in a way that programmers coming from other languages are more likely to expect.

  • Functions can be declared multiple ways that change how the functions can be used. See the section on functions.

Style

(Also see style guide resources above)

  • Quotes:
    • There is no difference between single/double quotes in JavaScript
    • Use single quotes to work with HTML easier (which uses double quotes)
      • If working on an existing project or with an API, use whatever the surrounding code uses
  • Use two spaces for indentation

Declare a variable (ES6)

let variable = 'value';

Strings

Using variables in strings

console.log(`text ${expression}`);

Concatenate variables, strings

'string' + variable

Arrays

Declare an array

let someArray = [];
let anotherArray = ["item1", item2"];

Add an item to the end of an array

myArray.push("some string");

Get the length of an array

myArray.length

Exceptions

Throwing exceptions

Use this format:

throw new Error('Error text');

That’s preferable to throw 'text' because that won’t include the call stack (https://github.com/getify/You-Dont-Know-JS/blob/master/types%20%26%20grammar/ch3.md#date-and-error)

DOM

Notes:

  • You cannot get the length element of an element with the same id but many nodes using getElementById. It will only get the first node. You need to refer to the element directly, e.g:

    document.form_name.radio_name.length;
    

    not:

    document.getElementById('radio_id').length;
    

Get a specific element by ID

let element = document.getElementById('some_id');

Get all elements of a specific type

let inputs = document.getElementsByTagName('input');
for (let i = 0; i < inputs.length; ++i) {
    alert(inputs[i].value);
}

Accessing an element’s attributes

Normally element.attribute, e.g. element.id, element.name, element.src, element.value

Specific tasks

Replace contents of a div

document.getElementById('div_id').innerHTML = 'new content'

Async/promises

See JavaScript async