Javascript Notes


Useful Javascript libraries

Language basics

Javascript variable types

Log information to the debug console

var name = "string";
console.log(name);

Operators (MDN Operator Reference)

+ concatenation
- subtraction
* multiplication
/ division

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

Boolean operators

Functions

Function example:

function myFunc(param1, param2) {
    console.log(param1);
    return 2 + 2;
}

Control statements

Case statement:

job = "cabbie";

switch  (job) {
    case 'cabbie':
       ....
       break;
    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:

names.push(‘Oppie’);


Add an entry to the beginning of an array:

names.unshift(‘Sue’);


Grab the last entry from an array and remove it:

names.pop();


Grab the first entry from an array and remote it:

names.shift();


Get the position of an array element:

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

names.indexOf(‘Oppie’);


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:

clear()


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’); myVar.style.display = ‘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

console.dir(document)


### 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”,“prefetch.net”); ```

THIS INFORMATION IS PROVIDED UNDER A GPLV2 LICENSE
THE GPLV2 LICENSE CAN BE VIEWED HERE