I'm back in our main project here.
So outside of this exercise to file back to this main index
HTML file, which I again opened with live server.
So did I see this demo from before again.
Now we want to explore controlled structures and that of
course brings up one very important question.
What exactly are controlled structures in Java script?
And basically in all programming languages,
we have two main kinds of controlled structures because when
we talk about control structures,
we mean special JavaScript language features a special
syntax that allow us as a developer to control under which
conditions certain code is executed or how often some code
is executed. And when it comes to controlling,
whatever code is executed or not.
So to the left part here then,
we are talking about if statements as a language feature
that allows us to do that on the right side.
Here we are talking about loops that allow us to execute
some code multiple times until some condition is met or
anything like that.
And of course, we're going to dive into both,
but we are going to start with if statements,
since data's also what will help us implement that feature
that we changed the color of this span here,
and the background color of this input.
If we go below 10 characters of remaining characters now,
in order to get started with if statements though,
I'll add a new file, conditional code dot JS,
and I'll import I'll add dis conditional code JS file
instead of the demo JS file here in my index HTML file.
So that this conditional code JS file will get executed.
And here I want to show you the general syntax for writing
conditional code.
Let's say we have some code where I console log hello,
so that we would see this in the developer console,
but I only want to execute this if my name is max.
So here I'll add a variable or a constant named my name and
ill store of value of max in there.
Now of course, for this example,
the value will always be max because I'm not extracting that
from some user input or anything like that. Instead,
I hard-coded this here into my code, but let's again,
assume that this is dynamic, that this is a value.
We are fetching from some user and then case it's max,
when I console log, hello.
Otherwise I don't.
To make that work,
we need to write a so-called if statement.
And we do that by using the if keyword,
which is a reserved keyword in JavaScript.
And then we add brackets parentheses,
and we'll put something between those brackets soon.
And then we add curly braces, opening and closing.
So it looks a bit like a function,
but of course we don't use the function keyword.
And we also don't give this if statement a name instead,
it's really just, if then does pair of parentheses,
I do add a blank here. It's technically not required,
but recommended for readability reasons and then another
blank, which is not required,
but makes it more readable and then curly braces.
And then I'll hit enter to start a new line just as with
functions. This new line is also not required,
but adding a new line and in denting our code here by
hitting that tap key on our keyboard, again,
makes it more readable. And there for,
we typically use this way of writing our control structure
code as well.
And then I'll cut to this console log statement and inserted
here, indented between those curly braces.
Now that's a if statement,
but an if statement that won't work as it can also tell by
these red squiggly lines here,
which indicate that we have an error and the error is that
an expression is expected,
which basically means we need to put some code between those
brackets, but which code?