事件
1.HTML事件是发生在HTML元素上的,当在HTML页面上使用JavaScript时,可以触发这些事件
2.HTML事件可以是浏览器行为,或是用户行为
3.常见的HTML事件:
onchange : HTML元素改变
onclick : 用户点击HTML元素
onmouseover : 用户在一个HTML元素上移动鼠标
onmouseout : 用户从一个HTML元素上移开鼠标
onkeydown : 用户按下键盘按键
onload : 浏览器已完成页面的加载
4.HTML事件作用:处理表单验证,用户输入,用户行为及浏览器动作
常见用途:
页面加载时触发事件
页面关闭时触发事件
用户点击按钮执行动作
验证用户输入内容的合法性
5.执行JavaScript事件代码的方法:
HTML事件属性可以直接执行JavaScript代码
HTML事件属性可以调用JavaScript函数
可以为HTML元素指定自己的事件处理程序
可以阻止事件的发生
输出
1.JavaScript没有任何打印或者输出的函数
2.输出数据的方式:
window.alert() : 弹出警告框
document.write() : 将内容显示在HTML页面
innerHTML : 写入到HTML元素
- console.log() : 写入到浏览器的控制台
3.如果在HTML页面完成加载后执行document.write(),整个HTML页面将被覆盖
如.
<body>
<p>这里是页面</p>
<button onclick="myFunc()">点击</button>
<script>
function myFunc(){
document.write(Date());
}
</script>
</body>
运行结果如下:
点击按钮后:
警告 alert()消息对话框
警告框弹出,如果不点“确定”,则不能对网页做任何操作
语法:
alert("字符串");
或 alert(变量);
输出内容 document.write
- 直接输出“”内的内容
<script type="text/javascript">
document.write("Nico"); //Nico
</script>
- 通过变量,输出内容
<script type="text/javascript">
var myName = "Nico";
document.write(myName); //Nico
</script>
- 输出多项内容,用 + 连接
<script type="text/javascript">
var myName = "Nico";
document.write("Hello,"+myName); //Hello,Nico
</script>
- 输出HTML标签并起作用,标签用“”括起来
<script type="text/javascript">
var myName = "Nico";
document.write(myName+"<br>"); //输出Nico后输出一个换行符
</script>
确认 confirm消息对话框
作用:允许用户做选择
(用户在选择点击对话框前,不能进行任何其他操作)
语法:confirm(str);
- str:在消息对话框中要显示的文本
- 返回值:布尔值
当用户点击“确定”按钮时,返回true
当用户点击“取消”按钮时,返回false
(通过返回值判断用户点击了哪种按钮)
如.
<script type="text/javascript">
var myMess=confirm("Are you Nico?");
if(myMess)
document.write("You are hero");
else
document.write("Work hard");
</script>
提问 prompt消息对话框
prompt弹出消息对话框,用于询问一些需要与用户交互的信息。包含一个确定按钮,取消按钮和一个文本输入框
(用户在点击对话框按钮前,不能进行任何其他操作)
语法:prompt(str1,str2);
- str1:要显示在消息对话框中的文本,不可修改
- str2:文本框中的内容,可以修改
- 返回值:
点击确定按钮,文本框中的内容将作为函数返回值
点击取消按钮,将返回null
如.
<script type="text/javascript">
var myMess=prompt("输入你的名字");
if(myMess)
alert("Hello,"+myMess);
else
alert("Hi,friend");
</script>
打开新窗口 window.open
open()方法可以查找一个已经存在或者新建的浏览器窗口
语法:window.open([url],[窗口名称],[参数字符串]);
参数说明:
url:
1.可选参数。
2.作用:在窗口中显示网页的网址或路径
3.若省略,则它的值是空字符串,窗口不显示任何文档窗口名称:
1.可选参数。
2.命名方式:由字母,数字和下划线组成
3.相同名称的窗口只能创建一个,要想创建多个窗口则名称不能相同
4.名称不能包含有空格特殊意义名称:
1)._blank:在新窗口显示目标网页
2). _self:在当前窗口显示目标网页
3)._top:框架网页中在上部窗口中显示目标网页(若一个窗口嵌套其他多个窗口,则在最顶层的窗口显示目标网页)
参数字符串:
1.可选参数
2.可设置多个参数,用逗号隔开
如.
<script>
function myFunc(){
window.open('http://www.baidu.com','_blank','width=600,height=300,scrollbars=yes,toolbar=no,menubar=no,status=no');
}
</script>
关闭窗口 window.close
用法:
关闭本窗口:window.close();
关闭指定窗口:<窗口对象>.close();
如.
<script>
var myWin=window.open('http://www.baidu.com');
myWin.close();
</script>
在打开新窗口的同时关闭该窗口,看不到被打开的窗口