JS training

by ian_smithz

HTML

<!--

youtube training
https://www.youtube.com/playlist?list=PL6n9fhu94yhUA99nOsJkKXBqokT3MBK0b

https://www.youtube.com/watch?v=O3JSPhwKowA&list=PL6n9fhu94yhUA99nOsJkKXBqokT3MBK0b&index=54
object literal vs object constructor. Use literal when you want all object instances to update.

-->
<dl>
<dt>Functions</dt>
<dd>Functions stored in variables do not need function names. They are always invoked (called) using the variable name.</dd>
<dd>Function parameters are the names listed in the function definition. Function arguments are the real values passed to (and received by) the function.</dd>
<dt>Scope</dt>
<dd>Variables created without the keyword var, are always global, even if they are created inside a function</dd>
<dt>Closures</dt>
<dd><a href="https://www.sitepoint.com/javascript-closures-demystified/">Javascript closures demystified</a></dd>
<dd>A closure is a function having access to the parent scope, even after the parent function has closed.</dd>
<dd>A closure is an inner function that has access to the outer (enclosing) function's variables—scope chain. The closure has three scope chains: it has access to its own scope (variables defined between its curly brackets), it has access to the outer function's variables, and it has access to the global variables</dd>
<dt>Namespacing</dt>
<dd><pre>var yourNamespace = {

    foo: function() {
    },

    bar: function() {
    }
};

...

yourNamespace.foo();</pre></dd>
<dt>Bubbling and Capturing</dt>
<dd>Event bubbling and capturing are two ways of event propagation in the HTML DOM API, when an event occurs in an element inside another element, and both elements have registered a handle for that event. The event propagation mode determines in which order the elements receive the event.</dd>
<dd>With bubbling, the event is first captured and handled by the innermost element and then propagated to outer elements.</dd>
<dd>With capturing, the event is first captured by the outermost element and propagated to the...

CSS

dt {
  font-weight: bold; 
  margin: 1em 0;
}

dd {
  margin: 0.5em;
  padding: 0.5em;
  border-bottom: 1px dotted #ccc;
}

JavaScript

// CONSOLE COMANNDS ---------------------------------------------------------
/*
keys(window) // whats going on in global scope)
typeof hideSent // array, object, function, sausage?
windows.somefunctionName // (hit return)
*/

// TRY CATCH ERRORS ---------------------------------------------------------
/*
try {
    adddlert("Welcome guest!");
}
catch(err) {
    document.getElementById("demo").innerHTML = err.message;
}
*/

// SELF INVOKING FUNCTION ----------------------------------------------------
/* 
(function () {
    var x = "Hello!!";      // I will invoke myself
})();
*/

// CLOSURE  ------------------------------------------------------------------

/*

(function() {
  var showMessage = getClosure("hello? still there?<br />");
  window.setInterval(showMessage, 10000);
})();

function getClosure(message) {
  function showMessage() {
    document.getElementById("message").innerHTML += message;
  }
  return showMessage;
}

*/