JavaScript 101: Programming Concepts

See Doug poop. Poop, Doug. Poop.

Beginning Programmer. JavaScript 101: Programming Concepts
Photo by Markus Spiske on Unsplash. Text added by author.

Programming is all about the manipulation of objects. Everything is an object. A web page is an object. That dog over there is an object. Objects have different descriptions (aka properties). Objects have different things they can do (aka events). An object can take action (aka method).

Side Note: When I first wrote this article, I was using “attributes” and “properties” as synonyms. I thought they were both the same thing. A helpful, wise programmer pointed out in the comments that they are, in fact, two different things. I don’t get the difference yet, but I will continue to study. For now, I have replaced the word “attribute” with “property” until I can tell the difference.

It’s just like putting together a sentence. You have nouns, verbs, and adjectives. You even have adverbs, but we’ll get into that later. Programmers have very silly names for these parts of a sentence.

That’s cool. Each of us is a unique snowflake. Can I have my participation trophy now?

They could have stuck with words we all knew, but nooooooo. “We get paid lots of money. We get to use our own words! Can you grok it? You’re such a n00b.”

Let me break down these concepts again. You should memorize these as a foundation to build on.

That’s cool. Each of us is a unique snowflake. Can I have my participation trophy now?

Object (noun)

Let’s stick with the previous example. That dog over there is an object.

Happy, slobbery dog.
Photo by Oscar Sutton on Unsplash

We could just stick with the plain ol’, “That there is a dog.”

If you were ultra-nerdy, you would adjust your thick glasses and say, “No no. I’m afraid the word you were looking for was ‘object,’ my fine sir. I do believe that is a fine object of class ‘dog’ running toward us.”

A computer thinks of a web page as a collection of objects. This whole shebang has an ultra-nerdy term, too. It’s called the Document Object Model (aka DOM).

Next Thanksgiving, freak out your nephew by using “DOM” in a sentence:

“I keep trying to get my website to look right, but my CSS isn’t picking the right object in the DOM.”

That’ll teach him to talk about politics at dinner.

Properties (adjective)

Let’s stick with our fine dog object, from above. A super-nerd would say “This is a dog object of class labrador.”

Yes, there are many examples of dog. They all have four legs. They all bark for no reason. They all like bacon.

The things that make them different are the adjectives we use. Programmers call these properties.

You: That’s a brown dog running toward us. He sure looks happy. He looks like he wants some bacon!

Super Nerd: Yes, I agree, fine sir. His color equals brown. His mood equals happy. His hunger equals bacon. I do believe that this dog is of type Labrador.

This is a dog object of type labrador.
—Super-Nerd

In programming-speak, we query an object to ask what the current properties are.

You’re using your eyes to find the color of the dog, but computers don’t have eyes. Luckily, the DOM just knows the properties of every object it contains. Your job, as a programmer, is to make instructions (aka program) for the computer to use. That program will find objects and possibly change objects.

Have I said this already? Computers are stupid. They have to be told exactly what to do.

Verbs (aka Methods)

A dog can do all sorts of things. They can run. They can bark. They can eat bacon. They can poop right by your slippers (probably not intentionally… cats do it on purpose).

If you want to tell a dog to do something, you use verbs in your commands.

“Dog! Poop!”

The ultra-nerd would say something like “I called the poop() method for the object dog with the class of Labrador. I have named the dog Doug. He now has a name equal to Doug, and shall henceforth be named. He’s already pooped once today. I will increment the timesPooping variable by one. He’ll need more bacon before I can call the poop() method again.”

Your instructions for the dog are faster and to the point. This only works if the dog already knows the command “Poop.” The dog is acting as an interpreter. The computer has one of these, too. Only this one is stupid and untrained. You have to tell it every. single. time. how to do things.

If our dog were a computer, it would be an advanced form of artificial intelligence. You can train it to poop. In the future, you don’t have to give complicated instructions. I want a computer that does that! Take my money!

Shut up and take my money!
Meme image found on Udorami.com

But alas, a common dog is smarter than your computer. You have to talk slowly and use lots of words.

Sigh.

Look! The dog just did something! (Events)

Cute doggy (object) is running (method)
Photo by Joe Caione on Unsplash

We’ve already covered methods. That means that an object (our dog) has performed an action (pooping). Let’s say that your friend wants to tell you about it.

Friend: The dog is pooping! HE’S POOPING!

This illustrates our next concept. Any time a method (verb) happens, the computer calls it out. When the dog poops, it is an event. In “nerd speak” we would say “the dogPoop event fired.”

You may have a program watching for that dog to poop. It is watching for the event to happen (aka fire).

The DOM in the computer is like your very excited friend. It shouts at the top of his lungs when anything happens.

I JUST OPENED A URL!

I JUST LOADED A PAGE!

Now what is a program?

Let’s pretend you’re going to tell your friend how to prepare a yummy apple pie. We’re assuming he has a little knowledge of the kitchen and cooking.

You would use a recipe. If you were making a video or writing an article, you would call it a tutorial or “how to” instructions. Maybe a DIY (Do It Yourself). Book? Email Course? Personal Tutor? YouTube video? Tik Tok? Demonstration?

You get the idea. These are all ways to get information out of your head and into your friend’s head.

A programmer wants to get something done. She wants to get it out of her head and into the computer’s head. She writes a detailed set of instructions.

The set of instructions given to a computer is known as a program. The program is handed to an interpreter. It knows basic instructions. Different programming languages talk in different ways. There are different types of interpreters in the computer (ie a JavaScript interpreter).

We can say, “Computer, what time is it?”

The interpreter would say to the computer, “1100011101000100001110010100010101001011011.”

The computer knows what that means (I do not).

Now, if the programmer wrote the instructions incorrectly, the answer will not be correct (or the computer might not answer at all). The programmer made a mistake (aka bug).

Bunny Trail: Origin of the word ‘bug.’

In the early days of computers, they were quite large. A computer could fill an entire room. It was full of switches and vacuum tubes. One day a programmer could not figure out why his program would not work.

He finally opened up the computer to check the machinery. He found a literal bug stuck inside. The insect was causing the problem.

Henceforth, a problem with a piece of code is a bug. Now that I think about it, the programmer is claiming to be perfect.

“It’s not my code. I did that right, obviously. There must be a cockroach stuck in the computer.”

</bunnyTrail>

Measure twice, cut once

Example flowchart of the steps to make a dog poop. It involves bacon
Example flowchart created on Creately.com

Before you write any code, you should plan what you want to do.

Programmers do this with a simple diagram, called a flowchart. Often, the programmer will not yet know how to perform each step. I created this simple flowchart using a website called Creately (no affiliation). It has a premium plan, but the free plan lets you use it on 5 domains.

It was handy and easy to understand without instructions. I recommend it.

Maybe your friend does not know how to “feed bacon” to the dog. That might need another set of steps. First you have to kill a pig…

A complicated flowchart has a lot of different shapes. Each different shape has a different meaning. They probably teach you all that in expensive college.

“Look at me! I went to college! I paid thousands of dollars for this piece of paper! Now pay me $200,000 a year!”

Oh… that’s a lot of money. Never mind.

*Clears throat*

We’re going to cover four basic parts of your flowchart.

  • A rectangle shows a generic step.
  • A rhombus (diamond shape) indicates a simple question.
  • A slanted rectangle is used for either input (usually from the user) or output (usually from the computer).
  • A rectangle with triangle ends shows an event.

My example also shows output using a different symbol. I could have used a slanted rectangle instead.

Now we have a rough outline of what we want to do. A flowchart makes it easier to work out steps and find logic mistakes.

How do I write JavaScript?

JavaScript is written in plain-text, just like HTML and CSS. You can write it directly inside your HTML code, although this gets really messy. It’s better to keep all of your scripts (aka programs) in a different folder. You will then import the scripts using the “script” tag in HTML.

If you’re using a Windows PC, plain-text is written in a program called “Notepad.” If you are using a Macintosh, the program you are looking for is “Text Edit.” Many programmers prefer to use a code editor program. These do lots of shnazzy things for you. They will indent automatically, color-code for you, and auto-complete common code. This is handy for beginners and veterans.

READ MORE: 15 Best Free Code Editors for Windows & Mac (no affiliation)

Are you psyched?

In our next lesson, we will actually write some code! Before that, make sure you have a sandbox set up to practice and a code editor to write with.

Until tomorrow, remember:

See Doug poop. Poop, Doug. Poop.


Matt believes that anyone can learn to program.

☝ ️Start from the beginning

👉 Sign up for the MWMcCabe newsletter

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.