Intial Commit

This commit is contained in:
valki
2020-10-17 18:42:50 +02:00
commit 664c6d8ca3
5892 changed files with 759183 additions and 0 deletions

View File

@@ -0,0 +1,130 @@
<!DOCTYPE html>
<html>
<head>
<title>math.js | angle configuration</title>
<style>
body, input, select {
font: 11pt sans-serif;
}
input, select, th, #result {
padding: 5px 10px;
}
th {
text-align: left;
}
</style>
<script src="../../dist/math.js"></script>
</head>
<body>
<p>
This code example extends the trigonometric functions of math.js with configurable angles: degrees, radians, or gradians.
</p>
<table>
<tr>
<th>Angles</th>
<td>
<select id="angles">
<option value="deg">deg</option>
<option value="grad">grad</option>
<option value="rad">rad</option>
</select>
</td>
</tr>
<tr>
<th>Expression</th>
<td>
<input id="expression" type="text" value="sin(45)" />
<input id="evaluate" type="button" value="Evaluate">
</td>
</tr>
<tr>
<th>Result</th>
<td id="result"></td>
</tr>
</table>
<script>
var replacements = {};
// our extended configuration options
var config = {
angles: 'deg' // 'rad', 'deg', 'grad'
};
// create trigonometric functions replacing the input depending on angle config
['sin', 'cos', 'tan', 'sec', 'cot', 'csc'].forEach(function(name) {
var fn = math[name]; // the original function
var fnNumber = function (x) {
// convert from configured type of angles to radians
switch (config.angles) {
case 'deg':
return fn(x / 360 * 2 * Math.PI);
case 'grad':
return fn(x / 400 * 2 * Math.PI);
default:
return fn(x);
}
};
// create a typed-function which check the input types
replacements[name] = math.typed(name, {
'number': fnNumber,
'Array | Matrix': function (x) {
return math.map(x, fnNumber);
}
});
});
// create trigonometric functions replacing the output depending on angle config
['asin', 'acos', 'atan', 'atan2', 'acot', 'acsc', 'asec'].forEach(function(name) {
var fn = math[name]; // the original function
var fnNumber = function (x) {
var result = fn(x);
if (typeof result === 'number') {
// convert to radians to configured type of angles
switch(config.angles) {
case 'deg': return result / 2 / Math.PI * 360;
case 'grad': return result / 2 / Math.PI * 400;
default: return result;
}
}
return result;
};
// create a typed-function which check the input types
replacements[name] = math.typed(name, {
'number': fnNumber,
'Array | Matrix': function (x) {
return math.map(x, fnNumber);
}
});
});
// import all replacements into math.js, override existing trigonometric functions
math.import(replacements, {override: true});
// pointers to the input elements
var expression = document.getElementById('expression');
var evaluate = document.getElementById('evaluate');
var result = document.getElementById('result');
var angles = document.getElementById('angles');
// attach event handlers for select box and button
angles.onchange = function () {
config.angles = this.value;
};
evaluate.onclick = function () {
result.innerHTML = math.eval(expression.value);
};
</script>
</body>
</html>

View File

@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<title>math.js | basic usage</title>
<script src="../../dist/math.js"></script>
</head>
<body>
<script>
function print(value) {
var precision = 14;
document.write(math.format(value, precision) + '<br>');
}
// functions and constants
print(math.round(math.e, 3)); // 2.718
print(math.atan2(3, -3) / math.pi); // 0.75
print(math.log(1000, 10)); // 3
print(math.sqrt(-4)); // 2i
print(math.pow([[-1, 2], [3, 1]], 2)); // [[7, 0], [0, 7]]
print(math.derivative('x^2 + x', 'x')); // 2 * x + 1
// expressions
print(math.eval('12 / (2.3 + 0.7)')); // 4
print(math.eval('5.08 cm to inch')); // 2 inch
print(math.eval('9 / 3 + 2i')); // 3 + 2i
print(math.eval('det([-1, 2; 3, 1])')); // -7
// chained operations
var a = math.chain(3)
.add(4)
.multiply(2)
.done();
print(a); // 14
</script>
</body>
</html>

View File

@@ -0,0 +1,90 @@
<!DOCTYPE html>
<html>
<head>
<title>math.js | currency conversion</title>
<script src="../../dist/math.js"></script>
<style>
body,
html,
input {
font-size: 11pt;
font-family: verdana, arial, sans-serif;
color: #4d4d4d;
max-width: 600px;
}
h1 {
font-size: 120%;
}
input {
padding: 5px;
width: 400px;
}
</style>
</head>
<body>
<h1>Currency conversion with math.js</h1>
<p>
This example demonstrates how you can fetch actual currencies from <a href="http://fixer.io">fixer.io</a> and use them in math.js.
</p>
<p id="info">
fetching currencies...
</p>
<p>
<label for="expr">Enter an expression with currencies:</label>
</p>
<div id="form" style="display: none;">
<p>
<input id="expr" value="5 EUR + 2 * 3 EUR in USD" /><br/>
</p>
<p id="result"></p>
</div>
<script>
fetchAndImportCurrencies()
.then(function (currencies) {
document.getElementById('expr').oninput = evaluate;
document.getElementById('form').style.display = '';
document.getElementById('info').innerHTML = 'Available currencies: ' + currencies.join(', ');
evaluate();
})
function fetchAndImportCurrencies () {
// fetch actual currency conversion rates
return fetch('https://api.fixer.io/latest')
.then(function (response) {
return response.json();
}).then(function (data) {
// import the currencies
math.createUnit(data.base)
Object.keys(data.rates).forEach(function (currency) {
math.createUnit(currency, math.unit(1 / data.rates[currency], data.base));
});
// return an array with all available currencies
return Object.keys(data.rates).concat(data.base);
});
}
function evaluate () {
var expr = document.getElementById('expr');
var result = document.getElementById('result');
try {
var resultStr = math.format(math.eval(expr.value), {notation: 'fixed', precision: 2})
result.innerHTML = '<span style="color: dodgerblue;">' + resultStr + '</span>';
}
catch (err) {
result.innerHTML = '<span style="color: red;">' + err.toString() + '</span>';
}
}
</script>
</body>
</html>

View File

@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html>
<head>
<title>math.js | custom separators</title>
<style>
body, input, select {
font: 11pt sans-serif;
}
input, select, th, #result {
padding: 5px 10px;
}
th {
text-align: left;
}
</style>
<script src="../../dist/math.js"></script>
</head>
<body>
<p>
This code example shows how to apply custom separators for function arguments and decimal separator.
</p>
<table>
<tr>
<th>Argument separator</th>
<td>
<input id="args" type="text" value=";">
</td>
</tr>
<tr>
<th>Decimal separator</th>
<td>
<input id="decimals" type="text" value=",">
</td>
</tr>
<tr>
<th>Expression</th>
<td>
<input id="expression" type="text" value="sum(3,4; 2,1; 2,0)" />
<input id="evaluate" type="button" value="Evaluate">
</td>
</tr>
<tr>
<th>Result</th>
<td id="result"></td>
</tr>
</table>
<script>
// pointers to the input elements
var expression = document.getElementById('expression');
var evaluate = document.getElementById('evaluate');
var result = document.getElementById('result');
var args = document.getElementById('args');
var decimals = document.getElementById('decimals');
// attach event handler to the button
evaluate.onclick = function () {
// replace the custom separators in the input with the default separators
var expr = expression.value
.replace(new RegExp('\\' + decimals.value + '|\\' + args.value, 'g'), function (match) {
return match == decimals.value ? '.': ',';
});
// do the actual evaluation
var res = math.eval(expr);
// replace the default separators in the output with custom separators
result.innerHTML = res.toString()
.replace(new RegExp(',|\\.', 'g'), function (match) {
return match == '.' ? decimals.value : args.value;
});
};
</script>
</body>
</html>

View File

@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<title>math.js | old browsers</title>
<!-- es5-shim for old browsers (IE8 and older) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/2.2.0/es5-shim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/2.2.0/es5-sham.min.js"></script>
<script src="../../dist/math.js"></script>
</head>
<body>
<p>
To run math.js in old browsers (IE8 and older),
the <a href="https://github.com/kriskowal/es5-shim">es5-shim</a> library is needed.
</p>
<script>
function print(value) {
var precision = 14;
document.write(math.format(value, precision) + '<br>');
}
// functions and constants
print(math.round(math.e, 3)); // 2.718
print(math.atan2(3, -3) / math.pi); // 0.75
print(math.log(1000, 10)); // 3
print(math.sqrt(-4)); // 2i
print(math.pow([[-1, 2], [3, 1]], 2)); // [[7, 0], [0, 7]]
// expressions
print(math.eval('12 / (2.3 + 0.7)')); // 4
print(math.eval('5.08 cm to inch')); // 2 inch
print(math.eval('9 / 3 + 2i')); // 3 + 2i
print(math.eval('det([-1, 2; 3, 1])')); // -7
// chained operations
var a = math.chain(3)
.add(4)
.multiply(2)
.done();
print(a); // 14
</script>
</body>
</html>

View File

@@ -0,0 +1,69 @@
<!DOCTYPE html>
<html>
<head>
<title>math.js | plot</title>
<script src="../../dist/math.js"></script>
<!-- load http://maurizzzio.github.io/function-plot/ -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://wzrd.in/standalone/function-plot@1.14.0"></script>
<style>
input[type=text] {
width: 300px;
}
input {
padding: 6px;
}
body, html, input {
font-family: sans-serif;
font-size: 11pt;
}
form {
margin: 20px 0;
}
</style>
</head>
<body>
<form id="form">
<label for="eq">Enter an equation:</label>
<input type="text" id="eq" value="4 * sin(x) + 5 * cos(x/2)" />
<input type="submit" value="Draw" />
</form>
<div id="plot"></div>
<p>
Plot library: <a href="https://github.com/maurizzzio/function-plot">https://github.com/maurizzzio/function-plot</a>
</p>
<script>
function draw() {
try {
functionPlot({
target: '#plot',
data: [{
fn: document.getElementById('eq').value,
sampler: 'builtIn', // this will make function-plot use the evaluator of math.js
graphType: 'polyline'
}]
});
}
catch (err) {
console.log(err);
alert(err);
}
}
document.getElementById('form').onsubmit = function (event) {
event.preventDefault();
draw();
};
draw();
</script>
</body>
</html>

View File

@@ -0,0 +1,114 @@
<!DOCTYPE html>
<html>
<head>
<title>math.js | pretty printing with MathJax</title>
<script src="../../dist/math.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/mathjax/2.3/MathJax.js?config=TeX-AMS-MML_HTMLorMML.js"></script>
<style>
body,
html,
table td,
table th,
input[type=text] {
font-size: 11pt;
font-family: verdana, arial, sans-serif;
}
h1 {
font-size: 11pt;
}
input[type=text] {
padding: 5px;
width: 400px;
}
table {
border-collapse: collapse;
}
table td,
table th {
padding: 5px;
border: 1px solid lightgray;
}
table th {
background-color: lightgray;
}
</style>
</head>
<body>
<h1>
Expression evaluation with math.js, pretty printing with MathJax
</h1>
<table>
<tr>
<th>Expression</th>
<td><input type="text" id="expr"/></td>
</tr>
<tr>
<th>Pretty print</th>
<td><div id="pretty">$$$$</div></td>
</tr>
<tr>
<th>Result</th>
<td><div id="result"></div></td>
</tr>
</table>
<b>Parenthesis option:</b>
<input type="radio" name="parenthesis" value="keep" onclick="parenthesis = 'keep'; expr.oninput();" checked>keep
<input type="radio" name="parenthesis" value="auto" onclick="parenthesis = 'auto'; expr.oninput();">auto
<input type="radio" name="parenthesis" value="all" onclick="parenthesis = 'all'; expr.oninput();">all
<br/>
<b>Implicit multiplication:</b>
<input type="radio" name="implicit" value="hide" onclick="implicit = 'hide'; expr.oninput();" checked>hide
<input type="radio" name="implicit" value="show" onclick="implicit = 'show'; expr.oninput();">show
<script>
var expr = document.getElementById('expr'),
pretty = document.getElementById('pretty'),
result = document.getElementById('result'),
parenthesis = 'keep',
implicit = 'hide';
// initialize with an example expression
expr.value = 'sqrt(75 / 3) + det([[-1, 2], [3, 1]]) - sin(pi / 4)^2';
pretty.innerHTML = '$$' + math.parse(expr.value).toTex({parenthesis: parenthesis}) + '$$';
result.innerHTML = math.format(math.eval(expr.value));
expr.oninput = function () {
var node = null;
try {
// parse the expression
node = math.parse(expr.value);
// evaluate the result of the expression
result.innerHTML = math.format(node.compile().eval());
}
catch (err) {
result.innerHTML = '<span style="color: red;">' + err.toString() + '</span>';
}
try {
// export the expression to LaTeX
var latex = node ? node.toTex({parenthesis: parenthesis, implicit: implicit}) : '';
console.log('LaTeX expression:', latex);
// display and re-render the expression
var elem = MathJax.Hub.getAllJax('pretty')[0];
MathJax.Hub.Queue(['Text', elem, latex]);
}
catch (err) {}
};
</script>
</body>
</html>

View File

@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<title>math.js | require.js loading</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.20/require.min.js"></script>
</head>
<body>
<script>
// load math.js using require.js
require(['../../dist/math.js'], function (math) {
// evaluate some expression
var result = math.eval('1.2 * (2 + 4.5)');
document.write(result);
});
</script>
</body>
</html>

View File

@@ -0,0 +1,79 @@
<!DOCTYPE html>
<html>
<head>
<title>math.js | web workers</title>
</head>
<body>
<p>
In this example, a math.js parser is running in a separate
<a href="http://www.html5rocks.com/en/tutorials/workers/basics/">web worker</a>,
preventing the user interface from freezing during heavy calculations.
</p>
<p id="results"></p>
<script>
/**
* MathWorker evaluates expressions asynchronously in a web worker.
*
* Example usage:
*
* var worker = new MathWorker();
* var expr = '12 / (2.3 + 0.7)';
* worker.eval(expr, function (err, result) {
* console.log(err, result)
* });
*/
function MathWorker () {
this.worker = new Worker('worker.js');
this.callbacks = {};
this.seq = 0;
// create a listener to receive responses from the web worker
var me = this;
this.worker.addEventListener('message', function(event) {
var response = JSON.parse(event.data);
// find the callback corresponding to this response
var callback = me.callbacks[response.id];
delete me.callbacks[response.id];
// call the requests callback with the result
callback(response.err, response.result);
}, false);
}
/**
* Evaluate an expression
* @param {string} expr
* @param {Function} callback Called as callback(err, result)
*/
MathWorker.prototype.eval = function eval (expr, callback) {
// build a request,
// add an id so we can link returned responses to the right callback
var id = this.seq++;
var request = {
id: id,
expr: expr
};
// queue the callback, it will be called when the worker returns the result
this.callbacks[id] = callback;
// send the request to the worker
this.worker.postMessage(JSON.stringify(request));
};
// create a MathWorker
var worker = new MathWorker();
// evaluate an expression via the worker
worker.eval('12 / (2.3 + 0.7)', function (err, result) {
document.getElementById('results').innerHTML += 'result: ' + result + '<br>';
});
</script>
</body>
</html>

View File

@@ -0,0 +1,30 @@
importScripts('../../../dist/math.js');
// create a parser
var parser = math.parser();
self.addEventListener('message', function(event) {
var request = JSON.parse(event.data),
result = null,
err = null;
try {
// evaluate the expression
result = parser.eval(request.expr);
}
catch (e) {
// return the error
err = e;
}
// build a response
var response = {
id: request.id,
result: result,
err: err
};
// send the response back
self.postMessage(JSON.stringify(response));
}, false);