JavaScript - Behavior

Right now, we chose the elements we wanted for our future, but that’s not very much fun. Instead, we want a random future chosen for us! And we probably want a different random element from each array every time. When we want to perform the same action repeatedly in our code, it’s a good idea to use a function. A function is a block of code designed to perform a specific task. We first define the function and then we call it when we want it to perform the task.

function sayHi() {
console.log("Hello!");
}

sayHi();
// => “Hello!”

sayHi();
sayHi();
// => “Hello!”
// => “Hello!”

We can even make our functions perform the same action with unique values by defining a parameter in the function and passing in an argument when we call the function. In this example, name is the parameter (a variable used only in the declaration of the function) and each of the strings “Kaitlyn”, “Amy” and “Jeff” are all arguments.

function sayHi(name) {
console.log(`Hello, ${name}!`);
}

sayHi(“Kaitlyn”);
sayHi(“Amy”);
sayHi(“Jeff”);
// => “Hello, Kaitlyn!”
// => “Hello, Amy!”
// => “Hello, Jeff!”

Try It: Functions

Fork this replit and write a function to get a random number. We will be working in the JavaScript file only.

Use the function keyword and name your function getRandomNumber.
Your function should take a parameter called maxNumber.
Use the Math.floor() and Math.random() methods to calculate a random whole number between 0 and the maxNumber.
Use the return keyword to make sure the function returns the random number that was chosen.
Use console.log() and call the function several times using a different maxNumber each time to make sure that your function is working!

Update Your MASH App

Now that we understand the role of functions in an application, let’s update our MASH app to get a random value from each array.

Functions in Your MASH App

Back in your MASH starter kit, follow these steps to begin using functions in your project.

In your JavaScript file, declare a function called getRandomNumber that takes in an array for a parameter.
The function should return a random number between 0 and the maximum index value in the array. Hint: To get the maximum index value, try using the length method we looked at earlier!
Use that function to get a random element from each array in your future variable, instead of a predetermined value that you selected!

Need help? At this point, your project should look something like this.

Connect JavaScript to HTML

The biggest problem with our current code is that the user can’t see the future we’ve chosen for them. The console is only visible to developers and won’t show up in the browser. We need a way to modify the HTML once we’ve selected the future, so that the user can see it!

Note: We will be using jQuery, a JavaScript library, to assist us in completing some of the tasks that follow. If you create your own replit at any point, make sure to add jQuery under the “packages” section on the left toolbar in replit.

Variables can also reference parts of the HTML we’ve written using jQuery to access that element. The syntax is similar to what we did for interpolation, but we tell jQuery which element to reference using a unique identifier, called an id!

Explore to Learn

Look back at your HTML file in the MASH starter kit.

Where do you see an id in this HTML code?
Is there anywhere it would make sense to add another id?

To show our user their future on the screen and not in the console, we need a way to reference the paragraph element in the HTML with the id future. The # symbol tells jQuery to look for an id with the name future.

var futureSection = $("#future");

We can then access the text property of that element by using the text() method and pass in a new value for the argument to change the text in that element! Take your future variable that was giving the user a random future in the console and move that statement to the argument for the text() method. Click the green Run button to see the future appear in the browser!

futureSection.text(future);

Event Listeners

Right now, the future shows up right away. What’s the point of having a button if you never use it? We want our code to wait for the user to click the button before showing the future. In JavaScript, an event listener is a way to set up code to run only when a very specific thing happens. You want to change the color of something when the user clicks a button? Great! That’s an event listener – you’ll tell the code to listen for a click on a specific element on the page, then run the code that changes the color. You want to wait to show the user’s future until after the user clicks a button? That’s an event listener too!

Event Listeners in Your MASH App

Back in your MASH starter kit, follow these steps to set up an event listener to wait for your user to click the button before showing their future!

Store a reference to the “Click to see your future!” button in a variable called futureButton.
Declare another function called showFuture that will change the text of the futureSection. Paste your code from the previous step (futureSection.text(future)) inside the body of the function.
To write an event listener, start with the variable that refers to the button followed by the keyword on and pass in two arguments – the event to wait for (“click”) and the function you want to run when that happens (showFuture).
Now that the future only shows up when we click a button, you can remove the “Your future goes here.” text in the HTML file that currently appears when you load the application.
Finished? If you want to recalculate your future every time you click the button, what else needs to be inside of the showFuture() function?

Need help? At this point, your project should look something like this.

JavaScript - Behavior Summary

Functions allow us to perform the same task multiple times throughout our code.
We can use variables to store a reference to an HTML element.
Event listeners allow us to wait for a user action before executing a function.

Next Section: Day 1 Review