什么是 JavaScript?

HTML

JavaScript 是用于 Web 的编程语言

JavaScript 可以更新和更改 HTMLCSS

JavaScript 可以计算操作验证数据。


JavaScript 快速入门教程

本教程将快速了解最重要的 JavaScript 数据类型。

JavaScript 变量可以是:

  • 数字
  • 字符串
  • 对象
  • 数组
  • 功能

JavaScript 变量

JavaScript 变量是存储数据值的容器。

在本例中,x、y 和 z 是变量:

实例

var x = 5;
var y = 6;
var z = x + y;
亲自试一试 »

从上面的例子中,你可以预期:

  • x 存储值 5
  • y 存储值 6
  • z 存储值 11

JavaScript 数字

JavaScript 只有一种的数字。 数字可以带小数也可以不带小数。

实例

var x = 3.14;    // A number with decimals
var y = 3;       // A number without decimals

亲自试一试 »

所有数字都存储为双精度浮点数。

最大小数位数为 17,但浮点并不总是 100% 准确:

实例

var x = 0.2 + 0.1;         // x will be 0.30000000000000004

亲自试一试 »


JavaScript 字符串

字符串存储文本。 字符串写在引号内。 您可以使用单引号或双引号

实例

var carname = "Volvo XC60";  // Double quotes
var carname = 'Volvo XC60';  // Single quotes
亲自试一试 »

字符串的长度在内置属性length中找到:

实例

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;
亲自试一试 »


JavaScript 对象

您已经了解到 JavaScript 变量是数据值的容器。

此代码将单值(菲亚特)分配给名为car的变量

var car = "Fiat";
亲自试一试 »

对象也是变量。 但是对象可以包含许多值。

此代码将多值(菲亚特、500、白色)分配给名为car的变量

var car = {type:"Fiat", model:"500", color:"white"};
亲自试一试 »

JavaScript 数组

JavaScript 数组用于在单个变量中存储多个值。

实例

var cars = ["Saab", "Volvo", "BMW"];
亲自试一试 »

JavaScript 函数

JavaScript 函数是设计用于执行特定任务的代码块。

JavaScript 函数在 "something" 调用(调用它)时执行。

实例

function myFunction(p1, p2) {
    return p1 * p2;              // The function returns the product of p1 and p2
}
亲自试一试 »

JavaScript 能做什么?

本节包含一些 JavaScript 可以做什么的示例:

  • JavaScript 可以更改 HTML 内容
  • JavaScript 可以更改 HTML 属性值
  • JavaScript 可以更改 HTML 样式 (CSS)
  • JavaScript 可以隐藏 HTML 元素
  • JavaScript 可以显示 HTML 元素

JavaScript 可以改变 HTML 内容

许多 JavaScript HTML 方法之一是 getElementById()

此示例使用方法 "find" 一个 HTML 元素(id="demo")并将元素内容(innerHTML)更改为 "Hello JavaScript":

实例

document.getElementById("demo").innerHTML = "Hello JavaScript";
亲自试一试 »

JavaScript 可以更改 HTML 属性值

在此示例中,JavaScript 更改了 <img> 标记的 src(源)属性的值:

The Light Bulb

亲自试一试 »


JavaScript 可以改变 HTML 样式 (CSS)

更改 HTML 元素的样式,是更改 HTML 属性的一种变体:

实例

document.getElementById("demo").style.fontSize = "35px";
or
document.getElementById('demo').style.fontSize = '35px';
亲自试一试 »

JavaScript 可以隐藏 HTML 元素

可以通过改变显示样式来隐藏 HTML 元素:

实例

document.getElementById("demo").style.display = "none";
or
document.getElementById('demo').style.display = 'none';
亲自试一试 »

JavaScript 可以显示 HTML 元素

显示隐藏的 HTML 元素也可以通过改变显示样式来完成:

实例

document.getElementById("demo").style.display = "block";
or
document.getElementById('demo').style.display = 'block';
亲自试一试 »

完整的 JavaScript 教程

这是对 JavaScript 的简短描述。

如需完整的 JavaScript 教程,请访问 W3Schools JavaScript 教程

如需完整的 JavaScript 参考,请访问 W3Schools JavaScript 参考