Front-End Web Developer Nanodegree – Review of chapter 2: JavaScript and the DOM


Overview

The second section of the Udacity Front-End Web Developer Nanodegree covers the basics of how JavaScript interacts with the Document Object Model (DOM) of a webpage. It was a lot better structured than the first section (which I felt was very weak and pushed you to learn at external locations). The teachers described the content well and the content mostly covered what was required for the project.

The project itself (Memory game) was challenging and forced me to think about the structure before building (which is good) and I found myself referencing MDN quite often just for further guidance and how the syntax works rather than how to structure of the game. I think this was a well chosen project for a beginner to JavaScript.

Review

This section focusses on JavaScript and how you can interact with the Document Object Model. The section is broken up into five parts (Syntax, Understanding how the DOM works, Dynamically adding content to the DOM, Event Listeners and improving JavaScript performance. Each chapter builds upon the previous and it does not leave you guessing how things interact.

I did find this more challenging but it also made me want to learn the language more. I found the help on the forums with the mentors more lax here, because I still have questions there that have gone unanswered.

I was able to take substantial notes for this section but found because everything that was so clumped together I had to take a different approach to my note taking and so built a mind map, I think I will do this from now on. When I needed to reference something that I knew was in the course, I would first go to the mind map and if I needed more in-depth information I would go to my proper notes.


For this project they give you a template structure of the HTML and the CSS, and give an example of what it will look like when some cards are open and when some cards are correct. I had a quick look at this and realised most of the actions are created depending upon what CSS classes are used. So this would be a lot of finding classes and setting them.

My approach was to first build the pseudocode for this project. I outlined what basic functions I needed (e.g. build game, reset score, etc.) and then wrote out in comments how they should probably work. I regret not doing two things. First I think I should of stuck to the basics and just tried to build the game but instead I was trying to build for an enhanced version I had in my head, so I was planning for extensibility. Not that this is wrong but, at this stage of learning I think simpler is better. Secondly I wish I would of tested out doing the card flipping feature first. I had thought I could include that at the end with some simple CSS animations or transitions. When I realised how I could build it I would have to redevelop a large portion of my project. I think the takeaway from that is, get your visual styles working before you dynamically recreate them in code. I still plan on going back to this though because I have a follow up game I have in mind that would use this.

The project took me around two days to build, about two hours to pseudocode, four to six hours to build and four hours to just play around and refactoring. I spent around 2 hours just trying to figure out how to force the flipping of the cards using my existing code before I gave up (I found it would be simpler and quicker to rework the cards on a new rebuild – which I plan on going back to), but there comes a point where you have to say for now this is not worth the effort (and not part of the requirements) and move on.

I also like to post my results on Facebook to show friends so this time I added some og data so it would look nice. I discovered there are quite a few sites that use this, so it works out good.

What was covered in this topic?

  1. Syntax
    • Brief overview of ES6 (also known as Harmony and ES2015)
    • let & const variables, and why you shouldn’t use var any more
    • What is hoisting?
    • Template literals basics
    • Destructuring (extracting date from arrays/objects)
    • Shorthand for Object Literals and Object Methods (you can leave out function() now)
    • Iteration (difference between, for, for…in, forEach and for…of loops)
    • Spread operators (extracting values from iterable objects (e.g. objects, arrays))
    • Rest parameter (short hand for ‘the rest’ of the values in an iterable object)
    • Variadic functions (more readable way of using the arguments object)
  2. The Document Object Model (DOM)
    • How the DOM is formed (parsing of character to tags, to tokens (tokenization), to nodes, then structuring the DOM from nodes)
    • What is an interface (blue print for object classes, properties and methods) and how inheritence works.
    • Ways to access Elements
      • getElementById()
      • getElementsByClassName()
      • getElementsByTagName()
      • querySelector()
      • querySelectorAll()
  3. Creating Content with JavaScript
    • Manipulating elements
      • .innerHTML property (used if you want to get/set and preserve HTML tags)
      • .textContent property (used if you only want get/set the text in an element and its descendants)
      • .innerText property (same as .textContent property but will return how it is visually displayed)
    • Adding elements
      • .createElement() method (create an element before adding it to the DOM)
      • .appendChild() method (attaches an node to the end of an element)
      • .cloneNode() method (use this if you need to append the child to mulitple locations)
      • .createTextNode() method (more readable way of adding text nodes than using .appendChild())
      • .insertAdjacentHTML() method (more flexible way of insterting elements than .appendChild())
    • Removing elements
      • .removeChild() method (remove a child node from an element)
      • .remove() method (remove an item without needing the parent)
    • Adjusting styles and attributes
      • .style property (adjusting the one style directly on the element)
      • .style.cssText() method (a more CSS friendly way of adjusting one or more styles directly on the element)
      • .setAttribute() method (adjusting or adding an attribute to an element (including style))
      • .className property (get/set a list of classes associated with an element)
      • .classList property (same as .className but will automatically extract into a DOM Token List)
  4. Working with Browser Events
    • What is an event?
    • How to use monitorEvents() in the Chrome browser
    • Adding an Event Listener
    • Removing an Event Listener
    • Understanding comparison operators and type coercion
    • Why you need to access the exact function when removing Event Listeners (Need to remove by reference and not by value)
    • Phases of an event (capturing, at target and bubbling)
    • Using the event object
    • Using preventDefault() on the event object (to stop default behaviour)
    • How to use Event Delegation (it uses the phases of an event to allow a parent to listen for multiple children)
    • How to load JavaScript after the DOM has loaded
      • Using DOMContentLoaded on an event listener
      • Use .onload() for after all resources are loaded
      • add to the end of the HTML
  5. Performance
    • using performance.now() to test for how long a piece of code takes
    • Using .createDocumentFragmentation() to allow for a virtual element to temporarily attach multiple elements to before applying to the DOM
    • understanding Reflow and how the browser must reassess the page after every change (slow)
    • understanding Repaint and how the browser must redraw all changes after every change (fast)
    • Using a hide/change all/show pattern to minimise the number or reflows for better performance
    • Understand that JavaScript is a single-threaded environment
    • Understand the Call stack and how it queues tasks
    • Understand asynchronousity
    • How to use .setTimeout() function for running events at a later point in time
    • Using setTimeout with a delay of 0 to use the event loop

Leave a Reply

Your email address will not be published. Required fields are marked *