JavaScript 学习笔记

'use strict';严格模式
异步交互（Ajax）也是通过js完成
js的交互操作是通过事件（用户操作）触发
写法：
行内引入：onclick="javascript:alert('我是行内引入方式');"/on+事件类型=“js代码”/onclick="show()"
内部写法：<script type="text/javascript">js代码</script>
外部引入：<script type="text/javascript" src="路径/文件名.js"></script>

驼峰式命名写法
css复合样式第二个单词开始首字母大写
css属性名如果带有连字符（-），需要把连字符去掉，连字符之后的第一个字母变大写

关闭窗口符号：
&times;

document    文档
get    获取
element    元素
by    通过
Id    id
.    的
=    赋值/变成，左右加空格
document.getElementById('box2').style.display = 'none';
通过id获取元素

getElementsByTagName通过元素的标签名获取到一组元素
document.getElementsByTagName('img')获取网页中所有的img元素
网页元素.getElementsByTagName('img')获取指定网页元素范围内的所有img元素

class是js中的关键词语，所以要使用className
xxx.className='abc'设置xxx元素的class为abc
var a=xxx.className 获取xxx元素的class保存到变量a

事件
onclick    on 在...时，点击事件
onmouseover 鼠标滑动到...上方
onmouseout 鼠标离开...元素
onfocus 获取焦点
onblur 失去焦点

alert警告框弹出内容，弹出中文加单引号
onclick="alert()"
onclick="alert('')"

如果想在a链接被点击时执行js代码，而不是页面跳转，可以使用如下格式
<a href="javascript:要执行的js代码;">这是js伪协议</a>
<a href="javascript:;">这是空链接</a>
<a href="javascript:void(alert('还真信啊你，哈哈哈！！！'));">这是空链接</a>

常用输出信息的方式：
1、document.write(信息); 网页显示
2、console.log(信息); 控制台
3、alert(信息); 弹出警告框

function声明一个函数 相当于css里边的.
function函数名{}

var声明变量
var 变量名 = "值";
全局变量script>var
局部变量function>var
给重复使用的信息起一个简短的名称

给网页元素添加事件的基本格式:
var 变量名=网页元素（获取元素）
1：直接使用匿名函数（没有名字的函数）
网页元素.on事件=function () {发生事件时执行的代码}
2：使用有名字的函数11:48 2020/10/14
function xxx(){发生事件时执行的代码}
网页元素.on事件=xxx
函数名带括号是马上执行
this发生事件的这个元素
字母带引号看作字符串，不带引号看作是变量
如果变量没有赋值直接使用，会有提示，如block is not defined（block没有定义）

使用网页元素.属性名=xxx可以修改/设置网页元素的指定属性为xxx
使用input元素.value=xxx可以修改input元素的value值
使用img元素.src=xxx可以修改图片元素的地址

让元素像链接一样可以点
cusor:pointer;

if语句/结构用来做判断
if 如果 else 否则
if(){
语句1
}else{
语句2
}
如果条件成立（true），执行语句1，否则（false）执行语句2
一个=为赋值/改变，两个==判断两边的值是否一致（相当于数学上的=）

循环
如果想设置每个元素的事件，可以通过循环来实现
for循环一般用于确定次数的循环
for(初始值，条件，增量){
循环需要的代码
}
while循环一般用于不确定次数的循环
初始值
while(条件){
循环需要的代码
增量
}

i++表示i的值自增1，是i=i+1的缩写
i--表示i的值自减1，是i=i-1的缩写

% 模运算 取余运算 两数相除取余数
偶数 数字%2 == 0
奇数 数字%2 != 0
不同的数字在条件判断中识别为true还是false：
非0数字识别为true，数字0识别为false
!表示否定 !true就是false !false就是true !非0数字是false !数字0是true
通过加小括号可以改变运算顺序/运算符优先级
任何一个数和10相除它的尾数就是这个数

条件运算符（三目运算符）判断条件?条件为true执行的代码:条件为false执行的代码
可以当作是if-else结构的简化写法
+= -= *= /= %=
x?=y 表示 x=x?y (?代表 + - * / %等符号);
x+=y 如果x为字符串，那么+=相当于连字符

通过表单获取的数据是字符串类型，数字是数字字符串，需要把数据转换成数字类型才能进行数学比较
如果提供的数据是123，获取的数据是'123'，提供的数据是45，获取的数据是'45'
进行比较的时候，字符比较是从左到右按位比较，所以'123'和'45'比较首先是比较的'1'和'4'，如果第一位数据相同，比较第二位，以此类推
parseInt 将数字字符串转为整数，例如'16'会转换为16，'3.14'会转换为3
parseFloat 将数字字符串转为浮点数（兼容整数） 小数点只能有一个，例如'16'会转换为16，'3.14'会转换为3.14
1e3 1乘10的3次方

innerHTML 某个元素里面的HTML，可以设置，也可以获取，可以是普通文本，也可以是带有HTML标签的内容

网页元素.disabled=true，禁用当前元素
网页元素.disabled=false，启用当前元素
获取到某个网页元素的disabled的值为true，说明当前元素是禁用的
获取到某个网页元素的disabled的值为false，说明当前元素是启用的
网页元素.readOnly=true，只读当前元素
网页元素.readOnly=false，解除只读当前元素
获取到某个网页元素.readOnly的值为true，说明当前元素是只读的
获取到某个网页元素.readOnly的值为false，说明当前元素是可读写的
网页元素.checked=true，选中当前元素
网页元素.checked=false，没有选中当前元素
获取到某个网页元素.checked的值为true，说明当前元素是选中的
获取到某个网页元素.checked的值为false，说明当前元素是没有选中的

选项卡效果制作思路：全清，单设
自定义index属性，用于选项和内容的关联
直接在HTML代码中添加index属性，现代浏览器不识别
使用JS添加index属性，可以被现代浏览器识别

JavaScript组成：
1.ECMAScript：JS核心，翻译，解释器，提供了JS的基本功能，缩写ES
2.DOM：文档对象模型，操作HTML的能力，操作HTML页面的入口，document
3.BOM：浏览器对象模型，操作浏览器的能力，window

变量：存放数据/信息
声明（定义）变量，关键字var
typeof 可以检测变量中存放的内容的类型
常见类型：number(数字类型)string(字符串类型)boolean(布尔类型)function(函数类型)object(对象类型)undefined(未定义类型)
变量本身没有类型，类型取决于变量本身存放的的内容
文本框中的数据类型是字符串，需要把数据转为数字类型才能进行运算
显式类型转换（强制类型转换）
数字字符串->整数 parseInt()
数字字符串->浮点数 parseFloat()
转换时遇到不能识别的字符，之后的信息全部舍去
如果不是数字字符串，转换会失败，得到NaN(Not a Number)
判断是不是NaN不能用==NaN的方法，需要使用isNaN()
isNaN(数据)，如果数据的值是非数字，结果为true，如果数据的值是数字，结果为false
多重条件判断
if(条件1){
    语句段1
}else if(条件2){
    语句段2
}else{
    语句段3
}
如果满足条件1，执行语句段1，否则，如果满足条件2，执行语句段2，否则，执行语句段3
else if根据需要可以写多个
设置条件的时候，如果需要多个条件同时满足，用&&连接多个条件，如果需要只满足其中一个条件，使用||连接多个条件
&& 并且 and
|| 或者 or
隐式类型转换
+ 例如：字符串+数字，会把数字隐式转换为字符串'a'+1->'a1'
- 例如：数字字符串-0，会把数字字符串隐式转换为数字'123'-0->123
*和/也有类似的效果，数字字符串*1，数字字符串/1
在if等结构中的条件必须是布尔值true或false，如果提供了其它类型的值，会隐式转换为布尔值
当作false的值：false，数字0，空白字符串，undefined类型的数据,null
当作true的值：true，非0数字，非空白字符串

运算符：
1.算术运算符 + - * / % ++ --
++或-- 符号在前，先算在用，符号在后，先用在算
2.赋值运算符 = += -= *= /= %=
3.关系运算符（比较运算符，结果为布尔型） < > <= >= ==(等于) !=(不等于) ===(绝对相等) !==()
==和=的区别，==是比较，=是赋值
==和===的区别，==只比较值，===比较值和类型
!=和!==的区别，!=只比较值，!==比较值和类型
4.逻辑运算符 &&逻辑与 ||逻辑或 !逻辑非
使用两个!，可以把数据变为相应的布尔值
&&全为true，结果为true
||全为false，结果为false
5.运算符优先级 加小括号可以改变运算符优先级

程序流程控制：
1.顺序 先写先执行，后写后执行
2.分支 根据情况不同执行不同代码
if,if-else,if-else if-else
?:条件运算符，可以看作是if-else的简化
switch 单变量多次等值判断
3.循环 在满足条件时反复执行代码
前测试循环，满足条件时再执行
for
while
后测试循环，至少会执行一次，如果满足条件，继续执行
do-while
4.终止
break 终止，结束剩余所有次数的循环操作
continue 继续，结束本次循环剩余代码，继续下一次循环

函数 function
把重复使用的相对复杂的代码进行封装/包装/打包，起个名字，以后使用时只需要使用起好的名字
定义函数
function 函数名(参数){
    函数体(函数中需要执行的代码)
}
或者
var 变量名 = function (参数) { //此时变量名就是函数名
    函数体(函数中需要执行的代码)
}
调用函数
函数名(参数)
定义和调用缺一不可，一次定义可以反复调用
多个功能类似的函数可以合并成一个带参数的函数
什么时候使用参数：函数里有不确定或有变化的信息
再定义参数时的参数叫做形参(形式参数)，指示可变的数据需要做什么操作
在调用函数时的参数叫做实参(实际参数)，指真实用在函数执行时的数据
函数的返回值
一般指函数的执行结果
通过return语句可以将返回值返回，返回到调用函数的位置
函数的返回值和函数的参数相反，参数是传入信息，返回值是传出信息
函数的返回值只能有一个，如果需要同时返回多个值，可以使用数组或JSON
return语句除了可以返回值，还可以终止函数中代码的运行
形参和实参输数量不一致的处理
实参数量多于形参数量，多出来的实参被丢弃
实参数量少于形参数量，没有匹配到的参数值为undefined
传递不确定数量参数的处理：
如果传入的参数数量固定，在定义函数的时候直接把需要使用的参数写在函数名后面的小括号里
如果传入的参数数量不固定使用arguments（参数对象）来获取每次的所有参数，在定义函数时可以不用在函数名后面的小括号里写参数
arguments可以看作数组来进行操作
arguments[0]可以获取到第一个参数值，arguments[1]可以获取到第二个参数值，以此类推
arguments.length可以得到传入的参数的个数
变量作用域（作用范围）：
1：局部变量（具有局部作用域）
在函数内部通过var声明的变量是局部变量，只能在声明他的函数中使用
如果有嵌套函数，局部变量也能在内部子函数中使用
2：全局变量（具有全局作用域）
除了局部变量都是全局变量，在任何地方都能使用。
变量声明的提升
变量的声明不论写在代码的什么位置，代码执行时都会移动到代码开始位置执行，局部变量的声明非移动到函数中代码的开始位置
var a=5;做了两件事情，声明和赋值，1：声明变量var a;2:变量赋值a=5;
变量声明会提升，变量赋值不会提升
函数的定义和变量的声明有相同的特点，不论函数的定义写在代码的什么位置，代码执行时都会把函数的定义移到代码开始位置执行
如果使用var 变量名=function（）{。。。}方法定义函数，函数的定义不会被提前
为了代码能正确执行，并提高代码的可读性，变量声明和函数定义还是写在变量使用和函数调用之前
闭包（了解）：在子函数中使用了父函数的局部变量

对象（Object）表示客观世界（包括计算机世界）中的某个具体的事物
属性 和对象关联的值（类似于变量） 使用方式 对象名.属性名 或 对象['属性名']
方法 和对象关联的操作（类似于函数） 使用方式 对象名.方法名()
自定义对象:
var person = {firstName:'John', lastName:'Doe', age:50, eyeColor:'blue'};
或者:
var person = {
    firstName:'John',
    lastName:'Doe',
    age:50,
    eyeColor:'blue'
};

字符串对象 String
创建方法
var s = new String('***');
或者
var s = '***';
常用属性
length 获取字符串的长度
常用方法
indexOf() 查找某个字符串值在另一个字符串中首次出现的位置，位置序号从零开始，找不到返回-1
lastIndexOf() 查找某个字符串值在另一个字符串中最后一次出现的位置，位置序号从零开始，找不到返回-1
slice() 截取字符串的一部分，得到新的字符串
substr() 从起始索引号开始提取字符串中指定数目的字符
substring() 提取字符串中两个指定的索引号之间的字符
split() 把字符串分割为字符串数组 S->A 字符串->数组
toLowerCase() 把字符串转换为小写。
toUpperCase() 把字符串转换为大写。
trim() 去除字符串两边的空白

数组对象 Array
把多个数据放到一个变量中，可以使用数组
第一个数组元素的序号是0，第二个序号是1，以此类推
创建方法
var a = new Array()(x,y,z...);
或者
var a = [x,y,z...]
常用属性
length 设置或获取数组元素的个数
常用方法
concat() 连接两个或更多的数组，并返回结果
join() 把数组的所有元素放入一个字符串 A->S 数组->字符串
pop() 删除数组的最后一个元素并返回删除的元素 **会影响原数组**
push() 向数组的末尾添加一个或更多元素，并返回新的长度 **会影响原数组**
shift() 删除并返回数组的第一个元素 **会影响原数组**
unshift() 向数组的开头添加一个或更多元素，并返回新的长度 **会影响原数组**
reverse() 反转数组的元素顺序 **会影响原数组**
slice() 选取数组的一部分，并返回一个新数组
sort() 对数组的元素进行排序 **会影响原数组** **默认按字符串方式排序，添加排序函数作为参数，可以变为数字方式排序** 升序排列function(a,b){return a-b;} 降序排列function(a,b){return b-a;}
splice() 从数组中添加或删除元素 **会影响原数组**

数学对象 Math
常用属性
PI 返回圆周率（约等于3.14159）
常用方法
max(x,y,z,...,n) 返回 x,y,z,...,n 中的最大值
min(x,y,z,...,n) 返回 x,y,z,...,n中的最小值
ceil(x) 对数进行上舍入 进一法，向上取整
floor(x) 对数进行下舍入 去尾法，向下取整
round(x) 四舍五入
random() 返回 0 ~ 1 之间的随机数，包含0，不包含1
公式：
Math.floor(Math.random()*(n+1));//返回0-n的随机整数
Math.floor(Math.random()*(n-m+1))+m;//返回m-n的随机整数
函数：
function x(m,n){
    return Math.floor(Math.random()*(n-m+1))+m;
}
document.write(x(m,n));
pow(x,y) 返回 x 的 y 次幂

日期时间对象 Data
创建方法
var d = new Date();
常用方法
getFullYear() 从 Date 对象以四位数字返回年份
getMonth() 从 Date 对象返回月份 (0 ~ 11)
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)
getHours() 返回 Date 对象的小时 (0 ~ 23)
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)

正则表达式对象 RegExp
创建方法
var patt=new RegExp(pattern,modifiers);
或者
var patt=/pattern/modifiers;
pattern（模式） 描述了表达式的模式
modifiers(修饰符) 用于指定全局匹配、区分大小写的匹配和多行匹配
方括号
元字符
量词

BOM浏览器对象模型
window 对象表示浏览器中打开的窗口。
方法
alert() 显示带有一段消息和一个确认按钮的警告框
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框
prompt() 显示可提示用户输入的对话框
navigator 对象包含有关浏览器的信息。
screen 对象包含有关客户端显示屏幕的信息。
history 对象包含用户（在浏览器窗口中）访问过的 URL。
方法
back() 加载 history 列表中的前一个 URL
forward() 加载 history 列表中的下一个 URL
go() 加载 history 列表中的某个具体页面
location 对象包含有关当前 URL 的信息。
属性
href 返回完整的URL
reload() 重新载入当前文档

DOM文档对象模型
HTML Document 整个文档
document.querySelector('css选择器') 返回文档中匹配指定的CSS选择器的第一元素
document.querySelectorAll('css选择器')    返回文档中匹配的CSS选择器的所有元素节点列表
给指定的网页元素添加事件处理程序 网页元素.addEventListener('事件名称',事件处理函数)
类似于 网页元素.on事件名称=事件处理函数
移出指定网页元素的事件处理函数 网页元素.removeEventListener('事件名称',事件处理函数)
只能移除通过addEventListener()方法添加的事件处理
HTML Element
HTML Attributes
HTML Events 事件

JSON(javascript对象表示法)
轻量级的文本数据交换格式，存储和交换文本信息
JSON是“关联数组”(“名字/值”对的集合)
数组是“索引数组”(值的有序集合)
JSON不能通过document.write直接输出
JOSN没有length属性，不能通过它获取JSON中包含信息的数量
顺次显示JSON中的每个信息，不能使用for循环，需要使用for-in循环
数组的信息也可以通过for-in循环显示
一般情况下，数组使用for，JSON使用for-in
JSON对象和JSON字符串的互转
使用JSON.parse()方法将JSON字符串转换为JSON对象

使用JSON.stringify()方法将JSON对象转换为JSON字符串

定时器
定时器的时间以毫秒为单位
开启
1.setInterval()周期性定时器，每隔固定时间做指定操作，类似于闹钟
格式:
setInterval(function(){
    指定操作
},固定时间);
2.setTimeout()一次性定时器，到达指定时间做指定操作，类似于定时炸弹
格式:
setTimeout(function(){

    指定操作

},指定时间);
setTimeout(()=>{  //设置延迟执行
//   this.routerLink = 0
},500);
停止
1.clearInterval()取消或停止由setInterval()设置的定时器
2.clearTimeout()取消或停止由setTimeout()设置的定时器
停止定时器时需要提供要停止的定时器的名字，一般情况，名字使用全局变量，才能在不同函数中使用

立即执行函数
创建一个独立的作用域。这个作用域里面的变量，外面访问不到（即避免「变量污染」）。
(function(){})();

try{ } catch (e){ }的理解
通俗的说：屏蔽掉错误继续往下执行。
js如果出现错误，浏览器则会在console面板中打印出错误，那么我们为什么还要使用try catch呢？
结论：为了在js出现错误的时候，把异常捕获掉，这样程序仍能正常运行下去
a.如下，如果我们这样写：
console.log(i);
var a = 6;
console.log(++a);
因为i未定义，出现错误，那么js就卡在这里了，我们预期的输出a的结果也不执行了。
b.如果，我们使用try catch：
        try {
            console.log(i);
        }catch(e) {
           console.log(e)
        }
        var a = 6;
        console.log(++a);
那么，i未定义的错误被捕获掉了，程序仍能继续运行下去，最后输出a的结果是7

编码和解码 URI 的函数
四个用来编码和解码 URI 的函数：encodeURI、encodeURIComponent、decodeURI、decodeURIComponent
encodeURI 和 decodeURI 函数操作的是完整的 URI；这俩函数假定 URI 中的任何保留字符都有特殊意义，所有不会编码它们。
encodeURIComponent 和 decodeURIComponent 函数操作的是组成 URI 的个别组件；这俩函数假定任何保留字符都代表普通文本，所以必须编码它们，所以它们（保留字符）出现在一个完整 URI 的组件里面时不会被解释成保留字符了。

localStorage本地存储
// 存储
localStorage.setItem("lastname", "Gates");
// 取回
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

localStorage只能存字符串，如果需要存对象，首先要转化为字符串 利用JSON.stringify() ( 存单个就不用考虑这些了 )
// setItem 存
let rowVal = {
        bCode: row.gymnasium.code,
        bName: row.gymnasium.name,
        bAddress: row.gymnasium.address,
        bCoachName: row.coach.name,
        bCozchNickName: row.coach.nickname,
        bIphone: row.coach.phoneNumber
};
localStorage.setItem("rowVal", JSON.stringify(rowVal));
然后取出rowVal对象用JSON.parse() 再把字符串转为对象( 然后用哪个 "." 哪个就行了 )
// getItem 取
computed: {
    rowVal() {
      const rowVal = JSON.parse(localStorage.getItem("rowVal"));
      return rowVal;
    }
 }

编程范式：命令式编程(Imperative)、声明式编程(Declarative)和函数式编程(Functional)
命令式编程的主要思想是关注计算机执行的步骤，即一步一步告诉计算机先做什么再做什么。
声明式编程是以数据结构的形式来表达程序执行的逻辑。它的主要思想是告诉计算机应该做什么，但不指定具体要怎么做。
函数式编程和声明式编程是有所关联的，因为他们思想是一致的：即只关注做什么而不是怎么做。但函数式编程不仅仅局限于声明式编程。函数式编程最重要的特点是“函数第一位”，即函数可以出现在任何地方，比如你可以把函数作为参数传递给另一个函数，不仅如此你还可以将函数作为返回值。

localStorage存储对象数组
beforeDestroy() {
  localStorage.setItem('commentList',JSON.stringify(this.List))
},
created() {
  let objArr = localStorage.getItem('commentList')
  this.List = JSON.parse(objArr)
  console.log('this.List', this.List);
},