一、前几节课一直都是复制粘贴的方式在 console 中运行程序，在程序改来改去的时候，复制过来复制过去挺麻烦的，今天玩这个改动会比较多，所以咱们换种方式，把 javaScript 代码写到 html 中，直接在浏览器打开，然后改完程序，刷新就行了。
1、打开 vscode ，File -> New File.
2、将文档类型设置成 html
3、打个感叹号，并按 Tab 键
会自动生成一个简单的html模板
4、然后在 <body></body> 之前加上 以下内容，并保存到桌面，命名为“杨辉三角.html”：
5、找到桌面上的“杨辉三角”，用鼠标右键->打开方式-> Google Chrome
会弹出 chrome 浏览器，并在页面上显示一个1就对了
然后，我们切回到 vscode 把 document . write (1) 改成 document.write(2)并 control + s 保存;
再倒回来浏览器刷新一下看看会发现，页面上已经变成2了。
二、先了解一下，什么是杨辉三角
1、第一行是一个1；
2、第二行开始，每行的行首和行尾都是1
3、从第三行开始看出规律来了，中间的2就是第二行的两个1的和
4、从第四行来看，第2个数字“3”是第三行的第1和第2个数的和，第3个数字“3”，是第三行的第2和第3个数字的和。
规律找到了，我们开始来写程序吧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
/*
杨辉三角就是下面这么一个东西：
1
1 1
1 2 1
1 3 3 1
1 4 6 4 1
======================
1、第一行是一个1；
2、第二行开始，每行的行首和行尾都是1
3、从第三行开始看出规律来了，中间的2就是第二行的两个1的和
4、从第四行来看，第2个数字“3”是第三行的第1和第2个数的和，第3个数字“3”，是第三行的第2和第3个数字的和。
规律找到了，我们开始来写程序吧。
*/
function ShowYangHuiTriangle(n) { //n 表示行数
//因为前一行结果会影响后一行,所以打印后一行的时候，要知道前一行是啥，而前一行的空格数，又和后一行相关
//所以我们还是先把数据生成了再来打印吧
var data = []; //java script 不能直接定义 二维数组 ，只能先定义一个一维数组，再往二维数组里插数组
//第1行：data[0] = [1]
//第2行：data[1] = [1,1]
//第3行：data[2] = [1,2,1]
//第4行: data[3] = [1,3,3,1]
//第5行: data[4] = [1,4,6,4,1]
//第一行虽然就只有一个数字，但它也应该是个数组
data.push([1]);
//从第二行开始，到第 n 行，这种带得有（从 xxx 到 xxx 的，一般就是 for 循环了）
//这里要注意，数组的下标是从 0 开始的
//假如： data = [1,2,3,4,5] 数组
//那么 data[0] = 1; data[1] = 2; data[2] = 3; data[3] = 4; data[4] = 5;
//所以从第 2 行到 第 n 行，应该是 1 <= row < n
for (var r=1;r<n; r++) { //r 表示当前是第几行
var row = []; //生成新行
row.push(1); //数组的 push 方法是往数组中按顺序添加元素，这里表示每行的行首都是1
//第一行是一个元素，第二行是两个元素，第三行是三个元素，所以第 r 行
//就是 r 个元素，但需要注意的是，这里的 r 是行标
//第一行的时候 r = 0， 第二行的时候，r = 1, 第 n 行的时候 r = n - 1;
//下标为r的行，它是第 r+1 行，它的元素范围是从 0 < 元素个数 < r + 1; //每行的全部元素
//还要去掉行首和行尾所以需要计算的范围就是 1 < 元素个数 < r //去掉了行首和行尾的全部元素
for (var c=1;c<r;c++) {
row.push(data[r-1][c-1] + data[r-1][c]);
//data[r] 是当前行所以 data[r-1] 是前一行
//当前行的第2个元素 = 前一行的第1个元素 + 前一行的第2个元素
//举例：第3行的第2个数字， data[2][1] = 2 ，它等于 第2行的第1个数字和第2个数字和 = data[1][0] + data[1][1]
}
row.push(1); //这里表示每行的行尾也是1
data.push(row); //把新行加入到 data 中
}
//打印所有行
for (var r in data) { //r 为当前行数
//每一行的空格数 = n - r 当前行数
for(var c=0;c<n-r;c++) document.write(" ");
document.write(data[r].join(" ")); //每一行的所有数字用空格格开
document.write("n"); //打完一行要换行
}
}
document.write("<pre>"); //保持原样打印开始
ShowYangHuiTriangle(5); // 我们希望想打几行就打几行
document.write("</pre>"); //保持原样打印结束
</script>
</body>
</html>
当行数很多的时候，格式会乱，比如说打印10行
