变量大概是指和代数一样性质的东东,就像x、y、z常分别用来代表一些数一样,有些东东可能不确定或在程序运行时会动态改变,我们就用xyz一样的东东暂时指代它——JS变量就是如此,用自定义命名来代表什么。变量需要声明,一般用 var 做声明关键字,还有 let 和 const,这两个有点讲究,我们先不管,暂且用 var 关键字吧。下面我们试着声明几个自己定义名称的变量:
<!-- HTML代码 :设置一个元素输出JS执行的结果 -->
<div id="jbox1">JS运行结果:</div>
<!-- JS代码 :声明变量并运行计算 -->
<script>
var a = 12; // 声明变量 a 变量并给它赋值 12
var b = 36; // 声明变量 a 变量并给它赋值 36
//上面的两个声明像下面那样写在一行,中间用小角逗号隔开
//var a = 12, b = 36;
var c = a + b; // 声明 c 变量并令其等于 a + b
jbox1.innerText += c; // 在指定元素输出变量 c 的值
</script>
JS代码解释:第6、7行性质一样,分别声明了两个变量 a 和 b,并用等号分别给它们赋值,每一行结束加上小角分号 ; 表示该句结束,这是JS结束一句代码和其他相关模块的符号。第10行声明一个变量 c,也给它赋值,它的值不是直接赋值,而是用前面两个变量相加。第11行,我们在 id= "jbox1" 的HTML元素内输出变量 c 的值,其中 innerText 是元素的纯文本,JS内置的一个基于 div 等元素属性之一,类似的还有 innerHTML(内部的HTML代码)、textContent(文本内容)。
上面的示例其实有4个变量:a、b、c 是我们声明的变量,前两个变量我们直接给它们赋值,都是数字值,所以这两个变量叫数值型变量;第3个变量是 c,它等于变量 a 和 b 之和,所以c也是数值型变量。这三个变量是显性声明的,还有一个变量我们没有声明,直接使用,它是 jbox1,它指向 id="jbox1" 的 div 元素(看第2行代码)。我们之前说过,web页中的元素 id 是唯一的,就像人的身份证号一样,所以我们无需为之声明操作标识变量,JS通过 id 识别并操作元素,所以说 jbox1 这里是作为 div 元素的 id 也是一个变量,属于基于元素的对象变量。第8行代码的意思是,jbox1 这个元素的文本内容在其自身基础上加上 c 变量的值,组合赋值运算符号 += 就是这个意思,更具体说是,左边的值等于左边的值再加上右边的值。