1 00:00:02,160 --> 00:00:04,840 I'm back in our main project here. 2 00:00:04,840 --> 00:00:09,090 So outside of this exercise to file back to this main index 3 00:00:09,090 --> 00:00:13,760 HTML file, which I again opened with live server. 4 00:00:13,760 --> 00:00:18,220 So did I see this demo from before again. 5 00:00:18,220 --> 00:00:22,830 Now we want to explore controlled structures and that of 6 00:00:22,830 --> 00:00:26,020 course brings up one very important question. 7 00:00:26,020 --> 00:00:31,010 What exactly are controlled structures in Java script? 8 00:00:31,010 --> 00:00:34,070 And basically in all programming languages, 9 00:00:34,070 --> 00:00:38,280 we have two main kinds of controlled structures because when 10 00:00:38,280 --> 00:00:40,800 we talk about control structures, 11 00:00:40,800 --> 00:00:45,250 we mean special JavaScript language features a special 12 00:00:45,250 --> 00:00:50,250 syntax that allow us as a developer to control under which 13 00:00:51,800 --> 00:00:56,800 conditions certain code is executed or how often some code 14 00:00:58,320 --> 00:01:01,900 is executed. And when it comes to controlling, 15 00:01:01,900 --> 00:01:04,540 whatever code is executed or not. 16 00:01:04,540 --> 00:01:06,840 So to the left part here then, 17 00:01:06,840 --> 00:01:10,922 we are talking about if statements as a language feature 18 00:01:10,922 --> 00:01:14,460 that allows us to do that on the right side. 19 00:01:14,460 --> 00:01:18,360 Here we are talking about loops that allow us to execute 20 00:01:18,360 --> 00:01:22,587 some code multiple times until some condition is met or 21 00:01:22,587 --> 00:01:24,510 anything like that. 22 00:01:24,510 --> 00:01:26,820 And of course, we're going to dive into both, 23 00:01:26,820 --> 00:01:29,950 but we are going to start with if statements, 24 00:01:29,950 --> 00:01:34,300 since data's also what will help us implement that feature 25 00:01:34,300 --> 00:01:38,130 that we changed the color of this span here, 26 00:01:38,130 --> 00:01:40,300 and the background color of this input. 27 00:01:40,300 --> 00:01:45,010 If we go below 10 characters of remaining characters now, 28 00:01:45,010 --> 00:01:48,100 in order to get started with if statements though, 29 00:01:48,100 --> 00:01:53,100 I'll add a new file, conditional code dot JS, 30 00:01:54,780 --> 00:01:59,220 and I'll import I'll add dis conditional code JS file 31 00:01:59,220 --> 00:02:04,220 instead of the demo JS file here in my index HTML file. 32 00:02:05,140 --> 00:02:09,070 So that this conditional code JS file will get executed. 33 00:02:09,070 --> 00:02:13,060 And here I want to show you the general syntax for writing 34 00:02:13,060 --> 00:02:14,453 conditional code. 35 00:02:15,730 --> 00:02:20,630 Let's say we have some code where I console log hello, 36 00:02:20,630 --> 00:02:24,190 so that we would see this in the developer console, 37 00:02:24,190 --> 00:02:29,190 but I only want to execute this if my name is max. 38 00:02:29,810 --> 00:02:34,736 So here I'll add a variable or a constant named my name and 39 00:02:34,736 --> 00:02:38,875 ill store of value of max in there. 40 00:02:38,875 --> 00:02:41,370 Now of course, for this example, 41 00:02:41,370 --> 00:02:45,870 the value will always be max because I'm not extracting that 42 00:02:45,870 --> 00:02:48,850 from some user input or anything like that. Instead, 43 00:02:48,850 --> 00:02:53,280 I hard-coded this here into my code, but let's again, 44 00:02:53,280 --> 00:02:57,140 assume that this is dynamic, that this is a value. 45 00:02:57,140 --> 00:03:01,510 We are fetching from some user and then case it's max, 46 00:03:01,510 --> 00:03:03,500 when I console log, hello. 47 00:03:03,500 --> 00:03:04,653 Otherwise I don't. 48 00:03:05,623 --> 00:03:07,220 To make that work, 49 00:03:07,220 --> 00:03:10,230 we need to write a so-called if statement. 50 00:03:10,230 --> 00:03:13,160 And we do that by using the if keyword, 51 00:03:13,160 --> 00:03:15,853 which is a reserved keyword in JavaScript. 52 00:03:17,147 --> 00:03:20,280 And then we add brackets parentheses, 53 00:03:20,280 --> 00:03:23,620 and we'll put something between those brackets soon. 54 00:03:23,620 --> 00:03:27,300 And then we add curly braces, opening and closing. 55 00:03:27,300 --> 00:03:29,653 So it looks a bit like a function, 56 00:03:30,576 --> 00:03:32,690 but of course we don't use the function keyword. 57 00:03:32,690 --> 00:03:36,670 And we also don't give this if statement a name instead, 58 00:03:36,670 --> 00:03:41,010 it's really just, if then does pair of parentheses, 59 00:03:41,010 --> 00:03:44,460 I do add a blank here. It's technically not required, 60 00:03:44,460 --> 00:03:48,480 but recommended for readability reasons and then another 61 00:03:48,480 --> 00:03:50,200 blank, which is not required, 62 00:03:50,200 --> 00:03:53,083 but makes it more readable and then curly braces. 63 00:03:54,110 --> 00:03:58,810 And then I'll hit enter to start a new line just as with 64 00:03:58,810 --> 00:04:02,570 functions. This new line is also not required, 65 00:04:02,570 --> 00:04:06,810 but adding a new line and in denting our code here by 66 00:04:06,810 --> 00:04:09,680 hitting that tap key on our keyboard, again, 67 00:04:09,680 --> 00:04:11,710 makes it more readable. And there for, 68 00:04:11,710 --> 00:04:16,060 we typically use this way of writing our control structure 69 00:04:16,060 --> 00:04:18,250 code as well. 70 00:04:18,250 --> 00:04:22,300 And then I'll cut to this console log statement and inserted 71 00:04:22,300 --> 00:04:25,943 here, indented between those curly braces. 72 00:04:27,240 --> 00:04:28,850 Now that's a if statement, 73 00:04:28,850 --> 00:04:31,943 but an if statement that won't work as it can also tell by 74 00:04:31,943 --> 00:04:33,803 these red squiggly lines here, 75 00:04:33,803 --> 00:04:37,519 which indicate that we have an error and the error is that 76 00:04:37,519 --> 00:04:41,250 an expression is expected, 77 00:04:41,250 --> 00:04:44,500 which basically means we need to put some code between those 78 00:04:44,500 --> 00:04:46,483 brackets, but which code?