狂神说老师JavaScript的学习笔记

1、数据类型

1.1运算符

• 比较运算符：

  • = 如果1=‘1’,则为false
  • == 等于 类型不一样，值一样，也会判断为true
  • === 绝对等于，类型一样，值一样，判断为true
  • 这是js的缺陷，尽量不使用==比较

  浮点数问题：
  console.log((1/3)===(1-2/3))
  结果为false，尽管数值是都等于1/3
  尽量避免使用小数计算，因为精度问题

1.2、数组

java的数值必须是相同类型的对象，js中不一样，数组课存放不同类型
var arr = [1,2,3,'hello',null,true]
取数组下标如果越界了，只会提示为定义undefined

• 对象
  java创建对象：Person p = new Person("zhang",19)
  js创建对象:var Person = {name:'zhang',age:19,arr:[...]}
  js的对象用大括号，每个属性用逗号隔开

• 局部变量
  前提：idea需要设置支持ES6语法
  建议都是用let去定义（之前定义局部变量都是直接i=1),现在要let i= 1
  ‘use strict’:（放在第一行）严格检查模式，预防js的随意性导师产生的一些问题

      'use strict'  
      let i = 1
  

• 模板字符串

    //拼接两个变量  
    let name = "zhang";  
    let age = 19;
    let msg = '你好呀，${name}'  // 显示为你好呀，zhang

1.3、数组方法

1、长度
arr.length

2、indexOf()，通过元素获得下标索引
arr.indexOf(2) //找到元素为2的下标

3、slice(),截取数组的一部分，返回一个新数组，类似于String中的substring

4、push()、pop() 在尾部操作元素

push(): 压入元素到尾部  
pop(): 弹出尾部的一个元素

5、unshift(),shift() 在头部操作

    unshift: 压入元素到头部
    shift： 弹出头部的一个元素

6、sort() 排序

7、reverse() 元素反转

8、concat() 拼接元素

    arr = ['a','b','c']
    arr.concat([1,2,3]) //拼接新数组 
    打印arr.concat([1,2,4])为['a','b','c',1,2,3] 
    但是打印原数组arr则跟之前一样：['a','b','c']

注意：concat并没有修改数组，只是会返回新数组

9、join 连接符 打印拼接数组，使用特定的字符串连接

    arr = ['a','b','c']
    arr.join("-")
    ->"a-b-c"

10、javascript中所有的键都是字符串，值是任意对象

1.4、对象

1、对象定义

var person = {
    name:"zhang",
    age:3,
}

2、添加属性值

person.tianjia = "tianjia"

3、 判断属性值是否在这个对象 ‘xxx’ in xxx

    'age' in person  //true

1.5、流程控制

1、if判断

2、while循环&for循环

3、forEach循环

var age = [12,43,64,7,8]  
age.forEach(function (value){
    console.log(value)
})//打印数组

4、forin循环

//for (var index in arr){
    if (age.hasownProperty(num)) {
        console.log("存在")
        console.log(age[num])
    }
}

1.6、Map和Set (ES6的新特性)

1、Map

var map = new Map([['tom',10],['jack',20],['haha',30]]);
var name = map.get('tom'); // 通过key获得value  
map.set('admin',12); // 新增或修改  
map.delete('tom'); // 删除元素 

2、Set 无序不重复的集合

set.add(2); //添加
set.delete('tom')  // 删除
console.log(set.has(3));// 是否包含某个元素

1.7、遍历与迭代器遍历

1、数组遍历：

//通过forof遍历，forin遍历时用下标
var arr = [3,4,5]
for(var x of arr){
    console.log(x)
}

2、map集合遍历

var map = new map(['jack',20],['haha',10],['tom',10])  
for(let x of map){
    console.log(x)
}

3、set集合遍历

var set = new set([5,6,7]) //集合记得用[]包围  
for(let x of set){
    console.log(x)
}  

2、函数

2.1定义函数

定义方式一

绝对值函数

function abs(x){
    return x;
}else{
    return -x;
}

一旦执行到return代表函数结束，返回结果

定义方法二

var abs = function(x){
    return x;
}else{
    return -x;
}

function(x){}是一个匿名函数，可以吧结果赋值给abs，通过abs就可以调用函数
方法一和方法二等价

调用函数:

abs(10)
abs(-10)

**参数问题：**javascript可以传任何个参数，也可以不传参数
参数进来是否存在的问题？假设不存在参数，如何抛出异常？

var abs = function(x){
    //手动抛出异常来判断
    if (typeof x !== 'number') {
        throw 'not a number';
    }
    if (x>=o) {
        return x;
    }else{
        return -x;
    }

}

arguments对象：
加入函数的实参没有写多个，但使用时传入了多个参数，使用arguments对象可以把这多个参数用数组返回,argument对象其实就是传入的所有参数的数组。
特性：
1.arguments对象和Function是分不开的。
2.因为arguments这个对象不能显式创建。
3.arguments对象只有函数开始时才可用。
使用方法：
虽然arguments对象并不是一个数组，但是访问单个参数的方式与访问数组元素的方式相同
例如：
arguments[0],arguments[1],。。。arguments[n]；
在js中 不需要明确指出参数名，就能访问它们，例如：

function test() {
        var s = "";
        for (var i = 0; i < arguments.length; i++) {
            alert(arguments[i]);
            s += arguments[i] + ",";
        }
        return s;
}
test("name", "age");

//结果为name,age

rest参数

例如：函数定义了两个参数，但是传入了第三个参数，要怎么取出第三个参数呢？

function test(a,b){
    console.log('a->'+a);
    console.log('b->'+b);
    //以前的方法取第三个元素：
    if (arguments.length>2) {
        for(var i = 2; i<arguments.length;i++){
            console.log(arguments[i])
        }
    }

}

//现在的方法(rest参数)：在函数中定义rest参数
function test1(a,b,...rest){
    console.log('a->'+a);
    console.log('b->'+b);
    console.log(rest);
}

3、变量的作用域

变量的作用域

function a(){
    var x = 1;
    //内部函数可以访问外部函数的成员，反之不行
    function a1(){
        var y = x +1; //2
    }
    //外部访问了内部函数的变量，会不行
    var z = y+1; //报错
}

变量的一般使用
一般都先定义，后调用

function zhang(){
    var x,y,z;

    //之后再赋值调用
}

全局对象window

var x ='xxx';
window. alert(x);
var o1d_ _alert = window. alert;
//o1d_ alert(x);
window.alert = function () {};
//发现alertO 失效了
window. alert(123);
//恢复
window.alert = o1d_ _alert;
window. alert(456);

局部作用域let
ES6let关键字，解决局部作用域冲突问题，现建议大家都用let去定义局部变量

function aaa() {
for(vari=0;i<100;i++){
    console.log(i)
}
console.log(i+1); //问题? i 出了这个作用域还可以使用
}

//使用let后
function aaa() {
for(leti=0;i<100;i++){
    console.log(i)
}
console.log(i+1); //Uncaught ReferenceError: i is not defined
}

常量const
在ES6之前，定义常量使用全部大写字母命名的变量就是常量

var PI = '3.14' ;
console.' 1og(PI);
PI = '213'; //可以改变这个值
console.1og(PI);

在ES6之后，用const定义常量

const PI = '3.14';
console.log(PI);
PI = '123'; //报错，常量不允许修改

3、方法

定义方法
方法就是把函数放在对象的里面，对象只有两个东西：属性和方法

var person = {
    name: 'zhang';
    brith: 1997;
    //方法 
    age: function(){
        var now = new Date().getFullYear();
        return now - this.brith; //this是默认指向调用它的那个对象，这里值person
    }
}
//属性调用
person.name;
//方法调用，方法一定要带（）
person.age();

apply方法
apply方法是可以控制this指向的，该方法有两个参数，第一个是getArg要使用的是那个对象，第二个是数组

function getAge(){
    var now = new Date().getFullYear();
    return now - this.brith;
}
getAge.apply(person,[]); //this指向了person，参数为空

4、内部对象

标准对象
typeof 123
“number”
typeof ‘123’
‘string’
typeof true
“boolean”
typeof NaN
“number”
typeof []
"object’
typeof {}
“object”
typeof Math. abs
“functi on”
typeof undefined
“undefined”

4.1、Date

基本使用

var now = new Date(); //sat Jan 04 2020 10:47:06 GMT+0800 (中国标准时间)
now. getFu11YearO); //年
now. getMonth(); //月0~11 代表月
now. getDate(); //日
now. getDay(); //星期几
now. getHours(); //时
now. getMinutes(); //分
now. getseconds(); //秒
now. getTimeO); //时间戳全世界统一1970 1.1 0:00:00 毫秒数
console. log(new Date(1578106175991)) //时间戳转为时间

转换

now = new Date (1578106175991)
sat Jan 04 2020 10:49:35 GMT+0800 (中国标准时间)
now. toLocalestring //注意，调用是一个方式，不是一一个属性!
f toLocalestring() { [native code] }
now. toLocalestring()
"2020/1/4上午10:49:35"
now. toGMTString()
'Sat, 04 Jan 2020 02:49:35 GMT"

4.2、json对象

早期，所有数据传输习惯使用XML文件!

• JSONlavaScript Object Notation, JS对象简谱)是- -种轻量级的数据交换格式。
• 简洁和清晰的层次结构使得JSON成为理想的数据交换语言。
• 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
  在JavaScript -切皆为对象、任何js支持的类型都可以用JSON来表示; number, string…
  格式:
• 对象都用{}
• 数组都用[]
• 所有的键值对都是用key:value

json字符串和js对象的转换

var user = {
    name :
    "qinjiang",
    age: 3,
    sex: '男'
    }

//对象转化为json字符串(json字符串每个键都用""或'包围)
var jsonuser = JSON. stringify(user); 
//输出为{"name" : "qinjiang"，"age":3,"sex" :"男"}

//json字符串转化为对象参数为json 字符串
var obj = JSON. parse(' {"name":"qinjiang" , "age" :3,"sex":"男"}');
//输出为{name:"qingjiang",age:3,sex:"男"}

json和js对象的区别：

var obj = {a: 'he11o' ,b: 'he11ob'};
var json = '{"a": "he11o" , "b":"he1lob"}'

5、面向对象编程

5.1、面向对象原型继承

1、原型对象
当创建一个新函数时，系统会根据一组特定的规则为函数创建一个prototype属性，该属性会指向一个名为原型对象的对象，在默认情况下，该对象会自动生成一个构造函数（constructor），该构造函数是一个指向函数的指针。而在原型对象中，除了有这个构造函数，我们还可以添加其他的属性和方法。

通俗来讲就是，当我们新建一个函数A时，函数A内部会有一个属性，该属性指向一个对象（名字叫原型对象），而这个对象里面默认有一个构造函数，这个构造函数指向我们最初新建的函数A。然后，我们还可以在原型对象中添加属性和方法

//①默认情况下，构造函数是空的

function Person（）{//构造函数首字母大写

}

//②添加属性和方法

Person.prototype.name="dp";
Person.prototype.doSomething=function(）{
    alert(this.name);
};

//③定义好构造函数和其他属性方法之后，就可以创建实例了

var person1=new Person();
var person2=new Person();

5.2、面向对象class继承

class关键字是在ES6引入的

1、添加方法

//给student添加一个方法 
//1、先定义一个类、属性、方法
class student{
    constructor(name){
        this.name = name;
    }

    hello(){
        alert('hello');
    }
}
//使用方法
var person = new student('小明');
person.hello();

2、继承

class student{
    constructor(name){
        this.name = name;
    }

    hello(){
        alert('hello');
    }
}
class xiaoStudent extends student{
    constructor(name,grade){
        super(name);
        this.grade = grade;
    }
    mygrade(){
        alert('我是一个小学生')
    }
}
//使用
var xiaoStudent = new xiaoStudent("xiaohong",1);

本质：查看对象原型

原型链

6、操作BOM对象（重点）

浏览器介绍

JavaScript和浏览器关系？
JavaScript诞生就是为了能够让他在浏览器中运行！

BOM：浏览器对象模型

• IE6~11
• chrome
• Safari
• Firefox
• opera

window
window代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
258 
window.innerwidth
919
window.outerHeight
994
window.outerwidth
919
//大家可以调整浏览器窗口试试

Navigator
Navigator，封装了浏览器的信息

navigator . appName
"Netscape"
navigator . appVersion
"5.0 (windows NT 10.0; WOw64) Applewebkit/537.36 (KHTML， like Gecko)
Chrome/63.0.3239.132 Safari/537.36"
navigator . userAgent
"Mozi11a/5.0 (Windows NT 10. 0; WOw64) ApplewebKit/537.36 (KHTML， like :
Gecko) Chrome/63.0. 3239.132 Safari/537.36"
navigator. platform
"Win32"

大对数我们不会使用navigator对象，因为会被认为修改
不建议使用这些属性来判断和编写代码

screen
代表屏幕尺寸

screen.width
1920
screen.Height
1080

lacation
代表当前页面的URL信息

location属性：

• 主机：host
• 当前指向的位置：href
• 协议:protocol
• 重新加载的方法：f reload() //location.reload()刷新网页
  (设置新的地址:location.assign(‘想要跳转的地址’))

document
document代表当前的页面，HTML DOM文档树

//获取具体的文档树节点：
<d1 id="app">
    <dt> Java</dt>
    <dd> JavaSE</dd>
    <dd> JavaEE</dd>
</d1>
<script>
    var d] = document. getElementById(' app ');
</script>

//获取cookie
document.cookie

//劫持cookie原理：把一段能劫持cookie的js代码放在网站上 一点开就能把你的cookie拿了
<script src='劫持cookie'></script>
<!-- 获取你的cookie上传到他的服务器 -->
//服务器端可以设置cookie为httpOnly

history
history代表浏览器的历史记录

history.back() //后退
history.forward() //前进

7、操作DOM对象(重点)

核心

浏览器网页就是一个Dom树形结构(与div包围的标签差不多)

• 更新dom节点
• 遍历dom节点
• 删除dom节点
• 添加dom节点
  要操作一个dom节点，就必须先获得这个dom节点

7.1、获得dom节点

<div>
    <h1>标题一</h1>
    <p id='p1'>p1</p>
    <p class='p2'>p2</p>
</div>
<script>
//对应css选择器
var h1 = document.getElementByTagName('h1'); //这里就是获取到了这个dom节点
var p1 = document.getElementByID('p1');
var p2 = document.getElementByclassName('p1');
var father = document.getElementByID('father');

var childrens = father.children;// 获取父节点下的所有子节点
var childrens = father.children[index]; //获取其中一个节点
//father.firstchild 获取父节点的第一个子节点
//father.lostchild 获取父节点的最后一个子节点
</script>

这是原生代码，之后都用jQuery

7.2、更新节点

<div id="id1">
    
</div>

<script>
    var id1 = document.getElementByID('id1')
</script>

id1.innerText = '123' //innerText方法修改文本内容  
id1.innerHTML = '<strong>123</strong>' //innerHTML解析HTML超文本的 可以修改id的样式
id1.style.color = 'red' //style.什么：style方法修改css样式。即可以在js里操作修改样式
id1.style.padding = '2em' //属性使用字符串包裹

7.3、删除节点

删除节点的步骤： 先获取父节点，通过父节点删除自己

<div>
    <h1>标题一</h1>
    <p id='p1'>p1</p>
    <p class='p2'>p2</p>
</div>
<script>
    var self = document.getElementByID('p1');
    var father = p1.parentElement; //找到p1的父节点
    father.removechild(self) //通过父节点使用removechild删掉自己（只有标记为id选择器的节点才可以删除
</script>

注意：删除多个节点是，children是时刻变化的，不能直接father.removechild(father.children[0])这样从第一个索引开始删

7.4、插入节点

我们获得了某个dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个dom节点以及存在元素了，就不能这么干了，因为会产生覆盖，这个时候就使用追加节点的方法：

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>
    var js = document.getElementByID('js'); //获取想要加入的节点
    var list = document.getElementByID('list'); //获取想要加入的父节点
    list.appendchild(js); //在list节点下追加子节点 
</script>

7.5、在js中创建一个新的节点追加

<script>
    //第一个方法：通过js创建一个新节点
    var new = document.creatElement('p'); //创建一个p标签
    new.id = 'new';
    new.innerText = 'hello'; //在这个标签上输入文本
    list.appendchild(new); //在父节点下加进去

    //用第二种方法创建一个有自己属性的标签节点
    var myScript = document.creatElement('script');//创建一个script标签节点
    myScript.setAttribute('type','text/javascript'); /*setAttribute方法加入属性和属性值。第一个参数为属性名，第二个参数为属性值。生成效果为<script type='text/javascript'></sript>*/

    //可以创建一个style标签
    var myStyle= document.createElement('style'); //创建了一个 空style标签
    myStyle.setAttribute('type', 'text/css');
    myStyle.innerHTML = 'body{background-color: chartreuse;}'; //设置标签内容
    document.getElementsByTagName( 'head' )[0]. appendChild(myStyle) //在父节点追加这个style标签

</script>

7.6、在前面插入节点：insertBefore

var ee = document. getElementById('ee');
var js = document . getElementById('js');
var list = document . getElementById( 'list');
//要包含的节点. insertBefore(newNode, targetNode)
list. insertBefore(js,ee); //在list节点中（list是父节点），在ee节点前加入目标节点js

8、操作表单（验证）

表单 form

• 文本框
• 下拉框
• 单选框
• 多选框
• 隐藏框
• 密码框 passwd

8.1、获取表单信息

<body>
<form action='#' method="post">
    //文本框
    <p>
    <span>用户名：</span>
    <input type="text" id="username">
    </p>

    //单选框
    <p>
    <span>性别</span>
    <input type="radio" name="sex" value="man" id="boy">男
    <input type="radio" name="sex" value="women" id="girl">女

    </p>
</form>
</body>

<script>
    var input_text = document.getElementById('username';)
    //得到文本框的值
    input_text.value
    //修改文本框的值
    input_text.value='123'

    var boy_radio = document.getElementById('boy';)
    var girl_radio = document.getElementById('girl')
    //对于单选框、多选课等固定的value，boy_radio.value只能去到当前的值  
    boy_radio.checked; //看返回的结果，是否为true，如果为true则被选中
    boy_radio.checked=true; //赋值



</script>

8.2、提交表单，MD5加密

文本框的密码在控制台上加密，即后台的密码是如何加密的？

<head>
    <!-- 首先要导入MD5这个工具包 -->
    <script src="https://cdn . bootcss . com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
    <!-- action属性是提交完表单后调整的网页 -->
    <form action="#" method="post">
    <p>
        <span>用户名: </span> <input type="text" id="username" name="username">
    </p>
    <P>
        <span>密码: </span> <input type="password" id="password" name="password">
    </p>

<!--绑定事件onclick被点击。按钮提交事件aaa()--> .
    <button type="submit" onclick="aaa()">提交</button>
</form>
</body>
<script>
    function aaa() {
        var uname = document.getElementById( 'username ' );
        var pwd = document.getElementById('password' );
        console.1og(uname.value);
        //MD5算法把pwd变成乱码，用这个方法会在前端把密码加长 用户体验感不好
        pwd.value = md5(pwd.value);
        console.1og(pwd.value);
    }

</script>

表单提交，md5加密优化版：

<!-- 使用form提交事件aaa()
    οnsubmit=绑定一个检测的函数，返回true或false
    将这个结果返回给表单，使用onsubmit接收
    οnsubmit="return aaa()"
 -->
 <form action="https ://www. baidu. com/" method="post" onsubmit="return aaa()">
    <P>
        <span>用户名: </span> <input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码: </span> <input type="password" id=" input - password" >
    </p>
    <input type= "hidden" id="md5-password" name=" password" >
    </form>
<script>
    function aaa() {
        alert(1);
        var uname = document.getElementById( 'username' );
        var pwd = document.getElementById(" input-password" );
        //通过隐藏去提交
        var md5pwd = document.getElementById('md5-password' );
        md5pwd.value = md5(pwd.value);
        //可以校验判断表中内容，true就是通过提交，false, 阻止提交
        return true;
        }
</script>

9、jQuery

使用时导入包或者jQuery的cdn网址

jq使用的公式：$(selector).action() //这个selector选择器就是css的选择器.action是事件

9.1、选择器

原生的js选择器的种类有：

• 标签选择器：document.getElementByTagName()
• id选择器： document.getElementByID()
• 类选择器： document.getElementByClassName()

jq选择器有（css中的选择器他全部都能用）：

• 标签选择器：$(‘p’).click();
• id选择器：$(’#id名’).click();
• class选择器：$(’.class名’).click();
• …查看文档看更多

例子：

<a href="" id="test_jquery">点我</a>
<script>
    <!-- 在这个a标签中添加一个单击事件 -->
    // 使用js语法
    var id = document.getElementById('test_jquery')
    id.click(function(){
         alert('jQuery');
    })
    // 使用jq语法
    $('#test_jquery').click(function(){
        alert('jQuery');
    })
</script>

9.2、事件

有鼠标事件、键盘事件、其他事件

例子：

<!-- 要求：获取鼠标当前的一个坐标 -->
mouse:<span id="mouseMove"></span>
<div id="divMove">
    在这里移动鼠标试试
</div>
<script>
    // 当前网页元素加载完毕之后，响应事件
    // $(document).ready(function(){ //document默认是文档，ready默认是加载完
    // })
    // 上面这行的简写
    $(function(){
        $('#divMove').mousemove(function(e){ //获取了divMove的鼠标移动的坐标
            $('#mouseMove').text('x:'+e.pageX+'Y:'+e.pageY) //在mouseMove这个span里显示鼠标移动的坐标

        })
    });
</script>

9.3、操作DOM事件

1、节点文本操作

<ul id="test_ul">
    <li class="js">JavaScript</li>
    <li name="python">Python</li>
</ul>

<script>
    //拿到这个标签的文本，
    $('#test_ul li[name=python]').text();
    //修改这个标签的文本
    $('#test_ul li[name=python]').text('123');
    //修改样式
    $('#test_ul').html();
</script>

2、css的操作

<script>
     $('#test_ul').css("color","red"); //使用键值对来表示属性和属性值
</script>

3、元素的显示和消失：本质是display：none

$('#test_ul').show();
$('#test_ul').hide();
ouse:<span id="mouseMove"></span>
<div id="divMove">
    在这里移动鼠标试试
</div>
<script>
    // 当前网页元素加载完毕之后，响应事件
    // $(document).ready(function(){ //document默认是文档，ready默认是加载完
    // })
    // 上面这行的简写
    $(function(){
        $('#divMove').mousemove(function(e){ //获取了divMove的鼠标移动的坐标
            $('#mouseMove').text('x:'+e.pageX+'Y:'+e.pageY) //在mouseMove这个span里显示鼠标移动的坐标

        })
    });
</script>

9.3、操作DOM事件

1、节点文本操作

<ul id="test_ul">
    <li class="js">JavaScript</li>
    <li name="python">Python</li>
</ul>

<script>
    //拿到这个标签的文本，
    $('#test_ul li[name=python]').text();
    //修改这个标签的文本
    $('#test_ul li[name=python]').text('123');
    //修改样式
    $('#test_ul').html();
</script>

2、css的操作

<script>
     $('#test_ul').css("color","red"); //使用键值对来表示属性和属性值
</script>

3、元素的显示和消失：本质是display：none

$('#test_ul').show();
$('#test_ul').hide();