基本网络开发技术.ppt

JavaScript语言,JavaScript概述 JavaScript数据类型与表达式 JavaScript程序控制流程 JavaScript函数 JavaScript事件 JavaScript对象,什么是JavaScript ？,一万元整,Jenny Smiss,10,000/-,Jenny Smiss,A/c No. 010077,瑞士银行,Jenny 想在银行取钱,验证 Jenny 帐户详细信息,余额,帐号,签名,帐户验证完毕,同样，,Jenny,Jenny 想创建一个电子邮件帐户,J * 24 US,帐户 Id： 密码： 年龄： 国家：,*,这样，JavaScript 将验证数据并给出错误信息（如有）,什么是JavaScript ？,JavaScript概述,JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。 是Netscape公司引进Sun公司有关Java的程序概念，将自己原有的Livescript重新进行设计，并改名为JavaScript。 它是通过嵌入或调入在标准的HTML语言中实现的，弥补了HTML语言的缺陷，是Java与HTML折衷的选择。 功能与作用：提供用户交互、动态更改内容、数据验证,JavaScript的特点,是一种脚本编写语言：它采用小程序段的方式实现编程。像其它脚本语言一样，JavaScript同样是一种解释性语言，它提供了一个容易的开发过程。它的基本结构形式与C、C+、VB、Delphi十分类似，但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起，从而方便用户的使用操作。 基于对象的语言：JavaScript是一种基于对象的语言。它能运用自己已经创建的对象。 简单性：它是一种基于Java基本语句和控制流之上的简单而紧凑的设计，从而对于学习Java是一种非常好的过渡。其次它的变量类型是采用弱类型，并未使用严格的数据类型。,JavaScript的特点,安全性：JavaScript是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。 动态性：它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。 跨平台性：依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可正确执行。从而实现了“编写一次，走遍天下”的梦想。,JavaScript的格式,JavaScript区分大小写； JavaScript脚本程序须嵌入在HTML文件中； JavaScript脚本程序中不能包含HTML标签代码； 每行写一条脚本语句； 语句末尾可以加分号； JavaScript脚本程序可以独立保存为一个外部文件，但其中不能包含标签。,将JavaScript嵌入网页,可以将 JavaScript 语句插入 HTML 文档，方式如下： 使用 标签将语句嵌入文档 将 JavaScript 源文件链接到 HTML 文档中,简单方式： JavaScript代码 ,简单例子：使用 Script 标签,JavaScript 代码, document.write(“欢迎来到 JavaScript 世界“); 尽情享受学习的快乐! ,脚本代码,设置语言,简单例子：使用外部JS文件,外部 JavaScript 文件可以链接到 HTML 文档中 SCRIPT 标签的 SRC（源文件）属性可用于包括此外部文件,简单例子：使用外部JS文件,JavaScript 代码 (test.htm), 使用外部文件 以上文本是通过访问外部 JavaScript 文件显示的 ,2. JavaScript数据类型与表达式,1）数据类型,（1）数字类型 如: 34，3.14表示为十进制数的整数和实数； 034表示为八进制数，用十进制表示其值为28； 0x34表示为十六进制数，用十进制表示其值为52。 （2）字符串类型 如：“Hello!“；,（3）逻辑值类型 其取值仅可能是“真”或“假”，用 True或False来表示。 （4）空值 当定义一个变量后未赋初值时，则该变量为空值。例如： var ch1; /此时ch1就为空值（NULL），它不属于任何一种数据类型。,2. JavaScript数据类型与表达式,2）常量,JavaScript常量分为4类：整数、浮点数、布尔值和字符串。,（1）整数常量 在JavaScript中，整数可以表示为： 十进制数：即一般的十进制整数，它前面不可有前导0。例：75。 八进制数：以0为前导，表示八进制数。例：075。 16进制数：以0x为前导，表示16进制数。例：0x0F。 （2）浮点数常量 浮点数可以用一般的小数格式来表示，也可以使用科学计数法来表示。 例如：7.54343，3.0e9,（3）布尔型常量 布尔型常量只有两个值：True 和 False。 （4）字符串常量 字符串常量是用单引号或双引号括起来的0个或多个字符组成。 例如：“ Test String”，“12345”,2. JavaScript数据类型与表达式,（5）含转义字符的字符串常量,2. JavaScript数据类型与表达式,3）变量,与C语言类似，变量名必须以字母或下划线（“_”）开头； 变量可以包含数字、从 A 至 Z 的大小写字母； 不能是保留字（如int，var等），不能使用数字作为变量名的第一个字母； JavaScript 区分大小写，即变量 myVar、 myVAR 和 myvar 是不同的变量,3）变量,但它的定义方法与C语言有很大的差别。 C语言的变量定义格式为： int a=1; float f1=3.14 而JavaScript的变量定义格式: var 变量名； 或者 var 变量名=初始值； 注意： JavaScript 并不是在定义变量时来说明变量的数据类型，而是在给变量赋初始值时来确定该变量的数据类型；,声明变量,var a; “var” 用于声明变量的关键字 “a” 变量名,同时声明和初始化变量 var a= 10;,a = 10;,声明变量,声明多个变量 var x, y, z = 10;,赋值,声明变量, 使用变量 var x; x=prompt(“淘宝网竟拍，请出一口价“,1) ; document.write(“拍卖价格“+x+“) / “+“用来连接多个字符串 document.write(“恭喜您，您以最高价拍卖成功！“); alert(“欢迎下次光临！“); ,定义变量,赋 值,输 出,prompt(“提示信息”,”默认值”) 将弹出提示对话框，接受用户的输入。点击确定返回输入的字符串，点击取消反馈空字符串。,变量作用域,变量 a、b 和 c 只能 在其各自的函数中 被访问,脚本,函数function1 局部变量a,函数function2 局部变量b,函数function3 局部变量c,可由函数 1、函数 2 和函数 3 访问,全局变量 g,全局变量不需要以 var 关键字进行声明，但局部变量则必须 以此关键字来声明,4）运算符,JavaScript拥有一般编程语言（如语言）的运算符，包括算术运算符、比较运算符、逻辑运算符、位移运算符等，用于对一个或多个变量或值（操作数）进行运算，并返回一个新值。 （1）算术运算符 用于连接运算表达式的各种算术运算符如下表所示。,4）运算符,（2）位运算符 位操作运算符对两个表达式相同位置上的位进行位对位运算。JavaScript支持的位操作运算符如下表所示。,4）运算符,（3）复合赋值运算符 复合赋值运算符执行的是一个表达式的运算。在JavaScript中，合法的复合赋值运算符下如表所示。,4）运算符,（4）比较运算符 比较运算符用于比较两个对象之间的相互关系，返回值为True和False。各种比较运算符如下表所示。,4）运算符,（5）逻辑运算符 逻辑运算符返回True和False，其作用是连接条件表达式，表示各条件间的逻辑关系。各种逻辑运算符如下表所示。,3. JavaScript程序流程控制,JavaScript的脚本语言同C+语言类似的，提供了相同的程序流程控制语句。 这些语句分别是: if switch for do while, If语句,（1）条件语句, var now = new Date(); var day = now.getDay(); var dayName; if (day = 0) dayName = “星期日“; else if (day = 1) dayName = “星期一“; else if (day = 2) dayName = “星期二“; else if (day = 3) dayName = “星期三“; else if (day = 4) dayName = “星期四“; else if (day = 5) dayName = “星期五“; else dayName = “星期六“; document.write (“今天是快乐的“, dayName); , switch语句,（1）条件语句, function greet(givenSex) switch(givenSex) case “帅哥” : alert(“帅哥，你好啊！”); break; case “美女” : alert(“美女，你好啊！“); break; 请输入性别： 帅哥 美女 , for语句,（2）循环语句, var sum=0; for(n=1;n“); , while 语句,（2）循环语句, “) ; i+; / , dowhile 语句,（2）循环语句, “) ; document.write (“i小于10条件不成立,但本循环体却执行一次!“); i+; while (i10) ,4. JavaScript函数,函数是是一个JavaScript过程它执行一个特定的任务； 首先需对函数进行定义，然后在脚本中对它进行调用。 函数的定义由一系列 JavaScript 关键字所组成： -函数的名称； -函数的参数，包含在由逗号分开的圆括号内； -函数的 JavaScript 语句，包含在大括号内 ，该语句还可以调用另外的一个或多个函数。其一般形式如下： function 函数名( 参数1，参数2， ) 函数语句块 ,内部函数,JavaScript本身提供了大量的内部函数：有些函数是JavaScript脚本语言所固有的，并且没有任何对象的相关性，这些函数称为内部函数。如： eval 对作为数字表达式的一个字符串进行求值 isFinite-计算一个参数以确定它是否是一个有限数值 isNaN-计算一个参数以确定它是否是数值类型 Number 和 String-将一个对象转换为一个数字或字符串 escape 和 unescape-将字符串进行编码或解码, var x = 15; var y = “林雅丽“; document.write(“x 不是数值吗？“,isNaN(x); document.write(“y 不是数值吗？“,isNaN(y); ,在JavaScript中，可以定义自己的函数。下面举例说明，其在浏览器中的显示结果如图所示。,自定义函数, This is a functions test function square ( i ) document.write (“The call passed “,i,“to the square function.“,“); return i*i; document.write (“The function re-turned“,“); document.write(square(8); All done. ,函数调用：一个定义的函数不能直接执行它。但可以调用当前文档中定义的函数，也可以调用另一个窗口或框架定义的函数。一个函数还可以进行递归，即自已调用自己。, 一个JavaScript程序测试 function total (i,j) var sum; sum=i+j; return(sum); document.write(“调用这个函数total(100,20) ,结果为:“, total(100,20) ) ,自定义函数,5. JavaScript事件,Javascript事件通常是当用户在页面上进行活动后产生的行为，如按某个按钮是一个事件，以及改变了表单的文本域或在链接上移动鼠标。 为了响应用户的这些事件，首先必须定义事件处理器，如onChange和onClick 等等来处理事件。事件处理器的名称为事件的名称加一个前缀 “on”。,JavaScript事件处理,JavaScript 事件处理程序就是一组语句，在事件（如点击鼠标或移动鼠标等）发生时执行,事件,处理事件,事件处理程序的基本语法是： 事件名=“ JavaScript 代码或调用函数“ 例如： 表示鼠标按下时，将调用执行函数check( ) 。,5. JavaScript事件,事件脚本：为事件编写处理函数，即脚本函数。脚本函数包含在和标记之间。 下面例子的功能是建立一个按钮，当单击按钮后弹出一个对话框，对话窗中显示“XX，久仰大名,请多多关照”。, 一个JavaScript程序测试 function kkk() do username=prompt(“请问您是何方神圣，报上名来“,“); while (username=“) document.write(username,“，久仰大名，请多多关照！“); ,常用JavaScript事件,6. JavaScript的对象,面向对象的系统三要素：对象、类、继承。 JavaScript语言是一种基于对象的语言，而不是面向对象的语言，因为它不支持类和继承。 对象：是变量的集合体，描述了一类事物的共同属性。在JavaScript中，有以下几种对象： -由浏览器根据web页面的内容自动提供的对象； -JavaScript的内部对象，如Date、Math等； -服务器上的固有对象； -用户自定义的对象。,1）基本概念,JavaScript的对象基本概念,JavaScript中的对象是由属性和方法两个基本元素构成。 属性是对象所拥有的一组外观特征，是实现信息的装载单位（与变量相关联），一般为名词，如对象的背景色、长度、名称等。 方法是对象可执行的功能，即对属性所进行的操作（与特定的函数相联），一般为动词。,对象：汽车,属性：型号法拉利 颜色绿色 出厂时间1960,方法：前进、刹车、倒车、拐弯,（1）字符串(String)对象,1）JavaScript内部对象,创建字符串有两种不同方法 ： 使用 var 语句 var newstr = “这是我的字符串“ 创建 String 对象 var newstr = new String (“这是我的字符串“),在JavaScript中，字符串通常作为一个对象来处理的，并提供了许多操作字符串的方法。,（1）字符串(String)对象,（1）字符串(String)对象,语法： indexOf(“查找的子字符串”，查找的起始位置) 返回子字符串所在的位置，如果没找到，返回 1 例如： var x var y=“abcdefg”; x=y.indexOf(“c” , 0 ); /返回结果为2，起始位置是0,例子：, 一个JavaScript对象的 属性和方法的使用 var sth=new String(“这是一个字符串对象“); document.write(“sth=这是一个字符串对象“,“); document.write(“sth字符串的长度为:“,sth.length,“); document.write(“sth字符串的第4个字符为: “,sth.charAt(4),“); document.write(“从第2到第5个字符为: “,sth.substring(2,5),“); document.write(sth.link(““),“); ,（1）字符串(String)对象,（2）数学(Math)对象,Math对象有很多的方法和属性，它们在进行数学运算时非常有用。 数学对象的属性主要是些数学常量，如E、LN2、LN10、PI等。 数学对象的方法是一些数学函数，如三角函数、对数函数、指数函数等。,（2）数学(Math)对象, 一个JavaScript对象的属性和方法的使用 document.write (Math.PI,“); /取得3.1415926 document.write (Math.random();/产生一个0到1之间随机数 ,（2）数学(Math)对象,Math.random( ) ：产生01的随机小数 Math.round( )：四舍五入取整，如9.34 取整为9,使用方法例子：,数组是一个有相同类型的有序数据项的数据集合。Array对象允许用户创建和操作一个数组。在数组创建之后，数组的各个元素都可以使用 标识符进行访问。,（3）数组(Array)对象,（3）数组(Array)对象,声明数组 var 数组名 = new Array(数组大小); 例： var emp = new Array(3) 添加元素 emp0 = “AA“; emp1 = “BB“; emp2 = “CC“;,emp,也可以声明数组并赋初值： 例： var emp=new Array(“AA”，“BB”，“CC”)；,（3）数组(Array)对象, 使用数组 var emp = new Array(3); emp0 = “Ryan Dias“; emp1 = “Graham Browne“; emp2 = “David Greene“; document.write(“数组emp中的数据为:“); document.write(emp0+“); document.write(emp1+“); document.write(emp2+“); ,（3）数组(Array)对象, var emp = new Array(3); emp0 = “Ryan Dias“; emp1 = “Graham Browne“; emp2 = “David Greene“; emp.sort( ); document.write(“排序结果是：“); document.write(emp0+“); document.write(emp1+“); document.write(emp2+“); ,Date 对象提供了获取日期和时间的方法。 定义方法如下： var d1= new Date(年、月、日等时间参数); 一旦定义了该对象，则