ch06(js)-teacher.ppt

1、第6章 JavaScript 脚本语言,主 要 内 容,JavaScript简介 JavaScript 基本语法 对象化编程 JavaScript的浏览器内部对象(DOM) Dreamweaver CS4与JavaScript,6.1 JavaScript简介,1、什么是JavaScript？ 1）什么是脚本语言？ 脚本语言泛指用于简单或特定编程任务的描述性语言，它介于HTML类语言与高级语言（C+、java等）之间。 目前常用的脚本语言主要有 JavaScript、VbScript、ActionScript、SQL、JSP、ASP、PHP等等。,6.1 JavaScript简介,1、什么是J

2、avaScript？ 2）JavaScript概念 JavaScript是一种脚本语言，为网页设计提供了一种在客户端运行程序的手段，通过它可以实现客户端数据验证、网页特效等功能。 演示：有趣的JavaScript效果 留言墙、鼠标跟随、时钟、菜单,6.1 JavaScript简介,3、JavaScript与java 二者关系 二者的区别 面向对象与基于对象 执行方式不同 强变量和弱变量 作用面不同,6.1 JavaScript简介,4、JavaScript的用途 创建生动的用户界面 数据有效性验证 AJAX框架,6.1 JavaScript简介,5、JavaScript语言的组成,JavaSc

3、ript核心语言,JavaScript客户端扩展 DOM,JavaScript服务器端扩展,JavaScript语言,1,2,3,6、我的第一个JavaScripthelloWorld.js,6.1 JavaScript简介,演示示例helloWorld.html,6、我的第一个JavaScripthelloWorld.js,6.1 JavaScript简介,演示示例helloWorld.html,6.1.6 我的第一个JavaScripthelloWorld.js 总结一： javascript语句：以分号结束; javascript注释： 单行注释：/注释内容 多行注释：/*注释内容*/

4、javascript大小写敏感，与HTML不同； “”作用。,6.1 JavaScript简介,6.1.6 我的第一个JavaScripthelloWorld.js 总结二：JavaScript核心功能就是能够控制html页面的元素 直接输出HTML代码 document.write(字符串形式的html代码); 获取到页面元素并控制属性 获取页面元素 控制JavaScript特性（）,6.1 JavaScript简介,6.1.6 我的第一个JavaScripthelloWorld.js 总结二：如何获取到页面元素 1、document.getElementById(id) 2、documen

5、t.getElementsByTagName(标签名)集合 1）document.getElementsByTagName(标签名)index/id 2）document.getElementsByTagName(标签名)(index/id) 3）document.getElementsByTagName(标签名) .item(index/id) 3、document.getElementByName(name)IE不支持,6.1 JavaScript简介,6.2 JavaScript基本语法,6.2.1 将JavaScript引入网页 1、内部嵌入法 语法： 例：, JavaScript语句

6、; ,6.2 JavaScript基本语法,6.2.1 将JavaScript引入网页 2、外部文件引入法 语法： 例：, ,6.2 JavaScript基本语法,6.2.1 将JavaScript引入网页 3、浏览器调用法 语法： 例：,Javascript : JavaScript语句;,6.2 JavaScript基本语法,6.2.1 将JavaScript引入网页 4、链接调用法 语法： 例：,.,6.2 JavaScript基本语法,6.2.1 将JavaScript引入网页 5、事件调用法 语法： 示例： ,.,6.2 JavaScript基本语法,6.2.2 JavaScript

7、的变量 1、JS变量命名规则 只能包含数字、字母、下划线和$符号 不能以数字开头 不能是javaScript的关键字 不要使用javaScript的保留字,6.2 JavaScript基本语法,6.2.2JavaScript的变量 1、 JS变量命名规则 例： 1) _abc 2) $ai_1 3) 6a 4) case 5) class 6) char,6.2 JavaScript基本语法,6.2.2 JavaScript的变量 2、JS的关键字,6.2 JavaScript基本语法,6.2.2 JavaScript的变量 3、JS的保留字,6.2 JavaScript基本语法,6.2.2

8、JavaScript的变量 练习：请判断以下JS变量命名是否正确？ 1） 1_abc 2） $ 3） _6a 4） $_case 5） String 6） witch 7） enum,6.2 JavaScript基本语法,6.2.2 JavaScript的变量 2、变量的声明 语法：var 变量名 = 变量值; 注意：JS采用弱类型变量 var sum; /声明单个变量 var red,green,blue; /同时声明多个变量 var total=0,iLoop = 100; /声明并初始化,Int a=3; float f =0.0;,错误！,6.2 JavaScript基本语法,6.2.

9、3 JavaScript的数据类型,6.2 JavaScript基本语法,6.2.3 JavaScript的数据类型 1、字符串类型 1）字符串是一组被引号(单引号或双引号)括起来的文本。 注意：JavaScript中不对“字符”和 “字符串”加以区分 例： var emp=s 定义了一个只有一个字符s的字符串。,6.2 JavaScript基本语法,6.2.3 JavaScript的数据类型,思考： 如果将alert(string1)改为document.write(string1);输出结果是什么？,6.2 JavaScript基本语法,6.2.3 JavaScript的数据类型 1、字符

10、串类型 2）转义字符 引号的转义规则 双引号内出现单引号无须转义 单引号内出现双引号无须转义 n与 n用于控制字符串换行 在页面中换行必须使用标签,6.2 JavaScript基本语法,6.2.3 JavaScript的数据类型 5、 JavaScript数据类型转换 2）显示类型转换 toString（）方法 布尔类型 数值型 字符串型 语法：变量. toString（）,ch05(6.2,4)-var类型转换.html,6.2.3 JavaScript的数据类型 5、 JavaScript数据类型转换 2）显示类型转换 parseInt()方法 简单模式：parseInt(字符串/变量)

11、基模式：parseInt(字符串/变量，基数),6.2 JavaScript基本语法,ch05(6.2,4)-var类型转换2.html,6.2.3 JavaScript的数据类型 5、 JavaScript数据类型转换 2）显示类型转换,6.2 JavaScript基本语法,ch05(6.2,4)-var类型转换2.html,基数,6.2 JavaScript基本语法,6.2.3 JavaScript的数据类型 4、 JavaScript数据类型转换 2）显示类型转换 parsefloat()方法 没有基模式 无效参数返回NaN 忽略第2个小数点以后数字,ch05(6.2,4)-var类型转

12、换3.html,6.2 JavaScript基本语法,6.2.4 JavaScript的三种对话框 1、 警告对话框alert(字符串) 2、用户输入对话框prompt() 方法 语法：prompt(text,defaultText) 说明：单击“取消”或“关闭”按钮返回null，单击“确定”返回输入值 3、确认对话框：confirm(字符串) 用户单击确定返回true，单击取消返回false,6.2 JavaScript基本语法,6.2.5 JavaScript功能语句 1、 JavaScript条件语句 1）if条件语句 if(条件 ) 语句; if(条件 ) 语句; else 语句; i

13、f(条件 ) 语句; else if 语句; else if 语句; else if(条件 ) if (条件 ) 语句; else else语句; ,6.2 JavaScript基本语法,6.2.5 JavaScript功能语句 1、 JavaScript条件语句, var r=0; var area=0; r=prompt(请输入圆的半径,); if(r=null|r=) alert(您没有输入数据！); else if(isNaN(r) alert(您输入的不是数字！); else area=r*r*Math.PI;alert(圆的面积是+area); ,ch05(6.2.5,1)-if1

14、.html,6.2 JavaScript基本语法,6.2.5 JavaScript功能语句 1、 JavaScript条件语句 2）switch条件语句 语法,switch (switch-expression) case value1: statement(s)1; break; case value2: statement(s)2; break; case valueN: statement(s)N; break; default: statement(s)-for-default; ,注意关键字: case、default、break,6.2 JavaScript基本语法,6.2.5 J

15、avaScript功能语句 1、 JavaScript条件语句 2)switch条件语句（例：根据系统日期输出不同的字符串）, var d=new Date(); theDay=d.getDay();/声明日期对象，获取星期（1-0） switch (theDay) case 1: document.write(黑色星期一！);break; case 2: document.write(郁闷星期二！);break; case 3: document.write(崩溃星期三！);break; case 4: document.write(期待星期四!); break; case 5: docum

16、ent.write(开心星期五！);break; case 6: document.write(解放星期六！);break; case 0: document.write(爱与痛的边缘！星期天！);break; default: document.write(不会执行到我哦！) ,ch05(6.2.5,4)-switch1.html,6.2 JavaScript基本语法,6.2.5 JavaScript功能语句 1、 JavaScript条件语句 2) switch条件语句（例：根据系统日期输出不同的字符串） 如果将break语句删除会出现什么情况？ default语句放在最前面会出现什么情况

17、？,ch05(6.2.5,4)-switch1.html,6.2 JavaScript基本语法,6.2.5 JavaScript功能语句 1、 JavaScript条件语句switch,switch语句需要注意的问题： （1）注意每种条件后都应写break，防止case穿透； （2）可以进行多个case的合并； case1：case2：case3：语句 case1，2，3：语句 （3）default可以省略，但不推荐省略（处理一些剩余的情况） （4） switch-expression可以是字符串、数值；,6.2 JavaScript基本语法,6.2.5 JavaScript功能语句 2、 循

18、环语句 for语句 while语句 do-while语句 break和continue关键字,6.2 JavaScript基本语法,6.2.5 JavaScript功能语句 for语句练习2：输出一个表格，从键盘接收行、列值, var col=0,row=0; row=prompt(请输入表格的行,0); col=prompt(请输入表格的列,0); document.write(); for(var i=1;i); for(var j=1;j); document.write(第+i+行第+j+列内容); document.write(“); document.write(); docume

19、nt.write(); ,ch05(6.2.5,6)-for2.html,6.2 JavaScript基本语法,6.2.5 JavaScript功能语句 3、while语句, var col=0,row=0,str=; row=prompt(请输入表格的行,0); col=prompt(请输入表格的列,0); document.write(); for(var i=1;i else str= document.write(str); for(var j=1;j); document.write(第+i+行第+j+列内容); document.write(); document.write();

20、 document.write(); ,6.2 JavaScript基本语法,6.2.5 JavaScript功能语句 3、while语句 练习2：使用while循环在页面上输出一个表格，行、列值从键盘输入，将对角线单元格的背景色设置为“blue”，字体颜色设置为“red”，同时将表格单元格的宽度设置为50px，高度设置为20px。,6.2 JavaScript基本语法,6.2.5 JavaScript功能语句 练习3：编写一个猜数游戏，产生一个1-10之间的随机整数，通过prompt提示用户输入，并将比较结果返回给用户（猜大了还是猜小了），直到用户猜中数字或机会用完，机会使用一个变量自己来设

21、置。最后显示出这个数，和用户的猜数次数。 提示：产生一个a-b之间的整数 parseInt(Math.random()*(b-a+1)+a;,课程安排：,本次课：函数、事件、内置对象 本周周三：1、1）串讲 2）答疑 2、js+css弹出式菜单（自选） 下周周一：js留言墙的实现 下周周三：1、Dreamweaver js spy框架使用（0.5小时） 2、机试考试（1-1.5小时） 下周周五：笔试考试（106，105）,6.2 JavaScript基本语法,6.2.6 JavaScript函数 1、定义 完成某种功能的代码块 2、作用 可以在脚本中被事件触发或被其他语句调用 将功能模块化，使

22、脚本更具有可读性 3、语法 使用 function 关键字来定义一个函数,6.2 JavaScript基本语法,6.2.6 JavaScript函数 3、语法 注意： 无须返回值的声明 一定要在调用前加载完毕 参数一定没有变量的声明var,function 函数名(var1,var2,.,varX) 代码 return ,6.2 JavaScript基本语法,6.2.6 JavaScript函数 4、例： 使用函数实现3个数的和。, 函数1 function a(x, y, z) return x+y+z; var sum = a(1,2,3); alert(三个数的和是：+sum); ,6.

23、2 JavaScript基本语法,6.2.6 JavaScript函数 5、练习：从键盘接收3个数，编写一个比较两数大小的函数，通过调用函数实现找出3个数中最大的数，打印在页面上。 提示： 编写比较两数大小的函数，返回大的。 两次调用函数，第一次比较前2个数，找出较大的数max，第二次比较max和第3个数大小。,6.2 JavaScript基本语法,6.2.6 JavaScript函数 6、eval()内部函数 形式：eval（字符串/字符串变量） 作用：对字符串形式表示的任意有效表达式求值 例：,var s1=1+2+3; alert(eval(s1);,eval(document.writ

24、e(打印数据);,6.2 JavaScript基本语法,6.2.6 JavaScript函数 6、setTimeout() 功能：在指定的毫秒数后执行程序，返回一个整数的id值 语法：setTimeout(程序或函数,毫秒数); 例：setTimeout(a(),1000);, var i=1; function a() document.getElementById(div1).innerHTML=i+; window.setTimeout(a(),1000); window.setTimeout(a(),1000); ,6.2 JavaScript基本语法,6.2.6 JavaScript

25、函数 6、clearTimeout() 功能：根据setTimeout()产生的id值停止执行程序 语法：clearTimeout(由setTimeout产生的id值) 例：clearTimeout(id-by- setTimeout), var i=1; var s=0; function a() document.getElementById(div1).innerHTML=i+; s = window.setTimeout(a(),1000); window.setTimeout(a(),1000); ,6.2 JavaScript基本语法,6.2.6 JavaScript函数 7、se

26、tInterval() 功能：按照指定的毫秒数（周期）执行程序，返回整数的id值 语法： setInterval(“程序或函数”,周期); 例： setInterval(a(),1000);, var i=1; function a() document.getElementById(div1).innerHTML=i+; window.setInterval(a(),1000); ,6.2 JavaScript基本语法,6.2.6 JavaScript函数 7、clearInterval() 功能：根据clearTimeout()产生的id值停止执行程序 语法：clearInterval (

27、程序或函数,毫秒数); 例：clearInterval (id-by- clearInterval);, var i=1; var flag; function a() document.getElementById(div1).innerHTML=i+; flag=window.setInterval(a(),1000); ,6.2 JavaScript基本语法,6.2.6 JavaScript函数 函数总结 尽量写在head标签之间 用function关键字声明 参数没有类型声明 没有返回值类型声明 在函数中慎用document.write() 会创建新文档,6.3 JavaScript对

28、象化编程,6.3.1 JavaScript对象的基本知识 1、JS中的对象简介 什么是对象：属性和方法的集合 JavaScript的对象系统 JavaScript内部对象 JavaScript浏览器扩展对象 JavaScript自定义对象,6.3 JavaScript对象化编程,6.3.1 JavaScript对象的基本知识 2、对象的属性和方法 属性：属性指与对象有关的值 方法：方法指对象可以执行的行为（或者可以完成的功能） 属性和方法的引用： 对象.属性名 对象属性名 对象.方法名, var str=Hello world!“ document.write(str.length) docu

29、ment.write(str.toUpperCase() ,6.3 JavaScript对象化编程,6.3.2 JavaScript事件处理 1、事件和事件驱动 定义：事件是可以被 JavaScript 侦测到的行为 JavaScript事件分类： 用户在浏览器中产生的操作，如单击鼠标（onclick）、按下键盘上的键（onkeydown）等 文档本身产生的事件，如文档加载（onload）、卸载文档（onunload）等 事件驱动,6.3 JavaScript对象化编程,6.3.2 JavaScript事件处理 2、JavaScript的常见事件,6.3 JavaScript对象化编程,6.3

30、.2 JavaScript事件处理 2、JavaScript的常见事件例：练习对象的常见事件, function a(gender) alert(你是+gender+生); 姓名： 性别： 男 女 ,ch05(6.3.1,2)-object2.html,6.3 JavaScript对象化编程,6.3.2 JavaScript事件处理 3、指定事件处理程序 直接在HTML标签中指定 单独编写JS代码说明 格式：对象.事件=事件处理程序 document.getElementsByTId(“input1”). onkeydown=a,6.3 JavaScript对象化编程,6.3.2 JavaSc

31、ript事件处理 3、指定事件处理程序 例：练习第二种方式，编写代码指定事件处理程序,ch05(6.3.1,1)-object1.html, function a() alert(我是事件处理程序代码); 第一个文本框： 第二个文本框： document.getElementsByTagName(input).item(1).onkeydown=a; ,6.3 JavaScript对象化编程,6.3.2 JavaScript事件处理 4、错误处理与onerror事件 trycatch语句 对可能出错的代码进行错误捕获并处理 onerror事件 任何的JavaScript出现错误的时候都会触发o

32、nerror事件，通过该事件可以捕获错误信息并处理,ch05(6.3.1,4)-object4.html,6.3 JavaScript对象化编程,6.3.2 JavaScript事件处理 4、错误处理与onerror事件 trycatch语句 语法：,try /在此运行代码 catch(err) /在此处理错误 finally /此处是最后执行的代码 ,try adddlert(Welcome!) catch(err) alert(此页面存在一个错误。) finally alert(“结束) ,6.3 JavaScript对象化编程,6.3.2 JavaScript事件处理 5、错误处理与on

33、error事件trycatch语句, function message() try adddlert(Welcome guest!); catch(err) txt=此页面存在一个错误。nn“; txt+=错误描述: + err.description + nn“; txt+=点击OK继续。nn“; alert(txt); finally alert(程序结束); ,ch05(6.3.1,5)-object6.html,6.3 JavaScript对象化编程,6.3.2 JavaScript事件处理 5、错误处理与onerror事件 trycatch语句 注意： catch后的变量err存储了

34、错误的具体信息，可以通过 err.description获取错误的信息描述。 finally中的语句是无论是否捕获到错误都会执行的语句,6.3 JavaScript对象化编程,6.3.2 JavaScript事件处理 5、错误处理与onerror事件 带确认框的trycatch语句,ch05(6.3.1,6)-object6.html,6.3 JavaScript对象化编程,6.3.2 JavaScript事件处理 5、错误处理与onerror事件 带确认框的trycatch语句 注意： confirm(确认信息)返回true或false document.location.href=指定lo

35、cation对象的href属性，起到定向页面的作用,ch05(6.3.1,6)-object6.html,6.3 JavaScript对象化编程,6.3.2 JavaScript事件处理 5、错误处理与onerror事件 onerror事件 作用：捕获JavaScript的错误 使用方法：window.onerror=handleErr; function handleErr(msg,url,line) /操作错信息 return true or false ,ch05(6.3.1,6)-object6.html,6.3 JavaScript对象化编程,6.3.2 JavaScript事件处理

36、 5、错误处理与onerror事件 onerror事件例：,ch05(6.3.1,7)-object7.html, window.onerror=handleErr; var txt=; function handleErr(msg,url,line) txt = 出现了一个错误n; txt += 错误信息是:+msg+n; txt += 错误产生在第+line+行n; txt += 错误的url是:+url; alert(txt); return true; ,6.3 JavaScript对象化编程,6.3.2 JavaScript内部对象 1、String字符串对象 声明 语法：new S

37、tring(s); String(s); 例：var s= new String(哈哈哈); var s1= String(hello); 属性 length：获得字符串的长度 语法：String.length 例：var n = s.length; var n1 = addd.length,ch05(6.3.2,1)-string1.html,6.3 JavaScript对象化编程,6.3.3 JavaScript内部对象 1、String字符串对象,ch05(6.3.2,2)-string2.html,6.3 JavaScript对象化编程,6.3.3JavaScript内部对象 2、Ar

38、ray数组 创建 语法： 例：,new Array(); new Array(size); new Array(element0, element1, ., elementn);,var arr1 = new Array(); var arr2 = new Array(3); var arr3 = new Array(“web”,“programe”,“development”),6.3 JavaScript对象化编程,6.3.3 JavaScript内部对象 2、Array数组 属性 length：返回数组中元素的个数 例：,var arr3 = new Array(“web”,“progr

39、ame”,“development”); alert(arr3.length);,6.3 JavaScript对象化编程,6.3.3 JavaScript内部对象 2、Array数组 方法,ch05(6.3.2,3)-array1.html,6.3 JavaScript对象化编程,6.3.3 JavaScript内部对象 3、Math数学对象 属性,6.3 JavaScript对象化编程,6.3.3 JavaScript内部对象 3、Math数学对象 方法,ch05(6.3.2,4)-math1.html,6.3 JavaScript对象化编程,6.3.2 JavaScript内部对象 3、Math数学对象 方法random() var x = Math.random()：返回0.0,1.0)区间的随机数 Math.random()*(b-a+1)+a：返回a,b区间的随机数 parseInt(Math.random()*(b-a+1)+a)：返回a,b的随机整数 parseInt(Math.random() ：永远返回0,parseInt( Math.random()*5+5 ） 返回5，9之间的随机整数,ch05(6.3.2,4)-math1.html,6.3 Jav