欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

javascript三种输出方式实例讲解

程序员文章站 2022-06-20 18:33:57
javascript三种输出方式 1):使用window.alert()弹出警告框。 2):使用document.write()方法将内容写到html文档中。 3):使用co...

javascript三种输出方式

1):使用window.alert()弹出警告框。

2):使用document.write()方法将内容写到html文档中。

3):使用console.log()写入到的控制台。

1 使用弹出警告框

通过alert()方法输入数据,代码如下:

window.onload=function(){
	alert('弹出警告框');
}

效果:

javascript三种输出方式实例讲解

2 直接写入到html文档中

通过document.write()方法将内容写到html文档中代码如下:

html代码:

<!doctype html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>1</title>  
    <script type="text/javascript" src="demo.js"></script>  
    <link rel="stylesheet" type="text/css" href="demo.css">  
</head>  
<body>  
我是原内容  
</body>  
</html>  

我是原内容javascript代码:

document.write('输入到html中'+'<br>')  

效果:

javascript三种输出方式实例讲解

ps:如果在整个文档加载完毕在执行的document.write(),会完全覆盖已有的html内容

html代码:

<!doctype html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>1</title>  
    <script type="text/javascript" src="demo.js"></script>  
    <link rel="stylesheet" type="text/css" href="demo.css">  
</head>  
<body>  
我是原内容  
</body>  
</html> 

我是原内容

javascript代码:

window.onload=function(){  
    document.write('输入到html中')  
}  

效果:

javascript三种输出方式实例讲解

3 写到控制台

使用console.log()写入到控制台

html代码:

<!doctype html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>1</title>  
    <script type="text/javascript" src="demo.js"></script>  
    <link rel="stylesheet" type="text/css" href="demo.css">  
</head>  
<body>  
我是原内容  
</body>  
</html>  

我是原内容

javascript代码:

console.log('写到控制台')

效果:

javascript三种输出方式实例讲解

总结:javascript常用的三种输出方式:使用警告框,直接输入到网页,写到控制台。