JavaScript最新教程通俗易懂

Posted 2022-04-09 COCO_PEAK_NOODLE

1、什么是javascript？

1.1 概述

javaScript是世界上最流行的脚本语言
java、JavaScript
10天~
一个合格的后端人员，必须要精通javaScript

1.2历史

ECMAScript它可以理解为是JavaScript的一个标准
最新版本已经到6版本了
但是大部分浏览器还只停留在支持es5上。
开发环境。。。线上环境，版本不一致

关键字、变量、流程控制、对象、数组、结构

2、快速入门

2.1、引入javaScript

1、内部标签

<script>
 //
</script>

2、外部引入
abs.js

<script src="">
 //
</script>

测试代码

    <!--script标签内，写Javascript代码-->
<!--    <script>-->
<!--        alert('hello,world');-->
<!--    </script>-->

    <!--外部引入-->
    <!--注意；script标签必须成对出现-->
    <script src="js/qj.js"></script>

    <!--不用显示定义type, 也默认就是javascript-->
    <script type="text/javascript">

    </script>

2.2、基本语法入门

   <!-- javaScript严格区分大小写-->
    <script>

        //1.定义变量、变量类型、变量名 = 变量值
        var num = 1;
        var name = "qinjiang";
        alert(num);

        //2. 条件控制
        if(num>1)
        
            alert("true");
        
        else 
            alert("false")
        

        /*
         */

    </script>

浏览器必备调试技巧：
Element
Console
Source
Network
Application

2.3、数据类型

数值、文本、图形、音频、视频。。。。

变量
不能以数据开头

var la

number
js不区分小数和整数

123
123.1
1.123e3
-99
NaN（not a number）
Infinity

字符串
‘abc’ “abc”

布尔值
true false

逻辑运算

&& 两个都为真，结果为真
|| 一个为真，结果为真
！ 

比较运算符

=
== 类型不一样，值一样，也会判断为true
=== 绝对等于（类型一样，值一样，结果为true）

这是js的缺陷，坚持不用==取等

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

浮点数问题

console.log((1/3) === (1-2/3));

尽量避免使用浮点数运算

null和undefined

• null 空
• undefined未定义

数组
java中数组必须是相同的类型

var arr = [1,2,3,4,5,'hello',null,true];

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

在这里插入代码片

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

        var person = 
            name: "qinjiang",
            age: 3,
            tags: ['js','java','web','...']
        ;

取对象的值

3、数据类型

3.1、字符串

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

\\'
\\n
\\t
\\u4e2d
\\x41

3.多行字符串编写

var msg = 
     hello
     world
     xihao

4.模板字符串

        let name = "qinjiang";
        let age = 3;
        let msg = name;

5.字符串长度

console.log(student.length)

6.字符串的可变性，不可变性

7.大小写转换

console.log(student.toUpperCase())

8.console.log(student.indexOf(‘t’))
9.console.log(student.substr(0,5))

3.2、数组

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

var arr = [1,2,3,4,5,6];//通过下标取值和赋值

1、长度

arr.length

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

arr.indexOf(2)

字符串的“1”和数字1是不同的
3、slice() 截取Array的一部分，返回一个新数组
4、push和pop

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

5、unshift（）、shift（）头部

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

6、排序sort（）

arr.sort()

7、元素反转

arr.reverse()

8、返回拼接后的数组

arr.concat(7,8,9,10)

注意：concat()并没有修改数组，只是会发回一个新的数组
9、连接符join
打印拼接数组，使用特定的字符串连接

arr.join("-")
'1-2-3-4-5'

10、多维数组

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

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

3.3、对象

若干个键值对

        var person = 
            name: "kuangshen",
            age: 3,
            email: "[e-mail]",
            score: 0
        

js中的对象，…表示一个对象，键值对描述属性
XXXX：XXXX，多个属性之间使用逗号隔开，最后一个属性不加逗号
JavaScript中的所有的键都是字符串，值是任意对象！
1、对象赋值

在这里插入代码片

2、使用一个不存在的对象属性，不会报错！undefined

在这里插入代码片

3、动态的删减属性

delete person.age

4、动态的添加

person.haha = "afa";

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

'age' in person
false
'toString' in person
true

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

person.hasOwnProperty('haha')
true

3.4、流程控制

if判断

在这里插入代码片

while循环，避免程序死循环

在这里插入代码片

for循环

在这里插入代码片

数组循环

        age.forEach(
            function (value)
            
            console.log(value);
            
        )

        var age = [a,2,3,6,34,4,4,4,35];

        for(var num in age)
        
            console.log(num);
        

3.5、Map和Set

ES6的新特性~
Map

        var map = new Map([['tom',100],['jack',90],['haha',100]]);
        var name = map.get('tom'); //通过key获得value
        map.set('admin',120);
        console.log(name);

Set：无序不重复的集合

set.add(2);
set.delete(1);
console.log(set.has(3))

3.6、iterator

ES6新特性
使用iterator来遍历迭代我们的Map，Set！
遍历map、Set

        for(let x of map)
        
            console.log(x);
        

4、函数

方法：对象（属性，方法）
函数：

4.1、定义函数

public 返回值类型 方法名（）
      return 返回值

绝对值函数

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

一但执行到return代表函数结束，返回结果！
如果没有执行return，函数执行完也会返回结果，结果就是undefined

定义方式二

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

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

方式一和方式二等价

abs(10)
abs(-10)

参数问题：javaScript可以传任意个参数，也可以不传递参数
参数进来是否存在问题？假设不存在参数，如何规避

       function abs(x)
            if(typeof x !== 'number')
            
                throw 'Not a number';
            
            if(x>=0)
                return x;
            else
            
                return -x;
            
        

arguments是一个JS免费赠送的关键字
代表传递进来的所有参数，是一个数组

        function abs(x)
            for(var i=0; i<arguments.length; i++)
            
                console.log(arguments[i]);
            
            if(typeof x !== 'number')
            
                throw 'Not a number';
            
            if(x>=0)
                return x;
            else
            
                return -x;
            
        

问题：arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作。需要排除已有的参数~
rest
ES6引入的新特性，获取除了已经定义的参数之外的所有参数

         function aaa(a,b,...rest)
         
             console.log(rest);
         

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

4.2、变量的作用域

在javascript中，var定义变量实际是有作用域的
假设在函数体中申明，则在函数体外不可使用，（非要想实现的话，后面可以研究一下闭包）

        function ar()
            var x = 1;
            x = x + 2;
        

内部函数可以访问外部函数的成员，反之则不行

        function ar()
            var x = 1;
            x = x + 2;
            function ar()
                var y = x + 1;
            
            var z = y + 1; //wrong
        

假设，内部函数变量和外部函数的变量，重名！

        function ar()
            var x = 1;
            x = x + 2;
            function ar()
                var x = 1;
                var y = x + 1;
            
            var z = x + 1;
        

由内向外查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数

提升变量的作用域

        function qj2()
        
            var x = "x" + y;
            console.log(x);
            var y = 'y';
        

结果：xundefined
说明：js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值
这个是在javaScript建立之初就存在的特性。养成规范：多有的变量定义都放在函数的头部，不要乱放，便于代码维护；

全局函数

全局对象window

        alert(x);
        alert(window.x);
        window.alert(x);

alert()这个函数本身也是一个window的函数

        var old_alert = window.alert;
        old_alert(123)
        window.alert = function ()
        ;
        //发现alert（）失效了
        window.alert(123);
        window.alert = old_alert;
        alert(456);

javascript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错RefrenceError

规范
由于我们所有的全局变量都会绑定到我们的window上，如果不同的js文件，使用了相同的全局变量，冲突-如何能够减少冲突？

        KuangApp.name = "aaa";
        KuangApp.Add = function (a,b)
            return a+b;
        

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

局部作用域let

        function aaa()
        
            for (var i = 0; i < 100; i++) 
               console.log(i);
            
            console.log(i+1);
        

ES6 let关键字，解决局部作用域冲突问题！

        function aaa()
        
            for (let i = 0; i < 100; i++) 
               console.log(i);
            
            console.log(i+1);
        

建议大家都使用let去定义局部作用域的变量。

常量const
在ES6之前，怎么定义常量呢？
只有用全部大写字母命名常量

var PI = 3.14

在ES6引入了常量关键字const

         const PI = '3.14';
         console.log(PI);
         PI = '123';//Uncaught TypeError: Assignment to constant variable.

4.3、方法

方法就是把函数放在对象的里面，对象只有2个东西；属性和方法

        var kuangshen = 
            name: 'qinjiang',
            birth: 2000,
            age: function ()
                var now = new Date().getFullYear();
                return now - this.birth;
            

        

this代表什么？拆开上面的代码看看~

        function getAge()
            var now = new Date().getFullYear();
            return now - this.birth;
        

        var kuangshen = 
            name: 'qinjiang',
            birth: 2000,
            age: getAge

        

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

apply

在js中可以控制this指向！

getAge.apply(kuangshen,[]);

5、内部对象

标准对象

typeof 123
'number'
typeof true
'boolean'
typeof 'sss'
'string'
typeof NaN
'number'
typeof []
'object'
typeof 
'object'
typeof Math.abs
'function'
typeof undefined
'undefined'

5.1、Date

基本使用

        var now = new Date();
        now.getFullYear();
        now.getMonth();
        now.getDate();
        now.getDay();
        now.getHours();
        now.getMinutes();
        now.getSeconds();
        now.getTime(); //时间戳 全世界统一
        console.log(new Date())

转换

now = new Date(1649165864954)
Tue Apr 05 2022 21:37:44 GMT+0800 (China Standard Time)
now.toLocaleString()
'4/5/2022, 9:37:44 PM'
now.toGMTString()
'Tue, 05 Apr 2022 13:37:44 GMT'

5.2、JSON

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
在javaScript一切皆为对象，任何js支持的类型都可以用JSON来表示；
格式：

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

JSON字符串和JS对象之间的转换

        var user = 
            name: "qinjiang",
            age: 3,
            sex: 16
        

        //对象转换为JSON
        var json_user = JSON.stringify(user);

        //json 字符串转化为对象
        var obj = JSON.parse('"name":"qinjiang","age":3,"sex":16');
        

很多人搞不清楚，JSON和JS对象的区别

var obj = a: 'hello';
var json = '"a": "hello"'

5.3、Ajax

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

6、面向对象编程

6.1、什么是面向对象

javascript、java、C#。。。。面向对象；javascript有些区别
类：模板
对象：具体的实例
在javaScript这个需要大家换一下思维方式
原型：

        var user = 
            name : "aaa",
            age : 3,
            run: function ()
                console.log(this.name + "run.....");
            

        

         var xiaoming = 
            name: "xiaoming"
         ;

         xiaoming.__proto__ = user;

class 继承

class关键字，是在ES6引入的
1、定义一个类，属性，方法

        class Student
            constructor(name)
                this.name = name;
            
            
            hello()
                alert('hello');
            

        
         var xiaoming = new Student("xiaoming");

2、继承

        class xiaoxuesheng extends Student
        
            constructor(name,grade) 
                super(name);
                this.grade = grade;
            
            myGrade()
                alert('我是一名小学生');
            
        
        var xiaohong = new xiaoxuesheng("xiaohong",1);

原型链
proto

7、操作BOM对象（重点）

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

BOM：浏览器对象模型

• IE 6~11
• Chrome
• Safari
• FireFox
• Opera

三方

• QQ浏览器
• 360浏览器

window

window代表浏览器窗口

window.innerHeight
568
window.innerWidth
272
window.outerHeight
688
window.outerWidth
1217

Navigator

Navigator封装了浏览器的信息

window.Navigator
ƒ Navigator()  [native code] 
navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (Khtml, like Gecko) Chrome/99.0.4844.84 Safari/537.36'
navigator.platform
'Win32'

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

screen

代表屏幕的尺寸

screen.height
864
screen.width
1536

location

location代表当前页面的URL信息

host: "localhost:63342"
href: "http://localhost:63342/JavaScript/lesson02/7.class%
protocol: "http:"
location.reload()
location.assign('https://www.baidu.com/')

document

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

   <dl id="app">
        <dt>Java</dt>
        <dd>JavaSE</dd>
        <dd>JavaEE</dd>
    </dl>

    <script>
       var dl = document.getElementById('app');
    </script>

获取cookie

document.cookie

劫持cookie原理
www.taobao.com

<script src="aa.js"><script>
//恶意人员，获取你的cookie上传到他的服务器

服务器端可以设置cookie：httpOnly

history

history.back()
undefined
history.forward()
undefined

8、操作DOM对象（重点）

DOM：文档对象模型

浏览器网页就是一个Dom树形结构

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

    var h1 = document.getElementsByName('h1');
    var p1 = document.getElementById('p1');
    var p2 = document.getElementsByClassName('p2');
    var father = document.getElementById('father');

    //获取父节点下的子节点
    var childrens = father.children;
    father.firstChild;
    father.lastChild;

这是原生代码，之后我们尽量都使用JQuery（）；

更新节点
操作文本

• id1.innerText = “aaaaaaaa” 修改文本的值；
• id1.innerHTML = “123” html可以解析HTML文本标签
  操作JS

id1.style.color = 'red'
'red'
id1.style.padding = '20em'
'20em'
id1.style.fontSize = '200Px'
'200Px'