JavaScript-输出内容(document.write)
第一种:输出内容用"“括起,直接输出”"号内的内容。
<script type="text/javascript">
document.write("I love JavaScript!"); //内容用""括起来,""里的内容直接输出。
</script>
第二种:通过变量,输出内容
<script type="text/javascript">
var mystr="hello world!";
document.write(mystr); //直接写变量名,输出变量存储的内容。
</script>
第三种:输出多项内容,内容之间用+号连接。
<script type="text/javascript">
var mystr="hello";
document.write(mystr+"I love JavaScript"); //多项内容之间用+号连接
</script>
第四种:输出HTML标签,并起作用,标签使用""括起来。
<script type="text/javascript">
var mystr="hello";
document.write(mystr+"<br>");//输出hello后,输出一个换行符
document.write("JavaScript");
</script>
JavaScript-警告(alert 消息对话框)
我们在访问网站的时候,有时会突然弹出一个小窗口,上面写着一段提示信息文字。如果你不点击“确定”,就不能对网页做任何操作,这个小窗口就是使用alert实现的。
语法:
alert(字符串或变量);
<script type="text/javascript">
var mynum = 30;
alert("hello!");
alert(mynum);
</script>
![](https://i-blog.csdnimg.cn/blog_migrate/2e698b7ef823df2333653e9a5c86f97b.png)
点击确定后
再次点击确定,回到原来页面
注意:
- 在点击对话框"确定"按钮前,不能进行任何其它操作。
- 消息对话框通常可以用于调试程序。
- alert输出内容,可以是字符串或变量,与document.write 相似。
JavaScript-确认(confirm 消息对话框)
confirm 消息对话框通常用于允许用户做选择的动作,如:“你对吗?”等。弹出对话框(包括一个确定按钮和一个取消按钮)
语法
confirm(str);
参数说明
str:在消息对话框中要显示的文本
返回值: Boolean值
当用户点击"确定"按钮时,返回true
当用户点击"取消"按钮时,返回false
注: 通过返回值可以判断用户点击了什么按钮
<script type="text/javascript">
var message = confirm("明天去图书馆吗?");
if (message == true) {
document.write("真是个好学的孩子!");
} else {
document.write("年轻人要多看书!");
}
</script>
![](https://i-blog.csdnimg.cn/blog_migrate/c02000928437b76f209a976c1ef8736c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ecd9862fe2a3e0ebd6c391729d0edc56.png)
注: 消息对话框是排它的,即用户在点击对话框按钮前,不能进行任何其它操作。
JavaScript-提问(prompt 消息对话框)
prompt 弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框(包含一个确定按钮、取消按钮与一个文本输入框)。
语法:
prompt(str1, str2);
参数说明
str1: 要显示在消息对话框中的文本,不可修改
str2:文本框中的内容,可以修改
<script type="text/javascript">
var score; //score变量,用来存储用户输入的成绩值。
score = prompt("请输入你的成绩:");
if (score >= 90) {
document.write("你很棒!");
} else if (score >= 75) {
document.write("不错吆!");
} else if (score >= 60) {
document.write("要加油!");
} else if (score > 0) {
document.write("要努力了!");
}
</script>
![](https://i-blog.csdnimg.cn/blog_migrate/3489fc3046319cb0a99ed42c7e61f362.png)
输入 75 点击确认之后
注:在用户点击对话框的按钮前,不能进行任何其它操作。
JavaScript-打开新窗口(window.open)
语法
window.open([URL], [窗口名称], [参数字符串])
窗口名称:
“_top”、"_blank"、"_self"具有特殊意义的名称。
_blank:在新窗口显示目标网页
_self:在当前窗口显示目标网页
_top:框架网页中在上部窗口中显示目标网页
//新窗口打开http://www.baidu.com网站,大小为300px * 200px,无菜单,无工具栏,无状态栏,有滚动条窗口
<script type="text/javascript">
window.open(
"http://www.baidu.com",
"_blank",
"width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes"
);
</script>
效果:不好意思哈,input 里面 value 属性值打错一个字,应该是窗口,不过这不是重点,能说明主要问题更重要!
在原大窗口点击刷新之后,跳回一开始的界面,也就是说,刷新的还是当前 html 页面
其他部分不变,"_blank"换成 "_top"后的效果
点击按钮之后,直接整个页面变成 百度首页!点击刷新按钮,还是新的百度首页,也就是说,此时刷新的是百度的首页,也就是跳转之后的地址。
![](https://i-blog.csdnimg.cn/blog_migrate/da678c4132801214f5370a54c1453cf7.png)
点击左上角向左的箭头,可以回到原来的页面,也就是只有一个提示按钮的页面。
换成 “_self” 过程效果是跟 "_top"一样的。好,问题来了,两者有何区别?
在HTML中target目标的四个参数的用法:
target="_self"表示:将链接的画面内容,显示在目前的视窗中。(内定值) 。 即:同窗口打开
target="_parent"表示:将链接的画面内容,当成文件的上一个画面。即:当前窗口打开。
target="_top"表示:将框架中链接的画面内容,显示在没有框架的视窗中(即除去了框架)。即:顶端打开窗口。
target="_blank"表示:将链接的画面内容,在新的浏览视窗中打开。即:打开新窗口。
当网页没有框架时,target="_self"和target="_parent"以及target="_top"三种方式的显示方式几乎相同。
JavaScript-关闭窗口(window.close)
语法
window.close(); //关闭本窗口
<窗口对象>.close(); //关闭指定的窗口
<script type="text/javascript">
function close_win() {
var mywin = window.open("http://www.baidu.com"); //将新打的窗口对象,存储在变量mywin中
mywin.close();
}
</script>