The 10 Days of JavaScript: Day 5 (Making Selections)

by birtanpublished on July 3, 2020

[Music]

hello everyone and welcome back to the

ten days of JavaScript here we are in

day number five and in this lesson we

are going to learn how to make decisions

in our code let's jump right into an

example so let's imagine that we own an

online strawberry store and we have a

rule that an order must contain at least

10 strawberries in order for a user to

place that order otherwise it's just not

worth our while to ship it so if a

visitor has added 10 or more

strawberries to their cart so let's say

let strawberry count equal 20 ok as long

as this variable that we just made up of

strawberry count is greater than 10 then

maybe we want to output a message on to

the web page that says congratulations

so we can use the web browsers document

object and it contains a method named

right so document dot right and we can

include a string of text in these

parentheses so I can just say congrats

and then if I take a look at the preview

area of code pen then we can see

congrats okay but on the other hand if

strawberry count is less than 10 we

don't want to say congrats in that case

we would want to say document dot write

and say sorry we do not ship orders that

small okay now down in the preview area

obviously we do not want to show both of

these messages we want to show either

one or the other depending on the value

of strawberry count so the question

becomes how can we make a decision in

our code so that our application can

handle either situation and act

accordingly well the answer is that we

can use something called an if statement

so check this out right above the

congrats line let's say if and then a

space and then

parentheses so if and then inside the

parentheses let's say strawberry count

is greater than nine right so that would

include ten and obviously any number

greater than ten and then right after

the closing parentheses let's open up

curly brackets inside the curly brackets

I like to drop down okay now on this new

line in between the curly brackets let's

cut and paste the congratz line so I'm

just gonna select this cut it paste it

right here okay now there's one more

step I want to include before I take a

break and explain how this code is

working so right after this closing

curly bracket right here let's say else

and then a new curly bracket pair and in

between these curly brackets let's drop

down and let's cut and paste our sorry

message into these curly brackets so I'm

just going to select this cut and paste

it okay so what's going on let's review

this code in detail it really almost

makes sense

in plain English we're saying if

strawberry count is greater than nine

then do this else or otherwise do this

so now down in the preview area we only

see the congrats message because our

strawberry count is clearly greater than

nine but if we change this value up here

to something that is not greater than

nine like maybe five for example then

down in the preview area we see the

sorry message and that's cool it means

that our tiny application is now

flexible it automatically adapts and

makes decisions on its own and that's

the heart and soul of programming

computer programming uses if statements

or similar conditional logic like this

everywhere for example on Facebook if

you are someone's friend then you can

see their entire profile and all of

their photos else or otherwise if you

are not their friend maybe you just see

a very limited version of their

profile okay now let's learn more about

how if statements work so for starters

you do not need to include the else area

the else is just a fallback insurance

plan right if this condition is not true

then the else will happen but you don't

have to have the else so we could delete

the word else and then it's curly

bracket pair like this and now down in

the preview area we see that if this

condition is not true then just

literally nothing happens

so the idea here is that the if

statement can stand on its own without

the else block okay the next thing I

want to cover is that this area inside

the parentheses is called the condition

a condition is going to boil down to a

value of either true or false if it's

true then obviously the code inside the

if curly brackets will run if it's false

then either nothing will happen or the

code inside your else block will run now

for the condition we are not limited to

only the greater than symbol or operator

but before we move on to learn about

other ways of comparing values let's

first analyze what's really going on

here so as you might have guessed the

greater than operator is going to

compare the value to its left and the

value to its right and then return

either a value of true or a value of

false now this whole idea of a true or

false value is a new concept to us so in

previous lessons we've learned that

there are different types of values in

JavaScript so down here just as an

example I could say let test value equal

and we've learned that one type of a

value is a number right you don't need

quotes around a number we learned that

another type of value is a string of

text right you wrap it in quotes we

learned that another type of value is an

object with curly brackets right so you

say species cap we learned that another

type of value is an array with square

brackets separated by commas right

like this so that's numbers strings of

text objects arrays and now I want to

introduce you to a new type of value

named Abilene Abilene value is either

set to literally the word true and it's

not wrapped in quotes if it was wrapped

in quotes that would just be a simple

string of text but you can literally

just say true or false okay so the idea

here is that up in our condition for the

if statement the greater than operator

is either going to return true or false

and that's a special type of value okay

and then the if statement knows what to

do with that true or false value okay so

now that we have a general idea of

what's going on let's take a look at

other ways of comparing values aside

from the greater than operator so

obviously there is also the less than

operator there is also the less than or

equal to operator as you might have

guessed there's the greater than or

equal to operator or if you want to see

if a value equals something in

particular you can say two equal signs

and now this would only return true if

our strawberry count was specifically

set to nine the key here is that a

single equal sign is how we can assign a

value right we are saying this should

equal this whereas double equal sign or

two equal signs in a row like this is

how we check for equality

okay another comparison operator is if

we say exclamation equal sign and this

will return true if the value is

anything but the number nine so if I

come up here and set the value to 20

obviously that's not nine so down here

we see the congrats message also it's

important to know that we do not even

need to use a comparison operator at all

so for example our condition could

literally just be the strawberry count

variable because in this context where

javascript is expecting a true or false

any number larger than zero will be

interpreted as true so right now we see

that this is evaluating to true because

we see the congrats message but up on

this first line of code if we changed

our variable to equal zero we see that

it evaluates to false so within this

context of everything getting

interpreted as either true or false zero

is false any other number is true

obviously if we spell out true we see

the congrats message or we could set

this to false also a completely empty

string of text will be interpreted as a

false value but a string of text with

any actual content in it is interpreted

as true okay at this point in the lesson

let's change gears a bit and I want to

stress the fact that this whole idea of

true or false values is not limited to

just an if statement or in other words

the if statement is not the only place

where a true or false value is useful so

right now I want to show you a new

example I'm going to completely erase

everything we have here and start fresh

for this next example let's imagine that

we want to output something on to the

webpage

many many times maybe one or two hundred

times so this is totally random but just

type this out with me if we say document

dot right and we say there are two

strawberries okay and then let's just

copy and paste this line copy and paste

it and imagine that you wanted to count

so you'd say there are two strawberries

there are three there are four there are

five there are six and imagine you

wanted to count like this all the way up

to 500 well copying and pasting would be

incredibly repetitive and it's really

just sloppy lazy code but luckily

computers are really good at repetitive

tasks so right now I want to show you

how we can make the computer do all of

that hard work for us and the key here

is leveraging a true or false value so

check this out let's begin with two

forward slashes to begin a comment

I will explain why we are including this

comment in just a moment but right after

that let's say Y all and then a pair of

parentheses and then after that a pair

of curly brackets now within the wild

parentheses we include a condition

obviously that will return true or false

now as long as it evaluates to true

whatever lives within the curly brackets

is going to happen again and then it's

going to check the true or false nature

of our condition again and then repeat

the curly brackets again and again and

again until finally the condition

evaluates to false it's a bit hard to

understand until you actually see it in

action so let's try this out on a new

line up at the very very top let's say

let strawberry count equal to okay now

in the condition for our while loop

within these parentheses let's say while

strawberry count is less than 200 then

within the curly brackets for the while

loop let's say document dot right and

let's say there are and then instead of

hard-coding and number ourselves right

here like three or four or five let's

end the quotes and say plus strawberry

count so pull in the variable and then

let's finish out the sentence so there

are blank strawberries okay now right

after this line but still within the

while loop curly brackets let's say

strawberry count should equal strawberry

count plus one I will explain this line

of code in just a minute but for now

let's try removing the two forward

slashes on this line of code to

basically remove the comment okay down

in the preview area you can see that the

computer automatically counted all the

way to 199 if we wanted it to actually

include 200 we could change this to less

than or equal to okay then down in the

preview we see it counted all the way to

200 so what's going on how is this

working

basically a while loop is just going to

keep repeating its body it's area within

the curly brackets here until the

condition is no longer true so we know

that strawberry count starts out with a

value of two and then each time the

while loop runs remember on this line of

code we are basically incrementing

strawberry count by one so we're saying

that variable should equal itself plus

one now a neat little trick there is a

more succinct or cleaner way of writing

the same line of code but before we

improve or modify this line I want to be

sure to comment out the beginning of our

while loop once again so just two

forward slashes here and I'm only doing

this because code pen automatically

reruns and retests your code after every

keystroke and when you're working with a

while loop you want to be careful to not

try and execute an infinite loop because

if you think about it without this line

of code that I'm highlighting right now

if we never incremented the value of

strawberry count then the while loop

would just run forever because it would

never have a value greater than 200 and

computers don't like it when you create

an infinite loop they tend to freeze up

or lock up anyways once you've commented

out the beginning of the while loop we

can improve this line of code by simply

saying strawberry count plus plus when

we include two plus symbols at the end

of a variable like this it will

increment or add one to that value okay

now let's test this out let's get rid of

the comment or the two slashes in front

of wile and we see that it works

perfectly still and just a small update

why don't we change it so that each

sentence sits on its own line

so after strawberries period I'm just

going to include a br tag cool and there

we see it the computer counts all the

way up to 200 for us and computers are

really good at repetitive tasks like

this you could change this to 500 and

it's going to count all the way up for

you anyways the takeaway idea here is

that there are many places in JavaScript

where you can leverage a true or false

value to circle

back to the idea of this lesson the

while loop is going to keep repeating

itself again and again and again as long

as this value is true or to put it into

common English it's basically saying

while this is true do this now that's

going to bring this lesson to a close

but before we move on to the next lesson

I do want to let you know that I am

fully aware that these first four or

five lessons have been a bit disjointed

and I know it can be challenging to stay

engaged because we haven't yet tried to

test our knowledge by building some sort

of real-world application right the fun

level has not been too high yet but

trust me you are doing yourself a huge

favor by learning this core of the

language first once all of these

different symbols and parentheses and

equal signs

once this basic syntax becomes even a

little bit familiar to you you will have

already won 90% of the battle of

learning to be a JavaScript developer

because javascript is JavaScript it

doesn't matter if we are writing it in

the web browser or if we are writing it

from node to set up a server or we are

writing it from MongoDB to work with a

database if you can speak this code if

you can speak this language itself then

learning the environmental jargon of the

browser or note or MongoDB is a piece of

cake now again I know the fun level in

the course so far has been relatively

low and I know that so many other

courses take the opposite approach they

have you start building a web

application immediately but you're

really just copying what the instructor

is typing because things are moving so

fast and you haven't yet had a chance to

get familiar with the syntax right the

parentheses the curly brackets the dots

the equal signs the quotes so on and so

forth so long story short I know without

a doubt that this is the most boring and

tedious part of the entire full stack

course but consider this first chapter

the metaphorical act of eating your

broccoli right it's not the tastiest but

it's really good for you in the long run

so for many of you I know it feels like

we're moving very slowly don't worry the

speed and tempo of this course is going

to pick up dramatically as we move on

but in this first introductory chapter

let's just keep eating our broccoli for

a few more lessons right we are already

done with day five out of ten and once

we finish the ten days of JavaScript we

will have a rock solid foundation and a

basic understanding of the language

itself and then from there we can get on

to the fun stuff and actually start

building applications trust me there is

a method to this madness now in our very

next lesson we are going to learn more

about functions as we answer the

question what is a higher-order function

should be a lot of fun let's keep things

rolling and I will see you in the next

lesson the ten days of JavaScript is the

first chapter from my upcoming premium

course full stack JavaScript from

scratch I'm making these first 10 or 11

videos freely available on YouTube and

so for the next 10 days I'm going to

upload one new video each day so stay

tuned or if you're watching this in the

future all the lessons are up so feel

free to binge watch the full premium

course is not available just yet but if

you subscribe to this channel you'll be

notified as soon as it's out or you're

watching this video in the future it's

already available enjoy

you

[Music]

Related Videos

Be the first to comment “The 10 Days of JavaScript: Day 5 (Making Selections)”

Your email address will not be published.

There are no comments yet.