| Primitives | numbers,
strings, booleans, undefined, null |
| Truthy/Falsy | All
the following values are evaluated as false :
|
| null
undefined |
null (no object) v undefined value (absence of value) |
| Objects (not primitive) | e.g {name:'John', age: 34} [1,2,3,4] |
| Properties | e.g.
'john'.length |
| Built-in Methods | console.log('Hello'.toUpperCase());
// 'HELLO' console.log('Hey'.startsWith('H')); // true ---String Methods |
| Libararies | e.g
Math console.log(Math.random()); // random number between 0 and 1 Math.floor(Math.random() * 50); ----Math |
| Arithmetic | +
- * /
% -- ++ |
| Assignment | =
+= -+ *=
/= %= var x = 5; var y = 5; var z = 5; console.log(x++); console.log(x) console.log(++y); console.log(z+=1); |
| Comparison | == === != !== > < >= <= ? (ternary) |
| Logical |
&& || ! |
| Type |
|
| length |
var
txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; var sln = txt.length; |
| index | str.indexOf("locate"); str.lastIndexOf("locate"); str.indexOf("locate",15); //starting position str.search("locate") //search can take regex values |
| interpolation (ES6 +) | let
myPet = 'armadillo' console.log(`I own a pet ${myPet}.`) //note quotes in this case aren't ' ', but ` ` (backticks) |
| Slicing/replacing | str.slice(7, 13); str.slice(-12); str.substring(7, 13); str.substr(7, 6); //2nd parameter is length of extraction str.replace ("old", "new") str.replace(/MICROSOFT/i, "W3Schools"); //regular expression with i for making case-insensitive str.replace(/Microsoft/g, "W3Schools"); //To replace all matches, use a regular expression with a /g flag (global match) |
| Case | txt.toUpperCase() txt.toLowerCase() |
| Concat | text1.concat(" ", text2); "Hello" + " " + "World!" str.charAt(0); str.charCodeAt(0); |
| Split |
var
txt = "a,b,c,d,e"; // String
|
| Converting
String to number Converting number to string |
"1"*1 1 + "" |
| Syntax |
constant height = 100 |
| Scope |
|
| Conditional | if (expression) { ... } else if (expression) { ... } else { ... }; |
|
| Ternary operator (if shorthand) | (expression)? ... : ...; |
isNightTime ?
console.log('turn on') : console.log('Turn off '); //inside a function function f (n,m) { return (n>m? true:false) } |
| Cases with no 'break(s)', code will continue executing in sequence |
switch(expression)
{ case VALUE1 : ...; break; case VALUE2 : ...; break; default: ...;} |
|
| While loop | [initialization] while([condition]) {...} |
e.g. var n = 1; while (n < 4) { console.log("n = " + n) n += 1; } console.log ("done") let cards = ['Diamond', 'Spade', 'Heart', 'Club']; let currentCard = 'Heart'; while (currentCard !== 'Spade') { console.log(currentCard); currentCard = cards[Math.floor(Math.random() * 4)]; } |
| Do...
while loop The do-while statement executes the content of the loop once before checking the condition of the while, whereas a while statement will check the condition first before executing the content. |
[initialization] do {...} while([condition]); |
e.g. var i = 0; do { console.log(i); i++; } while(i < 5); console.log('Done'); |
| For Loops | for ([initialization]; [condition]; [step]) {...} |
e.g. for(var i=0; i < 5; i+=2) {console.log(i)} //Double loop var a = [ [1,2], // line 1 [3,4], // line 2 [5,6]] // line 3; for (var i=0; i < a.length; i++) { // a[i] = line i The next loop iterates on the elements // of the array a[i]: on the elements of the ith line for (var j=0; j < a[i].length; j++) { console.log(a[i][j]); } } //Loop in an array var daysOfWeek = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']; for(var i=0; i < daysOfWeek.length; i++) { console.log(daysOfWeek[i]); } |
| for in | for ( var V in expression ) {... V} |
var
michel =
{
familyName:'Buffa', givenName: 'Michel', age: 51} for(var property in michel) { console.log(property); console.log(michel[property]);} var fruits = ['apple','banana','grape'] for(var i in fruits) {console.log (fruits[i])} |
| forEach | [..array..].forEach(function(i){...}) OR [..array..].forEach(i => ..i) |
e.g [1,2,3].forEach(function(i){console.log(i);})
|
| map | let [...new Array] = [..array..].map(function(i){return..i}) OR let [...new Array] = [..array..].map(i => ..i ) |
e.g
|
| filter | let
[...new Array] = [..array..].filter(function(i) {return...condition...i }) OR let [...new Array] = [..array..].filter (i => condition...i ) |
|
| More on Additional iterator methods such as .some(), .every(), .reduce() ... | There are many additional built-in array methods, a complete list of which is on the Mozilla Developer Network. |
A list of iterator methods can be found here.
|
| Function arguments |
function f() {...} //basic form
e.g.
function f(s) {
return s*2;
}
const square = function (number) { //function expression syntax
return number * number;
};
var today = function today() {return new Date()} // Named function expression (NFE)
const f = () => { ... } // arrow function syntax
e.g.
const getSubTotal = (itemCount, PRICE) => {
return (itemCount*PRICE)
}
const f = .. => .. // concise arrow function syntax (one paramater only)
const f = () => // arrow function syntax with implied return
e.g.
const f = x => x*7
const h = (x,y) => x*y
}
Functions can also take default arguments
There are important differences between function expressions and declarations (e.g. expressions don't get hoisted; functions can't be defined within non-function blocks)
|
| Function with variable number of arguments | function
newSum() { var i, res = 0; var numberOfParameters = arguments.length; for (i = 0; i < numberOfParameters; i++) { res += arguments[i]; } return res; } newSum(1, 2, 3, 4); -> 10 |
| Comparison | == === != !== > < >= <= ? (ternary) |
| Logical |
&& || ! |
| Type |
|
| Filter function | function
isOdd (n){ return (n % 2 !== 0) } function upToNF (n, filter) { for (var i=0; i <= n; i++) if (filter(i)) {console.log(i)} } upToNF (15,isOdd) |
| Nested Functions | function
hypotenuse(a,b) { function square(x){return x*x;} return (Math.sqrt(square(a)+square(b))) } console.log(hypotenuse(3,4)) function outer(n){ return function inner(m){ return n*m; } } function main(n,m){ return (outer(n)(m))*3 } function outside(x,y,z) { return (main(x,y)*z) } |
| Objects
can hold any kind of data type, like strings, numbers, booleans, arrays, and even functions objects are mutable |
var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
};
person['firstName']; //differences in the notations
person.firstName
Namespacing
e.g. two different methods with same name in different object (or 'namespace')
|
| Manipulate Objects | how to create object (three
ways) car = {}; car = new Object(); car = Object.create(null); how to add/change/delete property book.title = 'Shane' //add or change delete book.title //delete looping for (var p in book) {} |
| Methods
(functions) in objects note on 'this': 'this helps us with scope inside of object methods. this is a dynamic variable that can change depending on the object that is calling the method.' |
var
person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; // Method }, sayHello: function() { return `Hello, my name is ${this.name}`; }, //with 'this'keyword sayGoodbye() { // new E6 syntax, removes : and 'function' kw return "Goodbye!"} }; objects with functions (JP Django course) |
| Another object can access methods from an object | friend.sayHello = person.sayHello
// from the method in object example above |
| Accessing | person.lastName; or person["lastName"];
//bracket notation required to use variables to look up keys To view entire object in a browser: console.dir(OBJECT) |
| Setters and Getters | let person = { _name: 'Lu Xun', _age: 137, set age(n){ if (typeof n === 'number') {this._age = n } else { return 'Invalid input' }; //setter } }; person.age = 3 //this is way to reset age with 'setter', as opposed to directly like person._age=3 get age() { return this._age; } //getter console.log(person.age) //uses getter to print age, as opposed to directly like console.log (person._age) |
| Built-in objects | window navigator document ..others |
| Arrays | var gradesInMaths = [12, 7, 14, 18, 9,
11]; var daysOfWeek = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']; daysOfWeek[2] -> "Wednesday" daysOfWeek[daysOfWeek.length-1]) -> "Sunday" var gradesInMaths = [12, 7, , undefined, 14, 18, 9, 11]; //sparse To add an element: daysOfWeek[daysOfWeek.length] = "extra"; Push method to add: daysOfWeek.push('Sunday'); |
| Array Methods |
var myarray = []; // will create empty array
a[20] = 'x' //will create 19 'undefined' slots
a.length = 1 // will only leave item at spot 0.
for (var i=0; i<myarray.length; i++) { ... }
for (var i in myarray) { ... } // not recommended
for (var i in myarray) {if(myarray.hasOwnProperty(i)) { ... } }
delete myarray[1] // deletes item at index 1, but length doesn't shrink
a.concat(b,c) //leaves original arrays unchanged
a.push (7) //add at end; can be more than one
a.unshift(9) // add at beginning
a.pop(); //remove at end, and returns
a.shift(); //remove at beginning, and returns
a.join(SEPARATOR) //get string
a.slice(1,4) // start and end; doesn't affect original array; can be used to duplicate e.g. a.slice()
var array = [1, 2, 3, 4, 5, 8, 6, 7, 8, 9, 0]; //filter
let newArray = array.filter(function(item) {
return item !==8;});
var array = [1, 2, 3, 4, 7, 7, 5, 8, 6, 7, 8, 9, 0]; //concise form of filter
let newArray = array.filter(item => item !==7);
a.indexOf('item') // returns -1 if not in array
a.splice(2,5, 'a','ab') //start, how many to delete, and what to replace; changes the original array; returns items; can be used to delete element without creating undefined slot
a.sort()
function comparator (a,b) {return (a-b)} // need this sort of comparator function for numerical sorting
a.sort(num_comparator) // function object passed
a instanceof object;
|
| Constructor | class C.. { constructor (X,...) { this._X = X; this.... = ...; this.attribute = ...; }} const c = new C..(x,...) |
|
| Getter | get x() {return this._...} to call getters, don't need () see example -> |
|
| Method | ...(...) {...} to call methods need () see example -> |
|
| Inheritance | class D.. extends C.. { constructor (X,Y,..) { super(X); this._Y = Y this.attribute = ...; }} //super automatically inherited const d = new D..(x,y...) // When we call extends in a class declaration, all of the parent methods are available to the child class. |
|
| Static Methods (available to class but not instances) | static ...(...) {return ...} | static generatePassword() { return Math.floor(Math.random()*10000); } |
| Place in body or head | <p
id="demo"></p> <script> document.getElementById("demo").innerHTML = "My First JavaScript"; </script> |
| Place in external file | <p
id="demo">A Paragraph.</p> <button type="button" onclick="myFunction()">Try it</button> <script src="https://www.w3schools.com/js/myScript.js"></script> |
| Use innerHTML | //Example 1 (note that HTML element
has to be above
script, if used this way) <p id="demo"></p> <script> document.getElementById("demo").innerHTML = 5 + 6; </script> //Example 2 <p id="demo"></p> <script> document.getElementById("demo").innerHTML =Date(); </script> |
| Docwrite Notes: 1. Using document.write() after an HTML document is fully loaded, will delete all existing HTML 2. The document.write() method should only be used for testing. |
<script> document.write(5 + 6); </script> |
| Alert (and window.prompt) | <script> window.alert(5 + 6); </script> |
| Console Note: Console log is a good way to test code |
<script> console.log(5 + 6); </script> |
| Text-formatting and String Substitution | e.g. |
| exporting |
|
| Export default (ES6) The default export syntax works similarly to the module.exports syntax, allowing us to export one module per file. Can also do 'named export' |
|
| importing | const Menu = require('./menu.js'); function placeOrder() { console.log('My order is: ' + Menu.specialty); } placeOrder(); |
| import (ES6) | |
| Getting
Elements when there is 1 |
var myElement =
document.getElementById("A1"); |
| Getting elements when more than 1 or combination | var
x = document.getElementsByTagName("p"); document.getElementById("D2").innerHTML = x[0].innerHTML; var x = document.getElementsByClassName("intro"); var x = document.querySelectorAll("p.intro"); var x = document.getElementById ("main"); var y = x.getElementsByTagName ("p"); document.getElementById("D3").innerHTML = y[0].innerHTML; |
| Navigation | tutorial var myTitle = document.getElementById("demo").firstChild.nodeValue; var myTitle = document.getElementById("demo").childNodes[0].nodeValue; alert(document.body.innerHTML); alert(document.documentElement.innerHTML); document.getElementById("id01").nodeName appendChild() insertBefore() reference document.getElementById("div1").parent.removeChild(child); |
| Links Collection | document.links.length; document.links[0].href //display all links in a document Text = ''; for(var i=0; i < document.links.length; i+=1) {Text = Text + document.links[i].href +'<br />'}; document.getElementById('demo1').innerHTML=Text; |
| Examples |
|
||||||||||||||
| How to use | <!--changes button
itself
with 'this'--> <button onclick="this.innerHTML=Date()">The time is?</button> //changes paragraph with id=demo with function (example 1) <script> function displayDate() { document.getElementById("demo").innerHTML = Date(); } </script> <button onclick="displayDate()">The time is?</button> <p id="demo"></p> //changes paragraph with id=demo with function (example 2) <p id="demo"></p> <script> function displayDate() { return Date(); } </script> <button onclick="document.getElementById('demo').innerHTML = displayDate()">The time is?</button> |
||||||||||||||
| Event Listeners | Syntax:
element.addEventListener(event,
function, useCapture); Reference |
| caniuse |
Check to see backward compatibility |
| Transpilation With Babel node package manager (npm) |
|