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)

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

Update Your MASH App

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

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