动态网页脚本语言JavaScript(课件PPT).ppt
《动态网页脚本语言JavaScript(课件PPT).ppt》由会员分享,可在线阅读,更多相关《动态网页脚本语言JavaScript(课件PPT).ppt(133页珍藏版)》请在三一办公上搜索。
1、1,动态网页脚本语言JavaScript,主要内容概述编程基础面向对象的基本概念内置对象浏览器窗口对象,2,JavaScript是由Netscape公司开发的一种跨平台,面向对象(object-oriented)的网页脚本语言(Web Script Language),是目前流行的网页特效设计语言。JavaScript代码可直接嵌入HTML文件中,随网页一起传送到客户端浏览器,然后通过浏览器来解释执行。,JavaScript概述,3,什么是JavaScript脚本语言?(1)脚本语言(Scripting Language)?由ASCII码构成,可直接用任何的文本编辑器开发完成。是一种不必事先编
2、译,只要利用适当的解释器(Interpreter)就可以执行的简单的解释式程序。(2)JavaScript?JavaScript是由Netscape公司开发的一种跨平台,纯面向对象(object-oriented)式的网页式脚本语言(Web Script Language)。JavaScript代码可直接嵌入HTML文件中,随网页一起传送到客户端浏览器,然后通过浏览器的解释器来解释执行。,JavaScript概述,4,脚本编写语言 基于对象的语言 简单性 动态性 跨平台,2.JavaScript的特点,JavaScript概述,5,制作网页特效 提供表单前端验证 窗口动态操作 提高系统工作效率
3、,3.JavaScript的功能,JavaScript概述,6,在HTML标记中直接写入JavaScript代码例:鼠标移过来 运行,4.在HTML文档中嵌入JavaScript代码,JavaScript概述,7,将JavaScript代码放入标记符中例如:document.write(欢迎您学习JavaScript!);运行,4.在HTML文档中嵌入JavaScript代码,JavaScript概述,8,将代码独立存储为以.js 为扩展名的文件,利用SRC属性将该文件调入例如:welcome.js文件内容如下:document.write(欢迎您学习JavaScript!);,4.在HTML
4、文档中嵌入JavaScript代码,JavaScript概述,举例,9,document.write();var A=Uppercase A;document.write(A);document.write(Uppercase A);document.write();document.write(gv=+A+);,10,为避免某些浏览器不完全支持JavaScript,而造成错误,可将JavaScript代码用注释语句括起来例如:,4.在HTML文档中嵌入JavaScript代码,JavaScript概述,11,数值型(Number):包含整数或浮点数。布尔型(Logical):取值为true或
5、false。1,0字符型(String):用单引号或双引号括起来的零个或多个的字符或数字所组成。空类型(null):表示没有值,取唯一值”null”,大小写敏感。注:null不能写成Null或NULL。null既不等于“0”,也不等于“空字符串”。因为“0”是数值,“空字符串”是字符串。,1.数据类型,JavaScript编程基础,12,自动数据类型转换 如果表达式中用(+)运算符,且其中一个操作数为字符串,另一个操作数为数值时,JavaScript自动将数值转成字符串。例如:var x=”我今年”+18;结果:x=“我今年18”var x=”15”+8 结果:x=158 var y=15+8
6、;结果:y=23 如果表达式中用了其它运算符,JavaScript自动将字符串转成数值。例如:var x=”30”/5;结果:x=6 var y=”15”-“8”;结果:y=7 举例,2.数据类型转换,JavaScript编程基础,13,数据类型转换函数 eval(字符串):将字符串参数转换成相应的数值,例如:y=eval(“15”)+8;结果:y=23 parseInt(字符串,底数):将字符串转换成指定底数的数值。parseFloat(字符串):将字符串转换成浮点数值。举例,2.数据类型转换,JavaScript编程基础,14,3.变量,JavaScript编程基础,变量命名 以字母或下划
7、线开头(不能以数字开头),后面接数字、字母或下划线。变量名区分大小写。不能用系统保留字和特殊符号作为变量例:var A=Uppercase A;var a=Lowercase a;document.write(A);document.write();document.write(a);,15,3.变量,JavaScript编程基础,变量的声明 变量声明时,不必定义类型,所有类型均由小写的 var声明。例如:var name;(JavaScript自动给出一个未定义值)var name,sex;(JavaScript自动给出一个未定义值)var name=”张永”,sex=”女生”;(二变量均为
8、 字符串),16,3.变量,JavaScript编程基础,变量的作用域:全局变量(Global variable)局部变量(Local variable)var gv=JavaScript;/gv是全局变量 function test()var lv=VBScript;/lv是局部变量 document.write(gv=+gv+);document.write(lv=+lv+);test();document.write(document的输出:);document.write(gv=+gv+);document.write(lv=+lv+);举例,17,4.常量,JavaScript编程基
9、础,字符串常量:(String Literals)一般字符串常量:,“”特殊字符的字符串常量布尔常量:(Boolean Literals):true或false 1,0数值型:整数常量(Integers Literals)浮点常量(Floating-Point Literals),18,5.运算符与表达式,JavaScript编程基础,赋值运算符,x+=y 等价于 x=x+yx%=y 等价于 x=x%y,19,5.运算符与表达式,JavaScript编程基础,比较运算符 举例,20,5.运算符与表达式,JavaScript编程基础,算术运算符 举例,21,5.运算符与表达式,JavaScrip
10、t编程基础,逻辑运算符 a&b:逻辑与(AND),若a,b都是ture,则结果为ture。a|b:逻辑或(OR),若a,b任一是ture,则结果为ture。!a:逻辑非(NOT),若a是ture,则 结果为false。,22,5.运算符与表达式,JavaScript编程基础,字符串运算符(String operators)f)条件运算符(?)格式:条件表达式?值1:值2 如果条件表达式的结果是ture,返回值1,否则 返回值2。var a,b;max=ab?a:b,举例,23,5.运算符与表达式,JavaScript编程基础,g)typeof:用来判断操作数的类型 格式:typeof 操作数
11、或 typeof(操作数)举例,24,属性对象类型:方法对象实例 对象实例名.属性 对象实例名.方法如:窗口p102,JavaScript编程基础,25,5.运算符与表达式,JavaScript编程基础,h)new:定义对象实例。语法:对象实例名=new 对象类型(参数)例如:myArray=new Array(3)this:代表当前对象,因此用在不同的地方,就有不同的结果。this.属性 this.方法 举例,26,6.程序控制流程,JavaScript编程基础,选择结构,if 语句else 语句,if 语句组 else 语句组,if 语句组 else if 语句组 else 语句组,举例,
12、27,6.程序控制流程,JavaScript编程基础,b)Switch结构,switch()case:;break;case:;break;default:;,28,6.程序控制流程,JavaScript编程基础,循环结构,while()语句组,var i=5;while(i 0)document.write(i=i);i-;例,29,6.程序控制流程,JavaScript编程基础,循环结构,var i=5;do document.write(i=,i,);i-;while(i 0)例,do 语句或语句组 while(),30,6.程序控制流程,JavaScript编程基础,循环结构,for(
13、初始值;条件;增量),for(var i=5;i 0;i-)document.write(i=,i,);,31,6.程序控制流程,JavaScript编程基础,循环结构,for(i in ar)document.write(,ari,);例1,for(变量 in 对象),32,6.程序控制流程,JavaScript编程基础,C)With语句,with(),document.write(限时抢购物品:);document.write(ViewSonic 17 显示器。);document.write(EPSON 打印机。);,with(document)write(限时抢购物品:);write(
14、ViewSonic 17 显示器。);write(EPSON 打印机。);例1,33,6.程序控制流程,JavaScript编程基础,注释语句,/*/,34,JavaScript包含两类函数:系统函数 用户自定义函数,7.JavaScript函数,JavaScript编程基础,35,1)编码函数功能:将字符串中非文字、数字字符(如&,%,#,空格符)转成相对应的ASCII值。语法:escape(字符串)2)译码函数功能:与escape()相反,将ASCII值转回ASCII字符.语法:unescape(ASCII值)3)求值函数功能:通常有两个用途,一个用作字符串的运算,另一个用来指出操作对象。
15、语法:eval(字符串表达式),JavaScript编程基础,36,4)数值判断函数功能:判断变量的值是否为数值,“NaN”代表“Not a Number”,若返回值为true,则表示自变量不是数值。语法:isNaN(测试值)举例:var x=15,y=黄雅玲;document.write(x 不是数值吗?,isNaN(x);document.write(y 不是数值吗?,isNaN(y);执行结果:x 不是数值吗?false y 不是数值吗?True,JavaScript编程基础,举例,37,5)转成整数函数功能:将字符串转换成指定底数的数值。格式:parseInt(字符串,底数)举例:x=
16、parseInt(“27”,8),JavaScript编程基础,38,6)转成浮点函数功能:将字符串转成浮点数值。格式:parseFloat(字符串)举例:document.write(parseFloat(3.123456),);,JavaScript编程基础,举例,39,7)用户自定义函数,function 函数名(参数1,参数2,)return,定义函数的注意事项:易于识别 功能模块化 放置在程序开始部分 例1 例2,JavaScript编程基础,40,函数定义的一般形式,定义无参函数的一般形式为:类型标识符函数名()声明部分 语句部分 函数名();,41,定义有参函数的一般形式为:类型
17、标识符 函数名(形式参数表列)声明部分 语句部分 函数名(实际参数表列);,42,函数参数和函数的值,形式参数和实际参数,形式参数:函数名后面括号中的变量名称为“形式参数”(简称“形参”)。实际参数:主调函数中调用一个函数时,函数名后面括号中的参数(可以是一个表达式)称为“实际参数”(简称“实参”)。函数返回值:return后面的括号中的值作为函数带回的值(称函数返回值)。,43,主调函数和被调用函数之间有数据传递的关系。在不同的函数之间传递数据,可以使用的方法有:参数:通过形式参数和实际参数返回值:用return语句返回计算结果全局变量:外部变量,44,对象.属性对象.方法 new:定义对象
18、实例。语法:对象实例名称=new 对象类型(参数)this:代表当前对象,用在不同的地方,有不同的结果。this.属性 this.方法,面向对象的基本概念,45,JavaScript的事件处理,主要内容1、事件(Event):是指用户在某对象上所作的动作。2、事件驱动(Event Driver):由事件引发的一连串程序的动作,称为事件驱动。3、事件处理程序(Event Handler):对事件进行处理的程序或函数。4、事件处理程序语法:如:onClick,46,JavaScript的事件处理,1、常见事件,47,JavaScript的事件处理,2、事件处理程序语法 1)直接嵌入HTML标记符中
19、 浏览 直接写在对象后面.=document.onLoad=alert(这是事件处理程序);*浏览,48,JavaScript的事件处理,3、应用举例 例1:网络技术学习网 浏览,49,JavaScript的事件处理,3、应用举例例2请输入基本资料:姓名:浏览 p58*,例1 例2,50,JavaScript提供了一些非常有用的常用内部对象和方法。用户不需要用脚本来实现这些功能。这正是基于对象编程的真正目的。本节主要介绍JavaScript提供的内置对象:Array():数组 String():字符串 Math():数值计算 Date():日期,JavaScript内置对象,51,JavaSc
20、ript内置对象,1.数组(Array)对象格式:对象名=new Array(元素个数)对象名=new Array(值1,值2,)例如:fruit=new Array()fruit=new Array(2)/声明了有2个元素的数组 fruit=new Array(“苹果”,”橘子”)/声明了有/2个数组元素的数组,并赋值属性:index:数组元素的索引值。*length:数组长度(数组元素个数)。方法:join():将数组内的所有值组合成一个字符串 并用特定符号分开。reverse():将数组内元素的索引次序翻转过来,52,JavaScript内置对象,1.数组(Array)对象举例:例1:一
21、维数组应用例2:二维数组应用,53,JavaScript内置对象,2.字符串(String)对象格式:字符串变量名=new String(“字符串常数”)例如:var str1=new String(”JavaScript”)属性:length:字符串长度*举例:例1:属性length测试,54,JavaScript内置对象,方法:1)indexOf(“子字符串”).*02)replace(“字符串a”,“字符串b”)3)substr(索引值i,长度值)4)substring(索引值i,索引值j)i,j-15)toLowerCase()6)toUpperCase()注意:大小写!,indexO
22、f()函数应用 大、小写转换 substring(),55,JavaScript内置对象,3.数学(Math)对象属性:E:欧拉常量,自然对数的底(约等于2.718)LN2:2的自然对数(约等于0.693)LN10:10的自然对数(约等于2.302)LOG2E:以2为底的e的对数(约等于1.442)LOG10E:以10为底的e的对数(约等于0.434)PI:的值(约等于3.14159)SQRT1_2:0.5的平方根(约等于0.707)SQRT2:2的平方根(约等于1.414),56,JavaScript内置对象,3.数学(Math)对象方法:abs(x)返回x的绝对值 acos(x)返回x的反
23、余弦值(以弧度为单位)asin(x)返回x的反正弦值(以弧度为单位)atan(x)返回x的反正切值(以弧度为单位)ceil(x)返回大于或等于x的最小整数 floor(x)与ceil相反 max(a,b)返回两数间的较大值 min(a,b)返回两数问的较小值 pow(m,n)返回m的n次方(其中m为底,n为指数)random()返回0和1之间的一个伪随机数 round(x)返回X四舍五入之后的整数,57,Math.PIMath.max(a,b)Math.round(x)Math.randow(),举例,var m=new Math();m.max(a,b);,58,JavaScript内置对象
24、,4.日期时间(Date)对象格式:对象实例名=new Date(日期参数)举例:today=new Date()/当日时间为对象初值。today=new Date(“October 1,2002 12:00:00”)/英文表示月份,其余以数值表示:即【”月日,年时:分:秒”】。today=new Date(2002,08,07,0,0,0)/一律以数字表示:即【年,月,日,时,分,秒】。,59,JavaScript内置对象,4.日期时间(Date)对象方法:getYear()返回年份值 getMonth()返回月份值 getDate()并返回日期 getHours()返回小时数 getMin
25、utes()返回分钟数 getSeconds()返回秒数 getDay()返回星期几 getTime()返回完整的时间,60,JavaScript内置对象,4.日期时间(Date)对象方法:setYear()设置年份 setMonth()设置月份 setDate()设置日期 setHours()设置小时数 setMinutes()设置分钟数 setSeconds()设置秒数 setDay()设置返回星期几 setTime()设置完整的时间 注意:setDay(),61,JavaScript内置对象,4.日期时间(Date)对象提示:月份数为(0-11)日期数为(1-31)星期数为(0-6)小时
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 动态 网页 脚本语言 JavaScript 课件 PPT
链接地址:https://www.31ppt.com/p-2705473.html