前端输出测试语句……（实用篇）

旧城等待， 2021-12-21 12:57 116阅读 0赞

## javascript输出测试语句的三种方式（常用) ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		
    		
    		<script type="text/javascript">
    			
    			
    
    			alert("Hello World");  /*控制浏览器弹出一个提示框*/
    			
    		
    			document.write("来啦？！！"); 
                            /*控制浏览器在页面中输出一个内容document.write()向body中写一个内容*/
    			
    		
    			console.log("被发现了~~~");  /*向控制台输出一个内容*/
    			
    		</script>
    		
    	</head>
    	<body>
    		
    	</body>
    </html>

## 扩展： ##

**1、alert("要输出的内容");**

\->在浏览器中弹出一个对话框,然后把要输出的内容展示出来

\->alert都是把要输出的内容首先转换为字符串然后在输出的

**2、document.write("要输出的内容");**

\->直接的在页面中展示输出的内容

**3、console.log("要输出的内容");**

\->在控制台输出内容

Console.error("我是错误") // 了解

Console.warn("我是一个警告"）//了解

**4、value ->给文本框(表单元素)赋值内容**

\->获取文本框中(表单元素)的内容

document.getElementById("search").value = "要给\#search这个文本框添加的内容";

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    	<script src="jquery-3.4.1.js"></script>
    		
    <script>
    
     	function changestatus(){
    		//$("#money").val(888);//val()这种写法有时会失效,特别是他的父元素是dosplay:none时
    		$("#money").attr("value",888);//推荐这种写法,可正常赋值
    		//document.getElementById("money").value=888;//js原始写法
    		}
     	
    </script>
    
    		
    	</head>
    	<body>
    	<input id="money" type="text">
    	<button onclick="changestatus()">加工资</button>
    	</body>
    </html>

**5、innerHTML/innerText ->给除了表单元素的标签赋值内容**

document.getElementById("div1").innerHTML = "you need walk";  
document.getElementById("div1").innerText = "you need walk and run";

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <body>
    
    <h1>我的第一张网页</h1>
    
    <p>我的第一个段落</p>
    
    <div>六六</div><p id="demo"></p>
    
    <script>
     document.getElementById("demo").innerText = 6 * 6;
     //document.getElementById("demo").innerHTML = 6 + 6;
    </script>
    
    </body>
    </html>

**6、Confirm(" 输出带有是否的弹出框")**

a）点击确定返回true

d) 点击取消返回false

confirm在alert的基础上增加了让用户选择性操作（提供两个按钮：确定和取消）  
注意：输出格式也和alert一样也是字符串格式的。  
var flag = confirm(‘确定要删除吗？’);  
alert(flag);

当用户点击确定按钮的时候，得到的结果是布尔类型的true，点击取消或者点击关闭“x”,得到的布尔类型的false，此时我们可以根据接受的结果做不同的处理就知道用户进行什么样的操作了

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<script>
    
    	function rusure()
    	{ 
    		question = confirm("确实要去进入吗?") 
    		console.log(question);
    		if (question !="0"){
    			window.open("","测试公告窗口","width=340,height=163,toolbar=0,status=0,menubar=0,resize=0");
    		}
    
    	}
    
    </script>
    
    		
    	</head>
    	<body>
    	<a href="" onClick="rusure() ;return false;">来点击我</a>
    	</body>
    </html>

**7、Prompt("输入框")；**

a) 输入内容被返回

d)不输入内容返回null

在confirm 的基础上增加一个输入框，可以让用户输入一些文字  
例如：删除的时候除了提示用户是否要删除，而且还想让用户输入删除的原因，这时候就可以使用prompt()。  
var flag = prompt('确定要删除吗');  
alert(flag);  
当用户点击确定按钮的时候，我们可以获取到用户输入的内容，获取的内容是字符串格式的。（如果用户没输入内容获取到的结果是空字符串）；当用户点击取消或者“X”，得到的结果是null。

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		
    		
    	<script type="text/javascript">
    		function disp_prompt(){
    			var name = prompt("请输入您的名字","LALALA")
    			if(name!=null && name !=""){
    				document.write("Hello,"+ name);
    				}
    		}
    	</script>
    
    		
    	</head>
    	<body>
    		<input type="button" onclick="disp_prompt()" value="显示一个提示框" />
    	</body>
    </html>