Go Back

• Welcome and Introductions
• What is Front End and Back End Engineering?

JavaScript Introduction

JavaScript is a language that allows us to interact with a webpage. We can write JavaScript that can access HTML elements and change their appearance or content based on the way a user interacts with the page.

Forking Your First Replit

Replit is a web-based interactive development environment or IDE. It allows us to write code and see the output in the console at the same time. To get started today, we will be working in this JavaScript sandbox replit. When you open this replit, click the blue “Fork Repl” button to make your own copy on your account. From here, you can add code or delete code as much as you like. It’s yours!

A sandbox is a place where we can play around with code! Use this space to take notes or try things throughout the workshop today.

console.log()

In your sandbox replit, complete the activity that follows.

console.log("Hello, World!");
console.log("Let's start coding.");

Takeaways

• console.log() is a command that is built into the JavaScript language
• console.log() will print the value it is instructed to print and creates a line break after printing the data

Variables

In order to store a piece of data and reference it later, possibly many times throughout our code, we need to use variables. You can think of a variable like a storage container with a label on it where we can hold items we care about. In JavaScript we define variables by typing the keyword var followed by the name of the variable we wish to create, the assignment operator (=), and then the value we want to store in that variable. We end each statement in our code with a semi-colon.

When working with JavaScript, we use camelCase for variable names, which means that words are joined without spaces, and each new word begins with a capital letter.

var email = "helloworld@gmail.com";
var firstName = "Brandi";
var currentCity = "Tampa, FL 🌴";

Data Types

In JavaScript, your data (information) can be different types. There are two data types we will be working with today: Number (any numeric value), and String (words or phrases like “JavaScript is fun!”). We use the Number data type if we are storing data that may be manipulated in some way. We use the String data type if our data needs to remain consistent. With String data, anything inside of the quotation marks is preserved.

Interpolation

We can use string interpolation to combine static data with dynamic (or variable) data. Here’s an example of the syntax:

var firstName = "Amy";
console.log(`Hello, ${firstName}!`);

The code above will make “Hello, Amy!” appear in the console.

Note that back ticks are the characters that surround this combination of the string an ${} syntax. You can find the back-tick key at the top-left of your keyboard, next to the 1.

Anything inside the back ticks will be read as a string. But, when the interpreter sees the ${, it will stop and wait for JavaScript code to read. Typically, we provide a variable name here. When the interpreter read the matching closing bracket - } - it goes back to treating characters as part of the string.

Up Next

• Control Flow