Contributor: Michael Mach
- Document Object Model <- browser makes this when page loads
- HTML -> DOM by browser
- It is an API for valid HTML and XML
- We can use it to access, change, delete or add elements.
- It can be represented as a tree
- Asynchronous Javascript and XML.
- Technique used to create better faster and more interactive web applications.
- Uses XHTML for content, CSS for presentation, DOM and JS for dynamic content display
- Used to make requests to server and updates the screen. User would not know anything was transmitted.
- Asynchronous. User can continue to use application during ongoing request.
- Data driven instead of page driven.
- Clicking not required, mouse movement is sufficient to trigger event.
- A closure is an inner function that has access to the outer function's variables.
- It is great for making private variables!
- Has access to variables in its own scope, to outer function's variables and global variables.
- They still have access to the outer function's variables even if the outer function returns.
- They store references to the outer function's variables, not the actual value.
- A prototype is an object and all JS object has a prototype.
- Everything is an object in JS and everything inherits from the Object prototype.
- Use hasOwnProperty so it doesn't check all the way up the prototype chain.
- All JS objects inherit properties and methods from their prototype.
- The standard way of creating an object prototype is using a constructor function. (Class)
- Changes to an object's prototype can be seen by all objects through prototype chaining.
- It is a fast and concise JavaScript Library.
- It simplifies HTML document traversing, event handling, animating and Ajax.
- Lightweight. Write less to do the same thing in Vanilla JavaScript.
- JavaScript is a programming language; jQuery is a javascript library of convenience functions that simplify interaction with the DOM.
- A cluster of code. It is highly self-contained.
- They are easy to maintain because they are (ideally) not dependent with the other code.
- They are also used to help with name spacing. Another perk is that they can be reused.
- Modules are comparable to Classes in other languages.
- Immediately Invoked Function Expressions.
- An IIFE is an anonymous function that is created and then immediately invoked. It's not called from anywhere else (hence why it's anonymous), but runs just after being created.
- This refers to an object and it is usually used inside a function or a method.
- example: instead of saying Person.firstName, you can say this.firstName.
- Use bind, apply or call to fix 'this' when it is out of context.
- Surround it with parenthesis.
(foo(){})()
- undeclared variables don't even exist
- undefined variables exist, but don't have anything assigned to them (typeof)
- null variables exist and have null assigned to them (===)
- null is a primitive value, not an object. even though
typeof nullreturnsobject
- Typically used as callbacks.
theFunction.apply(valueForThis, arrayOfArgs)apply -> arraytheFunction.call(valueForThis, arg1, arg2, ...)
theFunction.bind(valueForThis)(arg1, arg2, ...)(does not invoke function. params passed outside)- Returns function with the modified
this
- The write() method is mostly used for testing: If it is used after an HTML document is fully loaded, it will delete all existing HTML.
- Variables are defined at the top of the function.
- In JavaScript, a variable can be declared after it has been used.
- In other words; a variable can be used before it has been declared.
varis hoisted.constandletare not.
- Event that happens in the inner most element would cause a chain reaction moving upward.
- Events above the target element would also fire.
- The target would stay the same but
thiswill change to reflect the firing element.
- Using event propagation (bubbling) to handle events at a higher level in the DOM.
- Adding a single event handler to the parent to avoid adding event handlers to every children.
- JS DOM objects have properties.
- Attributes are in the HTML itself. Similar to Props but not as good.
- Attr is always a string while props can be anything.
- Attr always returns the default value even though the value was changed.
- The DOMContentLoaded event will fire as soon as the DOM hierarchy has been fully constructed, the load event will do it when all the images and sub-frames have finished loading.
==will try to convert one side to the same type as the other.===will strictly compare the two without any conversions.
let duplicate = function(arr) {
return arr.concat(arr);
}- ex:
(1 === 1) ? true : false - So a ternary operand accepts three parameters.
if(conditional) { // one
// truethy_block // two
} else {
// falsey_block // three
}- Used to restrict functions or program.
- This strict context prevents certain actions from being taken and throws more exceptions.
- It catches some common coding bloopers, throwing exceptions.
- It prevents, or throws errors, when relatively "unsafe" actions are taken (such as gaining access to the global object).
- It disables features that are confusing or poorly thought out.
add(2, 5); // 7
add(2)(5); // 7let add = function(x, ...xArgs) {
let total = x;
if (xArgs.length > 0) {
xArgs.forEach((el) => {
total += el;
});
return total;
} else {
return function(y) {
return total += y;
};
}
};