Java后端程序员学习前端之JavaScript

1.什么是JavaScript

1.1.概述

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

1.2.历史

JavaScript的起源故事-CSDN博客

2.快速入门

2.1.引入JavaScript

1.内部标签

    <script>
       //.......
    </script> -->

2.外部引入

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

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 在script标签中写，JavaScript代码
    <script>
        alert("hello world");
    </script> -->

    <!-- 外部引入 -->
    <!-- 注意：script标签必须成对出现 -->
    <script src="js/rm.js"></script>
</head>
<body>  
    
    <!-- 这里也可以存放 -->
</body>
</html>

2.2.基本语法入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- JavaScript严格区分大小写 -->
    <script>
        // 1.定义变量 变量类型 变量名 = 变量值
        var score = 71;

        // 2.条件控制
        if(score>60 && score<70){
            alert("60-70")
        }else if(score>70 && score<80){
            alert("70-80")
        }else{
            alert("other")
        }

        // console.log(score) 在浏览器控制台打印变量 System.out.println();
    </script>
</head>
<body>
    
</body>
</html>

浏览器必备调试须知：

2.3.数据类型

数值，文本，图形，音频，视频.
number
js不区分小数和整数，Number

字符串

'abc' "abc"

布尔值

true false

逻辑运算

比较运算符！！！重要

这是一个JS的缺陷，坚持不要使用==比较

须知:

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

浮点数问题

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

null 和 undefined

null 空
undefined 未定义

数组

Java的数值必须是相同类型的对象~,JS中不需要这样!

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

对象

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

取对象的值

2.4严格检查模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
    前提：ide需要设置ES6语法
    'use strict'; 严格检查模式，预防JavaScript的随意性导致产生一些问题
    必须卸载JavaScript的第一行！
    局部变量建议都使用let 去定义
    -->
    <script>
        'use strict'
        // 全局变量
        let i = 1;
        // ES6 let
    </script>
</body>
</html>

3.数据类型

3.1.字符串

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

3、多行字符串编写

4.模板字符串

5.字符串长度

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

7.大小写转换

8.substring

3.2.数组

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

1.长度

注意:加入给 arr.length 赋值，数组大小就会发生变化~，如果赋值过小，元素就会丢失

2、indexOf，通过元素获得下标索引

字符串的“1"和数字 1是不同的

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

4、push()，pop()尾部

5、unshift(),shift()头部

6、排序 sort()

7、元素反转 reverse()

8、concat（）

注意:concat()并没有修改数组，只是会返回一个新的数组

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

10、多维数组

数组:存储数据(如何存，如和取，方法都可以自己实现!)

3.3.对象

若干个键值对

Js中对象， {..} 表示一个对象,键值对描述属性 xxxx:xxxx，多个属性之间使用逗号隔开，最后一个属性不加逗号!

JavaScript中的所有的键都是字符串，值是任意对象!
1、对象赋值

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

3、动态的删减属性，通过 delete 删除对象的属性

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

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

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

3.4.流程控制

if判断

while循环，避免程序死循环

for循环

forEach循环

5.1引入

for...in

3.5.Map和Set

ES6的新特性

Map：

Set:无序不重复的集合

3.6.iterator

遍历数组

遍历map

遍历set

4.函数

4.1.定义函数

定义方式一、

绝对值函数

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

如果没有执行 return ，函数执行完也会返回结果，结果就是 undefined

定义方式二、

function(x){…}这是一个匿名函数。但是可以把结果赋值给 abs ，通过abs 就可以调用函数!
方式一和方式二等价!

参数问题:javaScript 可以传任意个参数，也可以不传递参数~

参数进来是否存在的问题?
假设不存在参数，如果规避?

arguments

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

问题: arguments 包含所有的参数，我们有时候想使用多余的参数来进行附加操作。需要排除已有参数~

rest

以前：

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

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

4.2.变量的作用域

在javascript中，var 定义变量实际是有作用域的。

假设在函数体中声明，则在函数体外不可以使用~(非要想实现的话，后面可以研究一下闭包）

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

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

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

假设在JavaScript 中函数査找变量从自身函数开始~，由“内”向“外"查找,假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。

提升变量的作用域

结果:xundefined
说明;js 执行引擎，自动提升了y的声明，但是不会提升变量y的赋值"

这个是在JavaScript建立之初就存在的特性。养成规范: 所有的变量定义都放在函数的头部，不要乱放，便于代码维护;

全局函数

全局对象 window

alert() 这个函数本身也是一个window变量;

Javascript 实际上只有一个全局作用域，任何变量(函数也可以视为变量)，假设没有在函数作用

范围内找到，就会向外查找，如果在全局作用域都没有找到，报错RefrenceError

规范

由于我们所有的全局变量都会绑定到我们的 window 上。如果不同的is 文件，使用了相同的全局变量，冲突~>如果能够减少冲突?

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

局部作用域 let

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

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

常量const

在ES6 之前，怎么定义常量:只有用全部大写字母命名的变量就是常量;建议不要修改这样的值

在ES6 引入了常量关键字const

4.3.方法

定义方法

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

        var zhangrun = {
            name : "张润",
            birth : 2000,
            // 方法
            age : function(){
                // 今年 - 出生的年
                var now = new Date().getFullYear();
                return now - this.birth
            }

            // 属性
            zhangrun.name
        }
            // 方法，一定要带（）
           zhangrun.age()

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

    <script>
        function getAge() {
            // 今年 - 出生的年
            var now = new Date().getFullYear();
            return now - this.birth
        }

        var zhangrun = {
            name: "张润",
            birth: 2000,
            // 方法
            age: getAge
        }

        // zhangrun.age() ok
        // getAge() NAN
    </script>

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

apply

在js 中可以控制 this 指向!

        function getAge() {
            // 今年 - 出生的年
            var now = new Date().getFullYear();
            return now - this.birth
        }

        var zhangrun = {
            name: "张润",
            birth: 2000,
            // 方法
            age: getAge
        }

        // zhangrun.age() ok
        // getAge() no

        getAge.apply(zhangrun , [])

5.内部对象

标准对象

5.1.Date

基本使用

        var now = new Date(); //当前时间 年月日 时分秒
        now.getFullYear(); // 年
        now.getMonth(); // 月
        now.getDate(); // 日
        now.getDay(); // 星期几
        now.getHours(); // 时
        now.getMinutes(); // 分
        now.getSeconds(); // 秒
        now.getTime(); // 时间戳 全世界统一 1970 1.1 00：00：00
        console.log(new Date(now.getTime())) // 时间戳转为时间

转换

5.2.JSON

json是什么

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

JSON(javaScript Object Notation,js 对象简谱) 是一种轻量级的数据交换格式。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率

在]avaScript 一切皆为对象、任何js 支持的类型都可以用JSON来表示;number，string...

格式:

对象都用 {}
数组都用 []
所有的键值对都是用 key:value

JSON字符串和JS 对象的转化

        var user = {
            name:"zhangrun",
            age : 20,
            gender : "女"
        }

        // 对象转化为JSON字符串
        var jsonUser = JSON.stringify(user)

        // json 字符串转化为对象 参数为json字符串
        var obj = JSON.parse(jsonUser)

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

5.3.Ajax

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

6.面向对象编程

6.1.什么是面向对象

javascript、Java、c#。。。面向对象;javascript有些区别!

类:模板
·对象:具体的实例

在JavaScript这个需要大家换一下思维方式!
原型:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
    <script>
        var Student = {
            name : "zhangrun",
            age: 20,
            run : function(){
                console.log(this.name + ".....run")
            }
        }

        var zhangrun = {
            name : "张润"
        }

        // 张润的原型是Student
        zhangrun.__proto__ = Student
    </script>
</head>
<body>
    
</body>
</html>

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

        // 定义一个学生类
        class Student{
            constructor(name){
                this.name = name
            }

            hello(){
                alert("hello")
            }
        }

        var zhangrun = new Student("zhangrun")
        zhangrun.hello()
        zhangrun.name

2、继承

        // 定义一个学生类
        class Student{
            constructor(name){
                this.name = name
            }

            hello(){
                alert("hello")
            }
        }

        class pupil extends Student{
            constructor(name,grade){
                super(name)
                this.grade = grade
            }

            myGrade(){
                alert("我是一名小学生")
            }
        }

        var zhangrun = new Student("zhangrun")
        var xiaonai = new pupil("xiaonai",1)

7、操作BOM对象(重点)

浏览器介绍
JavaScript 和浏览器关系?
JavaScript 诞生就是为了能够让他在浏览器中运行!
BOM:浏览器对象模型

lE 6~11
Chrome
Safari
FireFox

三方

QQ浏览器
360浏览器

window

window 代表浏览器窗口

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

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

screen
代表屏幕尺寸

location(重要)
location 代表当前页面的URL信息

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

获取具体的文档树节点

获取cookie

劫持cookie原理

服务器端可以设置 cookie:httpOnly

history

history代表浏览器的历史记录

8、操作DOM对象(重点)

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

更新:更新Dom节点
遍历dom节点:得到Dom节点
删除:删除一个Dom节点
添加:添加一个新的节点

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

获得dom节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        // 对应css选择器
        var h1 = document.getElementsByTagName("h1");
        var p1 = document.getElementById("p1");
        var p2 = document.getElementsByClassName("p2");
        var father = document.getElementById("father");

        var childrends = father.children; // 获得父节点下的所有子节点
        // father.firstChild
        // father.lastChild
    </script>
</head>
<body>
    <div id="father">
        <h1>标题一</h1>
        <p id="p1">p1</p>
        <p class="p2">p2</p>
    </div>
</body>
</html>

这是原生代码，之后我们尽量都是用jQuery();

更新节点

id1.innerText='456‘修改文本的值
id1.innerHTML='<strong>123</strong>'可以解析HTML文本标签

操作js

删除节点

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

注意: 删除多个节点的时候，children 是在时刻变化的，删除节点的时候一定要注意!

插入节点

我们获得了某个Dom节点，假设这个dom节点是空的，我们通过innerHTML 就可以增加一个元素了，但是这个DOM 节点已经存在元素了，我们就不能这么干了!会产生覆盖
追加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


</head>
<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>
</html>

效果