JavaScript Reviewer

2 Types:
1. Primitive – numbers, strings, booleans, null, undefined
2. Object

Falsy values: 0, -0, NaN, “”, false, null, undefined
Check for NaN: if(isNaN(varName)){…}

Type Operators: typeof “…” – returns data type
instanceof

Events: document.getElementById(“id”).onclick = function(){…};

Add Many Event Handlers to the Same Element
var x = document.getElementById(“myBtn”);
x.addEventListener(“click”, myFunction);
x.addEventListener(“click”, someOtherFunction);

Generate Random Number within a Range
Math.floor(Math.random() * (max – min + 1)) + min

 

Named / Declared Function: function functionName() {…;}

Anonymous / Function Expression: var varName = function() {…;};

Returned Function: function functionName1(f1p1){
return functionName2(f2p2){…;}}
var callFunction = functionName(f1a1);
callFunction(f2a2);

Immediately-invoked Function: var varName = (function(){…})();

Logical Assignment: var x = a || b;

Ternary Operator: a > b ? true : false

For Loop – to run code a specific number of times

For-In Loop – for arrays and objects
for (key in arrayName) {…;}

While Loop – uncertain of how many times the code should run
var num = 10;
while (i<num) {
….; i++; }

Do/While Loop – execute the code block once, before checking if the condition is true, then it will repeat the loop as long as the condition is true
do {
…; i++; } while (i<num);

switch(varName) {
case value1: …; break;
case value2: …; break;
default: …; }

Multiple inputs with the same output:
switch(varName) {
case value1:
case value2: …; break; }

JavaScript Object
var objectName = {};
objectName.keyName1 = “value”; OR objectName[“keyName1”] = “value”;
objectName.methodName = function() {…;};

Create an object w/ properties & method:
var objectName = { keyName1: “value”, methodName: function() {…;}};

Access the Object Properties:
objectName.keyName; OR objectName[“keyName”];
if the object has space or if using an argument

Access the Object Method:
objectName.methodName();

Delete a Properties:
delete objectName.keyName;

Delete a Property Value:
delete objectName.keyName = “value”;

Create an Objects within objects:
var objectName = {keyName1: “value”,
keyName2: { keyName2-1: “value”, keyName2-2: “value”}};

Access Object in Object:
objectName.keyName2.keyName2-1 OR objectName[“keyName2”][“keyName2-1”]

Create an Object w/ properties & arrays:
var objectName = { keyName1: “value”,
keyName2: [“value”, “value”, “value”]}; OR keyname2: arrayName };
var arrayName = [“…”, “…”, “…”];

Access Arrays in Object:
objectName.keyName.arrayName[num];

Enumeration: for(x in objectName) {…;}

Add New Array Contents:
objectName.keyName.push(“newValue”);

Object Constructor
function ObjName(keyName1, keyName2, …){
this.keyName1 = keyName1;
this.methodName = function() {…;}; } OR
var ObjName = function(p1, p2…) {
this.p1 = p1;
this.p2 = p2; };

Create Instances:
var varName = new ObjName(); OR
var varName = new ObjName(“arg1”, “arg2”, …);
varName.keyName1 = “value”;
varName.methodName = function() {…;};

Local Scope Object Properties:
var Object = function() {
var proName = “value”;
this.methodName = function(){…} };

Object Prototype
var objectName = Object.create(object); OR
ObjectName.prototype.property = “…”;
ObjectName.prototype.method = function(){ };

Creating Object as Prototype:
PrototypeName.prototype = new ObjectNam();
PrototypeName.prototype.constructor = PrototypeName;
function PrototypeName(x, y, z) {
ObjectName.call(this, x, y);
this.z = z; }

Adding Property to Object Prototype:
PrototypeName.prototype.newproperty = “…”;

Adding Method to Object Prototype:
PrototypeName.prototype.method = function(){};

What is the purpose of ‘THIS‘ operator?
It refers to the current context

Object Prototype: object.prototype()
isPrototypeOf
valueOf()
toString()
constructor()
toLocaleString()
propertyIsEnumerable()
hasOwnProperty()

Check property:
x.hasOwnProperty(“object”);

Variable
let & const – scoped to the nearest block and are not hoisted
let – can be reassigned but cannot be redeclared within the same scope
const – read-only constants; cannot be assigned a new value; must be assigned an initial value;

Namespacing:
var varName = { property1: … ,
property2: […, …, …],
property3: function (){ this…; } };

Anonymous Closure:
function closure(){ var x = 1; return x; } OR
var varName = (function() {
var property = […, …, …];
var property = function(…) {…};
return { property: function(…) {…} };
})();

What is Closure?
It is created whenever a variable that is defined outside the current scope is accessed from within some inner scope.

react

Array Properties:
constructor
prototype

Array Methods
isArray()
concat()
delete arrayName[num]
indexOf(item, start)
lastIndexOf()
reverse()
join() – joins array elements into a string
filter() – creates an element array that pass a test
map() – creates a new array by calling a function
reduce() – reduces the array to a single value
shift() – removes & returns the 1st item of an array
pop() – removes & returns the last array element
unshift() – add new items at the beginning
push()
slice(x, y) – selects the elements starting at x & ends at, but does not include, y
sort()
splice(indexStart, #toRemove, items) – add/remove items to/from an array
toString()
valueOf() – returns the same as Array

Iteration
forEach() – calls a function for each array element
some() – checks if any of the item pass a test
every() – checks if all of the item pass a test

String Properties
constructor
prototype

String Methods
charCodeAt() – returns the Unicode of the char
fromCharCode() – converts unicode into char
concat() – returns a new string
charAt() – returns the char at the specified index
indexOf()
lastIndexOf()
search() – returns the index of a specified value
match()
replace(‘searchValue’, ‘newValue’)
split() – splits a string into an array
slice(start, end) – returns the extracted parts between start and end, not including end
substring(start, end) – returns the extracted parts between start and end, not including end
substr(start, length) – returns the extracted parts beginning at the specified position
toLowerCase()
toUpperCase()
valueOf() – returns the value of String

\n – new line
\b – backspace
\f – form feed
\r – carriage return
\t – tab
\\ – backslash
\”

Number Properties
constructor
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
POSITIVE_INFINITY
Prototype

Number Methods
toExponential(x)
toFixed(x) – converts to a specified # of decimals
toPrecision(x)
toString()
valueOf()

Math Properties – Math.PI

Math Methods
Math.round(x) – rounds to a nearest integer
Math.ceil(x) – rounds a number upwards
Math.floor(x)
Math.random()
Math.cos(x)
Math.exp(x)
Math.log(x)
Math.max(x,y,z,…,n)
Math.min(x,y,z,…,n)
Math.pow(x,y)
Math.sin(x)
Math.sqrt(x)
Math.tan(x)

Window Methods
alert()
blur()
setInterval(function, ms)
setTimeout(function, ms)
clearInterval(setIntervalVariable)
clearTimeout(setTimeoutVariable)
confirm()
print()
prompt()
scrollBy()
scrollTo()

Global Methods
eval()
isFinite()
isNaN()
Number()
parseFloat() – parses a string into number
parseInt() – parses a string into integer

Event Object:
preventDefault() or return false
stopPropagation() for event bubbling

Date Methods
getDate() / setDate()
getDay()
getFullYear() / setFullYear()
getHours() / setHours()
getMilliseconds() / setMilliseconds()
getMinutes() / setMinutes()
getMonth() / setMonth()
getSeconds() / setSeconds()
getTime() / setTime()
toDateString()

Document Methods
createAttribute()
createDocumentFragment()
createElement()
createTextNode()
getElementById()
getElementsByTagName()
getElementsByName()
querySelectorAll()
querySelector()

DOM Manipulation:
innerHTML
textContent
className
createElement(“tagName”)
createTextNode(“text”)
.appendChild(“…”)
removeChild()
document.createElement(“tagName”).appendChild(document.createTextNode(“text”));

Finding HTML Elements

  • document.getElementByI(“id”)
  • document.getElementsByTagNam(“tag”)
  • document.getElementsByClassNam(“class”)
  • document.querySelectorAl(“cssSelector”)
  • document.forms[“ID”]

Changing HTML Elements

  • element.innerHTML =  “… “;
  • element.attribute = “… “;
  • element.setAttribute(attribute, value)
  • element.style.property = “… “;

Adding and Deleting Elements

  • document.createElemen(element)
  • document.removeChild(element)
  • document.appendChild(element)
  • document.replaceChild(element)

Update Attribute Values

  • hasAttribute()
  • getAttribute()
  • setAttribute(“attrName”, “value”)
  • removeAttribute(“attrName”)

What is Callback?
It is a function passed to some method as an argument or option. Some callbacks are just events called to give the user a chance to react when a certain state is triggered

Drag Events:
ondrag
ondragstart / ondragend
ondragenter / ondragleave
ondragover
ondrop

DOM Mouse Events
click / dblclick
mousedown / mouseup
mousemove
mouseover
mouseout
mouseenter / mouseleave

DOM Keyboard Events
keydown / keyup
keypress

DOM Frame Events
abort
error
load
resize
scroll
unload

DOM Form Events
blur
change
focus
reset
select
onsubmit

How to redirect a url using JS?

react

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Advertisements

About bernadetteengleman

Hello, I am Bernadette from New York City. I moved here from Chicago in 2013. I am originally from the Philippines. I started studying web programming in 2015. I love it because I like making fun websites and web apps. The projects that I built so far are posted below. I like to cook and I love to travel. I also like to volunteer and I am a team leader with the non-profit organization, NYCares.
This entry was posted in JavaScript, Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s