第一周总结

橙色=没写出来

红色=写错了

一、js概述

1.1概述

js全称JavaScript，是运行在客户端浏览器的解释型弱类型、面向对象脚本语言

js三部分：

ECMAScript - 核心语法，以后JS不管做什么操作可能都离不开他
DOM - Document Object Model - 文档对象模型，用JS来操作HTML和css
BOM - Browser Object Model - 浏览器对象模型，操作浏览器

解释型：先执行，遇到错误再停止执行

编译型：有错误不运行

弱类型：变量保存的数据可以是随意的，数据类型由数据来决定

强类型：变量保存的数据，是由数据类型决定的

1.2特点

解释型

可以使用一切编辑器编写

弱类型

面向对象编辑方式

可以做一切css完成不了的效果

1.3js使用

内部

外部

1.4输出方式

1. 控制台输出

   console.log();

2. 弹框

   alter();

3. 页面

   document.write();

二、变量和常量

2.1变量

可以再次修改

var 变量名=变量值;

补充：

如果变量名是name，不管保存的数据是什么类型，都会转为字符串

2.2常量

定义之后不能修改

const 常量名=常量值;

2.3算数运算符

+-*%/

特殊：具有隐式转换

+运算：如果有字符串则转为拼接

其他算数运算遇到纯数字符串会转为数字，但如果遇到非纯数字字符串，转为NaN，NaN不是一个有效数字，但是数字类型，NaN做运算结果为NaN，做比较结果为false(包括和自己比)

2.4数据类型

Number

Boolean

String

Undefined

Null

三、数据类型转化

隐式转换 - 算数运算符

显示转换：

1. 转字符串

   页面上获取的皆为字符串
   var str=x.toString();//x不能是undefined或者null,因为undefined和null不能使用任何.操作
   

2. 转数字

   1）parseInt(str/num);
      转为整型
   2）parsetFloat(str);
      转为浮点型
   3）Number("");
      万能，但等同于隐式转换

四、Function基础

定义&使用

function 函数名(){
   函数体
}
函数名();

function 函数名(形参，形参，...){
    函数体
 }
函数名(实参，实参，...);

何时使用：

1. 不希望打开页面立即执行，而需要时再使用或者由用户来触发

2. 希望反复使用，不用刷新页面

3. 以后任何一个独立的功能体，都要单独封装为一个函数

4. 函数的地位非常高，函数是第一等公民地位，需要随时考虑能不能封装为一个函数

5. 函数内的一切内存，函数调用完毕后都会自动释放

五、分支结构

if(条件){
   操作;
}
else{
   操作
}

if(条件){
   操作;
}
else if(条件){
   操作;
}
else{
   操作;
}

六、循环结构

循环三要素

1. 循环条件：开始 - 结束，循环的次数

2. 循环体：做的什么操作

3. 循环变量：记录着当前在哪一次，而且不断变化，往往都会向着不满足循环条件进行

6.1while循环

while(条件){
  循环体;
}

死循环用break退出

6.2for循环

for(var 变量=*;循环条件;变量变化){
  循环体
}

补充：随机数公式：
   parseInt(Math.random()*(max-min+1)+min)

七、数组

7.1创建

方式一：
空数组： var arr=[];
有数据： var arr=[数据,数据,...]

方式二：
空数组： var arr=new Array();
有数据： var arr=new Array(数据，数据，...);

7.2获取

用下标获取数据

arr[i];

7.3添加

arr[i]=值

7.4数组的三大不限制

1. 不限制元素个数

2. 不限制元素类型

3. 不限制元素的下标越界

   如果获取元素，下标越界，返回undefined

   如果添加元素，下标越界，会得到一个稀疏数组，导致下标不连续，搭配循环会得到很多undefined

7.5操作

1. 获取倒数第n个元素

   arr[arr.length-n];

2. 向末尾添加元素

   arr[arr.length]=新值;

3. 缩容：删除倒数n个元素

   arr.length-=n;

八、DOM

Document Object Model,文档对象模型

8.1概念

将整个HTML看成倒树结构，根是document

作用：可以通过树根找到我们想要的任何一个DOM元素/节点/对象（属性和方法）

DOM会将页面上的每一个元素、属性、文本、注释都当做一个DOM元素/节点/对象

8.2查找

1. id查找

   var elem=document.getElementById("");
   补充：
       找到了多个相同id，只返回第一个
       找到了返回的是一个当前找到的DOM元素，没找到则返回一个null
   

2. 类名查找

   var elem=document.getElementsByClassName("");
   var elem=elem.getElementsByClassName("");
   注意：
   找到的是一个集合

3. 标签名查找

   var elem=document.getElementsByTagName("");
   var elem=elem.getElementsByTagName("");
   同类名查找

4. 关系查找

   父元素：elem.parentNode;
   子元素：elem.children;
   前一个兄弟：elem.previousElementSibling;
   后一个兄弟：elem.nextElementSibling;
   第一个儿子：elem.firstElementChild;
   最后一个儿子：elem.lastElementChild;

8.3操作

1. 操作内容

   1)elem.inner.HTML;
     elem.inner.HTML="";
      支持识别标签
   2)value专门为input准备的
     input.value;
     input.value="";
       不支持识别标签
   3)elem.innerText;
     elem.innerText="";
   

2. 操作属性

   elem.属性名;
   elem.属性名="";
   完整版：
          elem.getAttribute("属性名");
          elem.getAttribute("属性名","属性值");
   class必须写为className
   不能操作自定义属性，只能操作标准属性
   

3. 样式

   elem.style.css属性名
   elem.style.css属性名=""
   

4. 绑定事件

   elem.on事件名=function(){
     操作
   }
       this关键字：目前只能用于事件内
                  如果单个元素绑定事件：this->这个元素
                  如果多个元素绑定事件：this->当前触发事件的元素
   

5. 计算字符串
   eval("")
   目的：脱掉字符串外套
   以后后端返回的数据，就是一个JSON字符串