JavaScript学习笔记-基础部分+WebAPI

白嫖地址：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相关的