Download presentation
Presentation is loading. Please wait.
1
第3章 JavaScript语言基础
2
教学目标 通过本章的学习，使学生掌握JavaScript脚本的基础知识，为后续章节的学习打好基础。
3
教学要求
4
学习重点 变量的定义和使用 表达式的计算方法 控制语句的结构和使用方法 函数的定义和调用
5
数据类型 数值型 在JavaScript中，所有数字都用浮点型表示，不区分整型和浮点型，数字的有效范围是10-308～10308，如453、7.52、1.72e5等。 字符串型 字符串型是用单引号或双引号引起来的一个或多个字符、数字和标点符号的序列。如”hello word”、”JavaScript123”、”你好，编程！” 布尔型 布尔型只有两个值：真(True)和假(False)。代表一种状态或标志，用来作为判断依据控制操作流程。通常，非0值表示“真”，0值表示“假”。
6
数据类型 空值 空值是一个特殊的数据类型，用关键字null表示什么都没有。创建一个对象失败时返回空值，也可以直接将null赋值给变量。
未定义型 未定义型也是一个特殊的数据类型，用关键字undefined表示，当使用一个没有被赋值的变量或使用一个不存在对象的属性时，JavaScript会返回undefined。 对象 对象是一种复杂的数据类型，它是数据项和函数的集合。
7
常量 固定不变的量称为常量。使用常量一方面可以提高代码的可读性，另一方面可以使代码易于维护。比如一段代码中，经常用到字符串“hello”，可以通过如下声明： const myConst=“hello”; 注意，const不支持IE浏览器显示，因此当编辑IE浏览器浏览的网页时需要慎用常量。
8
变量 值可以变化的量称为变量，变量是一个已命名的容器，变量名代表其存储空间。 变量命名规则
变量名可以是数字、字母、下划线(_)或符号$，第一个字符必须是字母、下划线或符号$。 变量名不能包含空格和加号、减号等符号。 变量名严格区分大小写，如myString与mystring代表两个不同的变量。 变量名不能使用JavaScript中的关键字
9
变量声明和赋值 在JavaScript中，变量由关键字var声明，语法如下： var record ; 在声明变量时可以对变量进行赋值：
也可以同时声明多个变量，并同时给多个变量赋值。 在JavaScript中，变量声明不是必须的，第一次给变量赋值时，就已经声明该变量，但声明变量有助于及时发现代码中的错误，因此在使用变量之前先进行声明是一种好的习惯。
10
类型转换 JavaScript是一种无类型语言，为数据类型的转换提供了灵活的处理方式，如果某个类型的值需要用于其他类型的值的环境中，JavaScript就自动将这个值转换成所需要的类型。这种转换方式被称为隐式转换。 隐式转换 如声明一个变量record，并给它赋值为86，表示record是一个数值类型的变量；现在改变record的值，将字符串“良好”赋值给变量record，record转换为字符串型变量。 隐式转换在大多数情况下可以随时处理数据类型之间的转换，但有些情况是不行的，如： average=record / 5 ; 当record值是一个字符串时，该语句就会发生错误。
11
类型转换 显式转换 将字符串转换为数值。JavaScript提供parseInt( )和parseFloat( )两个内置函数将表示数值的字符串转换为合法的数值。 parseInt("5xyz"); //5 parseInt("0xA3"); //163 parseFloat("5.21abc"); //5.21 parseFloat("s14.32"); //NaN 将数值转换为字符串。当遇到的表达式中含有混合数据类型时，JavaScript会倾向于字符串
12
变量的作用域 JavaScript中变量的作用域分为全局变量和局部变量。
对于用关键字var声明的变量，在函数内定义的称为局部变量，在函数外定义的称为全局变量；不用var声明的变量无论在函数内还是函数外都默认是全局变量。 全局变量的作用域是整个脚本(整个HTML文档) 。局部变量的作用域在定义的函数内，只能被其下面的语句块和子函数使用 。
13
表达式和运算符 表达式是变量、值和运算符按一定的规则连接起来的、有意义的式子。运算符是表达式的主要组成部分，有算术运算符、关系运算符和逻辑运算符。 算术运算符在使用时总是按照一定的顺序来计算，下表中运算符是按优先级从低到高排列的，“+/-”优先级最低，“++/--”优先级最高。如果按照优先级计算顺序不能得到预期的结果，可以用括号“( )”来改变优先级。 当表达式中不止一类运算符时，先处理算术运算符，再处理关系运算符，最后处理逻辑运算符。
14
算术运算符 JavaScript常用算术运算符 运算符 描述 例子 结果 + 加 x=x+y x=17 字符串连接
msg=”This is”+” message” msg=”This is message” - 减 x=x-y x=7 * 乘 x=x*y x=60 / 除 x=x/y x=2.4 % 求余数 (保留整数) x=x%y x=2 ++ 累加 x++ x=13 -- 递减 x-- x=11
15
关系运算符 JavaScript常用关系运算符 运算符 描述 例子 结果 == 等于 x==y false != 不等于 x!=y true
< 小于 x<y <= 小于等于 x<=y > 大于 x>y >= 大于等于 x>=y
16
逻辑运算符 JavaScript常用逻辑运算符 运算符 描述 例子 结果 || 或(只要有一个条件真，即为真) x<5||y<9
true && 与(两个条件都为真，才为真) x<5&&y<9 false ! 非(取反) !x
17
语言基础操作 案例
18
相关代码 <html> <head> <title>语言基础操作</title>
<body> <script language="JavaScript"> var x="这是一个字符串"; //声明变量 var y=76; var z=6; var r; var a="321abc"; var b="3.21abc"; var c="abc123"; document.write("变量x的初始值为："+x+"<br/>"); //显示变量初始值 document.write("变量y的初始值为："+y+"<br/>"); document.write("变量z的初始值为："+z+"<br/>"); document.write("变量r的初始值为："+r+"<br/>"); x=y; //改变变量的值 document.write("<br/>"); document.write("y变量赋值给x变量后，x的值为："+x+"<br/>"); document.write("y变量赋值给x变量后，y的值为："+y+"<br/>");
19
相关代码 r=x%z; //计算表达式 document.write("<br/>");
document.write("计算表达式x%z的值为："+r+"<br/>"); r=x/z+x-2/3 document.write("计算表达式x/z+x-2/3的值为："+r+"<br/>"); document.write("数据类型的隐式转换：<br/>"); //数据类型隐式转换 y="y变为一个字符串"; document.write("变量y被重新赋值后值为："+y+"<br/>"); document.write("数据类型的显式转换：<br/>"); //数据类型显示转换 document.write("利用parseInt( )将字符串变量a转换为数值变量"+parseInt(a)+"<br/>"); document.write("利用parseFloat( )将字符串变量b转换为数值变量"+parseFloat(b)+"<br/>"); document.write("利用parseInt( )将字符串变量c转换为数值变量"+parseInt(c)+"<br/>"); </script> </body> </html>
20
条件语句的使用 if语句 if语句是JavaScript的主要条件语句，一般形式为： if(条件表达式)｛ 语句块; ｝
21
条件语句的使用 如果条件表达式结果为假的时候也需要进行指定动作，则可以通过关键字else实现，形式为： if(条件表达式)｛ 语句块; ｝
22
条件语句的使用 JavaScript提供了一种条件表达式的简写形式，结构如下： 该语句的意义是：如果条件成立，执行语句1，否则执行语句2。
(条件表达式) ? (语句1) : (语句2) ; 该语句的意义是：如果条件成立，执行语句1，否则执行语句2。 一个if语句只能进行一个条件判断，包含两个分支，而在实际应用中条件通常不止一个，遇到此类情况时可以通过if语句的嵌套来实现。
23
条件语句的使用 switch语句 switch(表达式)｛ case 值1: 语句块1; break; case 值2: 语句块2; ……
case 值n: 语句块n; default: 语句块n+1 ｝
24
条件语句的使用 switch后面的表达式通常是变量，语句使用中需要注意以下3点。
表达式值依次与case后面的值做比较，如果与某个值相匹配，那么其后的语句块就会被执行，若所有的值都不匹配，就执行default后面的语句块。 case本身不能改变代码流程，需要和break联用。break用于结束当前case语句，并跳至switch末尾。break不是必须有的，如果没有break，会继续执行当前case后的所有case语句，无论是否匹配。 case后面必须是常量表达式，并且每个case后面表达式的值必须互不相同。
25
条件语句的使用 案例 本案例效果是根据对话框输入的成绩得到不同的提示框，如果输入的不是数值，提示“输入的不是数值，请重新输入！”；成绩在0～59之间提示“成绩不合格！”；成绩在60～69之间提示“成绩合格！”；成绩在70～79之间提示“成绩中等！”；成绩在80～89之间提示“成绩优良！”；成绩在90～100之间提示“成绩优秀！”；输入成绩不在以上范围的提示“输入成绩无效，请重新输入！”。
26
相关代码 <html> <head> <title>条件语句使用</title>
<body> <script language="JavaScript"> var record=prompt("输入考生成绩",""); if(isNaN(record)) { alert("输入的不是数值，请重新输入！"); } else record=Math.floor(record/10); switch(record) case 0: case 1: case 2: case 3: case 4: case 5:
27
相关代码 alert("成绩不合格！"); break; case 6: alert("成绩合格！"); case 7:
default: alert("输入成绩无效，请重新输入！"); } </script> </body> </html>
28
循环语句的使用 while语句 当需要重复执行某些语句的时候，可使用循环语句。while语句可以实现循环，语句结构如下：
循环体 }
29
循环语句的使用 while语句包含4个重要组成部分。
循环变量。 条件表达式。 循环体。 改变循环变量值的语句。 循环变量是控制循环结构的关键，它需要有一个初始值；条件表达式是包含循环变量的一个逻辑表达式，只有条件为真时才执行循环体，否则跳出循环执行大括号后的语句；循环体是需要反复执行的语句；为了保证循环能够实现，在循环体语句中，必须包含一条改变循环变量值的语句，当执行完一次循环体后，重新判断新的循环变量值是否符合条件。
30
循环语句的使用 do…while语句 do…while循环是循环语句的另一种形式，与while循环的不同在于前者条件表达式在循环末尾，后者在循环开头。do…while语句结构如下： do｛ 循环体 ｝ while(条件表达式); 因为条件表达式在循环末尾，因此，不管条件表达式是否成立，循环体语句至少会执行一次。
31
循环语句的使用 for语句 for语句是JavaScript提供的第三种循环形式，for语句结构如下： 其中3个表达式的作用如下。
循环体 ｝ 其中3个表达式的作用如下。 表达式1为循环变量赋初值。 表达式2给出循环条件判断。 表达式3用来改变循环变量的值。
32
循环语句的使用 for…in语句 for…in语句通常用来遍历对象的每一个属性或是数组的每一个元素。例如：
for (i in obj) { document.write(i+”值为：”+obj[i]+”<br>”); } 如果obj是一个对象，则循环变量i表示obj对象的每一个属性，obj[i]表示该属性的值；如果obj是一个数组，则循环变量i表示序号，obj[i]表示第i个数组元素。
33
循环语句的使用 案例 本案例效果是根据消息提示框的提示依次输入所有学生的各科成绩，并最终将输入结果以表格形式显示。
34
相关代码 <html> <head> <title>循环语句使用</title>
<style type="text/css"> <!-- td { width: 100px; font-size: 12px; height: 20px; text-align: center; } --> </style> </head> <body> <script language="JavaScript"> var i=0; var name=new Array("李丽","王明","周山","刘玉","李红","刘昊", "苏静","张雨","王平","周周"); //定义学生数组 var km=new Array("英语","高数","C语言","动态脚本","数据结构"); //定义科目数组 document.write("<table width=\"600px\" border=\"1\" cellpadding=\"0\""+ "cellspacing=\"0\" bordercolor=\"#000000\"><tr><td>姓名</td>");
35
相关代码 for(n in km) //显示标题行 {
document.write("<td>"+km[n]+"</td>"); } document.write("</tr>"); for(n in name) //每个学生成绩信息为一行 document.write("<tr><td>"+name[n]+"</td>"); while(i<km.length) //每门科目弹出一个信息提示框 ts="输入"+name[n]+"的"+km[i]+"成绩："; var record=prompt(ts,""); document.write("<td>"+record+"</td>"); i++; i=0; document.write("</table>"); </script> </body> </html>
36
跳转语句的使用 break语句 无穷循环可能会导致浏览器无法退出甚至无法响应用户的操作，而且JavaScript不会生成错误信息提示无穷循环，因此，在创建循环时，应尽量避免出现无穷循环。 尽管无穷循环在编程中不被提倡，但也有特殊情况。比如，可能希望程序一直运行，直到响应用户某个操作时停止，这就需要用break语句强制退出循环，基本结构如下： while (true){ 循环体; if (条件表达式) break; }
37
跳转语句的使用 continue语句 利用continue语句也可以跳出循环体，但与break语句不同的是，continue用来结束本次循环，例如： while ( i<=100 ) { i++; if ( i % 4 != 0 ) continue; total=total+i; } 该语句的意义是将小于等于100的能被4整除的数相加求和。当i不能被4整除时，执行continue语句，结束本次循环，即跳过求和语句，继续进入下一次循环。
38
跳转语句的使用 案例 本案例效果是随机生成0～100间的随机整数，如果是3的倍数，就在页面中显示，如果生成的是0，则结束，最后利用提示框提示循环执行次数和显示的值的个数。
39
相关代码 <html> <head> <title>跳转语句使用</title>
<body> <script language="JavaScript"> var n=0; var m=0; while(true) { n++; var my_random=Math.floor(Math.random( )*100); if(my_random==0)
40
相关代码 { break; } if(my_random%3==0) document.write(my_random+" "); m++;
else continue; alert("共产生"+n+"个随机数；其中3的倍数有"+m+"个！"); </script> </body> </html>
41
异常处理语句的使用 throw语句 throw 语句的作用是创建 exception(异常)。通常与 try...catch语句配合使用，用来控制程序流程并产生精确错误消息。语句结构如下： throw (exception) ; // exception 可以是字符串、整数、逻辑值或者对象
42
异常处理语句的使用 try…catch…finally语句
{ 语句块; } catch(exception) finally
43
异常处理语句的使用 3个关键字的作用列举如下。
try语句块：定义异常，将可能产生错误的语句定义在try中。异常可以是人为引发的(比如代码输入错误)，也可以是通过throw语句抛出的。 catch语句块：定义异常处理，将异常处理语句放在catch中，该语句块是可选项。 finally语句块：可以省略，无论是否发生异常都会执行，通常将关闭资源的语句放在finally中，以确保程序能在处理完异常后自动再次投入运行，该语句块也是可选项。 异常处理语句执行的流程是：运行到try块时，如果有异常抛出，则转到catch块，catch块执行完毕后，执行finally块的代码；如果没有异常抛出，执行完try块，也要去执行finally块的代码。
44
异常处理语句的使用案例 本案例效果是在消息提示框中输入一个值，如果输入的值在0～100之间，不抛出错误信息，提示“输入的成绩为**”；如果输入的值小于0，抛出错误信息，提示“成绩不能为负数！”；如果输入值大于100，抛出错误信息，提示“成绩不能大于100！”；如果输入的不是数值，抛出错误信息，提示“输入的不是数值！”。无论输入值是什么，给出相应提示后再提示“成绩输入完毕！”。
45
相关代码 <html> <head> <title>异常处理语句使用</title>
<body> <script language="JavaScript"> var x=prompt("输入考生成绩:",""); try { if(x<0) throw "err1"; } else if(x>100) throw "err2"; else if(isNaN(x)) throw "err3"; alert("输入的成绩为"+x);
46
相关代码 catch(er) { if(er=="err1") alert("成绩不能为负数！"); if(er=="err2")
} finally { alert("成绩输入完毕！") </script> </body>
47
其他语句的使用 this语句 this是面向对象语言中的一个重要概念，在面向对象语言中，this通常用来指向运行时的当前对象，但由于JavaScript是解释执行的，因此this的指向是在运行时才确定的。在JavaScript中，this通常指向的是正在执行的函数本身，或者在运行时指向该函数所属的对象。 with语句 with语句用来指定一个对象，在with语句块中，没有指定对象名的属性和方法都被假定为该对象的属性和方法。 with语句在一般情况下只是减少了一些打字时间，但是在处理DOM(Document Object Model，文档对象模型)对象时，会变得非常有用。
48
其他语句的使用 new语句 new语句用来创建一个对象，但是JavaScript是一门基于原型的语言，JavaScript没有类的概念，这一点与面向对象的Java语言是不同的，因此在new语句的使用上要格外注意。 delete语句 delete语句用来删除对象中动态添加的属性或数组中的元素。语句结构如下： delete expression; expression 参数是一个有效的JavaScript表达式，通常是一个属性名或数组元素。delete语句只用来删除对象中的属性，对象本身不会被删除。
49
其他语句的使用 案例 本案例效果是定义一个学生对象，包含学号、姓名和英语、高数、C语言、动态脚本、数据结构5门成绩，该对象还提供输出信息和计算总成绩两个方法。
50
相关代码 <html> <head> <title>其他语句使用</title>
<body> <script language="JavaScript"> function Student(no,name,english,mathe_m,c,js,data_s) { this.no=no; this.name=name; this.english=english; this.mathe_m=mathe_m; this.c=c; this.js=js; this.data_s=data_s; this.showStudent=function( )
51
相关代码 document.write("学号："+this.no+" 姓名："+this.name+"<br/>"); document.write("英语："+this.english+"<br/>"); document.write("高数："+this.mathe_m+"<br/>"); document.write("C语言："+this.c+"<br/>"); document.write("动态脚本："+this.js+"<br/>"); document.write("数据结构："+this.data_s+"<br/>"); } this.summation=function( ) { return this.english+this.mathe_m+this.c+this.js+this.data_s; var LM=new Student(" ","张红",85,91,88,78,80); with(LM) var sum=summation( ); showStudent( ); document.write("总分："+sum+"<br/><br/>"); </script> </body> </html>
52
函数的使用 函数的定义 在JavaScript的实际应用中，通常需要较长的脚本来实现具体功能，如果将所有脚本都直接放在<script></script>标签中，会导致程序的可读性下降。解决这个问题的一个好办法，就是把整个脚本分割成具有相对独立功能的几段脚本。把相关的脚本组织在一起，并给它们命名相应的名称，这种组合形式称为函数。 使用函数前，必须先定义。在HTML中，当网页被加载时<head>标签首先被执行，因此函数通常被定义在<head>部分，以保证在使用前已经被定义。函数的定义方法如下： function 函数名([参数列表]){ 函数体; }
53
函数的使用 function是函数定义的关键字，函数名的命名规则与变量命名规则相同，函数名后面的括号用来定义参数，多个参数间用逗号(，)分隔，实现功能的脚本被定义在花括号({})中。 JavaScript中所有函数都属于function对象，因此可以以定义变量的方式，利用Function对象的构造函数来定义函数，语法如下： var 变量名=new function([参数列表], 函数体);
54
函数的使用 当函数需要返回某一个具体值的时候，要在语句块中使用return语句。Return语句可以出现在语句块的任何地方，当函数执行到return语句时，即返回return后面的值，然后结束函数。例如下面两个函数定义，第一个函数的功能是弹出提示信息，不返回任何值，因此不包含return语句；第二个函数计算输入值的总和，并利用return语句返回。
55
函数的使用 函数的参数 参数是函数中的重要内容，利用参数，可以使函数对数据的处理更加灵活。函数定义时，参数列表被定义在函数名后的圆括号内。一个函数可以没有参数，也可以有多个参数，多个参数定义时用逗号(,)隔开。 函数调用时，通过参数传递数据。参数传递时要注意以下3点。 传递的参数类型必须和函数中需要的数据类型相符。 传递的参数个数必须和函数定义时一致，同样用逗号隔开。 函数中对形参(定义函数时的参数)的改变不会影响到实参(调用时传递给函数的参数)的值。
56
函数的使用 JavaScript中的内置函数
内置函数是JavaScript为用户提供的已定义的函数，这些函数可以实现不同的功能，需要使用时直接在脚本中调用即可。如3.1节中提到的转换函数parseInt( )和parseFloat( )就属于内置函数，除此之外，JavaScript还提供了大量的内置函数，其中包括数学函数、字符串函数、日期函数等。
57
函数的使用 案例 本案例效果是单击【提交】按钮，将文本框中输入的学号、姓名以及3门课程成绩显示在文本域中。
58
相关代码 <html> <head> <title>函数的使用</title>
<script language="JavaScript"> function show( ) { form1.textarea.value="学号："+form1.xhfield.value+" 姓名："+form1. namefield.value+"\r\n英语："+form1.efield.value+"\r\n高数："+form1.mfield.value+ "\r\nC语言："+form1.cfield.value; } </script> </head> <body> <form name="form1" method="post" action=""> 学号： <label> <input name="xhfield" type="text" size="15"> </label> 姓名： <input name="namefield" type="text" size="16">
59
相关代码 <label></label> <p>英语： <label>
<input name="efield" type="text" size="5"> </label> 高数： <input name="mfield" type="text" size="5"> C语言： <input name="cfield" type="text" size="5"> </p> <p> <label> <input type="button" name="Submit" value="提交" onClick="show( )"> </label> </p> <textarea name="textarea" cols="40" rows="10"></textarea> </form> </body> </html>
Similar presentations
