API Reference

Array

.filter(callback) (see in MDN)

Executes a function on every element of the Array. It returns a new Array that contains only the elements for which the provided function returned true.

Example:

var myArray = [5, 6, 1, 2, 10];

var filteredArray = myArray.filter(function(num) {
    return num > 3; // Returns true only if the number is greater than 3
});

// filteredArray is [5, 6, 10]

.forEach(callback) (see in MDN)

Allows to execute a function on each and every element of the Array.

Example:

var myArray = ['Mickey', 'Goofy', 'Donald'];

myArray.forEach(function(name) {
   console.log('Hello' + name);
};

// Console Output
Hello Mickey
Hello Goofy
Hello Donald

.push(element) (see in MDN)

Appends an element at the end of the Array.

Example:

var myArray = [20, 100, 30];

myArray.push(50);

// myArray is now [20, 100, 30, 50]

Event

.target (see in MDN)

Returns the element on which the event was captured.

.preventDefault() (see in MDN)

Cancels the default event behavior.

String

.replace(pattern, replacement) (see in MDN)

Returns a copy of the String with the given pattern replaced with another String.

Example:

var myString = 'This and that';

var newString = myString.replace('and', 'or');

// newString is 'This or that'

.trim() (see in MDN)

Returns the original String without the whitespaces that it might have at the beginning or at the end.

Example:

var myString = '    Chocolate  ';

var newString = myString.trim();

// newString is 'Chocolate'

JSON

.parse(jsonString) (see in MDN)

Converts a JSON string into a Javascript Object.

var myObject = JSON.parse('{"type": "door", "state": "open"}');

// myObject is { type: 'door', state: 'open' }

.stringify(object) (see in MDN)

Converts a Javascript Object into a JSON string.

var myObject = { type: 'door', state: 'open' };
var jsonString = JSON.stringify(myObject);

// jsonString is '{"type":"door","state":"open"}'

document

.querySelector(cssSelector) (see in MDN)

Returns the first element that matches the provided CSS selector.

Example:

// HTML
<div class="container">
   <div id="myElement">
      <span>Hello!</span>
   </div>
</div>

// Javascript
var myElement = document.querySelector('#myElement');

// myElement contains a reference to <div id="myElement"></div>

Element

.innerHTML (see in MDN)

Returns the HTML contained inside an Element. It can be set to a new value.

Example:

// HTML
<div id="myElement">
  <span>Hello!</span>
</div>

// Javascript
var myElement = document.querySelector('#myElement');

// myElement.innerHTML returns '<span>Hello!</span>'

myElement.innerHTML = '<div>Something else</div>';

// Now the HTML is this:
<div id="myElement">
  <div>Something else</div>
</div>

.previousElementSibling (see in MDN)

Returns the Element before the selected one.

Example:

// HTML
<div class="container">
   <span>One</span>
   <span class="selected">Two</span>
   <span>Three</span>
</div>

// Javascript
var selected = document.querySelector('.selected');
var previous = selected.previousElementSibling;

// previous is <span>One</span>

.dataset (see in MDN)

Returns the map of the data- attributes of the selected element.

Example:

// HTML
<div id="myElement" data-type="door" data-state="open"></div>

// Javascript
var door = document.querySelector('#myElement');
var dataSet = door.dataset;

// dataSet is { type: 'door', state: 'open' }

.value (see in MDN)

Returns or sets the value of the input field.

console

.log(text) (see in MDN)

Writes a message in the browser's console.