how's it going guys my name is dom and
today i want to talk about classes in
javascript so
basically for those of you who haven't
ever used classes before
a class is used to create one or more
objects so
you can think of an object as being
a
creation from a class definition so
these classes aren't actually used
directly by your program logic but they
used to create objects now these objects
are the ones that actually used by your
program to achieve different things so
with that being said
you can define
two main areas with a class definition
you can define what an object will have
so this is called an instance property
and also what they do this is called an
instance method so
with instance properties
taking into basically example of a human
being a human might have a name
an age and a height so
an instance property describes the
current state of that object what they
have it's basically just data about that
property sorry that objects so
these instance properties are unique to
every object which is created from that
class definition
so
we now have the instance methods this is
what they do so an instance method
for a human being
might be to talk to run and to jump so
this refers to what they actually do
what actions
and their behavior so
typically an instance method will use
the instance properties to achieve
their result
so those two main areas right there so
let's now create a class in javascript
so
down here
we can create a class definition by
using the class keyword
let's type out class like that
followed by the name of your class
let's create a class for a rectangle
let's type out rectangle
right there
now typically by convention you want to
use a capital letter at the beginning of
your class name so it's going to be
rectangle with a capital r just like
that
followed by
two curly braces so now inside here
this is your class definition so
every class also has what's called a
constructor
now the constructor is basically just a
method which is ran only once
during the life of the objects so
this constructor is ran once and it's
ran when the object is being created
so
let's define this constructor by typing
a constructor like that
followed by two parentheses and your
normal curly braces so
the constructor is used to set up
your object okay
so
this behaves like a normal method or
normal function which means if i type
out console.log inside here and then
just say
the rectangle
is being created
okay
so now
this method constructor is ran
when the object is being created so
we have a class
let's now create an object from that
class
so down here
let's create a new variable
and we call this one something like my
rectangle
number one which is then equal to
a new object based off
this class let's type out new that's the
that's the new keyword
and then say rectangle just like that
and then two parentheses to actually
call that constructor method so
if i was to hover over this
we see we get constructor just like that
so
this will call the constructor method
so now if i was to save this html file
and then refresh the web browser
in the console window we get the
rectangle is being created
if i was to
make two of these rectangles so my
rectangle number two down here
save this and refresh the browser one
more time
we get
two
messages
of creation okay so that is how the
constructor method actually works
okay
the constructor is used to actually
obviously as i said used to set up
the actual object so
back to these instance properties
what you
might commonly see is
the instance properties being defined
inside the constructor
so
we have a rectangle now a rectangle
might have a width a height and also a
color
so
let's define these three instance
properties within the constructor so
below here
let's define a instance property
we can do this by typing out this dot
and then the actual property name for
example
width
is equal to and then the value
let's just say it'll be 5 for now
and we can do the same thing for
the other two properties we'll say this
and then dot height equal to let's just
say something like
3
and the color
let's make this a blue
rectangle
so
this keyword right there that is a
keyword which refers to the current
object
so
when i say this i'm talking about
the objects which is being created by
that class okay
so
we now have
our three instance properties defined
inside the constructor
so now
if i was to
save this and refresh the browser
then in the console if i just refer to
the myrectangle object or the variable
here
okay and press enter we can see we get
three properties
those color height and width which
describe the current rectangle okay so
these properties are unique to this
rectangle instance
all right
so
in most cases though
you actually
define
instance properties
when you construct the object
but these are typically user defined so
usually you would type in my rectangle
and then say something like three and
then five and also maybe the color so it
will say blue like that
okay
cut this out blue
so
you want to make
this 3 5 and blue
actually turn out to be the instance
properties for this
created object
okay this allows you to make custom
rectangles
with whatever values that you actually
pass in so to achieve this result you
actually want to make the constructor
function accept parameters or arguments
so
let's type our underscore here and then
say
heights actually let's start with width
so say width
and then heights
and then color so
these are now three parameters which are
passed in
through the constructor function
and then these will be assigned to the
instance
properties of this particular rectangle
object so
let's swap out
this width
with these actual
variables right here
so
now
we're assigning the width of this
rectangle to be width height and color
and so on okay
let's just make this a five and a three
so now running this line of code right
here creates a rectangle with the
with a width of five a height of 3 and a
color of blue so these are all passed in
and inserted right there so now if i was
to save this one and refresh the browser
we get the same result let's just
log out the actual rectangle object
we've got this rectangle with the five
height of three and a color of blue so
with this scenario we can actually
create two objects here two rectangles
once again
for the second time
let's give different
data
let's say 10
[Music]
5
and then
red
so now using this class definition
we're defining the structure of this
rectangle but giving it custom values
based on the individual needs of this i
guess current state in the program so
if i was to save this and refresh the
browser this time
if i type out rectangle number one
we get width five three in blue
number two
we get ten five and red so
we can see how the instance properties
are unique to the actual object being
created we have two squares here with
different instance properties for their
data so that is the actual instance
properties and the constructor function
okay
now
for the instance methods
we can define these
under the constructor
so
to work out i believe the area of a
rectangle you multiply the width and the
height
so we can actually create a method
which will give us
the area of this rectangle or
the rectangle being created
so
let's define a new instance method
we can do this by typing out the name of
the method let's say
get
area so
get area right there that is the name of
our instance method followed by the two
parentheses right there
and then
the brackets
so
inside here
let's actually just return
the width and the height of this
rectangle so
let's say
return
this dot width
multiplied by this dot height
okay
so now
we should get different
return values from this method based on
the um
the rectangle being used
so
for example down here let's say
console.log
and then just say rectangle1.getarea
okay
so dot get area this will call the
instance method
so
for this rectangle right here we should
get five times three
for the second one
rectangle number two
get area will give us 10 x 5.
let's save this and refresh the browser
we get 15
and 50.
okay so you can see how these methods
are defined in the actual class
definition and their generic
to the actual class and then they're
using the instance properties
that are defined by the constructor to
give you different results based on
the object being used okay
now one more example of the actual
method let's make a method that will
actually print out a description of
the actual
object
let's say print description
okay
inside here let's just say console.log
and then just say something like
um
i am a rectangle
um of and then let's put the um
the width and height so we'll say this
dot width
and then
um
this dot height
then we'll say
and i am and then the actual color
so this dot color
so now
by calling this print description method
on
a rectangle we get i am a rectangle of
width times height and i am
then the color so now down here
let's call the print description method
on the my rectangle number two
okay
dot print description
if i was to save and refresh this one we
get the expected result
rectangle of ten times five and i am red
okay
so just to recap we have a class which
is a definition
basically a structure
of the eventual object being created
we have an instance property which
refers to data that is relevant
to
each individual object being created and
we also have an instance method which
uses the instance properties to achieve
an action or some sort of result
based on once again each individual
object being created from that class
right and that is the basics of classes
in javascript
i want to talk about getters and setters
in
javascript classes so
basically
getters and setters are used to
define methods on a class
which are then used as if they're
properties so
essentially they look like properties
but they're actually
methods of that class so
let's see with an example
um
i'm just going to define a class here in
a javascript and we'll call this one a
square
okay
for the constructor let's just take in a
single
argument here called width
and that will be the width and the
height of the actual square so
inside here let's just say
this dot width is equal to
that width parameter and the same thing
for the height
okay so now the square has a equal width
and height okay
now
we have this basic square
so
to work out the area
of this square it'll be the height
multiplied by the width okay
so we can actually define a getter to
achieve this so
down here let's create a getter for the
area
we can do this by typing out gets just
like that then a space and then specify
the name of your getter and this will be
the actual name
that you type out as if it's a property
so let's just say get and then put down
area followed by parentheses okay
then the um the normal brackets there
for the actual method body so now
inside here
this is now basically a function we can
put any logic we want inside here we can
do anything so
let's just
return return this dot width
multiplied by this dot height
and that will give us the area of this
square so you can see how i put a return
statement
inside this block because
it literally behaves as if it's a method
okay so now
we can we can test this together we can
create an instance of this square so
let's just
go down here and say
we'll say let's make a new variable
and say we'll call this one square one
equal to a new square with a width and
height of something like
25
okay
so now down here let's just console.log
and then we're going to call this area
getter
by typing out
square one and then dots area
so you can see how it
essentially behaves like a property okay
all right
so there's no need to put any
any
parentheses here because yeah it
literally is a property right
if i was to save this one and then
refresh the browser
okay
we get 625
as a result so
um 25 times 25 would be 625. let's make
that maybe um four just so we get a
smaller number so square up for width
and height
save and refresh and we get 16. so you
can see how
we're calling
this area getter
running this this function body
but it behaves like it's a property okay
so that's the actual get out right there
so now let's actually create a setup so
a setter behaves basically in the same
way
you can assign new values to
your instance
properties with a property like syntax
so you can actually
do this you can say square1 dot area
equals and then something like 25 for
example so
let's create this setup so this right
here this line right there will actually
convert this 25 into a width and height
for these two properties okay so
back inside here
let's just create a setup for area
so we'll say sets and then put area
like that
now this one is going to take a single
argument and that will be
this value right there so
let's say set area
in parentheses let's put down area
okay
so now inside here
we can now simply just
find the square root of this 25
and then we can assign that that result
to the width and height of the square
because obviously
the square root of the area would be the
width and height of the actual square so
let's say this dot width is equal to the
square root so we'll use the math.sqrt
method
and pass in here the area
okay so now if i was to pass in 25
inside here we'd say the width is equal
to the math dot square root of 25 which
is actually going to be five okay so
the width is equal to the square root
we can do the same thing for the height
so this height is equal to and we could
just say this dot width for
um i guess consistency okay so
now
we can
run this code and that line right there
will change the value of the width and
height for this for this square
so let's just see how this thing looks
so
let's get rid of that right there
and
console.log down here square one dot
area
okay
let's save this and refresh the browser
okay 25 yeah of course let's actually
just console.log the width of this
square and also the height
okay
let's try again save and refresh
and we get 5 right there so
we have converted the initial width and
height of 4 into
5
using this setup which modified the
width and the height based on the area
that you pass in
that is the basics right there i just
want to show another example of how
you can basically treat these like a
function so
with this getter
let's actually keep track of how many
times we have requested this square
to give us the area
so
every time i call this getter i want to
actually increment a number which tells
us how many times we've called this
getter so
up inside here let's create a new
instance variable and we'll call this
one
number
number of requests for area okay
equal to zero so
when it's constructed we have no
requests for the area inside the getter
let's just say this dot num of requests
for area plus plus
so now every time we request for the
area this will be incremented
so down here
let's just get rid of this um
that right there
and then let's just say console.log
square one dot area okay
and do it let's just say four times
okay
so now
if i was to then console.log and say
square one dot number of requests for
area
this should now equal four because i've
requested it four times and that has
been incremented
four times okay
so now if i was to save this and refresh
the browser one last time
you can see we get the area and also
number four
and that is how many times i've actually
requested for the area
okay
so that is how you can use
getters and setters on classes in
javascript
i want to talk about static methods in
javascript classes so basically a static
method
is a method which you define on a class
but it is not actually part of the
instantiated object
once it's been created so basically a
static method does not require an
instance of
the class to be created in order to be
used so
a lot of static methods are
what's called helper methods so they're
like little utilities that are relevant
to that class but not really
you know that don't have a an object
bound to them so
let's just see with an example
i'm going to define a new class here and
we'll go with the the standard square
example so a class of of square and
for the constructor let's just take in a
width and the width will be assigned as
per usual
to the
sort of width and height instance
properties let's just say constructor
and we'll say this dot width is equal to
that width parameter and this dot height
is also equal to
that width parameter so now we have a
square class with a constructor so now
let's just create an instance of this
square so down here
let's create a new variable here and
call this one square one equal to a new
square
passing in a width of let's just say
eight okay
so now
we have this
this square so if i was to just
console.log
be square in the console
save this and refresh the browser in the
console we get obviously a square
with a and height of 8 so now
let's create a static method
on this square class that's basically
going to compare two square instances
and then
let us know if they're of equal width
and height so
in here
let's define a static method we can do
this by first typing out the keyword
static
followed by the name of the method so
let's just say
maybe equals
equals okay something like that right
equals and then
this method here will take in two
parameters or two arguments now the
first one being obviously a square and
the second one being another square
let's just say a
and b so
a and b are two different square
instances all right
and the equals static method is going to
check the width and height of these two
squares and then give us
the result if they are equal or not
equal so
let's just um
let's just return
then use the ternary operator let's just
say
return
if a dot width
times a dot height
is equal to b dot width times b dot
height
then
return true
actually let's just let's return that
so now we're going to return the result
of this expression or this comparison
here
if the area of the first square is equal
to the area of the second square
obviously just return
return that comparison result
so now this method should work
let's test this out i'm going to create
another square here square 2
with a width and height of 9. so we have
two different areas for these two
squares
and then down here i'm going to
console.log the
the return value of this equals static
method
and i actually call a static method um
you call it directly
on the actual square class itself and
not on
um
a square instance
let's just type out square here and then
dot
equals
okay
and here we're gonna
pass in square number one and square
number two
okay so now if i was to save this and
refresh the browser window
in the console we get false because
uh here clearly the area of a is
different to the area of b
if i was to make
the area the same make them both eight
okay
so 64 here and 64 here for the area
save and refresh this one
we get true so we can see how we've used
a static method here now this static
method doesn't require an instance for
it to work it does in the regard of the
actual parameters but
the actual method itself doesn't ever
say this dot this or you know this to
area so there's never any
um
i guess referrals
to the actual this keyword okay so
there's no instance binded to this
static method
probably a better example of this
would be maybe
a static method that will uh
test whether or not
um a width and height
is a valid square so
for a square to be valid it needs to
have an equal width and an equal height
okay so
let's just create a new static method
down here
and call this one something like is
valid maybe
is valid dimensions okay
this takes in a width and a height
so now this this static method is
technically relevant to the square class
so we're checking if a square is valid
um or our dimensions is valid based on
the width and height so if the width and
height are the same then it can be a
valid square let's just return here
let's just return
the result of
a condition
if the width is equal to the height
then
it is a valence square so let's just
return with equal to height that
comparison result right there so now um
down here again
if i was to just console.log here
console.log and then say once again
calling the square class
directly and saying is valid dimensions
and passing in something like
6 and 6 inside there
if i was to save this and refresh the
browser we actually get true
okay because obviously
6 is equal to six so we get the return
value of two here supposed to make this
um seven and six
well
um we should get false in the console
refresh and we get false okay
so
um static methods are used um for
i guess helper helper functions so
um they're still relevant to the actual
class but they don't actually require an
instance of that class to work in fact
if i was to just get rid of these two
guys right here
okay save and refresh
we still get the same result there's no
error or anything so you can see how
it's sort of like a helper function all
right
and that's how you can use static
methods in classes in javascript
i want to talk about inheritance or the
extends keyword in regards to javascript
classes
so basically um the extends keyword
allows you to achieve the concept of
inheritance in javascript classes so
um you're basically going to use this
whenever you have a generic class
and then you want to actually create a
new child class
of that generic one
while still maintaining its features and
behavior
but a little bit extra so basically it's
when you have a parent class
to create a child class okay so
let's see how to actually do this so i'm
going to create a new class here and
this will be a representation of a
person so
let's type out the class keyword and
then just say person just like that
this person will have let's just say two
properties we'll have um we'll have a
name and an age so
in the constructor
let's take in a name and an age just
like that
and then assign it to instance
properties we'll say this dot name equal
to the name and this dot age equal to
the age passed it
okay
this will be our parent class the
generic class now
let's just say inside our code we have a
function
okay this function
we'll call this one something like a
develop software
this function requires
a bunch of programmers
to develop the software so
this will take in an array of
programmers just like that okay
inside here
um basically we just say
develop software so each one of these
programs are going to develop some
sort of software
so
as you can see
a normal person
won't be able to actually be passed in
to this array because we expect
programmers not
a generic person
with no
attribute on their skill or occupation
so
we're actually going to create a child
class which inherits from this person
class and this child class is going to
be
a programmer so
we can achieve this by creating a new
class
okay
and call this one programmer okay
now
if we type out extends here that extends
and then say person
we've just achieved inheritance so now
we have a program which extends
a person which means it takes in all the
attributes and behavior
of this person so name and age and it
also
will have its own custom
behavior and properties itself so
i might just create a new method inside
the person real quick and just say
something like
describe or something like that so
describe this is just simply console.log
a message saying
i am and then their name so i am
i don't know dom and i am
age
years old
okay
say this shot name so now
this programmer class is going to have
access to not only these properties but
also access to the describe method
okay so
down here
let's create the constructor for this
programmer
we'll type out constructor here
this will take in a name and an age okay
the same thing as the actual
parent class
and also let's just say
years of experience we'll say
years years of experience
all right
so now
inside here
we actually have to call the parent
class
oh sorry
the parent constructor so we still have
to actually assign the name and age
but we can do this
in a more generic way by typing out
super
and then passing in name
and age so here this super is basically
just going to call the constructor of
the person that way all this logic is
still maintained in this class okay so
super name age basically just calls this
in the parent class
now down here is the custom behavior
of
the photos out behavior of
the programmer
let's just say this dot years of
experience
is equal to that parameter
right there
okay
so now um before we define a new method
for this program let's just create some
instances of these people so down here
let's just um
create
a new person so our new generic person
so let will say person one is equal to a
new person and um passing a name of
something like jeff
and an age of something like 45
okay
let's also create a programmer we'll say
let's and then programmer one you could
do a new programmer passing in a name
such as i don't know dom myself age of
56
and
years of experience i've had about 12.
okay not really but that's all right so
now we have these
these two people a person we have one
person here
another person we have two people but
the programmer is a special type of
person okay
so
we can now console.log person one
and do the same thing
for the programmer number one so that
was to save this and refresh the web
browser
in the console okay fair enough let's
just see what's happening here
yep cool
put that there perfect okay save and
refresh this one
all right we get a person name of jeff
age 45 programmer named dom
age 56 and a year of experience 12. so
we can see how we have
obviously this
the same behavior as the person
with edit sorry with um with extra added
functionality of 12 years of experience
the prototype for this programmer is
person and you can see how
it all works with the
with the prototype chain and the
inheritance so you can see how
this programmer
is a child of this person class
okay
so
let's add some extra functionality to
this program all right so down here
let's just say
develop actually
let's call this method code okay so make
a new method here called code and it'll
just say okay console.log
and we'll say
this dot name
is
programming or is is coding
okay there we are
so now obviously here
only the programmers have access to this
method so if i was to say
person one dot code it's not going to
work let's save and refresh this
refresh
uncaught type error not a function so a
regular person cannot code if i change
this to programmer 1 this time we get
the message refresh we get that right
there so you can see how we've added
extra functionality to this programmer
class while still maintaining the
functionality of the person
let's just prove this right now by
calling the describe method
on the programmer
and not the person
let's save and refresh
and we still get i'm dom and i'm 56
years old so you can see how
we're maintaining the same behavior
so
back to this function we might as well
finish it off so
let's just create a new array here
get rid of all this stuff
let's make a new array call this one
programs equal to an array of programs
so we'll say new programmer
say dom
with
five six years old and 12 years of
experience
create one more
let's just say
jeff once again
okay
age of think it was 24 something like
that and he's he's got four years of
experience
okay
who might as well stop there that's fine
okay so now we can just obviously pass
in um
into this
function here develop software and pass
in these programmers
inside the function body
let's just
loop through all these programs so we'll
say for let programmer
in programs i believe it is
and we'll say
programmer
dot code okay so we're looking through
all the programmers and just calling
their code method
for us to save this and refresh what we
get
okay cool that's fine
yeah
oh i think it's off isn't it yeah it's
off okay get rid of that
refresh this and
we get dom is coding and jeff is coding
all right
and that's how you can achieve
inheritance using the extend keyword in
javascript
i want to talk about the concept of
polymorphism in javascript classes so
basically polymorphism is the act of
redefining a method
inside a derived child class of a parent
so
let's just see with an example
we'll go with the typical
animal example so
let's just define a new class inside
here
and call this one animal
which obviously represents a generic
type of animal okay so for the actual
constructor
we're just taking a single argument this
would be
just the name of that animal okay
and we can set that to an instance
property so
we can say this dot name is equal to the
name that is passed in
in the constructor all right so now we
have an animal with a name so let's just
define a new method inside here
and let's call this method make sounds
alright this will take no arguments now
this method right here is the one that
we're going to eventually override to
achieve polymorphism so
let's just say for a generic animal
we're going to console.log
and we're going to say
generic
animal sound
okay
so
this is the make sound method that is
present in the parent class of animal
and it just says
generic animal sound so
if i was to make a new instance of this
animal real quick down here
let's just define a new constant and
call this one a1
equal to a new animal and we'll call
this animal um dom
all right
and then if i say a1 dot make sound just
like that
we should now see that in the console
let's just save this and refresh the web
browser
and we see that right there okay so
that's fine
now let's actually just
create a new child class of this animal
class
and then override the make sound method
okay so
let's go down here
and declare a new class
let's call this class dog okay so a dog
is an animal so let's just say dog
extends animal all right
cool
for the constructor
let's just take in once again the name
and then call the super
constructor passing in name so
that means just call this constructor
for the parent all right so we have this
functionality right here
now let's just redefine the make sound
method
and this is called polymorphism okay
make sound
this time
let's say console.log
and say woof woof
all right
okay
so we are now done so now if i was to
make a new animal down here or a new dog
down here
new constant call this one a2 equal to a
new dog let's call this dog jeff
now we're going to call the make sound
method
on the constant which is the type of dog
let's say a2 dot make sound
alright
if i was to save this and refresh
this time
we get woof in the console
right so we can see how we're actually
achieving polymorphism here by
overriding the method inside the child
class dog
you know of that in the in the parent
class make sound so we're just basically
overriding it so if i was to
comment that out in the child class and
save and refresh
we get once again the generic sound so
what's happening here is it's actually
checking
on the dog class if it has that method
if it doesn't then it checks the parent
class and it uses that one right there
all right so that's that's polymorphism
i'll just show one more example
this time calling the super
inside
the actual
overwritten method so i can actually
call the parrot method inside the
derived method so
inside this make sound method i can say
super
dot make sound and that right there is
going to call the parent class animal
dot make sounds
so we'll actually see
that message followed by
that message
and this is common practice
you'll see how we're actually using the
generic behavior and then adding on
special functionality for the special
derived child class if i was to save
this and refresh the browser
this time we see here
generic
and then woof so
these two right here are part of the dog
dot make sound method call
okay
and that's how you can achieve
polymorphism
inside your javascript classes
i want to show you an example of how you
can use the javascript classes to
make a binding to a html element so
what i mean by this is we're actually
going to be able to create a class
which can then manipulate the dom or the
document object model directly so for
example here i have an unordered list
element on the html document with a few
list items inside it okay
in the javascript i can actually just
type out
list and then dot ads
and then add an item to that list
directly so for example list dot add
bottle
press enter and we see bottle appears
right there
we can do the same thing for removing an
item let's say list dot remove
and pass in an index for example
index number one press enter and is is
removed okay so
we're going to make this right here
so inside the clean
document here
we have a simple structure
so first let's just create the actual
unordered list item
to use so
let's say ul
with an id of something like my list
okay
so this list will be filled by a
javascript so let's just say
we'll put a comment down
we'll say it should be filled by
javascripts
okay so now
we need to actually reference
this list
this list element in javascript so using
the actual id here we're going to make a
new constant which references this
unordered list element so
down here
let's make a new constant and call this
one something like my list
equal to
document.getl
passing in my list right there
so now
my list means
that element right there okay
so now
let's start by or let's let's start
creating the actual class so
let's make a new external file here
make a new file let's call this class
list binding
dot js
okay
let's now link this class in the actual
html document
we'll say scripts with a source of list
binding
dot js okay
so
in this class here let's just actually
firstly define this class we'll say
class and call this one list binding
okay so
in this class
we're actually going to be able to pass
in the my list
element to the class constructor
okay so
this class will actually keep a
reference to the physical
tag or element okay so
in the constructor
let's just take in a single argument
and call this one element okay
now
we can say this dot list element is
equal to elements
okay so we have an instance
an instance property here called list
element referring to the physical
list html element okay so now we can
make a underlying
simple array that will be filled with
all that text so we can say
this dot text list
is equal to an empty array so
this text list here might contain
some strings for example decode
is
not bad okay
so back in the actual demo
we have
we have that right here so
we can see how
this array structure
will eventually actually contain all
these text items right here that's what
the actual text list property is used
for okay
so now let's just make a
an instance method for this class
and let's call this method update
say update this will take no
no arguments
the update method is actually just going
to
update the physical dom so the physical
list element
with
the items contained in text list
so we maintain an array of of strings
and then the update method is actually
going to insert all these strings
into the physical list element
yeah property or this element so
down here we can start by first clearing
the
the list element of list items
so let's just say
remove all existing
ally
elements or slash tags
okay
we can say while
this dot list element dot first child so
why there is a first child
then we can say this.list element dot
remove child
and pass in the first child
okay so this right here is going to
remove all the existing li
tags
from the list element so let's just see
an example of this in use so back inside
the html
let's just put some sample
ally tags inside here
we'll say item number one
and item number two
okay
inside here
let's make a new constant
okay called list binding
this is equal to
a new instance of that list binding
class
let's say new
list binding
taking in
my list
okay
so this is like registering
um this list element with
this list binding class
okay
let's save this and refresh the browser
we get that about there so now
let's call the update method on that
list binding and see what happens
we'll say list binding dot update
and they go away so you can see how
that code right here removes all the
existing list item tags
so now
we have to add
add
well let's say field so fill
ul
tag with ally
okay let's just um
let's just fill up this list element
with all these strings inside this text
list array property so
let's just say for each of the text list
items so
for each const text of this dot text
list
okay we're going to say
this dot list element dot append child
and we're going to append obviously
a li tag
so how do we actually convert a string
to an ally tag
let's just say this let's just say list
binding
dot creates
list item and pass in text so
we're going to make a static method
called create list item
which will generate an html element for
um for the text that is passed in
all right so
let's just make this static class or
this um this static method right now
up here
let's say static
call this one create list item
which takes in a single
argument being text
okay for the body
let's just make a new constant here call
this one li
equal to
document.createelement
of an ally tag
okay
then say ally dot text content
let's put the actual text inside the
actual tag and then return
ally
so now
this method
actually makes
makes an ally
tag
okay or element elements slash tag
with text inside they actually pass in
right there
all right
so
now
if we actually put some sample data
inside this array for example
d code and then i don't know bottle
okay
if i save this and refresh the browser
we still get these two existing elements
right
if we say list binding dot update now
press enter
they get replaced so here
we are first clearing
the existing elements so we clear them
with that right there and then
add
alloy tags for each
text or each string
inside this text list
underlying array right there
okay
let's make this back to
[Music]
no elements okay so now let's actually
create the add and remove methods
we can first just get rid of those
sample
tags okay save this all right so
let's make the add and remove methods so
basically
these two methods right here are simply
just going to update the underlying
array
that guy right there
and then call
the update method so it's going to be
quite lean and what do you call it loose
coupling all right so
down here
let's make a new add method
all right this will take in some texts
we'll say text just like that
inside here let's just say
this dot text list
and call the push
method
we're gonna push text to the array so
this will add
this text to this underlying array quite
simple
and then we're going to say
this dot update
all right
so basically
the add method does its simple job of
adding the actual text to the array
then the update method does its job of
updating the actual physical document
object model the actual html page
all right
let's just save this and test it out
save and refresh the browser
all right
let's say
list binding dot add
all right
let's add decode
to the list
boom there we are let's add some more
for example
add dog
so it works completely fine all right
good
for the actual remove method
um
for a move
let's add this method right here
this will take in an index so remove an
item at a particular index
index right there okay
then once again it'll follow a similar
sort of structure
it's going to say
this dot text list dot splice
all right that's an array method
splice at the index okay
and then one so this means
remove an item starting at all multiple
items maybe starting at this index
and then how many so
remove an item
at this index but only one of them okay
so that actually removes one item
this dot update
okay so
similar thing
modify the existing underlying array
and then
update the dom right there
let's save this refresher browser and
test it out
let's add dog decode and
let's just say bottle
okay
and then i'll say list binding
dot remove
at index one press enter boom there we
are
all right so
that's the whole thing done
but i'll just recap what's actually
happening
all right so what's happening well
um in this class here actually let's
start with the actual html so in the
html we are making an unordered list
element right there which is then passed
into the javascript through that
method right there and then we're making
a new instance of the list binding class
passing in the actual physical unordered
list element
from there in the class
in the constructor we are maintaining a
reference to the actual list element
property
and then making an underlying array to
store all these strings of text to be
displayed
inside the update method
we are removing all the existing list
item
elements
and then
filling up the actual ul or the ol tag
so this guy right here
with
the actual text inside
the underlying text list array
this is done by calling the static
method create list item
which simply just makes a list item
element
putting the actual text inside that
for the add method we are simply just
adding um
adding a an item to the actual array
and then using the update method to
actually update the dom once that has
been added so
we're keeping things lean we're only
actually updating what
we need inside the add method same goes
for the remove method we're just
removing an item at that index and then
once again passing it over to the actual
update method
to do the actual dom visual work
all right
and that's how you can
make a
binding from a javascript class to an
html element inside your javascript
classes thank you for watching and i'll
see you later