当前位置：首页 > article >正文

Javaweb开发项目之JS知识(JavaScript)

article 2025/7/4 21:00:18

一、JS介绍

二、点击事件案例

三、计算器

原理解释

实现代码

1. 复杂版（需要写四个函数）

2. 改进版代码，只用写一个cal函数，把加减乘除符号当变量进行传递

四、数组

一、JS介绍

1、直接嵌入HTML页面。

2、由浏览器解释执行代码，不进行预编译。

JS：解释型语言

Java: 编译型语言

JS不区分单引号和双引号。

若想写JavaScript语言，使用script标签，type=text/javascript，直接写在body标签中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--嵌入在HTML语言之中-->
<script type="text/javascript">var v1=3;var v2=4;console.log(v1+v2);var v="hello";console.log(v);
//弹出框alert(v);
</script></body>
</html>

二、点击事件案例

在输入框中输入文字，点击按钮后弹窗弹出对应内容

设置一个输入框input便签和一个按钮button标签
为按钮绑定点击事件
为输入框设置id值，使其在后续获取输入框的内容
在script标签中定义JavaScript，开始写js代码
js端对点击事件的函数进行定义，获取到输入框的内容，再进行弹窗展示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--输入框-->
<!--通过id来访问到输入框的内容-->
<input type="text" id="inputId"/><br><!--按钮，绑定点击事件clickMe-->
<button onclick="clickMe()">点我</button><script type="text/javascript">function clickMe(){//通过id找到input标签var input = document.getElementById('inputId');//获取到输入框里的输入值var str = input.value;alert(str);}
</script></body>
</html>

三、计算器

原理解释

要点：

两种设置button的方式都可以，可以直接用button标签设置，也可以用input标签，通过type=button来设置。
定义输入框十需要给每一个输入框设置一个唯一的id值，使其在后续可以获取到文本框的位置和内容。
输入文本框获取到的内容都是字符串型，所以需要用parseInt函数转成int型。
使用getElementId(‘id’)函数找到文本框的位置，再使用value属性获取到文本狂战中的值。
最后的计算结果需要展示在文本框中，因此需要把计算结果赋值给文本框的value属性

实现代码

1. 复杂版（需要写四个函数）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1>简易计算器</h1><table><tr><td>第一个数</td><td><input type="text" id="x"></td></tr><tr><td>第二个数</td><td><input type="text" id="y"></td></tr><tr><td><button onclick="add()">+</button><button onclick="subb()">-</button><input type="button" value="*" onclick="mul()"><input type="button" value="/" onclick="div()"></td></tr><tr><td>结果</td><td><input type="text" id="result"></td></tr></table><script type="text/javascript">
<!--    add点击事件-->function add(){var x=document.getElementById('x').value;var y=document.getElementById('y').value;//拿到的xy都是字符串，不是数字,使用parseInt函数解析成int型才能进行数字运算var z=parseInt(x)+parseInt(y);var resultNum = document.getElementById('result');resultNum.value=z;}function subb(){var x=document.getElementById('x').value;var y=document.getElementById('y').value;//拿到的xy都是字符串，不是数字,使用parseInt函数解析成int型才能进行数字运算var z=parseInt(x)-parseInt(y);var resultNum = document.getElementById('result');resultNum.value=z;
}function mul(){var x=document.getElementById('x').value;var y=document.getElementById('y').value;//拿到的xy都是字符串，不是数字,使用parseInt函数解析成int型才能进行数字运算var z=parseInt(x)*parseInt(y);var resultNum = document.getElementById('result');resultNum.value=z;
}function div(){var x=document.getElementById('x').value;var y=document.getElementById('y').value;//拿到的xy都是字符串，不是数字,使用parseInt函数解析成int型才能进行数字运算var z=parseInt(x)/parseInt(y);var resultNum = document.getElementById('result');resultNum.value=z;
}</script></body>
</html>

2. 改进版代码，只用写一个cal函数，把加减乘除符号当变量进行传递

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1>简易计算器</h1><table><tr><td>第一个数</td><td><input type="text" id="x"></td></tr><tr><td>第二个数</td><td><input type="text" id="y"></td></tr><tr><td><button onclick="cal('+')">+</button><button onclick="cal('-')">-</button><input type="button" value="*" onclick="cal('*')"><input type="button" value="/" onclick="cal('/')"></td></tr><tr><td>结果</td><td><input type="text" id="result"></td></tr></table><script type="text/javascript">
<!--    函数的参数传过来时，直接写传来的参数的名字-->function cal(operator){var x=document.getElementById('x').value;var y=document.getElementById('y').value;var z;switch (operator){case '+':z=parseInt(x)+parseInt(y);break;case '-':z=parseInt(x)-parseInt(y);break;case '*':z=parseInt(x)*parseInt(y);break;case '/':z=parseInt(x)/parseInt(y);break;default:break;}var resultNum = document.getElementById('result');resultNum.value=z;}</script></body>
</html>

四、数组

js中的数组不需要规定长度，也不需要设置类型，使用push和pop存元素和出元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script type="text/javascript">
<!--        定义时可以不规定类型，不定义长度-->var array = new Array();console.log(array.length);//可以在数组中存放任意类型的值var array1= new Array(100,'a',true);console.log(array1);var a2 = new Array();a2.push('zhangsan');a2.push(5);a2.push(true);a2.push(586);console.log(a2.length);console.log(a2[1]);//输出最上面的元素console.log(a2.pop());</script></body>
</html>

查看全文

http://www.lryc.cn/news/2419773.html