跟我学JavaScript--事件,输出
来源:互联网 发布:无线 网络摄像头 编辑:程序博客网 时间:2024/06/05 09:31
事件
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>
在打开新窗口的同时关闭该窗口,看不到被打开的窗口
- 跟我学JavaScript--事件,输出
- 跟我学JavaScript--HTML DOM--DOM事件,导航
- 跟我学JavaScript--字符串
- 跟我学JavaScript--对象,函数
- 跟我学JavaScript--运算符
- 跟我学JavaScript--typeof,null,undefined
- 跟我学JavaScript--类型转换
- 跟我学JavaScript--1.HTML调用JavaScript
- 跟我学ABAP/4- 模块化:事件和子程序
- 跟我学jquery(六)jquery中事件详解 .
- 跟我学jquery(六)jquery中事件详解
- 跟我学android之四 事件驱动模型
- 跟我学JavaScript--2.数据类型以及常用语句
- 跟我学JavaScript--3.引用类型,即对象
- 跟我学《JavaScript高程3》,开讲啦……
- 跟我学《JavaScript高程3》视频教程,下载地址
- 跟我学《JavaScript高程3》 第二讲,课程笔记
- 跟我学《JavaScript高程3》第三讲,课程笔记
- JSP标签
- Android Fragment 详解(未完...)
- Qt
- Understanding CSRF
- JAVA编程中的类和对象
- 跟我学JavaScript--事件,输出
- c# 自动关闭messagebox
- Android 获取浏览器当前分享页面的截屏
- Java中的形式参数与返回值类型的浅略了解
- JDBC驱动程序分类
- asn1c
- Java WeakReference的理解与使用
- Personal小金库(避免遗忘,优秀的网址会保存于此方便自己查看)
- 在Tomcat中配置数据源