白嫖地址：https://www.bilibili.com/video/BV1HJ41147DG
本笔记未全面记录学习笔记，只记录对自己感觉陌生或者感觉重要的部分
若要学习，推荐资料+B站白嫖
全套课件资料地址：链接：https://pan.baidu.com/s/1N6iJGPMkPLBkY9x7SMZbXA
提取码：8fil
JS
三种格式：
内联
行式（onclick=）
外联<script src="my.js">这中间不能写代码了</script>
约定JS字符串使用单引号
注释
单行//
多行/*多行*/ shift+alt+a
弱类型语言：变量没有数据类型
弹窗（获取）
1、var myname=prompt('请输入你的名字');//获取用户交互 取到的数据是字符串类型
2、alert(myname)
3、console.log() //打印到控制台
变量不声明 只赋值引用会造成全局变量 这样实际编码不提倡 但是可能对于我们安全测试 会有点用处
变量大小写敏感
变量 八进制 第一位为0 十六进制 0x
isNaN()判断是不是数字的函数
字符串拼接 str1+str2
true+1=2
undefined+1=NaN
加减乘除可以使数据类型隐式转换为数字型 取整函数是直接截取整数部分，不四舍五入
短路运算 逻辑中断会影响程序运行 优先级 &&>||>!
&&逻辑他运算符：在程序中如果出现非布尔值，则前面为真 就返回后面的值 前面为假 返回前面的值
console.log(123&&456) //456
console.log(0&&456) //0 那些算假呢？：0 ‘ ’ NaN undefined
console.log(0&&456+2&&3*4) //0 还是0 由于碰到0短路了后面的都不算了 直接返回0
||逻辑他运算符：在程序中如果出现非布尔值，则前面为真 就返回前面的值 前面为假 就返回后面的值
console.log(0||456) //456 第一个是假 返回第二个
console.log(123||456) //123 第一个是真 返回第一个
function函数中最后返回的值只能是最后一个 不管返回多少值 若要返回多个值 可以包装成数组输出
全局变量（函数外定义的）与局部变量（函数内定义的）
作用域链：内部函数访问外部函数的变量，采取的是先找自己的内部，自己内部没有就找包含自己的外部函数，在没有就继续向外找
预解析：
JS引擎会把当前作用域中的var和function提升到当前作用域的最前面执行
变量预解析（变量提升）：
把当前作用域中变量声明提升到当前作用域最前面执行，但是只提升声明操作，不提升赋值操作
函数预解析（函数提升）：
把当前作用域中函数声明提升到当前作用域的最前面执行，但不调用函数
对象：
一个数据的集合，内部通过“键值对”的形式存储数据 类似于python的字典 只是对象里面的函数定义有点不同
sayHi:function(){
alert(1)}
利用对象存储数据的优势：
对象内部存储的每个数据都有对象的“键”标识指向，对开发者来说能更直观直接的使用对象准确获取数据，数据存储结构清晰
还有一种利用new Object()方法创建对象的方法 感觉好像更好
构造函数：将对象里面一些相同的属性和方法抽象出来封装到函数里面 和Java一样 构造函数没有返回值
function 构造函数名() {
this.属性 = 值;
this.方法 = function() { }
}
var zz=new 构造函数名（加参数，加参数）
遍历对象属性输出
for(var k in obj){
console.log(k)
console.log(obj[k])
}
内置对象：JS语言自带的对象，供开发者直接使用 常见的 Math Date Array String
Math.round() 四舍五入方法
Math.random() 0到1之间随机小数
Date构造函数需要实例化 是关于时间的内置函数
instanceof检测是否为数组
var arr=[]
console.log(arr instanceof Array)
还有个方法 arr.isArray() H5新增 ie9以上支持
sort()排序 只能排个位数 十位数的话需要
var arr=[1,13,22,6,8]
arr.sort(function(a,b){
return a-b; //升序的顺序排列
return b-a; //降序的顺序排列
})
indexOf() 查找数组是否有该元素 有的话返回数组下标 没有返回-1
此函数可用于构造数组去重的函数
function unique(arr) {
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (newArr.indexOf(arr[i]) === -1) {
newArr.push(arr[i]);
}
}
return newArr;
}
// var demo = unique(['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'])
var demo = unique(['blue', 'green', 'blue'])
console.log(demo);
数组转换为字符串 tostring() join()
// 1. toString() 将我们的数组转换为字符串
var arr = [1, 2, 3];
console.log(arr.toString()); // 1,2,3
// 2. join(分隔符)
var arr1 = ['green', 'blue', 'pink'];
console.log(arr1.join()); // green,blue,pink
console.log(arr1.join('-')); // green-blue-pink
console.log(arr1.join('&')); // green&blue&pink
// 判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符，并统计其次数。
// 这个算法片段比较巧妙
// o.a = 1
// o.b = 1
// o.c = 1
// o.o = 4
// 核心算法：利用 charAt(） 遍历这个字符串
// 把每个字符都存储给对象， 如果对象没有该属性，就为1，如果存在了就 +1
// 遍历对象，得到最大值和该字符
var str = 'abcoefoxyozzopp';
var o = {};
for (var i = 0; i < str.length; i++) {
var chars = str.charAt(i); // chars 是 字符串的每一个字符
if (o[chars]) { // o[chars] 得到的是属性值
o[chars]++;
} else {
o[chars] = 1;
}
}
console.log(o);
Web API
针对浏览器提供的接口，主要针对浏览器做交互效果
获取
1、通过ID getElementById（）获取文档对象标签里的东西
2、通过标签名 getElementsByTagName（'li'）
3、通过类名 getElementsByClassName（）
4、querySelector(p)里面加标签 querySelectorAll()
事件三要素（基础示例）
// 点击一个按钮，弹出对话框
// 1. 事件是有三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素
//(1) 事件源 事件被触发的对象 谁 按钮
var btn = document.getElementById('btn');
//(2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
//(3) 事件处理程序 通过一个函数赋值的方式 完成
btn.onclick = function() {
alert('点秋香');
}
通过innerText修改元素内容 非标准（获取元素去除空格和换行） 不识别HTML标签 div.innerHTML = '<strong>今天是星期几</strong>' 加粗无效
通过innerHTML修改元素内容 标准（获取元素包含标签） 识别HTML标签 div.innerHTML = '<strong>今天是星期几</strong>' 加粗有效 提倡使用
display 元素模块隐藏展示属性
parentNode 父节点 关键字 得到的是离元素最近的父节点
children 子节点 关键字 推荐这个 这个只获取元素 不会获取其他文本
location对象 获取解析设置URL
href 返回地址
search 返回参数
assign（）页面跳转
navigator 与user-agent相关的