这是全栈数据工程师养成攻略系列教程的第二十一期：21 Web基础 网页的关节JS。
我们已经了解了Web三件套中的HTML和CSS，现在让我们来学习下最后的JS。
什么是JS
JS的全称是JavaScript，但是和Java关系并不大。之所以将JS比如网页的关节，是因为JS可以动态地操作DOM元素，例如插入和删除DOM元素，或者修改已有元素的样式和内容等。
JS是Web网页中的脚本编程语言，因此可以用JS来完成一些任务，例如实现一些数值计算，或者编写Web网页中的事件响应函数。Web网页中的事件包括鼠标悬浮、鼠标点击、鼠标滚动、键盘输入等，可以使用JS监听这些事件，并且在事件发生时进行相应的操作和处理，从而实现动态的页面更新和用户交互。
使用JS
使用JS的方法有两种：引入外部.js文件；直接在HTML中写JS。
如同引入外部.css文件一样，可以新建一个script.js文件，然后在里面编写JS代码，例如输入console.log("Hello World!");，然后在HTML的head中使用script标签引入，src属性指定了.js文件的相对路径。
<script src="script.js"></script>复制代码运行写好的HTML文件，打开Chrome的开发者工具，在Console标签页中即可看到打印出来的Hello World!。console.log()是JS提供的打印函数，好比Python的print，可以在Web网页中打印变量并进行调试。
如果是直接在HTML中写JS代码，则如同CSS的style标签一样，JS代码需要写在script标签之中，script标签可以放在HTML网页的任意位置，每条JS代码之后应当使用分号;结束。
<script>
console.log("Hello World!");
</script>复制代码JS基础
在实际项目中我们一般很少直接写原生JS代码，因为已经有相当多的JS高级封装框架。这些框架在原生JS语法的基础上进一步开发，能够提供更方便更丰富的功能，例如后续章节中将介绍的JQuery，以及目前十分流行的Angular.js、React.js和Vue.js等前端框架。尽管如此，我们仍需要了解一些JS基础内容。
使用document.write()可以向body中写入DOM元素，以下代码向body中添加了一个h1标签。不过这一函数比较鸡肋，因为无法灵活地控制写入的内容和位置。
document.write('<h1>Hello World!</h1>');复制代码和Python一样，JS也是一种弱变量类型的编程语言。使用关键字var声明一个变量，声明时无需指定其变量类型。和Python一样，JS中常用的基础变量类型包括数值（整数、浮点数）和字符串。//表示JS注释，如同Python中的#一样。
var a = 1; // 整数
var b = 1.1; // 浮点数
var c = 'Hello'; //字符串
console.log(a, b, c);复制代码Python中用列表和字典分别来存储序列和键值对，在JS中同样有相应的数据结构，只不过是换了个名称，分别叫做数组和对象。它们的使用方法，包括声明、添加元素、访问元素、修改元素和删除元素等，和Python中的列表和字典都是大同小异的。
var d = []; // 数组
// 添加元素
// Python中的列表是append()
d.push(1);
d.push(2);
console.log(d);
// 打印下标为1，即第二个元素
console.log(d[1]);
// 数组长度，Python中是用len()
console.log(d.length);
var e = {}; // 对象
// 添加key和value
e['k1'] = 1;
e['k2'] = 2;
e['k3'] = 'Hello';
console.log(e);
console.log(e['k1']);复制代码在Chrome开发者工具的Console标签页中可以进行调试并观察打印信息，可以看到数组和对象分别是用Array[]和Object{}表示的。
使用document.getElementById()可以根据给定的ID获取相应的DOM元素并返回一个DOM对象，假设我们在body里面写了一个h1标签：
<h1 id="title">标题内容</h1>复制代码然后便可以在JS中通过document.getElementById()函数搜索并获取到这个h1。通过操作变量t，我们可以对相应的h1标签进行一些操作，例如获取其文本内容、修改其文本内容、向其中添加DOM元素、将其删除等。
var t = document.getElementById('title');
console.log(t);复制代码再来看一下onclick，即DOM元素的鼠标点击响应事件。以下代码以button标签为例，当鼠标点击这一按钮时，刚才提到的h1标签文本将发生变化。HTML部分代码如下，可以将onclick当作DOM元素的属性来理解，当鼠标点击这一按钮时，将触发JS中定义的myFunc()函数。
<h1 id="title">标题内容</h1>
<button type="button" onclick="myFunc()">点我</button>复制代码JS部分代码如下，首先我们需要定义myFunc()函数。JS使用function定义函数，和Python中的函数一样，也是将一些可重用的代码定义成函数，从而通过调用函数即可方便地执行一系列代码。JS函数也支持提供参数，从而根据提供的参数完成更灵活更复杂的功能。在DOM对象之后使用.可以访问其自带的一些内部属性和函数，例如innerHTML属性即DOM对象的HTML内容，可以设置为纯文本，也可以在其中包含HTML标签。编写代码并刷新网页，可以发现点击按钮之后，h1标签的内容将会被替换成两个p。
function myFunc (argument) {
var t = document.getElementById('title');
t.innerHTML = '<p>按钮被点击了</p><p>按钮被点击了</p>';
}复制代码因此，我们可以大概总结出JS动态操作DOM元素的流程。要么一开始直接在script中进行相关操作，要么通过onclick等属性绑定相应的事件响应函数，然后在响应函数里完成一些操作，从而实现动态交互的网页效果。
JS中的运算符包括算术运算符、比较运算符、赋值运算符、逻辑运算符等，和Python类似。
JS中也有条件和循环，分别使用小括号()和大括号{}显式指定判断条件和主体部分，而Python则是依靠适当的缩进来隐式指定。对于条件，需要注意，但凡出现if的地方都必须加上判断条件。JS循环以for循环为主，可以用来遍历数组和对象。
// 条件
if (a == 1) {
console.log('a equal 1');
}
else {
console.log('a not equal 1');
}
if (a == 1) {
console.log('a equal 1');
}
else if (a == 2) {
console.log('a equal 2');
}
else {
console.log('a not equal 1, 2');
}
// 循环遍历数组
for (var i = 0; i < d.length; i++) {
console.log(i, d[i]);
}
// 循环遍历对象
for (var key in e) {
console.log(key, e[key]);
}复制代码现在我们应该能逐渐体会到各种编程语言的一些通性，虽然不同的编程语言都有各自的特点和强项，但核心的编程思想都是相通和类似的，不同的无非只是一些使用上的细节。因此，熟练掌握一门自己最习惯使用的编程语言，同时了解其他多门辅助的编程语言，对于提高自己的理解能力和编程能力都是有很有帮助的。
除了以上提及的鼠标点击事件，JS中还支持很多其他类型的事件，例如鼠标悬浮、鼠标滚动、键盘输入等，我们将在后续介绍JQuery的时候再进行详细讨论。
补充学习
关于JS的更多内容可以参考以下链接，www.runoob.com/js/js-tutor…，里面提供了更为详细和系统的讲解，并结合大量实例代码加以巩固，推荐完整地浏览和尝试一遍。
掌握HTML、CSS、JS三件套之后，我们对Web基础内容应当具备了一个大致的了解。后续的学习内容包括一些进阶知识，例如基于JS、可以更加方便操作DOM元素的JQuery。Bootstrap是一款轻量的前端封装，包括CSS和JS两部分。前者提供了一些写好的CSS class，这样我们通过class的名称便可以快速使用写好的样式；后者基于JS提供了一些封装好的可以直接使用的网页动态功能，例如标签页、模态框和轮播等，如果我们自己使用原生的JS代码去实现这些动态效果，往往需要耗费更多时间和代码。
当然，前端所涉及的内容非常之多，新的好用的框架也层出不穷、不断迭代，例如之前提及的Angular.js、React.js和Vue.js等。Web后端可选的框架则更为丰富，基于PHP、Python、NodeJs、Java等都可以搭建Web后端。不断学习新的知识是好事，但是应当打好Web基础，并分别熟练掌握至少一种前端框架和后端框架，这样在后续通过Web网站实现动态交互的数据可视化时，才能得心应手地实现想要的效果。
视频链接：网页的关节JS
扫一扫
166
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
