Understanding JavaScript Syntax
I understand JavaScript the way I understand Spanish. Speak a little to me and I can understand the general gist of the conversation. I speak just enough to get me to the nearest toilet, or insult someone’s mother. My writing literacy is laughable but when reading I can use context clues — my understanding of words “local” to what I’m not understanding– to fill in the blanks.
Adjusting to a new visual language has not been easy. Let’s take some time to break it all down.
- I started breaking my code down into four distinct sections after seeing it done in a similar way during a lab. The lab in question had multiple code blocks wrapped in a DOMContentLoaded event listener. This ensures the page will load fully before trying to implement the behaviors we define in our JavaScript file. The four sections I broke my code into are Define Variables, Stand Alone Functions, Stand Alone Event Listeners, and Call Function.
2) Defining variables is easy enough. In JS we use let for local scope, const for global, and we ignore the fact that var exists because it’s more trouble than its worth. Note that variables declared without any of these prefixes will ALWAYS be GLOBAL.
Another difference between const and let is that the value of const CANNOT be changed. Above, the const refers to a string. This name cannot be changed. However, if instead it were referring to a named array, we would be able to change the contents of the array, but NOT the NAME of the array.
We can also use things like document.querySelector() to select components of html code we want to affect within our JS file. Think about the HTML file as the skeletal structure and the JavaScript file as the muscles that give that skeleton movement.
In feedCat, we are searching our html document for an item with an id of ‘feed’. The next statement is also selecting an item by it’s ID, but using a slightly more specific method. In our last statement, we’re actually setting the value of ‘ul’ to the new creation of a ul element.
3) Stand Alone Functions is where we will define our functions that do not depend on another function to run. In this instance, lets break down an intervalHandler.
Here we have our variable defined as a const. We could also declare it as an actual function, but this method ends up being a little neater than that. Since it’s technically setting up a function we’ll keep it in our SAF section. In our intervalHandler, we’re setting up a counter that increments once every second. If I were taking these snippets in the direction of a fully functioning app, I could rename ‘counter.innerText++’ to ‘numberOfFoods.innerText++’ to have it increment the amount of times Nox has been fed. Once a second might be a little excessive and he’s fat enough, so we can also change the integer 1000 (representing a second in milliseconds) to whatever integer (representing a second in milliseconds) we desire.
4) Stand Alone Event Listeners will add a second layer of listeners to come into play after our DOM has loaded fully. Back in our variables we defined feedCat as referencing to something with an id of ‘feed’. Lets say that this references a button in our imaginary HTML file. We can create an event listener to wait for that button to be clicked, and on click increment the number of times Nox has been fed.
We tell our new event listener to watch feedCat and wait for it to be clicked. Once clicked, increment numberOfFoods by 1.
5) Call Function would typically be where we call our functions. However, in this example, our auto-feeder is already initialized as a const so we don’t actually have to call it the way we would if it were a function.
This is not even remotely the tip of the iceberg with JavaScript syntax, but it’s good to break down the foundation early to really dig in and get a deeper understanding.
