第二阶段JavaScript第一周心得总结

JavaScript的第一周学习到今天为止算是结束了，这一周的学习任务我个人认为还是比较繁重的，因为全部都是新内容,我也从未接触过，所以一开始学起来还是比较难以理解的。我认为第二阶段最重要的是去理解写代码、编程的思维，养成一种写代码才独特具有的思维，我认为这一点是比较困难的。于是在学习的道路上，除了有新的知识点需要去记忆以外，在写代码时，去思考如何写，从哪儿入手写，写的时候需要注意的先后顺序，都是我必须去学习、记忆的东西。

而且随着第一星期学习内容的结束，我认为所学的知识我掌握得还不太熟练，但是至少知道如何使用，还需努力。对知识点的记忆和理解，我感觉还是不太透彻，有些地方也是似懂非懂的，感觉还是需要一点一点的、循序渐进的去掌握。在这里我不得不感叹编程真是一门从入门学到入土的知识啊，随着学习进度的前进，学到的知识越多，感觉不懂的知识也就越多，多多少少有点焦虑的感觉，不知道随着学习进度的深入，这种情绪会不会得到好转，下面就对这个星期所学的知识点进行总结。

DAY1知识点总结

一、JAVASCRIPT简称js，是解释型、弱类型的语言。比编译型的语言更自由，运行代码的时候碰到错误才会停止，因为是弱类型语言，所以在值里想放什么放什么，变量的数据类型是由值决定的。JS作用一般用在写什么购物车、表单、提供事件，实现特效。

二、JAVASCRIPT的使用；二个方法。
1.在html页面上直接写一个标签<script>js代码</script>；
2.创建xx.js文件，在文件里面书写js代码，最后在html页面最下面引入----<scriot scr="js路径">//此处不能再写js的书写</script>

三、JS的调试语句：
打桩：1.在控制台输出日志：console.log(想要输出的内容)（能找到错误在哪里）。
2.在页面上输出：document.write(想要输出的内容)；//支持标签的写法，但是只能绑定在整个网页的某个元素上，会替换掉整个网络。
3.弹出警告框输出：alert（想要输出的内容）//会弹出一个预警框，会卡住整个网页，必须在用户手动关闭后才能看到整个网页的内容。

四、js的语法规定：严格要求区分大小写。

五、变量：值是可以改变的。将你以后经常使用的数据，先保存在一个变量中，方便以后使用，也就是使用变量名就相当于在使用变量的值了。
语法：var 变量名=值；
特殊：1.=：赋值符号，将=右边的数据放到=左边的变量之中进行保存。左边的变量永远是一个变量名。
2.如果只是申明了变量，但是没有赋值的话，默认值是一个undefined（是一个垃圾，没任何用处）
3.取变量名最好不要随意，尽量要见名知其意
4.不要用关键字当做变量名
5.如果创建多个变量，中间的var可以省略，然后中间的；改为，隔开，最后再用；结束。
6.如果是一个未声明的变量直接使用，会报错。
如果是一个声明过的但是没有赋值的变量，会找不到undefined。

六、常量：第一次被赋值以后，值不允许修改
语法：const常量名=值；

七、算术运算符 + - * / %；
特殊：1.%：取余，俗称模，两数相除，取余数。
作用：判断奇偶性，0为偶，1为奇；获得某个数字的最后n位；
2.自带隐式转换：悄咪咪的转换，数据类型会发生变化，看不见。字符串也可以参与算数运算。
切记：默认运算符左右两边都会悄悄的转换为一个数字，在运算
特殊：1.+运算，只要碰上一个字符串，就会都会变为字符串，+运算也不再是+运算，变成了拼接操作。
2.- * / %；有字符串也可以数字，但是必须是纯数字组成的字符串才可以，只要包含一个非数字字符，结果则为NaN：Not a Number：不是一个数字，但是确实是数字类型。----垃圾；nan参与任何算术运算结果都是nan，nan参与任何比较运算结果都为false。

八、js中的数据类型：
1.原始/基本/值类型：5个
①String-字符串，取值有无数个，必须写"或"
②Number-数字，取值有无数个，直接写个数字就行
③Boolean-布尔，取值有两个，true或false，多半用于判断的
④Undefined-取值只有一个默认值为undefined，没有任何用处
⑤NUll-空，取值只有一个null，作用，释放变量；
2.引用/对象类型：11个；

九、拓展：
1、弹出一个用户输入框：var xxx=prompt("文字","默认值")；
2.分之结构：根据条件的不同，选择一部分代码执行。
语法：1、一个条件、一件事，满足就做，不满足就不做
if(条件){
操作}
2、一个条件、两件事：满足就做第一件，不满足就做第二件
if(条件){
操作1 }else{默认操作；}
3、多个条件多件事：满足谁做谁；
if(条件1) {
操作1
}else if(条件2) {
操作2
}else if(条件3) {
操作3|
}else{
默认操作;
注意：1、else if你想写几句就写几句
2、最后的else可以省略不写，但是如果条件都不满足的话则什么都不会执行。
3、分支结构只要满足一个就不可能再走另一条路。

DAY2

一、数据类型的转换。
因为JAVASCRIPT是弱类型语言，所以数据类型都是由值决定的。
数字+字符串=字符串；数字+数字=数字。
查看数据类型：typeof(需要检查的东西);
隐式转换的内容跟第一天一样，不过多了一些关键字转为数字的结果：true=1；false=0；nudefined=NaN；null=0；"100"=100;"100a0"=NaN;
NaN是一个数字类型，但不是一个数字。判断某个是不是有效数字用"！isNaN(x)"来判断，此方法也有数字的隐式转换。true说明是一个有效数字，反之则不是。防止用户恶意输入

二、强制转换
1、转字符串：var str = x.to String();x不是能undefined和null。页面上所有获取来的数据默认是字符串
2、转数字：
①var num=parseInt(str/num)；原理：从左到右一次读取每个字符，进行转换，碰到非数字字符就会停止，而且不认识小数点。如果以来就碰到不认识的字符，则为NaN
②var num=parseFloat(str);原理同上，但是认识一位小数点。
③Number(x);可以讲任何东西转为数字，原理和隐式转换一样，但是不推荐使用，页面上有单位的数字，可以用parseXXX去掉单位。

三、基本的函数，也称之为方法。
1、函数是什么：也称之为方法，需要【预定义】后，可以【反复使用】的【代码段】。
2、创建函数并且调用函数.
第一步：创建function 函数名(){若干代码段}；注意：创建函数后并不会立即/自动执行，需要我们手动调用。
第二步：调用
1、直接在JS里面写函数名()，写几次触发几次。
2、绑定在页面的元素上，让用户触发。<elem onclick="函数名()"></elem>.
3、在什么时候使用函数：1、打开页面不希望立即执行。2.希望用户或者程序员点击触发。3、希望能够反复执行。4、本身是一段独立的功能体。5、尽量把每一个功能体封装为一个函数。
4、带参数的函数。
形参，形式参数，就是一个变量名，只不过这里的变量不需要var，并没有保存真正的值。function函数名(形参,...){函数体}
一个函数可以执行相似的操作。比如：
function add(a,b){
console.log(a+b);}
add(1,2);add(2,3);
注意：带参数的函数，调用时，传入的实参的顺序和个数都要和形参一一对应上。
总结：
1、如果你的函数体是固定不变的，则不需要使用带参数的函数。
2、如果你的函数体希望根据传入的实参的不同，做的事也略微不同，则需要带有参数。

四、分支结构：
一、代码中流程控制语句：三种；
1、顺序结构：默认接够，代码从上向下一步一步执行。
2、分支/选择结构：根据条件，选择一部分代码去执行。
3、循环结构：根据条件，判断你是否需要再一次重复执行某些代码。
二、比较运算符：> < >= <= == !=;
作用:出现在判断条件语句中。
结构：以上六个运算符，结果一定是一个布尔值。
比较运算也是具有隐式转换。
三、if结构：
1、一个条件一件事，满足就不做，不满足就不做
if (条件){
操作}
2、一个条件两件事，满足就做第一件，不满足就做第二件
if(条件) {
操作
}else {
默认操作}
3、多个条件多件事，满足谁就做谁
if(条件1) {
操作1;
}else if(条件2){
操作2;
}else{
默认操作
}
拓展：逻辑运算符：&&：与/并且； ||：或；！：非；
&&：只有条件全部都满足，结果才为true；只要有一个条件不满足，结果为false
||：只有条件全部都不满足，结果才为false；只要有一个条件满足，结果为true；
！：颠倒布尔值：！true-false； !!true-true；

DAY3

一、
1.循环结构：反复执行【相同或者相似】的操作。
循环三要素：
1、循环条件：开始、结束、重复执行的次数
2、循环体：循环操作，干什么事情
3、循环变量：创建，并且让它不断改变。
while循环：语法：
var 循环变量=几；
while(循环条件){
循环体；
循环变量的改变；
}
死循环：while(trye){循环体；}
循环流程控制语句：死循环多半都要搭配上一个：break：退出循环；可以储在线任何一个循环之中；
拓展：随机整数公式：parseInt(Math.random() * （max-min+1）+min）;
for循环：和whlie一模一样，不过语法更简单，
语法：
for(var 循环变量=几；循环条件；循环变量的变化){循环体；}
特殊：1、死循环：for(;;){循环体}
2、创建循环变量部分，可以用用“，”隔开创建多个变量；
推荐在死循环时用while；在已知循环次数的情况下用for；

二、数组
数组中的元素，都是按照线性顺序排列的；
特点：除了第一个元素，每一个元素都有一个唯一的前驱元素；
除了最后一个元素，每个元素都有一个唯一的后继元素；
下标：数组中的每个元素都有一个唯一的位置序号，称之为“下标”，用来表示数组中的每一个元素；下标都是从0开始的，到最大长度-1结束。
创建数组：2种方式；
1、直接量方式：var arr=[]；//空数组或者：var arr=[元素，元素。。。]
2、构造函数方式：var arr = new Array()：//空数组；或者：var arr = new Array(元素，元素。。。)；
数组用来保存数据，方便以后使用。
访问数组中的元素数组名[下标]：如：arr[i];
添加/修改数组中的元素数组名[下标]=新元素；如：arr[i]=新值；
特殊：1.下标处如果没人，则为添加；2.下标出如果有人，则为替换；3.如果下标越界，与导致数组成为一个稀疏数组，不好。
数组具有3大不限制：1.不限制长度（优点）；2.不限制类型（优点）；3.不限制下标越界。（缺点），如：获取时，下标越界，返回结果是一个undefined；添加时，下标越界，会导致我们的数组变成一个稀疏数组，不好。
数组唯一的一个属性：length长度；语法：数组名.length;
三个语句用法：1.永远在数组末尾添加新元素：arr[arr.length]=新值；
2.获取倒数第N个：arr[arr.length-n]；
3.缩容：删除数组的倒数N个；arr.length-=n；
遍历数组：把数组中的每一个元素都取出来执行相同或者相似的操作。
公式：
for(var i=0;i<数组名.length;i++){数组名[i];//当前次拿到的数据}

DAY4

DOM树：DOM将HTML看做了是一个倒挂的树状结构。
树根：是一个documengt对象，document对象不需要我们来创建，是由JS解释器负责创建的，一个页面只有一个document。
作用：提供了一些属性和方法啊，可以让我们去操作整个DOM树（增删改查）。
DOM节点指的是一个标签、文本、属性、样式。
查找元素三种方法。
1. 通过ID找到元素：var elem=document.getElementById("id值")
找到了：返回对应的元素；没找到：返回null；
特殊：如果页面上有多个重复的ID，只会返回第一个；此方法找到的是单个元素，可以直接用于操作；不建议使用，通常留给后端使用。
2. 通过标签名查找：var elems=document/已经找到的某个父元素.getElementByTagName("标签名")
找到了：返回的是一个DOM集合/DOM类数组对象；没找到：空集合；
特殊：1：返回的不是一个DOM节点，而是一个DOM集合，是不能直接用来做操作的，要么加下标拿到某一个，要么遍历拿到每一个。
DOM集合：类数组对象：1.都可以使用下标。2.都可以使用length。3.都可以遍历。 3. 通过class名查找 var elems=document/已经找到的某个父元素.getElementByClassName("class名")；
找到了：返回的是一个DOM集合/DOM类数组对象；没找到：空集合；
特殊：1：返回的不是一个DOM节点，而是一个DOM集合，是不能直接用来做操作的，要么加下标拿到某一个，要么遍历拿到每一个。
2、不一定非要从树根开始查找元素，也可以写一个你已经找到的某个父元素。
通过节点之间的关系进行查找元素：前提：必须先要找到一个人，才能使用关系：
父：xx.parentNode;-单个元素；
子：xx.children;-集合，没找到是空集合；
第一个儿子：xx.firstElementChild;-单个元素；
最后一个儿子：xx.lastElementChild;-单个元素；
前一个兄弟：xx.previousElementSibling;-单个元素；
后一个兄弟：xx.nextElementSibling;-单个元素；
只有单个元素可以做操作，集合不行
操作元素：<标签属性名="属性值" style="样式">内容</标签>
1：内容：三种；
innerHTML： 获取或设置某个元素的内容部分-可以识别标签。
获取：elem.innerHTML；-多半用于判断操作；
设置：elem.innerHTML="新内容"；-修改内容；
innerText：获取或设置某个元素的文本部分-不能识别标签。
获取：elem.innerText；-多半用于判断操作；
设置：elem.innerText="新内容"；-修改内容；
以上两个属性都是为双标签准备的
value属性：专门为单标签（input）操作内容准备的

获取：input.value；-多半用于判断操作；
设置：input.value"新内容"；-修改内容；

属性： HTML属性，如：ID/CLASS/ALT/TITLE
获取：elem.getAttribute("属性名")；-多半用于判断操作；
设置：elem.getAttribute("属性名"，"属性值")；-修改内容；
这两种方法有点反锁，但是万能无敌。
简化：1、获取：elem.属性名; - 多半用于判断操作
2、设置：elem.属性名="属性值" - 修改
缺陷：1、不能操作自定义属性，只能操作标准属性
2、class在ES6升级的时候成为了一个关键字，所以不可以在用class，换为了className
先使用简化版，如果操作不到再使用复杂版

样式：
1、css定义的方式：3种
1、内联样式 - 二阶段
2、内部样式表
3、外部样式表 - 最适合写样式的时候使用此方法
2、JS操作【内联样式】的好处
1、优先级最高，写的JS样式必定会生效
2、一次只会操作一个元素，不会牵一发动全身
3、语法：
获取：elem.style.css属性名 - 多半用于判断操作
设置：elem.style.css属性名="css属性值"; - 修改
特殊：1、css属性名，要把有横线的地方，换成小驼峰命名法
2、唯一的缺陷：获取的时候，代老湿现在只交了你操作内联样式，目前不能获取样式表中的样式

元素绑定事件：
单个元素：elem.onclick=function(){
//操作
//关键字this的指向->这个元素
}

多个元素：
for(var i=0;i<elems.length;i++){
elems[i].onclick=function(){
//操作//this的指向->当前元素：当前你触发事件的元素
}
}

1、this的指向：
单个元素绑定事件：this->单个元素
多个元素绑定事件：this->当前触发的事件

2、脱字符串衣服的方法：eval(str);//脱掉字符串的外套并且执行里面的操作

总算总结完了，一个星期学习的内容还是挺多的，还是需要去反复记忆理解的，总之加油，自己给自己加油，fighting！！！