今天完成的事情：

完成了任务二的js代码，并对出现的各种错误进行修改，对DOM各种操作方法进行了学习和运用。

任务二的逻辑是用户通过拖动滑动条或者输入数字的方式输入游戏总人数，

点击“点击设置”按钮，系统自动完成玩家配比，之后把配比结果显示在上方区域。

用户在按钮下方的词组输入框输入各类词组，点击“去发牌”按钮跳转到发牌页面。

通过document.getElementById()获取各种元素节点，

让滑动条和数字框的value值联动，通过switch case语句实现对不同总人数时杀手人数的分配。

随后利用for循环和push()方法填充总人数数组，再利用洗牌算法打乱顺序

之后按人数和顺序取出杀手数组和平民数组，再利用sort()方法实现对数组的降序排列。

sort()方法在没有参数时按照字符编码的顺序进行排序，如果想按照其他标准进行排序，

就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。

比较函数应该具有两个参数 a 和 b，其返回值如下：

若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。

若 a 等于 b，则返回 0。

若 a 大于 b，则返回一个大于 0 的值。

在这里我们想让数组按从小到大的顺序排列，就需要sort(function(a,b) {return a-b;});

为实现点击后实现人数配比的功能，需要利用createElement()方法在空div中创建新的元素节点span，

利用createTextNode()方法创建新的文本节点，然后用appendChild()方法向span中添加新的子节点文本节点，

再向div中添加新的子节点元素节点span。

明天计划的事情：

开始写任务3，通过做任务2，发现写js代码之前一定要对要完成的任务，对逻辑有个清晰的认识，

可以现在纸上写一写，画画流程图之类的。

遇到的问题： 

全局变量和局部变量、函数加括号和不加括号的区别、DOM Core和 HTML DOM的区别。

对这几个知识点的认识不清晰给我在完成任务时造成了不小的麻烦。

DOM编程艺术那本书里说getAttribute和setAttribute这些DOM Core的方法和属性和HTML-DOM的是可以相互替换的

但我用的时候发现number = document.getElementById("range").value;有用，换成setAttribute()就会出错，参数传不过去。

收获：

1.JS的全局变量和局部变量

1).Javascript的变量的scope是根据方法块来划分的（也就是说以function的一对大括号｛ ｝来划分），切记，是function块，而for、while、if块并不是作用域的划分标准。

2).Javascript在执行前会对整个脚本文件的声明部分做完整分析(包括局部变量)，从而确定实变量的作用域。怎么理解呢？看下面一个例子：

1. <script>  
2.     var a =1;  
3.     function test(){  
4.         alert(a); //a为undefined! 这个a并不是全局变量，这是因为在function scope里已经声明了（函数体倒数第4行）一个重名的局部变量,  
5.                      //所以全局变量a被覆盖了，这说明了Javascript在执行前会对整个脚本文件的定义部分做完整分析,所以在函数test()执行前,  
6.                      //函数体中的变量a就被指向内部的局部变量.而不是指向外部的全局变量. 但这时a只有声明，还没赋值，所以输出undefined。  
7.         a=4         
8.         alert(a);  //a为4,没悬念了吧？ 这里的a还是局部变量哦！  
9.         var a;     //局部变量a在这行声明  
10.         alert(a);  //a还是为4,这是因为之前已把4赋给a了  
11.     }  
12.     test();  
13.     alert(a); //a为1，这里并不在function scope内，a的值为全局变量的值  
14. </script>  

3).当全局变量跟局部变量重名时，局部变量的scope会覆盖掉全局变量的scope，当离开局部变量的scope后，又重回到全局变量的scope，而当全局变量遇上局部变量时，怎样使用全局变量呢？用window.globalVariableName。

1. <script>  
2.     var a =1;  
3.     function test(){     
4.         alert(window.a);  //a为1,这里的a是全局变量哦！  
5.         var a=2;     //局部变量a在这行定义  
6.         alert(a);  //a为2,这里的a是局部变量哦！  
7.     }  
8.     test();  
9.     alert(a); //a为1，这里并不在function scope内，a的值为全局变量的值  
10. </script>  

2.JS中函数名后面的括号加与不加的区别

函数名实际上是指针。

函数是一种叫做function引用类型的实例，因此函数是一个对象。

对象是保存在内存中的，函数名则是指向这个对象的指针。

var a = fun 表示把函数名fun这个指针拷贝一份给变量a，但是这不是指函数本身被复制了一份。

就好比，地图上上海市（对应函数对象）只有一个，但指向上海市的路标（对应指针）有很多，

而且你还可以继续添加（复制）无数个指向上海市的路标，但上海市本身不会被复制。

如果函数名后面加上圆括号就表示立即调用（执行）这个函数里面的代码（花括号部分的代码）。

任务2的去发牌按钮的btn2.onclick = inspect;

后面加了括号变成打开页面直接执行函数代码页面跳转，不加括号则是通过点击按钮才触发执行代码跳转页面。

3.HTML-DOM在DOM Core出现之前很久就已经为人们所熟悉了。

DOM（文档对象模型）是由W3C制定的一套访问和操作XML（eXtensible Markup Language）文档的标准，

即API。比如DOM告诉JavaScript引擎如何在浏览器窗口中显示和操作XML创建的标记（Tag）。

DOM与特定的平台、浏览器、语言无关，很多种语言都实现了DOM，比如因为JavaScript和PHP都实现了DOM，

所以 JavaScript中有getElementsByTagName()方法，PHP中也有 getElementsByTagName()，

getElementsByTagName()方法是DOM规定的访问XML文档的接口。

HTML-DOM代码通常会更短，但它们只能用来处理Web文档。

不管是DOM Core还是HTML-DOM，我们在使用JavaScript的时候要注意浏览器之间的兼容性，

因为不同的浏览器对这两类方法和属性的支持可能不一样。

常见的Core DOM方法如下：

1、创建节点
createElement()
createTextNode()
2、复制节点
cloneNode()
3、插入节点
appendChild()
insertBefore()
4、删除节点
removeChild()
5、替换节点
replaceChild()
6、查找和设置节点属性
setAttribute()
getAttribute()
7、查找节点
getElementById()
getElementsByTagName()
hasChildNode()

常见的Core DOM属性如下：

node.childNodes
node.firstChild
node.lastChild
node.nextSibling
node.previousSibling
node.parentNode

今天陈红远的技术分享讲的主要是栅格布局，对于container，row，col 的3个15px的解释是使嵌套更方便，直接在col里嵌套row，无缝连接，浑然一体。不过我认为这种设计对于装在container内，又不在row里的图片或文字内容和col中的内容的对齐效果也很赞。