今天完成的事情：
学习相关资料
什么是JS：
JavaScript 是一种轻量级的脚本语言，JavaScript 这个名字的原意是“很像Java的脚本语言”。ECMA 组织发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript。
所谓“脚本语言”（script language），指的是它不具备开发操作系统的能力，而是只用来编写控制其他大型应用程序（比如浏览器）的“脚本”。它本身提供的核心语法不算很多，只能用来做一些数学和逻辑运算。从语法角度看，JavaScript 语言是一种“对象模型”语言。各种宿主环境通过这个模型，描述自己的功能和操作接口，从而通过 JavaScript 控制这些功能。但是，JavaScript 并不是纯粹的“面向对象语言”，还支持其他编程范式（比如函数式编程）。这导致几乎任何一个问题，JavaScript 都有多种解决方法。
JavaScript 的核心语法部分相当精简，只包括两个部分：基本的语法构造（比如操作符、控制结构、语句）和标准库（就是一系列具有各种功能的对象比如Array、Date、Math等）。除此之外，各种宿主环境提供额外的 API（即只能在该环境使用的接口），以便 JavaScript 调用。以浏览器为例，它提供的额外 API 可以分成三大类。浏览器控制类：操作浏览器 ；DOM 类：操作网页的各种元素 ；Web 类：实现互联网的各种功能；JavaScript 的发明目的，就是作为浏览器的内置脚本语言，为网页开发者提供操控浏览器的能力。它是目前唯一一种通用的浏览器脚本语言，所有浏览器都支持。它可以让网页呈现各种特殊效果，为用户提供良好的互动体验。目前，全世界几乎所有网页都使用 JavaScript。
JS在html的引用：
如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。脚本可位于 HTML 的<body> 或 <head> 部分中，或者同时存在于两个部分中。外部js文件引用则是<script src="js/test.js"></script>。 老版本需要加上type=text/JavaScript，现在不加也没关系，因为html的默认脚本语言就是JavaScript。
学习资料：
了解一些基本的JS构成：
https://wangdoc.com/javascript/basic/grammar.html#语句
https://wangdoc.com/javascript/types/general.html
JavaScript 程序的执行单位为行（line），也就是一行一行地执行。一般情况下，每一行就是一个语句。
语句（statement）是为了完成某种任务而进行的操作
变量是对“值”的具名引用。变量就是为“值”起名，然后引用这个名字，就等同于引用这个值。变量的名字就是变量名。
JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升（hoisting）。
标识符（identifier）指的是用来识别各种值的合法名称。最常见的标识符就是变量名，以及后面要提到的函数名。JavaScript 语言的标识符对大小写敏感，所以a和A是两个不同的标识符。
标识符有一套命名规则，不符合规则的就是非法标识符。JavaScript 引擎遇到非法标识符，就会报错。
简单说，标识符命名规则如下。
第一个字符，可以是任意 Unicode 字母（包括英文字母和其他语言的字母），以及美元符号（$）和下划线（_）。
第二个字符及后面的字符，除了 Unicode 字母、美元符号和下划线，还可以用数字0-9。
中文是合法的标识符，可以用作变量名。
JavaScript 使用大括号，将多个相关的语句组合在一起，称为“区块”（block）
对于var命令来说，JavaScript 的区块不构成单独的作用域（scope）（也就是说var的声明变量依然会作用于区块之外）
JavaScript 提供if结构和switch结构，完成条件判断，即只有满足预设的条件，才会执行相应的语句。
if结构
先判断一个表达式的布尔值，然后根据布尔值的真伪，执行不同的语句。
所谓布尔值，指的是 JavaScript 的两个特殊值，true表示真，false表示伪。
如果表达式的求值结果为true，就执行紧跟在后面的语句；如果结果为false，则跳过紧跟在后面的语句。
这种写法要求条件表达式后面只能有一个语句。如果想执行多个语句，必须在if的条件判断之后，加上大括号，表示代码块（多个语句合并成一个语句）。建议总是在if语句中使用大括号，因为这样方便插入语句。
注意，if后面的表达式之中，不要混淆赋值表达式（=）、严格相等运算符（===）和相等运算符（==）。尤其是赋值表达式不具有比较作用。
if代码块后面，还可以跟一个else代码块，表示不满足条件时，所要执行的代码。
对同一个变量进行多次判断时，多个if...else语句可以连写在一起
if (m === 0) { } else if (m === 1) { } else if (m === 2) { } else { }
else代码块总是与离自己最近的那个if语句配对。
多个if...else连在一起使用的时候，可以转为使用更方便的switch结构。
switch (fruit) { case "banana":
break; case "apple":
break; default: }
根据变量fruit的值，选择执行相应的case。如果所有case都不符合，则执行最后的default部分。需要注意的是，每个case代码块内部的break语句不能少，否则会接下去执行下一个case代码块，而不是跳出switch结构。
需要注意的是，switch语句后面的表达式，与case语句后面的表示式比较运行结果时，采用的是严格相等运算符（===），而不是相等运算符（==），这意味着比较时不会发生类型转换。
JavaScript 还有一个三元运算符（即该运算符需要三个运算子）?:，也可以用于逻辑判断。
(条件) ? 表达式1 : 表达式2
如果“条件”为true，则返回“表达式1”的值，否则返回“表达式2”的值。
循环
循环语句用于重复执行某个操作，它有多种形式
while语句的循环条件是一个表达式，必须放在圆括号中。代码块部分，如果只有一条语句，可以省略大括号，否则就必须加上大括号。
while (条件) {
语句;
}
for语句是循环命令的另一种形式，可以指定循环的起点、终点和终止条件。
for (初始化表达式; 条件; 递增表达式)
语句for (初始化表达式; 条件; 递增表达式) {
语句
}
for语句后面的括号里面，有三个表达式。
- 初始化表达式（initialize）：确定循环变量的初始值，只在循环开始时执行一次。
- 条件表达式（test）：每轮循环开始时，都要执行这个条件表达式，只有值为真，才继续进行循环。
- 递增表达式（increment）：每轮循环的最后一个操作，通常用来递增循环变量。
所有for循环，都可以改写成while循环。for语句的三个部分（initialize、test、increment），可以省略任何一个，也可以全部省略。
do...while循环与while循环类似，唯一的区别就是先运行一次循环体，然后判断循环条件。
不管条件是否为真，do...while循环至少运行一次，这是这种结构最大的特点。另外，while语句后面的分号注意不要省略。
break语句和continue语句都具有跳转作用，可以让代码不按既有的顺序执行。
break语句用于跳出代码块或循环。
var i = 0;while(i < 100) { console.log('i 当前为：' + i);
i++; if (i === 10) break;
}
continue语句用于立即终止本轮循环，返回循环结构的头部，开始下一轮循环。
如果存在多重循环，不带参数的break语句和continue语句都只针对最内层循环。
标签
JavaScript 语言允许，语句的前面有标签（label），相当于定位符，用于跳转到程序的任意位置
label:
语句
标签通常与break语句和continue语句配合使用，跳出特定的循环。
JavaScript 语言的每一个值，都属于某一种数据类型。
数值（number）：整数和小数（比如1和3.14）
字符串（string）：文本（比如Hello World）。
布尔值（boolean）：表示真伪的两个特殊值，即true（真）和false（假）
undefined：表示“未定义”或不存在，即由于目前没有定义，所以此处暂时没有任何值
null：表示空值，即此处的值为空。
对象（object）：各种值组成的集合。
通常，数值、字符串、布尔值这三种类型，合称为原始类型（primitive type）的值，即它们是最基本的数据类型，不能再细分了。对象则称为合成类型（complex type）的值，因为一个对象往往是多个原始类型的值的合成，可以看作是一个存放各种值的容器。至于undefined和null，一般将它们看成两个特殊值。
对象是最复杂的数据类型，又可以分成三个子类型。
- 狭义的对象（object）
- 数组（array）
- 函数（function）
狭义的对象和数组是两种不同的数据组合方式，函数其实是处理数据的方法，JavaScript 把它当成一种数据类型，可以赋值给变量，这为编程带来了很大的灵活性，也为 JavaScript 的“函数式编程”奠定了基础。
typeof运算符可以返回一个值的数据类型。（区分值的种类）
数值、字符串、布尔值分别返回number、string、boolean。函数返回function。undefined返回undefined。（未定义）
利用这一点，typeof可以用来检查一个没有声明的变量（返回未定义），而不报错。
vtypeof v
变量v没有用var命令声明，直接使用就会报错。但是，放在typeof后面，就不报错了，而是返回undefined。
实际编程中，这个特点通常用在判断语句。
null与undefined都可以表示“没有”，含义非常相似。将一个变量赋值为undefined或null，老实说，语法效果几乎没区别。这两种写法的效果几乎等价。在if语句中，它们都会被自动转为false，相等运算符（==）甚至直接报告两者相等。
区别是这样的：null是一个表示“空”的对象，转为数值时为0；
undefined是一个表示"此处无定义"的原始值，转为数值时为NaN。
布尔值代表“真”和“假”两个状态。“真”用关键字true表示，“假”用关键字false表示。布尔值只有这两个值。
下列运算符会返回布尔值：
- 前置逻辑运算符：
! (Not) - 相等运算符：
===，!==，==，!= - 比较运算符：
>，>=，<，<=
如果 JavaScript 预期某个位置应该是布尔值，会将该位置上现有的值自动转为布尔值。转换规则是除了下面六个值被转为false，其他值都视为true。
undefinednullfalse0NaN""或''（空字符串）
布尔值往往用于程序流程的控制
if ('') { console.log('true');
}
if命令后面的判断条件，预期应该是一个布尔值，所以 JavaScript 自动将空字符串，转为布尔值false，导致程序不会进入代码块，所以没有任何输出。
注意，空数组（[]）和空对象（{}）对应的布尔值，都是true。
if ([]) { console.log('true');
}if ({}) { console.log('true');
}
JS的基础类型与引用类型
ECMAScript变量包含两种不同类型的值，基本类型值、引用类型值；
基本类型值：指的是保存在栈内存中的简单数据段；
引用类型值：指的是那些保存在堆内存中的对象，意思是，变量中保存的实际上只是一个指针，这个指针执行内存中的另一个位置，由该位置保存对象；
基本类型值：按值访问，操作的是他们实际保存的值；
引用类型值：按引用访问，当查询时，我们需要先从栈中读取内存地址，然后再顺藤摸瓜地找到保存在堆内存中的值
.
两种类型复制
1. 基本类型变量的复制：从一个变量向一个变量复制时，会在栈中创建一个新值，然后把值复制到为新变量分配的位置上；
1. 引用类型变量的复制：复制的是存储在栈中的指针，将指针复制到栈中未新变量分配的空间中，而这个指针副本和原指针执行存储在堆中的同一个对象；
2. 复制操作结束后，两个变量实际上将引用同一个对象；因此改变其中的一个，将影响另一个；
这一段的意思理解为：引用类型的复制，还是指向原有对象（同一个），而数值的复制则是创建一个新的数值。
函数参数的传递：
1. ECMA中所有函数的参数都是按值传递的；
两种变量类型检测
1. Typeof操作符是检测基本类型的最佳工具；
2. 如果变量值是nul或者对象，typeof 将返回“object”；
3. Instanceof用于检测引用类型，可以检测到具体的，它是什么类型的实例；
4. 如果变量是给定引用类型的实例，instanceof操作符会返回true;
这段还没理解，还没使用到光看理解不了。
任务1要求使用伪代码写如何实现任务思路，了解关于伪代码的资料，参考了搜索到的答案的各种说法：
伪代码是：描述了算法的逻辑，即描述算法的语言。介于自然语言和编程语言之间，忽略了语言实现的细节，跳脱了语言的限制，有利于个人思考和猿友之间的交流。伪代码是主观且不标准的。
伪代码未必要使用某一套语法，但是使用标准伪代码结构会让其他程序员更容易理解，这是一种常见的行业规范。[2]如果你自己编写一个项目，最重要的是伪代码可以帮助你组织思路，并制定计划。
伪代码：是用介于自然语言和计算机语言之间的文字和符号（包括数学符号）来描述算法。
伪代码只是像流程图一样用在程序设计的初期，帮助写出程序流程。简单的程序一般都不用写流程、写思路，但是复杂的代码，最好还是把流程写下来，总体上去考虑整个功能如何实现。写完以后不仅可以用来作为以后测试，维护的基础，还可用来与他人交流。但是，如果把全部的东西写下来必定可能会浪费很多时间，那么这个时候可以采用伪代码方式。比如：
1 2 3 4 5 6 7 | if 九点以前 then
do 私人事务；
if 9点到18点 then
工作；
else
下班；
end if
|
这样不但可以达到文档的效果，同时可以节约时间。 更重要的是，使结构比较清晰，表达方式更直观。在伪代码中，通常用连续的数字或字母来标示同一级模块中的连续语句，有时也可省略标号。例如：1 2 3 4 5 6 7 8 | ⒈ line 1
⒉ line 2
a. sub line 1
b. sub line 2
⒈ sub sub line 1
⒉ sub sub line 2
c. sub line 3
⒊ line 3
|
在伪代码中，变量不需声明，但变量局部于特定过程，不能不加显示的说明就使用全局变量；赋值语句用符号←表示，x←exp表示将exp的值赋给x，其中x是一个变量，exp是一个与x同类型的变量或表达式（该表达式的结果与x同类型）；多重赋值i←j←e是将表达式e的值赋给变量i和j，这种表示与j←e和i←e等价。
选择语句用if-then-else来表示，并且这种if-then-else可以嵌套
1 2 3 4 5 | if (Condition1)
then [ Block 1 ]
else if (Condition2)
then [ Block 2 ]
else [ Block 3 ]
|
伪代码(Pseudocode)是一种算法描述语言。使用伪代码的目的是为了使被描述的算法可以容易地以任何一种编程语言(C, Java, Pascal)实现。因此，伪代码必须结构清晰，代码简单，可读性好，并且类似自然语言。
伪代码的优点
提高任何方法的可读性。这是开始实现算法的最佳方法之一。
充当程序与算法或流程图之间的桥梁。也可以作为一个粗略的文档，因此当写出伪代码时，可以很容易地理解一个开发人员的程序。在行业中，文档是必不可少的。这就是证明伪代码至关重要的地方。
伪代码的主要目标是解释程序的每一行应该做什么，从而使程序员更容易构建代码构建阶段。
伪代码的语法规则
- 在伪代码中，每一条指令占一行(else if 例外)，指令后不跟任何符号；
- “缩进”表示程序中的分支程序结构（同一模块的语句有相同的缩进量，次一级模块的语句相对与其父级模块的语句缩进）；
- 通常每个算法开始时都要描述它的输入和输出，而且算法中的每一行都给编上行号，在解释算法的过程中会经常使用算法步骤中的行号来指代算法的步骤；
- 每一行可以加上编号（也可不加）。
伪代码总结：伪代码是用来描述算法逻辑的语言，方便个人思考整理思路制定计划，和供别人参考，语法规则没有具体规则但是有行业规范，可以参考行业规范梳理逻辑。
关于click事件：（也就是点击事件，根据鼠标的操作有好几个不同的事件。）
click事件指的是，用户在同一个位置先完成mousedown动作，再完成mouseup动作。因此，触发顺序是，mousedown首先触发，mouseup接着触发，click最后触发。（按下鼠标→松开鼠标→点击事件）
DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如增删内容）。
DOM 的最小组成单位叫做节点（node）。文档的树形结构（DOM 树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。
节点的类型有七种。
Document：整个文档树的顶层节点DocumentType：doctype标签（比如<!DOCTYPE html>）Element：网页的各种HTML标签（比如<body>、<a>等）Attribute：网页元素的属性（比如class="right"）Text：标签之间或标签包含的文本Comment：注释DocumentFragment：文档的片段
浏览器提供一个原生的节点对象Node，上面这七种节点都继承了Node，因此具有一些共同的属性和方法。
WEB标准下可以通过getElementById(), getElementsByName(), and getElementsByTagName() 访问DOCUMENT中的任一个标签
1、getElementById()
getElementById()可以访问DOCUMENT中的某一特定元素，顾名思义，就是通过ID来取得元素，所以只能访问设置了ID的元素。
比如说有一个DIV的ID为docid：<div id="docid"></div>
那么就可以用getElementById("docid")来获得这个元素。返回具有指定 ID 属性值的第一个
2.getElementsByName()
这个是通过NAME来获得元素，但不知大家注意没有，这个是GET ELEMENTS，复数ELEMENTS代表获得的不是一个元素，为什么呢？
因为DOCUMENT中每一个元素的ID是唯一的，但NAME却可以重复。打个比喻就像人的身份证号是唯一的（理论上，虽然现实中有重复），但名字重复的却很多。如果一个文档中有两个以上的标签NAME相同，那么getElementsByName()就可以取得这些元素组成一个数组。
比如有两个DIV：
<div name="docname" id="docid1"></div>
<div name="docname" id="docid2"></div>
那么可以用getElementsByName("docname")获得这两个DIV，用getElementsByName("docname")[0]访问第一个DIV。
3、getElementsByTagName()
这个呢就是通过TAGNAME（标签名称）来获得元素，一个DOCUMENT中当然会有相同的标签，所以这个方法也是取得一个数组。可以用getElementsByTagName("div")来访问它们，用getElementsByTagName("div")[0]访问第一个DIV，用getElementsByTagName("div")[1]访问第二个DIV。
明天计划的事情：
基础知识看了一天连任务一的伪代码写任务1 的思路都没有，今天一整天一行js代码都没有敲出来。打算明天看着坑乎师兄的代码进行属性分析，一个一个属性拆分学习，以及关于函数 的学习。关于任务所说获取九宫格小格子的思路有了，明天就可以开始尝试写任务1了。
遇到的问题和收获：
有点没搞懂这个 “返回” 的意思，以及实际作用，返回typeof说是返回一个数据类型，具体在js的使用是什么作用暂时不明白，目前的理解为判断一个数据是属于什么值。
关于布尔值的true和false没有使用过不是很清楚具体，虽然说资料有写是用于 if ，else进行判断条件成立与否执行的标准。
任务要求的使用伪代码来写，没思路，想开始写js感觉无从下手。
虽然写好了按钮。看了些师兄写的代码，首先绑定对象为盒子样式，然后在进行函数的运算。但是关于绑定对象的属性资料还没看到，具体使用还不清楚。
看了一天资料，官网给的资料和搜索的资料看了些，根据官网给的思路，看了些关于js的基础组成，不知道如何进行任务1说的写伪代码完成任务1。
看到后面获取小格子的dom的相关资料，开始有思路了。看了些关于坑乎师兄的代码，大概思路是有了，就是属性都没用过，还不清晰。明天开始写js的话应该可以逐渐清晰。
评论