JavaScript学习：输入输出_js怎么定义输入

作者：从前慢现在也慢 | 2024-04-22 00:33:19

踩

js怎么定义输入

day one

JavaScript简介

JavaScript是一个脚本语言，这门语言可用于 HTML 和 web，
更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
一个网页包含三个部分：结构，行为，样式；
结构：HTML
样式：css
行为：JavaScript
1
2
3
4
5
6

JavaScript的输出语句：

window.alert()；
//弹出警告框；
console.log();
//写入到浏览器的控制台
innerHTML();
//写入到HTML元素中
document.write();
//写入到HTML文档中
1
2
3
4
5
6
7
8

实例

弹出警告框

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>警告框</title>
	</head>
	<body>
		
	<h1>我的第一个页面</h1>
	<p>我的第一个段落。</p>
	<script>
	window.alert("I love you !");
	</script>
		
	</body>
	</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

写入到浏览器控制台

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>控制台显示</title> 
</head>
<body>
	
<h1>我的第一个 Web 页面</h1>
<p>
浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。
</p>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
	
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

写入到HTML元素中

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>写入HTML元素</title> 
</head>
<body>
	
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落。</p>
<script>
document.getElementById("demo").innerHTML="段落已修改。";
</script>
	
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

写入HTML文档

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>写入文档</title> 
</head>
<body>
	
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
document.write(Date());
</script>
	
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

注意：请使用 document.write() 仅仅向文档输出写内容。

如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖
eg：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
	
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() 
{
    document.write(Date());
}
</script>
	
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

JavaScript输入语句

JS提供了两种输入方法prompt()和confirm()，接下来就对他们进行学习；

1、prompt（）方法

弹出一个允许输入值得对话框，带有确认和取消两个按钮，并允许设置默认值
语法格式：
prompt(msg,defaultText)
// msg:要显示的文本信息；	
//defaultText:输入框的默认值；
1
2
3
4
5

实例：

<script type="text/javascript">
		var score = parseInt(window.prompt('input',100));
		if(score > 90 && score <= 100){
			document.writeln("greet");
		}else if(score>80 && score<=90){
			documetn.writeln("good");
		}else if(score >70 && score <= 80){
			document.write("normal");
		}else {
		document.write('bad');
		}
</script>
1
2
3
4
5
6
7
8
9
10
11
12

运行结果

2、confirm（）方法

弹出一个确认消息对话框，有确定和取消两个按钮，点击确定就返回true，点击取消就返回false。

弹出一个对话框，显示已经编辑好的内容，并带有确定和取消两个按钮，点击确定返回true，点击取消返回false;
语法格式：
confirm(message);  //message为想要显示的内容
1
2
3

实例：

	<body>
		<script type="text/javascript">
			function clickbut(){
				var cond = window.confirm("you love me");
				if (cond) {
					alert("I love you too");
				} else {
					var cond3 = window.confirm("are you sure?");
					if (cond3) {
						alert("broken heart");
					} else {
						alert("I will be waiting for you all the time");
					}
				}
			}
		</script>	
		<button onclick="clickbut()">hello</button>
	</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

运行结果

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/465927