JX-基于Java技术的Web应用开发(四)JavaScript脚本语言-6-wangcp

Web应用开发(四)-JavaScript脚本语言教学课件2主要内容JavaScript概述基本语法常用内部对象对象层次与事件处理浏览器内部对象综合实例小结3JavaScript概述(1)JavaScript最早是由NetScape公司开发出来的一种跨平台的、基于对象的脚本语言，目前为大多数浏览器所支持。JavaScript的优点：简单性动态性基于对象的语言安全性跨平台性减少服务器开销(节省CGI的交互时间)4JavaScript概述(2)实例htmlheadtitle欢迎来到JavaScript世界！/titlescripttype=text/javascriptfunctionmouseOver(){//访问文档对象(即WEB页面包含的元素)document.b1.src=mouse_on.jpg;}functionmouseOut(){//访问文档对象(即WEB页面包含的元素)document.b1.src=mouse_off.jpg;}//向document文档输出内容，即向WEB页面输出内容。document.write(欢迎来到JavaScript世界!br);/script/headbodyahref=#imgborder=0alt=欢迎来到JavaScript世界“src=mouse_off.jpgname=b1onmouseover=mouseOver()onmouseout=mouseOut()//a/body/html5JavaScript概述(3)如何使用JavaScript脚本？使用script标记，有3种方法：嵌入HTML文件行内，嵌入HTML文件内，链接js文件。1)嵌入HTML代码行内inputtype=buttonname=btnonclick=javascript:alert('嵌入HTML代码行内运行JavaScript！')/源代码示例6JavaScript概述(4)2)嵌入文件3)链接文件scripttype=text/javascript//javascript脚本/scriptscripttype=“text/javascript”src=“*.js/scriptscriptlanguage=“javascript”src=“*.js/scriptW3C组织不赞成W3C组织推荐源代码示例7主要内容JavaScript概述基本语法常用内部对象对象层次与事件处理浏览器内部对象综合实例小结8基本语法(1)基本语法数据类型、常量与变量对象与数组表达式与运算符语句函数9基本语法(2)数据类型数据类型名称说明举例number数值类型不区分整型和浮点型123,0239(十进制),071,0x1Fstring字符串以对象对待，有自己的属性和方法。‘Hello’，”Hello”boolean布尔型true,false,1,0object对象类型Date,window,document,Functionnull空类型“null值”或“未定义对象”，不代表是0或空字符串。只有一个值：null；if(null)判断为falseundefined未定义类型当处于如下情形时，JavaScript会返回undefined值：1)定义了一个变量但没有为该变量赋值；2)使用了一个对象不存的属性时；3)函数没有明确参数值时。if(undefined)判断为false除以上类型外，JavaScript也可以定义数组类型。10基本语法(3)常量与变量常量主要有：布尔常量、整型常量、浮点型常量、字符串常量。字符串常量使用单引号(’’)或双引号(””)进行包含。注：字符串常量必须写在一行中，如果要换行，必须使用符号“\”续行；而其他代码则不存在续行这个问题。变量定义：变量名以字母、下划线(“_”)、美元符(“$”)开头的字母、数字、下划线(“_”)和美元符(“$”)的组合。注：1）JavaScript区分大小写。2）JavaScript中的变量在定义时不指定数据类型，而是以关键字var代替(var指varible)。变量定义示例：varstr;//JavaScript语句以;结尾。说明：注释方法与C++,Java相同字符串续行示例代码不续行示例11基本语法(4)null和undefined示例document.write(brbrdocument.getElementById('PKU')的结果为：“+document.getElementById(‘PKU’));//getElementById方法通过id来访问页面元素//------------------------------------------------document.write(brbrdocument.MIT的结果为：+document.MIT);//------------------------------------------------varPKU;//定义一个变量document.write(brbrPKU的值为：+PKU);//------------------------------------------------12基本语法(5)数据类型转换数据类型转换方式有两种：隐式转换和显式转换。隐式转换：Javascript是一种泛类型语言。泛类型指不必显式定义变量的数据类型。在定义一个变量时，不需要指定变量的数据类型(而是使用var)，使得JavaScript可以很方便灵活地进行隐式转换。显式转换指强制类型转换。强制类型转换对象有：Number，String，Boolean，Object等。强制转换源代码示例数据类型判断运算符：typeof(表达式)。13基本语法(6)数值类型判断：NaN与isNaN函数NaN原义为：“NotaNumber”。当运算无法返回正确的数值时，就会返回“NaN”值。NaN值比较特殊，因为它“不是数字”，所以任何数跟它都不相等，包括与其本身相比。isNaN()是一个JavaScript内部函数，判断对象是否为NaN。常用于判断将字符串转换成数值类型时，例如判断用户输入的是否全为数字。14基本语法(7)NaN和isNaN源代码示例varshuzi=100;//定义一个变量document.write(brbrshuziisnotanumber?+isNaN(shuzi));varstr=“100”;//定义一个变量document.write(brbrstrisnotanumber?+isNaN(str));varstr1=“test100”;//定义一个变量document.write(brbrstr1isnotanumber?+isNaN(str1));//字符串转数值失败,isNaN返回true15基本语法(8)基本语法数据类型、常量与变量对象与数组表达式与运算符语句函数16基本语法(9)对象与数组JavaScript语言是基于对象的(Object-Based)的脚本语言，它没有提供抽象、继承、重载等有关面向对象语言的许多功能。对象定义方式：var对象名={属性名1:属性值1,属性名2:属性值2,…}也可使用new运算符生成一个对象实例：例如varcar=newObject();接着使用赋值就给对象增加一个属性，例如car.price=100;数组也是对象，定义格式如下：1)vararr1=newArray();//或vararr1=[];2)vararr2=newArray(数组大小);3)vararr3=newArray(元素1,元素2,…);访问数组元素：arr1[0];//数组下标从0开始17基本语法(10)基本语法数据类型、常量与变量对象与数组表达式与运算符语句函数18基本语法(11)表达式与运算符JavaScript中的表达式与运算符和C++,Java中的表达式与运算符十分相似。表达式其实就是JavaScript中的一个语句。JavaScript的运算符如下：类型说明算术运算符+,-,*,/,%,++,--逻辑运算符&&,||,!比较运算符==,===(等同运算符，值和类型相等),!==(不等同运算符),!=,,=,,=位操作运算符&(按位与),|(按位或),^(按位异或),~(取反),(右移),(左移)字符串运算符,,=,=,=,+赋值运算符=,+=,-=,*=,/=,%=条件运算符?语法格式为：(condition)?value1:value219基本语法(12)特殊运算符：in，new，delete和void运算符in运算符：测试对象中是否存在该下标索引或是否存在相应属性。new运算符：用于定义一个新的内置对象实例。delete运算符：用于删除一个对象实例。void运算符：void运算符计算一个表达式但是不返回值，主要用于避免表达式返回值。in运算符示例void运算符示例20基本语法(13)基本语法数据类型、常量与变量对象与数组表达式与运算符语句函数21基本语法(14)语句主要有：选择语句和循环语句。选择语句：if语句和switch语句。if(表达式){…}if(表达式){…}else{…}if(表达式){…}elseif(表达式){…}else{…}switch(条件表达式){case常量1:{…}case常量2:{…}default:{…}}22基本语法(15)语句主要有：选择语句和循环语句。循环语句：while语句和for语句。while(…){…}do{…}while(…)for(…;…;…){…}for(对象属性名in已知对象名){…}枚举数组元素示例枚举对象属性示例forin语句多用于表单元素的枚举和判断。23基本语法(16)语句主要有：选择语句和循环语句。循环语句：while语句和for语句。循环控制语句：break语句和continue语句24基本语法(17)特殊语句：with语句。在with语句体内，任何对变量的引用被认为是这个对象的属性，以节省一些代码。with(object){………………}with源代码示例25基本语法(18)基本语法数据类型、常量与变量对象与数组表达式与运算符语句函数26基本语法(19)函数：函数定义语法格式如下：//定义函数function函数名(参数1,参数2…){…………return返回值;}//函数调用函数名(参数1,参数2…)//注意：函数定义不能嵌套。函数综合示例27主要内容JavaScript概述基本语法常用内部对象对象层次与事件处理浏览器内部对象综合实例小结28常用内部对象(1)常用内部对象主要有：String，Math和Date对象。String对象，其属性和方法如下：length字符串长度big()用大号字体显示字符串。bold()使用粗体显示字符串。charAt()返回在指定位置的字符。concat()连接字符串。fontcolor()使用指定的颜色来显示字符串。indexOf()检索字符串。italics()使用斜体显示字符串。match()找到一个或多个正在表达式的匹配。replace()替换与正则表达式匹配的子串。search()检索与正则表达式相匹配的值。sub()把字符串显示为下标。substr()从起始索引号提取字符串中指定数目的字符。substring()提取字符串中两个指定的索引号之间的字符。sup()把字符串显示为上标。toLowerCase()把字符串转换为小写。toUpperCase()把字符串转换为大写。简单示例29常用内部对象(2)常用内部对象主要有：String，Math和Date对象。Date对象，其属性和方法如下：属性或方法描述Date