JaveScript第一周知识点

第一天知识点

1. JaveScript:简称js，是一个运行在浏览器端的解释型、弱类型、面向对象脚本语言。
2. 由三部分组成：EcmaScript(核心语法）+Dom(和网页挂钩的）+BOM（和浏览器挂钩的）
   1. 浏览器端：自带JaveScript解释器一打开浏览器就可以自动运行。
   2. 编译型：在程序执行之前，检查是否正确，如果不正确则不执行。
   3. 解释型：在程序执行之前，不需要检查是否正确，直接运行的，遇到错误就停止。
   4. 强类型：变量保存的数据是由数据类型决定的。
   5. 弱类型：变量保存的数据是随意的，数据类型由数据决定的。
   6. 面向对象：以后经常使用，写法：对象名.属性名； 对象名.方法名（）；
3. 如何使用js：
   1. 在HTML页面直接写一个，在里面书写js代码即可。
   2. 创建一个xx.js文件，在HTML中引用
4. 输出方式/打桩方式:检查是否有错。
   1. 在控制台输出日志：console.log
   2. 在页面输出日志：document.write
   3. 在弹出框输出日志：alert（想要输出的东西）
5. 变量：创建后可以修改。 语法：var 变量名=值；
   1. 特殊：
      1. 不能以数字开头
      2. 最好使用驼峰命名法
      3. 命名最好见名知意
   2. 如果变量名是name，不管保存什么数据类型，都会转为字符串。
   3. 变量名不能是关键字。
   4. 变量可以只创建不赋值，默认值为：undefined。
   5. 多个变量连续创建：var 变量名=值，变量名=值，变量名=值；
6. 常量:创建后不可修改 语法：const 常量名=值；其余和变量值一样
7. 数据类型:分两大类
   1. 原始/基本/值类型：
      1. number数字：取值有无数个，数字直接写不加任何东西（颜色为蓝色）
      2. string字符串：取值有无数个，必须加上“ ” 后者' '(颜色为黑色）
      3. booleam布尔：取值有两个，true（真）或 false（假)一般当作条件判断（颜色为蓝色）
      4. null空：取值只有一个，null作用是用于释放变量内存，节约空间提升网页性能（颜色为灰色）
      5. undefined：取值只有一个，undefined不建议使用
   2. 引用/对象类型：有11个。
8. 运算符：
   1. 算术运算符： + - * / %
      1. 特殊：%-取余，俗称模 两数相除不去商，而是取除不尽的余数
      2. 作用：任意数%2，判断奇偶数
      3. 隐式转换：默认都是左右两边转为数字在运算
         1. true--1
         2. false--0
         3. undefined--NaN
         4. null--0
         5. "100"--100
         6. "100px"--NaN
   2. "+"运算的特殊性:如果碰上字符串，左右两边都会转为字符串
   3. 比较/关系运算符：> < >= <= == != === !== 结果一定是布尔值
   4. 赋值运算：= += -= *= /= %=
      1. =：赋值，将=右边的保存到左边的变量名之中
      2. 后面5个是升级写法，运算后保存回变量本身 可写为i=i+1-->i+=1;
   5. 自增自减运算符：++ -- i++
      1. 自增：固定的每次只能+1
      2. 累加：由程序员自己决定
   6. 逻辑运算符：&& || ！
      1. &&:全部条件满足时为true 只要一个条件不满足就为false
      2. ||:全部条件满足时为false 只要一个条件不满足就为true
      3. ！：颠倒布尔值
   7. 位运算：m<<n 左移了n位 m>>n 右移了n位 底数只能是2

第二天知识点

1. 分支结构：
   1. if...else...
      1. 一个条件，一件事 if（条件）{操作；}
      2. 一个条件两件事 if（条件）{操作；}else{默认操作；}
      3. 多个条件多件事 if（条件1）{操作1；}else if（条件2）{操作2；}else{默认操作；}
   2. switch...case..
      1. switch（变量）{case 值1： 操作1； break； case 值2： 操作2； break； default： 默认操作；}
      2. 只要一个case满足条件后，后续的所有操作都会完成
      3. 建议每一个case后面都加一个break
   3. 三目运算
      1. 可以简化分支
      2. 语法：条件?操作1：默认操作；--if...else... 条件1操作2?操作2：默认操作--if...else if...else...
      3. 注意事项:
         1. 默认操作不能省略，不然会报错
         2. 操作复杂时推荐使用switch或if
2. 强制数据类型转换：
   1. 转字符串：
      1. var str=x.tostring(); undefined和null不能使用，不然会报错
      2. var str=string(x); 不能手动使用，完全等同于隐式转换
   2. 转数字：
      1. parseInt（str/num）；将字符串转为数字
      2. parseFloat（str）；将字符串转为小数
      3. Number（x）；都可以转为数字，但不能手动使用，完全等同于隐式转换
   3. 转布尔：
      1. boolean（x）；都可以转为数字，但不能手动使用，完全等同于隐式转换
      2. 0，" ",undefined,NaN,null,false这6个都为false 其余全为true
      3. 不会手动使用，在分支和循环的条件中不管写啥都为一个布尔值

第三天知识点

1. 循环结构：
   1. 反复执行相同或相似的操作
   2. 循环三要素：
      1. 循环条件：开始-结束，循环的次数
      2. 循环体：做的操作
      3. 循环变量：不断变化的
   3. 三种循环：
      1. while循环： var 循环变量=几； while（循环条件）{循环体； 循环变量变化；}
         1. 要先创建循环变量，再判断循环条件，条件满足时做一次循环，循环是一次一次执行的
         2. 死循环：永远不会停下来的循环，不确定循环次数的时候可以使用
         3. break；可以退出死循环
         4. continue；退出本次，下次依然会执行
      2. for循环： for（var 循环变量=几；循环条件；循环变量变化){循环体；}
         1. 死循环写法：for（；；）{}
      3. do...while循环：var 循环变量=几；do{循环体；循环变量的变化}while（循环条件）
2. 函数Function基础：
   1. Function叫做函数方法，要先预定义，然后反复使用的代码段
   2. 使用方法：
      1. 定义/创建/声明：function 函数名（）{函数体/代码段；}创建好函数后不i会立刻执行，需要调用
      2. 调用函数：
         1. 在js内部写入函数，写几次就调用几次
         2. 在HTML中绑定事件：
      3. 函数地位很高，是js的第一等公民
   3. 创建有形参的函数其实是一个变量，不需要加var，也不需要赋值，称之为形式参数--简称形参
      1. function 函数名（形参...){函数体/代码段：}
   4. 使用形参函数时，必须加入实参（实际参数）：函数名（实参...)
      1. 传参时顺序不能打乱，必须和形参的顺序相互对应，数量不能多也不能少
3. 循环和函数的区别：
   1. 循环是一瞬间完成
   2. 函数需要调用才会执行

第四天知识点

1. 自定义函数：
   1. 需要先定义，可以反复使用的一个代码段
   2. 创建：
      1. 声明方式创建函数：function 函数名（形参列表）{操作；return 返回值/结果；}
      2. 直接量方式创建函数：var 函数名=function（行参列表）{操作；return 返回值/结果；}
   3. 调用：
      1. var 接住返回的结果=函数名（实参列表）
   4. 作用域：
      1. 全局作用域：全局变量和全局函数在页面任何一个位置都可以调用
      2. 函数作用域：局部变量和局部函数在当前函数调用时，内部可用
   5. 重载：相同的函数名，根据传入的实参不同，自动选择对应的函数去执行，函数名重复了后面会覆盖掉
      1. 固定套路：
         1. 通过下标去获取传入的某一个实参
         2. 通过lenght获取传入几个实参
   6. 数组：
      1. 创建数组：
         1. 直接量方式：var arr=[ ];空数组 var arr=[数据1，];
         2. 构建函数方式：var arr=new Array（）；空数组 var arr=new Array(数据1，...)
      2. 获取数组之中的元素：数组名[i]
      3. 后续添加/替换元素：数组名[i]=新数据；
      4. 数组三大不限制：
         1. 不限制元素类型
         2. 不限制元素长度
         3. 不限制下标越界
      5. 下标：当我们自己数下标时难免数错，会导致下标越界
         1. 解决方法：在数组中添加唯一属性：lenght
         2. 语法：数组名.lenght--可以获取到数组的长度，从1开始
      6. 遍历数组：不会拿某个元素来使用，而是拿每个元素来进行相同或者相似的操作，搭配上循环
         1. 固定公式：for（var i=0；i<arr.lenght;i++){arr[i];当前元素、

第五天知识点

1. DOM:Document Object Model（文档对象模型）
2. DOM树概念：dom将html看作是一个倒挂的树状结构，但是树根不是html标签而是document的对象
3. 查找元素：
   1. 直接通过html的特点去查找元素
      1. 通过id查找元素：var elem=document. getElementById("id值");
      2. 通过标签名查找元素：var elems=document/已找到的父元素.getElementsByTagName("标签名");
      3. 通过class查找元素：var elems=document/已经找到的父元素.getElementsByclassName("class名");
   2. 通过关系去获取元素：前提时必须找到一个元素才可以
      1. 父元素：elem.parentNode;单个元素
      2. 子元素: elem.children;集合
      3. 第一个元素：elem.firstElementchild;单个元素
      4. 最后一个元素：elem.lastElementchild;单个元素
      5. 前一个兄弟：elem. previousElementSibling;单个元素
      6. 后一个兄弟：elem. nextElementSibling;单个元素
4. 操作元素：前提找到元素，才能操作元素
   1. 内容：
      1. elem. innerHTML获取和设置开始标签到结束标签之间的内容，支持识别标签
      2. elem. innerTEXT获取和设置开始标签到结束标签之间的纯文本，不识别标签
      3. input. value 专门获取/设置input里的内容
   2. 属性：
      1. 获取属性值：elem.getAttribute("属性名");
      2. 设置属性：elem.setAttribute("属性名", "属性值")
   3. 样式：
      1. 内联样式
      2. 内部样式
      3. 外部样式
      4. 样式的获取：elem.style.css属性名；
      5. 样式的设置：elem.style.css属性名="css属性值";
   4. 绑定事件：

      1. elem. on事件名=function{操作；关键字 this}

      2. this：可以单个和多个绑定事件