Creating a Slide Show
In this lecture we continue exploring the world of functions as we complete creating our slide show. In the process we are going to create our first function parameter. This is going to be fun.
Video Transcript
00:00Ohh, la la la, ooh la la la la.
00:04Nah, just kidding.
00:05All right, so in the last lecture,
00:06you basically, why am I using my hands?
00:08I have no idea.
00:09I'm going crazy, I think.
00:10Okay, so in the last lecture,
00:13I'm gonna stop using my hands.
00:14In the last lecture you learned, well we learned,
00:18and we explored functions and we created this really cool
00:20kind of like, pfft, pfft, kind of like,
00:23animation of an image.
00:25We're gonna continue going through that path
00:27because I wanna create a cycle of animations
00:29we have four images. And in the process, we're going to explore a little bit more about variables,
00:34scopes, functions. So really, a lot of this is rehearsal, but things are getting more complicated.
00:39We're not really learning a lot of new things. But we're learning how to work with the things
00:44we know way better worked with basically with functions that had no parameters, we've seen how
00:54to call functions that have parameters, but we have not created one that has one yet. So let's
00:59change that. What I want to do next is I want to go to that swap image function, because right now,
01:06our swap image function is hard coded to change slide number two. But really, in reality,
01:13wouldn't be wonderful if we could have our function update automatically, and swap basically
01:19based on the slide that we're at, to move on to the next slide, no matter what slide is there
01:24currently. So to be able to do that, what I'm going to do is first, I'm going to create a variable.
01:30Now, I'm going to create the variable outside of the function area. And I'm going to put it just
01:35right above saying the word var, and I'll put here a counter. And I'm going to set the value
01:41to one, basically saying that my counter currently equals one. Now, each time my swap image is
02:03called, and by the way, I'm calling it outside of the function area, because I want this variable to
02:08exist and to be available to everything. This is basically a global function, a global variable.
02:15If I created the same variable, but I placed it instead of that inside of my function,
02:20what would that mean is that this variable will only exist inside of the scope of this function.
02:25In other words, once we're out of this function, this variable won't exist anymore. Furthermore,
02:31each time we call our function, it's going to reset and put the value up again to be one.
02:36So what we want is to have the value outside of the function. That way, inside of the function
02:41function itself, we could go to our counter and upgrade it if we want to. So we're going to look
02:47into how we upgrade it if we want to in a moment. But what I want to show you even before that
02:52is how do we put here a second variable, so I could put here index as our variable. And there
02:58you go. Now I set up that's how I added a variable into my function. Now that I have a variable
03:05defined in my function, I could say, okay, I want you to go right here, I'm going to take this
03:10string of our image where it's actually located at. Now I know that there's actually two images
03:15there. So I'm literally what I'm going to do is I'm going to basically break this text into two
03:21pieces and connect to it whatever index is sent in. Last but not least, what I need to do is
03:27I need to find where I call the function swap image. And if I search here up and I find the
03:33function swap image, I'm going to see that first of all, I'm calling swap image in a delayed call.
03:39And to be able to solve this problem for me to be able to send in another property,
03:45I'm going to have to put here a comma. And I'm going to put here something really weird,
03:49which we're going to talk about in a second, just open this weird bracket,
03:55the rectangular bracket opening and closing. And inside, I'm just going to put the value
03:59I want to send in this case, I want to send the value to. If I do that, and I save everything,
04:15and I go back into my browser and click on refresh, we should see the same animation flow,
04:20where we'll have our image, it's going to go down, and it's going to come up as a completely
04:25different image. Now again, don't worry about this weird syntax because it is incredibly weird.
04:31So what I want to do just to showcase how this works without this weird syntax here for a second,
04:36is I'm just going to comment this out. And I'm going to go ahead and call swap image,
04:41and just directly send to it slide to as soon as we load. And if I do that, and I run it again,
04:46we're going to see that our image is going to swap as soon as we start our application
04:50to a different image, or in that if we want to, we could also set it to three,
04:54just to see it in action. So I can go ahead, set it to my image three, and we'll see that
04:58we're going to start off our application with image three. But that's not really what we are
05:03planning for what we are attending for this image slide. The next thing that I want to do
05:08is now that I set this configuration, I really want to be able to update this value each time
05:13from 12345 and maybe even back to one each time. To make that happen, I'm going to have to move
05:20this function call. And I want to move it to a place where I could start creating something
05:24that's in programming called recursiveness. Now, what I literally want to do is I want to
05:42put my swap image after I animate out my image. So I'm going to go ahead and copy this,
05:49this line of code, and I'm going to cut it out. And I'm going to put it inside of animate image
05:53out. Now, when I put it inside of animate image out, notice we're going to have,
05:58we're going to have to change another something, because this is only going to be called after
06:03that delay after a three second delay. So we don't want to add another four seconds on top of it.
06:09In our case, we really only want to add another one second delay. Now this step enables me to be
06:15able to use this animate image out as a function that might be used to update the counter each
06:21time. So literally, what we want to do is basically, if we look at this, we have here a flow.
06:30And after we call the animate image out, the animate image out animates our image out,
06:35and then it swaps the image after one second. And once the swap is over, it calls to animate the
06:41image back in. Literally, the only thing left here is for me to call the animate image out again,
06:47from right here in a delayed call, after all these animations are complete. So if we see
06:53this animation will take one second. So let's say we want to add another delayed call. So I'm just
06:58going to copy the same delayed call structure. And I'm going to call my delayed call. But instead
07:04of calling image swap, I'm going to call animate image out. And instead of waiting one second,
07:09because our animation is going to take one second, I'm going to give it to sit there for
07:13an extra two seconds before we do anything else. So let's walk through this flow from the
07:18beginning. So the first thing we do is we're animating all of our items in which was animating
07:23our h2 and our paragraph. Next, we wait for a second and then we call the animate in image,
07:31which is going to take one second. Now, because we're now we have the animate image out after
07:38three seconds, we don't need this delayed call anymore. So I could delete this delayed call,
07:43it's not needed anymore. And now that I have my animated image in after one second, it'll be
07:49called, it's going to change the opacity of my image to one, it's going to make sure that my image
07:55bottom position is at zero pixels. And then it's going to three seconds later call the animate
08:00image out. Once animate image out is called, again, it's going to animate our image out of
08:06the screen 180 pixels minus in our bottom position. And then it's going to have a delayed call to swap
08:13image, sending the parameter to as the parameter. Now don't worry about that weird bracket, it's
08:21called an array, we're going to talk about those later on. But for now, you can just use them
08:26without knowing what they do. Alright, so we call this swap image. And when the swap image is
08:31called, it will come with an index. In this case, it's index number two. And then it's going to
08:37change the asset, change the image itself, and call animate image in. Now notice how this is
08:44recursive, this is going to continue on forever and never stop. The only problem we have right
08:49now is we're always calling number two. And that's exactly why we created this global variable
08:53that we're going to talk about immediately. But before we do that, I just want to show you
08:57and test out to see that everything is really working. So our copy will load in our image will
09:02load in, it should scroll down, switch an image, wait there for three seconds, scroll back down,
09:09come back up and go back up always back up as image number two. So that's the next step that we
09:15want to solve. So we're going to go right back in there. And we said we created this variable
09:19counter. And we said how critical it was that we keep it out here. And we don't put it inside of
09:24the function. Because if it was in the function, we wouldn't be able to refer to it in other
09:29functions. Beyond that, every time we would call the function, this variable would reset.
09:33So what I'm going to do just because you know, a convention in code is to put all our variables
09:38in one spot. And a good spot to put it usually is all the way in the top of our code, basically
09:43saying to the world announcing these are the variables, the global variables of our application.
09:49So now that I have my global variable, I'm going to first set it at zero. Now the reason I'm
09:54setting it initially or actually one is fine, because we're starting at one, right? So I'm fine
09:59with one. But the next step, what I'm going to do is I'm going to locate the area where I'm swapping
10:03the image. And before I swap the image, I'm going to basically come up right up right here
10:08before I call this. And first of all, I'm going to send that variable in instead of number two.
10:13And I'm going to go to my variable, and I'm going to set it to be equal that variable plus one.
10:18Now I'm going to have a problem in the end. And my problem, my main problem is going to be
10:22that at some point, this image is not going to exist because we only have four images 1234.
10:28So we really want to solve that problem. And before we solve that problem, let's first
10:33see it in action. So I'm going to save away. And I'm going to go back into my browser,
10:37click on refresh. And we're going to see now that first, we'll have image number one,
10:44image number two, image number three, image number four. And once we put up our next image,
10:54it's going to drop us a nice big mistake because it's not going to find that actual image no,
10:59no longer. So for us to solve that problem, what we could do is we could take this value. And we're
11:05going to use the mold, which we said we weren't really going to talk about it. But it's such a
11:09perfect position for it right now, we could ask for we could ask for the leftover of a division
11:15by by what number, if we have here the number one, mold, you have four, we would still get one.
11:24If we get the digit two mold, you have four, we would still get two because it's a leftover
11:29three would give us three, four would give us zero. So our problem right here is that if we
11:37set it to four, then we would have because we're going to get between 012 or three,
11:44those would be our values. So for us to solve this problem, we're going to have to make sure
11:49that we always have an extra plus one going on. So instead of setting our plus one right here,
11:56we can literally just go mold to our counter basically saying, Hey, if your value right now
12:02is four, then it's it's zero from here on. Because literally, if the value here is four,
12:08and we mold do it by four, and four divided by four leaves no leftover aka, this would be equal
12:15zero. So I would basically mold by four and then plus one, which basically means again,
12:21if my counter was zero, that's fine, it stays zero plus one, that would equal one next round,
12:27when it would come one mold for equals one plus one, that would be two perfect. So now
12:33two would work. Now two would come to mold for equals two plus one is three, it's going to run
12:38the third image for what now that it's three, now we're gonna go back up three mold of four plus
12:44one is four, perfect. Now it's equals four for run. Now when four comes back for mold of four equals
12:50zero. So we're going to reset the zero plus one. So now my counter could never be any other value
12:56between besides 123 and four, those are the only valid options to that my number now just
13:02because I use the mold. Now if I run my application, again, I click here on refresh, we'll see how
13:08without using any sophisticated code, all you have to do is control your capability of working plus
13:14minus divide, mold do and duplicate, and you could create really, really smart applications
13:20with a very limited amount of conditions, which is always a great thing. So there we go. Once we
13:26got to four, we're back to the first item. And that covers our topic of property and functions.
13:34In the next in the next segment, we're going to take that property one step further. And we're
13:39going to talk about properties that have default values. So we'll see you in the next lecture,
13:44when we discover them.