JavaWeb - JavaScript

Posted 2020-12-14 五号世界

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaWeb - JavaScript相关的知识，希望对你有一定的参考价值。

1.javascript入门知识

　　*概念：一门客户端脚本语言

　　　　*运行在客户端浏览器中。每一个浏览器都有JavaScript的解析引擎

　　　　*脚本语言：不需要编译，直接就可以被浏览器解析执行了

　　*功能：

　　　　*可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验

　　*JavaScript发展史：

　　　　1.1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为：C - -，后来更名为ScriptEase

　　　　2.1995年，Netscape（网景）公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript

　　　　3.1996年，微软抄袭JavaScript开发出JScript语言

　　　　4.1997年，ECMA（欧洲计算机制造协会），ECMAScript，就是所有客户端脚本语言的标准

　　　　*JavaScript = ECMAScript + JavaScript自己特有的东西（BOM+DOM）

2.ECMAScript：客户端脚本语言的标准

　　1.基本语法：

　　　　1.与html结合的方式

　　　　　　1.内部JS

　　　　　　　　*定义<script>标签，标签体内容就是js代码

　　　　　　2.外部JS

　　　　　　　　*定义<script>标签，通过src属性引入外部的js文件

　　　　2.注释

　　　　　　1.单行注释：//注释内容

　　　　　　2.多行注释/注释内容/

　　　　3.数据类型

　　　　　　1.原始数据类型（基本数据类型）：

　　　　　　　　1.number：数字。整数/小数/NaN（not a number 一个不是数字的数字类型）

　　　　　　　　2.string：字符串

　　　　　　　　3.boolean：true或false

　　　　　　　　4.null：一个对象为空的占位符

　　　　　　　　5.undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined

　　　　　　2.引用数据类型：对象

　　　　4.变量

　　　　　　*变量：一小块存储数据的内存空间

　　　　　　*Java语言是强类型语言，而JavaScript是弱类型语言

　　　　　　*语法：

　　　　　　　　* var 变量名 = 初始化值；

　　　　5.运算符

　　　　　　1.一元运算符：只有一个运算数的运算符

　　　　　　　　++ - - ， + （正号）

　　　　　　　　注意：在js中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换

　　　　　　　　　　*string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）

　　　　　　　　　　*boolean转number：true为1，false为0

　　　　　　2.算术运算符

　　　　　　　　+ - * / % 。。。

　　　　　　3.赋值运算符

　　　　　　　　= += -= 。。。

　　　　　　4.比较运算符

　　　　　　　　> < >= <= == ===（全等于）

　　　　　　　　*类型相同：直接比较

　　　　　　　　　　*字符串：按照字典顺序比较，按位逐一比较，直到得出大小为止

　　　　　　　　*类型不同：先进行类型转换，再比较

　　　　　　　　　　*===，全等于，在比较之前，先判断类型，如果类型不一样，直接返回false

　　　　　　5.逻辑运算符

　　　　　　　　&& | | ！

　　　　　　　　*对于！非：其他类型转boolean，之后进行if判断时，可以简化书写

　　　　　　　　　　1.number：0或NaN为假，其他为真

　　　　　　　　　　2.string：除了空字符串（" "），其他都是true

　　　　　　　　　　3.null&undefined：都是false

　　　　　　　　　　4.对象：所有对象都是true

　　　　　　6.三元运算符

　　　　　　　　？：表达式如： a > b ? 1 : 3 ; 如果a大于b则取1，否则就是3

　　　　6.流程控制语句

　　　　　　1.if...else...

　　　　　　2.switch

　　　　　　　　*在java中，switch语句可以接受的数据类型：

　　　　　　　　　　*switch（变量）：byte int short char，枚举（1.5），String（1.7）

　　　　　　　　　　　　case 值：

　　　　　　　　*在JS中，switch语句可以接收任意的原始数据类型

　　　　　　3.while

　　　　　　4.do...while

　　　　　　5.for

　　　　7.JS特殊语法

　　　　　　*如果一行只有一条语句，可以省略分号（不建议）

　　　　　　*变量的定义使用var关键字，也可以不使用

　　　　　　　　*用var定义的变量是局部变量

　　　　　　　　*不用var定义的变量是全局变量

　　2.基本对象

　　　　1.Function：函数对象

　　　　　　1.创建

　　　　　　　　1. var fun = new Function（形参列表，方法体）；

　　　　　　　　2. function 方法名称（形参列表）{ 方法体 }

　　　　　　　　3. var 方法名称 = function（形参列表）{ 方法体 }

　　　　　　2.方法

　　　　　　3.属性

　　　　　　　　length：代表形参的个数

　　　　　　4.特点

　　　　　　　　1.方法定义时，形参的类型不用写，返回值类型也可以不写

　　　　　　　　2.方法是一个对象，如果定义名称相同的方法，会覆盖

　　　　　　　　3.在JS中，方法的调用只与方法的名称有关，和参数列表无关

　　　　　　　　4.在方法声明中，有一个隐藏的内置对象（数组），arguments，封装所有的实际参数

　　　　　　5.调用

　　　　　　　　方法名称（实参列表）；

<script>

        function fun1(a,b) {
            alert(a);
        }
        fun1(3);
        
        var fun2 = function (a,b) {
            alert(b);
        }
        document.write(fun1.length);

        //求任意个数的和
        function add() {
            var sum = 0;
            for(var i = 0; i < arguments.length; i++){
                sum += arguments[i];
            }
            return sum;
        }

    </script>

　　　　2.Array：数组对象

　　　　　　1.创建

　　　　　　　　1. var arr = new Array（元素列表）；

　　　　　　　　2. var arr = new Array（默认长度）；

　　　　　　　　3. var arr = 【元素列表】；

　　　　　　2.方法

　　　　　　　　join（参数）：将数组中的元素按照指定的分隔符拼接为字符串

　　　　　　　　push（）：向数组的尾部添加一个或更多元素，并返回新的长度

　　　　　　3.属性

　　　　　　4.特点

　　　　　　　 1.JS中，数组元素的类型是可变的

　　　　　　　　2.JS中，数组的长度是可变的

　　　　3.Date：日期对象

　　　　　　1.创建 var date = new Date（）；

　　　　　　2.方法：

　　　　　　　　toLocalString（）：返回当前date对象对应的本地字符串格式

　　　　　　　　getTime（）：获取1970年1月1日零点至今的毫秒值　　　

　　　　4.Math：数学对象

　　　　　　1.创建：

　　　　　　　　*特点：Math对象不用创建，直接使用。Math.方法名（）；

　　　　　　2.方法：

　　　　　　　　random（）：返回0-1之间的随机数。含0不含1

　　　　　　　　ceil（x）：对数进行向上取整

　　　　　　　　floor（x）：对数进行向下取整

　　　　　　　　round（x）：进行四舍五入

　　　　　　3.属性：

　　　　　　　　PI：圆周率

  <script>
        //取1-100之间的整数
        var number = Math.random();
        number = number * 100;
        var num = Math.floor(number);
        num += 1;
        document.write(num);
    </script>

　　　　5.RegExp：正则表达式对象

　　　　　　1.正则表达式：定义字符串的组成规则

　　　　　　　　1.单个字符：【】

　　　　　　　　　　如：【a】【ab】【a - z】【a - z A - Z 0 - 9_】

　　　　　　　　　　*特殊符号代表特殊含义的单个字符：

　　　　　　　　　　　　\\d : 单个数字字符【0-9】

　　　　　　　　　　　　\\w : 单个单词字符【a - z A - Z 0 - 9_】

　　　　　　　　2.量词符号：

　　　　　　　　　　? ：表示出现0次到1次

　　　　　　　　　　* ：表示0到无穷次贪婪匹配

　　　　　　　　　　+ ：出现1到无穷次贪婪匹配

　　　　　　　　　　{m,n} : 表示大于等于m，小于等于n

　　　　　　　　　　　　* m如果缺省： {，n}：最多n次

　　　　　　　　　　　　* n如果缺省：{m，}：最少m次

　　　　　　　　3.开始结束符号

　　　　　　　　　　* ^ ：开始

　　　　　　　　　　* $ ：结束

　　　　　　2.正则对象

　　　　　　　　1.创建

　　　　　　　　　　1. var reg = new RegExp（"正则表达式"）；

　　　　　　　　　　　　2. var reg = /正则表达式/；

　　　　　　　　2.方法

　　　　　　　　　　test（参数）：验证指定的字符串是否符合正则定义的规范　　　　　　　　　　

    <script>
        var reg = new RegExp("\\\\w{6,12}");
        var reg2 = /\\w{6,12}/;
        var username = "zhangsan";
        var flag = reg.test(username);
        // document.write(flag);
        alert(flag);
    </script>

　　　　6.Global：全局对象

　　　　　　1.特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用

　　　　　　2.方法

　　　　　　　　1.encodeURI（）：url编码

　　　　　　　　2.decodeURI（）：url解码

　　　　　　　　3.encodeURIComponent（）：url编码，编码的字符更多

　　　　　　　　4.decodeURIComponent（）：url解码

　　　　　　　　5.parseInt（）：将字符串转为数字

　　　　　　　　　　*逐一判断每一个字符是否是数字，直到不是数字为止，将前面数字部分转为number

　　　　　　　　6.isNaN（）：判断一个值是否是NaN

　　　　　　　　　　*NaN六亲不认，连自己都不认。NaN参与的==比较全部为false

　　　　　　　　7.eval（）：将JavaScript字符串，并把它做为脚本代码来执行

　　　　　　3.URL编码 GBK：一个字符两个字节 UTF-8：一个字符三个字节一个字节8个二进制位

2.DOM简单学习

　　*功能：控制html文档的内容

　　*代码：获取页面标签（元素）对象 Element

　　　　* document.getElemetnById（"id值"）：通过元素的id获取元素对象

　　*操作Element对象：

　　　　1.修改其属性值：

　　　　　　1.明确获取的对象是哪一个？

　　　　　　2.查看API文档，找其中哪些属性可以设置

　　　　2.修改标签体内容

　　　　　　*属性：innerHTML，修改便签内的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部JS
    外部JS-->

</head>
<body>
    <img src="../HTMLandCSS/img/logo.jpg" id="p1">
    <h1 id="title">悔创阿里杰克马</h1>
    <script>
        var e1 = document.getElementById("p1");
        var title = document.getElementById("title");
        alert("我要换内容了");
        title.innerHTML = "还是京东好";
    </script>
</body>
</html>

4.事件简单学习

　　*功能：某些组件被执行了某些操作后，触发了某些代码的执行

　　*如何绑定事件

　　　　1.直接在html标签上，指定事件的属性（操作），属性值就是js代码

　　　　　　1.事件：onclick - - - 单击事件 <img src="../HTMLandCSS/img/logo.jpg" id="p1" onclick="f1();">

　　　　2.通过js获取元素对象，指定事件属性，设置一个函数

案例：开关灯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <img src="img/off.gif" id="p1">
    <script>

        //1.获取图片对象
        var p1 = document.getElementById("p1");
        var flag = false; //代表灯是灭的
        function f1() {
            if(flag){ //如果灯开着就灭掉
                p1.src = "img/off.gif";
                flag = false;
            }else {
                p1.src = "img/on.gif";
                flag = true;
            }
                }
        p1.onclick = f1;

    </script>
</body>
</html>

5.BOM

　　1.概念：Browser Object Model 浏览器对象模型

　　　　*将浏览器的各个组成部分封装成对象

　　2.组成：

　　　　1.window：窗口对象

　　　　2.Navigator：浏览器对象

　　　　3.Screen：显示器屏幕对象

　　　　4.History：历史记录对象

　　　　5.Location：地址栏对象

　　3.window对象

　　　　1.创建

　　　　2.方法

　　　　　　1.与弹出框有关的方法：

　　　　　　　　alert（）显示带有一段消息和一个确认按钮的警告框

　　　　　　　　confirm（）显示带有一段消息以及确认按钮和取消按钮的对话框

　　　　　　　　　　*如果用户点击确定按钮，则方法返回true，如果点击取消按钮，则方法返回false

　　　　　　　　prompt（）显示可提示用户输入的对话框

　　　　　　　　　　*返回值，获取用户输入的值

　　　　　　2.与打开关闭有关的方法

　　　　　　　　open（）打开一个新的浏览器窗口

　　　　　　　　　　*返回一个新的window对象

　　　　　　　　close（）关闭浏览器窗口

　　　　　　　　　　*谁调用我，我关谁

<body>
    <input type="button" value="前往网页" id="tag_id1">
    <input type="button" value="关闭网页" id="tag_id2">
    <script>
        var tag1 = document.getElementById("tag_id1");
        var tag2 = document.getElementById("tag_id2");
        var obj;
        tag1.onclick = function () {
            obj = open("https://www.baidu.com");
        };
        tag2.onclick = function () {
            obj.close();
        }


    </script>
</body>

　　　　　　3.与定时器有关的方法

　　　　　　　　setTimeout（）在指定的毫秒数后调用函数或计算表达式一次性

　　　　　　　　　　*参数：

　　　　　　　　　　　　1.js代码或者方法　　函数对象

　　　　　　　　　　　　2.毫秒值

　　　　　　　　　　*返回值：唯一标识，用于取消定时器

　　　　　　　　clearTimeout（）取消由setTimeout（）方法设置的Timeout

　　　　　　　　setInterval（）按照指定的周期（以毫秒计）来调用函数或计算表达式循环

　　　　　　　 clearInterval（）取消由setInterval（）方法设置的Timeout

        var id = setInterval("alert(\'boom\')",3000);
        clearInterval(id);

轮播图案例：

<body>

    <img src="../img/off.gif" id="pp">

    <script>
        var pid = document.getElementById("pp");
        var num = 1;
        function switchPicture() {
            num ++;
            if(num % 2==0){
                pid.src = "../img/off.gif";
            }else if(num % 2 == 1){
                pid.src = "../img/on.gif";
            }
        }
        setInterval(switchPicture,2000);

    </script>
</body>

　　　　3.属性

　　　　　　1.获取其他BOM对象

　　　　　　　　History

　　　　　　　　Location

　　　　　　　　Navigator

　　　　　　　　Screen

　　　　　　2.获取DOM对象

　　　　　　　　document

　　　　4.特点

　　　　　　*Window对象不需要创建可以直接使用 window使用。 window.方法名（）；

　　　　　　*window引用可以省略。方法名（）；

　　4.Location：地址栏对象

　　　　1.创建（获取）：window.location 或 location

　　　　2.方法

　　　　　　*reload（）：重新加载当前文档

　　　　3.属性

　　　　　　*href：设置或返回完整的URL Location.href = "https://www.baidu.com"

自动跳转首页案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            text-align: center;
        }
        span{
            color: red;
        }

    </style>
</head>
<body>
    <p>
        <span id="time">5</span>秒后跳转至首页
    </p>

    <script>
        //通过定时器实现倒计时
        var second = 5;
        var time = document.getElementById("time");
        function showtime() {
            //时间如果小于0，则跳转
            second --;
            if(second <= 0){
                location.href = "https://www.baidu.com";
            }
            time.innerHTML = second + "";
        }
        setInterval(showtime,1000);

    </script>
</body>
</html>

自动跳转首页案例

　　5.History

　　　　1.创建：window.history

　　　　2.方法

　　　　　　1.back（）加载history列表中的前一个URL 和网页箭头一样

　　　　　　2.forward（）加载history列表中的下一个URL

　　　　　　3.go（参数）加载history列表中的某个具体页面

　　　　　　　　*参数：

　　　　　　　　　　正数：前进几个历史记录

　　　　　　　　　　负数：后退几个历史记录

　　　　3.属性：

　　　　　　*length 返回当前窗口历史列表中的URL数量

6.DOM

　　*概念：Document Object Model 文档对象模型

　　　　*将标记语言文档的各个组成部分，封装成对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作　　

　　*W3C DOM 标准被分为3个不同的部分：

　　　　*核心 DOM - 针对任何结构化文档的标准模型

　　　　　　*Document：文档对象

　　　　　　*Element：元素对象

　　　　　　*Attribute：属性对象

　　　　　　*Text：文本对象

　　　　　　*Comment：注释对象

　　　　　　*Node：节点对象，其他5个的父对象

　　　　*XML DOM - 针对 XML 文档的标准模型

　　　　*HTML DOM - 针对 HTML 文档的标准模型

　　*核心 DOM - 针对任何结构化文档的标准模型

　　　　　　*Document：文档对象

　　　　　　　　1.创建（获取）：在html dom模型中可以使用window对象来获取

　　　　　　　　2.方法：

　　　　　　　　　　1.获取Element对象

　　　　　　　　　　　　1.getElementById（）：根据ID属性值获取元素对象。ID属性值一般唯一

　　　　　　　　　　　　2.getElementsByTagName（）：根据元素的名称获取元素对象们。返回值是一个数组如a，p，div等标签

　　　　　　　　　　　　3.getElementsByClassNmae（）：根据Class的属性值来获取元素对象们。返回值是一个数组如相同的class值

　　　　　　　　　　　　4.getElementsByName（）：根据Name属性值获取元素对象们。返回值是一个数组如name值

　　　　　　　　　　2.创建其他的DOM对象

　　　　　　　　　　　　createAttribute（name）

　　　　　　　　　　　　createComment（）

　　　　　　　　　　　　createElement（）

　　　　　　　　　　　　createTextNode（）

　　　　　　*Element：元素对象

　　　　　　　　　　1.获取：通过document对象来获取和创建

　　　　　　　　　　2.方法：

　　　　　　　　　　　　1.removeAttribute（）：删除属性

　　　　　　　　　　　　2.setAttribute（）：设置属性

<body>
    <a>点我试试</a>
    <input type="button" id="tag_button" value="给超链接设置网页">

    <script>
        //获取这个a标签元素
        var ele_a = document.getElementsByTagName("a")[0];
        //拿到按钮
        var ele_button = document.getElementById("tag_button");
        //给按钮绑定事件
        ele_button.onclick = function () {
            ele_a.setAttribute("href","https://www.baidu.com");
        };

    </script>
</body>

　　　　　　*Node：节点对象，其他5个的父对象

　　　　　　　　*特点：所有DOM对象都可以被认为是一个节点

　　　　　　　　*方法：

　　　　　　　　　　*CRUD dom树：

　　　　　　　　　　　　*appendChild（）：向节点的子节点列表的结尾添加新的子节点

　　　　　　　　　　　　*removeChild（）：删除（并返回）当前节点的指定子节点

　　　　　　　　　　　　*replaceChild（）：用新节点替换一个子节点

　　　　　　　　　　　　注意：

　　　　　　　　　　　　　　超链接功能：
　　　　　　　　　　　　　　　　1.可以被点击；有样式
　　　　　　　　　　　　　　　　2.点击后跳转到href指定的url
　　　　　　　　　　　　　　需求：保留功能1，去掉功能2
　　　　　　　　　　　　　　实现：href="javascript:void(0);"

案例：删除子节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node</title>
    <style>
        div{
            border: 1px solid red;
        }
        #div1{
            height: 200px;
            width: 200px;
        }
        #div2{
            height: 100px;
            width: 100px;
        }

    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">div2</div>
        div1
    </div>
        超链接功能：
            1.可以被点击；有样式
            2.点击后跳转到href指定的url
        需求：保留功能1，去掉功能2
        实现：href="javascript:void(0);"
    <a href="javascript:void(0);">删除子节点</a>
    <script>
        var ele_a = document.getElementsByTagName("a")[0];
        //给超链接对象绑定点击事件
        ele_a.onclick = function () {
            //获取div1这个父节点对象
            var ele_div1 = document.getElementById("div1");
            var ele_div2 = document.getElementById("div2");
            ele_div1.removeChild(ele_div2);
        }

    </script>
</body>
</html>

删除子节

　　　　　　　　*属性：

　　　　　　　　　　*parentNode：返回节点的父节点

案例：动态增删表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
    <style>
        div{
            text-align: center;
            margin: 50px;
        }
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }
        td,th{
            text-align: center;
            border: 1px solid;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" id="id" placeholder="请输入编号">
        <input type="text" id="name" placeholder="请输入姓名">
        <input type="text" id="gender" placeholder="请输入性别">
        <input type="button" value="添加" id="btn_add">
    </div>

    <table>
        <caption>学生信息表</caption>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>1</td>
            <td>令狐冲</td>
            <td>男</td>
            <td><a href="javascript:void (0);" onclick="delTr(this);">删除</a></td>
        </tr>

        <tr>
            <td>2</td>
            <td>任我行</td>
            <td>男</td>
            <td><a href="javascript:void (0);" onclick="delTr(this);">删除</a></td>
        </tr>

        <tr>
            <td>3</td>
            <td>小龙女</td>
            <td>女</td>
            <td><a href="javascript:void (0);" onclick="delTr(this);">删除</a></td>
        </tr>
    </table>

<script>
    /*
        添加：
            1.给添加按钮绑定单击事件
            2.获取文本框的内容
            3.创建td，去设置td的文本为文本框的内容
            4.创建tr
            5.将td添加到tr中
            6.获取table，将tr添加到table 中
        删除：
            1.确定删除的是哪一个超链接
                <a href="javascript:void (0);" onclick="del_tr(this)">
            2.怎么删除
     */
    //1.获取按钮
    document.getElementById("btn_add").onclick = function () {
        //获取文本框的内容
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;

        //创建td，赋值td的标签体
        var td_id = document.createElement("td");
        //文本节点才能放入
        var text_id = document.createTextNode(id);
        td_id.appendChild(text_id);
        var td_name = document.createElement("td");
        var text_name = document.createTextNode(name);
        td_name.appendChild(text_name);
        var td_gender = document.createElement("td");
        var text_gender = document.createTextNode(gender);
        td_gender.appendChild(text_gender);
        //a标签的td
        var td_a = document.createElement("td");
        var a = document.createElement("a");
        var text_a = document.createTextNode("删除");
        a.appendChild(text_a);
        a.setAttribute("href","javascript:void(0);");
        a.setAttribute("onclick","delTr(this);");
        td_a.appendChild(a);


        //创建tr
        var tr = document.createElement("tr");

        //添加td到tr中
        tr.appendChild(td_id);
        tr.appendChild(td_name);
        tr.appendChild(td_gender);
        tr.appendChild(td_a);
        //获取table
        var table = document.getElementsByTagName("table")[0];
        table.appendChild(tr);
        
        //删除方法
        function delTr(obj) {
            var table = obj.parentNode.parentNode.parentNode;
            //获取tr对象
            var tr = obj.parentNode.parentNode;
            table.removeChild(tr);
            alert(obj);
        }
    }
</script>
</body>
</html>

动态增删表格

　　*HTML DOM

　　　　1.标签体的设置和获取：innerHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
    <style>
        div{
            text-align: center;
            margin: 50px;
        }
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }
        td,th{
            text-align: center;
            border: 1px solid;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" id="id" placeholder="请输入编号">
        <input type="text" id="name" placeholder="请输入姓名">
        <input type="text" id="gender" placeholder="请输入性别">
        <input type="button" value="添加" id="btn_add">
    </div>

    <table>
        <caption>学生信息表</caption>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>1</td>
            <td>令狐冲</td>
            <td>男</td>
            <td><a href="javascript:void (0);" onclick="delTr(this);">删除</a></td>
        </tr>

        <tr>
            <td>2</td>
            <td>任我行</td>
            <td>男</td>
            <td><a href="javascript:void (0);" onclick="delTr(this);">删除</a></td>
        </tr>

        <tr>
            <td>3</td>
            <td>小龙女</td>
            <td>女</td>
            <td><a href="javascript:void (0);" onclick="delTr(this);">删除</a></td>
        </tr>
    </table>

<script>
    /*
        添加：
            1.给添加按钮绑定单击事件
            2.获取文本框的内容
            3.创建td，去设置td的文本为文本框的内容
            4.创建tr
            5.将td添加到tr中
            6.获取table，将tr添加到table 中
        删除：
            1.确定删除的是哪一个超链接
                <a href="javascript:void (0);" onclick="del_tr(this)">
            2.怎么删除
     */
    //1.获取按钮
    document.getElementById("btn_add").onclick = function () {
        //获取文本框的内容
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;

        var ele_table = document.getElementsByTagName("table")[0];
        //向table里添加
        ele_table.innerHTML += "<tr>\\n" +
            "            <td>"+id+"</td>\\n" +
            "            <td>"+name+"</td>\\n" +
            "            <td>"+gender+"</td>\\n" +
            "            <td><a href=\\"javascript:void (0);\\" onclick=\\"delTr(this);\\">删除</a></td>\\n" +
            "        </tr>";
        //删除方法
        function delTr(obj) {
            var table = obj.parentNode.parentNode.parentNode;
            //获取tr对象
            var tr = obj.parentNode.parentNode;
            table.removeChild(tr);
            alert(obj);
        }
    }
</script>
</body>
</html>

使用HTMLDOM实现动态表格案例

　　　　2.使用html元素对象的属性

　　　　3.控制样式

　　　　　　1.使用元素的style属性来设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="div1"> div </div>

<script>
    var ele_div1 = document.getElementById("div1");
    ele_div1.onclick = function () {
        ele_div1.style.border = "1px solid red";
        //font-size --> fontSize
    }
</script>
</body>
</html>

style来控制

　　　　　　2.提前定义好类选择器的样式，通过元素的className属性来设置其class属性值

以上是关于JavaWeb - JavaScript的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段12——JavaScript的Promise对象

《java精品毕设》基于javaweb宠物领养平台管理系统（源码+毕设论文+sql）:主要实现:个人中心,信息修改,填写领养信息,交流论坛,新闻,寄养信息,公告,宠物领养信息,我的寄养信息等(代码片段

30秒就能看懂的JavaScript 代码片段

常用Javascript代码片段集锦

48个值得掌握的JavaScript代码片段（上）

如何将此 JavaScript 代码片段翻译成 Parenscript？

JavaWeb - JavaScript

1.javascript入门知识

*概念：一门客户端脚本语言

*运行在客户端浏览器中。每一个浏览器都有JavaScript的解析引擎

*脚本语言：不需要编译，直接就可以被浏览器解析执行了

*功能：

*可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验

*JavaScript发展史：

1.1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为：C - -，后来更名为ScriptEase

2.1995年，Netscape（网景）公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript

3.1996年，微软抄袭JavaScript开发出JScript语言

4.1997年，ECMA（欧洲计算机制造协会），ECMAScript，就是所有客户端脚本语言的标准

*JavaScript = ECMAScript + JavaScript自己特有的东西（BOM+DOM）

2.ECMAScript：客户端脚本语言的标准

1.基本语法：

1.与html结合的方式

1.内部JS

*定义<script>标签，标签体内容就是js代码

2.外部JS

*定义<script>标签，通过src属性引入外部的js文件

2.注释

1.单行注释：//注释内容

2.多行注释/*注释内容*/

3.数据类型

1.原始数据类型（基本数据类型）：

1.number：数字。整数/小数/NaN（not a number 一个不是数字的数字类型）

2.string：字符串

3.boolean：true或false

4.null：一个对象为空的占位符

5.undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined

2.引用数据类型：对象

4.变量

*变量：一小块存储数据的内存空间

*Java语言是强类型语言，而JavaScript是弱类型语言

*语法：

* var 变量名 = 初始化值；

5.运算符

1.一元运算符：只有一个运算数的运算符

++ - - ， + （正号）

注意：在js中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换

*string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）

*boolean转number：true为1，false为0

2.算术运算符

+ - * / % 。。。

3.赋值运算符

= += -= 。。。

4.比较运算符

> < >= <= == ===（全等于）

*类型相同：直接比较

*字符串：按照字典顺序比较，按位逐一比较，直到得出大小为止

*类型不同：先进行类型转换，再比较

*===，全等于，在比较之前，先判断类型，如果类型不一样，直接返回false

5.逻辑运算符

&& | | ！

*对于 ！ 非： 其他类型转boolean，之后进行if判断时，可以简化书写

1.number：0或NaN为假，其他为真

2.string：除了空字符串（" "），其他都是true

3.null&undefined：都是false

4.对象：所有对象都是true

6.三元运算符

？ ：表达式 如： a > b ? 1 : 3 ; 如果a大于b则取1，否则就是3

6.流程控制语句

1.if...else...

2.switch

*在java中，switch语句可以接受的数据类型：

*switch（变量）：byte int short char，枚举（1.5），String（1.7）

case 值：

*在JS中，switch语句可以接收任意的原始数据类型

3.while

4.do...while

5.for

7.JS特殊语法

*如果一行只有一条语句，可以省略分号（不建议）

*变量的定义使用var关键字，也可以不使用

*用var定义的变量是局部变量

*不用var定义的变量是全局变量

2.基本对象

1.Function：函数对象

1.创建

1. var fun = new Function（形参列表，方法体）；

　　*概念：一门客户端脚本语言

　　　　*运行在客户端浏览器中。每一个浏览器都有JavaScript的解析引擎

　　　　*脚本语言：不需要编译，直接就可以被浏览器解析执行了

　　*功能：

　　　　*可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验

　　*JavaScript发展史：

　　　　1.1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为：C - -，后来更名为ScriptEase

　　　　2.1995年，Netscape（网景）公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript

　　　　3.1996年，微软抄袭JavaScript开发出JScript语言

　　　　4.1997年，ECMA（欧洲计算机制造协会），ECMAScript，就是所有客户端脚本语言的标准

　　　　*JavaScript = ECMAScript + JavaScript自己特有的东西（BOM+DOM）

　　1.基本语法：

　　　　1.与html结合的方式

　　　　　　1.内部JS

　　　　　　　　*定义<script>标签，标签体内容就是js代码

　　　　　　2.外部JS

　　　　　　　　*定义<script>标签，通过src属性引入外部的js文件

　　　　2.注释

　　　　　　1.单行注释：//注释内容

　　　　　　2.多行注释/注释内容/

　　　　3.数据类型

　　　　　　1.原始数据类型（基本数据类型）：

　　　　　　　　1.number：数字。整数/小数/NaN（not a number 一个不是数字的数字类型）

　　　　　　　　2.string：字符串

　　　　　　　　3.boolean：true或false

　　　　　　　　4.null：一个对象为空的占位符

　　　　　　　　5.undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined

　　　　　　2.引用数据类型：对象

　　　　4.变量

　　　　　　*变量：一小块存储数据的内存空间

　　　　　　*Java语言是强类型语言，而JavaScript是弱类型语言

　　　　　　*语法：

　　　　　　　　* var 变量名 = 初始化值；

　　　　5.运算符

　　　　　　1.一元运算符：只有一个运算数的运算符

　　　　　　　　++ - - ， + （正号）

　　　　　　　　注意：在js中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换

　　　　　　　　　　*string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）

　　　　　　　　　　*boolean转number：true为1，false为0

　　　　　　2.算术运算符

　　　　　　　　+ - * / % 。。。

　　　　　　3.赋值运算符

　　　　　　　　= += -= 。。。

　　　　　　4.比较运算符

　　　　　　　　> < >= <= == ===（全等于）

　　　　　　　　*类型相同：直接比较

　　　　　　　　　　*字符串：按照字典顺序比较，按位逐一比较，直到得出大小为止

　　　　　　　　*类型不同：先进行类型转换，再比较

　　　　　　　　　　*===，全等于，在比较之前，先判断类型，如果类型不一样，直接返回false

　　　　　　5.逻辑运算符

　　　　　　　　&& | | ！

　　　　　　　　*对于！非：其他类型转boolean，之后进行if判断时，可以简化书写

　　　　　　　　　　1.number：0或NaN为假，其他为真

　　　　　　　　　　2.string：除了空字符串（" "），其他都是true

　　　　　　　　　　3.null&undefined：都是false

　　　　　　　　　　4.对象：所有对象都是true

　　　　　　6.三元运算符

　　　　　　　　？：表达式如： a > b ? 1 : 3 ; 如果a大于b则取1，否则就是3

　　　　6.流程控制语句

　　　　　　1.if...else...

　　　　　　2.switch

　　　　　　　　*在java中，switch语句可以接受的数据类型：

　　　　　　　　　　*switch（变量）：byte int short char，枚举（1.5），String（1.7）

　　　　　　　　　　　　case 值：

　　　　　　　　*在JS中，switch语句可以接收任意的原始数据类型

　　　　　　3.while

　　　　　　4.do...while

　　　　　　5.for

　　　　7.JS特殊语法

　　　　　　*如果一行只有一条语句，可以省略分号（不建议）

　　　　　　*变量的定义使用var关键字，也可以不使用

　　　　　　　　*用var定义的变量是局部变量

　　　　　　　　*不用var定义的变量是全局变量

　　2.基本对象

　　　　1.Function：函数对象

　　　　　　1.创建

　　　　　　　　1. var fun = new Function（形参列表，方法体）；

　　　　　　　　2. function 方法名称（形参列表）{ 方法体 }

　　　　　　　　3. var 方法名称 = function（形参列表）{ 方法体 }

　　　　　　2.方法