Javascript教案(46页).doc

《Javascript教案(46页).doc》由会员分享，可在线阅读，更多相关《Javascript教案(46页).doc（45页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、-Javascript教案-第 45 页 教案Javascript部分共10天40学时2周第一天 Javascript简介第一节 简介 1.1 Javascript简介： Javascript的历史1992年，一家名为Nombas的公司开发一种叫C减减(C-minus-minus，简称Cmm，有点与C+对应的意味)的嵌入式脚本语言。Cmm背后的理念很简单：一个足够强大可以替代宏操作（macro）的脚本语言，同时保持C/C+足够的相似性（C语言太经典了，特别是其语法有着简洁美），以便开发人员能很快学会。这个脚本语言被捆绑在一个叫做CEnvi的共享软件产品中，它首次向开发人员展示了这种语言的威力。

2、Nombas最终把Cmm的名字改成了ScriptEase，原因是后面的部分（mm）听起来过于“消极”，同时字母“C”令人害怕。现在ScriptEase已经成为了Nombas产品背后主要驱动力（怎么我觉得这家公司已经不存在了呢？）。当Netscape Navigator（盛极一时的网景的浏览器，结果被微软IE的免费策略搅黄了局）暂露头角时，Nombas开发了一个可以嵌入网页中的CEnvi的版本。这些早期的实验称为Espresso Page，它们代表了第一个在万维网上使用的客户端脚本语言。而Nombas丝毫没有料到它的理念将会成为internet的一块重要基石。 当internet普及越来越广时，

3、对于开发客户端脚本的需求也逐渐增大。此时，大部分internet用户仅仅通过28.8kbit/s的Modem来连接到网络，即使这时网页已经不断地变得更大和更复杂。加剧用户痛苦的是，仅仅为了简单的表单有效性验证，就要与服务器进行多次的往返交互。设想一下，用户填写完一个表单，点击提交按钮，等待30秒后，看到的却是一条告诉你忘记填写一个必要的字段的信息。那时正处于技术革新最前沿的Netscape，开始认真考虑一种开发客户端语言来处理简单的问题。当时为Netscape工作的Brendan Erich，开始着手为即将在1995年发行的Netscape Navigator 2.0开发一个称之为LiveSc

4、ript的脚本语言，当时的目的是同时在浏览器和服务器使用它。Netscape与Sun公司联手及时完成了LiveScript的实现。就在Netscape Navigator 2.0即将正式发布前，Netscape将其更名为Javascript（想当年，也就是95年，正式Java普遍开始流行的一年，Java开始火起来，似乎打上一个Java的标签，也会火起来一样），目的是为了利用Java这个internet时髦词汇。Netscape的这一决定也实现了当初的意图，Javascript从此变成了因特网的必备组件。因为Javascript 1.0如此成功，Netscape在Navigator 3.0中发布

5、了Javascript 1.1版本。恰巧那个时候，微软决定进军浏览器市场，发布了IE 3.0b并搭载了一个Javascript的克隆版，叫做Jscript（微软一直是一名成功的模仿者，这样命名是为了避免与Netscape潜在的许可纠纷）。微软步入浏览器领域的这重要一步当然推动了javascript的进行一步发展。在微软进入后，有3种不同的Javascript版本同时存在：Netsacpe Navigator 3.0中的Javascript、IE中的JScript以及CEnvi中的ScriptEase。与其他编程语言不同的是，Javascript并没有一个标准来统一其语法或特性，而这3种不同的版

6、本恰恰突出了这个问题，随着用户担心的增加，这个语言标准化显然已经势在必行。1997年，Javascript 1.1作为一个草案提交给ECMA（欧洲计算机制造商协会）。第39技术委员会（TC39）被委派来“标准化一个通用、跨平台、中立于厂商的脚本语言的语法和语义”。由来自Netscape、Sun、微软、Borland和其他一些对脚本编程感兴趣的公司的程序员组成的TC39锤炼出了ECMA-262，该标准定义了叫做ECMAScript的全新脚本语言。在接下来的几年里，ISO/IEC（国际化标准组织及国际电工委员会）也采纳ECMAScript作为标准（ISO/IEC-16262）。从此，Web浏览器就

7、开始努力（虽然有着不同成都的成功和失败）将ECMAScript作为Javascript实现的基础。 Javascript的优点1.简单性Javascript是一种脚本编写语言，她采用小程序段的方式实现编程，像其他脚本语言一样，Javascript同样也是一种解释性语言，他提供了一个简易的开发过程，他的基本结构形式与C、C+十分类似，但他不像这些语言一样，需要先编译，而是在程序运行过程中被逐行的解释，他与HTML标记结合在一起，从而方便用户的使用操作。2.动态性Javascript是动态的，他可以直接对用户或客户输入作出响应，无须经过web服务程序，他对用户的反映响应，是采用以事件驱动的方式进行

8、的，所谓事件驱动，就是指在页面中执行了某种操作所产生的动作，称为“事件”。比如按下鼠标、移动窗口、选择菜单等都可以视为事件，当事件发生后，可能会引起相应的事件响应。3.跨平台性Javascript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持javascript的浏览器就可以正确执行。4.节省CGI的交互时间假如提交一个简单的表单，就需要与服务器进行多次的交互，点击提交，等待30秒后被告之没有填写住址等等类似的事情发生让人感觉非常不舒服，客户端脚本就显得越来越重要，Javascript可以在数据被提交给服务器之前，预处理客户端的数据。 Javascript的局限性浏览器有

9、很多种，每种对javascript的支持程度是不一样的，效果会有一定的差距。1.2 主要应用 控制文档的内容和表现document.write(“hello,web”); 控制浏览器的行为window.status=“欢迎访问javascript”; 和文档的内容相互作用 和用户交互猜数字游戏var sum=0；num=Math.floor()第二节 简介2.1 javascript不能做的（限制多，安全性高） 设置或检索浏览器参数设置、主窗口外观特性、动作按钮和打印 在客户机上启动一个应用程序 在客户端或服务器上读/写文件或文件夹 重新传输从服务器上捕获的现场数据流 从web站点访问者处向用

10、户发送机密的电子邮件2.2 javascript并非Java 不同的公司：sun、Netscape（网景）； 不同类型：面向对象编译型、基于对象解释型； 独立性：单独执行、嵌入到HTML，不能单独运行；2.3 javascript在客户端应用的三部分构成 作为核心的ECMAScript：语言基础，定义了基本的语法和语义； javascript的核心，描述该语言的语法和基本对象 ECMA标准 Jscript是ECMAScript的一种实现，功能较多 ActionScript flash AIR Flex Netscape LiveWire是javascript在服务器端的实现 JavaScrip

11、t HTML XML Ajax 文档对象模型DOM：操作HTML/XML的API描述处理网页内容的方法和接口 W3C标准; 浏览器对象模型BOM：操作浏览器功能的API，描述与浏览器进行交互的方法和接口； 开发环境1）选择一个自己喜欢的编辑器l Notepad+l VIMl Editplusl Geditl Emacsl 其它2）符合W3C标准的浏览器l Firfoxl IEl Google chromel Operal Safari 3）调试工具l Firefox下的firebug、venkman等, FF-“辅助选项”-“firebug”-安装或者下载到firebug插件拖入浏览器即可l

12、IE下的ie developertoolbar, IE-“工具”-“开发人员工具”2.4 javascript的引用在内部 标记包含式 第三种function showAlert() alert(“web“)； Js外部引用式第三种。web程序设计common.js文件内容function showAlert（）alert（“web程序设计“）； 事件跟随式第三种第三节 语言基础3.1注意事项 语句分隔符 ； 注释标记 / 单行注释/*.*/ 多行注释3.2数据类型三种主要数据类型，两种复合数据类型和两种特殊数据类型 主要（基本）数据类型l 字符串l 数值l 布尔 复合（引用）数据类型l 对象

13、l 数组 特殊数据类型l nulll undefined注意事项：n String字符串类型：字符串是用单引号或双引号来说明的；n 数值数据类型：Javascript支持整数和浮点数。整数可以为正数、0或者负数；浮点数可以包含小数点、也可以包含一个“e”（大小写均可，表示“10的幂”）；n Boolean类型：true和false，不能用1和0；n Undefined数据类型：变量创建后未赋值；n Null数据类型：没有任何值，什么也不表示；3.3判断数据类型typeof 运算符说明：返回一个用来表示表达式数据类型的字符串 有六种可能：number、string、boolean、object、

14、function、undefined var a=18; var b=”今年18”； var c=true； document.write(typeof(a);document.write(typeof(b);document.write(typeof(c);document.write(typeof(d);document.write(typeof(window); /objectdocument.write(typeof(test);function test(xb) If(xb=1)return “男”；elsereturn “女”； 请注意：null与0不相等，typeof运算符将报告

15、null为object，而非类型null，这点潜在的混淆是为了向下兼容。3.4数据类型转换Object.toString() 对象的字符串表示parseInt（numString） 字符串转换得到整数parseFloat（numString）字符串转换得到浮点【强制转换】数值与字符串相加 数值转换成字符串布尔值与字符串相加 布尔值转换成字符串数值与布尔值相加 布尔值转换成数值3.5转义字符n n 换行（new line）n r 游标回首行（carriage return）n t 水平定位（horizontal tab）n 单引号 （single quote）n ” 双引号 （double qu

16、ote）n 反斜线 （back slash）n b 倒退 （backspace）n f 换页（form feed）第四节 语言基础4.1 变量和常量n 常量值可以为整型、逻辑型、实型以及字符串型等n 变量用关键字var声明或用赋值的形式n 变量命名规则1、 第一个字符必须是字母（大小写均可）、下划线（_）或美元符（$）;2、 后续字符可以是字母、数字、下划线或美元符；3、 变量名称不能是保留字；4、 字符大小写敏感；n 变量可以不声明直接使用n 变量弱类型检查，且可随时改变数据类型演示：骆驼命名法、匈牙利命名法对于变量的理解；变量是数据的代号，如同人的名字一样：var num；/在javasc

17、ript中使用关键字var声明一个变量在javascript中，使用上面的语法就能声明一个变量，以便在之后给其指定值var num；num=128；/将num作为值128的一个名字，就可以引用document.write(num);/输出128var a=“hello”；document.write(128);/这样也输出128var b=“world”；/不需要声明类型var n=123；var f=.123；var Mame；Mame=123；/同时进行var a，b，c；var a=b=c=123；var b=true；b=false；/undefined情况：值未定义var a；/没有

18、赋值alert（a）；/有值，undefined/未声明的变量alert（n）；/将会出错，不是undefined/错误情况var abc-abc；var 123bad；var var；var 21bad；保留字Break、delete、function、return、typeof、case、do、if、switch、var、catch、else、in、this、void、continue、false、instanceof、throw、while、debugger、finnally、new、true、with、default、for、null、try将来的保留字Abstract、double、

19、goto、native、static、boolean、enum等数字（只能有整数或小数），字符串可能是最常用的了，还有另外一种类型：布尔（Boolean）true（非零）、falsevar bool=true;/用true表示真值bool=false；/用false表示假值Javascript是动态类型语言，声明时可以不指明类型，运行时刻变量的值可以有不同类型var s=“hello world”；/声明无需指明字符串类型s=1.603；/运行时刻指定另一个类型 复合（引用）数据类型：对象、数组 特殊数据类型：undefined4.2 运算符和表达式n 运算符n 赋值运算符：=、+=、-=、*

20、=、/=、%=n 算术运算符：+、-、*、/、%、+、- -、-（负）n 字符串运算符：+n 逻辑运算符和关系运算符：= =、！=、=、&、|、！n 位运算符（很少用）n 算术表达式n 字符串表达式n 逻辑表达式计算各表达式的值a=5；b=7；c=9（1） a+bc（2） b*b-4*a*c=a*a+b*b（4） c*c%2= =1（5） b=2*+a（6） b=2* a +/字符串相连var s1=”hello”;var s2=”world”;alert(s1+s2);var s1=“hello”；s1=s1+“world”；alert（s1）；s1+=“！”；alert（s1）；/弱类型v

21、ar n=10;var s=”hello”;alert(n/s);/NaN，not a number的缩写alert（3-s）；/NaNalert（23*“23”）；/自动类型转换 529alert（23*“ab”）；/不能转换 NaNalert（23+“23”）；/字符串不总是能转换成数字，数字总能转字符alert（2+3+“23”+4+5）；/52345alert（2+3+“23”+(4+5)）；/括号提高优先级5239/算术运算只能针对数字，如果有字符串出现NaN：not a number的缩写/比较运算符alert（1213）；alert(（1213）= =(2!=4)；/混合运算符a

22、lert（“a”false）；/false=0,true=1alert（！3）；/3转换成布尔值alert（！3）；/连用两个！是将变量值转换成布尔值/a & b ,a为false，不判断b，直接返回false；a为true，返回balert（3&4）；/4/转换成数字alert（“3”*1）；alert（“”*1）；alert（typeof 2）；prompt（“请输入数字”，“”）；/弹出对话框，用户输入内容，返回输入值var a=prompt（“请输入数字”，“”）；a*=1；alert（a）；/逻辑运算符a逻辑值b逻辑值a&ba|b！aFalseFalseFalseFalseTrueF

23、alseTrueFalseTrueTrueTrueFalseFalseTrueFalseTrueTrueTrueTrueFalse思考：Alert（！“”）；/空字符串，不加空格falseAlert（“hello”&“”）；/空字符串Alert（“”|”hello”）；helloAlert（“ ”|”hello”）；/空var t=typeof （“123”*1）；/numvar t=typeof （123+“”）；/numalert（t）；注意：不是真正的只返回布尔值，它将最后判断的值显示出来；逻辑运算表例如：var a=prompt(“输入一个数字”，“”)a*=1;alert(typeo

24、f a);4.3 运算符的优先级运算符描述. () + -字段访问、数组下标、函数调用等+ - ! delete new typeof void医院运算符* / %+ - 移位 = instanceof= != = !=&按位与按位异或|按位或&逻辑与|逻辑或?:条件= op=赋值，运算赋值,多重求值自学注意使用（），减小复杂程度第二天 流程控制1.1流程控制所谓结构化程序设计思想，就是要使所设计的程序给人一种一目了然的感觉，条理清晰，模块化，书写层次分明，要求：n 顺序结构：一条接一条，自上而下n 选择结构：判断给定条件，根据不同情况做不同处理n 循环结构：多次重复执行同一系列命令流程结构

25、顺序结构 分支结构l 单一选择结构ifl 二路选择结构if/elsel 内联三元运算符 ？：l 多路选择结构 switch 循环结构l 在循环的开始测试表达式whilel 在循环的末尾测试表达式do/whilel 遍历对象的各个属性for/inl 由计数器控制的循环for Break和continueif(true)alert(“出现”)；elsealert（“else”）；/不存在elseif语法if （true） alert(“one”);/只有一条语句可以省略花括号else alert(“”); /只有一条语句可以省略花括号if（false）if（true）alert（“true”）；a

26、lert（“”）；else if（true）alert（“else if true”）；else if（true）else/小练习 var mark=prompt（“请输入”，“”）；if（!mark） /alert(”*1)alert（“没有输入”）；elsemark*=1；if（isNaN（mark）alert（“输入了非法数字”）；elseIf（mark=90）alert(“good”);elseif(num=80)alert(“ok”);/简化后if（isNaN（mark）alert（“输入了非法数字”）；else if（mark=90）alert（“good”）；else if（nu

27、m=80）alert（“ok”）；elsealert（“！”）；/switch,又叫“开关”var a=1；switch（a）case 1： alert（“111”）；break；case 2： alert（“222”）；break；case 3： alert（“333”）；break；default：alert（“default”）；break；/*循环for（初始化语句；条件判断；更新计数器）循环代码；for(var i=0;i10;i+)document.write(i+”)/混合var i=0；for（；）if（i10）document.write(i+”);i+;else break

28、;/while循环，注意使用break语句结束，否则容易出现死循环var b=true；While（b）num=prompt（“请输入内容”，“”）；if（num）num*=1；if（！isNaN（num） b=false；else alert（“非法数字”）；Alert（“您输入了”+num）；/do。while循环doalert（“至少出现一次”）；while（false）；练习：1、 实现乘法表； for 语句嵌套 /使用表格协助布局乘法表 /定义表格标题for(i=1;i10;i+)document.write() /定义表格行 for(j=1;j10;j+) document.wri

29、te(); /定义表格列 document.write( ); /  是空格的字符实体 document.write(i+*+j+=); document.write(i*j); document.write( );document.write()2、 用循环实现六级标题3、 计算true*100 + false*10 + true*14、 计算1+2+3+.+100For 循环演示document.write(打印金字塔直线);for (var i= 0; i100; i=i+5) document.write();输入一个字符，直到N停止，7、 .myfont

30、 font-size:150; color:#c99c96; font-family:Webdings； /产生埃及图像的特殊字体document.write(每个字符都对应一个漂亮的埃及图像);do var c = prompt(输入一个字符，输入N 或n停止,A) ; document.write (+c+);while (c !=N & c !=n);第三天 函数 函数的定义 函数的参数 函数的返回值 变量的作用域【注意事项】函数的定义function 函数名称（） 函数代码；function 函数名称（参数1，函数2，.） 函数代码；return 返回值；自变量的个数可以用以下变量来取

31、得自变量的值可以用以下变量取得函数名称.argumentsx使用var定义变量的作用域函数内 使用var定义 局部变量 未用var定义 全局变量函数外 使用var定义 全局变量 未用var定义 全局变量要求： 函数由关键字function定义 函数必须先定义后使用 函数名是调用函数时引用的名称，大小写敏感 参数表示传递给函数使用或操作的值，可以是常量，也可以是变量 return语句用于返回表达式的值，也可以没有/一段计算三角形面积的代码var wide=window.prompt(“请输入长度”，“”)；var high=window.prompt(“请输入高度”，“”)；var area=w

32、ide*hign/2;if(！isNaN(area)alert(“三角形的面积”+area)；elsealert（“有错误”）；/当重复利用多次，代码会写无数次，改函数/无参function area（）var wide=window.prompt(“请输入长度”，“”)；var high=window.prompt(“请输入高度”，“”)；var area=wide*hign/2;if(！isNaN(area)alert(“三角形的面积”+area)；elsealert（“有错误”）；/可调用多次area（）；area（）；/有参，重用代码非常方便function area（wide，hig

33、h）return wide*high/2；var area1=area（3，5）；alert（area1）；/作用域问题/函数内局部变量,在函数中访问alert（a）；function demo（）var a=123；/*函数外全局变量，所有地方都能访问；函数位置随意，只要调用和定义在同一个代码块，同等级别的function一次解释成功*/var b=456；demo（）；/前调用function demo（）var a=123；alert（b）；demo（）；/后调用l return的用法：1）一般情况下：计算三角形面积function area（wide，high） return wide

34、*high/2；var area1=area（3，5）；alert（area1）；2）终止函数：var i,j,count=0;function rec()return 3;i=3;j=rec();alert(i);alert(j);l break、continue的用法：var i,j,count=0;outer：for(i=1;i10;i+)for(j=1;j10;j+)if(i=5)&(j=5)count+;break ;/break outer; /continue; /continue outer;document.write(j);document.write();document

35、.write(count);第四天 对象1.1 javascript对象类型 内置对象 浏览器对象 自定义对象【注意】一个对象在被引用之前，必须存在。另外在javascript中对于对象属性和方法的引用，有两种情况：1）该对象为静态对象，表示在引用该对象的属性或方法时不需要为它创建实例；2）在引用该对象属性和方法时必须为它创建一个实例，叫做动态对象。1.2 对象操作语句 forin语句 with语句(避免使用) this关键字 new运算符【注意】javascript不是纯面向对象的语言，它没有提供面向对象语言的许多功能，因此javascript称为基于对象。1）forin语句for（对象属性

36、名 in 已知对象名）说明：该语句的功能是用于对已知对象的所有属性进行操作的控制循环，将一个已知对象的所有属性反复置给一个变量，而无需知道对象中属性的个数；2）with语句在该语句体内，任何对变量的引用被认为是这个对象的属性with object3)this关键字是对当前对象的引用，在javascript中由于对象的引用是多层次的，防止互相引用造成混乱；4）new运算符设计人员自己创建对象Var Object=new object（parameters table）；如Birthday=new Data（）；Birthday=new Data（December 12 1998）；1.3 对象属

37、性的引用 使用点（.）运算符 通过对象的下标实现 通过字符串形式实现University.Name=”云南省”University0=”云南省”University“Name”=”云南省”function showuniversity(object) for (var j=0;j2;j+)document.write(objectj);1.4 对象方法的引用对象名.方法名（）例如：Date对象/星期日：0/显示时间var d=new Date()；/创建一个新对象alert（d）；/直接输出这个对象alert（d.getYear()）;/返回两位年份，不常用alert（d.getFullYea

38、r()）;/返回四位年份document.write(d.getFullYear()+”年”+(d.getMonth()+1)+”月”)；/设置时间var d2=new Date（）；d2.setFullYear(1990);d2.setMonth(8);/从0开始，表示9月；d2.setDate(28);alert（d.getDay（）；/判断用户输入日期是否正确var year=prompt（“请输入年份”，“”）；var month=prompt（“请输入月份”，“”）；var date=prompt（“请输入几号”，“”）；var d3=new Date（）；d.setFullYear(year);d.setMonth(month-1);d.setDate(date);if(d.getFullYear()= =year&d.getMonth()+1= =month&d.getDate()= =date) alert(“正确”)；elsealert（“错误日期”）；第五天 对象1.1 内建对象和函数 String对象 Math对象 Date对象 Array对象 Number对象 Boolean对象 Function对象 预定义函数第一节课 数组实际上就是将一大堆相似的数据有秩序的放到容器里var a=new Array()；/