Blog

Front End Development topics with a touch of humor

Do Something with JavaScript

Out of the sandbox and onto the screen

September 22, 2020


Did you learn some JavaScript at a tutorial site or a book and don't know the next step? Do you know how to write a nice for loop or solve an algorithm but are wondering what the big fuss is with JavaScript?

Maybe you need to do something with JavaScript. Let's get some JS onto the screen, shall we?

What's the plan, man?

Let's put together a plan. Briefly, this is what we'll do:

  1. Make an html file on our computer
  2. Put some buttons and text on it
  3. Write some JavaScript to do something with it

Make a file

We're going to start from the beginning here, because not everyone knows how to do this. It's possible to learn lots of JavaScript and never touch a text editor. So from square one:

Open up a text editor. This can even be the simple Notepad that comes with Windows. I like Visual Studio Code, which is free and fast and powerful. Others are Atom, Sublime, and Brackets.

Write the following in the file and save it as MyFile.html (note--if you're using Notepad, make sure to save as type "All Files", then write out MyFile.html [by the way, don't use Notepad--download Visual Studio Code and make things easy on yourself!]).

         
            <!DOCTYPE html>
<html lang="en">
<head>
<title>Doing Something</title>
</head>
<body>
<h1>Hello, friend</h1>
<script>

</script>
</body>
</html>

Now navigate to where you saved the file, double-click it, and your browser will open it up. There should be a pleasant-creepy message waiting for you. Success!

So now we're set and ready to do something with JavaScript. Thank you for your patience, if you're still following along. Onward.

Buttons and Text

Time to write some more HTML. Now... the way this works is HTML goes in between the opening and closing body tags (<body>). So put in something like this:

            <p id="myText">
Now is the time for all good men to come to the aid of their party.
</p>
<button id="myButton">Click here!</button>

The text between the p tags (paragraph tags) will be outputted as normal text. The other line will create a button on the screen with the id of "myButton" and the text of "Click here!".

So far, so basic. A line of text and a button is not exactly going to make you the next tech billionaire. But this is a really good start. Onward!

Write some JavaScript!

Finally, we get to do some real coding. We're going to write a function that will modify the text, create an event listener, and then hook up the function to the button. This will let us click on a button to change the text.

This is a fundamental way of working with a web page. If you think about it, most interactions have to do with clicking on something and having it change something on the screen.

How does it work? Here's the process:

  1. "get" the elements you want to work with
  2. write a function that does what you want to do
  3. make an event listener that hooks up the button with the function

In between the <script> tags you wrote earlier, write the following:

            const myText = document.getElementById("myText");
const myButton = document.getElementById("myButton");

This "grabs" or "gets" the text and the button and points its value to a variable. Then we can use the variable in whatever code we like.

Don't worry if you don't know what every word means here. It's a formula that you will probably end up using over and over again. Alternatively, if you want to learn, you can Google each of the terms and find plenty of information about what they mean. (not a bad idea, actually!)

Now below that, write:

            const myFunction = () => {
myText.innerHTML = "If this works, the text will be changed to this!";
}

This is a simple function. When called, it will change the text to the new string.

Finally, step three is this:

            myButton.addEventListener("click", myFunction);
        

This bit of code adds an event listener to myButton. Think of an event listener as a little guy inside your browser who's now been assigned to watch the button for any clicks. When he sees a click, he will call the function you wrote earlier.

Here is the full code, to make sure we're all on the same page.

            <!DOCTYPE html>
<html lang="en">
<head> <title>Doing Something</title> </head> <body>
<h1>Hello, friend</h1>
<p id="myText">
Now is the time for all good men to come to the aid of their party.
</p>
<button id="myButton">Click here!</button> <script>
const myText = document.getElementById("myText");
const myButton = document.getElementById("myButton"); const myFunction = () => {
myText.innerHTML = "If this works, the text will be changed to this!";
} myButton.addEventListener("click", myFunction); </script>
</body>
</html>

So save this and open it up in the browser by clicking on it. It will appear in the browser. When you click on the button, the text should change!

What have we learned?

Clicking a button to change some text may not seem that awesome (or it may!), but this is a foundational skill in JavaScript. You've hooked up the code to the window. A user could open up your page and interact with it, instead of just reading a static page.

Going further with JavaScript, you'll see lots and lots of event listeners. There are many of them--not just ones that listen to buttons, but ones that listen to the keyboard, or to other processes. Some even listen to other functions.

What other things can you think of to do with these basic materials? Maybe make a function using one of your for loops? Can you figure out how to add a second or third button? Can you figure out how to add a second or third function?

Have fun!

Also...

For bonus credit, hook up a button to an event listener to Fetch API and get some jokes. That's basically what this blog post does.