02Geek HTML5 and JavaScript, TypeScript, React, Flash, ActionScript online School
Previous VideoNext Video

What Is A Loop?

A loop is a series of commands that will continue to repeat over and over again until a condition is met. Is that all a loop is good for? Not at all but it is nice not needing to repeat something over and over, loops are a really powerful tool that enables us to cut down our code drastically and if we use it smartly can even improve the readability and overall lightness of our application but alas as every good thing there are many easy ways to fall into using loops for the wrong reasons. Lets start with understanding what loops are and then lets see how we can use them to improve our code.

Video Transcript

00:00What are loops? So when we think about loops or before you even go into
00:05implementing loops let's understand why would we want to use loops. And a loop is
00:11basically in programming in the programming world it's a way to repeat
00:15something without retyping it. Now there's a few different usages for loops and
00:20we're going to see different types of implementations and what that means we
00:23want to repeat an action. But basically when when I'm saying I want to repeat
00:27an action it's as if for example I want to add this what is the loop multiple
00:32times maybe add a different variation to it. But I don't want to retype it over
00:37and over and over because that would be a waste of time and code. And for example if
00:42I would just click now on this example you'll see as soon as I click on it it's
00:46gonna add what is a loop 20 times onto the stage in different colors and
00:51different sizes. And if I click on any other item it would do the exact same
00:55thing. So using loops I was able to also add this functionality and also add all
01:01this type of behavior. Now in this video we're not going to dig too deep into the
01:06syntax because we're going to look and dig deep into the different variations
01:09of different types of loops that exist and also different type of usages that
01:14we could use with loops. But before we end this video I do want to go through
01:19that source code quickly and just as a highlight see how this this source code
01:25is working. So if you look at the movie clip that's on the stage right now you
01:29could actually find it in the library. And in the library you'll see that there
01:33is a linkage and that linkage enables us to duplicate that movie clip. And the
01:38name of the movie clip for the linkage is actually a class which is called L
01:42Loop Sample lowercase L for the first L. So if we go into our source code and
01:48I'm just going to click over to my class and get into it and let me just make the
01:54screen bigger. Oops I didn't mean to do that. And here we go. So first of all
01:59we'll see that as soon as our application begins in our constructor
02:02which is where we put all our code so far until this point we see that I'm
02:06actually adding a click event and we're going to look into events and we
02:10actually have videos on the topic of what are events. But basically in our
02:14scenario what's actually happening as soon as the user clicks on our loops
02:18sample that is on the stage and it actually has that name. And to see that you
02:22could click on that item. And again if we go into our properties after we
02:27clicked on it we'll see that the name of our instance is Loop Sample. Thus when
02:32I'm calling loop sample and I'm telling it to call that click event it
02:37will call the on click when a click happens. We're going to dig much deeper
02:40into that but our focus right now is loops. Now in the click event we're
02:44going to see actually our loop and we see here a for loop and we're going to
02:47dig into that syntax later but just just for now let's agree with me that
02:54or let's go into the assumption that basically we have an I value which
02:57starts at zero and until that I value is equal to 20 it will continue cycling
03:02through this loop whatever is between the open bracket and the close bracket.
03:07Thus it's going to run through 20 times and it's going to add a sample 20
03:12times. Now in our private function at sample that's where all the logic that
03:17is creating that various different colors. So first of all I'm adding that
03:21item to the stage and then I'm modifying a few of its properties such as
03:25its x position y position its scale and I'm giving it the random values such as
03:31the stage width times a random number between 0 and 1 which will give us a
03:36random number of the width of the stage from 0 to the width or from 0 to
03:40the height for the y and same thing we're using a random number times 2 to
03:45scale our value between 0 and 2. We see that I'm also adding here a tint which
03:51I'm basically changing the color of our movie clip and again I'm using that
03:54math random and you can see how many times you could use it to create all
03:58these random variations. So even though we're calling add sample the same
04:02exact function multiple times every time it's called it's creating something a
04:07little bit different and again I'm adding that click event. So although some
04:13of this information not might not be crystal clear but all that's really
04:16important for our example right now and for this course is that the concept of a
04:21for loop is starting to become logical and a for loop basically means in our
04:27scenario that we're going to call this function 20 times because our for
04:31loop is telling us to call it 20 times. Now another note and although so far
04:36we've always put all of our code inside of our constructor and we still could
04:40have done that we could have just created a function without the word
04:43private in both and just put them directly into our main function
04:50but I didn't want to do that because I wanted to you know take us a step
04:53closer to building an object oriented programming and what I'm basically doing
04:58here all these functions instead of them to be instead of these functions
05:02belonging to the main function they belong to the main wrapper which is our
05:08class. So our function is available and viewable for ever to anything that's
05:14inside of these brackets okay now we're going to look into the different
05:18variations and details of private and other type of stuff in future courses
05:22but for now all you really want to know is really just what's related to that
05:26for loop and you could still if you want still code with your all your
05:30functions inside of our main constructor until we get into digging and
05:34understanding what are these structures but for now if it's not too far in just
05:39do that because we're getting closer to that point we're going to start
05:43building and really you know we're very close to the end of the of the action
05:48script basics of the coding basics where we're going to start digging into that
05:51world of object oriented programming. So now that we know what loops are at
05:59least in theory let's start looking into how we implement those loops and
06:03what and look deeper into the syntax of the loop.

Ready to Level Up Your Skills?

Join thousands of learners on 02GEEK and start your journey to becoming a coding expert today!

Enroll Now for Free!