《03第三讲JavaScript编程技术(一).ppt》由会员分享，可在线阅读，更多相关《03第三讲JavaScript编程技术(一).ppt（39页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第三讲第三讲 JavaScript(上上)4.14.2基本语法与网页事件处理基本语法与网页事件处理*温故温故*o温故温故n根据样式表定义的位置不同，可分为哪三类？根据样式表定义的位置不同，可分为哪三类？n什么时候使用行内样式，如何使用？什么时候使用行内样式，如何使用？n什么场合使用内嵌样式，如何使用？什么场合使用内嵌样式，如何使用？n什么场合使用独立样式文件，如何使用？什么场合使用独立样式文件，如何使用？n选择符有哪些类型？选择符有哪些类型？nclassclass选择符如何定义和使用？选择符如何定义和使用？nidid选择符如何定义和使用？选择符如何定义和使用？o作业中的问题作业中的问题n4 4
2、个样式可以放在一个样式表文件中定义，不必写个样式可以放在一个样式表文件中定义，不必写4 4个样式文件个样式文件n一般定义一般定义CLASSCLASS选择符或选择符或IDID选择符，而不使用标记选择符。选择符，而不使用标记选择符。n未使用独立样式表文件未使用独立样式表文件*知新知新*o理解什么是理解什么是 JavaScriptn将将 JavaScript 嵌入到嵌入到 HTML 中中o基本语法基本语法n变量、数据类型和运算符变量、数据类型和运算符nJavaScript的流程控制的流程控制nJavaScript函数函数 nJavaScript 常用对象常用对象 o网页事件处理网页事件处理n标记标记
3、clickn鼠标事件鼠标事件n标记标记onchange事件事件n键盘事件键盘事件什么是什么是JavaScript?o什么是什么是JavaScriptnJavaScript是由是由Netscape公司开发并在浏览器中执行的脚本公司开发并在浏览器中执行的脚本语言。可以嵌入到语言。可以嵌入到Html文件中，增加网页动态效果或数据合法性文件中，增加网页动态效果或数据合法性验证。验证。n它是基于对象（它是基于对象（Object Based）。与）。与Java名字类似，实际上名字类似，实际上无关。无关。n基于事件驱动（基于事件驱动（Event Driver）。当客户在主页中执行了某种）。当客户在主页中执行
4、了某种操作，比如按下鼠标、移动窗口、选择菜单等，将会引起相应的操作，比如按下鼠标、移动窗口、选择菜单等，将会引起相应的事件响应。事件响应。o主要功能主要功能n网页特效：光标动画、动态广告等网页特效：光标动画、动态广告等n数据验证数据验证：登录、注册、调查表：登录、注册、调查表JavaScript 用于数据验证用于数据验证4.1.1 4.1.1 将将JavaScript嵌入网页嵌入网页 （重点）（重点）o将将 JavaScript 脚本嵌入脚本嵌入 HTML 网页的方式有三种：网页的方式有三种：n标记块形式用标记块形式用 标记将语句嵌入文档标记将语句嵌入文档n独立独立js脚本文件形式将脚本文件形
5、式将 JavaScript 文件链接到文件链接到 HTML 文档文档n具体事件属性方式通过事件属性与具体事件属性方式通过事件属性与HTML结合结合 =JavaScriptdocument.writedocument.write(欢迎来到欢迎来到 JavaScriptJavaScript 世界世界););SCRIPT input type=button Script 标记块标记块JavaScript 代码JavaScript脚测试document.writeln(欢迎来到JavaScript世界);尽情享受学习快乐！脚本代码设置语言document.writedocument.write()()
6、是文档对象的输出函数，其功能是将括号中的字符或变量值输是文档对象的输出函数，其功能是将括号中的字符或变量值输出到窗口出到窗口 使用外部使用外部 JS 文件文件 JavaScript 代码代码(4-1.htm)使用外部文件以上文本是通过访问外部 JavaScript 文件显示的 document.write(独立独立js文件嵌入文件嵌入);JavaScript 代码代码(4-1.js)4.1.2 变量、声明变量变量、声明变量var a;a=10;“var”用于声明变量的关键字用于声明变量的关键字 “a”变量名变量名var x,y,z=10;var a=10;同时声明和初始化变量：同时声明和初始化
7、变量：声明变量与赋值声明变量与赋值声明多个变量：声明多个变量：o变量名必须以字母或下划线（变量名必须以字母或下划线（_ _）开头，可以包含数字、）开头，可以包含数字、从从A A至至Z Z的大小写字母，的大小写字母，区分大小写。区分大小写。变量定义实例变量定义实例(4-5.html)许三多哲学活着就要做有意义的事var i=2;var j=有意义就是好好活;document.writeln(j);i=3;j=有意义就是好好活;document.writeln(j);JavaScript中消息对话框中消息对话框(重点重点)o用于和用户交互的消息对话框有三个：用于和用户交互的消息对话框有三个：nal
8、ert(警告信息警告信息);nprompt(提示信息提示信息,初始值初始值);nconfirm(确认消息确认消息);例：声明变量例：声明变量 使用变量使用变量var x;x=prompt(淘宝网竟拍，请出一口价淘宝网竟拍，请出一口价,1);document.write(拍卖价格拍卖价格+x+);/+用来连接多个字符用来连接多个字符串串document.write(恭喜您，您以最高价拍卖成功！恭喜您，您以最高价拍卖成功！);alert(欢迎下次光临！欢迎下次光临！);定义变量赋 值输 出prompt(prompt(提示信息提示信息,默认值默认值)将弹出提示对话框，接受用户的输入。将弹出提示对话框
9、，接受用户的输入。点击确定返回输入的字符串，点击取消点击确定返回输入的字符串，点击取消返回空字符串。返回空字符串。变量 a、b 和 c 只能在其各自的函数中被访问 变量的作用域变量的作用域脚本脚本函数function1局部变量a函数function2局部变量b函数function3局部变量c可由函数 1、函数 2 和函数 3 访问全局变量 gg全局变量允许不用 var 关键字进行声明，但局部变量则必须以此关键字来声明数据类型及常量数据类型及常量o数据值：整数、浮点数数据值：整数、浮点数o字符串型字符串型n字符串文字放在一对匹配的单引号字符串文字放在一对匹配的单引号()或双引号或双引号()中。字
10、符串中。字符串中可以包含双引号，该双引号两边需加单引号，也可以包含单中可以包含双引号，该双引号两边需加单引号，也可以包含单引号，该单引号两边需加双引号。引号，该单引号两边需加双引号。o如：如：Im a student、herf=http:/localhost:8080n注意：注意：JavaScript中没有单独的字符类型，表示单个字符时中没有单独的字符类型，表示单个字符时只能用单字符的字符串形式，如：只能用单字符的字符串形式，如：n、Ao布尔：布尔：true、falseo空：空：null表示无值或无对象表示无值或无对象运算符运算符 o运算符对一个或多个变量或值（操作数）进行运算，并返运算符对一
11、个或多个变量或值（操作数）进行运算，并返 回一个新值回一个新值o根据所执行的运算，运算符可分为以下类别：根据所执行的运算，运算符可分为以下类别：n算术运算符算术运算符n比较运算符比较运算符n逻辑运算符逻辑运算符算算术术运算符运算符说说 明明示示 例例+加、字符串加、字符串连连接接a=5+8-减减a=8-5/除除a=20/5*乘乘a=5*19%取模两个数相除的余数取模两个数相除的余数10%3=1+自加，将操作数的自加，将操作数的值值加加 1。-自减，将操作数的自减，将操作数的值值减减 1。比较运算符比较运算符比较运算符比较运算符运算符说 明示 例=等于。等于。如果两个操作数相等，如果两个操作数相
12、等，则则返回真。返回真。a=b!=不等于。不等于。如果两个操作数不相等，如果两个操作数不相等，则则返回真。返回真。Var2!=5大于。大于。如如果果左左边边的的操操作作数数大大于于右右边边的的操操作作数数，则则返回真。返回真。Var1 var2小于。小于。如如果果左左边边的的操操作作数数小小于于右右边边的的操操作作数数，则则返回真。返回真。Var2 var1=小于等于。小于等于。如如果果左左边边的的操操作作数数小小于于或或等等于于右右边边的的操操作数，作数，则则返回真。返回真。Var2=4Var2=大大于于等等于于。如如果果左左边边的的操操作作数数大大于于或或等等于右于右边边的操作数，的操作数
13、，则则返回真。返回真。Var1=5Var1=var2运算符运算符逻辑运算符逻辑运算符运算符值说 明与与(&)expr1&expr2只只有有当当 expr1 和和 expr2 同同为为真真时时，才才返返回回真真。否否则则，返回假。，返回假。或或(|)expr1|expr2如如果果其其中中一一个个表表达达式式为为真真，或或两两个个表表达达式式同同为为真，真，则则返回真。否返回真。否则则，返回假。，返回假。非非(!)!expr如如果果表表达达式式为为真真，则则返返回回假假。如如果果为为假假，则则返返回真。回真。oif 语句语句 oif-else语句语句oif嵌套嵌套n语法格式：语法格式：if(if(
14、条件条件)/JavaScript/JavaScript代码代码;4.1.3 JavaScript流程控制流程控制if(if(条件条件)/JavaScript /JavaScript代码代码;elseelse /JavaScript /JavaScript代码代码;if(if(条件条件1 1)if(if(条件条件2)2)/JavaScript /JavaScript代码代码;switch 语句语句 switch switch(表达式表达式)case case 常量常量1 1:JavaScriptJavaScript语句语句;break;break;casecase 常量常量2 2:JavaScr
15、ipt JavaScript语句语句;break;break;.default:default:JavaScriptJavaScript语句语句;o多分支语句多分支语句循环控制语句循环控制语句ofor循环循环odo-whileowhile 格式如下例：var i;for(i=0;i10;i+)/循环体语句;for(var n=1;n20;n+)/循环体语句for 循环循环如何实现例：例：for循环的应用打印金字塔直线循环的应用打印金字塔直线for 循环演示document.write(打印金字塔直线);for(var i=0;i100;i=i+5)document.write();当i=5 时
16、，qwhile循环 while(循环条件)/语句；qdowhile循环 do /语句；while(循环条件);while和和dowhile循环循环4.1.4 JavaScript函数函数(重点重点)o定义函数，定义函数，一般放在一般放在HTMLHTML文档的文档的之间之间，格式，格式：function 函数名函数名(参数名参数名1,1,参数名参数名2,)2,)语句语句;o调用函数：调用函数：函数调用一般和表单元素的事件一起使用，调用格式为：函数调用一般和表单元素的事件一起使用，调用格式为：事件名事件名 函数名函数名(参数值参数值1,1,参数值参数值2,);2,);例：function sum(
17、one,two)var result=one+two;return result;将计算结果返回调用者函数调用例利用函数操作表单对象例利用函数操作表单对象o要求：输入购买数量和出价金额后，单击要求：输入购买数量和出价金额后，单击“计算看看计算看看”按按钮，则在钮，则在“预计总价预计总价”文本框内显示总价钱。文本框内显示总价钱。o分析：编写函数实现计算功能，点击按钮时调用函数。分析：编写函数实现计算功能，点击按钮时调用函数。o问题：如何获取和设置输入文本框的值？问题：如何获取和设置输入文本框的值？n输入框是表单元素，访问表单元素的方法如下：输入框是表单元素，访问表单元素的方法如下：odocume
18、nt.表单名表单名.表单元素名表单元素名.元素属性名，如：元素属性名，如：赋值：赋值：document.myform.num.value=1200;取值：取值：var x=document.myform.num.value;function calcu()var numb1=document.calc.num1.value;var numb2=document.calc.num2.value;document.calc.total.value=parseFloat(numb1)*parseFloat(numb2);为表单元素赋值并显示添加单击事件，单击按钮时调用“calcu()”函数例函数操作
19、表单功能实现例函数操作表单功能实现获取表单中输入的数据定义calcu()计算函数,实现两个数相乘的功能.定义函数的语法：function 函数名(参数列表)/JavaScript语句；parseFloat(数字串)是类型转换函数内置对象内置对象Date 对象对象oDate 对象提供了灵活的操作时间和日期的方法对象提供了灵活的操作时间和日期的方法n创建日期对象：创建日期对象：new Date()n星期的天数与月份数都是从星期的天数与月份数都是从0开始表示，如：第开始表示，如：第0月是月是1月月如果没有参数，表示当前日期和时间，例：var today=new Date()Date 对象的主要方法对
20、象的主要方法方法说明getDate()返返回回 Date 对对象象中中月月份份中中的的天天数数，其其值值介介于于 1 至至 31 之之间间getDay()返回返回 Date 对对象中的星期几，其象中的星期几，其值值介于介于 0 至至 6 之之间间getHours()返回返回 Date 对对象中的小象中的小时时数，其数，其值值介于介于 0 至至 23 之之间间getMinutes()返回返回 Date 对对象中的分象中的分钟钟数，其数，其值值介于介于 0 至至 59 之之间间getSeconds()返回返回 Date 对对象中的秒数，其象中的秒数，其值值介于介于 0 至至 59 之之间间getM
21、onth()返回返回 Date 对对象中的月份，其象中的月份，其值值介于介于 0 至至11 之之间间getFullYear()返回返回 Date 对对象中的年份，其象中的年份，其值为值为四位数四位数getYear()返返回回 Date 对对象象中中的的年年份份，其其值值为为两两位位数数(对对1999以以前前年份年份)getTime()返回自返回自某一某一时时刻（刻（1970 年年 1 月月 1 日）以来的毫秒数日）以来的毫秒数setXXX(参数参数)用用指指定定参参数数设设置置日日期期时时间间对对象象，对对应应于于get方方法法均均有有相相应应的的set方法方法Date 对象的常用方法对象的常
22、用方法方方 法法说说 明明 toGMTString使用使用格林尼治格林尼治标标准准时间时间 (GMT)(GMT)数据格式将数据格式将 Date Date 对对象象转换转换成字符串表示成字符串表示toLocaleString()使用当地使用当地时间时间格式将格式将 Date Date 对对象象转换转换成字符串表示成字符串表示toString()返回描述日期的字符串返回描述日期的字符串oTo 方法：方法：例例Date对象应用对象应用 如何实现例例Date对象应用对象应用(实现实现)var now=new Date();var hour=now.getHours();if(hour=0&hour 1
23、2&hour18&hour 24)document.write(晚上好!);document.write(今天日期:+now.getYear()+年 +(now.getMonth()+1)+月+now.getDate()+日);document.write(现在时间:+now.getHours()+点+now.getMinutes()+分);获得当前日期和时间获得小时，即当前是几点判断上午、下午还是晚上月份数字011，注意加1：+1内置对象内置对象Math 对象对象 名称 说 明属性属性PI 的的值值，约约等于等于 3.1415LN1010 的自然的自然对对数的数的值值，约约等于等于 2.30
24、2EEuler 的的常常量量的的值值，约约等等于于 2.718。Euler 的的常量用作自然常量用作自然对对数的底数数的底数abs(y)返回返回 y 的的绝对值绝对值sin(y)返回返回 y 的正弦的正弦，返回返回值值以弧度以弧度为单为单位。位。cos(y)返回返回 y 的余弦的余弦，返回返回值值以弧度以弧度为单为单位位tan(y)返回返回 y 的正切的正切，返回返回值值以弧度以弧度为单为单位位 random返回返回0-1的随机数的随机数方法方法round(y)四四舍舍五五入入取取整整，如如：Math.round(6.454)值值为为6sqrt(y)返回返回 y 的平方根的平方根oMath对象
25、有一系列方法，能实现较复杂的算术运算。对象有一系列方法，能实现较复杂的算术运算。内置对象内置对象String(重点重点)创建字符串有两种不同方法创建字符串有两种不同方法：o可以直接使用赋值语句可以直接使用赋值语句var newstr=海上升明月;o使用构造器创建使用构造器创建 String 对象对象var newstr=new String(天涯共此时);String 对象对象名名 称称说说 明明属性属性length返回字符串的返回字符串的长长度度 方法方法bold()加粗字符串文本加粗字符串文本 fontcolor(颜颜色色)确确 定定 字字 体体 颜颜 色色(例例：blueblue、#ff
26、0000)#ff0000)italics()用斜体用斜体显显示字符串示字符串 indexOf(子子串串,起起始始位位置置)查找子串的首位置，未找到时返回查找子串的首位置，未找到时返回-1-1lastIndexOf(子子串串,截截止止位置位置)查找子串的尾位置，未找到时返回查找子串的尾位置，未找到时返回-1-1split(分隔符分隔符)将一个字串按分隔符分隔为字串数组将一个字串按分隔符分隔为字串数组substr(起始位置起始位置,长长度度)返回子串返回子串 toLowerCase()将字符串将字符串转换转换成小写成小写 toUpperCase()将字符串将字符串转换转换成成大写大写 o常用方法和
27、属性常用方法和属性检查电子邮件emailemail是否包含“”和”.”例例String 对象应用对象应用如何实现例：例：String类的类的indexOf()方法的应用方法的应用(重点重点)function checkEmail()var e=document.myform.email.value;if(e.length=0)/检测长度是否为检测长度是否为0 0，即是否为空，即是否为空 alert(电子邮件不能为空电子邮件不能为空!);return;if(e.indexOf(,0)=-1)/检测是否包含检测是否包含”符号符号 alert(电子邮件格式不正确电子邮件格式不正确nn必须包含必须包含
28、 符号！符号！);return;if(e.indexOf(.,0)=-1)/检测是否包含检测是否包含”.”符号符号 alert(电子邮件格式不正确电子邮件格式不正确nn必须包含必须包含.符号！符号！);return;document.write(恭喜您！，注册成功！欢迎进入古城热线恭喜您！，注册成功！欢迎进入古城热线！);返回结果-1表示没找到“”字符小结小结 o网页中嵌入脚本的三种方式网页中嵌入脚本的三种方式n使用使用标签标签n外部外部*.js文件文件n事件属性事件属性o函数定义和调用函数定义和调用n定义：定义：function 函数名函数名()n调用：一般通过对象的事件属性调用，如调用：一
29、般通过对象的事件属性调用，如:onClick=函数名函数名()oparseInt()和和 parseFloat()函数将字符串分别转函数将字符串分别转换为整型和小数换为整型和小数oString对象的对象的indexOf()方法用于查找子字符串方法用于查找子字符串 oDate的的getxxx()方法用于获得日期和时间方法用于获得日期和时间o试编写试编写JavaScript脚本程序，嵌入到脚本程序，嵌入到HTML网页中，网页中，实现简单计算器的功能，界面如图所示：实现简单计算器的功能，界面如图所示：o提示：提示：n定义一个函数用来产生计算结果，并给相应的文本框赋值定义一个函数用来产生计算结果，并给
30、相应的文本框赋值n具体运算符可通过传递参数来控制。具体运算符可通过传递参数来控制。作业作业(函数定义与使用函数定义与使用)实训三实训三 JavaScript基本应用基本应用o实训目的实训目的n通过本次训练，使学生熟悉通过本次训练，使学生熟悉JavaScript脚本语言的基本语法，脚本语言的基本语法，掌握掌握JavaScript变量、表达式的使用，掌握变量、表达式的使用，掌握String、Date、Math脚本对象的常用方法。脚本对象的常用方法。o实训内容实训内容n设计一个简单的计算器，实现简单的加、减、乘、除运算，其设计一个简单的计算器，实现简单的加、减、乘、除运算，其运算功能由运算功能由JavaScript脚本语言程序来实现。脚本语言程序来实现。nJavaScript脚本以独立脚本文件的形式保存。脚本以独立脚本文件的形式保存。o实训要求实训要求n总结在实训过程中遇到的问题总结在实训过程中遇到的问题