第二十一讲：学一点点JS（一）变量

和CSS相比，JS是一门高级编程语言，它是完备的、独立的，其代码能直接运行在浏览器和其他相关应用中，无需额外的程序库支持，无需编译。JS是做交互音画帖必须的代码模块，例如音频、视频、CSS关键帧动画乃至文本输出的智能管控，必须由JS来操纵才能完美实现。

JS没有我们想象的那么难，也没有我们想象的那么容易。入门，有人只需要不到一个钟的时间，而有人穷其一生对之探索还自认为自己尚处在初级阶段。然弱水三千我只取一瓢饮，用我用到的、要用的，仅此而已，却也其乐无穷。一切围绕做帖，所以我们不会分门别类地去逐一学习专业的JS，而是由浅入深、以点带面地去触碰一下我们绕不开的东东。本节，我们就先从JS变量开始。

变量大概是指和代数一样性质的东东，就像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 变量的值，组合赋值运算符号 += 就是这个意思，更具体说是，左边的值等于左边的值再加上右边的值。

变量类型做帖子可能会经常用到的还有字符类型，字符变量赋值的时候要用小角单引号或双引号包裹起来以表明其字符类型身份。字符变量可以使用加号 + 运算符进行运算，但并不是数值运算，而是字符拼接运算，但和上面的计算运算性质不同。试看一下示例：

<div id="jbox2">JS运行结果：</div>

<script>
var s1 = '12'; //引号表示12是字符值，s1因此是字符变量，下同
var s2 = '36';
var s3 =  s1 + s2;
jbox2.innerText += s3;
</script>

点击查看效果

JS是弱变量类型语言，例如，字符变量和数值变量也可以用 + 运算符进行拼接，拼接出来的新变量类型是字符类型，也可以通过特殊处理让它变成数值类型。看例子：

<div id="jbox3">JS运行结果：</div>

<script>
var a1 = 12;
var a2 = '36';
var a3 =  a1 + a2;
// 强制数值类型使用下面的语句(但它的能力有限，仅能处理 数字+字符 的格式字符)
// var a3 =  a1 + parseInt(a2);
jbox3.innerText += a3;
</script>

点击查看效果

还有数组变量是帖子经常会用到的一个变量类型。数组是数据的集合，一系列的数据以数组的形式存储在一个变量中以方便后续操作的调取。数组里的每一个数据叫数组元素，以下例子了展示数组结构：

<div id="jbox4">JS运行结果：</div>

<script>
var ar1 = [12, 44, 2, 63, 7]; // ar1 数组变量有 5 个数组元素，所有数组元素都是数值型
var ar2 = ['张三', '李四', '王五']; //ar2 数组变量有 3 个数组元素，所有数组元素都是字符型
var ar3 = [1, '小熊', 2, '大猫']; //ar3 数组变量有 4 个数组元素，数组元素是数值和字符混合在一起
//下面输出结果 ：三个数组分别取出对应数组的第一、二、三个元素
//读取数组的数据用 数组变量[x] 方法，[x] 表示数组的下标，下标从 0 开始，下标 0 表示数组的第一个数据
jbox4.innerText += ar1[0] + ar2[1] + ar3[2];
</script>

点击查看效果

以上的数组变量例子，经常在帖子中用来存储一些元素的数据和lrc歌词等，这样帖子可以在运行过程中动态地使用相关数据。数组还可以用来储存元素对象，比方说一大堆的按钮或粒子我们要对它们进行控制，我们就需要获得它们的操作句柄，即识别它们的标识。以下例子，就像使用元素的id一样，我们用另外的方式获取元素的操作标识，然后存入所声明的数组中：

/* JS代码 ：常用获取诸多元素操作标识的方法 */

//① 获取文档中所有的 button 标签并存入数组变量 buttons 中
var buttons = document.getElementsByTagName('button');

//② 获取 id="mydiv" 标签里所有的 button 标签并存入数组变量 btns 中
var btns = mydiv.getElementsByTagName('button');

//③ 获取文档中所有 class="mypic" 的标签并存入数组变量 elems 中
var elems = document.querySelectorAll('.mypic');

//④ 获取 id="mydiv" 标签里所有的 p 标签并存入数组变量 els 中
var els = mydiv.querySelectorAll('p');

上例，变量名 buttons、btns 等是自定义的命名，等号后面信息量很庞大：document 是JS内置的DOM即文档的名称，指基于整个文档，mydiv 是自命名的某个元素的id号，基于元素；getElementsByTagName() 和 querySelectorAll() 都是JS内置的获取元素标识的方法，前者通过标签名称、后者通过 class 名称拿到相应元素操作标识，得到的标识与id等效。这些，都是做音画帖必备的技能与方法。

数组的更多知识点如果有必要我们在后续讲义中会穿插介绍，这里只需掌握上面例子演示的数组的结构与简单的读取数组元素值的方法即可。同样的，JS变量还有其他的类型，这里点到为止，先学习可能会经常用到的。

本讲主要介绍JS变量，我们学习了四种类型的变量，分别是数值型变量、字符型变量、数组变量和基于HTML元素id的对象变量。JS变量是弱类型变量，通过赋值的方式表明其变量类型，变量类型在程序运行中可能会发生改变。

作业：设计四个变量，变量一、二是字符型，分别赋值“今年”、“岁”，变量三是数值型，变量四是人名数组，请分别给它们赋值。然后从数组中读取任意一个数组元素，并和前面的三个变量值进行拼接，得出的结果预期是“某某今年几岁”。请将结果输出到一个自定义id的元素中。

返回目录