JS Classes

sandytrolling — Sun, 20 Nov 2022 17:37:34 +0000

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!!!

Sending Discord Messages With JS Using Webhooks

sandytrolling — Sun, 16 Oct 2022 16:15:24 +0000

　
Webhooks! They are kind of a data that you receive from web. To make it more understandable, you have a website for people to post content. You allow people to get some data with webhooks (e.g. user infos). So someone can get the data and use it in their own code.
So Discord, the platform you prob'ly know, has that "Webhook" feature, so you can create a webhook on Discord attached to channel and send message via it's special URL.
Now, let's head into coding!

Now first up, we'll need a channel to send the messages. It can be any kind of text channel.
Click little settings at the right-side of channel name as shown in the image.

Now click the "Integrations" option at the sidebar positioned in left.

Now hit that "Create Webhook" button and Boom! Now you have your very first webhook!
So, we have our webhook and now, we will copy it's URL by clicking that little "Copy Webhook URL" thing.

Hey, as long as we have the URL, now we can start actually coding stuff!

First, create a file called "my-webhook.js" and open it with any IDE or text editor you want.
After that, we will store our webhook with a variable.

const request = new XMLHttpRequest();
request.open("POST", "webhook_link");
request.setRequestHeader("Content-type", "application/json");

That's amazing! Now we'll have to create a function to send messages.

function send(displayname, message) {
  let options = {
    username: displayname,
    avatar_url: "", //You can put any image URL here
    content: message,
  }
}

Lastly, let's send it.

request.send(JSON.stringify(options));

Now you can add this code to your HTML and create a feedback system, troll your friends :D or whatever you want!

Make sure like this and follow me for more tutorials like this. And comment the things you want to learn, goodbye!