Hello Front End — An Introduction To Web Development (Part 5 — Programming)

Adding Functionality to a Website

We’ve reached our last step friends, and the most interesting one in my opinion. In our current state we have a styled document available on the web. Recall that we also added a Like button, but that button does nothing at this time. If you click it, nothing happens. That’s what we are going to change today. Our goal will be to an element in our document upon a click of the button. This is called adding functionality, because so far, the only function our website provides is to be able to read the text that it shows.
This is where Javascript comes into play.

Basic Javascript

Programming is the process of creating a set of instructions that tell a computer how to perform a task. Examples of such instructions can be: print the sum of two numbers to the screen, check if my password is correct, do something when I click a button, etc..

To start coding we need a place to write the actual text of the code, a file. We’re going to use the same HTML file we are currently using. Inside the file, we shall create a special section for the code, much like we did for CSS. This is expressed by a new tag and inside it we shall write our code:

<script></script>

Everything inside the script tag is like a story you are about to write in English. You will read from top to bottom, left to right. Like HTML, the browser will also execute all the code, and it will also read and run our commands from left to right, top to bottom.

One very common command (or use-case) it to alert the browser that something important has happened. Let’s see how easy it is:

alert();

Surely you have encountered this annoying window in the past. Well, now you can annoy others with it as well.

When a word ends with braces, it means that the code is written elsewhere, and that the computer should go there first and run it, and then return and continue reading. This is called a function. The ; at the end is similar to a . in English, marking the end of an instruction or sentence, respectively. A programming language has syntax rules just like any other human language, but much simpler and stricter.

Let’s get a feel of height:

alert();
alert();

What do you think will happen now? As we said, left to right, top to bottom. Every line contains a sentence. Remove the second line and let’s move on.

Let’s write something and have the alert window show it:

alert(“hello world”);

Yes, looks familiar and a bit weird. You noticed that only hello world was printed, without the “”. This is because if we want to write actual english, or any other language inside the code, we must wrap it with quotation marks, otherwise the computer will think it is code and will break. This is what we call a String.

Now let’s duplicate this line and execute.

alert(“hello world”);
alert(“hello world”);

As expected. However, notice that we wrote the string twice. In programming land, this is called redundancy. In the same way that the alert function is a reference to different section of code, we should be able to define “hello world” somewhere else, name it and then use this name to instruct the computer to find the value in a different location in our story. This is where it gets a little weird:

let message = “hello world”;
alert(message);
alert(message);

Now, let’s see how we can create a function of our own, and then reuse it like we did with the alert message. This function will contain the same code we wrote so far — that is, sending an alert to the browser with a message saying “hello world”:

function alertHelloWorld() {
 let message = "hello world";
 alert(message);
}

The only thing missing now is calling this function. We have only defined something in our code but we need to reference the reader (the computer) to actually read it (run it). We shall run this function every time a user clicks a button. Communication with the browser goes both ways. We can actively ask the browser to do something, or to notify us when something interesting happened, for example, when an HTML button is clicked.

Change the HTML button code to look like this:

<button onclick=”alertHelloWorld()”>Like</button>

We planted some JS code as a property in the HTML. This is how we ask the HTML to notify our JS code that the user did something. And when we run it, we see that any time the button is clicked, our function is called.

The Document Object Model (DOM)

Let’s return to our original problem, changing the text of the button when it is clicked. We’ve made a connection between a click of a button to some code, so we know where we should start.

First let’s change the name of our alertHelloWorld function to onButtonClick and delete its contents. We will use this function to react to a user pressing a button.

function onButtonClick() {
}

Only thing we are missing now is a way to manipulate an HTML element. This is where the DOM (document object model) comes into play. The DOM is a set of functions that enable us to manipulate HTML to our will. In the software world, this set of functions is called an API (application programming interface).

The entire DOM can be accessed in JS, using the document keyword.

function onButtonClick() {
  
  document
}

This is called an object, and it is basically a collection of functions and data. To invoke a function that an object exposes, we do the following:

function onButtonClick() {
  
 document.getElementById();
}

So the function part is familiar, we’ve seen it before. Can you guess what this function does?

The name of the function implies there should be an ID to the element we want to fetch. Let’s review our HTML. Do you see a property named ID? Let’s create one, and also change the name of the function we invoke to reflect our latest changes.

<button id=”likeButtonId” onclick=”onButtonClick()”></button>

We fetch the Like button element using its ID, and give it a name so we can reference it later on in our story.

function onButtonClick() {
 let button = document.getElementById("likeButtonId");
}

It turns out that element is also an object, which means it exposes functions that allows us to manipulate it; it exposes an API. Let’s change the text:

function onButtonClick() {
 let button = document.getElementById("likeButtonId");
 button.innerText = "Liked!";
}

Alright. Hopefully you tested every change in the browser before moving on, but in case you haven’t lets save the file and refresh the browser. Now when you click the button, its text will change to Liked!.

Now let’s deploy our new changes to the server, as we did before — and we’re done, and well done!

I hope you enjoyed your time spent here. Whether you are interested in furthering your developer skills, or just to experiment a bit and learn a new skill, I hope this tutorial gave you enough information to continue this journey on your own.

Dear readers, I thank you and welcome any questions and comments you may have.

1. The definitive reference for everything WEB
   https://www.w3schools.com/
2. A great very up to date learning center by the creators of FireFox
   https://developer.mozilla.org/en-US/docs/Learn
3. A great in depth online web development course — https://www.udemy.com/the-web-developer-bootcamp
4. Learn to code for free
   https://learn.freecodecamp.org/
5. A wonderful free book on programming with Javascript
   http://eloquentjavascript.net