动态网页脚本语言JavaScript课件PPT.ppt

1、1,动态网页脚本语言JavaScript,主要内容概述编程基础面向对象的基本概念内置对象浏览器窗口对象,1,2,JavaScript是由Netscape公司开发的一种跨平台，面向对象(object-oriented)的网页脚本语言(Web Script Language)，是目前流行的网页特效设计语言。JavaScript代码可直接嵌入HTML文件中，随网页一起传送到客户端浏览器，然后通过浏览器来解释执行。,JavaScript概述,2,3,什么是JavaScript脚本语言？(1)脚本语言(Scripting Language)？由ASCII码构成，可直接用任何的文本编辑器开发完成。是一种不

2、必事先编译，只要利用适当的解释器(Interpreter)就可以执行的简单的解释式程序。(2)JavaScript？JavaScript是由Netscape公司开发的一种跨平台，纯面向对象(object-oriented)式的网页式脚本语言(Web Script Language)。JavaScript代码可直接嵌入HTML文件中，随网页一起传送到客户端浏览器，然后通过浏览器的解释器来解释执行。,JavaScript概述,3,4,脚本编写语言 基于对象的语言 简单性 动态性 跨平台,2.JavaScript的特点,JavaScript概述,4,5,制作网页特效 提供表单前端验证 窗口动态操作

3、提高系统工作效率,3.JavaScript的功能,JavaScript概述,5,6,在HTML标记中直接写入JavaScript代码例：鼠标移过来 运行,4.在HTML文档中嵌入JavaScript代码,JavaScript概述,6,7,将JavaScript代码放入标记符中例如：document.write(欢迎您学习JavaScript!);运行,4.在HTML文档中嵌入JavaScript代码,JavaScript概述,7,8,将代码独立存储为以.js 为扩展名的文件，利用SRC属性将该文件调入例如：welcome.js文件内容如下：document.write(欢迎您学习JavaScr

4、ipt!);,4.在HTML文档中嵌入JavaScript代码,JavaScript概述,举例,8,9,document.write();var A=Uppercase A;document.write(A);document.write(Uppercase A);document.write();document.write(gv=+A+);,9,10,为避免某些浏览器不完全支持JavaScript，而造成错误，可将JavaScript代码用注释语句括起来例如：,4.在HTML文档中嵌入JavaScript代码,JavaScript概述,10,11,数值型(Number)：包含整数或浮点数。

5、布尔型(Logical)：取值为true或false。1,0字符型(String)：用单引号或双引号括起来的零个或多个的字符或数字所组成。空类型(null)：表示没有值，取唯一值”null”，大小写敏感。注：null不能写成Null或NULL。null既不等于“0”，也不等于“空字符串”。因为“0”是数值，“空字符串”是字符串。,1.数据类型,JavaScript编程基础,11,12,自动数据类型转换 如果表达式中用（+）运算符，且其中一个操作数为字符串，另一个操作数为数值时，JavaScript自动将数值转成字符串。例如：var x=”我今年”+18;结果：x=“我今年18”var x=”1

6、5”+8 结果：x=158 var y=15+8;结果：y=23 如果表达式中用了其它运算符，JavaScript自动将字符串转成数值。例如：var x=”30”/5;结果：x=6 var y=”15”-“8”;结果：y=7 举例,2.数据类型转换,JavaScript编程基础,12,13,数据类型转换函数 eval(字符串)：将字符串参数转换成相应的数值，例如：y=eval(“15”)+8;结果：y=23 parseInt(字符串，底数)：将字符串转换成指定底数的数值。parseFloat(字符串)：将字符串转换成浮点数值。举例,2.数据类型转换,JavaScript编程基础,13,14,3

7、.变量,JavaScript编程基础,变量命名 以字母或下划线开头（不能以数字开头），后面接数字、字母或下划线。变量名区分大小写。不能用系统保留字和特殊符号作为变量例：var A=Uppercase A;var a=Lowercase a;document.write(A);document.write();document.write(a);,14,15,3.变量,JavaScript编程基础,变量的声明 变量声明时，不必定义类型，所有类型均由小写的 var声明。例如：var name;（JavaScript自动给出一个未定义值）var name,sex;（JavaScript自动给出一个未

8、定义值）var name=”张永”，sex=”女生”；(二变量均为 字符串),15,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.wri

9、te(lv=+lv+);举例,16,17,4.常量,JavaScript编程基础,字符串常量：（String Literals）一般字符串常量：，“”特殊字符的字符串常量布尔常量：（Boolean Literals）：true或false 1,0数值型：整数常量（Integers Literals）浮点常量（Floating-Point Literals）,17,18,5.运算符与表达式,JavaScript编程基础,赋值运算符,x+=y 等价于 x=x+yx%=y 等价于 x=x%y,18,19,5.运算符与表达式,JavaScript编程基础,比较运算符 举例,19,20,5.运算符与表达

10、式,JavaScript编程基础,算术运算符 举例,20,21,5.运算符与表达式,JavaScript编程基础,逻辑运算符 a&b：逻辑与(AND)，若a,b都是ture，则结果为ture。a|b：逻辑或(OR)，若a,b任一是ture，则结果为ture。!a：逻辑非(NOT)，若a是ture，则 结果为false。,21,22,5.运算符与表达式,JavaScript编程基础,字符串运算符（String operators）f)条件运算符（？）格式：条件表达式?值1:值2 如果条件表达式的结果是ture，返回值1，否则 返回值2。var a,b;max=ab?a:b,举例,22,23,5.

11、运算符与表达式,JavaScript编程基础,g)typeof：用来判断操作数的类型 格式：typeof 操作数 或 typeof(操作数)举例,23,24,属性对象类型：方法对象实例 对象实例名.属性 对象实例名.方法如：窗口p102,JavaScript编程基础,24,25,5.运算符与表达式,JavaScript编程基础,h)new：定义对象实例。语法：对象实例名=new 对象类型(参数)例如：myArray=new Array(3)this：代表当前对象，因此用在不同的地方，就有不同的结果。this.属性 this.方法 举例,25,26,6.程序控制流程,JavaScript编程基础

12、,选择结构,if 语句else 语句,if 语句组 else 语句组,if 语句组 else if 语句组 else 语句组,举例,26,27,6.程序控制流程,JavaScript编程基础,b)Switch结构,switch()case：；break;case：；break;default：；,27,28,6.程序控制流程,JavaScript编程基础,循环结构,while()语句组,var i=5;while(i 0)document.write(i=i);i-;例,28,29,6.程序控制流程,JavaScript编程基础,循环结构,var i=5;do document.write(i

13、=,i,);i-;while(i 0)例,do 语句或语句组 while(),29,30,6.程序控制流程,JavaScript编程基础,循环结构,for(初始值；条件；增量),for(var i=5;i 0;i-)document.write(i=,i,);,30,31,6.程序控制流程,JavaScript编程基础,循环结构,for(i in ar)document.write(,ari,);例1,for(变量 in 对象),31,32,6.程序控制流程,JavaScript编程基础,C)With语句,with(),document.write(限时抢购物品：);document.writ

14、e(ViewSonic 17 显示器。);document.write(EPSON 打印机。);,with(document)write(限时抢购物品：);write(ViewSonic 17 显示器。);write(EPSON 打印机。);例1,32,33,6.程序控制流程,JavaScript编程基础,注释语句,/*/,33,34,JavaScript包含两类函数：系统函数 用户自定义函数,7.JavaScript函数,JavaScript编程基础,34,35,1)编码函数功能：将字符串中非文字、数字字符（如&,%,#,空格符）转成相对应的ASCII值。语法：escape(字符串)2)译码

15、函数功能：与escape()相反，将ASCII值转回ASCII字符.语法：unescape(ASCII值)3)求值函数功能：通常有两个用途，一个用作字符串的运算，另一个用来指出操作对象。语法：eval(字符串表达式),JavaScript编程基础,35,36,4)数值判断函数功能：判断变量的值是否为数值，“NaN”代表“Not a Number”，若返回值为true，则表示自变量不是数值。语法：isNaN(测试值)举例：var x=15,y=黄雅玲;document.write(x 不是数值吗？,isNaN(x);document.write(y 不是数值吗？,isNaN(y);执行结果：x

16、不是数值吗？false y 不是数值吗？True,JavaScript编程基础,举例,36,37,5)转成整数函数功能：将字符串转换成指定底数的数值。格式：parseInt(字符串，底数)举例：x=parseInt(“27”,8),JavaScript编程基础,37,38,6)转成浮点函数功能：将字符串转成浮点数值。格式：parseFloat(字符串)举例：document.write(parseFloat(3.123456),);,JavaScript编程基础,举例,38,39,7)用户自定义函数,function 函数名(参数1，参数2，)return,定义函数的注意事项：易于识别 功能模块化 放置在程序开始部分 例1 例2,JavaScript编程基础,39,40,函数定义的一般形式,定义无参函数的一般形式为:类型标识符函数名()声明部分 语句部分 函数名();,40,41,定义有参函数的一般形式为:类型标识符 函数名(形式参数表列)声明部分 语句部分 函数名(实际参数表列);,41,42,函数参数和函数的值,形式参数和实际参数,形式参数：函数名后面括号中的变量名称为“形式参数”