JavaScript技术课件.pptx

1、第四章 JAVASCRIPT技术本讲内容JavaScript简介如何编写JavaScript代码JavaScript语句、注释、变量、运算符和表达式控制语句与异常处理Promise对象数组和集合函数、事件对象和类内置对象正则表达式绘制技术JAVASCRIPT简介-什么是JAVASCRIPTJavaScript 被设计用来向 HTML 页面添加交互行为。 JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言）。 JavaScript 由数行可执行计算机代码组成。 JavaScript 通常被直接嵌入 HTML 页面。 JavaScript 是一种解释性语言（就是说，代码执行不进行

2、预编译）。 所有的人无需购买许可证均可使用 JavaScript。JavaScript 的正式名称是 ECMAScript。这个标准由 ECMA 组织发展和维护。 JAVASCRIPT简介-和JAVA相同吗？不同！在概念和设计方面，Java 和 JavaScript 是两种完全不同的语言。Java（由太阳微系统公司开发）很强大，同时也是更复杂的编程语言，就像同级别的 C 和 C+。JAVASCRIPT简介-能做什么JavaScript 为 HTML 设计师提供了一种编程工具JavaScript 可以将动态的文本放入 HTML 页面JavaScript 可以对事件作出响应JavaScript 可

3、以读写 HTML 元素JavaScript 可被用来验证数据JavaScript 可被用来检测访问者的浏览器JavaScript 可被用来创建 cookies编写JAVASCRIPTSCRIPT标签HTML 的 标签用于把 JavaScript 插入 HTML 页面当中。 和 告诉浏览器 JavaScript 从何处开始，到何处结束。 document.write(Hello World!); document.write 字段是标准的 JavaScript 命令，用来向页面写入输出。下面是兼容不支持JavaScript的浏览器编写JAVASCRIPT放置JAVASCRIPTHead部分，sc

4、ript标签作为Head标签的子标签Body部分，script标签作为body标签的子标签使用外部JavaScript(文件扩展名为.js)注意：外部文件不能包含 标签JAVASCRIPT语言基础JavaScript语言以语句为执行单位JavaScript语句是发给浏览器的命令，以分号结束，分号是可选的JavaScript代码就是JavaScript语句的序列，浏览器按照编写的顺序依次执行每条语句JavaScript代码块以开始，以结束JavaScript区分大小写，即a和A是不同的JAVASCRIPT注释JavaScript注释分单行和多行注释：单行注释以/开始多行注释以/*开头，以*/结束

5、JAVASCRIPT数据类型、变量、常量数据类型是数据在存储设备中的存储空间大小，也就是程序申请内存时用以标识所申请的内存空间大小。数据类型包括：主要（基本）数据类型是： 字符串、数值、布尔 复合（引用）数据类型是： 对象、数组 特殊数据类型是： null、undefined变量是程序中用来存储运算值的内存区域名称，用于存储信息，如：x=5；length=51.5；变量用于保存程序运行过程中的值或表达式结果。变量命名规则：大小写敏感必须以字母或下划线开始JAVASCRIPT变量声明变量，通过var语句声明变量：var x;var username;也可给出初始值：var x=5;var use

6、rname=“Tom”;通过赋值语句向JavaScript变量赋值：x=5;username=“Tom”;对未声明的变量，会自动声明变量重新声明不会丢失原来的值定义在函数内部的变量称为局部变量，局部变量只在被定义的函数或者代码块中有效，定义在函数外面的变量称为全局变量，全局变量在整个页面中有效JAVASCRIPT常量、关键字常量是相对于变量而言，在JavaScript中常量包括符号常量和值常量，符号常量通过关键字const定义，通常将符号常量使用大写字符表示以区别变量。值常量是直接使用数据表示的常量，如10、abc、true等。常量在程序运行过程中，其值是不可以被改变的。关键字是JavaScr

7、ipt语言中已经具有特定含义的标示符，在程序开发中不能被用作变量、常量、函数、对象等的命名。关键字也被称作保留字JAVASCRIPT数据类型转换类型转换是JavaScript语言对不同数据类型的数据进行计算式运算时执行的统一类型的操作。JavaScript语言的类型转换为自动转换和强制转换。转换的原则是依据数据类型在内存中占用的二进制位数决定的，将占用位数少的数据向占用位数多的数据转换时是自动转换。所有数据向字符串类型数据转换是自动的。JavaScript语言提供了两个强制类型转换函数，分别是parseInt()和parseFloat()。parseInt将数据转换为整型，parseFloat

8、将数据转换成浮点数。JAVASCRIPT运算符和表达式JavaScript语言中参与计算的符号称为运算符，表达式是通过运算符和操作数构成的符合JavaScript语言语法规范的计算式。共有10种类型的运算符，依据运算符类型对应有10种类型的表达式，包括赋值运算符、算术运算符、比较运算符、位运算符、逻辑运算符、字符串运算符、条件运算符、逗号运算符、关系运算符及其他运算符；按照运算的操作数个数又分为一元运算符、二元运算符、三元运算符。JAVASCRIPT运算符和表达式运算符=用于赋值，+用于加值等JavaScript中包括的运算符有：算术运算符比较运算符逻辑运算符条件运算符赋值运算符字符串+运算符

9、注意：字符串和数字加法运算，结果为字符串JAVASCRIPT控制语句JavaScript的程序就是一系列可执行语句的集合。一般情况下JavaScript解释器依照语句编写顺序依次执行，控制语句可改变语句执行顺序。在JavaScript语言中，控制语句包括：分支语句（if语句和switch语句）循环语句（for语句、while语句、dowhile语句） JavaScript语言中通过花括号（）表示一个符合语句，即以“”开始和“”结束括起来的0个或多个语句构成复合语句。控制语句IFELSE语句if语句是JavaScript中的条件语句，格式包括：if语句：if (条件) 条件成立时执行代码 ife

10、lse语句：if (条件) 条件成立时执行此代码 else 条件不成立时执行此代码 ifelse if else语句：if (条件1) 条件1成立执行代码 else if (条件2) 条件2成立时执行代码 else 条件1和条件2均不成立时执行代码 控制语句SWITCH语句条件判断语句中，如果条件过多且都是进行相等比较时，可采用switch语句让程序看起来更清楚。switch语句的格式：switch(n) case 1: 执行代码块 1 ; break; case 2: 执行代码块 2 ; break; default: 如果n即不是1也不是2，则执行此代码 JavaScript语言的swit

11、ch语句要求变量表达式结果的数据类型要与常量的数据类型相同，可使用的数据类型包括整型、字符串。控制语句异常处理在应用开发中，可使用if语句处理异常，但if语句只能处理已知异常，对于未知异常无法处理，JavaScript语言提供了专用以处理异常的语句trycatchfinally语句以及throw语句。使用throw语句抛出异常，throw语句可以抛出任何类型数据作为异常数据，对于语句trycatchfinally，其中try复合语句中包括的是正常执行的代码，catch语句处理try中出现的所有异常，而finally总是在try或catch后执行。Error对象是catch语句捕获到的异常类型，

12、用以处理异常的对象，该对象包括了name属性指出异常的类型，message属性给出了异常的信息。控制语句FOR循环语句for循环语句，将一段代码执行一定次数。格式：for (变量=开始值;变量=结束值;变量=变量+步进值) 需执行的代码 forin语句，遍历数组或对象的下标或属性，其结构为：for(变量 in 对象/数组) /对每个对象属性执行同样的操作forof语句，遍历数组或对象的元素值，其结构为：for(遍历 of 对象/数组) /对每个对象属性值执行同样的操作控制语句WHILE循环语句while循环语句，是当条件为true时执行代码，在不明确循环次数的情况下可选择while循环，该循环

13、的语句结构为，格式：while（条件）执行代码控制语句DOWHILE循环语句当循环必须至少执行一次时，采用dowhile循环，该循环的条件判断在后面，因此dowhile循环至少执行一次，这是与其他循环不同的地方。需要注意dowhile循环的条件结束括号后面跟分号。该循环的语句结构为：do执行代码，至少执行一次while(条件);条件为true是继续执行下一趟循环控制语句BREAK和CONTINUE编写JavaScript程序时，通常在使用循环时需要终止循环，或者终止一次循环，这就要采用break和continue语句来完成。break，终止循环执行，跳到循环语句后面的语句执行continue，

14、结束本次循环，继续下一次循环函数返回语句return也可结束循环PROMISE对象从ECMAScript 6开始，JavaScript提供了Promise对象，专用以控制延迟处理和异步操作，Promise对象具有下列状态之一：1初始（pending）：初始状态、未完成或者被拒绝；2完成（fulfilled）：操作成功完成；3拒绝（rejected）：操作失败。一个初始化的Promise对象变成成功完成（带一个值）或被拒绝（发生错误，并带一个原因即消息文本），这些状态变化时，Promise对象的then（）方法被调用并执行成功或拒绝的回调处理函数，Promise对象提供的方法可以链式调用。PRO

15、MISE对象的方法Promise对象包含的方法：1Promise.all(iterable)：返回一个Promise对象，iterable包含的所有Promise处理都成功并返回带有一个数组的Promise对象。如果iterable中任何一个被拒绝则返回带有错误原因的被拒绝Promise对象。这个方法通常使用以聚合多个Promise对象的结果；2Promise.race(iterable)：返回一个Promise对象，iterable包含的Promise之一一旦成功或拒绝立刻返回新的带有成功的值或拒绝原因的Promise对象；3Promise.reject(reason)：返回一个带有原因的被

16、拒绝Promise对象；4Promise.resolve(value)：返回一个被解决的带值Promise对象，如果Promise对象带有实例方法则执行实例方法。PROMISE对象的方法Promise对象包含的实例方法：1Promise.prototype.catch(onRejected)：该方法向Promise对象追加一个拒绝（错误）处理器，并返回一个新的Promise对象；2Promise.prototype.then(onFulfilled, onRejected)：向Promise对象追加一个成功完成的处理器和一个拒绝处理器，并返回一个新的Promise对象。数组和集合数组是值的有序

17、集合。每个值被称作元素，每个元素在数组中有一个位置，以数字表示，称为索引或下标。JavaScript语言是弱类型的语言，对数据类型都是JavaScript语言解析系统依据数据本身自动识别，数组中的元素类型也不例外，可以是任意类型，因此，数组中的元素数据类型可能是不同类型。JavaScript语言的数组下标从0开始，即第一个元素的下标为0，数组的最大下标是数组的元素个数减去1，使用数组的length属性可获得数组的元素个数。在JavaScript语言中数组可以动态删减元素，这个特性使得JavaScript语言的数组使用起来更加灵活数组定义JavaScript语言中创建数组包括两种方式，使用 直接

18、赋值或使用Array类构造一个数组。在JavaScript语言中只有一维数组定义没有二维或多维数组直接定义，也就是只有一个下标。对于二维数组及多维数组JavaScript语言中可通过一维数组构建。即一个二维数组是一个一维数组，这个一维数组的每个元素又是一个一维数组，从而构成一个二维数组，其他多维数组依次类推。var arr = ; /定义一个空数组var arr = new Array();/定义一个空数组数组访问： 数组名下标;数组遍历遍历数组：遍历就是对数组中的每个元素挨个访问一遍，在JavaScript语言中可以使用任何一个循环语句来遍历数组，除了循环语句来遍历数组，在JavaScrip

19、t语言中数组包含了一个成员方法forEach，该方法的定义格式是： /* *遍历数组 *param callback，回调函数，参数包括currentValue，currentIndex，array *param thisArg，可选，被回调函数使用的this对象 */Array.prototype.forEach(callback, thisArg);集合（MAP和SET集合）Map和Set是JavaScript语言提供的两个集合，Map集合以key/value形式存储数据，可存储任何类型数据，其键也可是任何类型。Set是存储惟一值得集合，可存储任何类型数据。其定义格式为：var = new

20、 Set();var = new Met();参数iterabale 是可遍历的数组或对象，null被看作undefined。Map和Set集合均包含一个size原型属性获取集合中元素的个数；集合（MAP和SET集合）对于Set集合包含的原型方法有：1）Set.prototype.add(value)：向集合添加元素2）Set.prototype.clear()：删除集合所有元素3）Set.prototype.delete(value)：删除元素value并返回value4）Set.prototype.entries()：返回可遍历对象5）Set.prototype.forEach(callb

21、ackFn, thisArg)：遍历集合6）Set.prototype.has(value)：判断集合是否包含value元素7）Set.prototype.keys()：与Set.prototype.values()相同8）Set.prototype.values()：返回可遍历对象包括集合的所有值集合（MAP和SET集合）对于Map集合包含的原型方法有：1）Map.prototype.clear()：删除集合所有元素2）Map.prototype.delete(key)：删除key键元素并返回value3）Map.prototype.entries()：返回可遍历的对象包含key,value

22、的数组4）Map.prototype.forEach(callbackFn, thisArg)：对每个key-value调用callbackFn函数5）Map.prototype.get(key)：返回key对应的value，不存在返回undefined6）Map.prototype.has(key)：判断是否包含key7）Map.prototype.keys()：返回包含key的可遍历的对象8）Map.prototype.set(key, value)：向集合添加元素JAVASCRIPT函数概述JavaScript语言中，函数是具有名称的独立代码块，是JavaScript语言一组执行任务或计

23、算值的语句，函数具有较好的可重用性，一次定义无限次使用。使用函数时必须先定义再使用。函数是有名字可以重复执行的代码块。将脚本编写成函数，可以避免页面加载时执行脚本函数中的代码只能在被调用时执行函数可以定义在html文档的head部分，或者放在外部文件（.js文件）中JAVASCRIPT函数定义创建函数语法：function 函数名(var1,var2varn) 执行代码var1，var2varn是调用函数时传递给函数的参数和定义了函数的开始和结束function 函数名()/无参函数必须带()代码JAVASCRIPT函数调用与返回函数定义后即可在其有效范围内调用，函数的有效范围与变量相同，具有

24、全局和局部之分，也就是说在一个函数的内部也可定义一个局部函数。调用函数格式为：函数名(实参1，实参2，实参N); /根据函数定义时提供的参数列表提供实参如果一个函数需要返回值，采用return语句，return语句用来规定从函数返回值function 函数名(参数列表) 执行代码 return 返回值;JAVASCRIPT消息框浏览器提供的window对象可作为JavaScript的内置对象使用，其提供了三个对话框可直接调用：alert(文本消息)，调用时弹出一个消息警告框confirm(文本)，调用时弹出一个带有确定和取消两个按钮的确认框var s = perform(文本，默认值)，调用时

25、弹出一个可接收用户输入的提示框，如果用户点击确定返回用户输入的值，点击取消返回nullJAVASCRIPT计时器Window对象还提供了两种方式达到计时器效果：setTimeOut和clearTimeOut，在给定时间后执行给定的JavaScript语句var t=setTimeout(javascript语句,毫秒)clearTimeout(t)/清除对象setInterval和clearInterval：每间隔给定时间执行给定的JavaScript语句var t = setInterval(“javascript语句”,毫秒)clearInterval(t)/清除间隔对象JAVASCRIP

26、T事件事件是可以被JavaScript侦测到的行为，在页面中的元素都可以产生某些调用JavaScript函数的事件，如单击鼠标触发一个onclick事件注：事件和函数配合使用，事件发生函数执行。常见事件有：onclick,ondbclick,onerror,onkeyup,onkeydown,onload,onunload,onfocus,onblur,onchange,onsubmit,onmouseover,onmouseout，onselect，Oncontextmenu，onwheel，ondrag，ondropJAVASCRIPT特殊字符代码代码输出输出单引号双引号&和号反斜杠n换行

27、符r回车符t制表符b退格符f换页符JAVASCRIPT提示JavaScript是大小写敏感的，因此在定义变量，函数等是注意大小写JavaScript忽略多余空格，所以在代码中添加适当的空格以提高可读性，如：avg=20和avg = 20是等价的有时字符串太长，可以通过来将字符串折行JAVASCRIPT对象和类JavaScript 语言中类是对象的集合，对象是属性和方法的集合。方法就是前面提到的函数，在JavaScript语言中，全局函数是window对象的成员方法。属性是一个值或一组值，是对象的成员。JavaScript支持四种类型的对象：内置类对象、自定义对象、宿主提供的对象（如Intern

28、et浏览器中的window和document）以及ActiveX对象（外部组件）。对象和数组几乎是以相同的方式处理的。数组实际上是一种特殊的对象。数组和对象的区别在于数组有一个length 属性，而对象没有。JavaScript语言中所有对象包括数组均支持动态添加属性和方法。类和对象的区别在于，类是对象的集合，对象是类的实例化，类是抽象的、概念化的，对象是具体的。JAVASCRIPT对象和类对象定义方式:1、通过Object类定义一个对象var obj = new Object(); 2、通过function关键字定义类，类定义对象function Student(stuNo, stuName

29、)/*this关键字作为当前对象*/3、用 直接定义对象var obj = ; /对象定义4、使用class关键字定义类，类定义对象，这种格式有两种：var = class /类体定义 JAVASCRIPT对象和类第二中方式定义类：class extends constructor() /初始化 get ()/getter方法实现 set ()/setter方法实现()/定义原型方法 /方法体static ()/定义静态方法 /方法体 JAVASCRIPT内置对象JavaScript提供了一些内置对象：String（字符串），Date（日期），Array（数组），Boolean（逻辑），Mat

30、h（数学），RegExp（正则表达式）还包括了HTML DOM对象window，JavaScript层级的顶级对象navigator，浏览器客户端信息screen，客户端屏幕信息history，浏览器访问过的URLlocation，当前URL信息JAVASCRIPT内置对象navigator的appName和appVersion可以检测浏览器cookie处理，JavaScript可以对浏览器端的cookie进行处理，对象document.cookie JavaScript提供了表单验证能力可以通过JavaScript实现动画JSON对象解析json格式数据对象用于属性和方法，访问对象属性：对象

31、名.属性名对象方法调用：对象名.方法名()JAVASCRIPT内置对象XMLHttpRequest对象AJAX是异步JavaScript和XML，可以快速创建动态网页技术，不刷新整个页面从而更新内容XMLHttpRequest对象是AJAX基础：variable=new XMLHttpRequest();旧版本：variable=new ActiveXObject(Microsoft.XMLHTTP);AJAX技术发生请求请求发送到服务器使用 XMLHttpRequest 对象的 open() 和 send() ：与 POST 相比，GET 更简单也更快，但POST稳定在以下情况中，请使用 P

32、OST 请求：无法使用缓存文件（更新服务器上的文件或数据库）向服务器发送大量数据（POST 没有数据量限制）发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠方法描述open(method,url,async)规定请求的类型、URL 以及是否异步处理请求。method：请求的类型；GET 或 POSTurl：文件在服务器上的位置async：true（异步）或 false（同步）send(string)将请求发送到服务器。string：仅用于 POST 请求AJAX技术发生请求需要像 HTML 表单那样 POST 数据，使用 setRequestHeader() 来添加 HTTP

33、 头。然后在 send() 方法中规定发送的数据当async=true 时，定义onreadystatechange 事件中的就绪状态时执行的函数：xmlhttp.readyState=4 & xmlhttp.status=200方法描述setRequestHeader(header,value)向请求添加 HTTP 头。header: 规定头的名称value: 规定头的值AJAX技术服务器响应获得来自服务器的响应，使用 XMLHttpRequest 对象的 responseText（字符串） 或 responseXML （XML格式）属性当 readyState 改变时，就会触发 onrea

34、dystatechange 事件，readyState 属性存有 XMLHttpRequest 的状态信息。XMLHttpRequest 对象的三个重要的属性：属性描述onreadystatechange存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。readyState存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成，且响应已就绪status200: OK404: 未找到页面JAVASCRIPT正则表达式正则表达式是文本搜索的匹配模式，能够快速从目标文本

35、中找出需要的数据，类似模糊查找，但更加强大、灵活。使用正则表达式优势： 测试字符串模式。测试字符串是否存在电话或信用卡号码。这称为数据有效性验证；依据模式匹配替换文本。可以在文档中使用一个正则表达式来标识特定文字，全部将其删除，或替换为别的文字； 根据模式匹配从字符串中提取子串。可以用来在文本或输入字段中查找特定文字。 在JavaScript语言可使用正则表达式直接对字符串对象做简单处理，更专业的正则表达式应用是采用RegExp对象处理JAVASCRIPT正则表达式正则表达式有两种格式：1、/模式/参数2、var = new RegExp(模式, 参数);参数参数描述描述g全局匹配i不区分大小

36、写m多行匹配uUnicode编码匹配y仅从lastIndex属性给出的索引匹配绘制技术HTML5新增canvas标签元素可以让用户使用JavaScript在网页上绘制图像，canvas的默认大小为300像素150像素（宽高），绘制中会根据窗口大小自动适应，JavaScript通过上下文对象支持绘制功能。HTML5 的 canvas 标签是一个矩形区域，标签中的height和width属性以像素为单位，用于设置canvas 的高度和宽度。Canvas绘制图形步骤：1在HTML中包含canvas标签元素并提供一个id元素惟一标识该元素对象，cavans必须有结束标签；2JavaScript通过id

37、属性获得canvas对象，并通过canvas对象调用getContext()方法获得上下文对象；3调用上下文的绘制方法开始绘制内容，注意绘制坐标以画布左上角为坐标原点向下为y轴正向，向右为x轴正向，所有绘制从左上角开始，上下文对象的绘制方法比较多绘制技术HTML5还支持SVG图形绘制，canvas绘制以位图为主，而SVG则属于矢量图绘制。SVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。Canvas 通过 JavaScript 来绘制 2D 图形。Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。