Javascript Notes

Useful Javascript libraries

Language basics

Javascript variable types

Log information to the debug console

var name = "string";

Operators (MDN Operator Reference)

+ concatenation
- subtraction
* multiplication
/ division

== equals with type coercion
=== equals without type coercion

Boolean operators


Function example:

function myFunc(param1, param2) {
    return 2 + 2;

Control statements

Case statement:

job = "cabbie";

switch  (job) {
    case 'cabbie':
    case default:

If statement:

if (expression) {
else {

Use the ternary operator to shorten the if else

this.textContent === "Gorp" ? foo = 3: foo = 1;

### Loop statements

The break and continue keywords can be used to skip a loop and to break out of a loop

For loops:

for (var i = 0; i < 10; i++ { …. }

ForEach loops:

var nums = [12, 24, 36, 48]; nums.forEach(function(num) { console.log(num); });

function printNum(number) { console.log(number); }

var nums = [12, 24, 36, 48]; nums.forEach(printNum);

While loops:

var myArray = [“a”, “b”, “c”]; while (myArray.length > 0) { console.log(myArray.pop()); }

### Arrays (zero based)

var names = [‘Bill’, ‘Louie’, ‘Mark’]; var names = new Array(Bill, Louie, Mark); console.log(names[0]);

Mutate a value in an array:

names[0] = ‘Sherry’;

Add an entry to the end of the array:


Add an entry to the beginning of an array:


Grab the last entry from an array and remove it:


Grab the first entry from an array and remote it:


Get the position of an array element:

-1 entry doesn't exist  
return code contains index of entry we are looking for  


Check if an entry exists in an array:

if (names.indexOf(‘Oppie’) === -1 ) { // Oppie doesn’t exist }

Create a subset of an array (a slice)

var num = [ 12, 24, 36, 48, 60]; var foo = num.slice(2,3);

### Methods to display data and get feedback while debugging

Clear the screen:


Pop up an alert:

alert(“I am annoying you!");

Prompt the user for input:

prompt(“Please type something in:");

### Objects (unordered)

* Items in an object are referred to as properties
* The this variable refers to the current object
* Objects have no order

Create an object:

var travel = { destination: ‘Florida’, luggage: true, travelData: 10-10-2018, clothes: [‘shirts’, ‘pants’, ‘socks’] packed: false; // Function expression packed: function() { return this.packed; } }

Grab an entry out of an object:

travel.destination; travel[‘destination’]; travel[myVariable];

Create a new base object:

var foo = new Object()l foo.destination = ‘Canada’;

### Execution contexts

* This points to the global object in a regular function call
* This points to the object that is calling the method in a method call
* The this keywork is not assigned a value until a function where it is defined is actually called
* When a function call occurs this points to the Window object

### DOM manipulation and events

* DOM -> Document Object Model
* The DOM is a structured represnetation on an HTML docment
* DOM models are modeled in Javascript
* The DOM is used to connect web pages to javascript
* For each HTML section there is a DOM object created that we can use in our scripts
* Events are notifications sent to notify us that something (mouse click, window resize, etc.) happened
* Event listener waits for an event to happen and performs an action
* Message queue is where events are placed when they happen
* Event listeners are functions that are called when an event occurs

### DOM manipulation methods

* Document selector methods (these return a node list):
  * document.getElementById()
  * document.getElementsByClassName()
  * document.getElementsByTagName()
  * document.querySelector()
  * document.querySelectorAll()

myVar = 23; document.querySelector('#selector’).textContent = myVar;

myVar = 23; document.querySelector('#selector’).innerHTML = ‘STRONG TEXT’;

var val1 = document.querySelector('#selector’).textContent; console.log(val1)

Set CSS attribute for a class:

document.querySelector('.myClass’).style.display = ‘none’; document.querySelector('.myClass’).style.display = ‘block’;

Add an event listener for click. onClick is the callback function.

function onClick() { … }

document.querySelector('.myClass’).addEventListener(‘click’, onClick);

Select all a tags with theclass gorp inside li:

document.querySelector(“li a.gorp”);

# Use an anonymous function

document.querySelector('.myClass’).addEventListener(‘click’, function() { … }

Change an image 

var myVar = document.querySelector('.myElement’); = ‘clock’; myVar.src = ‘image-2.png’;

Get an element by id

document.getElementById('#myElement’).textContent = 0;

### Useful javascript methods

Run code at an interval

setInterval(funcToCall(), interval_in_ms)

Get the type of a variable:

var foo = 23; typeof foo;

### DOM manipulation

Print the DOM from a page to the Javascript console


### CSS class adds / removes
document.querySelector("a").classList.add("newCSSClass"); // Add a class to an a element
document.querySelector("a").classList.remove("newCSSClass"); // Remove a class from a element
document.querySelector("a").classList.toggle("newCSSClass"); // Toggle the class on and off for the a element

### Get and set element attributes

var aTag = document.querySelector(“a”); aTag.getAttribute(“href”); aTag.setAttribute(“href”,“”);