Learning about the DOM in JavaScript, jQuery, and More

A recap of my recent experience with an intermediate JavaScript course on Lynda.

Screenshot of Lynda course
Click the image to watch the preview for ‘The DOM in JavaScript, jQuery, AngularJS, and React’ on Lynda.com.

I recently finished an interesting course on the DOM and different versions of JavaScript. I liked that it was just a taste of JavaScript, jQuery, Angular, and React. It’s called The DOM in JavaScript, jQuery, AngularJS, and React. It was released in 2017.

Much of the course was focused on regular JavaScript. I’m glad I’ve spent so much time studying JavaScript, because a lot of basic things didn’t need to be explained for me in this course.

Although I know about the DOM, using HTML, this focus on the DOM using JavaScript was an interesting approach. For instance, traversing the DOM (with classes and IDs) was fun:

document.body.children[4].children[1]

This selects the 5th child of the body, then the 2nd child from that. This is almost like using CSS selectors to select parent and child elements.

One of the things I love about Lynda is that they recommend additional courses to learn more about related topics. A few courses the instructor recommended included:

  • JavaScript Essential Training
  • jQuery for Web Designers
  • Angular 2 Essential Training
  • ReactJS Essential Training

They may have updated it, but I’ve already taken the JavaScript Essentials course before, so I’ll check if the others are already on my list. Angular is past version 2 by now, but maybe it’s easier to get started with that version.

 

Stuff I learned about Debugging on FreeCodeCamp

I recently got through the Debugging set of lessons on FreeCodeCamp. Here are a few points I learned.

Error Types

There are 3 types of errors:

  • Syntax – misspelled word, missing parentheses, etc.
  • Runtime – detected while running the program.
  • Semantic – detected after testing output. Program works but result is wrong. Be careful!
Short List

1. Use DevTools on Chrome or Firefox

2. Use console.log(); a lot. console.log spits out the value of whatever is in the () to the browser console, which helps you keep tabs on how a value is changing in your code. Sometimes you have to move the console.log to a different place, like before or after another function, because order matters and the value of your value can change.

3. Use console.clear(); to clear the memory of a value in the console. Sometimes it’s ok to forget.

4. Use typeof to keep track of values. For instance sometimes a number is a numeral and sometimes it’s a string. Write console.log(typeof value); and that will tell you the type for value.

5. Lastly, you have to watch out for misspellings, missing brackets or parentheses, using ‘=‘ instead of ‘==‘, or getting the dreaded infinite loop.


Next in FreeCodeCamp is Data Structures!