Learning JavaScript for Real
When Just Enough JavaScript Feels Like None At All
So, you think you know JavaScript. You can write conditional statements galore, have mastered the art of the arrow function, and you’ve built objects with ease. Now, you’re being asked to update the DOM while implementing callback functions and all of that sounds like a mistake (it’s not). How do any of these things relate to one another? What is a DOM, and where is it? Were any of those other things even necessary?
They were, and while it may not be obvious right now, you’re more than prepared to take the next step.
What’s the DOM?
The Document Object Model, or DOM, houses all of the HTML/XML that’s sent to your browser. When building Rails applications, we were tasked with sending HTML to the client via views, but in JavaScript we use the DOM. To update the information passed to our browser, we use two separate files: an HTML file (our tree/structure), and a corresponding JavaScript file.
The HTML file (denoted by .html) sets up the structure of our document, and references the JavaScript file where we’ll write our code.
While we can edit the file to change our structure manually, we’ll inject new bits of information by writing code in the corresponding JavaScript file. To make things easy, we can give the JavaScript file a similar filename (in the above example, we called the JavaScript file index.js to match our index.html file).
Great. So What About That JavaScript?
Now that we kind of understand what the DOM is, let’s talk about what we’ll do with the JavaScript we know.
As mentioned previously, instead of editing our HTML file directly, we’ll use a corresponding JavaScript file to add data, maybe make a few style changes, and setup any event listeners we’ll need. To do this, we’ll just need to indicate where we want to include this information by grabbing specific HTML elements.
Note: Event listeners is the technical term for all the fun things that make sites interactive. Clicking an image to expand, filtering and sorting options, and submitting information all fall under this category.
Once we’ve grabbed our HTML bits and bobs, we can use even more JavaScript to enhance the user experience and alter our data. You’ll still need to create functions and use conditional statements, but now the HTML elements provide more dynamic variables.
Do I Actually Know Enough JavaScript?
Short answer: Yes. You know enough JavaScript to start, and the things you don’t will just take a moment to commit to memory. As a handy guide, here are two tips that’ll help you conquer the marriage of JavaScript and HTML.
Separate Your Functions!
At the start, your code will feel gigantic. That’s because it’s huge. (It is. Accept it.) This is normal when you’re trying to grasp all of the things you’ll need to do, but don’t let this hinder you. If you can, pseudocode your answer first, take a step back and make sure everything works, then go ahead and start refactoring. This isn’t a new process, and you’re probably familiar with it after working with Ruby, but it’s easy to feel like this is impossible when you’re looking at twenty lines of code that accomplish a single task. Take a deep breath, and start moving things around.
Debugger is Your Best Friend (Console.Log is a Close Second)
After figuring out Pry, Ruby became infinitely easier. JavaScript doesn’t have Pry, but it does have Debugger! If you’re working on code and want to test, go ahead and throw ‘debugger’ in your code where you’d like to pause.
You’ll be able to test in the console using all of the available functions and variables that you’ve declared. If you’re not really in the mood for testing, you can use console.log() instead.
This will simply print some message of your choosing to the console for you as confirmation that things are at least running. These are invaluable when using Event Listeners, as they allow you to confirm that your listener is working properly before adding any conditional statements/logic.
Better Explained By Seasoned Professionals
Hopefully, this quick rundown was helpful, but I’m no expert. If you’re looking for a thorough resource on JavaScript and DOM, check these out:
