JS project start

2026-02-04 13:51:54 -05:00
parent 59948ed75c
commit c88c9bbeea
16 changed files with 549442 additions and 14 deletions
@@ -0,0 +1,79 @@
+<html>
+	<head>
+		<title>Classes</title>
+		<script language="JavaScript" type="text/JavaScript">
+			// create the "base" class
+			class Book {
+				// define the constructor function for Book
+				// notice the use of ._propertyName
+				constructor(title, author, pubdate) {
+				   this._title = title;
+				   this._author = author;
+				   this._pubdate = pubdate;
+				}
+				// create a method
+				// this is much easier to do with ES6
+				getBook() {
+				   return this._author + " published " + this._title + " in " + this._pubdate;
+				}
+			}
+
+			// create a new class that extends the base class book
+			class TypedBook extends Book {
+				// define the constructor function for TypeBook
+				// include a reference to the "base" class Book
+				// to call that constructor function as well...
+				// this done using "super([parameter set for the base class])
+				constructor(title, author, pubdate, type) {
+					super(title, author, pubdate);
+					this._type = type;
+				}
+				
+				// this method overrides the getBook() found in the base class
+				// but allows us to call the Book version with super.getBook()
+				getBook() {
+				   return super.getBook() + " - category: " + this._type;
+				}
+
+				// we can use an ES6 getter to retrieve the type
+				get type() {
+				   return this._type;
+				}
+				
+				// ... and an ES6 setter to set a new value for type
+				set type(newType) {
+					if (newType) {
+						this._type = newType;
+					}
+				}
+			}
+			
+			// create a Book object
+			var bookB = new Book("The Greatest Show on Earth", "Richard Dawkins", 2009);
+			
+			// call the Book getBook method
+			console.log(bookB.getBook());
+
+			// create a TypedBook object
+			var bookT = new TypedBook("Thank You for Being Late", "Thomas Friedman", 2016, "politics");
+			
+			// call the TypedBook getBook method
+			console.log(bookT.getBook());
+
+			// when we retrieve a property using an ES6 getter,
+			// we just write objectName.propertyName and the getter
+			// will be invoked under the hood
+			console.log(bookT.type);
+			
+			// similarly, when we update a property using an ES6 setter,
+			// we also assign the new value to objectName.propertyName and
+			// the setter will be invoked "under the hood"
+			bookT.type = "political science";
+			console.log(bookT.type);
+		</script>
+	</head>
+	<body>
+
+	</body>
+</html>
+