《Web编程基础》课件第5章 JavaScript基础

目标-1-了解JavaScript的历史及特点掌握JavaScript常用的数据类型掌握JavaScript变量的定义掌握JavaScript中的操作符及表达式掌握JavaScript中的分支、迭代结构掌握JavaScript中内置函数的使用掌握JavaScript的函数的定义及使用JavaScript简介JavaScript是一种基于对象（Object）和事件驱动（EventDriven）的脚本语言，使用它的主要目的是增强HTML页面的动态交互性，其特点如下：嵌套在HTML中环境支持解释执行弱类型语言基于对象事件驱动跨平台性-2-JavaScript是SunMicroSystems和NetScape共同开发的一种重要的脚本语言，用于创建动态效果的、人机交互的网页。JavaScript基本结构JavaScript基本结构JavaScript代码是通过<script>标签嵌入HTML文档中的。可以将多个<script>脚本嵌入到一个文档中。

基本结构如下：编写JavaScript步骤利用任何编辑器（如Dreamweaver或记事本）创建HTML文档。在HTML文档中通过<script>标签嵌入JavaScript代码。将HTML文档保存为扩展名是“.html”或“.htm”的文件，并查看结果。示例：5.1FirstJSEG.html-3-<scriptlanguage="javascript"> JavaScript语句</script>引用JavaScript文件引用JS文件

当JavaScript脚本比较复杂或代码过多时，可将JavaScript代码保存以“.js”为后缀的文件，并通过<script>标签把“.js”文件导入到HTML文档中。语法格式如下：示例：5.2FirstImportJSEG.html-4-<scripttype="text/javascript"src="url"></script>JavaScript数据类型数据类型

JavaScript中的数据类型：数据类型说明数值型JavaScript语言本身并不区分整型和浮点型数值，所有的数值在内部都由浮点型表示字符串类型使用单引号或双引号括起来的0个或多个字符布尔型布尔型常量只有两种值，即true或false函数JavaScript函数是一种特殊的对象数据类型，因此函数可以被存储在变量、数组或对象中。此外，函数还可以作为参数传递给其他函数。对象型已命名数据的集合，这些已命名的数据通常被作为对象的属性引用。常用的对象有String、Date、Math、Array等null是JavaScript中的一个特殊值，它表示“无值”，它和0不同undefined表示该变量尚未被声明或未被赋值，或者使用了一个并不存在的对象属性-5-常量常量是指在程序中值不能改变的数据，分为以下几类：数值型常量 如123、-0xAF、072、-123.456字符串型常量 如"JavaScript"、"100"、'JavaScript'

布尔型常量 可取值true和false-6-JavaScript中字符串可以用双引号和单引号两种方式声明变量变量变量是指程序中一个已经命名的存储单元命名规则变量名必须以字母或下划线开头，其后可以跟数字、字母或下划线等；变量名不能包含空格、加号、减号等特殊符号；JavaScript的变量名严格区分大小写；变量名不能使用JavaScript中的保留关键字。字符串型常量声明变量变量用关键字var进行声明示例如下：-7-var变量1[,变量2,...];varv1,v2;在JavaScript中，可以使用分号代表一个语句的结束，如果每个语句都在不同的行中，那么分号可以省略；如果多个语句在同一行中，那么分号就不能省略变量类型变量的类型JavaScript是一种弱类型的语言，变量的类型不像其它语言一样在声明时直接指定，对于同一变量可以赋不同类型的值。示例代码如下：-8-<scriptlanguage="javascript"> varx=100; x="javascript";</script>全局变量变量的作用域变量的作用域是指变量的有效范围在JavaScript中根据变量的作用域可以分为全局变量和局部变量全局变量在函数之外声明的变量叫做全局变量。示例代码如下：-9-<script> varx=5//定义全局变量

functionmyFunction(){ //函数体

}</script>局部变量局部变量在函数体内声明的变量叫做局部变量。示例代码如下：示例：5.D.2VariableEG.html-10-<script> functionmyFunction(){ varx=5//定义局部变量

......省略

}</script>注释注释可分为单行注释和多行注释单行注释单行注释使用“//”符号进行标识，其后的文字都不被程序解释执行。语法格式如下：多行注释多行注释使用“/*…*/”进行标识，其中的文字同样不被程序解释执行。语法格式如下：-11-//这是单行程序代码的注释/*这是多行程序注释*/算术运算符JavaScript中运算符主要分为：算术运算符、比较运算符和逻辑运算符算术运算符算术运算符是用于完成加法、减法、乘法、除法、递增、递减等运算的运算符。算术运算符如下表所示：示例：5.4MathEG.html运算符说明+用于两个数相加-用于两个数相减*用于两个数相乘/用于两个数相除%除法运算中的取余数++递增值（即给原来的值加1）--递减值（即给原来的值减1）-12-比较运算符比较运算符比较运算符用于比较数值、字符串或逻辑变量等，并将比较结果以逻辑值（true或false）的形式返回。比较运算符如下表所示：示例：5.5CompareEG.html运算符说明==比较两边的值是否相等!=比较两边的值是否不相等>比较左边的值是否大于右边的值<比较左边的值是否小于右边的值>=比较左边的值是否大于等于右边的值<=比较左边的值是否小于等于右边的值===比较两边的值是否严格相等!==比较两边的值是否严格不相等-13-逻辑运算符逻辑运算符逻辑运算符主要用于条件表达式中，采用逻辑值作为操作数，其返回值也是逻辑值。逻辑运算符如下表所示：示例：5.6LogicEG.html运算符说明&&逻辑与，当左右两边的操作数都为true时，返回true，否则返回false||逻辑或，当左右两边的操作数都为false时，返回false，否则返回true!逻辑非，当操作数为true时返回false，反之返回true?:三目运算符：操作数?结果1:结果2，若操作数为true则返回结果1，反之返回结果2-14-流程控制-分支结构JavaScript中的流程控制有：分支结构：if-else、switch迭代结构：while、do-while、for转移语句：break、continue、return分支结构分支结构是根据假设的条件成立与否，再决定执行什么样语句的结构，它的作用是让程序更具有选择性分支结构包括if语句和switch语句-15-if语句if-else示例：5.7MaxEG.html嵌套if示例：5.8YearEG.html-16-if(condition)statement1;[elsestatement2;]if(condition){statement1;}elseif(condition){statement2;}else{statement;}switch语句switch一个switch语句由一个控制表达式和一个由case标记表述的语句块组成。语法结构如下：示例：5.9SwitchCaseEG.html-17-switch(expression){casevalue1: statement1; break;casevalue2: statement2; break;......casevalueN: statemendN; break;[default:defaultStatement;]}流程控制-迭代结构迭代结构迭代结构的作用是反复执行一段代码，直到满足终止循环的条件为止JavaScript中迭代结构包括while语句do-while语句for语句for-in语句-18-while和do-while语句

while语句while语句是常用的迭代语句，语法结构如下:示例：5.10SumEG.htmldo-while语句do-while用于循环至少执行一次的情形，语法结构如下:示例：5.11SumEG1.html-19-while(condition){statement;}do{statement;}while(condition);for和for-in语句for语句for语句是最常见的迭代语句，一般用在循环次数已知的情形，结构如下:示例：5.12PrintTriangle.htmlfor-in语句for-in是JavaScript提供的一种特殊的循环方式，它来遍历一个对象的所有用户定义的属性或者一个数组的所有元素。示例：5.13RankEG.html-20-for(initialization;condition;update){statements;}for(propertyinObject){statements;}流程控制-转移语句转移语句用在选择结构和循环结构中，可以控制程序执行的顺序break语句在switch语句中，用于终止case语句序列，跳出switch语句。在循环结构中，用于终止循环语句序列，跳出循环结构。示例：5.14BreakEG.html

continue语句continue语句用于for、while、do-while和for-in等循环体中时，常与if条件语句一起使用，用来加速循环。满足条件时，跳过本次循环剩余的语句，强行检测判定条件以决定是否进行下一次循环。示例：5.15ContinueEG.htmlreturn语句returnreturn表达式示例：5.16ReturnEG.html-21-内置函数内置函数JavaScript常用的内置函数如下表所示：函数名说明alert显示一个警告对话框，包括一个OK按钮confirm显示一个确认对话框，包括OK、Cancel按钮prompt显示一个输入对话框，提示等待用户输入escape将字符转换成Unicode码eval计算表达式的结果parseFloat将字符串转换成符点型parseInt将字符串转换成整型isNaN测试是否不是一个数字unescape返回对一个字符串编码后的结果字符串，其中，所有空格、标点以及其他非ASCII码字符都用“%xx”（xx等于该字符对应的Unicode编码的十六进制数）格式的编码替换-22-函数是完成特定功能的一段程序代码，JavaScript中有两种函数即内置的系统函数和用户自定义函数上表中的alert()、confirm()、prompt()函数实际上是window对象的方法，window对象会在第7章讲述，表中的其他方法则称为全局函数常用内置函数alertalert函数用于弹出对话框，语法如下：parseFloat用于把字符串类型的数值转换成float型，语法格式如下：parseInt用于把字符串类型的数值转换成Int型，语法格式如下：isNaN用于判断参数是否是非数值型，语法格式如下：示例：5.17FunEG.html

-23-parseFloat(string)parseInt(string)isNaN(x)alert(value)