Understanding the Math Behind Fraction Multiplication | Maths Explanation for JavaScript Kids
Learning how to multiply fractions in JavaScript is a great way to combine math skills with coding. This tutorial is designed for junior secondary students who want to understand fraction multiplication using simple JavaScript classes and constructors.
Multiplying fractions is pretty straightforward:
Cancel out all common factors between numerators and denominators,
then multiply whatever is left numerator to numerator and
denominator to denominator.
In this lesson, we'll walk through the step-by-step method of multiplying fractions using JavaScript. You'll learn how to define a class, use constructors, and apply logic to find mutual factors and simplify results.
Step-by-Step Explanation of Algorithm to Multiply Fractions in JavaScript
This JavaScript algorithm for fractions shows how to multiply two fractions and reduce them to their lowest terms.
It's a great math coding project for beginners.
Understanding how to multiply multiple fractions in JavaScript helps students build both computational thinking and math fluency.
It's a foundational skill for more advanced topics like algebra and data science.
If we have
4/9 x 21/8;
Step 1:
Find any common factor between any numerator and any denominator.
Step 2:
Cancel out any such common factor.
| = | X | 7 | |
| 4 | 21 | ||
| 9 | 8 | ||
| 3 |
Step 3:
Repeat Steps 1 & 2 recursively until there are no more common factors.
| = | 1 | X | |
| 4 | 7 | ||
| 3 | 8 | ||
| 2 |
| = | 7 |
| 6 |
Create 2 new files; On Notepad++: File, New.
Call them MultiplyFraction.html and MultiplyFraction.js;
Type out the adjoining JavaScript code for multiplying fractions.
So! JavaScript Fun Practice Exercise - Multiply Fractions
As a fun practice exercise, feel free to try out your own fractions with different numerators and denominators, and see how the JavaScript code multiplies those fractions.
JavaScript Code for MultiplyFraction.html
<html lang="en">
<head>
<title>Multiplying Fractions</title>
<script src="MultiplyFraction.js"></script>
</head>
<body>
<h3>Multiply Fractions</h3>
<!-- This is where the result will be displayed when it is ready.-->
<div id="multiply_fraction"></div>
<script>
var result = "Solving:<br/>";
result += " ";
// Print as fraction
for (var i = 0; i < numerators.length - 1; i++) {
result += "<sup>" + numerators[i] + "</sup> / <sub>" + denominators[i] + "</sub>";
result += " x ";
}
result += "<sup>" + numerators[i] + "</sup> / <sub>" + denominators[i] + "</sub><br/><br/>";
try {
// Carry out multiplication
maxMember();
doMultiply();
result += " ";
// Print as fraction
result += "Answer = ";
result += " <sup>" + answer[0] + "</sup> ";
result += "/ <sub>" + answer[1] + "</sub><br/>";
document.getElementById("multiply_fraction").innerHTML = result;
} catch (e) {
alert(e.toString);
}
</script>
</body>
</html>
JavaScript Code for MultiplyFraction.js
var denominators = [9, 9, 640, 7];
var answer = [1, 1];
var n_index = 0;
var d_index = 0;
var trial_factor = 0;
var mutual_factor = false;
// search for largest numerator or denominator
function maxMember() {
for (var i = 0; i < numerators.length; i++) {
if (numerators[i] > trial_factor) {
trial_factor = numerators[i];
}
if (denominators[i] > trial_factor) {
trial_factor = denominators[i];
}
}
}
function doMultiply() {
// STEP 3:
// We are counting down to test for mutual factors
while (trial_factor > 1) {
// STEP 1:
// iterate through numerators and check for factors
while (n_index < numerators.length) {
mutual_factor = false;
if ((numerators[n_index] % trial_factor) === 0) { // do we have a factor
// iterate through denominators and check for factors
while (d_index < denominators.length) {
if ((denominators[d_index] % trial_factor) === 0) { // is this factor mutual?
mutual_factor = true;
break; // stop as soon as we find a mutual factor so preserve the corresponding index
}
d_index++;
}
break; // stop as soon as we find a mutual factor so as to preserve the corresponding index
}
n_index++;
}
// STEP 3:
// where we have a mutual factor, cancel it out
if (mutual_factor) {
numerators[n_index] /= trial_factor;
denominators[d_index] /= trial_factor;
continue; // continue with next iteration repeating the current value of trial_factor
}
n_index = 0;
d_index = 0;
trial_factor--;
}
// multiply whatever is left after cancelling
for (var i = 0; i < numerators.length; i++) {
answer[0] *= numerators[i];
answer[1] *= denominators[i];
}
}