Back to Setup Page

JavaScript - Overview

JavaScript is the part of the code that allows our user to interact with the page. It allows the user to actually do something on the site. The user can click buttons or type information in a form and the user usually gets some form of visual feedback on the screen that they did something. Before we continue with our FAQ page, let’s review some JavaScript basics.

Data Types

Variables can store different data types. The most common are strings and numbers. A string is a string of characters enclosed in quotation marks. A number is a whole number with no quotation marks. We can perform operations with number values.

'I am a string!'

"I can hold emojis: 💥🦄✨, lots of spaces:     , and special characters: $#@%"

4 + 2
//=> 6

7 * 3
//=> 21

Variables

Variables allow us to store information in a container with a label. We can then use that label to reference the contents of that container. In JavaScript, we declare variables using the var keyword. This tells JavaScript that we’re about to make a new variable, or declare a variable. Here are a few examples of JavaScript variables:

var age = 35;
var school = 'Turing School of Software & Design';
var firstName = 'Kaitlyn';

You can also reassign the values in a variable by using only the variable name, followed by the assignment operator, and a new value.

age = 100;
school = 'Harvard University';
firstName = 'KVG';

Variables are helpful, because you can use them throughout your application to refer to a specific piece of information. You can even insert variables into another string using string interpolation. To do this, you will need to use a single backtick around the sentence instead of quotation marks. The backtick character is located next to the 1 on your keyboard. You will also use a dollar sign followed by the variable name inside of curly braces to insert the value stored in that variable into the string.

var greeting = `Hello, my name is ${firstName}.`;
//=> “Hello, my name is KVG.”

Built-In Methods

There are several tools that are pre-built into the JavaScript language. We call these tools methods. When we use these methods, we can do some pretty cool things by writing only a few lines of code. The first method we will look at is console.log(). As we learn about JavaScript today, we will use the console.log() method to print the data we are working with out to the console in replit.

console.log(firstName);
//=> “KVG”
console.log(age);
//=> 100
console.log(`Hi, I’m ${firstName} and I am ${age} years old!`);
//=> “Hi, I’m KVG and I am 100 years old!”

Another method we will use with number data types is Math.random(). This method returns a random decimal value between 0 and 1 (inclusive of 0, but not 1). We can combine this method with other math operations and math methods to get a random number between two values. This will be super helpful when we build our MASH name and we want a random number!

console.log(Math.random());
//=> 0.1261206435198774 or any other random decimal value between 0 and 1
console.log(Math.floor(Math.random() * 5));
//=> 3 or another whole number between 0 and 5 (inclusive of 0, but not 5)

Try It: Variables

That was a LOT of info! Fork this replit and follow the directions to play around with variables, data types, and built-in methods. We will only be working in the JavaScript file.

  • Declare 3 variables describing your car. Use the variables make, model, and year. Assign each to an appropriate value.
  • Make sure to console.log() each variable to verify you've stored it correctly!
  • Use console.log() and interpolation to print a sentence describing your car.
  • Reassign the values of your variables to describe your dream car.
  • Create one more variable called randomNumber that stores a random whole number between 0 and 10 (inclusive of 0, but not 10).
  • Finished? How would you change the value of randomNumber to be a random whole number between 5 and 10?

Arrays

Another data type is an array, which is just a collection of items that belong together. For example, we could have an array of strings, one for each student in a class. You could also have an array of numbers! Just like with other data types, we store our arrays in a variable. The variable name should be plural.

var students = [Chelsea, Courtney, Alesha, Tracey, Lindsey, Erin, Anna];

Each item in the array is referred to as an element. If we want to access only one element from the array, we can use bracket notation followed by a number that corresponds with that element. That number is called the index and as weird as it may seem, counting starts with 0 in most programming languages.

console.log(students[0]);
//=> “Chelsea”
console.log(students[6]);
//=> “Anna”

You can also add items to your array using the push() method.

students.push(Amy);
console.log(students);
//=> [“Chelsea”, “Courtney”, “Alesha”, “Tracey”, “Lindsey”, “Erin”, “Anna”, “Amy”];

There are also many other array methods that we can use in JavaScript. If you want to remove an element in a specific location from an array, you can use the splice() method. However, you can pass in multiple values – the index location to start at and how many elements to delete. If you want to find the length of an array, you can use the length method.

students.splice(0, 1);
console.log(students);
//=> [ “Courtney”, “Alesha”, “Tracey”, “Lindsey”, “Erin”, “Anna”];

students.splice(2, 1);
console.log(students);
//=> [ “Courtney”, “Alesha”, “Lindsey”, “Erin”, “Anna”];

students.splice(3);
console.log(students);
//=> [ “Courtney”, “Alesha”, “Lindsey”];

console.log(students.length);
//=> 3

Try It: Arrays

That was a LOT of info! Fork this replit and follow the directions below to practice using array methods.

  • Declare a variable called friends storing an array of strings, each containing a name of a friend. Make sure your array has at least 3 values.
  • Use console.log() and bracket notation to print a specific element from the array using its index.
  • Add another friend to your friends array.
  • Remove the friend in the second position in the array (remember, the second position has an index value of 1).
  • Finished? How could you print the last element of the array, no matter how long the array is? How could you select a random element from the array?

Update Your MASH App

Now that we’ve covered the basics of JavaScript, let’s apply this new knowledge to update our MASH app.

Arrays in Your MASH App

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

  • Navigate to your JavaScript file.
  • Create three more arrays – one for each of your three categories in your HTML file.
  • Include at least three values in each of your arrays.
  • Finally, create a new variable called future and use string interpolation to create a future you would like using a single value from each array.
  • Use console.log(future) to see your future statement in the console.

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

JavaScript - Overview Summary

  • Variables allow us to store information in a container with a label.
  • Arrays are a collection of items that belong together.
  • Reminder: This stuff gets really complex! We are only scratching the surface with some foundational topics today.

Next Section: JavaScript - Behavior