Learning JavaScript Through Building A Computer
A story project by Landon Umland
I have come to learn that JavaScript is a fair amount similar to building a computer. I had seen what JS had looked like, but everything about it confused me and wasn’t digestible. Also like building a computer It seemed very menacing at first, but by digesting it in small chunks, it call came together for a solid understanding.
Getting Started
One of the first things I learned in JS was console.log(). Everyone has their first console.log(“hello world”); Talking to the web page through the console to diagnose issues is a very useful tool that is similar to the motherboards debug light on a pc. While its not the best example, they are similar. A web page will tell you a lot with because it can communicate through text errors. A motherboard (and not all of them) has a debug light that can tell you what went wrong when trying to post. This isn’t a great indicator, because first you have to understand what either the blink pattern or color means. But once you understand that, its a great way to know that your ram isn’t seated fully.
Variables
Variables were confusing mainly because of not knowing how they interacted with everything as a whole. Like building a computer, I can see that the motherboard has declared variables (labeled inputs for parts) but I wasn’t entirely sure how or what connected them together. Java variables are different types of data called upon by different lines and code, where as a motherboards variables are called upon by different parts to connect and interact with the motherboard and the PC as a whole. Its like I understood the parts and where to put them, just not how they interact on a greater scale.
Conditionals
Conditionals weren’t hard to understand at face value, but the depth of which they go was a lot to take in. Similar to a PC and how it has a ton of conditionals to make sure it can function correctly. Conditionals are “If, then, else” statements. If this equals than then do this, if else, do this instead. Similar to how a PC will check if this part is inserted, check the next one, if else, do not boot. This deepened by understanding of variables and how you can write code to check their value before doing a command. Just like I would check to see if a part is correctly seated in a PC.
Events
At first I understood how events worked, but I struggled with how to make sure the events were calling upon the right variables and conditionals. Similar to trying to diagnose why a PC won’t boot without knowing what I correctly inserted and plugged in. Events are actions, like pressing a button and turning on a computer. Or clicking a page and initiating an animation. One it clicked how events connect to everything else, it became easier to diagnose issues and understand how to start them. Just like being able to see that I cannot turn my PC on because I didn’t plug in the GPU (this has happened more than once).
Local Storage
local storage isn't a very hard subject to grasp, but I sure don’t understand all that goes into it. LIke how I understand how a CMOS battery for a motherboard powers storage to keep BIOS settings saved, but I sure don’t understand where it is. The local storage for a website holds data such as a preferred theme for a user. I can use variables to tell what the website should store, and what data to not. Like how a CMOS battery saves BIOS settings after you power down a computer. Sometimes you need to changed something and restart the computer, the CMOS battery makes sure the motherboard keeps the data saved like how a website would.
Design Tokens
Design tokens are similar to declared variables for JavaScript. They are styles you create and reuse without hard coding every value into the code. This is similar to how modern modular power supplies function. Modular power supplies basically reuse the same form factor for each power connector for a part. They are all the same shape, the only thing that changes is the number of them you use. With design tokens, if you need to change the value, you can change the token directly and it updates everything that uses the token. With power supplies, if you need to change a part, like for example, upgrading a graphics card, all you would need to do is add more or less of the pin connections, and it will fit in. Its like saying I have this variable to equal 8 pins. I actually need it to equal 6 pins now, let me go and change that.
Conclusion
Comparing computers to the language that controls them feels a little bit weird, but I think it is a decent enough comparison. Each thing I have learned in code corresponds to a similar thing I have learned with building PCs. Both have different depths of learning, and tips and tricks to speed up the process of doing each. I’m sure I would run out of ways to compare the two if we went farther into JS, but at the same time, I am sure I could find more ways to compare the two.
Reflection
Learning this quarter has been a ‘fun’ journey. I feel like I missed quite a bit of stuff because I was struggling with outside things. But I have enjoyed JavaScript, and I am interested in learning other languages that are similar to it, like python. I wish I went in to this quarter with a better mindset, because I feel like I am playing catch up with how I started it. Overall I am happy with where I am at, and am looking forward to learning more with code and web developement.