《基本网络开发技术.ppt》由会员分享，可在线阅读，更多相关《基本网络开发技术.ppt（62页珍藏版）》请在三一办公上搜索。
1、JavaScript语言,JavaScript概述JavaScript数据类型与表达式JavaScript程序控制流程 JavaScript函数JavaScript事件JavaScript对象,什么是JavaScript？,一万元整,Jenny Smiss,10,000/-,Jenny Smiss,A/c No.010077,瑞士银行,Jenny 想在银行取钱,验证 Jenny 帐户详细信息,余额,帐号,签名,帐户验证完毕,同样，,Jenny,Jenny 想创建一个电子邮件帐户,*24US,帐户 Id：密码：年龄：国家：,*,这样，JavaScript 将验证数据并给出错误信息（如有）,什么是
2、JavaScript？,JavaScript概述,JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。是Netscape公司引进Sun公司有关Java的程序概念，将自己原有的Livescript重新进行设计，并改名为JavaScript。它是通过嵌入或调入在标准的HTML语言中实现的，弥补了HTML语言的缺陷，是Java与HTML折衷的选择。功能与作用：提供用户交互、动态更改内容、数据验证,JavaScript的特点,是一种脚本编写语言：它采用小程序段的方式实现编程。像其它脚本语言一样，JavaScript同样是一种解释性语言，它提
3、供了一个容易的开发过程。它的基本结构形式与C、C+、VB、Delphi十分类似，但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起，从而方便用户的使用操作。基于对象的语言：JavaScript是一种基于对象的语言。它能运用自己已经创建的对象。简单性：它是一种基于Java基本语句和控制流之上的简单而紧凑的设计，从而对于学习Java是一种非常好的过渡。其次它的变量类型是采用弱类型，并未使用严格的数据类型。,JavaScript的特点,安全性：JavaScript是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改
4、和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。动态性：它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。跨平台性：依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可正确执行。从而实现了“编写一次，走遍天下”的梦想。,JavaScript的格式,JavaScript区分大小写；JavaScript脚本程序须嵌入在HTML文件中；JavaScript脚本程序中不能包含HTML标
5、签代码；每行写一条脚本语句；语句末尾可以加分号；JavaScript脚本程序可以独立保存为一个外部文件，但其中不能包含标签。,将JavaScript嵌入网页,可以将 JavaScript 语句插入 HTML 文档，方式如下：使用 标签将语句嵌入文档将 JavaScript 源文件链接到 HTML 文档中,简单方式：JavaScript代码,简单例子：使用 Script 标签,JavaScript 代码,document.write(欢迎来到 JavaScript 世界);尽情享受学习的快乐!,脚本代码,设置语言,简单例子：使用外部JS文件,外部 JavaScript 文件可以链接到 HTML
6、文档中SCRIPT 标签的 SRC（源文件）属性可用于包括此外部文件,简单例子：使用外部JS文件,JavaScript 代码(test.htm),使用外部文件以上文本是通过访问外部 JavaScript 文件显示的,2.JavaScript数据类型与表达式,1）数据类型,（1）数字类型如:34，3.14表示为十进制数的整数和实数；034表示为八进制数，用十进制表示其值为28；0 x34表示为十六进制数，用十进制表示其值为52。（2）字符串类型如：Hello!；,（3）逻辑值类型其取值仅可能是“真”或“假”，用 True或False来表示。（4）空值当定义一个变量后未赋初值时，则该变量为空值。例
7、如：var ch1;/此时ch1就为空值（NULL），它不属于任何一种数据类型。,2.JavaScript数据类型与表达式,2）常量,JavaScript常量分为4类：整数、浮点数、布尔值和字符串。,（1）整数常量在JavaScript中，整数可以表示为：十进制数：即一般的十进制整数，它前面不可有前导0。例：75。八进制数：以0为前导，表示八进制数。例：075。16进制数：以0 x为前导，表示16进制数。例：0 x0F。（2）浮点数常量浮点数可以用一般的小数格式来表示，也可以使用科学计数法来表示。例如：7.54343，3.0e9,（3）布尔型常量布尔型常量只有两个值：True 和 False。
8、（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
9、;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(恭喜您，您以最高价拍
10、卖成功！);alert(欢迎下次光临！);,定义变量,赋 值,输 出,prompt(“提示信息”,”默认值”)将弹出提示对话框，接受用户的输入。点击确定返回输入的字符串，点击取消反馈空字符串。,变量作用域,变量 a、b 和 c 只能在其各自的函数中被访问,脚本,函数function1局部变量a,函数function2局部变量b,函数function3局部变量c,可由函数 1、函数 2 和函数 3 访问,全局变量 g,全局变量不需要以 var 关键字进行声明，但局部变量则必须以此关键字来声明,4）运算符,JavaScript拥有一般编程语言（如语言）的运算符，包括算术运算符、比较运算符、逻辑运算
11、符、位移运算符等，用于对一个或多个变量或值（操作数）进行运算，并返回一个新值。（1）算术运算符用于连接运算表达式的各种算术运算符如下表所示。,4）运算符,（2）位运算符位操作运算符对两个表达式相同位置上的位进行位对位运算。JavaScript支持的位操作运算符如下表所示。,4）运算符,（3）复合赋值运算符复合赋值运算符执行的是一个表达式的运算。在JavaScript中，合法的复合赋值运算符下如表所示。,4）运算符,（4）比较运算符比较运算符用于比较两个对象之间的相互关系，返回值为True和False。各种比较运算符如下表所示。,4）运算符,（5）逻辑运算符逻辑运算符返回True和False，其
12、作用是连接条件表达式，表示各条件间的逻辑关系。各种逻辑运算符如下表所示。,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(da
13、y=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）循环语
14、句,);document.write(i小于10条件不成立,但本循环体却执行一次!);i+;while(i10),4.JavaScript函数,函数是是一个JavaScript过程它执行一个特定的任务；首先需对函数进行定义，然后在脚本中对它进行调用。函数的定义由一系列 JavaScript 关键字所组成：-函数的名称；-函数的参数，包含在由逗号分开的圆括号内；-函数的 JavaScript 语句，包含在大括号内，该语句还可以调用另外的一个或多个函数。其一般形式如下：function 函数名(参数1，参数2，)函数语句块,内部函数,JavaScript本身提供了大量的内部函数：有些函数是Java
15、Script脚本语言所固有的，并且没有任何对象的相关性，这些函数称为内部函数。如：eval 对作为数字表达式的一个字符串进行求值 isFinite-计算一个参数以确定它是否是一个有限数值 isNaN-计算一个参数以确定它是否是数值类型 Number 和 String-将一个对象转换为一个数字或字符串 escape 和 unescape-将字符串进行编码或解码,var x=15;var y=“林雅丽;document.write(x 不是数值吗？,isNaN(x);document.write(y 不是数值吗？,isNaN(y);,在JavaScript中，可以定义自己的函数。下面举例说明，其在
16、浏览器中的显示结果如图所示。,自定义函数,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程序测
17、试 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 事件处理程序就是一
18、组语句，在事件（如点击鼠标或移动鼠标等）发生时执行,事件,处理事件,事件处理程序的基本语法是：事件名=JavaScript 代码或调用函数 例如：表示鼠标按下时，将调用执行函数check()。,5.JavaScript事件,事件脚本：为事件编写处理函数，即脚本函数。脚本函数包含在和标记之间。下面例子的功能是建立一个按钮，当单击按钮后弹出一个对话框，对话窗中显示“XX，久仰大名,请多多关照”。,一个JavaScript程序测试 function kkk()do username=prompt(请问您是何方神圣，报上名来,);while(username=)document.write(usern
19、ame,，久仰大名，请多多关照！);,常用JavaScript事件,6.JavaScript的对象,面向对象的系统三要素：对象、类、继承。JavaScript语言是一种基于对象的语言，而不是面向对象的语言，因为它不支持类和继承。对象：是变量的集合体，描述了一类事物的共同属性。在JavaScript中，有以下几种对象：-由浏览器根据web页面的内容自动提供的对象；-JavaScript的内部对象，如Date、Math等；-服务器上的固有对象；-用户自定义的对象。,1）基本概念,JavaScript的对象基本概念,JavaScript中的对象是由属性和方法两个基本元素构成。属性是对象所拥有的一组外
20、观特征，是实现信息的装载单位（与变量相关联），一般为名词，如对象的背景色、长度、名称等。方法是对象可执行的功能，即对属性所进行的操作（与特定的函数相联），一般为动词。,对象：汽车,属性：型号法拉利 颜色绿色 出厂时间1960,方法：前进、刹车、倒车、拐弯,（1）字符串(String)对象,1）JavaScript内部对象,创建字符串有两种不同方法：使用 var 语句 var newstr=“这是我的字符串创建 String 对象var newstr=new String(“这是我的字符串),在JavaScript中，字符串通常作为一个对象来处理的，并提供了许多操作字符串的方法。,（1）字符串(
21、String)对象,（1）字符串(String)对象,语法：indexOf(“查找的子字符串”，查找的起始位置)返回子字符串所在的位置，如果没找到，返回 1例如：var xvar 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.c
22、harAt(4),);document.write(从第2到第5个字符为:,sth.substring(2,5),);),);,（1）字符串(String)对象,（2）数学(Math)对象,Math对象有很多的方法和属性，它们在进行数学运算时非常有用。数学对象的属性主要是些数学常量，如E、LN2、LN10、PI等。数学对象的方法是一些数学函数，如三角函数、对数函数、指数函数等。,（2）数学(Math)对象,一个JavaScript对象的属性和方法的使用 document.write(Math.PI,);/取得3.1415926 document.write(Math.random();/产生一
23、个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=n
24、ew 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
25、;emp.sort();document.write(“排序结果是：);document.write(emp0+);document.write(emp1+);document.write(emp2+);,Date 对象提供了获取日期和时间的方法。定义方法如下：var d1=new Date(年、月、日等时间参数);一旦定义了该对象，则提供了很多种方法。利用这些方法可以在网页上作出很多漂亮的效果。例如：在网页上显示今天的年月日，计算用户在本网页上的逗留时间，网页上显示一个电子表，网上考试的计时器等等。,（4）日期(Date)对象,例：var mydate=new Date(“July 29,2
26、008,10:30:00”)如果没有参数，表示当前日期和时间例：var today=new Date(),（4）日期(Date)对象,Data 方法的分组：,（4）日期(Date)对象,用作 Date 方法的参数的整数：,（4）日期(Date)对象,Set 方法：,（4）日期(Date)对象,Get 方法：,（4）日期(Date)对象,To 方法：,Parse 方法和 UTC 方法,（4）日期(Date)对象,var now=new Date();var hour=now.getHours();if(hour=0,如何实现,获得当前日期和时间,获得小时，即当前是几点,判断上午、下午还是晚上,月
27、份数字011，注意1,浏览器对象（HTML对象模型）定义了表达网页及其元素的对象。它形成了支持动态HTML的基础。对象模型以事件、属性和方法定义了一组对象，用户可以用来创建自已的应用或为应用编写脚本。这些对象都按一定的层次组织，对象模型是一个由对象组成的层次结构。脚本语言和HTML对象模型结合在一起，才有可能构成缤纷的Web世界-实现动态网页,2）浏览器对象HTML对象模型,2）浏览器对象HTML对象模型,http:/m,Window 窗口对象,location地址对象,document文档对象,FORM表单对象,浏览器对象的分层结构,window.document.myform.text1,2）浏览器对象HTML对象模型,浏览器对象的分层结构,本章小结 本章主要介绍了网站设计规划方法、HTML和JavaScript语言等内容。应重点掌握利用HTML和JavaScript语言设计网页、建立网站的方法。,
