[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.18,0:00:03.42,Default,,0000,0000,0000,,Now that you understand \Nthe basics of Javascript,
Dialogue: 0,0:00:03.42,0:00:06.18,Default,,0000,0000,0000,,I want to teach you \Nabout a cool way of using Javascript,
Dialogue: 0,0:00:06.18,0:00:09.56,Default,,0000,0000,0000,,something we call \N"object-oriented programming."
Dialogue: 0,0:00:09.56,0:00:12.16,Default,,0000,0000,0000,,But first we need \Nto understand why it's actually useful.
Dialogue: 0,0:00:12.30,0:00:15.86,Default,,0000,0000,0000,,So I put together a program \Nthat will be better once we make it
Dialogue: 0,0:00:15.86,0:00:17.22,Default,,0000,0000,0000,,more object-oriented.
Dialogue: 0,0:00:17.25,0:00:19.97,Default,,0000,0000,0000,,Now, it's a pretty cool program \Nto start with.
Dialogue: 0,0:00:19.97,0:00:24.01,Default,,0000,0000,0000,,At the top, I have two variables \Nthat store simple object literals inside.
Dialogue: 0,0:00:24.36,0:00:28.24,Default,,0000,0000,0000,,Now, the object literal is a kind \Nof object we learned about before,
Dialogue: 0,0:00:28.54,0:00:30.63,Default,,0000,0000,0000,,that we create with two curly braces
Dialogue: 0,0:00:30.63,0:00:33.46,Default,,0000,0000,0000,,and then we put all these property names \Nand values inside.
Dialogue: 0,0:00:33.76,0:00:37.29,Default,,0000,0000,0000,,So we have two of those object \Nliteral variables, and then down here
Dialogue: 0,0:00:37.29,0:00:40.78,Default,,0000,0000,0000,,we have this function drawWinston\Nwhich expects a single argument,
Dialogue: 0,0:00:40.78,0:00:45.12,Default,,0000,0000,0000,,and then it draws the argument, \Nit draws an image based on the x
Dialogue: 0,0:00:45.12,0:00:47.85,Default,,0000,0000,0000,,and y properties of the object
Dialogue: 0,0:00:47.85,0:00:52.90,Default,,0000,0000,0000,,and then a caption based on the nickname \Nand age properties of that object.
Dialogue: 0,0:00:52.90,0:00:55.54,Default,,0000,0000,0000,,And now finally at the bottom, \Nwe call drawWinston
Dialogue: 0,0:00:55.54,0:00:57.29,Default,,0000,0000,0000,,on the teen and on the adult,
Dialogue: 0,0:00:57.33,0:01:00.01,Default,,0000,0000,0000,,and that's what makes it show up.
Dialogue: 0,0:01:00.86,0:01:05.50,Default,,0000,0000,0000,,Pretty cool. Now, if we go up here, \Nand we look at these object literals,
Dialogue: 0,0:01:05.62,0:01:10.61,Default,,0000,0000,0000,,notice something about them is \Nthat they're really similar-looking.
Dialogue: 0,0:01:11.19,0:01:15.61,Default,,0000,0000,0000,,Both of them have the same sets \Nof properties and both of them can be used
Dialogue: 0,0:01:15.61,0:01:17.49,Default,,0000,0000,0000,,by this same drawWinston function.
Dialogue: 0,0:01:17.89,0:01:21.63,Default,,0000,0000,0000,,In fact, you know, if you think \Nabout this, they're really both describing
Dialogue: 0,0:01:21.63,0:01:23.91,Default,,0000,0000,0000,,a type of Winston, right?
Dialogue: 0,0:01:24.24,0:01:28.84,Default,,0000,0000,0000,,And we can think like maybe there's \Nthis abstract type of Winston in the world
Dialogue: 0,0:01:28.84,0:01:32.77,Default,,0000,0000,0000,,and every Winston has the same set \Nof properties like a nickname
Dialogue: 0,0:01:32.77,0:01:36.99,Default,,0000,0000,0000,,and an age and an x and a y and here,
Dialogue: 0,0:01:36.99,0:01:42.09,Default,,0000,0000,0000,,what we've done is we've just created \Ntwo instances of a Winston
Dialogue: 0,0:01:42.09,0:01:44.82,Default,,0000,0000,0000,,to describe a particular Winston.
Dialogue: 0,0:01:45.00,0:01:48.35,Default,,0000,0000,0000,,So this is a teenage Winston \Nand this is an adult Winston.
Dialogue: 0,0:01:48.35,0:01:52.89,Default,,0000,0000,0000,,But they're really, they're really \Nboth quite similar and there's a lot
Dialogue: 0,0:01:52.89,0:01:55.00,Default,,0000,0000,0000,,of things that are similar about them.
Dialogue: 0,0:01:55.00,0:01:57.71,Default,,0000,0000,0000,,And if you think about it, that's a lot \Nthe way the world works too,
Dialogue: 0,0:01:57.71,0:02:01.34,Default,,0000,0000,0000,,is that we have these abstract data types \Nlike humans and people
Dialogue: 0,0:02:01.34,0:02:03.71,Default,,0000,0000,0000,,and then we're all just specific \Ninstances of those
Dialogue: 0,0:02:03.71,0:02:05.71,Default,,0000,0000,0000,,with our own little properties.
Dialogue: 0,0:02:06.04,0:02:10.36,Default,,0000,0000,0000,,Now, we can actually use \Nobject-oriented techniques in Javascript
Dialogue: 0,0:02:10.36,0:02:17.46,Default,,0000,0000,0000,,so that these Winston variables\Nare formal instances of a Winston object,
Dialogue: 0,0:02:17.92,0:02:21.96,Default,,0000,0000,0000,,so that they know that they share \Nthese things in common.
Dialogue: 0,0:02:21.96,0:02:25.09,Default,,0000,0000,0000,,So, to do that, the first thing we need \Nto do is actually describe
Dialogue: 0,0:02:25.09,0:02:30.37,Default,,0000,0000,0000,,this abstract datatype Winston,\Nand so we'll do that by making a variable.
Dialogue: 0,0:02:30.37,0:02:35.11,Default,,0000,0000,0000,,You will store the datatype in a variable\Nso var Winston, and we'll do capital W
Dialogue: 0,0:02:35.22,0:02:38.63,Default,,0000,0000,0000,,because we always start \Nour object types with a capital,
Dialogue: 0,0:02:38.63,0:02:41.81,Default,,0000,0000,0000,,and we'll set it equal to a function.
Dialogue: 0,0:02:41.81,0:02:46.95,Default,,0000,0000,0000,,And this function is a special function \Nthat we call a "constructor function"
Dialogue: 0,0:02:46.95,0:02:49.47,Default,,0000,0000,0000,,because this is what's going to get called \Nevery time we want
Dialogue: 0,0:02:49.47,0:02:52.11,Default,,0000,0000,0000,,to create a new Winston instance.
Dialogue: 0,0:02:52.11,0:02:55.37,Default,,0000,0000,0000,,So when we want to create a teenage\NWinston, we'll call this function
Dialogue: 0,0:02:55.37,0:02:57.99,Default,,0000,0000,0000,,or an adultWinston, \Nwe'll call this function.
Dialogue: 0,0:02:57.100,0:03:03.04,Default,,0000,0000,0000,,So that means that this function \Nshould take whatever arguments it needs
Dialogue: 0,0:03:03.04,0:03:06.27,Default,,0000,0000,0000,,to know about in order \Nto make a full Winston.
Dialogue: 0,0:03:06.46,0:03:10.43,Default,,0000,0000,0000,,So in this case it needs to know \Na nickname, an age, an x and a y.
Dialogue: 0,0:03:10.72,0:03:15.25,Default,,0000,0000,0000,,Now, once we've received those arguments \Nwe need to do something with them,
Dialogue: 0,0:03:15.25,0:03:20.92,Default,,0000,0000,0000,,so we need to actually attach \Nthat information to the Winston object.
Dialogue: 0,0:03:21.39,0:03:26.66,Default,,0000,0000,0000,,So we'll use a new special keyword, \Ncalled "this". And "this" will refer
Dialogue: 0,0:03:26.66,0:03:29.02,Default,,0000,0000,0000,,to the current object instance.
Dialogue: 0,0:03:29.02,0:03:31.80,Default,,0000,0000,0000,,So we'll say {\i1}this.nickname{\i0}, \Nso it'll say all right,
Dialogue: 0,0:03:31.80,0:03:34.17,Default,,0000,0000,0000,,the nickname property \Nof this object is equal to
Dialogue: 0,0:03:34.17,0:03:38.03,Default,,0000,0000,0000,,whatever gets passed \Ninto the constructor function, okay?
Dialogue: 0,0:03:38.45,0:03:42.38,Default,,0000,0000,0000,,And {\i1}this.age{\i0} is equal to the age \Nthat gets passed in, {\i1}this.x{\i0} is equal
Dialogue: 0,0:03:42.45,0:03:44.14,Default,,0000,0000,0000,,to the x that gets passed in,
Dialogue: 0,0:03:44.14,0:03:47.33,Default,,0000,0000,0000,,and {\i1}this.y{\i0} equals the y \Nthat gets passed in.
Dialogue: 0,0:03:47.47,0:03:52.54,Default,,0000,0000,0000,,All right, so now we have \Nthis abstract datatype called Winston,
Dialogue: 0,0:03:52.84,0:03:56.49,Default,,0000,0000,0000,,and it has a constructor function \Nthat we can use to create a new Winston.
Dialogue: 0,0:03:56.49,0:03:58.78,Default,,0000,0000,0000,,So let's try to use it!
Dialogue: 0,0:03:59.48,0:04:03.24,Default,,0000,0000,0000,,We're going to create winstonTeen again, \Nbut this time we're going
Dialogue: 0,0:04:03.24,0:04:05.31,Default,,0000,0000,0000,,to say winstonTeen equals,
Dialogue: 0,0:04:05.31,0:04:10.36,Default,,0000,0000,0000,,and instead of curly braces, \Nwe're gonna say "equals new Winston".
Dialogue: 0,0:04:10.61,0:04:14.11,Default,,0000,0000,0000,,So we're saying "we're trying \Nto create a new Winston instance,"
Dialogue: 0,0:04:14.11,0:04:16.35,Default,,0000,0000,0000,,and then we're going to pass \Nin the information that it needs
Dialogue: 0,0:04:16.35,0:04:21.48,Default,,0000,0000,0000,,so "Winsteen", 15, 20, 50, okay?
Dialogue: 0,0:04:22.25,0:04:26.31,Default,,0000,0000,0000,,And then we can delete this old one \Nbecause we don't need it anymore.
Dialogue: 0,0:04:26.31,0:04:30.10,Default,,0000,0000,0000,,All right? And now that's \Ncreated a new Winsteen.
Dialogue: 0,0:04:31.21,0:04:35.81,Default,,0000,0000,0000,,And now we can say \N{\i1}winstonAdult = new Winston(){\i0}
Dialogue: 0,0:04:35.96,0:04:39.50,Default,,0000,0000,0000,,and of course his name is \N"Mr. Winst-a-lot", sweet name,
Dialogue: 0,0:04:39.50,0:04:45.34,Default,,0000,0000,0000,,and he's 30, and he's at 229 and 50. \NAll right? And then we can delete
Dialogue: 0,0:04:45.34,0:04:49.92,Default,,0000,0000,0000,,this object literal,\Nand, tada! Our code still works.
Dialogue: 0,0:04:50.71,0:04:53.65,Default,,0000,0000,0000,,So what we've done here \Nis that we've said okay there's this,
Dialogue: 0,0:04:53.65,0:04:57.16,Default,,0000,0000,0000,,this kind of abstract type \Nof data which is this Winston
Dialogue: 0,0:04:57.85,0:05:03.07,Default,,0000,0000,0000,,and we can create new Winston instances \Nthat have these properties
Dialogue: 0,0:05:03.07,0:05:05.16,Default,,0000,0000,0000,,that are unique to them,
Dialogue: 0,0:05:05.16,0:05:08.66,Default,,0000,0000,0000,,and we'll just remember \Nthose properties inside them.
Dialogue: 0,0:05:08.66,0:05:12.28,Default,,0000,0000,0000,,And remembering is really important. \NSo you know inside here,
Dialogue: 0,0:05:12.28,0:05:14.15,Default,,0000,0000,0000,,we have {\i1}this.nickname, this.age{\i0}.
Dialogue: 0,0:05:14.32,0:05:19.64,Default,,0000,0000,0000,,If we accidentally didn't have this age, \Nnotice that now it says "undefined."
Dialogue: 0,0:05:20.25,0:05:22.96,Default,,0000,0000,0000,,That's because down here, \Nthis drawWinston function,
Dialogue: 0,0:05:22.96,0:05:28.32,Default,,0000,0000,0000,,it expects whatever object gets passed in\Nit expects it to have an age property.
Dialogue: 0,0:05:28.32,0:05:30.80,Default,,0000,0000,0000,,And if we didn't say {\i1}this.age{\i0},
Dialogue: 0,0:05:30.80,0:05:34.37,Default,,0000,0000,0000,,then it doesn't have an age property.\NWe passed it to the construction function
Dialogue: 0,0:05:34.37,0:05:37.23,Default,,0000,0000,0000,,but then we didn't do anything with it, \Nwe have to actually attach it
Dialogue: 0,0:05:37.23,0:05:39.45,Default,,0000,0000,0000,,to the object using "this" keyword.
Dialogue: 0,0:05:39.62,0:05:41.54,Default,,0000,0000,0000,,So we'll add this back.
Dialogue: 0,0:05:41.54,0:05:45.11,Default,,0000,0000,0000,,Now you might be thinking \Nlike sure, you got your code working
Dialogue: 0,0:05:45.11,0:05:50.32,Default,,0000,0000,0000,,but, you know, we're... all we've done is \Naccomplished what we had before.
Dialogue: 0,0:05:50.46,0:05:53.94,Default,,0000,0000,0000,,But here's the cool thing. \NNow, all of our Winstons go
Dialogue: 0,0:05:53.94,0:05:56.09,Default,,0000,0000,0000,,through the same constructor function.
Dialogue: 0,0:05:56.09,0:05:59.66,Default,,0000,0000,0000,,So if we want to, we can actually \Nchange things, change some things
Dialogue: 0,0:05:59.66,0:06:01.17,Default,,0000,0000,0000,,about the Winston...
Dialogue: 0,0:06:01.17,0:06:04.22,Default,,0000,0000,0000,,all the Winstons, just inside here. \NSo maybe age, we actually want
Dialogue: 0,0:06:04.22,0:06:06.11,Default,,0000,0000,0000,,to say "years old."
Dialogue: 0,0:06:06.11,0:06:09.84,Default,,0000,0000,0000,,We can just put that here, \Nand now all of our Winstons say
Dialogue: 0,0:06:09.84,0:06:12.88,Default,,0000,0000,0000,,"15 years old," "30 years old," right?
Dialogue: 0,0:06:12.88,0:06:14.98,Default,,0000,0000,0000,,So they're taking the part \Nthat's unique about them,
Dialogue: 0,0:06:14.98,0:06:17.42,Default,,0000,0000,0000,,but then they also have things \Nthat are shared about them.
Dialogue: 0,0:06:17.42,0:06:20.11,Default,,0000,0000,0000,,And that's a really cool thing \Nabout object-oriented programming
Dialogue: 0,0:06:20.11,0:06:22.11,Default,,0000,0000,0000,,is this idea that there's \Nthese kinds of objects
Dialogue: 0,0:06:22.11,0:06:26.11,Default,,0000,0000,0000,,in the world, and you can actually \Ncreate instances of these objects,
Dialogue: 0,0:06:26.11,0:06:28.43,Default,,0000,0000,0000,,and there's some things \Nthat are similar about them
Dialogue: 0,0:06:28.43,0:06:30.41,Default,,0000,0000,0000,,like they all have the same properties.
Dialogue: 0,0:06:30.41,0:06:32.41,Default,,0000,0000,0000,,Then there are things that are different \Nlike oh, this property is actually
Dialogue: 0,0:06:32.41,0:06:35.51,Default,,0000,0000,0000,,a different value \Nthan this other property, right?
Dialogue: 0,0:06:35.51,0:06:38.75,Default,,0000,0000,0000,,But then, you know, we can do \Nthe same behavior with them
Dialogue: 0,0:06:38.75,0:06:40.51,Default,,0000,0000,0000,,like call the same functions
Dialogue: 0,0:06:40.51,0:06:43.07,Default,,0000,0000,0000,,and use them in similar ways.
Dialogue: 0,0:06:43.07,0:06:45.98,Default,,0000,0000,0000,,So that's some of the cool stuff \Nabout object-oriented programming
Dialogue: 0,0:06:45.98,0:06:48.55,Default,,0000,0000,0000,,but as you're going to see, \Nthere's tons more too.
Dialogue: 0,0:06:48.55,0:06:50.15,Default,,0000,0000,0000,,So, stay tuned!