JavaScript 如何工作?我如何用它构建简单的计算器?

JavaScript training boot camp
JavaScript 是一种计算机编程语言。Pat Greenhouse/The Boston Globe via Getty Images

JavaScript 被称为客户端脚本语言。这意味着它是一种在互联网浏览器内部运行的计算机编程语言(浏览器也被称为 Web 客户端,因为它连接到 Web 服务器以下载页面)。

JavaScript 的工作方式很有趣。在一个普通的网页中,你会放置一些 JavaScript 代码(有关网页的详细信息,请参阅网页如何工作)。当浏览器加载页面时,浏览器有一个内置解释器,它会读取页面中找到的 JavaScript 代码并运行它。

广告

网页设计者以许多不同的方式使用 JavaScript。其中最常见的一种是在表单中进行字段验证。许多网站通过在线表单收集用户信息,JavaScript 可以帮助验证输入。例如,程序员可能会验证输入到表单中的年龄是否在 1 到 120 之间。

网页设计者使用 JavaScript 的另一种方式是创建计算器。以下是几个例子:

为了给您一个极其简单的 JavaScript 计算器示例,下面的 HTML 展示了如何使用 JavaScript 创建一个华氏度到摄氏度转换器:

<html>
<head>
<script language="JavaScript">
<!-- hide this script from old browsers
function temp(form)
{
  var f = parseFloat(form.DegF.value, 10);
  var c = 0;
  c = (f - 32.0) * 5.0 / 9.0;
  form.DegC.value = c;
}
// done hiding from old browsers -->
</script>
</head>
<body>
<FORM>
<h2>Fahrenheit to Celsius Converter</h2>
Enter a temperature in degrees F: 
<INPUT NAME="DegF" VALUE="0" MAXLENGTH="15" SIZE=15>
<p>
Click this button to calculate the temperature 
in degrees C:
<INPUT NAME="calc" VALUE="Calculate" TYPE=BUTTON 
onClick=temp(this.form)>
<p>
Temperature in degrees C is: 
<INPUT NAME="DegC" READONLY SIZE=15>
</FORM>
</body>
</html>

如果您已经阅读过网页如何工作CGI 脚本如何工作,那么这段 HTML 的很大一部分您会很熟悉。这是任何网页的基本结构:

<html>
<head>
</head>
<body>
</body>
</html>

在头部有一段 JavaScript 代码,它是用于计算华氏度到摄氏度转换的函数:

<head>
<script>
<!-- hide this script from old browsers
function temp(form)
{
  var f = parseFloat(form.DegF.value, 10);
  var c = 0;
  c = (f - 32.0) * 5.0 / 9.0;
  form.DegC.value = c;
}
<!-- done hiding from old browsers -->
</script>
</head>

该函数名为 temp。它包含用于计算摄氏温度的 JavaScript 代码。

在页面主体中有一个典型表单:

<FORM>
<h2>Fahrenheit to Celsius Converter</h2>
Enter a temperature in degrees F: 
<INPUT NAME="DegF" VALUE="0" MAXLENGTH="15" SIZE=15>
<p>
Click this button to calculate the temperature 
in degrees C:
<INPUT NAME="calc" VALUE="Calculate" TYPE=BUTTON 
onClick=temp(this.form)>
<p>
Temperature in degrees C is: 
<INPUT NAME="DegC" READONLY SIZE=15>
</FORM>

这一行是关键:

<INPUT NAME="calc" VALUE="Calculate" TYPE=BUTTON 
onClick=temp(this.form)>

这是一个普通按钮控件。当用户点击它时,由于 onClick 标记,它会调用页面头部的函数。

就编程语言而言,JavaScript 难度中等。如果您已经理解编程,学习如何使用它并不特别困难,但如果您是编程新手,它肯定不是一门容易上手的语言。不过,您可以修改这段示例代码并扩展它来创建其他计算器。

更多信息,请参阅:

广告

常见问题

JavaScript 有什么用?
JavaScript 编程语言用于网页开发、创建应用程序和游戏,以及处理网络多媒体。JavaScript 是世界上使用最广泛的编程语言。

广告

加载中...