- [Instructor] Now we have some understanding of
how to define a class, so let's actually do this.
We'll also create a base project we can use to play with
throughout this course.
Let's get to it.
So the first thing you'll do is create a new folder
on your desktop called Sandbox, and if you're using
VS code you can simply drag and drop this folder
directly to VS code, and then we'll have the folder
right here.
So now we can freely create the files we need
in this particular environment.
So the first file I'll need is an index dot html file,
so let's go ahead and create that file.
And then let's create also, an app dot js, where we're
gonna put all of our code, and let's go to the
index dot html.
We'll do a few things first.
So, if you're using VS code, and most editors have Emmet
pre installed, you can simply do doc
and then tab, and then you'll have all the initial codes
for an html page.
Then what I'm gonna do is add an h1 here,
and we'll do JavaScript Sandbox, and then I'm gonna have
a script tag, so script and then press tab,
and then we'll have a source which will be app dot js.
And let's change the document to JavaScript Sandbox as well,
and that's all you need for the html.
Next, I'm gonna install an extension in VS code,
and if you don't have VS code then use whatever
tools you have inside of your editor, but this tool
is very useful for creating Sandbox, and not having
to install a whole bunch of files to start a server.
So go in the extensions and search for live server.
And then click on it, and then install it.
As you can see, I already have it installed,
but this will allow us to literally start a server
with a simple command, and then click at the bottom
to stop the server, without having to install anything else.
So once you have that installed, you can literally go
inside of your html here, and then do shift + command + p,
and then do live, and open with live server.
And this will literally open your JavaScript Sandbox
or the html file with all the items that
you have inside of it.
So let's open inside of Chrome d dev tools,
with option + command + i on Mac, and then
shift + control + i, on Windows, and then let's
go to the console.
We have live reload enabled, so whenever we change code
inside of our little Sandbox here, it's going to
automatically reload for us.
So let's go ahead and do something here.
And as you can see here, it's actually mentioning us
that our server is open automatically for us.
So let's do console log and just do It works, like that.
And you'll see that here we have It works.
It reloaded automatically for us.
Alright, so let's get serious with classes.
So let's go and create a class in our JavaScript here.
So let's remove the It works, and let's create
the first class.
So the way the syntax work is by first, defining it
as a class, and then the name of the class, so we'll create
a Car here, and then this takes a constructor,
which you'll pass, inside of the constructor,
what are the properties of your class.
In this case we'll create doors, engine, and then color,
and then inside of that constructor, you need to pass
all these items.
So you need to pass a properties of this doors
equals doors, so when we construct a new instance
of a class then it will pass down these properties.
So let's copy and paste line three, so command + c,
command + v, and then change with option click.
So I double click here and then option double click,
so I selected both words.
I'm gonna change this to engine,
and then we'll repeat the same step, so paste,
with command + v, and then double click, option,
double click, and then change this to color.
A class also takes methods, as we've explored.
The methods are outside of the constructor,
so let's go ahead and create one.
So we'll create a method, called carStats, and you're
using the shortened version of function declaration,
and then we'll return using template strings.
This car has this doors, so we'll pass whatever value
is inside of doors, inside of our instance of our class
to doors here, and then let's continue to the same for
this engine, engine and a beautiful this color color.
Perfect.
Let's do something so you can see all my code.
So I'm gonna go to view, word wrap, and now you can see
all my code, and I'm actually going to shorten a little
bit here, so you see more stuff.
Awesome.
So this is my method.
So now let's use this and create a new instance of a car.
So let's go ahead and create a cx5 which is a new car.
So we're creating a new car.
And when I start using car here, it will tell me
what it takes.
So it takes doors, it takes engine, and it takes color.
So let's go ahead and pass the number of doors.
So there's four doors, has a V6, and I don't know cars,
so I could be wrong here, but I'm just passing stuff here
to demonstrate my point, and then let's pass the color gray,
and then we can console log this.
So let's log the cx5, and then we can also use
the method, so now we could use console log again,
and use the cx5 dot carStats, and which is a function,
so we need to execute it.
And with all this we should have our cx5, and then
the car stats function, or method that is passed
by the class.
Let's go ahead and check this, and our Sandbox.
So right now I have a car that has been created.
So this is a class of car which has four doors,
an engine of V6, and then a color gray, and that has
been passed here, and then my method, actually,
is running this car as four doors, a V6 engine,
and a beautiful gray color.
So, what we've done is created a class car, and then
we created a instance of that car which is called
cx5 and then pass the value to it, and then we use
the method to run the function called car stats,
inside of our log here.
So this was a little demonstration of what a class is.
Let's move on.