So far we have looked at HTML and CSS, but you must’ve noticed the “JS” tab in the Codepen examples.

JS stands for JavaScript. It is a programming language that drives interactivity on the web. Login forms, slideshows, galleries, maps, games are just a few of examples, which JavaScript is used for.

Let’s play around with it in a fresh Codepen. Let’s start by changing some content by writing some JavaScript!

See the Pen JavaScript Basics by itsprogramming (@itsprogramming) on CodePen.

As you see, no CSS is used here, I just added an example paragraph:

<p id="myId">Some text</p>

And some JavaScript:

document.getElementById("myId").innerHTML = "New text!";

Notice that the paragraph was given an “id” that is referenced in the JavaScript. So essentially, the JavaScript states:

“Take the document, get me the element with the id “myId” and set its inner HTML to “New text!””.

It’s that easy.

JavaScript has many uses, but changing content is one of the more common ones. You can also target by class, but that requires a bit more code, because classes can be applied to multiple elements, thus doing:

document.GetElementsByClassName("myClass");

Will return a collection of all elements, that have the class name “myClass”, for example.

To store a value, you use variables. Imagine taking a box, putting a label on it and then putting data into it. In JavaScript it looks like this:

var myVariable = 0;

This creates a very small “box” in your computers memory, storing the number “0”. Let’s upgrade our JavaScript:

var mySampleText = "New Text!";

document.getElementById("myId").innerHTML = mySampleText;

Now we created the variable, stored our custom text in it and provided the variable as the source of information when changing the inner HTML of the selected element.

Still, not too complicated.

Okay, so now we could get all of the elements by some class into a variable, that’s great and all, but now what?

Now we should take each element we retrieved and change its HTML to the custom text. So next up - let’s take a look at how data flow is handled.

One way that data flow in JavaScript is handled is with loops. Especially, when interacting with collections of data.

Here’s a simple example of a “for” loop.

for (var i = 0; i < myElements.length; i++) {
  
}

Okay, now this might look crazy, let’s break it down:

  1. You create an empty for loop
for () {
  
}
  1. Then you provide the starting point of the loop, which here is just a variable with the number 0.
var i = 0;
  1. Then we create the ending point, in this case we set a condition the loop will run under. When the number we defined becomes greater than the length of the collection (received by writing “.length”) the loop will stop, since it defies the condition.
i < myElements.length;
  1. Then we set what happens each loop, we set it to just add one number to the current number stored in the variable.
i++

So now taking another look at the loop, it makes sense.

for (var i = 0; i < myElements.length; i++) {
  
}

Currently this loop will do exactly nothing, for as many times as there are elements stored in the “myElements” variable. Instead, we need to make the loop change the HTML for each of the elements returned.

for (var i = 0; i < myElements.length; i++) {
  myElements[i].innerHTML = mySampleText;
}

So what is happening here? We take the variable, choose the element that coincides with the current loop count (each loop adds to “i” after it’s done). Then sets the HTML like we did earlier.

All of the code taken together, to change the HTML of all elements, that have the class “myClass” we write this HTML:

<p class="myClass">Some text</p>
<p class="myClass">Some text</p>
<p class="myClass">Some text</p>
var mySampleText = "New Text!";
var myElements = document.getElementsByClassName("myClass");

for (var i = 0; i < myElements.length; i++) {
  myElements[i].innerHTML = mySampleText;
}

The Result:

See the Pen JavaScript Basics 2 by itsprogramming (@itsprogramming) on CodePen.

Now, we covered a lot of new ideas in this post. Let them sink in, it will take time and it’s perfectly normal to have a blank stare currently. The more practice you have, the faster you will associate how each action is represented in code and it will come to you naturally.

I suggest reviewing the examples periodically, because there is a law called “the law of diminishing returns”. What it means is - “used to refer to a point at which the level of profits or benefits gained is less than the amount of money or energy invested” (Source: Lexico by Oxford.

In our context, sitting at a problem for long periods of time doesn’t guarantee solving it. It does guarantee burnout though, if abused long enough. Take breaks and let the information “sit” for some amount of time and I can assure you, you’ll be productive again in no time!