2
\$\begingroup\$

Recently I've been reading about classes in JavaScript and decided to code this simple form to test them out. Even if the code works I am still pretty sure I lack understanding of classes and other js utilities, for example:

  • did I need to use constructor in this class? if not when should I use it?
  • is there a more efficient way to append multiple elements to the page?
  • is the try and catch used properly in this case?
  • generally speaking - is it correct example of where i should be using classes at all?

I'm not concerned with the looks of it but with functionality. Thanks for your help.

const outp = document.getElementById('err');

class data{
  constructor(email, url, number){
    this.email = email;
    this.url = url;
    this.number = number;
  }
  static append(){
    var par = document.createElement('P');
    var em = document.createTextNode(email.value);
    var ur = document.createTextNode(url.value);
    var num = document.createTextNode(number.value);
    par.appendChild(em);
    par.appendChild(ur);
    par.appendChild(num);
    document.body.appendChild(par);
  }
}

document.getElementById('submit').addEventListener('click', () => {
  outp.innerHTML = "";
  let email = document.getElementById('email').value;
  let url = document.getElementById('url').value;
  let number = document.getElementById('number').value;
  try{
    if(email == '' || url == '' || number == '' ) throw "Empty";
    data.append();
  }
  catch(err){
    outp.innerHTML = err;
  }
})
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link type="text/css" rel="stylesheet" href="style.css" />
    <title></title>
  </head>
  <body>
    <main>
      <label>
        <span>Email</span>
        <input type="email" id="email" required />
      </label><br>
      <label>
        <span>Url</span>
        <input type="url" id="url" required />
      </label><br>
      <label>
        <span>Number</span>
        <input type="number" id="number" required />
      </label>
      <button type="button" id="submit">Submit</button>
      <p id="err"></p>
    </main>

    <script src="main.js"></script>
  </body>
</html>

\$\endgroup\$
3
\$\begingroup\$

The convention with class names is that they are usually written in pascal case, for example, PascalCase. So you should use Data for your class name.

While it's great that you're experimenting with javascript classes, I feel that they're not the right tool to use for this. The main idea of a class is that they can be used to create multiple objects based off the class.

Here's a pseudo-code example of when using a class is ideal.

class Vehicle {
    constructor(model, regNumber) {
        this.model = model;
        this.regNumber = regNumber;
    }

    start() {}
    accelerate(acc) {}
    brake() {}
}

class Car extends Vehicle {
    // additional methods
}

const ford = new Car('Ford', 'HR28AP0000');
const auto = new Vehicle('ExampleDX', 'TN09XX0000');

The vehicle class has some attributes and methods. This example lends itself very well to the idea of classes.

For your code, it's best to use an append function instead.

I'd suggest looking up Object Oriented Programming. Some well written books and blogs will do a much better job of explaining when and where to use classes and objects and other OOP principles.

Edit: About try-catch, it's common to throw an Error object or one of it's descendants.

if(email == '' || url == '' || number == '' ) {
    throw new Error("Empty");
}
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.