title
JavaScript Classes Tutorial

description
In JavaScript you can use the OOP (Object-Oriented-Programming) feature of "classes" to construct objects which are then useful resources for your script/application. Learn all about classes in JavaScript in this video. ⭐️ Course Contents ⭐️ ⌨️ (00:00) The Basics ⌨️ (14:40) Getters and Setters ⌨️ (22:43) Static Methods ⌨️ (30:11) Inheritance and Extends ⌨️ (40:22) Polymorphism ⌨️ (46:00) Classes in Practice Learn more about JavaScript in this full course: https://www.youtube.com/playlist?list=PLWKjhJtqVAbk2qRZtWSzCIN38JC_NdhW5 🎥Tutorial by dcode. Check out the dcode channel for more great tutorials: https://www.youtube.com/channel/UCjX0FtIZBBVD3YoCcxnDC4g 🐦dcode on Twitter: @dcodeyt -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://medium.freecodecamp.org

detail
{'title': 'JavaScript Classes Tutorial', 'heatmap': [{'end': 2439.599, 'start': 2395.911, 'weight': 1}], 'summary': 'This tutorial on javascript classes covers creating and using classes, defining constructors, instance properties, methods, getters, setters, static methods, polymorphism, and dom manipulation, with specific examples and practical demonstrations.', 'chapters': [{'end': 122.736, 'segs': [{'end': 32.17, 'src': 'embed', 'start': 0.429, 'weight': 0, 'content': [{'end': 6.095, 'text': "How's it going guys? My name is Dom and today I want to talk about classes in JavaScript.", 'start': 0.429, 'duration': 5.666}, {'end': 15.763, 'text': "So, basically for those of you who haven't ever used classes before, a class is used to create one or more objects.", 'start': 6.355, 'duration': 9.408}, {'end': 23.607, 'text': 'So you can think of an object as being a creation from a class definition.', 'start': 16.344, 'duration': 7.263}, {'end': 32.17, 'text': "So these classes aren't actually used directly by your program logic, but they're used to create objects.", 'start': 23.927, 'duration': 8.243}], 'summary': 'Dom discusses the use of classes in javascript for creating objects.', 'duration': 31.741, 'max_score': 0.429, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2ZphE5HcQPQ/pics/2ZphE5HcQPQ429.jpg'}, {'end': 122.736, 'src': 'embed', 'start': 58.082, 'weight': 1, 'content': [{'end': 69.525, 'text': 'So, with instance properties, taking into, basically, example of a human being, a human might have a name, an age, and a height.', 'start': 58.082, 'duration': 11.443}, {'end': 76.736, 'text': 'So, an instance property describes the current state of that object, what they have.', 'start': 69.865, 'duration': 6.871}, {'end': 81.745, 'text': "It's basically just data about that property, sorry, that object.", 'start': 77.197, 'duration': 4.548}, {'end': 90.651, 'text': 'So, These instance properties are unique to every object which is created from that class definition.', 'start': 82.085, 'duration': 8.566}, {'end': 93.953, 'text': 'So we now have the instance methods.', 'start': 91.352, 'duration': 2.601}, {'end': 95.314, 'text': 'This is what they do.', 'start': 94.333, 'duration': 0.981}, {'end': 101.918, 'text': 'So an instance method for human being might be to talk, to run and to jump.', 'start': 95.414, 'duration': 6.504}, {'end': 107.501, 'text': 'So this refers to what they actually do, what actions and their behavior.', 'start': 102.058, 'duration': 5.443}, {'end': 115.509, 'text': 'So, typically, an instance method will use the instance properties to achieve their result.', 'start': 108.101, 'duration': 7.408}, {'end': 118.332, 'text': 'So, we have those two main areas right there.', 'start': 116.29, 'duration': 2.042}, {'end': 122.736, 'text': "So, let's now create a class in JavaScript.", 'start': 118.692, 'duration': 4.044}], 'summary': "Instance properties and methods describe object's state and behavior, e.g. a human has unique properties like name, age, and height, and methods like talk, run, and jump.", 'duration': 64.654, 'max_score': 58.082, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2ZphE5HcQPQ/pics/2ZphE5HcQPQ58082.jpg'}], 'start': 0.429, 'title': 'Javascript classes overview', 'summary': 'Introduces classes in javascript, explaining the concept of classes as used to create objects, defining instance properties and methods, and providing an example of creating a class in javascript.', 'chapters': [{'end': 122.736, 'start': 0.429, 'title': 'Javascript classes overview', 'summary': 'Introduces classes in javascript, explaining the concept of classes as used to create objects, defining instance properties and methods, and providing an example of creating a class in javascript.', 'duration': 122.307, 'highlights': ['Classes are used to create one or more objects. Classes are used to create objects, demonstrating the purpose of classes in JavaScript.', 'Instance properties describe the current state of an object, unique to every object created from the class definition. Instance properties describe the current state of an object, unique to every object created from the class definition.', 'Instance methods refer to the actions and behavior of an object, typically using instance properties to achieve their result. Instance methods refer to the actions and behavior of an object, typically using instance properties to achieve their result.', 'Introduction to creating a class in JavaScript. Introduction to creating a class in JavaScript, providing practical guidance for implementing classes.']}], 'duration': 122.307, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2ZphE5HcQPQ/pics/2ZphE5HcQPQ429.jpg', 'highlights': ['Classes are used to create one or more objects. Demonstrates the purpose of classes in JavaScript.', 'Instance properties describe the current state of an object, unique to every object created from the class definition.', 'Instance methods refer to the actions and behavior of an object, typically using instance properties to achieve their result.', 'Introduction to creating a class in JavaScript, providing practical guidance for implementing classes.']}, {'end': 402.475, 'segs': [{'end': 213.85, 'src': 'embed', 'start': 123.337, 'weight': 0, 'content': [{'end': 130.104, 'text': 'So, down here, we can create a class definition by using the class keyword.', 'start': 123.337, 'duration': 6.767}, {'end': 135.953, 'text': "Let's type out class like that, followed by the name of your class.", 'start': 131.068, 'duration': 4.885}, {'end': 139.315, 'text': "Let's create a class for a rectangle.", 'start': 136.653, 'duration': 2.662}, {'end': 142.358, 'text': "Let's type out rectangle right there.", 'start': 139.896, 'duration': 2.462}, {'end': 149.563, 'text': 'Now typically by convention, you want to use a capital letter at the beginning of your class name.', 'start': 143.178, 'duration': 6.385}, {'end': 152.866, 'text': "So it's going to be rectangle with a capital R, just like that.", 'start': 149.603, 'duration': 3.263}, {'end': 157.463, 'text': 'followed by two curly braces.', 'start': 154.022, 'duration': 3.441}, {'end': 161.724, 'text': 'so now inside here this is your class definition.', 'start': 157.463, 'duration': 4.261}, {'end': 167.405, 'text': "so every class also has what's called a constructor.", 'start': 161.724, 'duration': 5.681}, {'end': 176.026, 'text': 'now the constructor is basically just a method which is ran only once during the life of the objects.', 'start': 167.405, 'duration': 8.621}, {'end': 182.528, 'text': "so this constructor is ran once and it's ran when the object is being created.", 'start': 176.026, 'duration': 6.502}, {'end': 192.497, 'text': "so Let's define this constructor by typing out constructor like that, followed by two parentheses and your normal curly braces.", 'start': 182.528, 'duration': 9.969}, {'end': 199.001, 'text': 'So the constructor is used to set up your object.', 'start': 192.877, 'duration': 6.124}, {'end': 204.544, 'text': 'okay?. So this behaves like a normal method or a normal function,', 'start': 199.001, 'duration': 5.543}, {'end': 213.85, 'text': 'which means if I type out console.log inside here and then just say the rectangle is being created.', 'start': 204.544, 'duration': 9.306}], 'summary': 'Creating a class for a rectangle with a constructor to set up the object.', 'duration': 90.513, 'max_score': 123.337, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2ZphE5HcQPQ/pics/2ZphE5HcQPQ123337.jpg'}, {'end': 305.314, 'src': 'embed', 'start': 278.359, 'weight': 3, 'content': [{'end': 289.416, 'text': '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,', 'start': 278.359, 'duration': 11.057}, {'end': 293.618, 'text': 'we get two messages of creation.', 'start': 289.416, 'duration': 4.202}, {'end': 298.2, 'text': 'okay, so that is how the constructor method actually works.', 'start': 293.618, 'duration': 4.582}, {'end': 305.314, 'text': 'okay, The constructor is used to actually obviously, as I said, used to set up the actual object.', 'start': 298.2, 'duration': 7.114}], 'summary': 'The constructor method creates two rectangles, demonstrating its function.', 'duration': 26.955, 'max_score': 278.359, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2ZphE5HcQPQ/pics/2ZphE5HcQPQ278359.jpg'}, {'end': 402.475, 'src': 'embed', 'start': 369.059, 'weight': 2, 'content': [{'end': 377.767, 'text': 'so The this keyword right there, that is a keyword which refers to the current object.', 'start': 369.059, 'duration': 8.708}, {'end': 386.609, 'text': "So, when I say this, I'm talking about the object which is being created by that class, okay?", 'start': 378.467, 'duration': 8.142}, {'end': 393.711, 'text': 'So we now have our three instance properties defined inside the constructor.', 'start': 387.79, 'duration': 5.921}, {'end': 402.475, 'text': 'So now, if I was to save this and refresh the browser And in the console,', 'start': 394.772, 'duration': 7.703}], 'summary': "The 'this' keyword refers to the current object and three instance properties are defined inside the constructor.", 'duration': 33.416, 'max_score': 369.059, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2ZphE5HcQPQ/pics/2ZphE5HcQPQ369059.jpg'}], 'start': 123.337, 'title': 'Javascript class creation and constructor method', 'summary': "Covers creating a class in javascript, defining a constructor, and instantiating objects, showcasing the use of 'class' and 'constructor' keywords. it also discusses the constructor method, initializing objects, and defining instance properties like width, height, and color.", 'chapters': [{'end': 252.738, 'start': 123.337, 'title': 'Creating a class in javascript', 'summary': "Covers the process of creating a class in javascript, including defining the class, creating a constructor, and instantiating an object, demonstrating the use of the 'class' and 'constructor' keywords and the process of creating and instantiating objects.", 'duration': 129.401, 'highlights': ["The class keyword is used to create a class definition, as demonstrated by defining a 'rectangle' class with a capital letter at the beginning of the class name.", 'The constructor, defined using the constructor keyword, is a method run only once during the life of the object, used to set up the object and perform tasks such as logging a message when the object is being created.', 'Demonstrating the instantiation of an object from the class using the new keyword to create a new object based off the class.']}, {'end': 305.314, 'start': 253.905, 'title': 'Constructor method in javascript', 'summary': 'Discusses the usage of the constructor method in javascript, showcasing its functionality by creating and initializing objects, leading to the creation of multiple rectangles with messages of creation displayed in the console.', 'duration': 51.409, 'highlights': ['The constructor method is used to set up the actual object, such as initializing properties or performing any necessary setup.', 'Creating multiple rectangles using the constructor method leads to the display of messages of creation for each rectangle in the console window.', 'Hovering over the constructor method displays its usage and functionality, aiding in understanding its implementation.']}, {'end': 402.475, 'start': 305.774, 'title': 'Instance properties in constructor', 'summary': "Discusses defining instance properties such as width, height, and color inside a constructor using the 'this' keyword, with width set to 5, height set to 3, and color set to blue.", 'duration': 96.701, 'highlights': ['The this keyword refers to the current object being created by the class.', "Instance properties like width, height, and color are defined inside the constructor using 'this' keyword.", 'Width is set to 5, height to 3, and color to blue.']}], 'duration': 279.138, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2ZphE5HcQPQ/pics/2ZphE5HcQPQ123337.jpg', 'highlights': ["The class keyword is used to create a class definition, as demonstrated by defining a 'rectangle' class with a capital letter at the beginning of the class name.", 'The constructor method is used to set up the actual object, such as initializing properties or performing any necessary setup.', 'The this keyword refers to the current object being created by the class.', 'Creating multiple rectangles using the constructor method leads to the display of messages of creation for each rectangle in the console window.', 'The constructor, defined using the constructor keyword, is a method run only once during the life of the object, used to set up the object and perform tasks such as logging a message when the object is being created.']}, {'end': 838.005, 'segs': [{'end': 439.796, 'src': 'embed', 'start': 402.475, 'weight': 1, 'content': [{'end': 414.824, 'text': 'if I just refer to the myRectangle object or the variable here and press enter, we can see we get three properties, those color,', 'start': 402.475, 'duration': 12.349}, {'end': 418.207, 'text': 'height and width which describe the current rectangle.', 'start': 414.824, 'duration': 3.383}, {'end': 423.871, 'text': 'So these properties are unique to this rectangle instance.', 'start': 419.267, 'duration': 4.604}, {'end': 439.796, 'text': 'So, in most cases, though, you actually define instance properties when you construct the object, but these are typically user defined.', 'start': 426.253, 'duration': 13.543}], 'summary': 'The myrectangle object has three unique properties: color, height, and width.', 'duration': 37.321, 'max_score': 402.475, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2ZphE5HcQPQ/pics/2ZphE5HcQPQ402475.jpg'}, {'end': 659.122, 'src': 'embed', 'start': 627.171, 'weight': 2, 'content': [{'end': 634.892, 'text': 'so, To work out, I believe, the area of a rectangle, you multiply the width and the height.', 'start': 627.171, 'duration': 7.721}, {'end': 646.362, 'text': 'So, we can actually create a method which will give us the area of this rectangle, or the rectangle being created.', 'start': 635.732, 'duration': 10.63}, {'end': 649.885, 'text': "So, let's define a new instance method.", 'start': 647.123, 'duration': 2.762}, {'end': 653.208, 'text': 'We can do this by typing out the name of the method.', 'start': 650.646, 'duration': 2.562}, {'end': 657.1, 'text': "Let's say getArea.", 'start': 653.668, 'duration': 3.432}, {'end': 659.122, 'text': 'so getArea right there.', 'start': 657.1, 'duration': 2.022}], 'summary': 'To calculate the area of a rectangle, multiply its width and height.', 'duration': 31.951, 'max_score': 627.171, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2ZphE5HcQPQ/pics/2ZphE5HcQPQ627171.jpg'}, {'end': 838.005, 'src': 'embed', 'start': 804.574, 'weight': 0, 'content': [{'end': 818.237, 'text': '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.', 'start': 804.574, 'duration': 13.663}, {'end': 825.28, 'text': "So now, down here, let's call the print description method on the myRectangle number two.", 'start': 818.777, 'duration': 6.503}, {'end': 828.461, 'text': 'Okay, .printDescription.', 'start': 825.3, 'duration': 3.161}, {'end': 834.043, 'text': 'If I was to save and refresh this one, we get the expected result.', 'start': 829.601, 'duration': 4.442}, {'end': 838.005, 'text': 'Rectangle of 10 times five and I am red.', 'start': 834.944, 'duration': 3.061}], 'summary': 'Calling print description method on rectangle gives width, height, and color information.', 'duration': 33.431, 'max_score': 804.574, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2ZphE5HcQPQ/pics/2ZphE5HcQPQ804574.jpg'}], 'start': 402.475, 'title': 'Object instance properties and methods', 'summary': "Covers defining instance properties, using constructor functions to create unique object instances, and creating instance methods to calculate area and print descriptions, with specific examples resulting in different values such as 15 and 50, and customized descriptions like 'rectangle of 10 times 5 and i am red'.", 'chapters': [{'end': 470.995, 'start': 402.475, 'title': 'Instance properties of an object', 'summary': 'Discusses the instance properties of an object, highlighting the unique properties color, height, and width of the rectangle. it explains the process of defining instance properties when constructing an object and customizing rectangles with specific values.', 'duration': 68.52, 'highlights': ['The properties color, height, and width are unique to the rectangle instance, allowing for customized rectangles with specific values.', 'Instance properties are typically defined when constructing the object, such as specifying the dimensions and color during object creation.']}, {'end': 627.171, 'start': 471.575, 'title': 'Instance properties and constructor functions', 'summary': 'Demonstrates the use of constructor functions to accept parameters for creating instances of objects with unique properties, exemplified through the creation of rectangle objects with specific width, height, and color values, showcasing the concept of instance properties and constructor functions.', 'duration': 155.596, 'highlights': ['The chapter demonstrates how to use constructor functions to accept parameters such as width, height, and color, for creating unique instances of objects.', 'It illustrates the process of assigning passed parameters to the instance properties of the rectangle object, showcasing the customization of object properties based on individual needs.', 'The example showcases the creation of two rectangle objects with different sets of custom values, emphasizing the unique instance properties of each object.']}, {'end': 838.005, 'start': 627.171, 'title': 'Rectangle area and description methods', 'summary': "Explains how to create an instance method in a rectangle class to calculate its area and print out its description, which results in different values based on the rectangle being used, demonstrated with the specific example of rectangle1 and rectangle2, resulting in 15 and 50 respectively, and also prints out the description of the rectangle myrectangle2 as 'rectangle of 10 times 5 and i am red'.", 'duration': 210.834, 'highlights': ["The method 'getArea' is created to calculate the area of the rectangle by multiplying its width and height, resulting in different return values based on the rectangle being used, such as 15 and 50 for rectangle1 and rectangle2 respectively.", "The method 'printDescription' is defined to print out a description of the rectangle object, including its width, height, and color, as demonstrated by calling it on 'myRectangle2' and obtaining the expected result of 'Rectangle of 10 times 5 and I am red'.", 'Explanation of how the methods are defined in the class and are generic to the class, using instance properties from the constructor to provide different results based on the object being used.']}], 'duration': 435.53, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2ZphE5HcQPQ/pics/2ZphE5HcQPQ402475.jpg', 'highlights': ["The method 'printDescription' is defined to print out a description of the rectangle object, including its width, height, and color, as demonstrated by calling it on 'myRectangle2' and obtaining the expected result of 'Rectangle of 10 times 5 and I am red'.", 'The properties color, height, and width are unique to the rectangle instance, allowing for customized rectangles with specific values.', "The method 'getArea' is created to calculate the area of the rectangle by multiplying its width and height, resulting in different return values based on the rectangle being used, such as 15 and 50 for rectangle1 and rectangle2 respectively."]}, {'end': 1398.554, 'segs': [{'end': 905.99, 'src': 'embed', 'start': 839.577, 'weight': 0, 'content': [{'end': 852.864, 'text': 'okay. so, just to recap, we have a class which is a definition, basically a structure, of the eventual object being created.', 'start': 839.577, 'duration': 13.287}, {'end': 860.228, 'text': 'we have an instance property which refers to data that is relevant to each individual object being created,', 'start': 852.864, 'duration': 7.364}, {'end': 871.477, 'text': '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,', 'start': 860.868, 'duration': 10.609}, {'end': 874.419, 'text': 'each individual object being created from that class.', 'start': 871.477, 'duration': 2.942}, {'end': 879.444, 'text': 'And that is the basics of classes in JavaScript.', 'start': 876.121, 'duration': 3.323}, {'end': 887.941, 'text': 'I want to talk about getters and setters in JavaScript classes.', 'start': 883.499, 'duration': 4.442}, {'end': 900.167, 'text': "So, basically, getters and setters are used to define methods on a class which are then used as if they're properties.", 'start': 888.261, 'duration': 11.906}, {'end': 905.99, 'text': "So, essentially, they look like properties but they're actually methods of that class.", 'start': 900.308, 'duration': 5.682}], 'summary': 'Classes in javascript define object structure, properties, and methods. getters and setters behave like properties.', 'duration': 66.413, 'max_score': 839.577, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2ZphE5HcQPQ/pics/2ZphE5HcQPQ839577.jpg'}, {'end': 1138.915, 'src': 'embed', 'start': 1112.001, 'weight': 5, 'content': [{'end': 1118.004, 'text': 'you can say square one, dot, area equals and then something like 25, for example.', 'start': 1112.001, 'duration': 6.003}, {'end': 1120.546, 'text': "so let's create this setter.", 'start': 1118.004, 'duration': 2.542}, {'end': 1128.251, 'text': 'so this right here, this line right there, will actually convert this 25 into a width and height for these two properties.', 'start': 1120.546, 'duration': 7.705}, {'end': 1134.654, 'text': "okay, so back inside here let's just create a setter for area.", 'start': 1128.251, 'duration': 6.403}, {'end': 1138.915, 'text': "so we'll say set and then put area like that.", 'start': 1134.654, 'duration': 4.261}], 'summary': 'Code sets area as 25, converting it to width and height.', 'duration': 26.914, 'max_score': 1112.001, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2ZphE5HcQPQ/pics/2ZphE5HcQPQ1112001.jpg'}, {'end': 1298.886, 'src': 'embed', 'start': 1260.455, 'weight': 6, 'content': [{'end': 1261.616, 'text': 'That is the basics right there.', 'start': 1260.455, 'duration': 1.161}, {'end': 1266.741, 'text': 'I just want to show another example of how you can basically treat these like a function.', 'start': 1262.317, 'duration': 4.424}, {'end': 1277.65, 'text': "With this getter, let's actually keep track of how many times we have requested this square to give us the area.", 'start': 1268.622, 'duration': 9.028}, {'end': 1285.757, 'text': "Every time I call this getter, I want to actually increment a number which tells us how many times we've called this getter.", 'start': 1279.271, 'duration': 6.486}, {'end': 1298.886, 'text': "Up inside here, let's create a new instance variable, and we'll call this one number of requests for area, okay? Equal to zero.", 'start': 1287.078, 'duration': 11.808}], 'summary': 'Example of using a getter to track the number of requests for area.', 'duration': 38.431, 'max_score': 1260.455, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2ZphE5HcQPQ/pics/2ZphE5HcQPQ1260455.jpg'}, {'end': 1398.554, 'src': 'embed', 'start': 1344.141, 'weight': 2, 'content': [{'end': 1352.489, 'text': '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,', 'start': 1344.141, 'duration': 8.348}, {'end': 1355.031, 'text': "and that is how many times I've actually requested for the area.", 'start': 1352.489, 'duration': 2.542}, {'end': 1362.098, 'text': 'Okay So that is how you can use getters and setters on classes in JavaScript.', 'start': 1355.672, 'duration': 6.426}, {'end': 1369.808, 'text': 'I want to talk about static methods in JavaScript classes.', 'start': 1366.187, 'duration': 3.621}, {'end': 1384.533, 'text': "So basically a static method is a method which is defined on a class but it is not actually part of the instantiated object once it's been created.", 'start': 1370.208, 'duration': 14.325}, {'end': 1392.756, 'text': 'So basically a static method does not require an instance of the class to be created in order to be used.', 'start': 1384.773, 'duration': 7.983}, {'end': 1398.554, 'text': "A lot of static methods are what's called helper methods,", 'start': 1394.813, 'duration': 3.741}], 'summary': 'Using getters and setters, and static methods in javascript classes for creating and using helper methods.', 'duration': 54.413, 'max_score': 1344.141, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2ZphE5HcQPQ/pics/2ZphE5HcQPQ1344141.jpg'}], 'start': 839.577, 'title': 'Javascript class getters and setters', 'summary': 'Delves into basics of javascript classes, including class definition, instance properties, and methods. it explains how to use getters and setters to calculate the area of a square, modify its dimensions, and introduces static methods.', 'chapters': [{'end': 905.99, 'start': 839.577, 'title': 'Getters and setters in javascript classes', 'summary': 'Introduces the basics of classes in javascript, including class definition, instance properties, and instance methods, and then delves into the concept of getters and setters, which are methods used as properties in a class.', 'duration': 66.413, 'highlights': ['Getters and setters in JavaScript classes define methods that are used as properties, providing a way to access and modify class attributes.', 'Instance method uses the instance properties to achieve an action or result based on each individual object being created from that class.', 'Instance property refers to data that is relevant to each individual object being created.', 'The class is a definition, basically a structure, of the eventual object being created.']}, {'end': 1398.554, 'start': 906.09, 'title': 'Javascript class getters and setters', 'summary': 'Explains how to define a class in javascript with getters and setters to calculate the area of a square, modify its width and height based on the area, and keep track of the number of requests for the area, as well as introduces static methods in javascript classes.', 'duration': 492.464, 'highlights': ['The chapter explains how to define a class in JavaScript with getters and setters to calculate the area of a square Demonstrates the use of getters and setters to calculate the area of a square in JavaScript.', 'modify its width and height based on the area Illustrates how to create a setter to modify the width and height of a square based on the area passed in.', 'keep track of the number of requests for the area Shows how to use a getter to keep track of the number of times the area of a square has been requested.', 'introduces static methods in JavaScript classes Introduces the concept of static methods in JavaScript classes as helper methods that do not require an instance of the class to be created.']}], 'duration': 558.977, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2ZphE5HcQPQ/pics/2ZphE5HcQPQ839577.jpg', 'highlights': ['Getters and setters in JavaScript classes define methods that are used as properties, providing a way to access and modify class attributes.', 'Instance method uses the instance properties to achieve an action or result based on each individual object being created from that class.', 'The chapter explains how to define a class in JavaScript with getters and setters to calculate the area of a square Demonstrates the use of getters and setters to calculate the area of a square in JavaScript.', 'Instance property refers to data that is relevant to each individual object being created.', 'The class is a definition, basically a structure, of the eventual object being created.', 'modify its width and height based on the area Illustrates how to create a setter to modify the width and height of a square based on the area passed in.', 'keep track of the number of requests for the area Shows how to use a getter to keep track of the number of times the area of a square has been requested.', 'introduces static methods in JavaScript classes Introduces the concept of static methods in JavaScript classes as helper methods that do not require an instance of the class to be created.']}, {'end': 1675.556, 'segs': [{'end': 1491.278, 'src': 'embed', 'start': 1429.744, 'weight': 0, 'content': [{'end': 1439.732, 'text': "Let's just say constructor and we'll say this.width is equal to that width parameter and this.height is also equal to that width parameter.", 'start': 1429.744, 'duration': 9.988}, {'end': 1444.215, 'text': 'So now we have a square class with a constructor.', 'start': 1439.832, 'duration': 4.383}, {'end': 1448.233, 'text': "So now let's just create an instance of this square.", 'start': 1444.415, 'duration': 3.818}, {'end': 1457.776, 'text': "so down here let's create a new variable here and call this one square1, equal to a new square passing in a width of, let's just say, 8.", 'start': 1448.233, 'duration': 9.543}, {'end': 1462.357, 'text': 'okay, so now we have this, this square.', 'start': 1457.776, 'duration': 4.581}, {'end': 1467.139, 'text': 'so if I also just console.log this square in the console,', 'start': 1462.357, 'duration': 4.782}, {'end': 1472.961, 'text': 'save this and refresh the browser in the console we get obviously a square width of 8 and height of 8.', 'start': 1467.139, 'duration': 5.822}, {'end': 1478.834, 'text': "so now let's create a static method on this square class.", 'start': 1472.961, 'duration': 5.873}, {'end': 1491.278, 'text': "that's basically going to compare two square instances and then let us know if they are of equal width and height.", 'start': 1478.834, 'duration': 12.444}], 'summary': "A square class with a constructor is created, an instance is generated with a width of 8, and a static method to compare instances' dimensions is added.", 'duration': 61.534, 'max_score': 1429.744, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2ZphE5HcQPQ/pics/2ZphE5HcQPQ1429744.jpg'}, {'end': 1615.858, 'src': 'embed', 'start': 1522.624, 'weight': 2, 'content': [{'end': 1526.167, 'text': 'so a and b are two different square instances.', 'start': 1522.624, 'duration': 3.543}, {'end': 1526.447, 'text': 'all right,', 'start': 1526.167, 'duration': 0.28}, {'end': 1536.656, 'text': '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.', 'start': 1527.188, 'duration': 9.468}, {'end': 1543.862, 'text': "so let's just return, then use the ternary operator.", 'start': 1536.656, 'duration': 7.206}, {'end': 1551.15, 'text': "let's just say return if a.width um.", 'start': 1543.862, 'duration': 7.288}, {'end': 1558.835, 'text': 'times a dot height is equal to b dot width times b dot height um..', 'start': 1551.15, 'duration': 7.685}, {'end': 1560.136, 'text': 'then return.', 'start': 1558.835, 'duration': 1.301}, {'end': 1563.558, 'text': "true, actually, let's just return that.", 'start': 1560.136, 'duration': 3.422}, {'end': 1572.964, 'text': "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,", 'start': 1563.558, 'duration': 9.406}, {'end': 1573.924, 'text': 'um.', 'start': 1572.964, 'duration': 0.96}, {'end': 1575.926, 'text': 'obviously just return um..', 'start': 1573.924, 'duration': 2.002}, {'end': 1579.862, 'text': 'return that comparison result So now this method should work.', 'start': 1575.926, 'duration': 3.936}, {'end': 1582.024, 'text': "Let's test this out.", 'start': 1581.043, 'duration': 0.981}, {'end': 1588.029, 'text': "I'm going to create another square here, square 2, with a width and height of 9.", 'start': 1582.044, 'duration': 5.985}, {'end': 1590.852, 'text': 'So we have two different areas for these two squares.', 'start': 1588.029, 'duration': 2.823}, {'end': 1598.038, 'text': "And then down here, I'm going to console.log the return value of this equals static method.", 'start': 1592.153, 'duration': 5.885}, {'end': 1600.28, 'text': 'And I actually call a static method.', 'start': 1598.579, 'duration': 1.701}, {'end': 1611.176, 'text': 'you call it directly on the actual square class itself and not on a square instance.', 'start': 1602.011, 'duration': 9.165}, {'end': 1615.858, 'text': "let's just type out square here and then dot equals.", 'start': 1611.176, 'duration': 4.682}], 'summary': 'Creating and comparing square instances to check for equality based on area.', 'duration': 93.234, 'max_score': 1522.624, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2ZphE5HcQPQ/pics/2ZphE5HcQPQ1522624.jpg'}], 'start': 1398.554, 'title': 'Static method for comparing square instances', 'summary': 'Covers the creation of a square class with a constructor taking in a width of 8 and demonstrates the creation of a static method to compare square instances for equal width and height. it also discusses defining a static method in javascript to compare the areas of two square instances with specific examples, resulting in a true or false output.', 'chapters': [{'end': 1491.278, 'start': 1398.554, 'title': 'Static method for comparing square instances', 'summary': 'Covers the creation of a square class with a constructor taking in a width, and then demonstrates the creation of an instance with a width of 8. it also introduces the creation of a static method to compare square instances for equal width and height.', 'duration': 92.724, 'highlights': ['The chapter covers the creation of a square class with a constructor taking in a width, and then demonstrates the creation of an instance with a width of 8.', 'It also introduces the creation of a static method to compare square instances for equal width and height.']}, {'end': 1675.556, 'start': 1491.278, 'title': 'Defining a static method', 'summary': 'Discusses defining a static method in javascript, explaining the process of creating a method to compare the areas of two square instances and demonstrating its usage with specific examples, resulting in a true or false output based on the comparison.', 'duration': 184.278, 'highlights': ['Demonstrating the usage of a static method to compare areas of square instances resulting in true or false output based on the comparison The chapter demonstrates the usage of a static method to compare the areas of two square instances, showcasing the return of true or false based on the comparison of their widths and heights.', 'Explanation of creating a method to check the equality of areas of two squares and its parameters The method checks the equality of areas of two squares by comparing their widths and heights, taking two square instances as parameters.', 'Utilizing the ternary operator to return the comparison result of the areas of the squares The usage of the ternary operator to return the comparison result of the areas of the squares, providing a practical demonstration of conditional return based on the equality of areas.', 'Illustration of invoking a static method directly on the class to compare areas of square instances The chapter illustrates the invocation of a static method directly on the class to compare the areas of the square instances, showcasing the direct usage of the square class for method invocation.']}], 'duration': 277.002, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2ZphE5HcQPQ/pics/2ZphE5HcQPQ1398554.jpg', 'highlights': ['The chapter covers the creation of a square class with a constructor taking in a width, and then demonstrates the creation of an instance with a width of 8.', 'It also introduces the creation of a static method to compare square instances for equal width and height.', 'Demonstrating the usage of a static method to compare areas of square instances resulting in true or false output based on the comparison.', 'Explanation of creating a method to check the equality of areas of two squares and its parameters.', 'Utilizing the ternary operator to return the comparison result of the areas of the squares.', 'Illustration of invoking a static method directly on the class to compare areas of square instances.']}, {'end': 2407.378, 'segs': [{'end': 1707.548, 'src': 'embed', 'start': 1676.557, 'weight': 0, 'content': [{'end': 1688.602, 'text': 'Probably a better example of this would be maybe a static method that will test whether or not a width and height is a valid square.', 'start': 1676.557, 'duration': 12.045}, {'end': 1693.544, 'text': 'So for a square to be valid, it needs to have an equal width and an equal height.', 'start': 1688.682, 'duration': 4.862}, {'end': 1704.507, 'text': "Okay, so Let's just create a new static method down here and call this one something like isValidDimensions.", 'start': 1693.884, 'duration': 10.623}, {'end': 1707.548, 'text': 'This takes in a width and a height.', 'start': 1704.527, 'duration': 3.021}], 'summary': 'Creating a static method isvaliddimensions to test if width and height form a valid square.', 'duration': 30.991, 'max_score': 1676.557, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2ZphE5HcQPQ/pics/2ZphE5HcQPQ1676557.jpg'}, {'end': 1844.263, 'src': 'embed', 'start': 1792.39, 'weight': 3, 'content': [{'end': 1799.787, 'text': '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.', 'start': 1792.39, 'duration': 7.397}, {'end': 1800.848, 'text': "There's no error or anything.", 'start': 1799.807, 'duration': 1.041}, {'end': 1804.63, 'text': "So you can see how it's sort of like a helper function.", 'start': 1801.248, 'duration': 3.382}, {'end': 1809.994, 'text': "Alright, and that's how you can use static methods in classes in JavaScript.", 'start': 1805.171, 'duration': 4.823}, {'end': 1819.841, 'text': 'I want to talk about inheritance or the extends keyword in regards to JavaScript classes.', 'start': 1813.937, 'duration': 5.904}, {'end': 1827.547, 'text': 'So basically, the extends keyword allows you to achieve the concept of inheritance in JavaScript classes.', 'start': 1820.541, 'duration': 7.006}, {'end': 1840.039, 'text': "So 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,", 'start': 1827.828, 'duration': 12.211}, {'end': 1844.263, 'text': 'while still maintaining its features and behavior, but a little bit extra.', 'start': 1840.039, 'duration': 4.224}], 'summary': 'Using static methods and inheritance in javascript classes.', 'duration': 51.873, 'max_score': 1792.39, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2ZphE5HcQPQ/pics/2ZphE5HcQPQ1792390.jpg'}, {'end': 1968.479, 'src': 'embed', 'start': 1934.101, 'weight': 1, 'content': [{'end': 1941.043, 'text': 'not a generic person with no attribute on their skill or occupation.', 'start': 1934.101, 'duration': 6.942}, {'end': 1950.894, 'text': "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.", 'start': 1941.203, 'duration': 9.691}, {'end': 1955.756, 'text': 'so we can achieve this by creating a new class.', 'start': 1950.894, 'duration': 4.862}, {'end': 1958.757, 'text': 'okay, and call this one programmer.', 'start': 1955.756, 'duration': 3.001}, {'end': 1968.479, 'text': "okay. now, if we type up extends here, so extends, and then say person, we've just achieved inheritance.", 'start': 1958.757, 'duration': 9.722}], 'summary': "Creating a child class 'programmer' that inherits from 'person' class achieves inheritance.", 'duration': 34.378, 'max_score': 1934.101, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2ZphE5HcQPQ/pics/2ZphE5HcQPQ1934101.jpg'}], 'start': 1676.557, 'title': 'Static method for valid square and javascript classes', 'summary': 'Discusses creating a static method called isvaliddimensions within the square class to test whether a given width and height form a valid square, demonstrating its usage with specific input values and their resulting true or false return values. it also explains the usage of static methods and inheritance in javascript classes, demonstrating how to create a child class with additional functionality while maintaining the behavior of the parent class, with an example of a programmer class inheriting from a person class and adding a custom method.', 'chapters': [{'end': 1792.39, 'start': 1676.557, 'title': 'Static method for valid square', 'summary': 'Discusses creating a static method called isvaliddimensions within the square class to test whether a given width and height form a valid square, demonstrating its usage with specific input values and their resulting true or false return values.', 'duration': 115.833, 'highlights': ['The static method isValidDimensions is created within the square class to test the validity of a square based on given width and height, with 6 and 6 resulting in true and 7 and 6 resulting in false.', 'Static methods, such as isValidDimensions, are relevant to the class but do not require an instance of the class to operate, serving as helper functions.']}, {'end': 2407.378, 'start': 1792.39, 'title': 'Javascript classes and inheritance', 'summary': 'Explains the usage of static methods and inheritance in javascript classes, demonstrating how to create a child class with additional functionality while maintaining the behavior of the parent class, with an example of a programmer class inheriting from a person class and adding a custom method.', 'duration': 614.988, 'highlights': ['The extends keyword allows achieving the concept of inheritance in JavaScript classes. Explains how the extends keyword is used to create a child class with additional functionality while maintaining the behavior of the parent class.', 'Creation of a programmer class that inherits from a person class and adds a custom method. Demonstrates the creation of a programmer class inheriting from a person class, showcasing how the child class adds a custom method while still having access to the properties and behavior of the parent class.', 'Demonstrates the usage of static methods in classes in JavaScript. Illustrates how static methods are used in JavaScript classes, showing how they function as helper functions.']}], 'duration': 730.821, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2ZphE5HcQPQ/pics/2ZphE5HcQPQ1676557.jpg', 'highlights': ['The static method isValidDimensions is created within the square class to test the validity of a square based on given width and height, with 6 and 6 resulting in true and 7 and 6 resulting in false.', 'Creation of a programmer class that inherits from a person class and adds a custom method. Demonstrates the creation of a programmer class inheriting from a person class, showcasing how the child class adds a custom method while still having access to the properties and behavior of the parent class.', 'Static methods, such as isValidDimensions, are relevant to the class but do not require an instance of the class to operate, serving as helper functions.', 'The extends keyword allows achieving the concept of inheritance in JavaScript classes. Explains how the extends keyword is used to create a child class with additional functionality while maintaining the behavior of the parent class.', 'Demonstrates the usage of static methods in classes in JavaScript. Illustrates how static methods are used in JavaScript classes, showing how they function as helper functions.']}, {'end': 2737.254, 'segs': [{'end': 2442.36, 'src': 'embed', 'start': 2408.799, 'weight': 0, 'content': [{'end': 2413.722, 'text': 'Refresh this and we get Dom is coding and Jeff is coding.', 'start': 2408.799, 'duration': 4.923}, {'end': 2414.763, 'text': 'All right.', 'start': 2414.522, 'duration': 0.241}, {'end': 2421.255, 'text': "And that's how you can achieve inheritance using the extends keyword in JavaScript.", 'start': 2416.306, 'duration': 4.949}, {'end': 2430.035, 'text': 'I want to talk about the concept of polymorphism in JavaScript classes.', 'start': 2425.213, 'duration': 4.822}, {'end': 2439.599, 'text': 'So, basically polymorphism is the act of redefining a method inside a derived child class of a parent.', 'start': 2430.275, 'duration': 9.324}, {'end': 2442.36, 'text': "So, let's just see with an example.", 'start': 2439.759, 'duration': 2.601}], 'summary': 'Discussing inheritance and polymorphism in javascript classes.', 'duration': 33.561, 'max_score': 2408.799, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2ZphE5HcQPQ/pics/2ZphE5HcQPQ2408799.jpg'}, {'end': 2707.086, 'src': 'embed', 'start': 2643.442, 'weight': 1, 'content': [{'end': 2650.188, 'text': 'If I was to save this and refresh, this time we get woof-woof in the console.', 'start': 2643.442, 'duration': 6.746}, {'end': 2663.598, 'text': "So we can see how we're actually achieving polymorphism here by overriding the method inside the child class dog of that in the parent class makeSound.", 'start': 2651.168, 'duration': 12.43}, {'end': 2665.66, 'text': "So we're just basically overriding it.", 'start': 2663.638, 'duration': 2.022}, {'end': 2675.734, 'text': 'So if I was to comment that out in the child class and save and refresh, we get once again the generic sound.', 'start': 2666.16, 'duration': 9.574}, {'end': 2683.181, 'text': "So what's happening here is it's actually checking on the dog class if it has that method.", 'start': 2675.914, 'duration': 7.267}, {'end': 2688.426, 'text': "If it doesn't, then it checks the parent class and it uses that one right there.", 'start': 2683.721, 'duration': 4.705}, {'end': 2691.132, 'text': "Alright, so that's polymorphism.", 'start': 2689.21, 'duration': 1.922}, {'end': 2701.741, 'text': "I'll just show one more example, this time calling the super inside the actual overridden method.", 'start': 2691.712, 'duration': 10.029}, {'end': 2707.086, 'text': 'So, I can actually call the parent method inside the derived method.', 'start': 2702.002, 'duration': 5.084}], 'summary': 'Achieving polymorphism by overriding methods in child class, demonstrating the concept and its usage.', 'duration': 63.644, 'max_score': 2643.442, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2ZphE5HcQPQ/pics/2ZphE5HcQPQ2643442.jpg'}], 'start': 2408.799, 'title': 'Javascript polymorphism in classes', 'summary': "Delves into the concept of polymorphism in javascript classes, showcasing inheritance and method overriding through the extends keyword. it demonstrates this using an example of an animal class and its derived dog class, achieving polymorphism with the console output of 'woof-woof'.", 'chapters': [{'end': 2737.254, 'start': 2408.799, 'title': 'Javascript polymorphism in classes', 'summary': "Explains the concept of polymorphism in javascript classes, demonstrating inheritance and method overriding using the extends keyword, with an example of a generic animal class and its derived child class dog, achieving polymorphism by overriding the makesound method, resulting in the console output of 'woof-woof'.", 'duration': 328.455, 'highlights': ['The chapter explains the concept of polymorphism in JavaScript classes It details the concept of polymorphism in JavaScript classes, demonstrating the ability to redefine a method inside a derived child class of a parent, achieving polymorphism.', 'demonstrating inheritance and method overriding using the extends keyword It demonstrates the use of the extends keyword in JavaScript to achieve inheritance and method overriding, showcasing the relationship between a generic animal class and its derived child class dog.', 'an example of a generic animal class and its derived child class dog It provides an example of a generic animal class and its derived child class dog, illustrating the concept of polymorphism through method overriding.', "achieving polymorphism by overriding the makeSound method, resulting in the console output of 'woof-woof' It showcases the achievement of polymorphism by overriding the makeSound method in the derived child class dog, resulting in the console output of 'woof-woof' when the method is called."]}], 'duration': 328.455, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2ZphE5HcQPQ/pics/2ZphE5HcQPQ2408799.jpg', 'highlights': ['demonstrating inheritance and method overriding using the extends keyword It demonstrates the use of the extends keyword in JavaScript to achieve inheritance and method overriding, showcasing the relationship between a generic animal class and its derived child class dog.', "achieving polymorphism by overriding the makeSound method, resulting in the console output of 'woof-woof' It showcases the achievement of polymorphism by overriding the makeSound method in the derived child class dog, resulting in the console output of 'woof-woof' when the method is called.", 'The chapter explains the concept of polymorphism in JavaScript classes It details the concept of polymorphism in JavaScript classes, demonstrating the ability to redefine a method inside a derived child class of a parent, achieving polymorphism.', 'an example of a generic animal class and its derived child class dog It provides an example of a generic animal class and its derived child class dog, illustrating the concept of polymorphism through method overriding.']}, {'end': 3688.283, 'segs': [{'end': 2801.979, 'src': 'embed', 'start': 2737.274, 'weight': 0, 'content': [{'end': 2746.69, 'text': 'If I was to save this and refresh the browser, this time we see here generic and then woof woof.', 'start': 2737.274, 'duration': 9.416}, {'end': 2752.336, 'text': 'So, these two right here are part of the dog.makeSound method call.', 'start': 2746.71, 'duration': 5.626}, {'end': 2759.463, 'text': "Okay? And that's how you can achieve polymorphism inside your JavaScript classes.", 'start': 2753.037, 'duration': 6.426}, {'end': 2771.825, 'text': 'I want to show you an example of how you can use the JavaScript classes to make a binding to a HTML element.', 'start': 2763.707, 'duration': 8.118}, {'end': 2781.769, 'text': "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.", 'start': 2771.945, 'duration': 9.824}, {'end': 2791.013, 'text': 'So, for example, here I have an unordered list element on the HTML document with a few list items inside it.', 'start': 2782.189, 'duration': 8.824}, {'end': 2801.979, 'text': 'okay? In the JavaScript I can actually just type out list.add and then add an item to that list directly.', 'start': 2791.013, 'duration': 10.966}], 'summary': 'Javascript classes demonstrate polymorphism and dom manipulation.', 'duration': 64.705, 'max_score': 2737.274, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2ZphE5HcQPQ/pics/2ZphE5HcQPQ2737274.jpg'}, {'end': 2971.374, 'src': 'embed', 'start': 2935.962, 'weight': 3, 'content': [{'end': 2946.765, 'text': "Okay, so in this class, we're actually going to be able to pass in the myList element to the class constructor.", 'start': 2935.962, 'duration': 10.803}, {'end': 2954.648, 'text': 'Okay, so this class will actually keep a reference to the physical tag or element.', 'start': 2947.466, 'duration': 7.182}, {'end': 2963.391, 'text': "Okay, so in the constructor, let's just take in a single argument and call this one element.", 'start': 2955.168, 'duration': 8.223}, {'end': 2971.374, 'text': 'Okay Now we can say this.listElement is equal to element.', 'start': 2963.911, 'duration': 7.463}], 'summary': 'Class allows passing mylist element to constructor, keeping reference to physical tag or element.', 'duration': 35.412, 'max_score': 2935.962, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2ZphE5HcQPQ/pics/2ZphE5HcQPQ2935962.jpg'}, {'end': 3113.875, 'src': 'embed', 'start': 3041.185, 'weight': 4, 'content': [{'end': 3054.653, 'text': 'the update method is actually just going to update the physical DOM, so the physical list element with the items contained in text list.', 'start': 3041.185, 'duration': 13.468}, {'end': 3066.329, 'text': 'so we maintain an array of strings and then the update method is actually going to insert all these strings into the physical list element property or list element.', 'start': 3054.653, 'duration': 11.676}, {'end': 3075.355, 'text': 'so down here we can start by first clearing the list element of list items.', 'start': 3066.329, 'duration': 9.026}, {'end': 3085.241, 'text': "so let's just say remove all existing ally elements or slash tags.", 'start': 3075.355, 'duration': 9.886}, {'end': 3092.526, 'text': 'we can say while this.listElement.firstChild, so while there is a first child,', 'start': 3085.241, 'duration': 7.285}, {'end': 3100.81, 'text': 'then we can say this.listElement.removeChild and pass in the first child.', 'start': 3093.487, 'duration': 7.323}, {'end': 3109.913, 'text': 'So this right here is going to remove all the existing ally tags from the list element.', 'start': 3102.91, 'duration': 7.003}, {'end': 3113.875, 'text': "So let's just see an example of this in use.", 'start': 3110.193, 'duration': 3.682}], 'summary': 'The update method inserts strings into the list element, removing existing list items.', 'duration': 72.69, 'max_score': 3041.185, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2ZphE5HcQPQ/pics/2ZphE5HcQPQ3041185.jpg'}, {'end': 3459.368, 'src': 'embed', 'start': 3385.334, 'weight': 8, 'content': [{'end': 3394.8, 'text': 'Basically, these two methods right here are simply just going to update the underlying array, that guy right there.', 'start': 3385.334, 'duration': 9.466}, {'end': 3398.624, 'text': 'and then call the update method.', 'start': 3395.962, 'duration': 2.662}, {'end': 3403.208, 'text': "So it's going to be quite lean and what do you call it, loose coupling.", 'start': 3398.825, 'duration': 4.383}, {'end': 3408.553, 'text': "So down here, let's make a new add method.", 'start': 3403.649, 'duration': 4.904}, {'end': 3411.115, 'text': 'This will take in some text.', 'start': 3409.454, 'duration': 1.661}, {'end': 3413.017, 'text': "We'll say text just like that.", 'start': 3411.576, 'duration': 1.441}, {'end': 3422.285, 'text': "Inside here, let's just say this.textList and call the push method.", 'start': 3414.358, 'duration': 7.927}, {'end': 3425.936, 'text': "we're going to push text to the array.", 'start': 3423.373, 'duration': 2.563}, {'end': 3430.722, 'text': 'So this will add this text to this underlying array.', 'start': 3425.976, 'duration': 4.746}, {'end': 3431.803, 'text': 'Quite simple.', 'start': 3431.202, 'duration': 0.601}, {'end': 3436.448, 'text': "And then we're going to say this dot update.", 'start': 3432.664, 'duration': 3.784}, {'end': 3445.917, 'text': 'So basically, um, The add method does its simple job of adding the actual text to the array.', 'start': 3438.431, 'duration': 7.486}, {'end': 3455.785, 'text': 'Then the update method does its job of updating the actual physical document object model, the actual HTML page.', 'start': 3446.597, 'duration': 9.188}, {'end': 3459.368, 'text': "Let's just save this and test it out.", 'start': 3457.787, 'duration': 1.581}], 'summary': 'Methods update array and html page, ensuring loose coupling.', 'duration': 74.034, 'max_score': 3385.334, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2ZphE5HcQPQ/pics/2ZphE5HcQPQ3385334.jpg'}, {'end': 3624.182, 'src': 'embed', 'start': 3570.112, 'weight': 2, 'content': [{'end': 3576.658, 'text': "Alright, so what's happening? Well, In this class here, actually let's start with the actual HTML.", 'start': 3570.112, 'duration': 6.546}, {'end': 3585.623, 'text': '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.', 'start': 3576.678, 'duration': 8.945}, {'end': 3595.429, 'text': "And then we're making a new instance of the list binding class passing in the actual physical unordered list element.", 'start': 3586.364, 'duration': 9.065}, {'end': 3599.792, 'text': 'From there, in the class, In the constructor,', 'start': 3596.05, 'duration': 3.742}, {'end': 3610.878, 'text': '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.', 'start': 3599.792, 'duration': 11.086}, {'end': 3624.182, 'text': 'Inside the update method, we are removing all the existing list item elements and then filling up the actual UL or the OL tag.', 'start': 3612.392, 'duration': 11.79}], 'summary': 'Using html and javascript to create and update an unordered list element in a class.', 'duration': 54.07, 'max_score': 3570.112, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2ZphE5HcQPQ/pics/2ZphE5HcQPQ3570112.jpg'}, {'end': 3685.742, 'src': 'embed', 'start': 3656.127, 'weight': 11, 'content': [{'end': 3658.129, 'text': "So we're keeping things lean.", 'start': 3656.127, 'duration': 2.002}, {'end': 3662.952, 'text': "We're only actually updating what? we need inside the add method.", 'start': 3658.549, 'duration': 4.403}, {'end': 3664.793, 'text': 'Same goes for the remove method.', 'start': 3663.572, 'duration': 1.221}, {'end': 3674.697, 'text': "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.", 'start': 3665.233, 'duration': 9.464}, {'end': 3685.742, 'text': "Alright? And that's how you can make a binding from a JavaScript class to an HTML element inside your JavaScript classes.", 'start': 3675.337, 'duration': 10.405}], 'summary': 'Keeping methods lean, updating only necessary data, and making javascript class binding to html element.', 'duration': 29.615, 'max_score': 3656.127, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2ZphE5HcQPQ/pics/2ZphE5HcQPQ3656127.jpg'}], 'start': 2737.274, 'title': 'Javascript class and dom manipulation', 'summary': 'Discusses achieving polymorphism in javascript classes, manipulating the dom, creating a class for list binding to an html element. it introduces a class constructor and an update method, demonstrates manipulating list elements and javascript binding to an html list.', 'chapters': [{'end': 2935.308, 'start': 2737.274, 'title': 'Javascript class and dom manipulation', 'summary': 'Discusses achieving polymorphism inside javascript classes, manipulating the dom directly, and creating a class for list binding to a html element, with specific examples and code demonstration.', 'duration': 198.034, 'highlights': ['Achieving polymorphism inside JavaScript classes Demonstrates how to achieve polymorphism inside JavaScript classes by using the dog.makeSound method call.', 'Manipulating the DOM directly Illustrates how to manipulate the DOM directly by adding and removing items from an unordered list element using JavaScript.', 'Creating a class for list binding to a HTML element Details the process of creating a class, listbinding, which is linked to the HTML document and can manipulate the list element using JavaScript.']}, {'end': 3075.355, 'start': 2935.962, 'title': 'Class constructor and update method', 'summary': 'Introduces a class constructor that takes in a mylist element and a method called update to update the physical list element with the items contained in the text list array.', 'duration': 139.393, 'highlights': ['The class constructor can take in a myList element to keep a reference to the physical tag or element.', 'The textList array is used to contain strings and will eventually hold all the text items to be updated in the physical list element.', 'The update method is designed to update the physical DOM by inserting all the strings from the textList array into the list element.']}, {'end': 3315.067, 'start': 3075.355, 'title': 'Manipulating list elements in javascript', 'summary': 'Demonstrates how to remove all existing li tags from a list element, update the list using a list binding class, and fill the list element with li tags generated from an array of strings.', 'duration': 239.712, 'highlights': ['The code demonstrates how to remove all existing li tags from a list element using a while loop and removeChild method, providing a practical solution for clearing the list element. This approach ensures efficient removal of existing list items, improving performance and user experience.', 'The chapter showcases the usage of a list binding class to update the list element, illustrating the practical implementation of the update method to dynamically modify the content of the list element. This enables seamless updating of the list, enhancing the interactivity and responsiveness of the web application.', 'The transcript explains the process of filling the list element with li tags generated from the text list array property using a for...of loop, demonstrating the efficient population of the list element with dynamic content. This approach ensures flexible handling of the list content, enhancing the adaptability and scalability of the web application.']}, {'end': 3688.283, 'start': 3315.067, 'title': 'Javascript binding to html list', 'summary': 'Demonstrates creating a javascript class that binds to an html unordered list, allowing for the addition and removal of items, updating the dom as changes occur, and maintaining a lean and loose coupling structure.', 'duration': 373.216, 'highlights': ['The add and remove methods update the underlying array and call the update method, maintaining a lean and loose coupling structure.', 'The update method removes existing list item elements and fills the unordered list with the text from the underlying array.', 'An unordered list element is created in the HTML and passed to the JavaScript, where a new instance of the list binding class is created.', 'The add method adds an item to the array and uses the update method to update the DOM.', 'The remove method removes an item at the specified index and updates the DOM using the update method.']}], 'duration': 951.009, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2ZphE5HcQPQ/pics/2ZphE5HcQPQ2737274.jpg', 'highlights': ['Demonstrates how to achieve polymorphism inside JavaScript classes by using the dog.makeSound method call.', 'Illustrates how to manipulate the DOM directly by adding and removing items from an unordered list element using JavaScript.', 'Details the process of creating a class, listbinding, which is linked to the HTML document and can manipulate the list element using JavaScript.', 'The class constructor can take in a myList element to keep a reference to the physical tag or element.', 'The update method is designed to update the physical DOM by inserting all the strings from the textList array into the list element.', 'The code demonstrates how to remove all existing li tags from a list element using a while loop and removeChild method, providing a practical solution for clearing the list element.', 'The chapter showcases the usage of a list binding class to update the list element, illustrating the practical implementation of the update method to dynamically modify the content of the list element.', 'The transcript explains the process of filling the list element with li tags generated from the text list array property using a for...of loop, demonstrating the efficient population of the list element with dynamic content.', 'The add and remove methods update the underlying array and call the update method, maintaining a lean and loose coupling structure.', 'An unordered list element is created in the HTML and passed to the JavaScript, where a new instance of the list binding class is created.', 'The add method adds an item to the array and uses the update method to update the DOM.', 'The remove method removes an item at the specified index and updates the DOM using the update method.']}], 'highlights': ['The chapter explains the concept of polymorphism in JavaScript classes', "The class keyword is used to create a class definition, as demonstrated by defining a 'rectangle' class with a capital letter at the beginning of the class name.", "The method 'printDescription' is defined to print out a description of the rectangle object, including its width, height, and color, as demonstrated by calling it on 'myRectangle2' and obtaining the expected result of 'Rectangle of 10 times 5 and I am red'.", 'The static method isValidDimensions is created within the square class to test the validity of a square based on given width and height, with 6 and 6 resulting in true and 7 and 6 resulting in false.', 'Demonstrates how to manipulate the DOM directly by adding and removing items from an unordered list element using JavaScript.']}