JavaScript with LinkedIn Learning, Day 1(ish)

As per usual, the “first” day was all setup, and the real day one is where the learning starts. I’m following along with this tutorial in LinkedIn Learning, to get familiar with some of the basics of JavaScript.

Fun Little Tidbits

Special Commenting Trick: First, I learned that you can put your cursor on a line of code (or highlight multiple lines) hit CTRL+/ in order to comment out those line(s). Probably old news for some people, but absolutely magic to me, I’m a very big fan.

Special Editing Packages: Part of the tutorial was also installing ESLint and Prettier, two packages that will automatically check for syntax and formatting errors and either call your attention to them or clean them up (so, ESLint will flag errors, and Prettier will enforce rules about semicolons and spacing in order to make your code more human-readable).

Now I Know

Order of Operations

JavaScript works in concert with HTML and CSS. If HTML is the skeleton and the muscles, and CSS is the skin, JavaScript is the brain and the nerves that can make it all move (I made this metaphor up myself, so if it’s inaccurate or just plain gross, that one’s on me). In an HTML document, it might look like this:

<script src="script.js"></script>

It’ll be located somewhere in the <head> section of the HTML document, alongside the CSS source and other metadata information, for purposes of well-organized code.

If your HTML script tag written like this, then as the page loads, the browser will read through the document, hit the script section, and start working through whatever’s in script.js. Which is great, unless script.js needs to act on code that hasn’t loaded yet.

Okay, so we put script.js at the end, outside <head>, in the <body>. But no, wait — that’s bad for code organization, and what if we want script.js to be referenced by stuff that needs to load after it?

<script src="script.js" async></script>

The way to fix this is the HTML terms defer and async. async means that, rather than running the document, hitting JavaScript, loading the whole script, then running the whole script, it’ll run the document, hit JavaScript, and then load the script while continuing to run the document/load the page; once it’s done loading the script, it’ll stop loading the page, run the JavaScript, and then go back to loading the page; defer is similar, but it saves running the script until the entire page is loaded. This way you can have the code organized neatly and run at the right times.

The difference between the two is in part down to render time (or, how long it takes for the page to fully load). Without async, the page stops loading in order to both load and run the JavaScript, seriously impacting render time; async impacts render time slightly by loading the script in parallel with the page, then stopping momentarily to run the Javascript before continuing with the page; and defer doesn’t impact render time (because it doesn’t run until the page is all loaded) but does make you wait on your JavaScript.

What I Made

After messing around with the tutorial on how to create objects and declare their properties and methods, I decided to mess around a little in the console and create my own. What I learned is that if you create a constant object, run the code to see if it works, clear the console, add in some more properties and functions, and then re-run the code to see if it works, that doesn’t necessarily actually get rid of the original object, and you will get error messages telling you that you can’t re-create the object, because it already exists as a constant.

I ended up just renaming the object, because it was simpler.

Anyway, if you want to try my code, here you go! See if you can guess what it does before running it.

const beefSoup = {
  broth: "beef",
  numPotatoes: 6,
  noodles: true,
  strain: function () {
    this.numPotatoes = 0;
    this.noodles = false; },
  tellMeAboutIt: function () {    console.log(this.broth, this.numPotatoes, this.noodles); }
}

beefSoup.tellMeAboutIt();
beefSoup.strain();
beefSoup.tellMeAboutIt();

The formatting’s a little funky because WordPress doesn’t respect line breaks, so here’s a screencap of it as well.