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>
<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:
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:
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!
// 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:
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!!!
Top comments (0)