• JS（JavaScript）

    提示：本文记录的语法是js相较于与java中不同的，一些类似的并没有提出。

    文章目录

    前言

    JavaScript（JS）是一种弱类型动态类型的语言，相对于Java、go语言来说，比较灵活，但是“灵活”这词，对于程序员来说并不是好事情，JS主要由ES（JS语法）、DOM（页面文档对象模型）、BOM（浏览器对象模型）三部分组成，今天主要对其进行介绍。

    一、JS语法

    JS语法有很多与Java是很相似的，但js是动态弱类型语言，java是静态强类型语言，本次主要记录其中一些不同的语法。

    1.书写格式

    （1）行内式
    将JS代码写到html中。

    <input type="button" value="按钮" onclick="alert('hello js')">

    • 1

    （2）内嵌式
    将代码写入带有script的标签中。

    <script> alert("hello js"); </scrip>

    • 1

    （3）外部式
    将代码写入.js文件中，再通过script标签的src引入，这种情况，script标签中不能写代码，写了也无效。

    <script src="hello.js"></script>

    • 1

    2.变量

    在JS中，变量都用let定义，以前是var。布尔变量可以与整数相加减。由于js是动态类型，所以它是比较灵活的，即使变量以及创建了，也可以改变它的类型。
    主要有以下几种类型：
    （1）number：数字类型，包括整数和小数。
    （2）boolean：布尔类型。
    （3）string：数字串。
    （4）undefined：表示未定义的值
    （5）null：表示空值。

    <script> 
	let a = 10;
	console.log(a);//将a的值打印到控制台
	let b = 'string';
	let c = true;
	a = "hello js";
	console.log(a);
	console.log(10+b);//10string
	var d = 07;//八进制数
	var e = 0xa;//十六进制数
	var f = 0b10;//二进制数
	var max = Number.MAX_VALUE;//整数的最大值
	var min = Number.MIN_VALUE;//整数的最小值
	//三种特殊类型的数字值
	console.log(max);//Infinity:无穷大
	console.log(min);//-Infinity
	console.log(b-10);//NAN:not a number
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    3.数组

    对于js来说，只有[]里是非负整数的时候，才把这个操作视为是操作下标；如果是其他类型的值，则视为自定义属性。
    （1）数组创建的方式

    let arr = new Array();
let a = [];
let b = new [];
let c = [10,"string",true,[1,2],[]];

    • 1
    • 2
    • 3
    • 4

    （2）数组的插入、替换、删除
    a.使用push、pop；
    b.使用splice.
    如下：

    let a = [];
//通过push进行赋值，pop弹出，类似于java中的栈
for(let i=0;i<10;i++) {
	a.push(i);
}
console.log(a.pop());
console.log(a.pop());

// 插入
a.splice(2,0,"hello");
console.log(a);
// 替换
a.splice(3,1,"hello");
console.log(a);
// 删除位置从4开始长度为3之间的元素
a.splice(4,3);
console.log(a);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    4.函数

    函数与java中的方法差不多，只不过java中的方法依赖对象，而这里的函数是可以单独使用的。
    （1）格式

    function 函数名(形参列表) {
	函数体
	return 返回值；//js的返回值并不需要定义函数返回类型
}
函数名(是参列表) //不考虑返回值
返回值 = 函数名(是参列表) //考虑返回值

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    代码如下：

           function hello() {
           console.log("fun1");
       }
       hello();
       function hello2(x,y) {
           console.log(x+y);
       }
       hello2(1,2);
       let a = function () {
           console.log("fun2");
       }
       a();

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    举例：求和函数

    <script>
	  //求和函数
      // function add(a,b,c,d,e,f) {
      //     a = a||0; //a为真a=a，否则a=0
      //     b = b||0;
      //     c = c||0;
      //     d = d||0;
      //     e = e||0;
      //     f = f||0;
      //     return a+b+c+d+e+f;
      // }
      
      //直接使用arguments接收参数
      function add() {
          let ret = 0;
          for(let i=0;i<arguments.length;i++) {
              ret += arguments[i];
          }
          return ret;
      }
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    5.对象

    包括若干属性和方法
    （1）创建方式
    使用{}创建：

    <script>
       let student = {
           name: 'aaa',
           age: 20,
           height: 180,

           sing: function() {
               console.log("啦啦啦");
           },

           play: function() {
               console.log("出去玩呀");
           },
       };
       console.log(student.name);
       console.log(student.age);
       student.sing();
       student.play();
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    （2）使用object创建：(与创建数组类似)

    <script>
	   let student = new Object();
	   student.name = 'aaa';
       student.age = 20;
       student.height = 180,
       student.sing =  function() {
           console.log("啦啦啦");
       }
       console.log(student.name);
       console.log(student.age);
       student.sing();
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    （3）使用构造函数创建：

    <script>
	   let student = {
		   name: 'aaa',
	       age: 20,
	       sing:  function() {
	           console.log("啦啦啦");
	       }
	   };
	   var obj = new student();
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    <script>
	function Student(name, age) {
		  this.name = name;
		  this.age = age;
		  this.sing = function () {
		    console.log(sound); // 别忘了作用域的链式访问规则
		 }
	}
	var student = new student('aaa',16,'啦啦啦');
	console.log(student);
	student.sing();
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    js对象与java对象区别

    （1）JavaScript没有“类”的概念，它的对象就是属性+方法，把一些共有属性提取出来。
    （2）JavaScript对象不区分“属性”和“方法”。
    （3）JavaScript对象没有public/private等访问控制机制。
    （4）JavaScript对象没有“继承”。
    （5）JavaScript没有“多态”。
    JavaScript本身就支持动态类型，在使用某个方法的时候并不需要对对象的类型作出明确区别。

    二、WebAPI

    WebAPI包括了DOM和BOM。
    API参考文档（通过MDN+API就可快速搜索）：https://developer.mozilla.org/zh-CN/docs/Web/API
    如下主要记录DOM的一些重用API：
    DOM（Document Object Model）提供了一系列函数，方便我们操作网页内容、网页样式、网页结构。
    DOM树，即一个页面的结构是一个树形结构，其一个页面就是一个文档（document）,页面上的所有标签成为元素（element），网页中的所有内容都可以成为节点（node）。

    1.操作元素

    （1）获取/修改元素内容

    querySelector： 同一类型的只能获取第一个结果；
    querySelectorAll： 可以获取全部的。
    代码如下（示例）：

    <body>
    <div>one</div>
    <div>one</div>
    <div>one</div>
    <div>one</div>
    <script>
        // 标签选择器
        // querySelector 同一类型的只能获取第一个结果
        // querySelectorAll 可以获取全部的
        let div = document.querySelector('div');
        let divs = document.querySelectorAll('div');
        console.log(div);
        console.log(divs);
        // 以对象形态打印
        console.dir(div);
    </script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    （2）获取/修改元素属性

    a.事件：

    <body>
    <div class="one" id="div-id">hello</div>
    <script>
        let div = document.querySelector('div');
        // 鼠标点击事件
        div.onclick = function() {
            console.log('按下鼠标');
        }
        div.onmousemove = function() {
            console.log('鼠标移动');
        }
        div.onmouseenter = function() {
            console.log('鼠标进来了');
        }
        div.onmouseleave = function() {
            console.log('鼠标出去了');
        }
    </script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    b.innerHTML：获取/设置对应元素的内容。
    代码如下（示例）：

    <body>
    <div>点击一下</div>
    <br>
    <img src="../html/男.png" width="100px">
    <br>
    <script>
        // querySelector 获取页面元素
        // querySelector 获取页面所有元素
        let div = document.querySelector('div');
        // innnerHTML 获取对应元素的内容，可以通过其赋值
        div.onclick = function() {
            div.innerHTML = '';
        }
        // 切换图片
        let img = document.querySelector('img');
        console.log(img.src);
        console.log(img.width);
        console.log(img.alt);
        img.onclick = function() {
            img.src = '../html/女.png';
        }     
    </script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    （3）获取/修改单元素属性

    表单元素（input）使用 value 获取其中的值。
    代码如下（示例）：

    <body>
    <input type="password" id="one">
    <button id="disp">显示密码</button>
    <br>
    <input type="text" id="calc" value="0">
    <button id="addBut">+</button>
    <button id="minBut">-</button>
    <script>
        // 表单元素使用 value 获取其中的值
        let input = document.querySelector('#one');
        let button = document.querySelector('#disp');
        button.onclick = function() {
            console.log(input.value);
            if(input.type == 'password') {
                input.type = 'text';
                button.innerHTML = '隐藏密码';
            }else if(input.type == 'text') {
                input.type = 'password';
                button.innerHTML = '显示密码';
            }else {
                alert('type 错误！');
            }
        }

        // 加减法运算
        let num = document.querySelector('#calc');
        let addBut = document.querySelector('#addBut');
        let minBut = document.querySelector('#minBut');
        addBut.onclick = function() {
            let n = parseInt(num.value);
            // let n = +num.value;
            num.value = n+1;
        }
        minBut.onclick = function() {
            let n = parseInt(num.value);
            num.value = n-1;
        }
    </script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40

    （4）获取/修改样式属性

    a.行内样式操作。
    改变字体大小（示例）：

    <body>
	<h2 style="font-size: 10px">点击变大</h2>
    <script>
		// 获取/修改样式
        // 改变字体大小
        let size = document.querySelector('h2');
        size.onclick = function() {
            let n = parseInt(size.style.fontSize);
            n += 5;
            size.style.fontSize = n + 'px';
        }
    </script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    b.类名样式操作。
    改变字体大小（示例）：

    <body>
    <style>
        html {
            height: 100%;
        }
        body {
            height: 100%;
        }
        .light {
            color: black;
            background-color: white;
        }
        .dark {
            color: white;
            background-color: black;
        }
    </style>
    <div class="light" style="height: 1000px">
        <div>这是一大段话.</div>
        <div>这是一大段话.</div>
        <div>这是一大段话.</div>
        <div>这是一大段话.</div>
    </div>

    <script>
        let button = document.querySelector('button');
        let divs = document.querySelector('.light');
        divs.onclick = function() {
            if(divs.className == 'light') {
                divs.className = 'dark';
            }else if(divs.className == 'dark') {
                divs.className = 'light';
            }else {
                alert('class 错误！');
            }
        }
    </script> 
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39

    2.操作节点

    （1）新增节点

    步骤：a.创建元素节点；
    b.把元素插入到dom树中。
    代码如下（示例）：

    <body>

     <!-- 针对结点操作 增加/删除 -->
     <div class="container"></div>
     <button>删除div</button>

    <script>
        // 1.创建结点
        let newDiv = document.createElement('div');
        newDiv.id = 'newDiv';
        newDiv.className = 'one';
        newDiv.innerHTML = 'hello';
        console.log(newDiv);
        // 2.把节点挂在dom树上
        let container = document.querySelector('.container');
        container.appendChild(newDiv);
    </script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    （2）删除节点

    使用removeChild删除子节点。
    代码如下（示例）：

    <body>
     <!-- 针对结点操作 增加/删除 -->
    <div class="parent">
        <div>11</div>
        <div class="one">22</div>
        <div>33</div>
    </div>
    <script>
        // 1.获取父结点
        let parent = document.querySelector('.parent');
        // 2.获取删除结点
        let child = document.createElement('.one');
        parent.appendChild(child);
        console.log(parent);
    </script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    实例

    猜数字

    1.页面如下：
    在这里插入图片描述
    2.功能：（1）游戏可以重置；（2）记录猜的次数；（3）结果提醒猜测的数字的大小。
    代码如下（示例）：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字</title>
</head>
<body>
    <button id="reset">重新开始一局</button>
    <div>
        请输入要猜的数字:
        <input type="text">
        <button id="guess">猜</button>
    </div>
    <div>已经猜的次数:<span id="guessCount">0</span></div>
    <div>结果:<span id="result"></span></div>
    <script>
        // 0.获取页面元素
        let reset = document.querySelector('#reset');
        let guessBut = document.querySelector('#guess');
        let input = document.querySelector('input');
        let guessCount = document.querySelector('#guessCount');
        let result = document.querySelector('#result');

        // 1.设置随机数
        let toGuess = parseInt(Math.random()*100)+1;
        console.log(toGuess);

        // 2.猜数字
        guessBut.onclick = function() {
            // 输入猜测的数字
            if(input.value == '') {
                return;
            }
            let num = parseInt(input.value);
            // 判断
            if(num < toGuess) {
                result.innerHTML = '低了';
            }else if(num>toGuess) {
                result.innerHTML = '高了'; 
            }else {
                result.innerHTML = '对了！';
            }
            // 设置猜测的次数
            guessCount.innerHTML = parseInt(guessCount.innerHTML)+1;
        }

        // 3.重开一局
        reset.onclick = function() {
            location.reload();
        }
    </script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55

    备忘录

    1.页面
    初始页面
    在这里插入图片描述
    添加任务之后页面：
    在这里插入图片描述
    2.功能：
    （1）点击新建任务后，添加到未完成处；
    （2）已完成与未完成可以切换；
    （3）可以删除。

    代码如下（示例）：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待办事项</title>
</head>
<body>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .nav {
            width: 500px;
            height: 100px;
            margin: 0 auto;
            display: flex;
            align-items: center;
        }
        .nav input {
            width: 400px;
            height: 40px;
        }
        .nav button {
            width: 100px;
            height: 40px;
            background-color: rgba(19, 5, 5, 0.877);
            color: white;
            border: none;
        }
        .container {
            width:500px;
            height: 500px;
            margin: 0 auto;
            display: flex;
        }
        .container h3 {
            height: 40px;
            text-align: center;
            line-height: 40px;
            background-color: pink;
            color: white;
        }
        .todo {
            width: 50%;
            height: 100%;
        }
        .done {
            width: 50%;
            height: 100%;
        }
        .row {
            height: 40px;
            display: flex;
            align-items: center;
        }
        .row input {
            margin: 0 10px;
        }
        .row span {
            width: 250px;
        }
        .row button {
            width: 40px;
            height: 30px;
            border: none;
            border-radius: 3px;
        }
        button:active {
            background-color: grey;
            outline: none;
        }      
    </style>
    
    <div class="nav">
        <input type="text">
        <button>新建任务</button>
    </div>

    <div class="container">
        <div class="todo">
            <h3>未完成</h3>
        </div>
        
        <div class="done">
            <h3>已完成</h3>
        </div>
    </div>

    <script>
        // 1.获取导航栏的新建任务按钮
        let addButton = document.querySelector('.nav button');
        // 2.新建任务按钮点击事件
        addButton.onclick = function() {
            // 3.获取新建任务
            let input = document.querySelector('.nav input');
            let taskCotent = input.value;
            if(taskCotent=='') {
                console.log('任务为空，不能新增');
                return;
            }
            // 4.获取父节点
            let row = document.createElement('div');
            // 5.创建子节点（未完成任务）
            row.className = 'row';
            let checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            let span = document.createElement('span');
            span.innerHTML = taskCotent;
            let button = document.createElement('button');
            button.innerHTML = '删除';
            row.appendChild(checkbox);
            row.appendChild(span);
            row.appendChild(button);
            // 6.将子节点插入
            let todo = document.querySelector('.todo');
            todo.appendChild(row);
            input.value = '';

            // 7.切换任务的状态（未完成/已完成)
            checkbox.onclick = function() {
                if(checkbox.checked) {
                    let target = document.querySelector('.done');
                    target.appendChild(row);
                }else {
                    let target = document.querySelector('.todo');
                    target.appendChild(row);
                }
            }

            // 8.删除功能
             button.onclick = function() {
                 let parent = row.parentNode;
                 parent.removeChild(row);
             }
        }
    </script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
  • 相关阅读:
    消息队列（MQ）的简单介绍
    [附源码]java毕业设计ssm酒店综合管理平台
    崖山YashanDB启动数据库监控服务操作记录
    CANoe-vTESTstudio之Test Diagram编辑器（入门介绍）
    Web攻防--JNDI注入--Log4j漏洞--Fastjson反序列化漏洞
    第37节——useDeferredValue+useTransition
    大语言模型对齐技术 最新论文及源码合集（外部对齐、内部对齐、可解释性）
    网站小程序分类目录网源码系统+会员登录注册功能 带完整搭建教程
    编辑距离算法
    深入C++04：模板编程
  • 原文地址：https://blog.csdn.net/qq_45283185/article/details/127586695