Turning our slideshow to an OOP one
In our last lesson we created a slideshow. Although the slideshow was easy to create and incredibly helpful it lacks in a few departments. For one, the slideshow is not reusable. Secondly, it's cluttering our workspace. In this lesson we'll attempt to solve both problems by incorporating some OOP concepts. By the end of this lesson we will have a similar slideshow only one that is an object.
Video Transcript
00:00Alright, this lesson is a little bit harder, but don't worry, we're not going deep into
00:05the world of object-oriented programming, although I would love to.
00:08I thought it'd make sense to separate that and we might make a course with that separately,
00:11although we do have one already up there on our site, we want to refresh it and make
00:16it over again.
00:18But with that said, in this course right now, in this lesson right now, what we're
00:22going to do is we're going to see how to create the same slideshow, only using objects.
00:28Now we're not going to do everything 100% object-oriented programming because we don't
00:32want to make this complicated, this title, we want to keep it into the world of animations.
00:37So we'll just look at how do we create an object, how to work with it.
00:40It's going to be basically what we did in the last lesson, only through an object.
00:44We're going to learn quite a lot of new things in this lesson, so if you feel like you need
00:47a rehearsal on this, do ask stuff in the comment section, and even more so, watch
00:53this video probably more than once, when you end this lesson, you feel that it's
00:56not 100% sitting there, and practice, practice, practice, let's get to it as well.
01:01So what we're going to do right now is I'm going to just comment out this code that we've
01:05created in our last lesson, and I want to teach you something, and if you know it already,
01:10then awesome.
01:11If you don't, then it'll be even more awesome.
01:15So I want to show you how do you create objects in JavaScript.
01:19It's really, really easy.
01:20The way you create objects in JavaScript is by creating functions, literally.
01:26So what I want to do next is I'm going to create a function, and in that function, what
01:30I want to do is I want to give it a name.
01:32Now, I want to give it a unique name, so it'll be very easy for me to recognize, and I would
01:36love to put a zero to geek as my surname, but I can't do that because you're not allowed
01:41to start with zero, so I'll do O2G.
01:44That's going to be my acronym, making sure that if I put this up, and I'm working with
01:48other libraries, the probability of any other library starting with O2G is basically
01:55non-existent.
01:56So now that I have my O2G, I could maybe put here an underscore if I wanted to really separate
02:00it and make it clear or not, doesn't really matter.
02:03So O2G, next step is I want to give a name for my element, so I'm going to call this
02:06slideshow.
02:10So here we go.
02:11We just created a new object.
02:12That's all we have to do to create an object.
02:15Now, we were talking about this a few times, and that's really the heart of object-oriented
02:20programming is the keyword this, and with this, we could approach that function and
02:25make it into more than just a function.
02:27So I just want to show you that really quickly.
02:29Just for the sake, I'm going to type here this, and I'm going to type here name, and
02:33I'm going to call this slide.
02:35Oh, you know what?
02:37Let me call this O2Geekslide.
02:39All right, so that's going to be my name, and let's give it also a version, and the
02:45version is going to be 1.00, or, you know, let's do it like a lot of programmers like
02:50doing 001.
02:51It's like so early, it's not even public.
02:54All right.
02:55So that's our 001 version.
02:58Literally all I have to do to create that object and then access it is I'll create
03:02your variable called slideshow, slide show, SS for slide show or slide, and I'll create
03:08your new 02GSlideShow.
03:12Now what that's going to do is just like when you call a new object, it's literally
03:16going to create that object, and it's going to run that function that now is called
03:20a constructor, and now that we have a constructor, it's going to go ahead and
03:24assign those values and get them into our slide.
03:27So literally if I just go to my console and log, I can go to my slide and say, hey,
03:31what's your version?
03:34And that value is going to cross over and go into that object.
03:38Now we're not going to talk too much about object-oriented programming because
03:40I'm going to dedicate a whole course just for that.
03:43We already have one course, but we're planning on creating another one about
03:47object-oriented programming, and that's all of the object-oriented programming.
03:50We're going to be talking about that and the word this, which we're going to
03:53go over quite a lot of times because we want to make sure that our code is
03:56organized, and that's it about that.
03:59So if I save this and I go back to my browser and I click on refresh, we're
04:03going to see now that we're going to get that value coming through, and we know
04:06now that we have ourselves a real object.
04:09So what I'm going to do from now on is literally just put all my code that
04:13relates to 02GSlideshow inside of my 02GSlideshow function.
04:19So first of all, I want to approach who is the target of our animation.
04:25So we're going to put here some sort of a value, let's say target or buttons.
04:35And the next property that we're probably going to need is the actual stage.
04:40So we'll call this canvas maybe.
04:43All right, so that's going to be our container.
04:50That's a bigger word.
04:51Let's just container.
04:54All right, container.
04:56All right, so next step is just literally what I'm going to do is I'm just going
04:59to copy all this code from here really quickly, put it inside of my function.
05:05There we go.
05:06And I'll just make sure that I'm using not hard coded values, but instead of
05:10that, I'm going to pass through that buttons to make sure that I could
05:14assign the values to my buttons.
05:16And the next will be our container.
05:18I'll make sure that I'm approaching my container.
05:20That way I could dynamically change that value if I ever want to approach
05:24something else as well.
05:26Now, the next thing that I want to adjust is that hard coded value that we have
05:32right here.
05:33And we're going to do that in our next lesson.
05:37And what or yeah, yep, yep, yep.
05:40Or we could even do it in this lesson.
05:42So what we really want to do is we want to go to that container.
05:45And let me just trace it out right here.
05:47Console log.
05:50And we want to actually go to one of the slides.
05:53So I could literally just go to any slide here and just go ahead and do that
06:00really quickly.
06:02And I'll ask for its width.
06:04And let's see what value do we get back.
06:07I think it was a function.
06:08Let me run it.
06:08And if it doesn't work, then we'll run it as a function.
06:11So let's do that really quickly.
06:13And we could see that we have your function coming back.
06:16And yeah, that was a function.
06:17We were supposed to literally call it as a function.
06:20So if I save that really quickly again, run it one more time.
06:24We should be now getting the actual value, which is 950.
06:28Perfect.
06:29So all we have to do is just take this value.
06:31And obviously, this is not going to work for our left right here,
06:33because we actually ended up subtracting 960.
06:38But what we could do is basically set our value.
06:41So I'm going to set the value this width.
06:45And I'll set my width to be basically the value
06:47that I got back from that slide.
06:49Or really, let's check what is the width of our container.
06:58Now, the width of our container is going to be really, really big.
07:00So we probably would want to pass that in as a parameter.
07:04So we might set actually our step size as a parameter.
07:10And then we could just put here the just step size.
07:14And then we'll put here the value.
07:15And look how we're doing this really, really dynamically.
07:18And I'll just put this value right here.
07:22And now all that I really need to do is actually
07:25send these values when I'm defining my slideshow.
07:29All right, so step number one is
07:31we want to send in our buttons.
07:33That'll be number one.
07:34So we want to send that in.
07:38Step number two, we want to send our container.
07:40Okay, this is our container.
07:42Step number three is we want to send our step size.
07:46So we could literally just go ahead and just,
07:48or we could take the value that we have here dynamically,
07:52or hard code it and say, hey, we want 950 here.
07:55And that's completely fine because we could always go
07:57when we're creating a new one, define another width,
07:59or in our case, we need it to be 960.
08:01So if I delete this console log extra information,
08:05now that I've set the step size,
08:08really all that's left for me to do
08:10is to approach back into my object and define my minus 960.
08:15Now you're going to see that you're going to have a problem.
08:17And the problem is going to be is when we try to,
08:19if I just try here to console log this dot step size,
08:26there won't be any access to that variable anymore
08:29because there is a new list when you're inside of the scope of this function.
08:34So if I go ahead and I click on refresh,
08:35we're going to see that when I roll over here,
08:38the value is going to come back as undefined.
08:41So I have here a few options.
08:42If I go ahead and instead of that, I say, I don't even put the this.
08:47What would happen if I save this and I go back and I refresh,
08:50what would happen is we would get the value.
08:52And the reason why we would get the value is incredibly simple.
08:56The reason is, is not because we're approaching the,
08:58this dot step size, we're actually not approaching it.
09:01What we're approaching is we're approaching the global variable here
09:05because this function lives inside of this function.
09:09So whenever it can't find the step size inside of this function,
09:12it doesn't exist.
09:13Then it moves up one layer up into the larger area.
09:17Now, if you have variables that don't have direct access
09:20in the variables, such as Ver,
09:22if I wanted to have access to our version,
09:24I wouldn't be, I wouldn't be able to just type your Ver.
09:27If I would type your Ver and I go and go inside,
09:30we would get undefined because there is no variable called Ver.
09:34There was never one defined that Ver belongs to the this.
09:39So there was no global function scope variable
09:42that would called, was called Ver.
09:44Now, one way around this is you create a variable called,
09:47let's say that and you define it as this.
09:52Now what happens here is you're creating another
09:54and you could call it whatever you want.
09:55If that sounds confusing to you, which I'm sure it could.
09:59Once you have your variable that once you have access
10:01to that object also within internal methods
10:05that have different scope,
10:07you could literally just go and type that.Ver,
10:10which would give you access to that original Ver
10:12of your this of your original object.
10:15So I'm going to say this again.
10:17The this when it's inside of our constructor
10:20is the actual object that we're going to be working with.
10:23But when we're in jQuery and with other items,
10:25you're going to see this quite often as you program.
10:28This, the this inside of this anonymous function
10:31belongs to the mouse over to whatever it was.
10:33Remember, it was the actual HTML button itself
10:37that was clicked on.
10:38So for us to get remain having access to the objects
10:41because we don't have a name to the object,
10:43we need to refer it in some to suit into it in some way.
10:47And the way we could do that is by defining a variable
10:49inside of our objects function,
10:52which means that this variable will be available
10:54to every single thing that lives inside of this function,
10:56including this method.
10:59And then we have access also to things
11:01that are not globally scoped like these variables that are,
11:04and you have access also to the things that are not.
11:06So if we run this one more time,
11:07you'll be able to see that now when we click on refresh,
11:10we're going to have access to that variable as well.
11:13Perfect.
11:13So now that we sorted that out,
11:15all that's left for us to do is actually use that step size.
11:18And I'm just going to go ahead and I'm going to comment
11:21that out and comment that out.
11:23We're just going to approach step size directly
11:25because we have access to it.
11:27And I'm just going to go ahead right in here
11:29and find where that was.
11:31And that was exactly here.
11:33And we could, and that's it.
11:34We just set our step size right now.
11:36Our direction is always negative.
11:38We could always say, hey, you know, you could,
11:41you could always add here basically a direction variable
11:45and make it a little bit smarter.
11:46So we could have your own direction,
11:49but I don't know, I don't feel like doing it.
11:51But how about you could do that as homework
11:53if you want to create a directional logic.
11:55So then you can decide if the steps go left or right.
11:59In case you create a slideshow where your elements
12:01are going to be living on the right side
12:03and not on the left side.
12:05But that's it.
12:05If we save this and we run our application again,
12:07we should be getting our application
12:09and it should be working
12:10and everything should be configured exactly
12:12the way we had it before.
12:14But now we have object oriented object
12:17that is going to make it easier for us
12:19to re leverage this and use this and grow this
12:21without needing to worry about a few things.
12:24One is we're not going to make our on ready function
12:26incredibly huge and not very legible.
12:30And beyond that, we're also going to be able to grow this
12:33and maybe reuse this.
12:34So later on when we're creating slideshows
12:36on other areas of our site or other sites,
12:39we can then grab our slideshow that we created.
12:42We might need to tweak it sometimes
12:43and improve its features and add features to it.
12:46But in general, we'll be able to easily just grab everything
12:49inside of this function.
12:51And we could then start using this new object
12:53that we've created.
12:54All right.
12:55So that's it for this lesson.
12:57In the next lesson, we're going to be
12:58we're going to go back into learning new things
13:00about working in between light in general.
13:04So we're going back into the world of learning new things
13:08in between libraries.
13:10So see you in the next lesson where we continue exploring
13:12other cool features in the library.
13:17Oh, no, let's not go yet.
13:20Yeah, we could go.