html教程--第五章-1.pptx

第一章 网页设计与网站建设的基础知识 第二章 HTML超文本标记语言 第三章 网页设计工具Dreamweaver 第四章 CSS层叠样式表 第五章 JavaScript脚本编程,JavaScript脚本编程,第五章,主要内容,,,,,,,,,,Javascript概述,,数据类型,,变量、常量,,,,,运算符和表达式,,,流程控制语句,,概念,JavaScript是一种网页编程技术，大部分使用者将它用于创建动态交互网页 JavaScript是一种基于对象和事件驱动的解释性脚本语言，具有与Java和C语言类似的语法 JavaScript是一种使用简单，功能强大的编程语言 JavaScript是一种嵌入到HTML文件中的基于对象(Object)和事件驱动(Event Driven)并具有安全性、跨平台性和解释性的客户端脚本语言,分类,JavaScript的基础为核心JavaScript，在实现上分为客户端JavaScript、服务器端JavaScript,JavaScript,核心JavaScript,客户端JavaScript,服务器端JavaScript,,,,,,浏览器对象,服务器对象,内置对象,,,重要性,面向对象的敲门砖 具备完整的语法 随着Web浏览器的改进，功能越来越强大 是搭配服务器端技术的主要客户端编程语言,发展历史,网景公司在Netscape2.0首先推出了JavaScript 微软公司从IE3.0开始提供对客户端JavaScript的支持，并另取名为JScript 微软公司从IIS3.0开始提供对服务器端JScript的支持 微软推出JScript.NET，基于.NET框架的JScript具备了和C#.NET和VB.NET一样强大的功能,特点,简单易用 简洁易用，与Java有类似的语法 可以使用任何文本编辑工具编写 只需要浏览器就可以执行程序 解释执行 事先不编译 逐行执行 无需进行严格的变量声明 基于对象 内置大量现成对象，编写少量程序可以完成目标,使用范围,适合做哪些事情 客户端数据计算 客户端表单合法性验证 浏览器对象的调用 浏览器事件的触发 网页特殊显示效果制作 不适合做哪些事情 大型应用程序 图像、多媒体处理 网络实时通讯应用,使用范围,一万元整,Jeny Smiss,10,000/-,Jeny Smiss,A/c No. 010077,,瑞士银行,验证 Jeny 帐户详细信息,余额,帐号,签名,帐户验证完毕,,,同样，,12,Jeny,,Jeny 想创建一个电子邮件帐户,,Jeny@hotmail.com *** 24 US,帐户 Id： 密码： 年龄： 国家：,******,,这样，JavaScript 将验证数据并给出错误信息（如有）,JavaScript与Java的区别…,JavaScript与Java运行方式不一样 JavaScript是解释执行 Java是编译，解释执行 JavaScript不是Java的简化版本 逻辑运算符、语句结构类似 变量申明、对象调用等不同 JavaScript和Java功能实现不一样 JavaScript通过浏览器实现程序功能 Java通过Java虚拟机实现程序功能,编写工具,JavaScript的编辑工具很多，如Microsoft FrontPage、DreamWeaver、Microsoft Visual InterDev，Eclipse,JBuilter,NetBean等IDE开展工具等，都可以用来进行JavaScript网页制作 针对简单的程序，我们使用文本编辑器直接书写源代码,同步练习,本练习主要针对事件驱动和基于对象，该例子在网页的一个按钮中设置了onclick属性，当鼠标单击该按钮时，将会弹出一个窗口，浏览学校首页网站 window是客户端JavaScript中浏览器对象之一，open是window对象的一个方法，意思是打开窗口，在参数中设置好网址，就可以打开指定的网站。 打开记事本，将以下代码输入，保存为D:\hello.htm 保存好以后双击该文件打开，试一试单击按钮后运行的结果,在网页中嵌入JavaScript脚本,可以将 JavaScript 语句插入 HTML 文档，方式 如下： 使用 标签将语句嵌入文档 将 JavaScript 源文件链接到 HTML 文档中 将脚本代码作为HTML标签的属性值,,直接嵌入式…,在网页中直接嵌入JavaScript,脚本开始声明,HTML注释,JavaScript多行注释,JavaScript单行注释,脚本结束声明,语句结尾,…直接嵌入式,运行结果,,用记事本输入程序，以文件名test1-2.htm保存，用IE打开该文件,IE浏览器执行JavaScript时忽略了JS注释部分，只输出运行结果,,文件调用式…,在网页中调用独立JavaScript文件,,,JS脚本文件中不需要脚本开始和结束声明,HTML文件,文件调用式…,运行结果,,用记事本分别创建test1_3.htm和test1-3.js，用IE打开test1_3.htm文件,文件调入JavaScript代码和直接嵌入一样可以正常运行,,事件定义方式…,在定义事件时直接写入JavaScript脚本,,JavaScript运行环境的介绍…,在Windows、Linux、Unix操作系统都可以运行JavaScript，只要安装了支持JavaScript的浏览器 不同的浏览器甚至同一浏览器的不同版本对JavaScript的支持程度都不一样 大部分常见的浏览器都对JavaScript提供支持,…JavaScript运行环境的介绍,支持： √ 不支持： ×,支持JavaScript的浏览器与操作系统,调试运行JavaScript程序,如果程序出现错误 双击左下角出现的感叹号 弹出错误显示窗口， 详细信息框中将会提示错误所在的行号,,,,,主题内容,JavaScript概述 JavaScript基础语法 JavaScript常用内置对象 JavaScript常用DHTML对象,内容线索,词法结构 数据类型 数据类型分类 数字类型 字符串类型 类型转换 运算符 语句 变量与函数 对象,数据类型分类,JavaScript数据类型,基本类型,特殊类型,组合类型,Number：数字 String：字符串 Boolean：布尔,Null：空 Undefined：未定义,Array：数组 Object：对象 Function：函数,,,,,,,数字类型…,简介 最基本的数据类型 能表示的最大值是±1.7976931348623157 x 10308 能表示的最小值是±5 x 10 -324,…数字类型…,整数 在JavaScript中10进制的整数由数字的序列组成 精确表达的范围是 -9007199254740992 (-253) 到 9007199254740992 (253) 超出范围的整数，精确度将受影响 浮点数 使用小数点记录数据 例如：3.4，5.6 使用指数记录数据 例如：4.3e23 = 4.3 x 1023,…数字类型,16进制和8进制数的表达 16进制数据前面加上0x，八进制前面加0 16进制数是由0-9,A-F等16个字符组成 8进制数由0-7等8个数字组成 16进制和8进制与2进制的换算,16进制:0xF3D4,10进制:62420,2进制: 1111 0011 1101 0100,8进制:0171724,2进制: 1 111 001 111 010 100,,,,字符集,JavaScript程序是由Unicode字符集编写的，每个字符和汉字都是采用2个字节进行编码 ASCII码由大小写英文字母、数字、英文符号等组成，采用1个字节中的低7位进行编码，是Unicode编码的子集 Unicode是一种国际编码，可以表达几乎任何书写语言，它是采用16位编码的字符集,ASCII编码：7位编码,,Unicode编码：16位编码,,A,,你,String数据类型…,简介 是由Unicode字符、数字、标点符号组成的序列 字符串常量首尾由单引号或双引号括起 JavaScript中没有字符类型 常用特殊字符在字符串中的表达 字符串中部分特殊字符必须加上右划线\ 常用的转义字符,…String数据类型,//测试特殊字符的书写 var aa=“\u4f60\u597d\n欢迎来到\“JavaScript世界\“ “; alert(aa);,String数据类型的使用 特殊字符的使用方法和效果 Unicode的插入方法,,,你,,,好,,,换行,Boolean数据类型,简介 Boolean类型仅有两个值：true和false，也代表1和0，实际运算中true=1,false=0 布尔值也可以看作on/off、yes/no、1/0对应true/false Boolean值主要用于JavaScript的控制语句，例如：,if (x==1){ y=y+1; } else{ y=y-1; },Null、Undefined…,简介 Null在程序中代表变量没有值 或者不是一个对象 Undefined代表变量的值尚未指定 或者对象属性根本不存在,…Null、Undefined,有趣的比较,数据类型转换…,JavaScript属于松散类型的程序语言 变量在声明的时候并不需要指定数据类型 变量只有在赋值的时候才会确定数据类型 表达式中包含不同类型数据则在计算过程中会强制进行类别转换,数字 + 字符串：数字转换为字符串 数字 + 布尔值：true转换为1，false转换为0 字符串 + 布尔值：布尔值转换为字符串true或false,…数据类型转换…,强制类型转换函数 函数parseInt：强制转换成整数 例如parseInt(“6.12“)=6 例如parseInt(“12a“)=12 例如parseInt(“a12“)=NaN 例如parseInt(“1a2“)=1 函数parseFloat： 强制转换成浮点数 例如parseFloat(“6.12“)=6.12 函数eval：将字符串强制转换为表达式并返回结果 例如eval(“1+1“)=2 例如eval(“12“)=true,类型查询函数 函数typeof ：查询数值当前类型 (string / number / boolean / object ) 例如typeof(“test“+3)=“string“, 例如typeof(null)=“object“ 例如typeof(true+1)=“number” 例如typeof(true-false)=“number”,…数据类型转换…,常 量,概念：指数值不能改变的数据 分类： 整型常量：只包含整数部分，可使用十进制、十 六进制和八进制表示 浮点常量：由整数部分加小数部分表示 布尔常量：只有true和false两种取值 字符型常量：使用单引号或双引号括起来的一个或几个字符或以反斜扛开头的称为转义字符的特殊字符 空值：使用null表示，表示什么也没有,变 量,变量：指在计算机内存中暂时保存数据的地方，其所保存的数据在程序进行过程中可能会发生变化。 在程序中，使用变量名对变量所保存的数据进行各种处理操作,变量命名规则,第一个字符必须是字母或下划线（_)，可以包括字母、数字和下划线 不能包含有空格、“+”、“$”等特殊符号 不能使用JavaScript中的保留字，如var、int等 应使用有意义的变量名，可以使用“驼峰式”或“下划线式”的变量名，如userMessage，user_message ※注意：JavaScript 是对大小写敏感的，也就是说区分大小写，所以变量 count 和变量 Count 是两个不同的变量！,…常量与标识符…,ECMA v3标准保留的JavaScript的关键字,大小写敏感性,在HTML中大小写是不敏感的，但是在JavaScript程序中大小写是敏感的 HTML都是大小写不敏感的 标准的JavaScript语法定义中是区分大小写, function myclick(){ HelloBtn.value=“pause“; } ,,大小写须一致,,变量命名示例,,变量的声明,使用var关键字声明 var str javascript 采用弱数据类型的形式，在声明时无需定义数据类型，变量的具体数据类型根据所赋的值的数据类型来确定 ，如： var str=“hello” //字符串类型 var str=123 //数值类型 变量也可以不事先使用var作声明，而直接使用(简单但不易发现变量名方面的错误）,变量的合法声明语法： 1) 单一声明： var name; 2) 用一个var声明多个变量： var name,age; 3) 声明的同时进行赋值： var name=“张三”,age=18；,变量的声明,变量声明及赋值示例,,变量的声明与使用,变量申明语句 var a; var x,y; 变量赋值语句 a=1; x=“hello,how are you!“; y=x; 变量的调用 … alert(a); document.write(“Tom,“+x); …,允许一次定义多个变量,,不需要指定变量类型,,赋值为数值,,赋值为字符串,,赋值为另一个变量,,变量的作用域,变量的作用域是指变量的有效范围 作用域的类型： 全局变量：指在程序的开头且处在任何函数体以外声明的变量 局部变量：指在函数体内声明的变量,变量的作用域示例, document.title = “变量作用域“; var gv = “JavaScript“; //gv是全局变量 test(); function test() { var lv = “VBScript“; //lv是局部变量 document.write(““ + gv); document.write(““ + lv); } document.write(““ + gv); document.write(““ + lv); ,换行与空格,换行、分号 空格、TAB,a=1;b=2;,a=1 b=2,{ a=1; b=2; },{ a=1; b=2; },=,=,,,有换行，分号允许不加,提倡加上空格或TAB增强程序可读性,a=1; b=2;,=,,推荐加上分号减少错误和歧义的发生,…常量与标识符,使用范例,,function、var是保留字,,sayHello是自定义标识符,,,字符串常量,,,,运算符和表达式,运算符是完成操作的一系列符号，JavaScript支持的运算符包括算术运算符、比较运算符、逻辑运算符等。 表达式是由变量、常量和运算符连接起来的式子，根据运算符类型的不同，表达式可分为算术表达式、比较表达式、逻辑表达式等。,运算符和表达式,算术运算符和算术表达式,运算符和表达式,加(＋)、 减(－)、 乘(*) 、除(/) 、余数(% ) 加、减、乘、除、余数和数学中的运算方法一样 例如：9/2=4.5，4*5=20，9%2=1 -除了可以表示减号还可以表示负号 例如：x=-y +除了可以表示加法运算还可以用于字符串的连接 例如：“abc“+“def“=“abcdef“,…算术运算符,递增(＋＋) 、递减(－－) 假如x=2，那么x++表达式执行后的值为3，x--表达式执行后的值为1 i++相当于i=i+1，i--相当于i=i-1 递增和递减可以放在变量前也可以放在变量后,运算符和表达式,比较运算符和比较表达式 等于 ( == ) 、不等于( != ) 、 大于( ) 、 小于( =) 、小于等于(=),,当操作数类型不同时进行类型转换,,当操作数类型不同时不进行类型转换,逻辑运算符,与 (&&) 、或(||) 、非(!),位运算符,左移()、NOT (~),位运算符,位与(&) 、位或(|)、异或(^),^2=1,异或运算,1,0,0,0,,,,,,,,0,1,0,0,,,,,,,,,,,,赋值运算符和赋值表达式,运算符,优先顺序 按照右表从上到下的优先顺序执行,字符串运算符和字符串表达式,,小常识,2 == “2” true 2 === “2” false 4 != “4” false 4 !== “4” true var a = 2; var b = 4; var c = a--a; var c = a--a; var c = a--a; var c = a--a;,核心语句,基本控制结构 基本控制结构用来决定程序的处理流程，JavaScript 支持三种结构：顺序、选择和循环。,,分支结构,,多分支结构,,循环结构,if选择控制语句…,if-else基本格式 if (表达式){ 语句１; } else { 语句２; . } 功能说明 如果表达式的值为true则执行语句1，否则执行语句2,表达式,语句1,,,,true,false,语句2,…if选择控制语句…,程序范例,var x= (new Date()).getDay(); //获取今天的星期值，0为星期天 var y; if ( (x==6) || (x==0) ) { y=“周末“; }else{ y=“工作日“; } alert(y);,if 语句允许不使用else子句,y=“工作日“; if ( (x==6) || (x==0) ) { y=“周末“; },,,等价于,…if选择控制语句…,if语句嵌套格式 if (表达式1) { 语句1; }else if (表达式2){ 语句2; }else if (表达式3){ 语句3; } else{ 语句4; } 功能说明 执行顺序参见右图,表达式1,表达式2,表达式3,语句1,语句2,语句3,语句4,,,,,,,,true,true,true,false,false,false,,,,,,,,.if选择控制语句,程序范例 对变量x的值进行判断，采用if语句嵌套转换成相应的星期名称,if (x==1){ y=“星期一“; }else if (x==2){ y=“星期二“; . }else if (x==6){ y=“星期六“; }else if (x==0){ y=“星期日“; }else{ y=“未定义“; },if 语句允许进行嵌套,switch选择控制语句…,switch基本格式 switch (表达式) { case 值1:语句1;break; case 值2:语句2;break; case 值3:语句3;break; default:语句4; } 功能说明 详细的计算过程参考右图,case 值1,case 值2,语句1,语句2,,,,,true,true,false,,表达式,case 值2,语句3,,,true,false,语句4,,false,,,,,,…switch选择控制语句,程序范例 对变量x的值进行判断，采用switch转换成相应的星期名称,switch(x){ case 1:y=“星期一“;break; case 2:y=“星期二“;break; case 3:y=“星期三“;break; case 4:y=“星期四“;break; case 5:y=“星期五“;break; case 6:y=“星期六“;break; case 7:y=“星期日“;break; default: y=“未定义“; },swith比else if结构更加简洁清晰,表单验证,不能为空且不能有数字,不能为空且不能有数字,不能为空，且只能包括字母、数字和下划线字符,表单验证的思路,如何编写脚本验证表单？,1、获取表单元素的值（String类型），然后进行判断,2、触发表单（FORM）的提交事件（onSubmit）,表单验证的思路, …… function validateform(){ if(checkUserName() } …… …… ……,同时调用验证用户名和验证密码方法,表单的提交事件,触发表单提交事件,表单验证的思路, function checkUserName(){ //验证用户名 var fname = document.myform.txtUser.value; if(fname.length != 0){ for(i=0;i 0){ alert(“名字中包含数字 \n“+“请删除名字中的数字和特殊字符“); return false } } } else{ alert(“请输入“名字”文本框“); document.myform.txtUser.focus(); return false } return true; } ……,,验证用户名不能包含数字,,获取表单元素的值,表单验证的思路, …… function passCheck(){ //验证密码 var userpass = document.myform.txtPassword.value; if(userpass == ““){ alert(“未输入密码 \n“ + “请输入密码“); document.myform.txtPassword.focus(); return false; } if(userpass.length ……,验证密码不少于6位,获取表单元素的值,for循环控制语句…,for循环基本格式 for (初始化;条件;增量){ 语句1; . } 功能说明 实现条件循环，当条件成立时，执行语句1，否则跳出循环体,条件,语句1,增量,,,,false,true,,初始化,,,,,,…for循环控制语句,程序范例,for (var i=1;ihello “); document.write(““); } //循环输出H1到H7的字体大小,,while循环控制语句…,while循环基本格式 while (条件){ 语句1； . } 功能说明 运行功能和for类似，当条件成立循环执行语句花括号{}内的语句，否则跳出循环,条件,语句1,,,,false,true,,初始化,,,,,…while循环控制语句,程序范例,var i=1; while (ihello “); document.write(““); i++; } //循环输出H1到H7的字体大小,采用while和for的输出效果一样,,对话框,分类,对话框,简单对话框,窗口对话框,alert 提示框,confirm 确认框,prompt 输入框,,,,,,showModalDialog (IE4.0),showModelessDialog (IE5.0),,简单对话框.,.简单对话框.,显示效果比较：,alert(“您好！“); confirm(“您好吗？“); prompt(“您贵姓？“,“陈“);,,,,.简单对话框,返回值比较：,var firstname=prompt(“您贵姓？“,“陈“); if (confirm(“您确定？“)==true) { alert(firstname+“先生，您好！“); },,,,不返回值,,上机练习,用循环语句编写下面程序（循环3次）,弹出prompt对话框输入学生成绩，然后使用if…else语句进行如下判断。 （1）如果60=85，则在显示器上显示“太不可思议了，你太厉害了！”； （4）否则，在显示器上显示“我无话可说！”。,脚本函数,函数类型： – 用户自定义函数 – 内置函数,函数的声明与使用,函数的定义 function 函数名 (参数){ 函数体; return 返回值; } 功能说明 可以使用变量、常量或表达式作为函数调用的参数 函数由关键字function定义 函数名的定义规则与标识符一致，大小写是敏感的 返回值必须使用return,函数的声明与使用,使用范例, /* Sayhello是定义的函数名，前面必须加上function和空格*/ function SayHello(){ var hellostr; var myname=prompt(“请问您贵姓？“,“陈“); hellostr=“您好，“+myname+'先生，欢迎进入“探索之旅“！'; alert(hellostr); document.write(hellostr); } //这里是对前面定义的函数进行调用 SayHello(); ,在调用函数的时候要注意函数的大小写，如果写成sayhello或sayHello都会出错,,调用函数,函数具有返回值时，调用函数的方法： 直接将带有实参的函数名赋给某个变量 直接将带有实参的函数名置于表达式中 函数没有返回值时，调用函数的方法是直接将带有实参的函数名放在程序需使用脚本的位置处,调用函数示例, function giveSumNTerms(n) { var sum; ······ return sum; } var tol=giveSumNterms(6); document.write(tol); alert(“Sum upto “+ 3 + “ is “+giveSumNTerms(3) ); ,事件驱动及事件处理,事件及事件驱动 常用事件 事件处理程序 事件处理示例,事件及事件驱动,基于对象的基本特征，就是采用事件驱动(event-driven) 所谓事件，就是用户与Web页面交互时产生的操作，称为事件(Event)。比如按下鼠标、移动窗口、选择菜单等 事件驱动就是当事件发生后，会由此而引发一连串程序的执行(即事件响应),常用事件,,常用事件,,事件处理程序,事件处理程序就是：当某个事件发生后，处理事件的程序或函数（Event Handler） 事件处理过程定义方式：在每一种事件名称前面加上on即可，如onLoad，onClick,事件处理程序使用语法,常见的是将事件处理程序视为一种属性，直接嵌入到HTML的标记内，如： 另一种语法是视为对象属性，直接接在对象后面，如： document.onLoad =“alert(‘请使用 800*600*256浏览‘）”； ,事件处理示例（一）, 事件处理 请输入姓名: ,事件处理示例（二）, 事件处理 北工大 ,小 结,基于对象的基本特征，就是采用事件驱动 事件，就是用户与Web页面交互时产生的操作，称为事件(Event)。比如按下鼠标、移动窗口、选择菜单等 事件驱动就是当事件发生后，会由此而引发一连串程序的执行(即事件响应) 对事件进行处理程序或函数，我们称之为事件处理程序 网页中的每一种对象都有与之相关联的一种事件,.对象事件处理,IE的冒泡事件处理机制,,,当处于DHTML对象模型底部对象事件发生时会依次激活上面对象定义的同类事件处理,表单.,表单元素,Form,Input,Select,Textarea,,,,, 选择一 选择二 , 初始内容 ,type包括 text、button、submit、reset、 checkbox、radio、hidden等,.表单,表单验证, function check(){ //检查t1输入是否为空 if (form1.t1.value!=““){ form1.submit(); }else{ form1.t1.focus(); } //如果t1值为空则自动将焦点设定到t1输入框 } 姓名： ,