人机交互界面设计第九章JavaScript应用

,*,*,*,*,*,*,*,*,*,*,*,人机交互界面设计,第九章,JavaScript,应用,目录,01,事件,02,对象,01-01 click,事件,01-02 mouseover,与,mouseout,事件,01-03 focus,与,blur,事件,01-04 change,事件,01-05,其他事件,02-01,时间类,Date,02-02,数组类,Array,02-03,数学类,Math,02-04,对象类,Object,02-05,窗口类,Window,01,事件,事件,事件Event是JS中很常用的一种代码触发机制，而事件Event这个词来源于新闻界。生活中，每一次的新闻事件发生都会引发人们的广泛关注。那么JS中的事件我们可以理解为：每一次JS事件的发生，都可以触发代码的运行。只是一局部JS事件是人为的，比方点击、鼠标按下、鼠标移动等等，而一局部事件是页面产生的，比方页面的图像加载事件，AJAX中的状态改变事件等等。,Div,中有一些文字，点击后更改,div,标签的内容。,源代码如下：,请点击该文本,案例操作一,01,事件,click,事件,标签中的onclick是触发click事件的事件句柄。当中的on，可以理解为“当时候。Onclick就是“当鼠标点击的时候。“Onlick写在了标签里，是属于HTML的事件句柄属性，因此“onclick，可以大写，也可以小写HTML属性名是不分大小写的，比方写成onClick，或者 ONCLICK都没有问题。,Div,中有一些文字，点击后更改,div,标签的内容。,源代码如下：,请点击该文本,案例操作一,01,事件,click,事件,等号=之后的引号(“)，里面就是点击后要执行的代码。因为在外部使用了双引号“，因此里面的字符串你点击了我！使用的是单引号。,this，是JS中的特殊对象，在这里特指鼠标点击的“这个标签div。,这段代码的作用就是，用户点击div后，这个div之间的内容就更改为“你点击了我！。,考虑到点击之后，要执行的代码可能很多，如果全部写在了标签上，不利于代码的维护。所以，事件往往跟函数结合在一起。,源代码如下：,请点击该文本,function changeHTML(),event.target.innerHTML=,你点击了我,!;,案例操作二,01,事件,click,事件,Onclick之后调用的代码是一个函数changeHTML，我们要执行的代码都写在这个函数之中。这么做的目的是，便于代码的优化和管理。这个函数因为写在了事件中，因此，也被称为事件函数。,Event是事件对象。每个事件，在它调用的事件函数中，都可以使用事件对象，事件对象就是指触发代码运行的这个事件。,Target是事件对象的属性，表示触发此事件的元素。在这里就是指我们点击的div标签。不过，在IE10及其以下版本中，使用srcElement来替代target最新的IE11和Edge浏览器已经使用了标准的target属性。,案例操作二,01,事件,click,事件,请点击该文本,var mydiv=document.getElementById(mydiv);/,通过,ID,获取标签,function changeHTML(),var t=(event.target)?event.target:event.srcElement;,t.innerHTML=,你点击了我,!;,mydiv.onclick=function(),changeHTML();,案例操作三,01,事件,click,事件,我们给标签定义了一个id，通过这个id去获取标签，并把获取的标签存储在变量mydiv中。,mydiv.onclick=function(),就是在调用事件函数。点击后执行的代码都写在了function()里面。值得注意的是，这里的onclick是写在了中，是JS的一局部。而JS是严格区分大小写的，这里写成mydiv.onClick=function()是不行的，因为JS中的事件函数都是小写的。,这种方法剥离了页面标签和JS代码，做到了结构HTML和行为JS的别离，利于代码的维护和扩展，是我们所提倡的一种方式。但是在实际的开发中，我们往往根据需要，以上3种方法中任选一种适宜的方法就可以了。,案例操作三,01,事件,click,事件,Mouseover事件是鼠标mouse移动到标签之上over触发的。,Mouseover,事件,01,事件,mouseover,与,mouseout,事件,Mouseover事件是鼠标mouse离开标签out触发的。,Mouseout,事件,页面中,div,标签，有一些文字，鼠标移上去后，更改它的背景色为红色。,源代码如下：,鼠标移上来，更改背景为红色,function changeBg(),var t=event.target?event.target:event.srcElement;,t.style.background=#f00,案例操作,01,事件,Mouseover,事件,function changeBgRed(),var t=event.target?event.target:event.srcElement;,t.style.background=#f00,function changeBgNone(),var t=event.target?event.target:event.srcElement;,t.style.background=none;,我们继续改进上一个案例，让鼠标离开后背景色消失,01,事件,Mouseover,事件,Focus聚焦事件是针对表单元素，如文本框、文本域、按钮等等，当光标聚焦在上面的时候触发的。,focus,事件,01,事件,focus,与,blur,事件,Blur失去焦点事件是Focus事件的“反事件。当文本框、文本域、按钮等等，失去焦点的时候触发的。,blur,事件,页面中的input文本框标签，鼠标点进去聚焦的时候，把边框变为红色；而失去焦点的时候，边框又变回普通的样子。,源代码如下：,.redborder,border:1px#f00 solid;,案例操作,01,事件,focus,与,blur,事件,function redBorder(),var t=event.target?event.target:event.srcElement;,t.className=redborder;,function noBorder(),var t=event.target?event.target:event.srcElement;,t.className=;,案例操作,01,事件,focus,与,blur,事件,Change事件，是指表单元素的值改变的时候，触发的事件。很多表单元素都支持change事件，比方文本框，文本域，多项选择框等，但change事件更多的还是用在select下拉元素中。,01,事件,change,事件,根据下拉列表，选择页面跳转网址。,源代码如下：,-请选择友情链接网址-,百度,重庆工程学院,案例操作,01,事件,focus,与,blur,事件,var links=document.getElementById(links);,links.onchange=function(),var t=event.target?event.target:event.srcElement;,if(t.value=0)/,如果,select,的值为,0,return null;/,终止函数运行,window.location.href=t.value;,案例操作,01,事件,focus,与,blur,事件,01,事件,其他事件,属性,当以下情况发生时，出现此事件,onabort,图像加载被中断,ondblclick,鼠标双击某个对象,onerror,当加载文档或图像时发生某个错误,onkeydown,某个键盘的键被按下,onkeypress,某个键盘的键被按下或按住,onkeyup,某个键盘的键被松开,onload,某个页面或图像被完成加载,onmousedown,某个鼠标按键被按下,onmousemove,鼠标被移动,onmouseup,某个鼠标按键被松开,onreset,重置按钮被点击,onresize,窗口或框架被调整尺寸,onselect,文本被选定,onsubmit,提交按钮被点击,onunload,用户退出页面,02,对象,JS严格意义上来讲并不是一个真正的传统意义上的面向对象语言，因为它不具备面向对象的一些特性，比方接口等。但是从技术层面上看，JS在竭力向面向对象靠齐。因此，本书还是把JS看作面向对象语言，使用类与对象的概念。,从外表上看，JS跟其他的面向对象的语言一样，JS的对象也使用new关键字来创立一个类的对象。比方：,var car =new Object();,这行代码创立了一个Object类的对象或者叫实例，并把它存储在变量car中，那么这个变量car，就代表了那个对象，且具有了Object类的默认的属性和方法。JS提供了很多原生的类以供程序员使用，比方Date，Array，Math和Object。,JS对象很多，本书仅罗列几个常用的对象供读者学习。,时间类Date是JS中使用频率很高的类，在很多网站中都会看到它的影子，比方显示当前时间，倒计时等等。每个时间类的对象，都存储了对应时间的年、月、日、时、分、秒、星期，以及日期等信息。,02,对象,时间类,Date,创立当前时间的时间类，并在页面中显示当前的时间。,源代码如下：,现在是：,0000年00月00日星期0 00:00:00,var mytime=new Date();,var myyear=mytime.getFullYear();/获取年份，如2021,var mymonth=mytime.getMonth()+1;/获取月份，记得+1,var mydate=mytime.getDate();/获取日期,var myday=mytime.getDay();/获取星期，数值0-6。0是周日,var myhour=mytime.getHours();/获取小时数，0-23,案例操作,02,对象,时间类,Date,var myminute=mytime.getMinutes();/,获取分钟数，,0-59,var mysecond=mytime.getSeconds();/,获取秒钟数，,0-59,var res=myyear+,年,+mymonth+,月,+mydate,+,日星期,+myday+,+myhour+:+myminute+:+mysecond;,document.getElementById(timeshow).innerHTML=res;,案例操作,02,对象,时间类,Date,改进前面的“案例操作，让时间走动起来。,源代码如下：,现在是：,0000年00月00日星期0 00:00:00,function timeGo(),此局部代码跟前面“案例操作一相同，此处略,document.getElementById(timeshow).innerHTML=res;,var myset=setInterval(function()timeGo();,1000);,案例操作,02,对象,时间类,Date,跟其他语言一样，JS中的数组Array可以用来存储多个数据。而JS比较灵活的是，数组中的元素的数据类型可以是不一样。,JS中创立一个数组的方式如下：,/创立一个空数组,var myarr1=new Array();或 var myarr1=;,/创立一个数组的同时，赋给数组元素。多个元素之间用逗号隔开,var myarr2=new Array(“张三,100);或 var myarr2=“张三,100;,/也可以在创立一个空数组后，再添加数组元素,var myarr3=;,myarr30=张三;,myarr3