学习javascript的目的是什么?当然是为方便用户和提升用户体验,好的交互性造就了如今热门的前端;现在,我们就开始讲解和分析一下javascript中简单的用户交互。
1.使用javascript输出内容
document.write("javascript入门");//输出内容用双引号括起来,建议用单引号可以避免很多问题的发生
document.write('I love' + str);//变量加字符串,内容之间用+连接
document.write(str + "<br>");//输出HTML标签,并起作用,标签使用""括起来。
该语句的功能是向HTML流中写内容,也可以理解为向网页中输出内容;
2.三种弹出框的学习
(1)alert-警告消息对话框,在访问网页的时候弹出的一个小窗口,上面写着一段提示文字,如果不点击确定就不能进行任何操作。
语法:alert(字符串和变量)
key:用于调试程序,其输出的内容是字符串或变量,与document.write相似
(2)confirm-确认新消息对话框,通常用于允许用户做选择操作,包括一个确认按钮和一个取消按钮
语法:confirm(str);//str,在对话框中需要选择的文本;返回值(boolean),用户点击了确认按钮返回值为true,否则为false
key:确认消息对话框具有排他性,在完成当前操作前同样不允许执行下一步操作
(3)prompt-弹出消息对话框,通常用于询问一些需要与用户进行交互的信息(包含一个确认按钮,输出按钮和一个文本输入框)
语法:prompt(str1,str2);//str1,显示在消息对话框中的文本,str2,文本框中的内容,返回值,
//点击取消返回null,点击确认返回文本输入框中的内容
key:弹出消息对话框在完全当前操作之前不允许执行下一步操作
3.打开新窗口-用于查找或新建一个浏览器窗口,例子如下
window.open('http://www.csdn.net','_top','left=0,top=100,width=600,height=400,menubar=no,toolbar=no,statu=no,scrillbar=yes')
语法:window.open([URL],[窗口名称],[参数字符串]);
URL:可选参数,需要访问的网址或路径,如果省略这个参数,或者它的值是空字符串,那么窗口就不显示任何文档。
窗口名称:可选参数,默认为_blank
_blank:生成一个新窗口显示目标网页
_top:框架网页中在上部窗口中显示目标网页
_self:在当前窗口访问指定路径或目标页面
key:相同 name(URL) 的窗口只能创建一个,要想创建多个窗口则 name(URL) 不能相同;name(URL) 不能包含有空格。
参数字符串:可选参数,设置窗口参数,各参数用逗号隔开。
参数值描述
topNumber窗口顶部离开屏幕顶部的像素数
leftNumber窗口左边离开屏幕左边的像素数
widthNumber窗口的宽度
heightNumber窗口的高度
menubaryes,no窗口有没有菜单
toolbaryes,no窗口有没有工具栏
scrollbarsyes,no窗口有没有滚动条
statusyes,no窗口有没有状态栏
4.关闭窗口
语法:window.close();
(窗口对象).close();
使用例子如下
<script type="text/javascript">
var index = confirm("确认打开新网页?");
if(index){
if(confirm("确认关闭当前网页?")){
var mywin=window.open("http://www.csdn.net","_top");
window.close();
} else {
var mywin=window.open("http://www.csdn.net,"_blink");
}
}
</script>
javascript的事件响应机制
使用javascript创建动态页面的时候,事件是可以被javascript检测到的,网页中的每个元素都可以产生某个触发javascript函数的事件。
具体使用例子
<form>
<input name="点击我" type="button" value="点击我" onclick/onload等="函数名()"/>
</form>
key:
onload事件会在页面加载完成后,立即发生,同时执行被调用的程序。
注意:1. 加载页面时,触发onload事件,事件写在<body>标签内。
2. 此节的加载页面,可理解为打开一个新页面时。
如下代码,当加载一个新页面时,弹出对话框“加载中,请稍等…”
①目前试了Firefox、Google Chrome、IE三个浏览器,该事件只对IE起作用。
②onunload事件对于刷新页面和超链接跳转其他页面情况有效,对于关闭页面无效。
③onbeforeunload事件,在离开页面和关闭当前页面的时候都有效果,顾名思义,就是在onunload被执行之前,就被调用
window.onunload = onunload_message;
function onunload_message(){
alert("您确定离开该网页吗?");
}