Advanced JS Fundamentals to jQuery & Pure DOM Scripting
Table of Contents
Data Types, Operators & Primitives
The delete KeywordThe delete keyword does not remove objects from memory. its primary use is to de-reference objects. Alexis demonstrates how the delete keyword affects variables and memory.
typeofThe typeof keyword is useful for determining the type of a construct. However the results can occasionally be unexpected. Alexis explains how typeof is evaluated and runs through a few examples.
SummaryAlexis summarizes his coverage of Data Types, Operators and Primitives and answers a few remaining audience questions.
“==“ vs. “===“The double-equal and triple-equal comparisons operators can behave very differently. Alexis begins his discussion on comparison by quizzing the audience with a few true/false statements.
Comparison Operators ExplainedAlexis dives into a detailed explanation about how the double-equal and triple-equal comparison operators work in memory. While the triple-equal operator compares positions in memory, the double-equal operator uses a very different process.
Types as ArgumentsJustin begins his discussion on closures with an example to demonstrate that primitives are passed by value to functions while objects are passed by reference. He also answers a few audience questions regarding call objects.
Counter Example 1Using a closure that returns a counter, Justin demonstrates how subsequent calls to the function affect the returned data. Functions always have a references to call-object where they were created.
Counter Example 2Justin repeats the previous counter example to further reinforce the concept of closures. He also answers a number of audience questions.
Closure GotchasBecause closures retain access to their call-object and any variables within their call-object’s scope, modifications to the variables can affect all closures and produce undesirable results. Justin demonstrates how wrapping the closure in an immediately invoked function can remedy this problem.
Exercise 1: SolutionJustin walks through the solution to exercise 1. He also reviews what happens in memory when a function is declared and called.
What is “this”?Alexis begins the context unit with a few simple code examples to help explain the “this” keyword. Depending on how a function is invoked, the “this” keyword could reference a number of different objects. Alexis also explains the call() and apply() methods.
The Dot(.) OperatorAlexis diagrams how an object is defined in memory and what happens when the dot(.) operator is used to call a method on that object. He also explains the difference between __proto__ and prototype.
Exercise 2: SolutionAlexis walks through the solutions to exercise 2.
Exercise 3: SolutionAlexis walks through the solutions to exercise 3. During the explanation, Justin joins him to diagram what is happening in memory with the DOTCALL method.
Shared Properties & Prototype MethodsShared properties of one object can be inherited by another object by using the prototype property. Similarly, methods can be added to an object’s prototype. These methods can be invoked by any object inheriting that prototype.
Prototypal InheritanceAdding more layers or constructs to the inheritance tree leads to more complexity. This is where proto-chaining is used. Alexis demonstrates proto-chaining to create an inheritance tree between Animals, Chordates, and Mammals. He also demonstrates how to set the context correctly.
Exercise 4: SolutionAlexis walks through the solution to Exercise 4.
Object.create()Object.create() can be used to spawn new objects with a prototype correctly set to a parent object. Alexis demonstrates this method of inheritance but cautions about performance implications. Object.create() is much slower than manually setting the prototype property.
Exercise 5: SolutionJustin walks through the solutions to Exercise 5. Justin also further explains the behavior of the __proto__ property.
jQuery Functional Utils
$.extend()The jQuery $.extend() method takes one set of properties and copies them into another object. It’s useful for writing cleaner code or extending default values.
Exercise 6 and Solution: Implementing $.extendIn this exercise, you will implement your own extend method. After briefly describing the exercise, Justin dives into the solution. - exercises/js/my_jquery.js
Day 1 RecapJustin begins with a recap of everything covered up to this point. This includes everything from creating variables to how new objects are managed in memory.
Type CheckingConventional type checking using the typeof operator will return a string for comparison. Similarly the typeof operator can be used to check an object’s prototype. Justin spends most of the time talking about how to type check edge cases.
Exercise 7: Implementing $.isArray()In this exercise, you will implement your own $.isArray() method for type checking Arrays. Justin also reviews how to use the toString() method for type checking.
Exercise 7: SolutionJustin walks through the solution to exercise 7.
Exercise 8: Implementing isArrayLike()In this exercise, you will create an isArrayLike() method that will determine whether an argument is LIKE an array. Before beginning the exercise, Justin introduces the “in” operator which will be used instead the isArrayLike() method.
Exercise 8 SolutionJustin demonstrates the solution to Exercise 8. He also answers a few audience questions about performance and the use of other operators.
Exercise 9: $.each()In this exercise, you will implement the $.each() method which will iterate over arrays or other objects.
Exercise 9: SolutionJustin walks through the solution to exercise 9.
Exercise 10: SolutionJustin walks through the solution to exercise 10.
Exercise 11: Implementing $.proxy()In this exercise, you will implement the $.proxy() method. This method is passed one function and returns a function that calls the original with a particular context.
Exercise 11: SolutionJustin demonstrates the solution to Exercise 11. He also diagrams what is happening in memory when the $.proxy() method is called.
Exercise 12: Creating the $ functionIn this exercise, you will create a function named “$”. This function will take a selector as an argument and return an Array-like object of DOM elements.
Exercise 12: SolutionJustin explains the solution to exercise 12.
Exercise 13: Implementing the html() methodIn this exercise, you will add an html() method to get and set the innerHTML of all elements in a selection.
Exercise 13: SolutionAfter giving a little context for why you need an html() function, Justin walks through the solution to exercise 13.
Exercise 14 and Solution: val() functionThis exercise requires you to implement the val() function. The val() function gets or sets the value of an element. Justin briefly sets up the exercise and then jumps into the solution.
Exercise 15: Eliminating “new”This exercise tasks you with removing the need to call the “new” operator to create new instance of the $ function. The $ function will now check to see if new has been called. If not, it will return a new instance.
Exercise 15: SolutionJustin walks through the solution to exercise 15.
Exercise 16: Implementing the text() methodThe text() method gets or sets the text of an element. This exercise tasks you with implementing your own text() method.
Exercise 16: SolutionJustin explains the solution to exercise 16.
Exercise 16: Solution, continuedJustin continues his explanation of exercise 16 by finishing the getText() function.
Exercise 17: Adding a find() methodElements have the same query methods as the document object. In this exercise, you will implement a find() method that will return items within the current element.
Exercise 17: SolutionAlexis is back to walk through the solution to exercise 17.
Exercise 18: Implementing the next() methodIn this exercise, you will create a next() method that will traverse elements using nextSibling().
Exercise 18: SolutionAlexis walks through the solution to exercise 18.
Implementing the prev() methodThe prev() method is very similar to the next() method except it goes in the other direction. Alexis implements the prev(), parent(), and children() methods.
Refactoring Traversing CodeThere are many similarities between the next(), prev(), parent() and children() methods. Alexis demonstrates how to create a makeTraverser() helper method that will simplify the code. He then refactors the existing methods to use makeTraverser().
Attributes & Properties
Implementing the attr() methodThe DOM provides an API for getting and setting attributes of elements. Justin demonstrates how to implement a more versatile attr() method.
Adding width() and offset methodsJustin implements a both the width() method and the offset() method. The width() method will return the clientWidth minus the padding. The offset() method will traverse the offsetParents property to calculate the total offset relative to the document.
Adding show() and hide() methodsThe last methods for Justin to implement are hide() and show(). The will set the display property to “none” and “” respectively.
Event APIThe addEventListener method is used to register an event to any DOM element. Conversely, removeEventListener will remove that event handler. Using the console Justin demonstrates how to use these methods.
Event PropogationThere are three phases in event propagation: Capture, Target, and Bubble. Justin demonstrates these event phases and talks about how the order of the propagation can be controlled.
Event DelegationIn jQuery, Event Delegation allows you to create one event handler on a parent element that will watch its child elements for an event. This is made possible through event propagation and is much more performant.