web前端学习

输出概述

输出方式有四种： 1.有元素的innerHTML属性设置该元素的内容 2.弹窗类的alert、confirm、prompt，例如alert("这里是弹窗输出的内容"); 3.页面显示类的，例如document.write("<p>这里是页面输出的内容</p>"); 4.控制台调试输出，console.log、info、warn、error，例如console.info("这里是控制台输出的内容");

1.页面输出

在页面上直接显示输出内容

	
var output_display = document.getElementById("out_display");
function output_doc(){
	output_display.innerHTML = "这是测试输出信息";
}

2.弹窗

用alert函数进行弹窗输出

confirm用户点击：

prompt用户输入：

	
<button onclick="alert_info()">alert弹窗</button>
<button onclick="confirm_info()">confirm弹窗</button>
<button onclick="prompt_info('这是测试输出信息')">prompt弹窗</button>

	
function alert_info(event){
	alert("这是测试输出信息");
}

function confirm_info(event){
	let confirm_var = confirm("这是测试输出信息");
	if(confirm_var == 1){
		out_confirm.innerHTML = "确定";
	}else{
		out_confirm.innerHTML = "取消";
	}
}

function prompt_info(event){
	let prompt_var = prompt("这是测试输出信息");
	out_prompt.innerHTML = prompt_var.toString();		
}

3.console输出

该类输出的输出在开发者工具的控制台一栏点击右上角眼睛图标打开开发者工具进行查看

	
console.log("这是log测试输出");  	//输出普通信息					
console.info("这是info测试输出");  	//输出提示信息					
console.error("这是error测试输出"); 	//输出错误信息					
console.warn("这是warn测试输出");  	//输出警告信息

4.document.write()

document.write( )方法可以向文档写文本、HTML表达式或JavaScript代码。语法格式如下： document.write(“输出内容” );

document.write扩展知识

	
//不会覆盖，会在网页中增加内容
document.write("hello world!");

//会覆盖，网页只显示hello world!
window.onload = function(){
	document.write("hello world!");
}