Javascript Notes

Javascript Reference Notes

Understanding: JavaScript Versions

• When you say Client-Side JavaScript, people are thinking ES5.
• When you say node.js, people think Google's V8 Engine-> Gradual ES6 Coverage.
• ES6 seems to be a superset of ES5. I'm not 100% on this one.

• Another ES6 vs. ES5 resource

• ECMAScript 5 was released in December 2009.

• ECMAScript 6 was released in June 2015.

• ECMAScript 7 is slated for Summer 2016.

• ES6 Changes and Comparison

• ES6 can be transpiled back to ES5 in a build toolchain. This sounds like a great approach to using ES6 with gulp.

Understanding: Modern node.js

In September 2015, Node.js v0.12 and io.js v3.3 were merged back together into Node v4.0.[36] This brought V8 ES6 features into Node.js, and a long-term support release cycle.[37] As of 2016, the io.js website recommends that developers switch back to Node.js.[38]

Understanding: JavaScript Engines

• Nitro (in webkit) supports most of ES6.
• V8 supports most of ES6.
• SpiderMonkey is Firefox's javascript engine and it is competing hard against V8 and seems to be winning.
• arewefastyet 'compare os' tracks some js engines.
• There are a lot of active javascript engines.

Understanding: ES6 Browser Support

Each browser just depends on its JavaScript Engine.

• Edge 14, Firefox 45, and Chrome 51 support most of ES6.
• Safari 6.1/7 seems to have almost no support.
• Safari 7.1/8 seems to have only 20% coverage.
• Safari 9 has 50% coverage.
• Safari TP supports most of ES6. What is safari TP?

Javascript Refresher:

• ES6 Reserved Words
• JavaScript 'String' type and String Escapes
• ES6 Template Literals (previously template strings)
• MDN JavaScript Reference
• Comparison Operators
  • Use strict equals and not equals as much as possible: === and !==
• Expressions and Operators (advanced operators)
• Functions Reference
• Error handling: throw, try, catch, finally
• Arrays
  • myarray.push(thingy); to append thingy to the end.
  • var shifted_thingy = myarray.pop(); to remove the last (rightmost) thingy.
  • myarray.unshift(thingy); to left-append thingy to the beginning.
  • var shifted_thingy = myarray.shift(); to remove the leftmost thingy.
  • shift and pop return the removed value.
  • push and unshift return the new length of the array.
  • push and unshift can take multiple arguments.
  • Join array values to make a long string: myarray.join(', ');
  • Combine arrays: new_array = myarray.concat(another_array);
  • Find the index of a value in an array: i = myarray.indexOf('apple');. If apple doesn't exist, return -1.
• Objects
  • var shifted_thingy = myarray.shift();
  • for... in loop for objects. for (var key in myobject) { console.log(key, " : ", myobject[key]); }
  • window is the global object in the browser. document and screen exist inside window but are aliased in the global scope, as far as I understand.
  • View these in the browser console by typing window or document to view the objects. Also check out window.location or window.location.host etc.
  • Also: window.document.head === document.head. THUS: Document Object Model. The document object is your .html, .php, .aspx, etc object.
• Ellipses / ... / Spread Syntax
  • Ellipses are the same as a * operator in python on an argument list.
  • Ellipses supports both modes, in functions and when passing arrays to functions.

JavaScript Browser API: MDN Web API Reference

• The Document Object Model is the major Browser API.
• Global Objects
• Three DOM Actions
  • Manipulation: manipulate the elements
  • Traversal: Select a element based on its relation with another element.
  • Events: Listen to a specific event like a mouseclick or keypress and have something execute.
• Create, Remove, and Modify elements:
  • createElement
  • appendChild
  • removeChild
  • textContent
  • className
  • HTMLInputElement.type (for adding the type of input to provide, e.g. checkbox etc.)

• Traverse Elements:

  • node.parentNode
  • querySelector
  • parentnode.children
  • getElementById
  • getElementsByTagname
  • getElementsByClassName

• Use thingy.addEventListener to add events

  • e.g. 'click' event instead of using onclick.
• Element.classList (add, remove, update, check, index an element's classes

Special Note on innerText/textContent (from treehouse docs):

• Mozilla didn't implement innerText but has implemented textContent.
• innerText can be used in older versions of Internet Explorer and all versions of Chrome and Safari.
• textContent can be used in Internet Explorer 9 onwards and all other browsers.
• Here's some cross-browser compatible code for the edit button:

  // cross compatible code
  if (typeof editButton.innerText === "undefined")  {
    editButton.textContent = "Edit";
  } else {
    editButton.innerText = "Edit";
  }

[The four-P's Problem Solving Method] (https://medium.com/@MatHelme/the-four-ps-of-problem-solving-6e15a39a0712#.u6oj4sst7):

- Preparation: Understand the problem. Think up a high-level solution.
- Plan: Plan out the solution.
- Perform: Perform what is required.
- Perfect: Perfect our solution incrementally. Nothing is ever 'perfect'.

Arrow Functions

- `var myfunc = (param1, param2, …, paramN) => { // multiline-statements }`

event.preventDefault

- Cancels the default action bound to the element, e.g. onClick submit a form is cancelled.
- See plotly react tutorial Part II for a use case and example.

Resources

JavaScript Engine in WebKit browsers