人机交互与界面设计-第3章

《人机交互与界面设计》2020/2/141第3章浏览器端交互程序设计《人机交互与界面设计》目录3.1JavaScript语言3.2浏览器对象模型3.3文档对象模型2020/2/142《人机交互与界面设计》3.1JavaScript语言•JavaScript是一种嵌入在HTML文件中的脚本语言，它是基于对象和事件驱动的，能对诸如鼠标单击、表单输入、页面浏览等用户事件做出反应并进行处理。•JavaScript特点：（1）简单性（2）基于对象（3）可移植性（4）动态性3.1.1JavaScript语言概述2020/2/143《人机交互与界面设计》3.1JavaScript语言1．JavaScript程序的编辑和调试3.1.2JavaScript编程基础•可以用任何文本编辑器来编辑JavaScript程序。例如：NotePad。•JavaScript程序可以嵌入HTML文件。•程序的调试在浏览器中进行。2020/2/144《人机交互与界面设计》3.1JavaScript语言1．JavaScript程序的编辑和调试3.1.2JavaScript编程基础•将JavaScript程序嵌入HTML文件的方法有两种：①在HTML文件中使用script、/script标识加入JavaScript语句。其格式为：scripttype=text/javascript……/script通常有两种脚本语言：JavaScript和VBScript，默认值为JavaScript。②将JavaScript程序以扩展名“.js”单独存放，再利用以下格式的script标记嵌入HTML文件：scriptsrc=JavaScript文件名……/script将HTML代码和JavaScript代码分别存放，有利于程序的共享。2020/2/145《人机交互与界面设计》3.1JavaScript语言1．JavaScript程序的编辑和调试3.1.2JavaScript编程基础•script标记的位置script标记可以放在HTML文档的任何位置，既可以包含于head标记中，也可以放置于body标记中。位于head部分的JavaScript只有被调用时才会被执行。位于body部分的JavaScript在页面载入时执行。如果希望页面载入时执行脚本，应该把脚本放在body部分；如果希望用户触发事件时才执行脚本，最好将脚本放在head部分。2020/2/146《人机交互与界面设计》3.1JavaScript语言1．JavaScript程序的编辑和调试3.1.2JavaScript编程基础•一个简例：htmlheadtitleJavaScript简例/title/headbodyscripttype=text/javascriptalert(世界，你好!);/script/body/html2020/2/147《人机交互与界面设计》3.1JavaScript语言1．JavaScript程序的编辑和调试3.1.2JavaScript编程基础•编写JavaScript程序时还要注意以下三点：①JavaScript大小写敏感。②在JavaScript程序中，换行符是一个完整的语句的结束标志；若要将几行代码放在一行中，则各语句间要以分号（；）分隔。（在每条语句结束后都使用分号，是一个好的习惯。）③JavaScript的注释标记是双斜杠“//”之后的部分，或符号“/*”与符号“*/”之间的部分。2020/2/148《人机交互与界面设计》3.1JavaScript语言2．数据类型3.1.2JavaScript编程基础•JavaScript有三种数据类型：数值型、逻辑型和字符型。（1）数值型。数值型数据包括整数和浮点数。整数可以是十进制、八进制和十六进制数，八进制值以0开头，十六进制值以0x开头。例如：100（十进制），021（八进制），0x5d（十六进制）。浮点数例子：2.57，1.3e6，2，7e-10。（2）逻辑型。逻辑型数据有true和false两种取值，分别表示逻辑真和逻辑假。（3）字符型。字符型数据的值是以双引号或单引号''括起来的任意长度的一连串字符。注意反斜杠“\”是转义字符，常用的转义序列有：\n——换行符\t——水平制表符\r——回车符\b——退格符2020/2/149《人机交互与界面设计》3.1JavaScript语言3．常量和变量3.1.2JavaScript编程基础（1）常量•常量是在程序中其值保持不变的量。•JavaScript的常量以直接量的形式出现，即在程序中直接引用值，如“欢迎您”、28等。•常量值可以为整型、实型、逻辑型及字符串型。•JavaScript中有一个空值null，表示什么也没有，如试图引用没有定义的变量，则返回一个null值。2020/2/1410《人机交互与界面设计》3.1JavaScript语言3．常量和变量3.1.2JavaScript编程基础（2）变量•变量是在程序中值可以改变的量。•JavaScript用关键字var声明变量，或使用赋值的形式声明变量。例如：varstr;/*声明变量str*/num1=10;/*说明num1为整型，并将其值赋为10*/num2=3.02e10;str1=欢迎您;2020/2/1411《人机交互与界面设计》3.1JavaScript语言3．常量和变量3.1.2JavaScript编程基础（2）变量•JavaScript命名变量的规则是：①变量名必须以字母（大小写均可）打头，只能由字母（大小写均可）、数字（0~9）和下划线“_”组成；②变量名长度不能超过1行，并且不能使用JavaScript保留字作变量名；③变量名字母区分大小写。2020/2/1412《人机交互与界面设计》3.1JavaScript语言JavaScript的保留字3.1.2JavaScript编程基础abstractbooleanbreakbytecasecatchcharclassconstcontinuedefaultdodoubleelseextendsfalsefinalfinallyfloatforfunctiongotoifimplementsimportininstanceofintinterfacelongnativenewnullpackageprivateprotectedpublicreturnshortstaticsuperswitchsynchronizedthisthrowthrowstransienttruetryvarvoidwhilewith2020/2/1413《人机交互与界面设计》3.1JavaScript语言4．运算符和表达式3.1.2JavaScript编程基础•运算符JavaScript的运算符包括：–赋值运算符–算术运算符–字符串运算符–逻辑运算符–关系运算符–位运算符2020/2/1414《人机交互与界面设计》3.1JavaScript语言4．运算符和表达式3.1.2JavaScript编程基础•赋值运算符。JavaScript提供6个赋值运算符，它们是基本赋值运算符“=”，复合赋值运算符：+=、-=、*=、/=和%=，功能是将一个表达式的值赋予一个变量。记法含义记法含义a+=ba=a+ba-=ba=a-ba*=ba=a*ba/=ba=a/ba%=ba=a%ba=ba=aba=ba=aba=ba=aba&=ba=a&ba^=ba=a^ba|=ba=a|b赋值运算符简记形式表2020/2/1415《人机交互与界面设计》3.1JavaScript语言4．运算符和表达式3.1.2JavaScript编程基础•算术运算符。算术运算符的操作数和结果都是数值型值。算术运算符及位运算符可与赋值运算符结合形成简记形式。赋值运算符简记形式表运算符操作运算符操作+加法-（双目）减法*乘法/除法%模取余数++递增--递减-（单目）取负2020/2/1416《人机交互与界面设计》3.1JavaScript语言4．运算符和表达式3.1.2JavaScript编程基础•字符串运算符。字符串运算是JavaScript中使用最多的运算。字符串运算符只有一个“+”，即字符串连接运算。•参与字符串连接运算的两个操作数如果都是字符串，则直接合并；否则，操作数会先被转变为字符串，再进行合并。•例如：varstr1=欢迎您+访问本页;//变量str1的值为“欢迎您访问本页”varstr2=现在是+10+月;//变量str2的值为“现在是10月”2020/2/1417《人机交互与界面设计》3.1JavaScript语言4．运算符和表达式3.1.2JavaScript编程基础•逻辑运算符。逻辑运算符的运算对象和结果都是逻辑值。•逻辑运算符有三个：&&与运算是双目运算。当两个操作数都为true时，结果为true，其他情况下结果均为false。||或运算是双目运算。当两个操作数中至少有一个为true时，结果为true，否则结果为false。!非运算是单目运算。结果是操作数的值取反。2020/2/1418《人机交互与界面设计》3.1JavaScript语言4．运算符和表达式3.1.2JavaScript编程基础•关系运算符。关系运算符用于数值及字符串值的比较，返回比较判断的结果。•关系运算符的运算结果是逻辑值。•关系运算包括：==相等！=不等小于大于=小于或等于=大于或等于•例如：x=100，y==20•利用关系运算符、逻辑运算符及括号可以组成复杂的表达式。例如：（！（a==9）&&（x=100））||（a!=9）2020/2/1419《人机交互与界面设计》3.1JavaScript语言4．运算符和表达式3.1.2JavaScript编程基础•位运算符。位运算符将操作数作为二进制值处理，返回JavaScript标准的数值型数据。•位运算符都是双目运算，包括：&按位与|按位或^按位异或左移右移右移，零填充•例如：15&8的结果为（1111&1000）15|8的结果为（1111|1000）15^8的结果为（1111|1000）2020/2/14208157《人机交互与界面设计》3.1JavaScript语言4．运算符和表达式3.1.2JavaScript编程基础JavaScript运算符的优先级由高到低排列如下：[]()高++--!（算数运算符）*/%+-（算数运算符）（位运算符）==（关系运算符）==!=（关系运算符）&^|（位运算符）&&||（逻辑运算符）?：（条件运算符）=+=-=*=/=%=低（赋值运算符）2020/2/1421《人机交互与界面设计》3.1JavaScript语言4．运算符和表达式3.1.2JavaScript编程基础•表达式–表达式是由常量、变量、运算符、函数和表达式组成的式子，任何表达式都可求得单一值。–根据表达式值的类型，JavaScript的表达式有三类：①算术表达式。其值是一个数值型值。例如：5+a-x。②字符串表达式。其值是一个字符串。例如：字符串1+str。③逻辑表达式。其值是一个逻辑值。例如：(x==y)&&(y=5)。–特殊的表达式——条件表达式，其格式为：(condition)?val1:val2其中，condition是逻辑表达式。该条件表达式的含义是：如果condition的值为true，则条件表达式的值为val1，否则条件表达式的值为val2。2020/2/1422《人机交互与界面设计》3.1JavaScript语言5．函数3.1.2JavaScript编程基础•函数为程序设计人员提供了实现模块化的工具。•将程序划分为一些相对独立的部分，每部分编写一个函数，从而使各部分充分独立，任务单一，程序清晰，易懂、易读、易维护。•JavaScript函数可以封装那些在程序中可能要多次用到的功能块。函数定义的语法格式为：function