Contenido del Curso

Advanced JavaScript Mastery

1. Mastering JavaScript Classes and Inheritance

Getting Started Understanding Class Declarations in JavaScript Challenge: Create a JavaScript Class Defining Methods in JavaScript Classes Challenge: Add Methods to a Class Using Parameter Objects Working with Private Properties in Classes Challenge: Implement Private Properties in a Class Managing Properties with Getters and Setters Challenge: Implement Getters and Setters in a Class Exploring Static Properties in JavaScript Using Static Methods in JavaScript Challenge: Implement Static Properties and Methods in a Class Understanding Inheritance with extends and super()Challenge: Implement Class Inheritance with extends and super()

2. DOM Manipulation for Interactive Web Development

What Is the Document Object Model (DOM)?Querying and Selecting Elements in the DOM Challenge: Query and Select DOM Elements Understanding the DOM Hierarchy and Relationships Challenge: Navigate the DOM Hierarchy Exploring DOM Properties in JavaScript Working with Element Attributes in the DOM Challenge: Manage Element Properties and Attributes Adding Elements to the DOM Dynamically Removing Elements From the DOM Challenge: Add and Remove DOM Elements Modifying Element Styles with JavaScript Challenge: Apply Dynamic Styles to DOM Elements

3. Event Handling and User Interactions in JavaScript

Introduction to Events and Event Listeners Understanding the Event Object in JavaScript Challenge: Implement Event Listeners Event Propagation and Delegation Explained Challenge: Handle Event Propagation and Delegation Working with Keyboard and Mouse Events Managing and Removing Event Listeners

4. Asynchronous JavaScript and API Integration

Introduction to Asynchronous JavaScript Understanding Callbacks in JavaScript Handling Asynchronous Operations with Promises Using Async/Await for Cleaner Asynchronous Code Fetching and Working with APIs in JavaScript Integrating APIs in JavaScript Applications Challenge: Fetch and Use API Data Integrating Third-Party Libraries in JavaScript Challenge: Work with Third-Party Libraries Handling Multiple Asynchronous Requests

Challenge: Add Methods to a Class

Task

You're working with a Book class that represents books in a library. Each book has a title, author, and genre. Your task is to add methods to this class to retrieve information and update the genre.

Complete the Method Definitions:
- In the existing Book class, add a method called getInfo that returns a string in the format: "Title by Author is a Genre book.";
- Add another method named updateGenre that takes one parameter, newGenre, and updates the book's genre property.
Test the Methods:
- An instance of Book named book1 has already been created with the values "The Great Gatsby", " F. Scott Fitzgerald", and "Classic";
- Call getInfo to log information about the book;
- Use updateGenre to change the genre to "Historical Fiction";
- Call getInfo again to confirm the genre update.


              1234567891011121314151617181920212223
            
class Book {
  constructor(title, author, genre) {
    this.title = title;
    this.author = author;
    this.genre = genre;
  }

  _____() {
    return `${this._____} by ${this._____} is a ${this._____} book.`;
  }

  _____(_____) {
    this._____ = _____;
  }
}

// Instance
const book1 = new Book('The Great Gatsby', 'F. Scott Fitzgerald', 'Classic');

// Test the methods
console.log(book1._____()); // Expected: The Great Gatsby by F. Scott Fitzgerald is a Classic book.
book1._____(_____); // Update genre
console.log(book1._____()); // Expected: The Great Gatsby by F. Scott Fitzgerald is a Historical Fiction book.

Define a method named getInfo in the Book class;
In the getInfo method, return a string that uses this.title, this.author, and this.genre;
Define a method named updateGenre that takes one parameter, newGenre;
In the updateGenre method, set this.genre to newGenre;
Call getInfo on book1 to log the initial information about the book;
Use updateGenre on book1 to change the genre to "Historical Fiction";
Call getInfo on book1 again to confirm the updated genre.


              1234567891011121314151617181920212223
            
class Book {
  constructor(title, author, genre) {
    this.title = title;
    this.author = author;
    this.genre = genre;
  }

  getInfo() {
    return `${this.title} by ${this.author} is a ${this.genre} book.`;
  }

  updateGenre(newGenre) {
    this.genre = newGenre;
  }
}

// Instance
const book1 = new Book('The Great Gatsby', 'F. Scott Fitzgerald', 'Classic');

// Test the methods
console.log(book1.getInfo()); // Output: The Great Gatsby by F. Scott Fitzgerald is a Classic book.
book1.updateGenre('Historical Fiction'); // Update genre
console.log(book1.getInfo()); // Output: The Great Gatsby by F. Scott Fitzgerald is a Historical Fiction book.

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 1. Capítulo 5