Sign in

Web development and more
Photo by Joshua Aragon on Unsplash

What is callback hell and why does it happen?

callback hell

Callback hell is a common problem when coding in Asynchronous JavaScript. In a asynchronous function, we use callbacks to request and retrive value from other functions. The operation would be more complicated if we need more callbacks on the line. For example, you call the resource and wait for the result many times. This kind of operation will cause the callback function to multi-nested structure. It will looks like a pyramid so this phenomenon is also known as one kind of ‘Pyramid of Doom’.

asyncJs(url, success, failure){
if(failure){
console.log(eer)
}
else{
asyncJs(url2, success, failure){
if(failure){…

Photo by Andrew Petrov on Unsplash

What is a JavaScript Promise?

‘A Promise is a proxy for a value not necessarily known when the promise is created.’ — MDN

A Promise is a javaScript mechanism that can be used for asynchronous programming. It contains resolve and rejects functions. JS promise will process resolve function as the condition we have settled, or it process reject function. Resolve and reject are two callback functions that pass two functions as parameters.

There are three keywords about Promise:

  • Pending: it is being processing as a default state.
  • Fulfil: the state has reached the given condition
  • Reject: the state has not reached the given condition

How to write a Promise

Promise…


Photo by NeONBRAND on Unsplash

The setTimeout() method executes a function after a given time. Like setInterval(), this method is run by the browser which executes codes asynchronously in the background. In this article, we create a timer with a form that receives the user’s input as a parameter for and a ‘start’ button. The timer is combined with the stopwatch we have created by using the setInterval() method and a new alert function by using the setTimeout() method.

Starting with this HTML file:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>…

Photo by Veri Ivanova on Unsplash

The setInterval() method repeatedly calls a function with a fixed time delay(milliseconds). This method is run by the browser which executes codes asynchronously in the background. In this article, we create a stopwatch with ‘start’ and ‘stop’ buttons.

Starting with this HTML file:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p id = 'demo'></p>
<button id = 'stop'> stop</button>
<button id = 'start'> start </button>
</body>
</html>

1. Create a setInterval()function

  1. create a setInterval() with a timer function of 1000 milliseconds and store it in a variable
  2. set a variable i for each iteration
  3. inside timer function, add 1 into i within each…

Photo by Pavan Trikutam on Unsplash

A callback function, namely, is a function that calls back with another function.
The common example is addEventListener:

target.addEventListener(type, listener); 
//the listener is always a function

Everytime when the target event has been triggered(listened), it run the listener function.

This tells about what asynchronous programming is- the program doesn’t react immediately. Alternately, it waits until its trigger condition has been fulfilled, for instance, you press the button or send out your form.

Here we practice this mechanism with addEventListener and XMLHttpRequest.

The codes are modified from this article

Starting file:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">…

Photo by amirali mirhashemian on Unsplash

For cutting-edge websites, there are more and more tasks that client sides have to process, eg: animation, correction, even some calculation. If a browser meets its bottleneck of performance, the web page would be frozen for some moment until it resolves the tasks on its thread. We call this browser behaviour blocking.

JavaScript is single-thread, which means it run tasks one by one. That’s no wonder why sometimes our browsers stuck when we surf on fancy websites.

To solve this problem, we can create a Web Worker mechanism to run some scripts in the background to create another thread without…


Photo by Ferenc Almasi on Unsplash

JSON(JavaScript Object Notation) is the most commonly used format in web development. This data format has a similar structure to JavaScript object literal, a key-value syntax. In this article, we start by making our JSON data and retrieve them by an Ajax technique.

Before start, please put these inside your HTML and CSS files:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dark</title>
</head>
<body>
<header>
</header>
</body>
</html>
html {
font-family: 'helvetica neue', helvetica, arial, sans-serif;
}
body {
width: 800px;
margin: 0 auto;
}
h1, h2 {
font-family: 'helvetica';
}
/* header styles */h1 {
font-size: 4rem;
text-align: center…

Inheritance exercises with ES6 class

Photo by Roman Kraft on Unsplash

Inheritance is a code-reused mechanism in object-oriented programming. You can simply create a new class from an existed class. In this article, we use the ES6 class instead of the constructor function for building an inheritance mechanism.

1. Defining a Person class and its properties and method

Task:

  • We create a class called Person by using the class keyword and constructor method.

Useful methods:

class Person {
constructor(name, age, gender, habit) {
this.name = name;
this.age = age;
this.gender = gender;
this.habit = habit;
}
greeting() {
console.log('Hi!' + ' my name is ' + this.name);
}
}

You may still add an method…


Photo by Thomas Kelley on Unsplash

Inheritance is a code-reused mechanism in object-oriented programming. You can simply create a new class from an existed class.

1. Defining a Teacher() constructor function

Task:
We create a class called Person, and then derive an inherited class(we call it ‘subclass’), Teacher.

Useful methods:

function Person(name, age, gender, habit) {
this.name = name;
this.age = age;
this.gender = gender;
this.habit = habit;
}
Person.prototype.greeting = function() {
console.log('Hi!' + ' my name is ' + this.name);
}
function Teacher(name, age, gender, subject) {
Person.call(this, name, age, gender);
this.subject = subject;
}

2. Creating a Teacher subclass and setting its prototype and constructor reference

Task:
We are using it to create a new object and make it the value of Teacher.prototype.

Useful methods:

Answer:

Teacher.prototype = Object.create(Person.prototype);

There is a problem here. The greeting method…


Photo by Sean Whelan on Unsplash

JavaScript is a prototype-based language, that is, in which you want to create an inheritance mechanism, you duplicate the existed object.
Every object initiation has a __proto__ properties which point to the ancestor object. In javascript, it is called prototype chain.

In this article, I’ll show 3 exercises with answers. By doing these exercises, I hope that they will help you to understand object prototypes better.

Exercise1 : Create an instance from an existed object

In this exercise, you need to use create Object.create() method to initiate a new object by an existing one.

this.name = {
first : first,
last : last…

Dusing Chang

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store