All language subtitles for 2 - Variables

All right well it's time that we discussed variables do you remember from middle school or Elementary School

Play when you learn algebra you had to solve for what the value of x was X was some representation of a value well that's kind of

I know what a variable is in programming it's a container that stores a value the variable behaves as if it

Lower the value it contains there's two steps to creating a variable declaration and assignment to use a variable

We have to first declare it we'll use the latch keyword

Then a unique variable name

Like X

So what we have done is declaration each variable name needs to be unique if I

If I were to declare another variable named X

We would run into an error a syntax error identifier X has already been declared so your variable names

Need to be unique I can declare two variables X and Y and they both have different names

That is fine but they can't have the same name

The next step to creating a variable is to assign it a value once you declare your variable you don't need to declare it again

So I'm going to assign X to equal some number like 100

We can use this variable X and it will behave as if it was the value

Let me demonstrate it so if I was to cancel that log

X

Well then it's going to display 100

If I were to change this value to 123

Well ex is now 123

You can do both declaration and assignment together that would look something like this

Let x equal 123

This is both declaration and assignment if you're creating a program and you know what your values should be you can ass

Find them a value right away

Sometimes you may want to accept some user input

So then you might do assignment later in two steps

It's really up to you how you write your program

There's a few different data types in JavaScript

The first is number like 123 let's create a descriptive name for our variable like age

We will store at user's age

According to my analytics in YouTube the average age of my viewers is 25 so let's say that

At my age is 25

Then if I was to console.log

My age variable

It would behave as if it were the number 25

Let's create a few more variables

Another example of a number could be price

Let price equal 1099

Maybe it's $10.99 or some other unit of currency of your choosing

Then we will console.log price

1099

What about a GPA a grade point average

My grade point average is a solid 2.1 it's not great but C's get degrees

Console.log GPA

2.1

Using a template literal we can insert a variable using a placeholder within console.log I will

Use back ticks

Let's write a sentence

You are then to insert a variable use dollar sign curly braces

Play your variable name within the curly braces

Then we can continue our sentence

You are variable age years old

Let's create another sentence using console.log

The price is

Dollar sign curly braces

Price

The price is $10.99

I'm going to insert a dollar sign before our price

And that looks better

Feel free to choose some other unit of currency

Okay let's add a sentence to display our GPA

Console.log

Your GPA is colon space

We're inserting a variable we need dollar sign curly braces or displaying our GPA

Your GPA is 2.1

Now if you need to display the data type of a variable

You can use console.log

Then precede the variable with the type of keyword

What is the type

Of age

Age is a number type

Price is also a number type

Same thing with GPA

The real numbers

Let's go over a different data type

Let's go over strings

A string is a series of characters

Let's say we have a user's first name

To create a string you can either use double quotes or single quotes personally I like double quotes

Then you can type in some characters like first name

Let's say my first name is bro feel free to pick your own first name

I will display the type of my first name variable

And it says it's a string

A series of characters

Then I will display my name

Console.log

First name

Add it is bro

Or whatever your first name is whatever you put here

Let's include our variable within a template literal

Your name is at a placeholder

First name

Your name is bro

What are some other examples of a string

Maybe somebody's favorite food

Favorite

Food

My favorite food is pizza

Type in your favorite food

Console.log

You like

Add our placeholder

Favorite

Food

You like pizza

Maybe if I like something else like sushi

Well you like sushi

Another example of a string could be an email

Let email equals

Then type in your email

I'm just going to make one up

Bro at gmail.com

Cancel that log

Your email is

Email

Your email is bro at gmail.com let me make the G lowercase

Now an important thing with strings is that strings can contain numbers

After bro I'll add one two three

So a string is a series of characters

They can include numbers but we can't use these numbers for any sort of math

Strings have a different behavior from numbers numbers we can use in arithmetic expressions

Strings not so much

All right let's turn these lines into comments then I will discuss boolean's

Okay bullions are either true or false typically they're used as Flags in your program

Online equal true Boolean or either true or false is somebody online or

Or are they offline

This is the other true or false

I will display the type of my variable online

Cancel that log type of

Online

So online is a Boolean variable

Let's display our variable within a template literal

Type in whatever your first name is

Bro is online

Then I will insert a placeholder

Add my Boolean variable of online

Bro is online that is true if I were to change this to false

Bro is online is false

Boolean's are typically used as a sort of flag

So another example could be

For sale is something for sale or not let's say that we are selling

I don't know cars

Is this car for sale

I can set this to be true

Or false

Let's console.log

Is this car for sale

Boolean variable

For sale

Is this car for sale that is true

Another example let's say that somebody is enrolled in school

Like in college courses

We could say

Is student

Is somebody a student are they enrolled

This can be true or false

Cancel that log

Enrolled

Call Lynn space

Is student

Is the student enrolled in classes that is true

They're either true or false

Typically we don't use them as direct output like you see here

We usually use them with if statements to check something

Like if somebody is online do this if not do something else

Is a car for sale

If that's true then display the car if it's not then hide it

We'll have more practice with boolean's when we reach if statements

All right now what we're going to do is we will close out of Dev tools

Will display some variables within our web page

So let's delete everything we have

I'll create three variables

Full name

Equals

Type in your full name

Feel free to add a space between your first name and last name

What age type in your age

Add

Student

Equals if you're a student type true

If you're not in school type false

I am not in school anymore so I will type false we will go to our HTML file

Then add some HTML elements

I will add three paragraph elements

So that's one

Two three

I will give my first paragraph and ID of

P1

Then let's do the same with the other two paragraphs

Let's rename the second SP2

And the third as P3

So to change the text content of an HTML element

We're going to type

Document meaning the document of our web page

Then we will get

Are element by its ID

Get element by ID

Then within a set of parentheses within a set of quotes

We will select the ID that we need

Let's start with P1

Then add dot text content to change the text content

Then we will set the sequel to

A variable or a template literal

Let's begin with a variable so full name

Are P1 elements should display your full name

Let's do this with P2

I'm going to zoom out a little bit

P2 dot text content equals age

It says that I'm 25

And then P3

Let's display students or better yet

Is student let's change that

Is student

False I am not a student but you might be though that might be true

Then let's display our variables along with some text using a template literal

Let's copy our full name

Your name is at a placeholder place our variable name

Your name is bro code

Or whatever your name is

Let's cut our age variable

You are

Variable age

Years old

You are 25 years old

And then let's cut his student

Add a template literal

Let's say

Enrolled are you enrolled in school

Add a placeholder

Play Star variable

Enrolled

That is false I am not in school anymore

All right everybody so those are variables it's a container that stores a value the variable behaves as if it were

What's the value it contains there's a couple different basic data types you have strings which is a series of texts

Numbers and boolean's

There's more advanced data types but will cover that later and well those are variables in JavaScript