Our third variable: Boolean Flags
So far we've met two primitive variables: Number & String. In this lecture we're going to meet the Boolean data type. This variable is the last primitive JavaScript data type.
Primitive variables are the basic building blocks of every programming language. Every programming language has different building blocks. The core building blocks of JavaScript are numbers strings and Boolean variables.
A Boolean variable is the most basic variable type as it can contain only two possible values. The values a Boolean variable can contain are true or false. A common name to a Boolean variable is a flag because it is a fork in the road - it's a split decision between true or false.
Video Transcript
00:00So far we've seen numbers and we've seen strings, but there's one more primitive variable
00:06And we'll talk about primitives later on that we need to cover and that's boolean
00:09So how about we get started and see what that is. Let's jump right in
00:13At that last variable we have left to create
00:17In this chapter, so I'm gonna go ahead to the beginning again
00:20And I want to talk about the next last type of variable which is called a boolean and for that
00:26For that I'm gonna set the first character as B
00:50And then I'm gonna call this variable customize
00:56B custom
00:57The idea behind be custom is to ask the user
01:00Do you want to have a customized experience or do you want to skip all these customization questions?
01:07So to be able to do that
01:08I'm just gonna set here a value and I'm gonna use a question and the question will be a confirm box
01:16con
01:17for con firm
01:20The confirm box and I'm gonna ask a question. Do you want a custom?
01:29experience
01:30You want a custom view custom animation? How about that? Do you want a custom animation question mark?
01:37And I'm gonna set that value and I wanted before I even do anything
01:42What I'm gonna do is I'm gonna trace out the actual value that comes back using the console
01:48Just like we did in line 11 here
01:50I'm just gonna copy here in line 11 and again, we'll talk about what these functions are but literally what this does
01:57What this literally does is it sends whatever we put inside here to the console so we could see it
02:02So I'm just gonna copy the variable and send it into our logging system
02:06If I save ahead and go back into my page and click on refresh
02:11We're gonna see do we want a custom animation? We'll have a question here
02:14Yes, or no, if we set okay to be true, then we'll see that we have the value true coming back
02:20And if I just skip this and refresh again, and this time around say cancel
02:25We'll see that we won't get that true value come back instead of that. We're gonna get a false
02:30So what I want to do with this and by the way, the values that are coming back are not strings
02:36It is not the value of true inside of a string the values that are coming back are or true
02:44or false and
02:46If it's true, that means the user accepted it or the flag is up if it's false
02:51That means it is not and because we have that the next step is really what we want to do is we want to create here
02:57A custom experience based on if the user wants a custom experience or not. So let's see
03:04How could we create that? So what I'm gonna do is I'm gonna create something that's called an if statement
03:09When you create an if statement, we're gonna open and close it and here is gonna be the condition
03:14and then we're gonna open a curly bracket close a curly bracket the idea behind it is we're asking if
03:22Something happened and only if something specific happened then do something if not don't do anything
03:28Now in our case
03:30What we want to do is only if these conditions are matched then we want to set these questions
03:35So to be able to do that, we want to make sure that we first have these variables set no matter what?
03:42So we're gonna go ahead and move this definition of the variable right above here
03:46But we want to move the prompt messaging into the condition
03:51Basically saying it. Hey these variables will exist no matter what by default
03:56I'm gonna set my value of name to be Ringo for animation time same thing
04:00I'm not redefining it, but I'm only asking for the prompt window if
04:06The user agrees for me to do that
04:08So literally what I'm doing here is I'm saying hey by default
04:12Set the variable name to be of my name to be Ringo my animation time to be one second
04:18Now if the user had agreed into our condition, which we have to set the condition right now
04:24only then ask them for their name and the amount of time they want to animate and
04:29Literally all that's left for me to do is to take that value of be custom and set it right inside here
04:35Now why is it so simple because the values that come back are or true or false?
04:41So if I'd said here if if the value came back is true
04:45So I'm asking if true if true means it is true and if false means it's not
04:50Literally this code that is between the opening curly brackets the code with closing curly bracket will only
04:57Execute if the value be custom equals true
05:00And in our case it really depends on what the end user answered to the confirm box
05:06So if I click on save here, I'm just gonna go and see it and then we'll talk about it just one more time
05:10We'll see I'll have your question. Do I want a custom animation if I say no if I click on cancel
05:17It will automatically animate my elements without asking me anything further
05:22Well, if I click on refresh again, and I asked do you want to create a custom?
05:26Do you want a custom animation and I click on?
05:29Okay, now it's gonna start asking me to input my personal information. So in this case, I'm gonna say yes for I'm gonna call me Ben
05:36I'm gonna submit animation time to be 5 and then all these custom animations will happen
05:41But they will only happen if the user agreed or asked for it. Now. This is one example of using Boolean values
05:49So I just want to walk through you this one more time really quickly
05:52So and just really really highlight doesn't show this in action
05:56I'm just gonna comment out my confirm box and automatically send true here
06:00So I'm automatically no matter what I'm customizing if I do that and I said the value to be true
06:06Let's see what happens in line 18. I set my s name to be Ringo in
06:11Line 20 I set my end anim time to be one second
06:16But in line 21 because it is true
06:19I'm automatically entering this zone and now I'm prompted to change both my s name and my animation time
06:26So if you run this one more time really quickly
06:29We'll see that we automatically move into what is my name and I could type here just one for my name
06:34Let's say and two for the animation
06:36You'll see that my name is one learning is better is better and my animation took in total six seconds or eight seconds
06:42That was two for eight
06:45So there you go
06:46That was the true and I could also set it manually to be false now these type of
06:51Actions are called Boolean flags. So you could set a Boolean flag
06:54For example, if you have some specific customizations that depend on what the user did what the user didn't do
07:00We don't have to use a confirm box
07:02But we're gonna see all these booleans and by the way, we're gonna see all these variables in action
07:08As we progress into other things and we start animating things and we need to use these
07:13Elements these flags to create different things or different results for us
07:17But in our case, I'm just gonna leave the confirm box the way it was to summarize our experience
07:22And that's it. That was a boolean variable
07:25Now what I want you to do is try to come up with your own kind of customization
07:30Try to figure out maybe a few different questions and use an if statement to change the definitions
07:36So for example, how about create two questions one will be a question about a name
07:42Do you want to customize your name and another question might be about do you want to customize the animations?
07:48Obviously in a real world scenario, you wouldn't be using all these prompts
07:52But it is a fantastic way to test out and and and check to see if you understand what a boolean flag is and how
07:59To work with it. So if you're capable of creating a variable and then defining an if statement
08:04That's really all you need to get out of this this lesson because we're going to see the if statement again in a later
08:10Chapter and see it in action and much more complicated scenarios
08:14So that's it. We're are done with new topics for this chapter in the next few
08:20Lectures, we're gonna recap all the things we talked about really quickly before we move on to our next chapter