部分-JavaScript程序设计.ppt
《部分-JavaScript程序设计.ppt》由会员分享,可在线阅读,更多相关《部分-JavaScript程序设计.ppt(100页珍藏版)》请在三一办公上搜索。
1、,JavaScript 程序设计入门,ASP.NET 程序设计 JavaScript设计基础,授课人:代霞 Email:Tel:82878177 QQ:75085881,主体纲要,第一部分 JavaScript简介第二部分 JavaScript组成第三部分 JavaScript案例演示第四部分 JavaScript编程简介第五部分 JavaScript编程基础第六部分 BOM(浏览器对象模型)第七部分 DOM(文档对象模型),第一部分 JavaScript简介,一、JavaScript的起源 1995年NetScape(网景浏览器)中出现,前身叫作LiveScript,NetScape公司与S
2、un公司联手开发,为了利用Java这个时髦记汇,将其更名为JavaScript。JavaScript和Java根本就是两种语言!微软为了进军浏览器市场,开发了一个JavaScript的克隆版,叫JScript。1997年,JavaScript作为一个草案提交给ECMA(欧洲计算机制造商协会),定义了ECMAScript.,二、JavaScript的特点 1、脚本编写语言 它是一种脚本语言,采用小程序段的方式进行编程。它的基本结构形式如我们已学过的C#,但它不像C#必须先编译,而网页在浏览器中运行时逐行被“翻译”,它与HTML标签结合在一起。2、跨平台性 JavaScript是依赖于浏览器本身,
3、与操作系统无关。3、基于对象 它是一种基于对象(Object Based)和事件驱动(Event Driver)的编程语言,它本身提供了非常丰富的内部对象供设计人员使用。,4、用于客户端 事先在网页中编写好代码,此代码随HTML文件一起发送到客户端的浏览器上,由浏览器对这些代码进行解释执行,这样就减轻了服务器的负担。三、JavaScript的作用 1.校验用户输入内容;2.动态显示网页内容;3.为静态网页增加一些特效 4.AJAX程序的核心技术之一 如果你有一些编程经验,会觉得JavaScript比较熟悉,即使没有任何编程经验,也没什么问题,网上有很多JavaScript特效,你可以直接Cop
4、y进网页使用。,第二部分 JavaScript的组成,ECMAScript:不与任何具体浏览器相绑定,只描述以下内容:语法、类型、语句、关键字、保留字、运算符、对象。DOM:文档对象模型,是HTML和XML的应用程序接口(API),DOM把整个页面规划成由节点层级构成的文档。,Sample Page Hello World!,DOM通过创建树来表示文档,从而使开发者对文档的内容和结构具有空前的控制力。用DOM API可以轻松地删除、添加和替换节点。,BOM:浏览器对象模型,可以对浏览器窗口进行访问和操作,由于没有相关的BOM标准,每种浏览器都有自己的BOM实现。主要实现:弹出新的窗口;移动、关
5、闭浏览器窗口以及调整大小;提供用户屏幕分辨详细信息的屏幕对象.,第三部分 Java案例演示,1.一些有趣的例子;2.见案例中的JavaScript各种特效.rar 3.网络资源:收录了很多JavaScript实现的特效;4.一个类似于Windows XP的网络操作系统界面,这也是 JavaScript与其他技术结合完成的 请用FireFox访问:http:/,第四部分 JavaScript编程简介,一、编辑软件 编辑JavaScript可以使用任何一种文本编辑器,例如记事本,为降低JavaScript难度,我们使用1st JavaScript Editor,由于破解不完善,智能提示必须自己手工
6、启动 菜单:Edit Preference TextEditor IntelliSense二、调试器 使用VS.NET 2005,同样支持断点设置,F10、F11操作但有两条必须注意:,设置IE中的Internet选项 将高级设置中的禁用脚本调试(Internet Explorer)(英文:Disable Script Debugging(Internet Explorer)关闭在VS.NET 2005 IDE中直接运行三、JavaScript的编写形式用函数写的代码不能马上执行直接把JavaScript嵌入在HTML任何标签中 这里的document对象指的是当前的HTML文档,2.使用Ja
7、vaScript函数时,将函数定义在标签中JavaScrip可以放在任何位置,3.使用单独的.js文件 在标签中链接外部.js文件 利用,Jscript.js内容,第五部分 JavaScript编程基础,一、JavaScript的变量 区分大小写,变量是弱类型的,ECMAScript中的变量无特定的类型,变量的声明,使用关键字 var 可以随时改变变量所存数据的类型 var color=“red”;var num=25;var visible=false;这种特性在.NET 3.5框架中已被引入!与C#中的变量不同,变量并不一定要被初始化,var test;test=55;test=“hi”;
8、二、原始类型 ECMAScript有5种原始类型(primitive type):undefined、null、boolean、number和string。1、undefined类型 var oTemp;声明的变量未初始化时,该变量的初始值是undefined.函数(function)无明确,2、null类型 用于尚未存在的对象,值undefined实际是从值null派生的,ECMAScript把它们定义为相等 null=undefined;/这个表达式返回true3、boolean类型 只有两个值 true和false;4、number类型 任何数字都被看作number类型的字面量 var
9、num=55;var num=070;/56的八进制 var num=0 x1f;/31的16进制 var num=5.0;,有一个特殊的值是NaN,表示非数(Not a Number)可以使用isNaN函数判断,例如:isNaN(“blue”);返回true5、string类型 字符串类型三、typeof运算符 对变量或值调用typeof运算符将返回下列的值之一:“undefined”变量是undefined类型的“boolean”变量是boolean类型的“number”变量是number型的“string”变量是string型的“object”变量是一种引用类型或null类型 例:var
10、 i=2;alert(typeof(i);/得到number类型,四、类型转换(1)转换成字符串 3种主要的原始值 boolean、number和string都有toString方法(2)转换成数字 parseInt方法和parseflota方法 只有对string类型调用这些方法,它们才能正确运行;对其他类型都返回NaN;parseInt方法首先检查位置0处的字符,判断它是否是个有效数字,若有效,再往下检查,直到发现非数字,并返回前面的检查结果。例:var num1=parseInt(“1234”);/得到1234,var num2=parseInt(”1234blue”);/返回1234
11、var num3=parseInt(“blue”);/返回NaN parseFloat的使用类似:var fnum1=parseFloat(”1234blue”);/返回1234.0 var fnum2=parseFloat(“blue”);/返回NaN五、函数 1.语法规则 function 函数名(参数1,参数2)return 值;,说明:(1)JavaScript的函数与C#的方法或函数不同,function后面不需要定义返回值类型;(2)当使用多个参数时,参数间以逗号隔开;(3)JavaScript中函数的传递也是分两种,按值传递和按引用传递;2.argument对象 使用特殊对象ar
12、guments,开发者无需指出参数名,就能访问它们。例如:,function SayHi()if(arguments0=bye)return;alert(arguments0);,调用形式1:SayHi(test);调用形式2:SayHi(test”,123);,与其他语言不同,ECMAScript不会验证传递给函数的参数的个数是否相等,函数可以接受任意个数的参数(Netscape的文档最多25个),而不会引发任何错误。,还可以在函数内使用argument.length属性检测参数个数 function HowManyArgs()alert(arguments.length);利用argume
13、nts对象判断传递给函数的参数个数,即可模拟函数重载。,六、事件驱动及事件处理 Event Drive:JavaScript是基于对象(object-based)的语言,基于对象的基体特征,就是采用事件驱动(event drive)事件:鼠标或键盘的动作;事件驱动:由鼠标或键盘的动作引发的一连串程序的动作叫事件驱动(event drive)事件处理程序(Event Handler):通常由函数执行。网页中的事件一般分为鼠标事件、键盘事件及其他事件。1.一些常用的事件,3.用JavaScript处理事件 JavaScript语言与HTML文档相关联主要是通过“事件”,JavaScript的函数就
14、是用于处理事件的程序,语法规则是:事件=“函数名”或 事件=“JavaScript语句”例如:(1)(2)也可以定义好函数后再调用 function message()alert(hello world);,4.JavaScript练习(1)当装入HTML文档时调用LoadForm()函数,而退出 该文档进入另一个HTML文档时则首先调用 UnLoadForm()函数,确认后方可进入 LoadForm()函数:提示用户“这是一个自动装载例子”UnLoadForm()函数:提示用户“这是一个自动卸载的例子”,无标题页 function LoadForm()alert(这是一个装载的例子);fun
15、ction UnLoadForm()alert(这是一个卸载的例子);测试,(2)一个输入框中,当没有输入值时,提示用户:请输入!无标题页 function validate()if(user.value=)alert(请输入!);,若要验证form中提交的数据,JavaScript脚本为:function validate()if(document.data.user.value=)alert(wrong);return false;,七、数组对象 1.JavaScript数组的定义(1)新建一个长度为0的数组 var myArray=new Array();(2)长度为n的数组 var m
16、yArray=new Array(n);(3)新建一个指定长度的数组,并赋初值 var myArray=new Array(1,2,3);(4)访问数组的某个元素 myArray2=4;var i=myArray2;,2.动态数组 JavaScript的数组的长度不是固定不变,若要增加数组的长度,只要直接赋值。例如:var myArray=new Array(1,2,3);myArray3=4;这时myArray的长度为4 如果 var myArray=new Array(1,2,3);myArray4=4;则长度为5,其中myArra3的值为undefined,3.数组的常用属性和方法(1)
17、length属性:获取数组长度(2)concat方法 例:var a=new Array(1,2,3);var b=new Array(4,5,6);alert(a.concat(b);/输出1,2,3,4,5,6 alert(a.length);/长度不变,仍为3 也可以直接连接数值 a.concat(4,5,6);(3)join方法,连接数组,缺省为”,”例:var a=new Array(1,2,3);alert(a.join();/输出1,2,3,也可用指定的符号连接,例 alert(a.join(“-”);(4)push方法,在数组的结尾添加一个或多个项,同时更改数组的长度 例:va
18、r a=new Array(1,2,3);a.push(4,5,6);alert(a.length);/输出为6(5)pop方法,删除最后一个数组项,将其作为函数值返回 例:var a1=new Array(1,2,3);alert(a1.pop();/输出3 alert(a1.length);/输出2,(6)shift方法:删除数组中的第一个项,将其作为函数值返回 例如:var a1=new Array(1,2,3);alert(a1.shift();/输出1 alert(a1.length);/输出2(7)unshift方法:添加元素至数组开始处 例如:var a1=new Array(1
19、,2,3);a1.unshift(4,5,6)alert(a1);/输出4,5,6,1,2,3,(8)slice方法:返回数组的片断。(或者说子数组)。有两个参数,分别指定开始和结束的索引(不包括第二个参数索引本身)。如果只有一个参数该方法返回从该位置开始到数组结尾的所有项。如果任意一个参数为负的,则表示是从尾部向前的索引计数。比如-1 表示最后一个,-3 表示倒数第三个。var a1=new Array(1,2,3,4,5);alert(a1.slice(1,3);/输出2,3 alert(a1.slice(1);/输出2,3,4,5 alert(a1.slice(1,-1);/输出2,3,
20、4 alert(a1.slice(-3,-2);/输出3,(9)splice方法:从数组中替换或删除元素。第一个参数指定删除或插入将发生的位置。第二个参数指定将要删除的元素数目,如果省略该参数,则从第一个参数的位置到最后都会被删除。splice()会返回被删除元素的数组。如果没有元素被删,则返回空数组。例:var a1=new Array(1,2,3,4,5);alert(a1.splice(3);/输出4,5 alert(a1.length);/输出3 var a1=new Array(1,2,3,4,5);alert(a1.splice(1,3);/输出2,3,4 alert(a1.len
21、gth);/输出2,(10)sort方法:数组排序 var a1=new Array(1,4,2,3,5);alert(a1.sort();/输出1,2,3,4,5 另外它的sort方法可以指定比较函数,根据比较函数进行排序,例:function compare(a,b)return(b-a);var a1=new Array(1,4,2,3,5);alert(a1.sort(compare);/输出5,4,3,2,1(11)reverse方法:将数组倒序,八、String对象主要属性和方法 例如:var myString=“This is a sample”;(1)charAt:返回字串对象
22、在指定位置处的字符 myString.charAt(2);/返回i(2)charCodeAt:返回字串对象在指定位置处字符的10进制的ASCII码 myString.charCodeAt(2);/返回105(3)indexOf:要查找的字串在字串对象中的位置 myString.indexOf(“is”);/返回2(4)lastIndexOf:要查找的字串在字串对象中的最后位置 myString.lastIndexOf(“is”);,(5)substr方法:截取字串 myString.substr(10,3);/返回sam,其中10表示位置,3表示长度(6)substring方法:截取字串 my
23、String.substring(5,9);/返回is a,其中5表示开始位置,9表示结束位置(7)split方法:分隔字串到一个数组中 var a=myString.split();/a0=“This”a1=“is”a2=“a”a3=“sample”(8)replace方法 myString.replace(“sample”,”apple”);/结果”This is a apple”,(9)toLowerCase方法:变成小写字母 myString.toLowerCase();/this is a sample(10)toUpperCase方法,变成大写字母 myString.toUpper
24、Case();/THIS IS A SAMPLE(11)prototype属性 注:JavaScript中的string没有像C#中的Trim()方法,但可以利用prototype属性为其添加 例如,我们设计三个函数LTrim、RTrim、Trim分别剪切字串的左边多余空格、右边多余空格、左右多余空格,function RTrim(str)var i=str.length-1;while(str.charAt(i)=,function LTrim(str)var i=0;while(str.charAt(i)=,function Trim(str)return(LTrim(RTrim(str)
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 部分 JavaScript 程序设计
链接地址:https://www.31ppt.com/p-6611942.html