回顾JS如何向网页中输入内容,与浏览器窗口进行交互
第2章 请和我互动（常用互动方法）
本章节主要讲解如何向网页中输入内容，如何与浏览器窗口进行交互，通过简单的对象方法就可以轻松实现。
- 2-1 JavaScript-输出内容（document.write）
- 2-2 JavaScript-警告（alert 消息对话框）
- 2-3 JavaScript-确认（confirm 消息对话框）
- 2-4 JavaScript-提问（prompt 消息对话框）
- 2-5 JavaScript-打开新窗口（window.open）
- 2-6 JavaScript-关闭窗口（window.close）
- 2-7 编程练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript-输出内容（document.write）</title>
<script type="text/javascript">
//1.内容用""括起来，直接输出内容
document.write(‘今天2020-4-8‘);
//2.通过变量输出内容
var ceshi="12：32";
document.write(ceshi);
//3.输出多项内容，之间用+号连接起来
var myceshi="document.write输出";
document.write("javascript"+myceshi);
//4.输出HTML标签，标签使用""括起来
var mystr="今天心情怎么样?";
document.write("<br />"+mystr+" "+"答：一般般");
</script>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>alert()消息对话框</title>
<script type="text/javascript">
//alert(字符串或者是变量);
var mynum=30;
alert("hello");
alert(mynum);
</script>
</head>
<body>
<!--alert弹出消息对话框(包含一个确定按钮)。-->
<img src="images/demo2-2-1.jpg" >
<img src="images/demo2-2-2.jpg" >
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript-确认（confirm 消息对话框</title>
<script type="text/javascript">
//confirm(str);str：在消息对话框中要显示的文本
var mystr=confirm("话说今天你很好看呀");
if(mystr==true){
alert("笑，老实人就爱说实话");
}
else{
alert("别骗我，刚我还听到你说不好看")
}
</script>
</head>
<body>
<p>弹出框类似下图:</p>
<img src="images/demo2-3.jpg" >
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript-提问（prompt 消息对话框）</title>
<script type="text/javascript">
var myname=prompt("请输入你的姓名");
if(myname!=null){
alert("你好"+myname);
}
else{
alert("你好，陌生人")
}
</script>
</head>
<body>
<!-- 语法:
prompt(str1, str2);
参数说明：
str1: 要显示在消息对话框中的文本，不可修改
str2：文本框中的内容，可以修改
返回值:
1. 点击确定按钮，文本框中的内容将作为函数返回值
2. 点击取消按钮，将返回null -->
<img src="images/demo2-4.jpg" >
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript-打开新窗口（window.open）</title>
<script type="text/javascript">
// window.open([URL], [窗口名称], [参数字符串])
function rec(){
window.open(‘http://www.dhnblog.com/‘,‘_blank‘,‘width=300,height=200,left=0,menubar=yes,toolbar=yes,scrollbars=yes,status=no‘)
}
</script>
</head>
<body>
<!-- URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
窗口名称：可选参数，被打开窗口的名称。
1.该名称由字母、数字和下划线字符组成。
2."_top"、"_blank"、"_self"具有特殊意义的名称。
_blank：在新窗口显示目标网页
_self：在当前窗口显示目标网页
_top：框架网页中在上部窗口中显示目标网页
3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
4.name 不能包含有空格。
参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。 -->
<input type="button" name="" id="" value="点我打开新窗口" onclick="rec()"/>
<br />
<img src="images/demo2-5.jpg" >
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript-关闭窗口（window.close）</title>
<script type="text/javascript">
// window.close(); //关闭本窗口
// <窗口对象>.close(); //关闭指定的窗口
// window.open(‘http://www.dhnblog.com/‘,‘_blank‘,‘top=100,left=100,width=200,height=300,menubar=yes,toolbar=yes,status=no,scrollbars=yes‘);
//window.close();
var mywin=window.open(‘http://www.dhnblog.com/‘,‘_blank‘,‘top=100,left=100,width=200,height=300,menubar=yes,toolbar=yes,status=no,scrollbars=yes‘);
// //将新打的窗口对象，存储在变量mywin中
mywin.close();
</script>
</head>
<body>
<p>上面代码在打开新窗口的同时，关闭该窗口，看不到被打开的窗口。</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>编程练习</title>
<script type="text/javascript">
/* 1、新窗口打开时弹出确认框，是否打开
提示: 使用 if 判断确认框是否点击了确定，如点击弹出输入对话框，否则没有任何操作。
2、通过输入对话框，确定打开的网址，默认为 http://www.dhnblog.com/
3、打开的窗口要求，宽400像素，高500像素，无菜单栏、无工具栏。*/
// var str=confirm(‘是否打开新窗口‘);
// if(str==true){
// window.open(‘http://www.dhnblog.com/‘,‘_blank‘,‘width=400,height=500,menubar=no,toolbar=no‘)
// }
// function myceshi(){
// var ceshi=prompt(‘是否打开新窗口‘,‘http://www.dhnblog.com/‘);
// if(ceshi!=null){
// window.open(‘http://www.dhnblog.com/‘,‘_blank‘,‘width=400,height=500,menubar=no,toolbar=no‘)
// }
// }
//正确代码，上面为演示
function myceshi(){
if(confirm(‘确定打开新窗口吗‘)){
var url = prompt(‘请输入一个网址‘,‘http://www.dhnblog.com/‘)
window.open(url,"_blank","toolbar=no, menubar=no, scrollbars=yes, width=400, height=400")
}
}
</script>
</head>
<body>
<input type="button" name="" id="" value="点击打开新窗口" onclick="myceshi()" />
</body>
</html>