JavaScript最新教案.doc

第一章 JavaScript及基本语法11 前言JavaScript是Netscape公司和Sun公司合作推出的一种解释型的、基于对象（Object）和事件驱动的、跨平台的、结构化并具有安全性能的脚本语言。JavaScript通过嵌入标准的HTML语言或其中调入.js文件来增强HTML语言的交互性。12 JavaScript特点 l 脚本语言l 基于对象l 宽松性l 安全性l 事件驱动l 跨平台性13 书写格式一）书写：和之间就是JavaScript脚本代码。解释：Language告诉浏览器脚本代码的语言类型是JavaScript.。二）JavaScript的注释：l / 单行注释l /* */ 块注释三）JavaScript代码的存放位置1）与HTML代码共存JavaScript脚本代码可放在HTML文档任何需要的位置。一般来说，可以在，之间。 kkk 注意：l language属性：用于指定封装代码的脚本语言及版本。l type属性：指定和标记对之间插入的脚本代码类型.l src属性：用于将外部的脚本内容嵌入到当前文档。外部文档必须使用 .js 为扩展名.同时在和标记对中不包含任何内容.2）外部文件外部文件。t.html文件 v.jsfunction kk() alert(“hhhhhh”);四）变量1）如何定义变量？变量的主要作用是存取数据、提供存放信息的容器。对于变量，必须为变量命名，变量的类型。l 声明变量的格式： var 变量名;l 声明变量并赋值的格式： var 变量名=值;2）变量名定义规则l 变量名必须以字母开头，$，后面可以是数字、字母、下划线l 变量名不能使用JavaScript脚本的关键字。（var，int，double等） 关键字：兰色，变量和方法用棕色，注释为绿色l 变量名大小写敏感。3）基本数据类型类型说明Stringstring表示字符型数据，字符型数据不区分单个字符和字符串，均使用双引号或单引号。var x=”xlm”; /双引号var y=xlm; /单引号Number数值型数据，可以是整数或浮点。整数（三种表示）： var x=1; /十进制 var y=010; /八进制 var z=0x10; /十六进制浮点：（两种） var x=10.5; /十进制 var y=2e3; /指数形式. 注意：E或e。 E前面必须有数，后面必须是整数 Boolean逻辑型或布尔型数据。值为 true false 注意：不能用0或1表示Null表示空数据，就是没有任何值，什么也不表示。是一种特殊的声明，专门用于指明一个已经创建但还没有初值的数据。Undefined未定义类型，用于已经创建但是没有处值的变量。 var name; alert(name);Object对象Function函数，可以通过new操作符和构造函数Function（）来动态创建所需功能的函数，并为其添加函数体。 var x=new Function() 语句；五）转义字符l r：回车l n：换行l t：跳格l ： l b：退格l ”：双引号l ：单引号l f：走纸六）操作符1）算术运算符l + 用法：1）加法的运算符 2）连接符（同Java）l - 用法：减法l * 用法：乘法l / 用法：除法 10/3 结果是一个浮点，不同于Java l %用法：取模，余数，同Javal + 用法：用法同Javal - 2）比较运算符（同Java）l = = l !=l =l l =3）逻辑操作符(同JAVA)l & l |l !4）位运算符l &l |l l l l 5）赋值运算符l =l +=l -=l *=l /=l %=l &=l =l |=l =l =6）逗号运算符var v=(x=1,y=2,z=3); v的值为最后一个37）条件运算符（同JAVA）七）优先级八）类型转换操作符l typeof(变量) ：该操作符返回一个字符串，表明操作数的类型。 或 typeof 变量; Ex:var x=1;var y=typeof(x);alert(y);或var x=1;var y=typeof x ;alert(y);九）内部函数：JavaScript提供了几个内置函数。l parseInt( )作用：将字符串转换为对应的整数。Ex:var x=parseInt(“23”);alert(x);l parseFloat()作用：将字符串转换为对应的小数。以上两个方法如果不能转换将返回NaN。Ex: var x=parseFloat(“23.8”); alert(x);l escape()作用：将字符串中的非字母字符转换为按格式%XX表示的数字。XX表示非字母字符对应的ASCII码值的十六进制。Ex: var z=escape(“D&T is a mark”); alert(z);l unescape()作用：将字符串中格式为%XX的数字转换为字符。Ex: var str=”D%26T%20is%20a%20mark”); alert(str);l eval(“字符串”);作用：计算字符串的和。Ex:var x=eval(“1+2+8*9”);alert(x);转换：l 如果字符串以字母开头，将得到NaN结果壹（F10）。l 否则转换成数字。（10F）转换成10l true转换为1，false转换为0l 其他对象转换成NaNl undefined：转换成NaN变量：l 全局：定义在间的变量。l 局部：定义在函数内部的变量。如何定义变量：l 显式：var x=10;l 隐式：x=10; var x=全局; function kk() var x=局部; alert(x);注意：观察结果： var x=全局; function kk() alert(x); var x=局部; alert(x); 先输出undefined,然后，在输出局部变量。这是因为局部变量在函数内部是有效的。因为在第一个alert（）之前局部变量有效，但还没有定义。因此出现前面的结果。第二章 函数函数由函数定义和函数调用两部分组成。JavaScript中函数定义的方式主要有两种，分别是1）通过function语句来定义以及2）通过构造Function对象来定义。l function语句（速度快）又分两种：1）命名方式（声明式） function 函数名() 2）匿名方式（引用式） var ff=new function() l 通过构造Function对象第三章 创建对象JavaScript是一种基于对象的语言，但没有提供抽象、继承、重载等有关面向对象语言的功能。JavaScript支持三种对象：1）内部对象 2）用户自定义对象 3）浏览器对象31 对象的基本概念对象的本质就是属性和方法的集合。属性是作为对象成员的一个变量或一组变量。表明对象的状态。方法是作为对象成员的函数，表明对象的行为。可以理解：汽车的例题。在JavaScript中，对象对应于抽象的概念，一般不能直接使用，需要创建它的实例。注意：对象类似于Java语言的类的概念， 实例类似于Java语言的对象的概念。32创建对象格式：1)定义构造函数2）定义方法法一）function 对象名(变量名1,变量名2) this.属性=变量名1; this.属性=变量名2; this.方法=外部方法名;function 外部方法名() 语句； return ;Ex:function Dog(name,age) =name; /属性 this.age=age; /属性 this.show=show1; /定义方法 function show1() /注意 alert(+:+this.age); var dog=new Dog(bush,56); /创建对象 dog.show(); /注意，调用方法法二）如果方法体内容比较简单，那么也可以写在构造函数中。function 对象名(变量名1,变量名2) this.属性=变量名1; this.属性=变量名2; this.方法=function() 语句；;Ex: function Dog(name,age) =name; this.age=age; this.show=function() /注意 alert(name+ *:* +age); ; /注意:分号 var dog=new Dog(bush,56); /创建对象 dog.show(); /调用方法然后，用var m=new 构造函数名（）；法三）直接创建对象。var x= 属性名1：值1， 属性名2：值2， 方法：方法名，方法2：方法名2，;function 方法名（） this.属性名1 。Ex：var x= /定义x name:bush, /必须用，分割属性或方法 age:56, show:show, show1:show1 ; function show() alert(+this.age); /必须有this function show1() alert(ddd:++this.age);/必须有 this x.show(); /调用show()方法 x.show1(); /调用show1()方法为已经存在的类添加方法function Dog() /构造方法 =bush;this.age=56; function show() alert(+this.age); Dtotype.fname=”bbb”; /新增属性 Dtotype.sh=show; /新增方法 var d=new Dog(); /创建对象 alert(d.fname); /打印对象的属性d.sh(); /调用新增方法第四章 常用对象（内置） JavaScript的内置对象：Array，Boolean，Date，Function，Global，Math，Number，Object，RegExp，Regular，Regular ，Expression和String。主要讲解如下四个内置对象：l Arrayl Datel Mathl String一）数组对象1) 创建数组JavaScript提供了一个内置数组对象Array，可以动态的创建数组对象，常用属性和方法。不必自己定义数组对象，只需使用new运算符创建数组即可。其基本形式为：l var 数组名=new Array(); /创建了一个空数组l var 数组名=new Array(值1，值2，值3.); /值1和值2.的类型可以不一致l var 数组名=new Array(6); /创建一个指定长度的数组l var 数组名=值1，值2，.；/ 也可以不使用new 创建2）数组元素的引用数组名i :i为数组的下标。i的值：0-length-1 var x=a:xlm,b:ll; document.write(xa); 可以给数组建立索引： 3）数组对象的属性和方法属性：l length 数组的长度方法：l concat练习 （连接两个数组，生成一个新的数组） var x=new Array(1,2,3,4,5,6); var y=new Array(7,8,9); var z=x.concat(y); /返回一个新的数组 for(var i=0;iz.length;i+) document.write(zi); / 123456789 注意：原数组没有变化 l reverse练习 （倒序输出） var x=new Array(1,2,3,4,5,6); x.reverse(); for(var i=0;ix.length;i+) document.write(xi); / 654321 注意：原数组内容变了 l join练习 （用t连接所有的数组元素，并返回一个字符串） 注意：原数组没有变化 var x=new Array(1,2,3,4,5,6); var z=x.join(t); document.write(z); / 1t2t3t4t5t6t l sort练习 （返回一个由小到大的数组）注意：原数组也变了 var x=new Array(11,22,13,41,15,60); var y=x.sort(); for(var i=0;ix.length;i+) document.write(xi+ ); / 654321 l toString练习 （ 返回一个字符串，由”,”分割） var x=new Array(1,2,3,4,5,6); document.write(x.toString(); / 1,2,3,4,5,6 l valueOf练习 返回一个字符串，由”,”分割 var x=new Array(1,2,3,4,5,6); document.write(x.valueOf(); / 1,2,3,4,5,6 var x=new Array(1,2,3,4,5,6); x.push(7,8,9); for(var i=0;ix.length;i+) document.write(xi); / 123456789 l push(v1,v2)练习 将v1,v2加入到数组元素尾部 l pop()练习 删除尾部元素 var x=new Array(1,2,3,4,5,6); x.pop(); x.pop(); for(var i=0;ix.length;i+) document.write(xi); /1234 二） Date(日期) 1）创建对象的方法：l 新对象为当前日期 var date=new Date();l 指定年、月、日、小时、分钟、秒和豪秒（年月日是必须的，其余的可选）Ex:var x=new Date(1971,8,11); document.write(x); /显示Sat Sep 11 00:00:00 UTC+0800 1971主要方法：l getYear()l getMonth()l getDate()l getDay()l getHours()l getMintes()l getSeconds()l getTime()l toLocaleString()l toUTCString()l setYear()l setDate()l setMonth()l setHours()l setMintes()l setSeconds()l setTime()常识：判断客户浏览器是否是IE或NetScape。如果返回true表明不是。 var x=(!document.layers&!document.all); document.write(x); 常识：定时setTimeout(“要执行的函数”,时间豪秒)；三）Math对象 （静态对象）l abs()：l sin()：l cos()：l asin()：l acos()：l tan(),atan()：l round()： 四舍五入l sqrt()：l pow(base,exponent)：l log()：l ceil()：l floor()：l max(n1,n2)： 返回n1,n2较大的数l min(n1,n2)： 返回n1,n2较小的数l random()： 返回0-1之间的随机数四）String对象（动态对象） 1）常用方法l big() 大字体显示，HTMLl italics() 斜体显示，HTMLl bold() 粗体显示，HTMLl blink() 字符闪烁，HTML 注意：IE不支持l small() 小字体显示，HTMLl fixed() 固定高亮字，HTMLl fontsize(fsize) 控制字体大小。l fontcolor(fcolor) 设置字体颜色。l toLowerCase()l toUpperCase()l indexOf()l subString()l charAt(index)l split(str)第五章 浏览器内部对象Frame Layer Texture Link Text Image FileUploadWindow Document Area Hidden Anchor Submit Location Applet Reset Plugin CheckBox Form button History Select Option PluginNavigator MimeType 图1 内部对象层次结构图图可以看出，所有浏览器内部对象都是从Window对象和Navigator对象派生出来的，Window对象及其子对象大都对应HTML元素。也就是说，JavaScript的Window对象及其子对象和HTML元素是指同一事物，只是看事物的角度不同。使用Navigator对象则可以获得浏览器的版本和插件信息。子对象是父对象的属性，所以引用子对象的方式，与引用一般的属性是相同的。格式如下：Window.document.form名称.select名称.option;注意：如果引用本窗口的其他属性，window可以省略！如果引用其他窗口的时候window则不能省。5.1 对象与事件驱动JavaScript是基于对象的语言，而基于对象的重要特征就是采用事件驱动机制。编程者只要编辑事件处理程序，并将其与某个对象的特定事件联系起来，就可以开发出具有交互性，并易于使用的网页。事件驱动的概念：在图形环境下，用户操作鼠标或热键的动作以及系统操作（载入页面）等称为事件。如：单击（click），栽入页面（load），卸载页面（unload）等。用户操作事件或系统操作事件引发的一连串的动作，称为事件的驱动。为了响应某个事件而进行的处理过程，称为事件处理。对事件处理的程序或函数，称为事件处理程序。对象和事件的对应关系事件说明对象onAbort载入图象失败ImageonBlur失去焦点Button,Checkbox,FileUpload,Frame,Layer*,Password,Radio,Select,Text,Textarea,WindowonChange改变FileUpload,Radio,Select,Text,TextareaonClick单击Button,Checkbox,Document,LinkonDbClick双击Area,Checkbox,Document,LinkonError载入图象错误ImageonFocus获得焦点onKeyDown键按下onKeyPress按键onKeyUp键弹起onLoad载入文件onMove移动onMouseDown鼠标按下onMouseOut鼠标离开onMouseOver鼠标滑过onMouseUp鼠标弹起onMouseMove鼠标移动onReset重置表单onResize重新设置大小onSelect选中onSubmit提交表单onUnload卸载文件5.2 使用事件使用事件的基本形式：1） 编写事件处理程序事件处理程序通常是一个函数，称为事件处理函数。function k()2） 将事件处理程序和要处理的对象的事件联系起来 可以用两种方式：* 使用HTML语言 * 使用JavaScript即 事件=”函数名（）”事件=”JavaScript语句块”例如：或 document.form1.text.onclick=k;Ex: function k() alert(haha); function k() alert(hahaaa); document.form.b1.onclick=k; 第六章 窗口对象（Window）6.1 Window对象的属性和方法 表6.1 Window 对象的常用属性属性说明Frames窗口中的桢Defaultstatus默认状态，它的值显示在窗口的状态栏Parent当前窗口或桢的父窗口Self当前窗口Status浏览器状态栏信息TopWindow当前窗口locationbar*menubar*scrollbar *statusbar *toolbar *表6.2 window对象的常用方法方法说明alert(sMsg)弹出一个确认消息框Blur()令窗口失去焦点close()关闭窗口，如果窗口不是脚本打开，则会弹出对话框confirm(sMsg)弹出“确认/取消”对话框，确认是truefocus()激活窗口moveBy(iX,iY)用相对方式拖动窗口moveTo(iX,iY)用绝对方式拖动窗口navigate(sURL)转到指定的连接print()打印当前窗口文件内容prompt(sM,sDefaulet)弹出输入对话框resizeBy(iX,iY)resizeTo(iX,iY)setInterval(vCode,MillSecond)定时执行一段代码setTimeout(vCode,MillSecond)延时执行一段代码showHelp(sURL)showModalDialog()showModelessDialog()Ex:close()方法 function k() window.close(); /关闭窗口 Ex：confirm(sMsg)方法 function k() var x=confirm(显示消息); document.write(x); Ex：moveBy(iX,iY)方法 function k() moveBy(10,10); /或window.moveBy(10,10); function k() navigate(); Ex：navigate(sURL)方法 Ex：print()方法 function k() print(); function k() prompt(请输入用户名,guest); Ex：prompt(“提示信息”,”默认值”)方法 6.2 打开和关闭窗口window.open(“网址”，“窗口名”，“窗口参数”);窗口参数的含义参数含义Toolbar建立或不建立标准工具条 (yes,no)Location建立或不建立位置输入字段(yes,no)Diretions建立或不建立标准输入字段(yes,no)Status建立或不建立状态栏(yes,no)Menubar建立或不建立菜单条(yes,no)Scrollbar建立或不建立滚动条(yes,no)Revisable能否改变窗口大小(yes,no)Width窗口的宽度Height窗口的高度Ex:kkkIE浏览器窗口的扩展1）模式窗口window.showModalDialog(url字符串,参数,特征)2)无模式窗口window.showModel第七章 文件对象（Document）与颜色有关的document属性Document对象的属性说明aLinkColor按住超级连接的颜色bgColorBody的背景色fgColor前景色linkColor未访问过的超级连接的颜色vlinkColor超级访问后的颜色颜色值为：red, blue, purple, yellow, white, black, 文档对象document|html|head body title h1 hr p !- 1）得到节点对象：l getElementById(“节点的ID”);2）节点的属性：l 节点的名称：nodeNamel 节点的类型：nodeTypel 节点的值：nodeValue 注意：只有文本节点有效。l 父节点： parentNodel 所有子节点：childNodes 返回一个子节点数组l firstChild：返回第一个子节点l lastChild：返回最后一个子节点l previousSibling：返回前一个兄弟节点l nextSibling：返回最后一个兄弟节点l attributes：元素属性列表l ownerDocument：3）方法：l 节点.hasChildNodes() /返回值为true, false ,有无子节点。4）添加一个节点l document.createElement(“节点类型”); /创建一个节点l document.createTextNode(“文本内容”);/创建一个文本节点l 节点.appendChild(节点)/l document.body.appendChild(newnode);/将新节点加入到文档树中。5）插入一个节点l insertBefore();6）删除一个节点7）替换一个节点8）修改一个节点属性：1）设置属性nodeObject.setAttribute(“属性名”，“属性值”)；Ex:var x=document.createElement(input); x.setAttribute(type,button); x.setAttribute(value,ok); document.body.appendChild(x);其他属性：innerHTMLinnerTextouterHTMLouterText2)document.all在DOM下，可以使用document.getElementByTagName()方法来存取一个文档中的所有元素。然后创建一个实例属性document.all,使之等于document.getElementByTagName(“*”);框架对象（Frame）第八章 表单对象及其子对象（Form）第九章 Location对象第十章 历史对象（History）历史对象（History）是窗口对象的子对象。历史对象包含了当前浏览器窗口曾经访问过的站点的相关信息。 历史对象的属性和方法历史对象的属性和方法属性说明Length当前窗口访问过的站点数back()载入上一个访问过的网址forward()载入下一个访问过的网址go(int i)载入指定的网址current *当前的网址next *载入下一个访问过的网址Previous *载入上一个访问过的网址说明：1） 达到2）第十一章 图象对象（Image）第十二章 Cookie对象第十三章浏览器对象（Navigator）第十四章 图层第十五章 实际应用1）怎样让浏览者将当前网页添加到收藏夹收藏本站 2）如何在网页中显示最后更新页面的时间最后更新时间是：document.write(document.lastModified)3）怎样在状态栏显示时钟function showtime() var now=new Date(); var hours=now.getHours(); var minutes=now.getMinutes(); var seconds=now.getSeconds(); var time= hours; time+=:+(minu