《动态网页脚本语言javascript(课件ppt)_1》由会员分享,可在线阅读,更多相关《动态网页脚本语言javascript(课件ppt)_1(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(“欢迎您学习JavaScr
4、ipt!“);,4. 在HTML文档中嵌入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,数值型(N
5、umber):包含整数或浮点数。 布尔型(Logical):取值为true或false。1,0 字符型(String):用单引号或双引号括起来的零个或多个的字符或数字所组成。 空类型(null):表示没有值,取唯一值”null”,大小写敏感。注:null不能写成Null或NULL。null既不等于“0”,也不等于“空字符串”。因为“0”是数值,“空字符串”是字符串。,1. 数据类型,JavaScript编程基础,12,自动数据类型转换如果表达式中用(+)运算符,且其中一个操作数为字符串,另一个操作数为数值时,JavaScript自动将数值转成字符串。 例如:var x=”我今年”+18; 结果
6、:x=“我今年18”var x=”15”+8 结果:x=158var y=15+8; 结果:y=23 如果表达式中用了其它运算符,JavaScript自动将字符串转成数值。 例如:var x=”30”/5; 结果:x=6var y=”15”-“8”; 结果:y=7 举例,2. 数据类型转换,JavaScript编程基础,13,数据类型转换函数eval(字符串):将字符串参数转换成相应的数值,例如:y=eval(“15”)+8; 结果:y=23parseInt(字符串,底数):将字符串转换成指定底数的数值。parseFloat(字符串):将字符串转换成浮点数值。 举例,2. 数据类型转换,Jav
7、aScript编程基础,14,3. 变量,JavaScript编程基础,变量命名以字母或下划线开头(不能以数字开头),后面接数字、字母或下划线。变量名区分大小写。 不能用系统保留字和特殊符号作为变量 例: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,
8、 sex; (JavaScript自动给出一个未定义值) var name=”张永”,sex=”女生”; (二变量均为字符串),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.w
9、rite(“document的输出:“);document.write(“gv=“ + gv + “);document.write(“lv=“ + lv + “);举例,17,4. 常量,JavaScript编程基础,字符串常量:(String Literals) 一般字符串常量: , “ ” 特殊字符的字符串常量布尔常量:(Boolean Literals):true或false 1,0 数值型:整数常量(Integers Literals)浮点常量(Floating-Point Literals),18,5. 运算符与表达式,JavaScript编程基础,赋值运算符,x+=y 等价于 x
10、=x+y x%=y 等价于 x=x%y,19,5. 运算符与表达式,JavaScript编程基础,比较运算符举例,20,5. 运算符与表达式,JavaScript编程基础,算术运算符举例,21,5. 运算符与表达式,JavaScript编程基础,逻辑运算符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) 条件运算符(?)
11、格式:条件表达式? 值1 : 值2如果条件表达式的结果是ture,返回值1,否则返回值2。var a, b;max = ab? a : b,举例,23,5. 运算符与表达式,JavaScript编程基础,g) typeof:用来判断操作数的类型格式:typeof 操作数 或 typeof(操作数) 举例,24,属性 对象类型: 方法 对象实例对象实例名.属性对象实例名.方法如:窗口p102,JavaScript编程基础,25,5. 运算符与表达式,JavaScript编程基础,h) new:定义对象实例。语法:对象实例名= new 对象类型(参数)例如:myArray=new Array(3)
12、 this:代表当前对象,因此用在不同的地方,就有不同的结果。 this.属性this.方法 举例,26,6. 程序控制流程,JavaScript编程基础,选择结构,if 语句 else语句,if 语句组 else 语句组,if 语句组 else if 语句组 else 语句组 ,举例,27,6. 程序控制流程,JavaScript编程基础,b) Switch结构,switch ( ) case :;break;case :;break;default:;,28,6. 程序控制流程,JavaScript编程基础,循环结构,while ()语句组, var i = 5;while ( i 0 )
13、 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 ( 初始值;条件;增量 ) ,for ( var i = 5; i 0; i- ) document.write(“i = “ ,i ,“); ,31,6. 程序控制流程,JavaScript编程基础,循环结构,for ( i in
14、 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 (“ViewSonic 17“ 显示器。“);write (“EPSON 打印机。“); 例1,33,6. 程序控制流程,J
15、avaScript编程基础,注释语句,/ /* */,34,JavaScript包含两类函数:系统函数用户自定义函数,7. JavaScript函数,JavaScript编程基础,35,1) 编码函数 功能:将字符串中非文字、数字字符(如&,%,#,空格符)转成相对应的ASCII值。 语法:escape(字符串) 2) 译码函数 功能:与escape()相反,将ASCII值转回ASCII字符. 语法:unescape(ASCII值) 3) 求值函数 功能:通常有两个用途,一个用作字符串的运算,另一个用来指出操作对象。 语法: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,