JS Classes
Tags: programming, tutorial, javascript, webdev
Published: 2022-11-20 17:37:34

## 1. Introduction
Hey there! Today we'll talk about the **classes** in JavaScript.
    A class is like a variable type. I mean it has attributes like `myThing.value` or methods like `myThing.function()`. Yeah those were kinda ridicilous examples, but i am sure you got it.
    Today, here, you'll create your first JavaScript class. You may name it anything give it any (don't think to far :D) functionality. 
    So let's get it started!

## 2. Basics
 **Now first,** create one HTML and one JS file and open them with your IDE/text editor. **The HTML file,** is to test our class, and nothing much. **The JS file,** is the main point. So before we get started create your empty web page, adding those in your HTML file:

```html
<html>
  <body>
    <p id="demo"></p> <!--This dude will display our custom-typed variable-->
  </body>
</html>
<script src="script.js"></script>
<!--Make sure you write the exact same JS filename here!!!-->
```

## 3. Values

**After this,** we'll create our class. In this blog, i have chosen to create a **book tag** class. Write this in your JS file to create a class:

```js
Class BookTag {
  constructor(name, author, genre, year) {
    // A perfect new class...
  }
}
```

And now we'll add some values to it so we can say like `BookTag.name`:

```js
class BookTag {
  constructor(name, author, genre, year) {
    this.name = name;
    this.author = author;
    this.genre = genre;
    this.year = year
  }
}
```

If you couldn't see what this part does, it's like saying `element.innerHTML`. Instead of that we'll say `book.name`. And **this** means any variable with the class of **BookTag**. So let's test it!

```js
// Here, we get the "p" element we created.
const demo = document.querySelector("#demo");

// Now, create our "BookTag" variable. You can add any book here!
var my_book = new BookTag("Charlotte's Web", "E. B. White", "Novel", 1952);

// Now we can test it!
demo.innerHTML = "I like the book " + my_book.name + ". It's written by " + my_book.author + " in " + my_book.year + ". It's a " + my_book.genre + " book."
```

You should get something like this in you open your HTML:
```
I like the book Charlotte's Web. It's written by E. B. White in 1952. It's a Novel book.
```

If so, you made it! Now we are ready to learn **methods!**

## 4. Methods

We just displayed a sentence including info about our book! And now, how about we automate it and do the same thing just with `my_book.info("demo")`? It would be good, yeah? So, let's do it!

First we'll add a function outside the **constructor**:

```js
class BookTag {
  constructor(name, author, genre, year) {
    this.name = name;
    this.author = author;
    this.genre = genre;
    this.year = year
  }

  // Here we go!
  info(id) {
    // We get the element that we'll write the info in by it's id.
    var element = document.querySelector("#" + id);

    // Write the info in it.
    element.innerHTML = "I like the book " + my_book.name + ". 
    It's written by " + my_book.author + " in " + my_book.year + 
    ". It's a " + my_book.genre + " book."
  }
}
```

**Now;** when we call `my_book.info("demo")` we'll get the same output as before, but easier.

## Goodbye! :D

Well, now you know how to create custom variables. On any problem, please tell in comments and make sure you like it! Good day!!!