JavaScript学习

1.初识JavaScript

1.1 概述

JavaScript是世界上最流行的一门脚本语言
作为一名合格的后端人员，必须要掌握JavaScript

1.2 历史

略

ECMAScirpt可以理解为JavaScript的一个标准，最新版本已经达到es6，但是大部分浏览器还是只支持es5代码上！
开发环境和线上环境版本不一致！

2.快速入门

2.1 引入JavaScript

1.内部标签

/*scpipt标签内，写JavaScript代码*/
    <script>
        alert('hello world');/script>

2.外部引入
xx.js，test.html

/*外部引入，注意：script标签必须承兑出现*/
    <script src="js/xx.js"></script>
    /*不用显示定义type，默认就是javascript*/
    <script type="text/javascript"></script>

2.2 基本语法入门

 //JavaScript严格区分大小写
    <script>
        // 1.定义变量 变量类型 变量名=变量值;
        var score=71;
        // 2.ti条件控制
        if(score>60&&score<70){
            alert('60-70');
        }else if(score>70&&score<80){
            alert('70-80');
        }else{
            alert('other');
        }
        //console.log(score)打印变量，在浏览器控制台打印变量！
    </script>

2.3 数据类型

数值，文本，图形，音频，视频
变量：

var a=1;

**number：**js不区分小数和整数 Number

Number：
123//整数
123.1//浮点数123.1
1.123e3 //科学计数法
-99 //负数
NaN // not a number
Infinity//无限大

字符串:

'abc' "abc" '\n'

布尔值:

true，false

逻辑运算:

&& || !

比较运算符:

= 
==等于(类型不一样，值一样也会判定为true，如1和"1") 
===绝对等于(类型一样且值一样)

这是一个JS缺陷，坚持不用==

• NaN===NaN //这个与所有的数据都不相等，包括自己
• 只能通过 isNaN(NaN)来判断这个数是否是NaN

浮点数问题：

console.log((1/3)===(1-2/3)) 
//这两个不相等，会有精度损失，可以用Math.abs()判断

尽量避免使用浮点数进行运算，存在精度问题

null和undefined：

• null空
• undefined 未定义

数组：
一系列相同类型的对象，JS中不需要这样，这与Java不同

  var arr=[1,2,3,4,5,'hello',null,true];
  new Array(1,12,3,4,4,5,'hello');

取数组下标：如果越界了就会undefined

对象：
对象是大括号，数组是中括号
每个属性之间使用逗号隔开，最后一个不用加逗号

//Java：Person person=new Person(1,2,3,4,5);
        var person={
            name:"czx",
            age:18,
            tags:['js','java','web',...]
        }

2.4 严格检查模式

<script>
        //'use strict' 代表严格检查模式，预防JavaScript的随意性导致产生的一些问题
        //局部变量建议都是用let去定义，'use strict'必须写在JavaScript的第一行
        'use strict'
        let i=1;
        //ES6中用 let
    </script>

---

3. 数据类型

3.1 字符串

1.正常字符串使用 单引号或者双引号包裹
2.注意转义字符 \

\'  \n   \t  \u4e2d(u#### Unicode字符)   \x41(ASCII字符) 

3.多行字符串编写

 var msg=`hello
        world
        你好哇
        你好`;

4.模板字符串

<script>
        'use strist'
        //tab键上方,ESC键下方 ``
        let name="czx";
        let age=18;
        let msg=`你好啊，${name}`//
    </script>

5.字符串长度

str.length

6.字符串的可变性，同样是不可变
7.大小写转换

//注意，这是方法，而不是属性
student.toUpperCase()
student.toLowerCase()

8.student.indexOf(“t”) ,获取t在字符串中的位置
9.substring

student.substring(1)//从第1个截取到最后一个字符串
student.substring(1,3)//包含第1个不包含第3个，[1,3)

3.2 数组

Array可以包含任意的数据类型

var arr=[1,2,3,4,5,6]

1.长度

arr.length

注意：加入给arr.length赋值，数组大小会发生变化，如果赋值过小，则元素就会丢失
2.indexOf，通过元素获得下表索引

arr.indexOf(2)
1

字符串的"1"和数字1是不同的
3.slice() 截取Array的一部分，返回一个新数组，类似于String中的substring
4.push,pop

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

5.unshift(),shift() 头部

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

6.排序 sort()

["B","C","A"]
arr.sort()
["A","B","C"]

7.元素反转

["A","B","C"]
arr.reverse()
["C","B","A"]

8.concat()

["A","B","C"]
arr.concat([1,2,3])
["A","B","C",1,2,3]
arr
["A","B","C"]

注意：这个方法并没有修改数组，只是会返回一个新的数组
9.连接符 join
打印拼接数组，使用特定的字符串连接

["A","B","C"]
arr.join('-')
"A-B-C"

10.多维数组

arr=[[1,2],[3,4],["5","6"]]
arr[1][1]
4

数组：存储数据（如何存，如何取，方法都可以自己实现）

3.3 对象

若干个键值对

var 对象名={
   属性名:属性值,
   属性名:属性值,
   属性名:属性值
}
//定义了一个person对象，有四个属性
var person={
    name:"czx",
    age:3,
    email:1589632@qq.com,
    score:0
}

JS中对象，{…}表示一个对象，键值对描述属性xxxx:xxxx，多个属性之间逗号隔开，最后一个属性不加逗号！
JS中所有的键都是字符串，值是任意对象
1.对象赋值

person.name="sss"
"sss"
person.name
"sss"

2.使用一个不存在的对象属性，不会报错，只会undefined
3.动态的删减属性，通过delete删除对象属性

delete person.name
true

4.动态的添加属性，直接给新的属性添加值即可

person.haha="haha"
"haha"
person

5.判断属性值是否在这个对象中！ xxx in xxx

'age' in person
true
//继承
'toString' in person
true

6.判断一个属性是否是这个对象自身拥有的 hasOwnProperty()

person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true

3.4 流程控制

if判断

if(){
}else{
}

while循环,避免程序死循环

while(){

}

do{
}while();

for循环

for(let i=0;i<100;i++){

}

数组循环，forEach循环

var age=[12,3,5,9,66,35,41,25,44];
//函数
age.forEach(function (value){
     console.log(value)
})

for…in

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

3.5 Map和Set（ES6新特性）

Map：

 'use strist'
        //ES6
        var map= new Map([['tom',100],['jack',90],['haha',80]]);
        var name= map.get('tom');//通过key获得value
        map.set('admin',123456);//新增或修改
        console.log(name);
        map.delete("tom");//删除

Set：无序不重复集合

var set=new Set([3,1,1,1,1]);//set可以去重
        set.add(2);//添加
        set.delete(1);//删除
        console.log(set.has(3))//查看数组是否包含3

3.6 iterator

ES6新特性：
遍历数组

//通过for of打印具体值/for in下标
 var arr=[3,4,5];
        for (var x of arr){
            console.log(x);
        }

遍历map

//通过for of打印具体值/for in下标
  var map= new Map([['tom',100],['jack',90],['haha',80]]);
        for (var x of map){
            console.log(x);
        }

遍历set

//通过for of打印具体值/for in下标
  var set= new Set([5,6,7]);
        for (var x of set){
            console.log(x);
        }

---

4.函数

4.1 定义函数

1.定义方式一
绝对值函数

function abs(x){
    if(x>=0){
    return x;
    }else{
    return -x;
    }
}

一旦执行到return代表函数结束，返回结果！
如果没有执行return，执行完也会返回结果，结果就是undefined
2.定义方式二

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

function(x){}这是一个匿名函数，但是可以把结果赋值给abs，通过abs就可以调用函数

调用函数

abs(10)
abs(-10)

参数问题：JavaScript可以传任意个参数，也可以不传递参数

arguments是一个JS免费赠送的关键字

arguments代表传递进来所有的参数是一个数组

var abs=function(x){
console.log("x--"+x);
for(var i=0;i<arguments.length;i++){
    console.log(arguments[i]);
}
if(x>=0){
    return x;
    }else{
    return -x;
    }
}

问题：arguments会包含所有的参数，若想使用多余参数进行附加操作，则需要排除已有的参数

rest

ES6引入的新特性，获取出了已经定义的参数之外的所有参数~ …rest

<script>
    function aaa(a,b,...rest) {
        console.log("a--",+a);
        console.log("b--",+b);
        console.log(rest);
    }
</script>

rest参数只能写在最后面，必须用…

4.2 变量的作用域

在JavaScript中，var定义的变量实际是有作用域的
变量在函数体声明，函数体外不可使用，除非使用闭包

function as(){
var x=1;
x=x+1
}
x=x+2;//错误，x未定义

如果两个函数使用相同变量名，只要在函数内部就不冲突

提升变量的作用域

function sj(){
    var x="x"+y;
    console.log(x);
    var y='y';
}

结果：x undefined
JS执行引擎，自动提升了y的声明，但不会提升y的赋值

全局函数

 <script>
        'use strict'
        //全局变量
        var x=1;
        function f() {
            console.log(x);
        }
        f();
        console.log(x);
    </script>

全局对象window

var x='xxx';
alert(x);
alert(window.x);//默认所有的全局变量都是自动绑在window下，也包括alert()
window.alert(window.x);

规范

由于全局变量都会绑定到window中，如果不同js文件使用了相同的全局变量，如何减少冲突？
1.设置唯一全局变量

//唯一全局变量
        var czxApp={}
        //定义全局变量
        czxApp.name="czx";
        czxApp.add=function (a,b) {
            return a+b;
        }

把自己代码全部放入自己定义的唯一空间名字中，降低全局命名冲突问题

局部作用域 let

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

ES6 let关键字，解决局部作用域冲突问题
建议使用let区定义局部作用域的变量

常量 const

ES6之前，只有用全部大写字母命名的常量才是常量；建议不要修改这样值
在ES6引入常量关键字

4.3 方法

//定义方法,方法就是把函数放在对象里面，对象只有两个东西：属性和方法
<script>
    var lalala={
        name:'czx',
        birth:2022,
        //方法
        age:function () {
            //今年-出生年
            var now=new Date().getFullYear();
            return now-this.birth;
        }
    }
    czx.name//属性
    lalala.age()//方法，一定要带()
</script>

this是无法指向的，默认指向调用它的那个对象

apply（在js中控制this的指向）

var xiaoming={
    name:'小明',
    birth:2000,
    age:getAge
};
getAge.apply(xiaoming,[]);//this指向了xiaoming参数为空

---

5.内部对象

5.1 Date对象

//基本使用
<script>
    var now=new Date();
    now.getFullYear();//年
    now.getMonth();//月 0-11
    now.getDate();//日
    now.getDay();//星期几
    now.getHours();//时
    now.getMinutes();//分
    now.getSeconds();//秒
    now.getTime();//时间戳  全世界统一，  1970 1.1 0：00到现在的毫秒数
    console.log(new Date(156646445456));//时间戳转为时间
</script>

转换

now.toLocaleString();//注意：调用是一个方法，不是一个属性！
now.toGMTString()

5.2 JSON对象

JSON是轻量级的数据交换格式
在JavaScript一些皆为对象，任何js支持的类型都可以用JSON来表示

• 对象都用()
• 数组都用[]
• 所有的键值对都是用key:value

JSON和JS对象的转换

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

JSON与JS对象的区别：

var obj={a:'hello',b:'hellob'};
var json='{"a":'hello',"b":'hellob'}'

5.3 Ajax

原生的js写法，xhr异步请求
jQuery封装好的方法 $("#name").ajax("")
axios请求

---

6.面向对象编程

JavaScript与其他语言有区别！
类：模板
对象：具体的实例
在JavaScript中需要转换一下思维！
原型：

<script>
    var user={
         name:"czx",
         age:3,
         run:function () {
             console.log(this.name+" run....");
         }
     };
    var xiaoming={
        name:"xiaoming"
    };

    //原型对象，小明的原型 是user
    xiaoming.__proto__=user;
</script>

class继承

在ES6引入的
1.定义一个类，属性和方法

//ES6以后
    class Student{
        constructor(name) {
            this.name=name;
        }
        hello(){
            alert('hello');
        }
    }
   var xiaoming=new Student("xiaoming");
   xiaoming.hello();

2.继承

<script>
    //ES6以后
    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 xiaoming=new xiaoStudent("xiaoming",1);
   
</script>

本质：查看对象原型

原型链

__proto__:

7.操作BOM对象（重点）

JavaScript和浏览器关系：
JavaScript诞生就是为了在浏览器中运行
BOM：浏览器对象模型

window

window代表浏览器窗口

Navigator

Navigator封装了浏览器信息，大多数时候不会使用，因为会被人为修改！

screen(屏幕)

screen.width
screen.height

location（重要）

location代表当前页面的url信息

document

document代表当前的页面，HTML DOM文档树
可以获取具体的文档树节点
获取cookie

document.cookid

history(不建议使用)

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

8. 操作DOM对象（重点）

DOM:文档对象模型
核心：
浏览器网页就是一个DOM树形结构

• 更新：更新Dom结点
• 遍历Dom节点：得到Dom结点
• 删除：删除一个Dom结点
• 添加：添加一个Dom结点

要操作一个Dom节点，必须要先获得这个Dom节点
获得Dom节点

<script>
    //对应css选择器
    var h1= document.getElementsByTagName('h1');
    var p1= document.getElementById('p1');
    var p2= document.getElementsByClassName('p2');
    var father=document.getElementById('father');
    var children=father.children;//获取父节点下的所有子节点
    father.firstChild;
    father.lastChild;
</script>

原生代码

更新节点

<div id="id1"></div>
<script>
    var id1=document.getElementById('id1');
    id1.innerText='123';//修改文本的值
    id1.innerHTML='<strong>123</strong>';//解析HTML标签
    id1.style.color='yellow';//操作JS
    id1.style.fontSize='20px';
</script>

删除节点

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

<div id="father">
<h1>标题1</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
    var p1=document.getElementById('p1');
    var father=p1.parentElement;
    father.removeChild(p1);
    //删除是一个动态的过程
    father.removeChild(father.children[0])
     father.removeChild(father.children[1])
      father.removeChild(father.children[2])
</script>

注意：删除多个节点时，children是在时刻变化的

插入节点

获得Dom节点后，假设这个Dom节点是空的，我们可以通过innerHTML就可以增加一个元素，但是如果这个Dom节点已经存在元素了，就会被覆盖
追加

<body>
<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);//追加到后面
</script>
</body>

创建一个新的标签，实现插入

 var newP= document.createElement('p');
    newP.id='newP';
    newP.innerText="hello czx";
    list.appendChild(newP);

<script>
    var js= document.getElementById('js');
    var list=document.getElementById('list');
    
    var myScript=document.createElement('script');
    myScript.setAttribute('type','text/javascript');
    //可以创建一个style标签
    var myStyle=document.createElement('style');
    myStyle.setAttribute('type','text/css');
    myStyle.innerHTML='body{background-color:chartreuse;}';//设置标签内容
    document.getElementsByTagName('head')[0].appendChild(myStyle);
</script>

insert

var ee=document.getElementById('ee');
    var js=document.getElementById('js');
    var list=document.getElementById('list');
    //要包含的节点，insertBefore(newNode,targetNode)
    list.insertBefore(js,ee)

---

9.操作表单（验证）

form DOM树

表单：

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

表单的目的：提交信息，MD5加密

<body>
<form action="post">
    <span>用户名：</span><input type="text" id="username">
    <p>
        <!--多选框的值就是定义好的value-->
        <span>性别：</span>
        <input type="radio" name="gender" value="man" id="boy">男
        <input type="radio" name="gender" value="woman" id="girl">女
    </p>
</form>
<script>
    var i=document.getElementById('username');
    var boy=document.getElementById('boy');
    var girl=document.getElementById('girl');
    //得到输入框的值
    i.value;
    //修改输入框的值
    i.value='123';
    //对于单选框、多选框等等，用value只能取到当前的值
    boy.checked;//查看返回的结果是否为true，如果为true则被选中
    boy.checked=true;//赋值
</script>
</body>

提交表单

---

10. jQuery

JavaScript
jQuery库：里面存在大量的JavaScript函数

获取jQuery

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.0.min.js"></script>
</head>
<body>
<!--
公式：$(selector).action
-->
<a href="" id="test-jquery">点我</a>
<script>
    document.getElementById('test-jquery');
    //选择器就是css选择器
    $(#test-jquery).click()(function () {
        alert('hello,jquery');
    })
</script>
</body>

选择器

<script>
    //原生js，选择器少，麻烦不好记
    //标签
    document.getElementsByTagName();
    //id
    document.getElementById();
    //类
    document.getElementsByClassName();
    //jQuery,css中选择器全部都能用
    $('p').click();//标签选择器
    $('#id1').click();//id选择器
    $('.class1').click();//类选择器
</script>

要查文档工具站！

事件

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/jquery-3.6.0.min.js"></script>
    <style>
        #divMove{
            width:500px;
            height: 500px;
            border:1px solid red;
        }
    </style>
</head>
<body>
<!--要求：获取鼠标当前的一个坐标-->
mouse: <span id="mouseMove"></span>
<div id="divMove">
    在这里移动鼠标试试
</div>
<script>
    //当网页元素加载完毕后，响应事件
    $(function () {
        $('#divMove').mousemove(function (e) {
            $('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY);
        })
    });
</script>

</body>

操作DOM

 $('#test-ul li[name=python]').text();//获得值
  $('#test-ul li[name=python]').text('');//设置值
  $('#test-ul').html();//获得值html
  $('#test-ul').html('');//设置值html

元素的显示和隐藏：本质是display:none;

$('#test-ul li[name=python]').show();
$('#test-ul li[name=python]').hide();

小技巧

1.巩固JS（看jQuery源码和游戏源码）
2.巩固HTML 和css（扒网站，全部down下来，对应修改看效果）