JavaScript Problems — Click Events, Unit Tests, Page Load, and More
Tags: javascript, webdev, programming, beginners
Published: 2021-01-23 20:49:16

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

Like any kind of apps, there are difficult issues to solve when we write JavaScript apps.

In this article, we’ll look at some solutions to common JavaScript problems.

### Tools for Unit Testing JavaScript Code

There are many test runners for creating and running unit tests with JavaScript apps.

**Ava** is a fast test runner that lets us run unit tests. It supports promises and ES6 syntax. Also, the environment is isolated for each file.

It also supports generators and async functions. Observables are also supported. Stack traces are easier to read than other runners as it’s clean.

**Buster.js** is another test runner. It’s cross-platform and it runs on Windows, Mac, and Linux. Tests run from a browser headlessly. Multiple clients can run the tests at the same time. Node apps can also be tested. xUnit or BDD style tests can be written.

Multiple JavaScript test frameworks are supported. It comes with SinonJS. Tests are run automatically on save.

**Jasmine** is a BDD test framework. The syntax of it looks like the RSpec syntax, which is used to test Ruby and Rails apps.

**QUnit** lets us test JavaScript front end code. It’s mainly based on jQuery, jQuery UI, and jQuery Mobile.

**Sinon** is another testing tool. It’s a simple test runner that lets us mock code and run them.

It has no dependencies.

**Jest** is another powerful test framework with a built-in test runner and many tools for mocking things to help us tets. It supports all modern syntax, It supports async and modules, including mocking them.

### JavaScript Static Variables

We can add static variables by directly attaching a property directly to the constructor.

For instance, if we have:

```
function MyClass () {  
  //...  
}
```

Then we can write:

```
MyClass.staticProp  = "baz";
```

We attach `staticProp` to `MyClass` directly.

### Check that a Number is a Float or an Integer

We can check if a number is an integer by using the remainder operator to get the remainder of it when we divide it by 1.

For example, we can write;

```
const isInt = (n) => {  
  return n % 1 === 0;  
}
```

If it’s an integer, then it’s `true` .

We can check if it’s a floating-point number by changing `===` to `!==` . We write:

```
const isFloat = (n) => {  
  return n % 1 !== 0;  
}
```

### Check Which Key is Pressed on the Keyboard

We can use the keypress event’s `keyCode` or `which` property.

They both have the integer code for the keyboard key that is pressed.

For example, we can write:

```
const code = e.keyCode || e.which;  
if(code === 13) {   
  //Do something  
}
```

We check if it’s 13 to check for the Enter key.

### window.onload vs document.onload

There is a difference between `window.onload` and `document.onload` .

`window.onload` is fired when the entire page loads, including all content like images, CSS, scripts, and other things.

`documebt.onload` is called when the DOM is ready which can be prior to images and other external content is loaded.

### Self-References in Object Literals

We can use `this` to reference the object that `this` is currently in.

For instance, if we have:

```
const foo = {  
  a: 1,  
  b: 2,  
  get c() {  
    return this.a + this.b;  
  }  
}
```

Then `this.a` is 1 and `this.b` is 2, so `c` is 3.

We can only do this with top-level methods, including getters and setters.

Otherwise, the value of `this` maybe different.

### addEventListener vs onclick

To attach a click listener to an element, we can do it a few ways.

We can call `addEventListener` with the `'click'` event.

Also, we can add the `onclick` attribute to an element.

We can also get the element and set a callback as the value of the `onclick` property.

For example, we can write:

```
element.addEventListener('click', onClick, false);
```

`onClick` is a function.

`false` disables capture mode, which propagates events from the root element down.

Likewise, we can write:

```
<a href="#" onclick="alert('hello');">click me</a>
```

We have the `a` element with the `onclick` attribute that has JavaScript expressions in it.

Likewise, we can write:

```
element.onclick = () => {   
  //...  
};
```

We set a listener function to the `onclick` method of a DOM element object.

They do the same thing.

### Conclusion

We can attach click listeners in various ways,

Also, we can use `this` to reference itself in top-level methods.

There are also many tools for writing and running unit tests for JavaScript apps.