第12章JavaScript语言基础编程技术.ppt

《第12章JavaScript语言基础编程技术.ppt》由会员分享，可在线阅读，更多相关《第12章JavaScript语言基础编程技术.ppt（83页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、JavaScript JavaScript 语言基础语言基础0101JavaScript JavaScript 数据结构数据结构0303运算符与表达式运算符与表达式0202数据类型数据类型0404流程控制语句流程控制语句0505函数函数JavaScript JavaScript 数据结构数据结构标识符1 1关键字2 2JavaScript JavaScript 数据结构数据结构常量3 3变量4 4 标识符标识符标识符标识符所谓的标识符，就是一个名称。在JavaScript中，标识符用来命名变量和函数。命名规则：1.第一个字符，可以是任意Unicode字母（包括英文字母和其他语言的字母），以及美

2、元符号（$）和下划线（_）。2.第二个字符及后面的字符，除了Unicode字母、美元符号和下划线，还可以用数字0-9。标识符标识符例：合法的标识符imy_name_name$strn1例：不合法的标识符1a/第一个字符不能是数字23/同上*/标识符不能包含星号a+b/标识符不能包含加号-d/标识符不能包含减号或连词线 关键字关键字关键字关键字JavaScript关键字是指在JavaScript语言中有特定含义，成为JavaScript语法中的那些关键词。JavaScript关键字是不能作为变量名和函数名使用的。使用JavaScript关键字作为变量名或函数名，会使JavaScript在载入过程

3、中出现编译错误。关键字关键字abstractcontinuefinallyinstanceofprivatethisbooleandefaultfloatintpublicthrowbreakdoforinterfacereturntypeofbytedoublefunctionlongshorttruecaseelsegotonativestaticvarcatchextendsimplementsnewsupervoidcharfalseimportnullswitchwhileclassfinalinpackagesynchronizedwithJavaScript中的关键字 常量常量常

4、量常量当程序运行时，值不能改变的量为常量。常量主要用于为程序提供固定的和精确的值（包括数值和字符串），比如数字、逻辑值真（true）、逻辑值假（false）等都是常量。声明常量使用const关键字来进行声明。语法：const常量名=值；变量变量变量的概念变量的概念计算机中的程序需要对“值”进行操作。如（数字、字符串）等。当程序需要将这些值保存起来时，就需要将这些“值”保存到变量中，为后续使用。所以，变量是对“值”的再次使用。也称为“引用”。变量的工作机制是编程语言的基本特性。变量的声明与赋值变量的声明与赋值例：vara=1;1.首先通过var关键字先声明变量a，然后在变量a与数值1之间建立引用

5、(使用)关系，也称为将数值1“赋值”给变量a。2.以后，引用（使用）变量a就会得到数值1。JavaScript JavaScript 数据类型数据类型数字型数据1 1字符串型数据2 2数据类型数据类型布尔型数据3 3特殊数据类型4 4数据类型的转换规则5 5 数字型数据数字型数据整数和浮点数整数和浮点数JavaScript内部，所有数字都是以64位浮点数形式储存，即使整数也是如此。所以，1与1.0是相同的，是同一个数。例：1=1.0由于浮点数不是精确的值，所以涉及小数的比较和运算要特别小心。例：0.1+0.2=0.3常用方法常用方法parseInt()用于将字符串转为整数。parseFloat

6、()用于将字符串转为浮点数。字符串型数据字符串型数据字符串定义字符串定义字符串就是零个或多个排在一起的字符，放在单引号或双引号之中。例：例：abcabc字符串的字符串的lengthlength属性属性length属性返回字符串的长度，该属性也是无法改变的。例：例：vars=hello;s.length/5s.length=3;s.length/5 布尔型数据布尔型数据定义定义布尔型数据通常在JavaScript程序中用来比较所得的结果。布尔型数据类型只有两个值，分别是“true”和“false”，它用来表示某种情况是真还是假。例：varn=2;n=1 特殊数据类型特殊数据类型转义字符转义字符转

7、义字符描述转义字符描述b退格v跳格（Tab，水平）n回车换行r换行tTab符号反斜杠f换页OOO八进制整数，范围000777单引号xHH十六进制整数，范围00FF双引号uhhhh十六进制编码的Unicode字符undefinedundefined和和nullnullnull与undefined都可以表示“没有”，含义非常相似。将一个变量赋值为undefined或null，实际讲，几乎没区别。例：vara=null;varb=undefined;a=b;既然含义与用法都差不多，为什么要同时设置两个这样的值，这不是无端增加复杂度，令初学者困扰吗？这与历史原因有关。数据类型的转换规则数据类型的转换规

8、则数据类型的转换规则数据类型的转换规则JavaScript是一种无类型语言，也就是说，在声明变量时无需指定数据类型，这使得JavaScript更具有灵活性和简单性。在代码执行过程中，JavaScript会根据需要进行自动类型转换。案例案例 运算符与表达式运算符与表达式算术运算符1 1赋值运算符3 3运算符与表达式运算符与表达式布尔运算符5 5运算符优先级7 7表达式8 8比较运算符2 2字符串运算符4 4条件运算符6 6 算术运算符算术运算符算术运算符算术运算符算术运算符用于在程序中进行加、减、乘、除等运算。运算符描述示例+加运算符4+6/返回值为10-减运算符7-2/返回值为5*乘运算符7*

9、3/返回值为21/除运算符12/3/返回值为4%求模运算符7%4/返回值为3+自增运算符。该运算符有两种情况：i+（在使用i之后，使i的值加1）；+i（在使用i之前，先使i的值加1）i=1;j=i+/j的值为1，i的值为2i=1;j=+i/j的值为2，i的值为2-减运算符。该运算符有两种情况：i-（在使用i之后，使i的值减1）；-i（在使用i之前，先使i的值减1）i=6;j=i-/j的值为6，i的值为5i=6;j=-i/j的值为5，i的值为5 比较运算符比较运算符比较运算符比较运算符比较运算符的基本操作过程是：首先对操作数进行比较，这个操作数可以是数字也可以是字符串，然后返回一个布尔值true

10、或false。运算符描述示例小于1大于710/返回值为false=小于等于10=大于等于3=6/返回值为false=等于。只根据表面值进行判断，不涉及数据类型17=17/返回值为true=绝对等于。根据表面值和数据类型同时进行判断17=17/返回值为false!=不等于。只根据表面值进行判断，不涉及数据类型17!=17/返回值为false!=不绝对等于。根据表面值和数据类型同时进行判断17!=17/返回值为true 赋值运算符赋值运算符赋值运算符赋值运算符JavaScript中的赋值运算可以分为简单赋值运算和复合赋值运算。简单赋值运算是将赋值运算符（=）右边表达式的值保存到左边的变量中；而复合

11、赋值运算混合了其他操作（算术运算操作、位操作等）和赋值操作。运算符描述示例=将右边表达式的值赋给左边的变量userName=mr+=将运算符左边的变量加上右边表达式的值赋给左边的变量a+=b/相当于a=a+b-=将运算符左边的变量减去右边表达式的值赋给左边的变量a-=b/相当于a=a-b*=将运算符左边的变量乘以右边表达式的值赋给左边的变量a*=b/相当于a=a*b/=将运算符左边的变量除以右边表达式的值赋给左边的变量a/=b/相当于a=a/b%=将运算符左边的变量用右边表达式的值求模，并将结果赋给左边的变量a%=b/相当于a=a%b&=将运算符左边的变量与右边表达式的值进行逻辑与运算，并将结

12、果赋给左边的变量a&=b/相当于a=a&b!=将运算符左边的变量与右边表达式的值进行逻辑或运算，并将结果赋给左边的变量a|=b/相当于a=a|b=将运算符左边的变量与右边表达式的值进行异或运算，并将结果赋给左边的变量a=b/相当于a=ab 字符串运算符字符串运算符字符串运算符字符串运算符字符串运算符是用于两个字符型数据之间的运算符，除了比较运算符外，还可以是+和+=运算符。其中，+运算符用于连接两个字符串，而+=运算符则连接两个字符串，并将结果赋给第一个字符串。运算符描述示例+连接两个字符串“mr”+“book”+=连接两个字符串并将结果赋给第一个字符串varname=“mr”name+=“b

13、ook”布尔运算符布尔运算符布尔运算符布尔运算符布尔运算符主要配合条件控制结构。布尔运算符描述！取反&=与之后再赋值&逻辑与|=或之后赋值|逻辑或=异或之后赋值逻辑异或?:三目运算符 条件运算符条件运算符条件运算符条件运算符条件运算符是JavaScript支持的一种特殊的三目运算符，语法格式如下：操作数?结果1:结果2如果“操作数”的值为true，则整个表达式的结果为“结果1”，否则为“结果2”。运算符优先级运算符优先级运算符优先级运算符优先级例：5+8*3=？运算符优先级运算符优先级优先级结合性运算符最高向左.、()由高到低依次排列向右+、-、-、!、delete、new、typeof、vo

14、id向左*、/、%向左+、-向左、向左、=、in、instanceof向左=、!=、=、!=向左&向左向左|向左&向左|向右?向右=向右*=、/=、%=、+=、-=、=、=、&=、=、|=最低向左,表达式表达式语句和表达式语句和表达式例：varx=1+3;1+3叫做表达式，指一个为了得到返回值的计算式。语句和表达式的区别在于，前者主要为了进行某种操作，一般情况下不需要返回值；后者则是为了得到返回值，一定会返回一个值。凡是JavaScript语言中预期为值的地方，都可以使用表达式。比如，赋值语句的等号右边，预期是一个值，因此可以放置各种表达式。一条语句可以包含多个表达式。案例案例 流程控制语句流

15、程控制语句条件控制语句1 1循环控制语句2 2流程控制语句流程控制语句跳转语句3 3 条件控制语句条件控制语句Ifelse语句1 1Switch语句2 2条件控制语句条件控制语句if elseif else语句语句if条件判断语句是最基本、最常用的流程控制语句，可以根据条件表达式的值执行相应的处理。语法格式如下：if(expression)statement1elsestatement2expression：必选项，用于指定条件表达式，可以使用逻辑运算符。statement1：用于指定要执行的语句序列。当expression的值为true时，执行该语句序列。statement2：用于指定要执行

16、的语句序列。当expression的值为false时，执行该语句序列。Switch Switch 语句语句语法格式如下：switch(expression)casejudgement1:statement1;break;casejudgement2:statement2;break;default:statementn+1;break;循环控制语句循环控制语句for语句1 1while语句2 2循环控制语句循环控制语句dowhile语句3 3forfor语句语句for循环语句也称为计次循环语句，一般用于循环次数已知的情况，在JavaScript中应用比较广泛。for循环语句的语法格式如下：fo

17、r(init;test;increment)statementinitialize：初始化语句，用来对循环变量进行初始化赋值。test：循环条件，一个包含比较运算符的表达式，用来限定循环变量的边限。如果循环变量超过了该边限，则停止该循环语句的执行。increment：用来指定循环变量的步幅。statement：用来指定循环体，在循环条件的结果为true时，重复执行。whilewhile语句语句while循环语句也称为前测试循环语句，它是利用一个条件来控制是否要继续重复执行这个语句。while循环语句与for循环语句相比，无论是语法还是执行的流程，都较为简明易懂。while循环语句的语法格式如下

18、：while(expression)statementexpression：一个包含比较运算符的条件表达式，用来指定循环条件。statement：用来指定循环体，在循环条件的结果为true时，重复执行。do whiledo while语句语句dowhile循环语句也称为后测试循环语句，它也是利用一个条件来控制是否要继续重复执行这个语句。与while循环所不同的是，它先执行一次循环语句，然后再去判断是否继续执行。dowhile循环语句的语法格式如下：dostatementwhile(expression);statement：用来指定循环体，循环开始时首先被执行一次，然后在循环条件的结果为tru

19、e时，重复执行。expression：一个包含比较运算符的条件表达式，用来指定循环条件。跳转语句跳转语句continuecontinue语句语句continue语句用于中止本次循环，并开始下一次循环。语法格式如下：for(条件表达式)语句1：continue;语句2：breakbreak语句语句break语句用于退出包含在最内层的循环或者退出一个switch语句。语法格式如下：for(条件表达式)语句1：break;语句2：案例案例关键代码关键代码functionlogin()varuser=document.getElementById(user);/获取账户信息varpassword=do

20、cument.getElementById(password);/获取密码信息if(user.value!=mr&password.value!=mrsoft)alert(您输入的账户或密码错误！);elsealert(登录成功！);函数函数函数的定义1 1函数的调用2 2函数函数几种特殊的函数3 3 函数的定义函数的定义函数的定义函数的定义function命令1 1functionprint(s)console.log(s);函数表达式2 2varprint=function(s)console.log(s);函数的调用函数的调用参数参数函数运行的时候，有时需要提供外部数据，不同的外部数据会

21、得到不同的结果，这种外部数据就叫参数。functionf(x,y)returnx+y;参数的省略参数的省略函数参数不是必需的，Javascript允许省略参数。functionf(a,b)returna;案例案例关键代码关键代码首页收藏立即购买加入购物车functionmr_function()alert(触发了一个函数！);几种特殊的函数几种特殊的函数特殊函数特殊函数函数说明eval()求字符串中表达式的值isFinite()判断一个数值是否为无穷大inNaN()判断一个数值是否为NaNparseInt()将字符型转化为整型parseFloat()将字符型转化为浮点型encodeURI()将

22、字符串转化为有效的URLencodeURIComponent()将字符串转化为有效的URL组件decodeURI()对encodeURL()编码的文本进行解码DecodeURIComponent()对encodeURIComponent()编码的文本进行解码小结小结本章主要针对JavaScript语言的基本语法进行讲解，包括数据结构、数据类型、运算符与表达式、流程控制语句、函数等。其中，流程控制语句和函数在实际开发中经常会用到，需要认真学习并作到灵活运用。上机指导上机指导上机指导上机指导关键代码关键代码functiondeal()if(form1.str.value=)alert(请输入要格式

23、化的数字！);form1.str.focus();returnfalse;if(isNaN(form1.str.value)alert(您输入的数字不正确!);form1.str.focus();returnfalse;if(form1.le.value=)alert(请输入格式化后的长度！);form1.le.focus();returnfalse;if(isNaN(form1.le.value)alert(您输入的格式化的长度不正确!);form1.le.focus();returnfalse;form1.lastStr.value=formatNO(form1.str.value,form1.le.value);