Creating Animation in JavaScript

You can create an animation in JavaScript easily using the

setInterval method, the syntax is as follows:

myVariable=setInterval(myfunction, time interval)

The setInterval method runs a function created by you at a certain time interval in milliseconds. For example, a time interval of 1000 equals to 1 second.

Here are some examples of animations created by us:


The fromCharCode() Method

The fromCharCode() Method is a method that belongs to the String object in JavaScript. It converts a Unicode into a corresponding character. You can refer to the Unicode Table to look up for a certain Unicode for a certain character or symbol. For example,  The character of Unicode 78 is N.

Follow our JavaScript Tutorial Lesson 11 to learn more about the  fromCharCode() Method

 


Drawing a Quadratic Curve

To draw a quadratic curve, we use the quadraticCurve() method. However, we need to combine the quadraticCurve() method with the beginPath() and moveTo() methods in order to draw a quadratic curve. The beginPath() and moveTo() methods define the starting point of the quadratic curve. The quadraticCurve() method is to define the lowest point to the end point of the quadratic curve. The syntax of the quadraticCurve() method is

Please follow the following link to learn more.

Drawing a Quadratic Curve


Pythagoras Theorem

Pythagoras Theorem is used to solve problems related to the length of the sides of a triangle.
The formula to  is

AB2+AC2=BC2

AB  is the opposite side, AC is the adjacent and BC is the hypotenuse of a triangle ABC.

We shall create a JavaScript application to deal with problems related to Pythagoras Theorem. In this application, we shall insert two input boxes for the user to key in the length of the opposite side and the length of the adjacent side. The user can then click on the Calculate Hypotenuse button to find the answer.

Read more here


BMI Calculator

You can create a BMI calculator using JavaScript. The formula for BMI(Body Mass Index) is as follows:

BMI=weight/(height)^2

where weight is in kg and height in cm.

In the html page, you can create three text box using the <input> tag to accept the user inputs for name, height and weight.

In the JavaScript, you can create a function to calculate the bmi, as follows:

function bmi(){

var sheight=parseFloat(document.getElementById(‘hgt’).value);
var sweight=parseFloat(document.getElementById(‘wgt’).value);
var bmi=sweight/Math.pow(sheight,2);
var student_bmi=document.getElementById(‘bmi_index’);
student_bmi.textContent=bmi.toFixed(2);
}

  • toFixed method is to round the output to 2 decimal ppalces

The html document is

<!DOCTYPE html>
<html>
<body>

<h1>Student Name=<input type=”text” style=”font-size:25px; font-weight: bold;” id=”studentname”></h1>
<h2>Height=<input type=”text” style=”font-size:20px; font-weight: bold;” id=”hgt”></h2>
<h2>Weight=<input type=”text” style=”font-size:20px; font-weight: bold;” id=”wgt”></h2>
<h2>BMI=<b id=”bmi_index”></b></h2>

<input type=”button” value=”Calculate” onclick=”bmi()”>
<script type=”text/javascript” src=”bmi2.js”></script>
</body>
</html>

Click here to launch the BMI calculator