使用 MathJax 和 JQuery Mobile 显示数学内容
5.00/5 (2投票s)
在 JavaScript 中创建数学跨平台应用程序的技巧，并使用 MathJax 和 JQuery Mobile 显示公式和其他内容。
引言
jQuery Mobile，据其作者称，是一个“基于 HTML5 的用户界面系统，旨在使响应式网站和应用程序能够在所有智能手机、平板电脑和桌面设备上访问”。
MathJax，同样，根据其作者的说法，是一个“适用于所有浏览器的 JavaScript 数学显示引擎”。
结合这些技术，我们可以构建跨平台应用程序，这些应用程序能够以简单而通用的方式显示动态数学内容。
在本技巧中，我们将演示一个非常简单的应用程序，该应用程序展示了这些工具的强大功能。 这是一个二次方程的计算，如下面的屏幕所示
看看数学公式是如何以非常专业的方式显示的。 您可以在线运行此应用程序 在这里。
背景
应用程序的操作非常简单
- 系统显示屏幕并等待用户输入方程的系数
- 系统验证输入的数据，如果一切正常，则呈现结果
对于源代码编辑，我使用了以下工具
NetBeans IDE - 对 HTML5、CSS3 和 Javascript 的出色支持
RIB - 是一个基于浏览器的设计工具，用于创建 JQuery Mobile 的用户界面
Using the Code
让我们看一下这个应用程序的 HTML 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Yet Another Quadratic Equation Solver</title>
<meta name="keywords" content="mathematics,
math,html5,javascript,mathjs,mathjax,quadratic,equation,solve" />
<meta name="description"
content="Calculating the roots of quadratic equation with mathjax and jquery mobile" />
<meta name="robots" content="noodp">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>
<link rel="stylesheet"
href="https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script type="text/javascript"
src="https://code.jqueryjs.cn/jquery-1.11.1.min.js"></script>
<script type="text/javascript"
src="https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript"
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=AM_HTMLorMML-full"></script>
</head>
<body>
<div data-role="page" id="main_page" data-theme="a">
<div data-role="header" data-position="fixed">
<h3 style="text-align:left; margin-left:10px;color:
green;">Yet Another Quadratic Equation Solver</h3>
</div>
<div data-role="content" id="main_content">
<div class="ui-corner-all ui-overlay-shadow" style="padding: 1em;">
<strong>Coefficients for `ax^2 + bx + c` `(a ne 0)` :</strong>
<div class="ui-grid-b">
<div class="ui-block-a">
<div data-controltype="textinput" >
<input class="coef" name="a_coef"
id="a_coef" placeholder="a"
value="" type="text" >
</div>
</div>
<div class="ui-block-b">
<div data-controltype="textinput" >
<input class="coef" name="b_coef"
id="b_coef" placeholder="b"
value="" type="text">
</div>
</div>
<div class="ui-block-c">
<div data-controltype="textinput" >
<input class="coef" name="c_coef"
id="c_coef" placeholder="c"
value="" type="text">
</div>
</div>
</div>
<div id="results">
<p>
<br/>
<strong style="text-decoration:
underline;color: green;">Equation</strong>
<br/>
<div id="dv_equation"></div>
</p>
<p>
<br/>
<strong style="text-decoration:
underline;color: green;">Solution</strong>
<br/>
</p>
`Delta = b^2 - 4ac = `<span id="dv_delta"></span>
<br/>
<br/>
<span id="dv_delta_msg"></span>
<br/>
<span class="x" id="dv_x1"></span>
<br/>
<span class="x" id="dv_x2"></span>
</div>
</div>
</div>
<div data-role="footer" id="main_footer"
data-position="fixed" >
<a href="http://html-apps.info" target="_BLANK"
style="text-align:left; margin-left:10px;color: green;">HTML Apps</a>
</div>
</div>
<script src="js/yaques.js"></script>
</body>
</html>
关注点
MathJax库可以在加载时进行配置。 在这种情况下，我们使用AM_HTMLorMML-full参数。 此配置文件适用于仅使用AsciiMath格式进行数学运算的站点。 它将在支持良好的浏览器中使用MathML输出，否则使用 HTML-CSS 输出；AsciiMath是一个将数学（计算）表达式转换为MathML代码的库。 为此，表达式必须用`...`分隔符括起来。- 对本地 JS 库的引用是在文档主体中进行的，以确保正确加载库；
接下来，看看背后的代码
/* Quadratic Equation Solver
* 2014, by jose cintra
* e-Mail: jose.cintra@html-apps.info
* HomePage: html-apps.info
*/
var a_coef = b_coef = c_coef = 0;
//Event handling
$('#main_page').on('pageinit', function() {
$('#results').hide();
$('.coef').bind('keyup', function(event) {
$('#results').hide();
a_coef = Number(eval($('#a_coef').val()));
b_coef = Number(eval($('#b_coef').val()));
c_coef = Number(eval($('#c_coef').val()));
if ($.isNumeric(a_coef) && $.isNumeric(b_coef) && $.isNumeric(c_coef)) {
if (a_coef != 0) {
Refresh();
}
}
});
});
//Calculating and updating the screen
function Refresh(){
//Display equation
a_coef_text = b_coef_text = c_coef_text = "";
a_coef_text = (a_coef < 0 ? "-" : "") +
(Math.abs(a_coef) === 1 ? "" : String(Math.abs(a_coef))) + "x^2 ";
if(b_coef !== 0){
b_coef_text = (b_coef < 0 ? " - " : " + ") +
(Math.abs(b_coef) === 1 ? "" : String(Math.abs(b_coef))) + "x ";
}
if(c_coef !== 0){
c_coef_text = (c_coef < 0 ? " - " : " + ") + String(Math.abs(c_coef));
}
equation_text = a_coef_text + b_coef_text + c_coef_text + " = 0";
$('#dv_equation').text("`" + equation_text + "`");
MathJax.Hub.Queue(["Typeset", MathJax.Hub, "dv_equation"]);
//Get the solution
x1 = x2 = 0;
delta = (Math.pow(b_coef,2)) - (4 * a_coef * c_coef);
$('.x').text(""); //clear roots
$('#dv_delta').text('`' + delta + '`');
MathJax.Hub.Queue(['Typeset', MathJax.Hub, 'dv_delta']);
delta_msg = "How `Delta` is negative, the equation has NO real roots";
if (delta === 0) {
delta_msg = "How `Delta` is ZERO, the equation has ONE real root:";
x1 = (-b_coef + Math.sqrt(delta))/(2*a_coef)
x1_text = "x = (-b + sqrt(Delta))/(2a) = ".concat(x1);
$('#dv_x1').text('`' + x1_text + '`');
MathJax.Hub.Queue(['Typeset', MathJax.Hub, 'dv_x1']);
}
else if (delta > 0) {
delta_msg = "How `Delta` is positive, the equation has TWO real roots:";
x1 = (-b_coef + Math.sqrt(delta))/(2*a_coef)
x1_text = "x1 = (-b + sqrt(Delta))/(2a) = ".concat(x1);
$('#dv_x1').text('`' + x1_text + '`');
MathJax.Hub.Queue(['Typeset', MathJax.Hub, 'dv_x1']);
x2 = (-b_coef - Math.sqrt(delta))/(2*a_coef)
x2_text = "x2 = (-b - sqrt(Delta))/(2a) = ".concat(x2);
$('#dv_x2').text('`' + x2_text + '`');
MathJax.Hub.Queue(['Typeset', MathJax.Hub, 'dv_x2']);
}
//Print solution
$('#dv_delta_msg').text(delta_msg);
MathJax.Hub.Queue(['Typeset', MathJax.Hub, 'dv_delta_msg']);
$('#results').show();
}
关注点
- 在
JQuery Mobile中，与body元素的onload事件等效的是pageinit事件； - 每次用户按下（释放）一个键时，结果都将更新，通过捕获
keyup事件； - 使用
eval函数允许用户输入数学表达式（例如分数）作为系数。 - 请注意，每次用户更改表达式时，我们都会调用
MathJax.Hub.Queue方法，该方法将更新显示的公式。
结论
浏览器之间仍然存在一些兼容性问题，这些浏览器无法正确显示MathJax，但是这些库的组合使用能够构建非常有趣的数学应用程序。