java使用js引擎执行代码 java javascript引擎

转载

killads 2023-12-15 09:37:53

文章标签 java使用js引擎执行代码 html 文本框 javascript 文章分类 Java 后端开发

JavaScript简介：

JavaScript是一门客户端脚本语言，主要运行在浏览器中，浏览器中负责运行JavaScript脚本代码的程序叫JavaScript引擎。
只有当浏览器读取javaScript代码时，才进行解释、执行。所以查看HTML源文件就能查看JavaScript源代码。

JavaScript基本语法实操：
变量：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
		
			//01.使用var关键字声明变量，声明时不需要指定类型
			var a = 20;
			var b = 'abc';
			var c = true;
			
			alert(a+" "+b+" "+c);
			
			//02.变量在使用过程中可以接受不同类型的值
			a = "Hello";
			b = 230.53;
			c = ["good",true,20];
			
			alert(a+" "+b+" "+c);
			</script>
	</head>
	<body>
	</body>
</html>

结果如下：

java使用js引擎执行代码 java javascript引擎_javascript

java使用js引擎执行代码 java javascript引擎_文本框_02

函数：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			
			//01.声明函数使用function关键字，不需要指定返回值类型，形参也不需要指定类型
			function sum(a,b){
				return a+b;
			}
			
			//02.调用函数：不检查实参的类型，个数
			var result = sum(5,10);
			alert(result);
			
			result = sum("Hello ","Tom");
			alert(result);
			
			result = sum("Hello ");
			alert(result);
		
		</script>
	</head>
	<body>
	</body>
</html>

结果如下：

java使用js引擎执行代码 java javascript引擎_文本框_03

java使用js引擎执行代码 java javascript引擎_文本框_04

java使用js引擎执行代码 java javascript引擎_文本框_05

object：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			
			//在JavaScript中创建对象
			//1.new Object()
			var objByNew = new Object();
			objByNew.userName = "Tom2014";
			objByNew.password = "123456";
			
			alert(objByNew.userName+" "+objByNew.password);
			
			//2.JSON格式
			//{属性名01:属性值01,属性名02:属性值02,...}
			var objByJSON = {
					userName : "Jerry",
					password : "654321"
				};
			window.alert(objByJSON.userName+" "+objByJSON.password);
		
		</script>
	</head>
	<body>
	</body>
</html>

结果如下：

java使用js引擎执行代码 java javascript引擎_java使用js引擎执行代码_06

java使用js引擎执行代码 java javascript引擎_html_07

dom查询：

dom查询.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="style.css"  />
		<script type="text/javascript">
			window.onload = function() {
				
				var btn01Ele = document.getElementById("btn01");
				btn01Ele.onclick = function() {
					
					//查找北京这个城市
					//<li id="bj">北京</li>
					//查询元素时通常都是根据元素的特点进行获取
					//在整个HTML文档中，id属性的值不能重复，否则只有第一个有效
					//给元素节点对象的变量命名时，最好以Ele或Element结尾
					var bjEle = document.getElementById("bj");
					alert(bjEle.firstChild.nodeValue);
					//<p><b>tt</b></p>
					
				};
				
				var btn02Ele = document.getElementById("btn02");
				btn02Ele.onclick = function() {
					//查找全部城市、游戏和手机
					var liEleArr = document.getElementsByTagName("li");
					//alert(liEleArr.length);
					for(var i = 0; i < liEleArr.length; i++) {
						alert(liEleArr[i].firstChild.nodeValue);
					}
				};
				
				var btn03Ele = document.getElementById("btn03");
				btn03Ele.onclick = function() {
					//查找所有单选框
					/* gender:
					<input type="radio" name="gender" value="male"/>
					Male
					<input type="radio" name="gender" value="female"/> */
					var genderEleArr = document.getElementsByName("gender");
					alert(genderEleArr.length);
				};
				
				var btn04Ele = document.getElementById("btn04");
				btn04Ele.onclick = function(){
					//读取文本框中的输入内容
					var usernameEle = document.getElementById("username");
					//读取属性值——元素对象.属性名
					//文本框的输入内容可以通过value属性进行读写
					alert(usernameEle.value);
					
				};
				
				var btn05Ele = document.getElementById("btn05");
				btn05Ele.onclick = function(){
					//设置文本框中的输入内容
					var usernameEle = document.getElementById("username");
					//设置属性值——元素对象.属性名=新值
					//文本框的输入内容可以通过value属性进行读写
					usernameEle.value = "new value";
					
				};
				
				var btn06Ele = document.getElementById("btn06");
				btn06Ele.onclick = function() {
					//读取北京这个城市的文本内容方式一
					//文本节点对象和文本节点中的文本内容
					//使用DOM标准中定义的API获取文本值
					//1.获取文本节点父节点
					//<li id="bj">北京</li>
					var bjEle = document.getElementById("bj");
					
					//2.调用父节点的 firstChild属性得到它的第一个子节点
					//alert(bjEle.firstChild.nodeName);#text
					var textNode = bjEle.firstChild;
					
					//3.得到文本节点后再获取节点的值
					var textContent = textNode.nodeValue;
					alert("full:"+textContent);
					
					//简化写法
					alert("simple:"+bjEle.firstChild.nodeValue);
					
				};
				
				
				var btn07Ele = document.getElementById("btn07");
				btn07Ele.onclick = function() {
					//读取北京这个城市的文本内容方式二
					//1.获取文本节点父节点
					//<li id="bj">北京</li>
					var bjEle = document.getElementById("bj");
					
					//使用时注意：这是一个属性，不是方法，不要在后面加()
					//alert("innerHTML="+bjEle.innerHTML);
					
					var cityEle = document.getElementById("city");
					alert(cityEle.innerHTML);
				};
				
			};
			
		</script>
	</head>
	<body>
		<div id="total">
			<div class="inner">
				<p>
					你喜欢哪个城市?
				</p>
		
				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>东京</li>
					<li>首尔</li>
				</ul>
		
				<br>
				<br>
		
				<p>
					你喜欢哪款单机游戏?
				</p>
		
				<ul id="game">
					<li id="rl">红警</li>
					<li>实况</li>
					<li>极品飞车</li>
					<li>魔兽</li>
				</ul>
		
				<br />
				<br />
		
				<p>
					你手机的操作系统是?
				</p>
		
				<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
			</div>
		
			<div class="inner">
				gender:
				<input type="radio" name="gender" value="male"/>
				Male
				<input type="radio" name="gender" value="female"/>
				Female
				<br>
				<br>
				name:
				<input type="text" name="name" id="username" value="abcde"/>
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">查找北京这个城市</button></div>
			<div><button id="btn02">查找全部城市、游戏和手机</button></div>
			<div><button id="btn03">查找所有单选框</button></div>
			<div><button id="btn04">读取文本框中的输入内容</button></div>
			<div><button id="btn05">设置文本框中的输入内容</button></div>
			<div><button id="btn06">读取北京这个城市的文本内容方式一</button></div>
			<div><button id="btn07">读取北京这个城市的文本内容方式二</button></div>
		</div>
	</body>
</html>

@CHARSET "UTF-8";

body {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
}

button {
	width: 300px;
	margin-bottom: 10px;
}

#btnList {
	float:left;
}

#total{
	width: 450px;
	float:left;
}

ul{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

.inner li{
	border-style: solid;
	border-width: 1px;
	padding: 5px;
	margin: 5px;
	background-color: #99ff99;
	float:left;
}

.inner{
	width:400px;
	border-style: solid;
	border-width: 1px;
	margin-bottom: 10px;
	padding: 10px;
	float: left;
}

结果如下：（内容较多我就不一一展示了）

java使用js引擎执行代码 java javascript引擎_javascript_08