Javascript教案(46页).doc
-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的共享软件产品中，它首次向开发人员展示了这种语言的威力。Nombas最终把Cmm的名字改成了ScriptEase，原因是后面的部分（mm）听起来过于“消极”，同时字母“C”令人害怕。现在ScriptEase已经成为了Nombas产品背后主要驱动力（怎么我觉得这家公司已经不存在了呢？）。当Netscape Navigator（盛极一时的网景的浏览器，结果被微软IE的免费策略搅黄了局）暂露头角时，Nombas开发了一个可以嵌入网页中的CEnvi的版本。这些早期的实验称为Espresso Page，它们代表了第一个在万维网上使用的客户端脚本语言。而Nombas丝毫没有料到它的理念将会成为internet的一块重要基石。 当internet普及越来越广时，对于开发客户端脚本的需求也逐渐增大。此时，大部分internet用户仅仅通过28.8kbit/s的Modem来连接到网络，即使这时网页已经不断地变得更大和更复杂。加剧用户痛苦的是，仅仅为了简单的表单有效性验证，就要与服务器进行多次的往返交互。设想一下，用户填写完一个表单，点击提交按钮，等待30秒后，看到的却是一条告诉你忘记填写一个必要的字段的信息。那时正处于技术革新最前沿的Netscape，开始认真考虑一种开发客户端语言来处理简单的问题。当时为Netscape工作的Brendan Erich，开始着手为即将在1995年发行的Netscape Navigator 2.0开发一个称之为LiveScript的脚本语言，当时的目的是同时在浏览器和服务器使用它。Netscape与Sun公司联手及时完成了LiveScript的实现。就在Netscape Navigator 2.0即将正式发布前，Netscape将其更名为Javascript（想当年，也就是95年，正式Java普遍开始流行的一年，Java开始火起来，似乎打上一个Java的标签，也会火起来一样），目的是为了利用Java这个internet时髦词汇。Netscape的这一决定也实现了当初的意图，Javascript从此变成了因特网的必备组件。因为Javascript 1.0如此成功，Netscape在Navigator 3.0中发布了Javascript 1.1版本。恰巧那个时候，微软决定进军浏览器市场，发布了IE 3.0b并搭载了一个Javascript的克隆版，叫做Jscript（微软一直是一名成功的模仿者，这样命名是为了避免与Netscape潜在的许可纠纷）。微软步入浏览器领域的这重要一步当然推动了javascript的进行一步发展。在微软进入后，有3种不同的Javascript版本同时存在：Netsacpe Navigator 3.0中的Javascript、IE中的JScript以及CEnvi中的ScriptEase。与其他编程语言不同的是，Javascript并没有一个标准来统一其语法或特性，而这3种不同的版本恰恰突出了这个问题，随着用户担心的增加，这个语言标准化显然已经势在必行。1997年，Javascript 1.1作为一个草案提交给ECMA（欧洲计算机制造商协会）。第39技术委员会（TC39）被委派来“标准化一个通用、跨平台、中立于厂商的脚本语言的语法和语义”。由来自Netscape、Sun、微软、Borland和其他一些对脚本编程感兴趣的公司的程序员组成的TC39锤炼出了ECMA-262，该标准定义了叫做ECMAScript的全新脚本语言。在接下来的几年里，ISO/IEC（国际化标准组织及国际电工委员会）也采纳ECMAScript作为标准（ISO/IEC-16262）。从此，Web浏览器就开始努力（虽然有着不同成都的成功和失败）将ECMAScript作为Javascript实现的基础。 Ø Javascript的优点1.简单性Javascript是一种脚本编写语言，她采用小程序段的方式实现编程，像其他脚本语言一样，Javascript同样也是一种解释性语言，他提供了一个简易的开发过程，他的基本结构形式与C、C+十分类似，但他不像这些语言一样，需要先编译，而是在程序运行过程中被逐行的解释，他与HTML标记结合在一起，从而方便用户的使用操作。2.动态性Javascript是动态的，他可以直接对用户或客户输入作出响应，无须经过web服务程序，他对用户的反映响应，是采用以事件驱动的方式进行的，所谓事件驱动，就是指在页面中执行了某种操作所产生的动作，称为“事件”。比如按下鼠标、移动窗口、选择菜单等都可以视为事件，当事件发生后，可能会引起相应的事件响应。3.跨平台性Javascript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持javascript的浏览器就可以正确执行。4.节省CGI的交互时间假如提交一个简单的表单，就需要与服务器进行多次的交互，点击提交，等待30秒后被告之没有填写住址等等类似的事情发生让人感觉非常不舒服，客户端脚本就显得越来越重要，Javascript可以在数据被提交给服务器之前，预处理客户端的数据。Ø Javascript的局限性浏览器有很多种，每种对javascript的支持程度是不一样的，效果会有一定的差距。1.2 主要应用Ø 控制文档的内容和表现<script language=”JavaScript”>document.write(“<h1>hello,web</h1> ”) </script>Ø 控制浏览器的行为<script language=”JavaScript”>window.status=“欢迎访问javascript ” </script>Ø 和文档的内容相互作用Ø 和用户交互<!DOCTYPE html PUBLIC "-/W3Crg/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head><title>猜数字游戏</title><script language=”JavaScript”>var sum=0；num=Math.floor()</script>第二节 简介2.1 javascript不能做的（限制多，安全性高）Ø 设置或检索浏览器参数设置、主窗口外观特性、动作按钮和打印Ø 在客户机上启动一个应用程序Ø 在客户端或服务器上读/写文件或文件夹Ø 重新传输从服务器上捕获的现场数据流Ø 从web站点访问者处向用户发送机密的电子邮件2.2 javascript并非JavaØ 不同的公司：sun、Netscape（网景）；Ø 不同类型：面向对象编译型、基于对象解释型；Ø 独立性：单独执行、嵌入到HTML，不能单独运行；2.3 javascript在客户端应用的三部分构成Ø 作为核心的ECMAScript：语言基础，定义了基本的语法和语义； javascript的核心，描述该语言的语法和基本对象 ECMA标准 Jscript是ECMAScript的一种实现，功能较多 ActionScript flash AIR Flex Netscape LiveWire是javascript在服务器端的实现 JavaScript 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 IE下的ie developertoolbar, IE-“工具”-“开发人员工具”2.4 javascript的引用在<head>内部Ø 标记包含式 <html><head><title>第三种</title><script language=”javascript” >function showAlert() alert(“web“)；</script></head><body > </body></html>Ø Js外部引用式<html><head><title>第三种</title><script language=”javascript” src=“common.js“>。</script></head><body >web程序设计</body></html>common.js文件内容function showAlert（）alert（“web程序设计“）；Ø 事件跟随式<html><head><title>第三种</title></head><body onload=”window.alert(hello web);”></body></html>第三节 语言基础3.1注意事项Ø 语句分隔符 ；Ø 注释标记 / 单行注释/*.*/ 多行注释3.2数据类型三种主要数据类型，两种复合数据类型和两种特殊数据类型Ø 主要（基本）数据类型l 字符串l 数值l 布尔Ø 复合（引用）数据类型l 对象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、function、undefined <script language=”javascript”> 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 “女”； </script>请注意：null与0不相等，typeof运算符将报告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 quote）n 反斜线 （back slash）n b 倒退 （backspace）n f 换页（form feed）第四节 语言基础4.1 变量和常量n 常量值可以为整型、逻辑型、实型以及字符串型等n 变量用关键字var声明或用赋值的形式n 变量命名规则1、 第一个字符必须是字母（大小写均可）、下划线（_）或美元符（$）;2、 后续字符可以是字母、数字、下划线或美元符；3、 变量名称不能是保留字；4、 字符大小写敏感；n 变量可以不声明直接使用n 变量弱类型检查，且可随时改变数据类型演示：骆驼命名法、匈牙利命名法对于变量的理解；变量是数据的代号，如同人的名字一样：var num；/在javascript中使用关键字var声明一个变量在javascript中，使用上面的语法就能声明一个变量，以便在之后给其指定值var num；num=128；/将num作为值128的一个名字，就可以引用document.write(num);/输出128var a=“hello”；document.write(128);/这样也输出128<script type=”text/javascript”>var 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；/没有赋值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、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 赋值运算符：=、+=、-=、*=、/=、%=n 算术运算符：+、-、*、/、%、+、- -、-（负）n 字符串运算符：+n 逻辑运算符和关系运算符：= =、！=、<、>、<= 、>=、&&、|、！n 位运算符（很少用）n 算术表达式n 字符串表达式n 逻辑表达式计算各表达式的值a=5；b=7；c=9（1） a+b<c（2） b*b-4*a*c<=0（3） c*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）；/弱类型var 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（12>13）；alert(（12>13）= =(2!=4)；/混合运算符alert（“a”<“A“）;/比较的是字符的编码alert（true && false）；/falsealert（true | false）；/turealert（！true）；/falsealert（true >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！aFalseFalseFalseFalseTrueFalseTrueFalseTrueTrueTrueFalseFalseTrueFalseTrueTrueTrueTrueFalse思考：Alert（！“”）；/空字符串，不加空格falseAlert（“hello”&&“”）；/空字符串Alert（“”|”hello”）；helloAlert（“ ”|”hello”）；/空var t=typeof （“123”*1）；/numvar t=typeof （123+“”）；/numalert（t）；注意：不是真正的只返回布尔值，它将最后判断的值显示出来；逻辑运算表例如：var a=prompt(“输入一个数字”，“”)a*=1;alert(typeof a);4.3 运算符的优先级运算符描述. () + -字段访问、数组下标、函数调用等+ - ! delete new typeof void医院运算符* / %+ -<< >> >>>移位< <= > >= instanceof= != = !=&按位与按位异或|按位或&&逻辑与|逻辑或?:条件= op=赋值，运算赋值,多重求值自学注意使用（），减小复杂程度第二天 流程控制1.1流程控制所谓结构化程序设计思想，就是要使所设计的程序给人一种一目了然的感觉，条理清晰，模块化，书写层次分明，要求：n 顺序结构：一条接一条，自上而下n 选择结构：判断给定条件，根据不同情况做不同处理n 循环结构：多次重复执行同一系列命令流程结构Ø 顺序结构Ø 分支结构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”）；alert（“”）；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<=100&&mark>=90）alert(“good”);elseif(num<=90&&num>=80)alert(“ok”);/简化后if（isNaN（mark）alert（“输入了非法数字”）；else if（mark<=100&&mark>=90）alert（“good”）；else if（num<=90&&num>=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;i<10;i+)document.write(i+”<br>”)/混合var i=0；for（；）if（i<10）document.write(i+”<br>”);i+;else break;/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、 实现乘法表；<HTML><HEAD> <TITLE>for 语句嵌套</TITLE></HEAD><BODY><TABLE> /使用表格协助布局<CAPTION>乘法表</CAPTION> /定义表格标题<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">for(i=1;i<10;i+)document.write("<tr>") /定义表格行 for(j=1;j<10;j+) document.write("<td>"); /定义表格列 document.write(" "); / 是空格的字符实体 document.write(i+"*"+j+"="); document.write(i*j); document.write(" ");document.write("<BR>")</SCRIPT></TABLE></BODY></HTML>2、 用循环实现六级标题3、 计算true*100 + false*10 + true*14、 计算1+2+3+.+100<HTML><HEAD><TITLE>For 循环演示</TITLE><SCRIPT LANGUAGE = "JavaScript">document.write("<H2 align=center>打印金字塔直线</H2>");for (var i= 0; i<100; i=i+5) document.write("<HR align=center width=" + i+"%>");</SCRIPT></HEAD><BODY></BODY></HTML>输入一个字符，直到N停止，7、<HEAD><STYLE type="text/css"> .myfont font-size:150; color:#c99c96; font-family:Webdings； /产生埃及图像的特殊字体</STYLE><script language="JavaScript">document.write("<H3>每个字符都对应一个漂亮的埃及图像</H3>");do var c = prompt("输入一个字符，输入N 或n停止","A") ; document.write ("<font class=myfont >"+c+"</font>");while (c !="N" && c !="n");</SCRIPT></HEAD>第三天 函数Ø 函数的定义Ø 函数的参数Ø 函数的返回值Ø 变量的作用域【注意事项】函数的定义function 函数名称（） 函数代码；function 函数名称（参数1，函数2，.） 函数代码；return 返回值；自变量的个数可以用以下变量来取得自变量的值可以用以下变量取得函数名称.argumentsx使用var定义变量的作用域函数内 使用var定义 局部变量 未用var定义 全局变量函数外 使用var定义 全局变量 未用var定义 全局变量要求：Ø 函数由关键字function定义Ø 函数必须先定义后使用Ø 函数名是调用函数时引用的名称，大小写敏感Ø 参数表示传递给函数使用或操作的值，可以是常量，也可以是变量Ø return语句用于返回表达式的值，也可以没有/一段计算三角形面积的代码var wide=window.prompt(“请输入长度”，“”)；var high=window.prompt(“请输入高度”，“”)；var area=wide*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，high）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*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;i<10;i+)for(j=1;j<10;j+)if(i=5)&&(j=5)count+;break ;/break outer; /continue; /continue outer;document.write(j);document.write("<br>");document.write(count);第四天 对象1.1 javascript对象类型Ø 内置对象Ø 浏览器对象Ø 自定义对象【注意】一个对象在被引用之前，必须存在。另外在javascript中对于对象属性和方法的引用，有两种情况：1）该对象为静态对象，表示在引用该对象的属性或方法时不需要为它创建实例；2）在引用该对象属性和方法时必须为它创建一个实例，叫做动态对象。1.2 对象操作语句Ø forin语句Ø with语句(避免使用)Ø this关键字Ø new运算符【注意】javascript不是纯面向对象的语言，它没有提供面向对象语言的许多功能，因此javascript称为基于对象。1）forin语句for（对象属性名 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 对象属性的引用Ø 使用点（.）运算符Ø 通过对象的下标实现Ø 通过字符串形式实现University.Name=”云南省”University0=”云南省”University“Name”=”云南省”function showuniversity(object) for (var j=0;j<2;j+)document.write(objectj);1.4 对象方法的引用对象名.方法名（）例如：Date对象/星期日：0/显示时间var d=new Date()；/创建一个新对象alert（d）；/直接输出这个对象alert（d.getYear()）;/返回两位年份，不常用alert（d.getFullYear()）;/返回四位年份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()；/
