html怎么和jsp交互（HTML与JavaScript联动）

时间2025-05-04 01:25:36分类IT科技浏览3813

导读：目录...

一、数组（增删查改）

1.创建数组

2. 增加数组元素

3.删除数组中的元素

4.查看数组元素

5.修改数组元素

二、创建方法

1.函数

2.作用域

3.作用域链

三、对象

1.使用字面量创建对象 [常用]

2.使用 new Object 创建对象

四、JavaScript 的对象和 Java 的对象的区别

五、JS 操作 DOM

1.得到控件

2.操作元素

2.1 获取元素值

2.2 设置元素的值

2.3 innerText /innerHTML

3.原生猜数字游戏

4.jquery版本猜数字游戏

5.聚合搜索

6.表白墙

首先，我想大家推荐一个可以用来查询JavaScript语法的一个网站：链接：lJavaScript - 学习 Web 开发 | MDN (mozilla.org)

一、数组（增删查改）

1.创建数组

1️⃣使用 new 关键字创建

// Array 的 A 要大写 var arr = new Array();

2️⃣使用字面量方式创建 [常用]

var arr = []; var arr2 = [1, 2, haha, false]; // 数组中保存的内容称为 "元素"

在数组中，我们可以存放任意类型的元素

2. 增加数组元素

使用 push 进行追加元素

代码示例: 给定一个数组, 把数组中的奇数放到一个 newArr 中.

var arr = [9, 5, 2, 7, 3, 6, 8]; var newArr = []; for (var i = 0; i < arr.length; i++) { if (arr[i] % 2 != 0) { newArr.push(arr[i]); } } console.log(newArr);

3.删除数组中的元素

使用 splice 方法删除元素

var arr = new Array(); arr.push(1); arr.push("hello"); arr.push(false); arr.splice(1, 1); console.log(arr.length); for(var item of arr) { console.log(item); }

4.查看数组元素

使用下标的方式访问数组元素(从 0 开始)

var arr = [小猪佩奇, 小猪乔治, 小羊苏西]; console.log(arr); console.log(arr[0]); console.log(arr[1]); console.log(arr[2]); arr[2] = 小猫凯迪; console.log(arr);

❗❗注意：如果下标超出范围读取元素, 则结果为 undefined

var arr = new Array(); arr.push(1); arr.push("hello"); arr.push(false); console.log(arr[3]);//undefined

❗❗不要给数组名直接赋值, 此时数组中的所有元素都没了

var arr = [小猪佩奇, 小猪乔治, 小羊苏西]; arr = 小猫凯迪;

5.修改数组元素

直接修改

var arr = new Array(); arr.push(1); arr.push("hello"); arr.push(false); arr[1] = "hi"; console.log(arr.length); for(var item of arr) { console.log(item); }

二、创建方法

1.函数

// 创建函数/函数声明/函数定义 function 函数名(形参列表) { 函数体 return 返回值; } // 函数调用函数名(实参列表) // 不考虑返回值返回值 = 函数名(实参列表) // 考虑返回值 <body> <input type="botton" value="添加" onclick="add(张三, 123)">    <input type="botton" value="修改" onclick="up(李四)">    <input type="botton" value="删除" >    <input type="botton" value="查询" >    <script> //修改方法 function up() { alert("执行了修改方法！"); } </script> </body>

1️⃣函数定义并不会执行函数体内容, 必须要调用才会执行. 调用几次就会执行几次.

<input type="botton" value=" 添加" onclick="add(张三, 123)">    <input type="botton" value=" 修改" >    <input type="botton" value=" 删除" >    <input type="botton" value=" 查询" >    <script> alert(111); //添加方法--不需要写参数类型 function add(name, password) { alert("执行了添加方法！\n name=" +name+ "\n passord=" + password); } </script>

在进行页面加载的过程中是不会调用函数的：

2️⃣在页面加载的过程中，如果想要触发函数，直接在全局 script 中调用add函数（可以不传参数，默认为unfined）：

<body> <input type="botton" value="添加" onclick="add(张三, 123)">    <input type="botton" value="修改" >    <input type="botton" value="删除" >    <input type="botton" value="查询" >    <script> alert(111); //添加方法--不需要写参数类型 function add(name, password) { alert("执行了添加方法！\n name=" +name+ "\n passord=" + password); } add(); </script> </body>

3️⃣调用函数的时候进入函数内部执行, 函数结束时回到调用位置继续执行. 可以借助调试器来观察.并且函数的定义和调用的先后顺序没有要求. (这一点和变量不同, 变量必须先定义再使用)

// 调用函数 hello(); // 定义函数 function hello() { console.log("hello"); }

2.作用域

1️⃣全局作用域: 在整个 script 标签中, 或者单独的 js 文件中生效.

2️⃣局部作用域/函数作用域: 在函数内部生效.

// 全局变量 var num = 10; console.log(num); function test() { // 局部变量 var num = 20; console.log(num); } function test2() { // 局部变量 var num = 30; console.log(num); } test(); test2(); console.log(num); // 执行结果 10 20 30 10

❗❗创建变量时如果不写 var, 则得到一个全局变量

function test() { num = 100; } test(); console.log(num); // 执行结果 100

不写 var ，会自动创建一个变量

3.作用域链

1️⃣函数可以定义在函数内部

2️⃣内层函数可以访问外层函数的局部变量.

内部函数可以访问外部函数的变量. 采取的是链式查找的方式. 从内到外依次进行查找.

var num = 1; function test1() { var num = 10; function test2() { var num = 20; console.log(num); } test2(); } test1(); // 执行结果 20

执行 console.log(num) 的时候, 会现在 test2 的局部作用域中查找 num. 如果没找到, 则继续去 test1 中查找. 如果还没找到, 就去全局作用域查找.

三、对象

在 JavaScript 中式没有类这个概念的；但是有对象的，一切皆对象

1.使用字面量创建对象 [常用]

var student = { id:1, name:"张三", password:"123", saylli:function() { alert("hi student"); } } console.log(student.name); student.saylli();

1️⃣使用 { } 创建对象

2️⃣属性和方法使用键值对的形式来组织.

3️⃣键值对之间使用 , 分割. 最后一个属性后面的 , 可有可无

4️⃣键和值之间使用 : 分割.

5️⃣方法的值是一个匿名函数

使用对象的属性和方法：

// 1. 使用 . 成员访问运算符来访问属性 `.` 可以理解成 "的" console.log(student.name); // 2. 使用 [ ] 访问属性, 此时属性需要加上引号 console.log(student[height]); // 3. 调用方法, 别忘记加上 () student.sayHello();

2.使用 new Object 创建对象

var student = new Object(); // 和创建数组类似 student.name = "蔡徐坤"; student.height = 175; student[weight] = 170; student.sayHello = function () { console.log("hello"); } console.log(student.name); console.log(student[weight]); student.sayHello();

❗❗注意：使用 { } 创建的对象也可以随时使用 student.name = "蔡徐坤"; 这样的方式来新增属性.

四、JavaScript 的对象和 Java 的对象的区别

1️⃣JavaScript 没有 "类" 的概念

对象其实就是 "属性" + "方法" .

类相当于把一些具有共性的对象的属性和方法单独提取了出来, 相当于一个 "月饼模子" ，在 JavaScript 中的 "构造函数" 也能起到类似的效果，而且即使不是用构造函数, 也可以随时的通过 { } 的方式指定出一些对象

2️⃣JavaScript 对象不区分 "属性" 和 "方法"

JavaScript 中的函数是 "一等公民", 和普通的变量一样. 存储了函数的变量能够通过 ( ) 来进行调用执行.

3️⃣JavaScript 对象没有 private / public 等访问控制机制

对象中的属性都可以被外界随意访问.

4️⃣JavaScript 对象没有 "继承"

继承本质就是 "让两个对象建立关联". 或者说是让一个对象能够重用另一个对象的属性/方法

JavaScript 中使用 "原型" 机制实现类似的效果

5️⃣JavaScript 没有 "多态"

多态的本质在于 "程序猿不必关注具体的类型, 就能使用其中的某个方法".

C++ / Java 等静态类型的语言对于类型的约束和校验比较严格. 因此通过子类继承父类, 并重写父类的方法的方式来实现多态的效果.

五、JS 操作 DOM

🙈什么是 DOM 树

一个页面的结构是一个树形结构, 称为 DOM 树.

1.得到控件

即根据 id 得到 HTML 控件：

document.getElementById(""元素id)

例如：开始默认百度的logo，点击更换按钮，换成搜狗的logo

<body> <img id="img_logo" src="https://www.yuucn.com/wp-content/uploads/2023/04/1682330425-2d94b2ccde14b5e.png"> <p></p> <input onclick="upImg()" type="button" value=" 更换图片 "> <hr> <script> function upImg() { var sg_img = "https://www.yuucn.com/wp-content/uploads/2023/05/1683806327-20be7608b09955d.png?v=628ed034"; document.getElementById("img_logo").src = sg_img; } </script> </body>

2.操作元素

2.1 获取元素值

document.getElementById("username").value

2.2 设置元素的值

document.getElementById("username").value = "jva";

2.3 innerText /innerHTML

Element.innerText 属性表示一个节点及其后代的“渲染 ”文本内容

Element.innerHTML 属性设置或获取HTML语法表示的元素的后代

3.原生猜数字游戏

🌈在这里我们使用一个函数 Math.random() 来生成随机数

Math.random() 范围为[0 ，1），假设我们现在需要的是[1 ，10]的整数，那我们改如何实现呢❓❓

1️⃣首先我们用乘积的形式设置随机数为0-10，并且使用 Math.floor 函数取整，即为[0 ，9]

Math.floor(Math.random()*10

2️⃣在使用加法来设置成[1 ，10]

1 + Math.floor(Math.random()*10);

整体代码：

<body> <div> <h2>猜数字游戏</h2> 玩家输入一个 1-10 数字：<input id="input_num" type="text"><p></p> <input type="button" value=" 查看结果 " onclick="selectResult()"> <div id="result_div"> </div> </div> <hr> <script> function selectResult() { //产生随机数1-10 var randomNum = 1 + Math.floor(Math.random()*10); var userInputNum = document.getElementById("input_num").value; var msg; if(randomNum == userInputNum) { msg="<h4>恭喜：猜对了</h4>"; } else { msg="<h4>抱歉：猜错了。正确的数字是："+randomNum+"</h4>" } document.getElementById("result_div").innerHTML = msg; } </script> </body>

4.jquery版本猜数字游戏

使用原生版本也可以拿到控件，但是比较麻烦，代码比较长；这时候使用 jquery 来写的好处是：代码比较精简；兼容性好

1️⃣下载 jquery ：我将jquery1.9版本放在了我的博客资源里，大家可以去下载使用

2️⃣写代码的时候，让jquery.min.js和html文件处于同一目录，这样就可以使用 jquery 的操作方式操作元素：

jquery进行处理兼容性的时候，处理的是拿组件的形式，内置的属性都是一样的：

//产生随机数1-10 var randomNum = 1 + Math.floor(Math.random()*10);

怎么进行拿组件呢❓❓❓设置DOM树的时候操作不一样

var userInputNum = jQuery("#input_num").val(); if(randomNum == userInputNum) { msg="<h4>恭喜：猜对了</h4>"; } else { msg="<h4>抱歉：猜错了。正确的数字是："+randomNum+"</h4>" } jQuery("#result_div").html(msg);

总体代码：

<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>JS-DemoIV</title> <script src="jquery.min.js"></script> </head> <body> <div> <h2>猜数字游戏</h2> 玩家输入一个 1-10 数字：<input id="input_num" type="text"><p></p> <input type="button" value=" 查看结果 " onclick="selectResultJq()"> <div id="result_div"> </div> </div> <hr> <script> //jquery猜数字游戏 function selectResultJq() { //产生随机数1-10 var randomNum = 1 + Math.floor(Math.random()*10); var userInputNum = jQuery("#input_num").val(); if(randomNum == userInputNum) { msg="<h4>恭喜：猜对了</h4>"; } else { msg="<h4>抱歉：猜错了。正确的数字是："+randomNum+"</h4>" } jQuery("#result_div").html(msg); } </script> </body>

5.聚合搜索

6.表白墙

<!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> <script src="jquery.min.js"></script> </head> <body> <div style="width: 100%;text-align: center;"> <h2>表白墙</h2> 谁      ：<input id="username"><p></p> 对谁   ：<input id="tousername"><p></p> 说什么：<input id="msg"><p></p> <input type="button" value=" 提交 " onclick="mysub()"><p></p> <div id="div_allmsg"> </div> </div> <script> function mysub(){ var iptUserName = jQuery("#username"); var iptToUserName = jQuery("#tousername"); var iptMsg = jQuery("#msg"); // 1.非空效验 if(iptUserName.val().trim()==""){ alert("请先输入您的名字！"); iptUserName.focus(); return; } if(iptToUserName.val().trim()==""){ alert("请先输入对方的名字！"); iptToUserName.focus(); return; } if(iptMsg.val().trim()==""){ alert("请先输入信息！"); iptMsg.focus(); return; } // 2.将内容展示在表白墙 jQuery("#div_allmsg").append(iptUserName.val()+"对"+iptToUserName.val()+"说："+iptMsg.val()+"<p></p>"); // 3.清空输入的内容 iptUserName.val(""); iptToUserName.val(""); iptMsg.val(""); } </script> </body> </html>

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

html怎么和jsp交互（HTML与JavaScript联动）

一           、数组（增删查改）

1.创建数组

2. 增加数组元素

3.删除数组中的元素

4.查看数组元素

5.修改数组元素

二      、创建方法

1.函数

2.作用域

3.作用域链

三                 、对象

1.使用 字面量 创建对象 [常用]

2.使用 new Object 创建对象

四           、JavaScript 的对象和 Java 的对象的区别

五、JS 操作 DOM

1.得到控件

2.操作元素

2.1 获取元素值

2.2 设置元素的值

2.3 innerText /innerHTML

3.原生猜数字游戏

4.jquery版本猜数字游戏

5.聚合搜索

6.表白墙

一、数组（增删查改）

二、创建方法

三、对象

1.使用字面量创建对象 [常用]

四、JavaScript 的对象和 Java 的对象的区别

五、JS 操作 DOM