《JavaScript基础PPT课件》由会员分享，可在线阅读，更多相关《JavaScript基础PPT课件（66页珍藏版）》请在金锄头文库上搜索。
1、 JavaScript 基础2021/3/91什么是JavaScript JavaScript 是一种脚本语言提供用户交互 动态更改内容 数据验证 2021/3/92将JavaScript嵌入网页 可以将 JavaScript 语句插入 HTML 文档，方式 如下：使用 标签将语句嵌入文档将 JavaScript 源文件链接到 HTML 文档中2021/3/93使用 Script 标签JavaScript 代码document.write(欢迎来到 JavaScript 世界);尽情享受学习的快乐! 脚本代码设置语言2021/3/94使用外部 JS 文件 外部 JavaScript 文件可以链
2、接到 HTML 文档中SCRIPT 标签的 SRC（源文件）属性可用于包括此外部文件 2021/3/95使用外部 JS 文件 JavaScript 代码代码 (test.htm)使用外部文件以上文本是通过访问外部 JavaScript 文件显示的 document.write(喂！你好吗喂！你好吗?)JavaScript 代码代码 (test.js )2021/3/96变量 变量名必须以字母或下划线（_）开头变量可以包含数字、从 A 至 Z 的大小写字母JavaScript 区分大小写，即变量 myVar、 myVAR 和 myvar 是不同的变量2021/3/97声明变量 v var ar
3、a a; ; “var” “var” 用于声明变量的关键字用于声明变量的关键字 “a” “a” 变量名变量名同时声明和初始化变量同时声明和初始化变量v var a= 10;ar a= 10;a = 10;声明变量声明变量声明多个变量声明多个变量v var x, y, z = 10;ar x, y, z = 10;赋值赋值2021/3/98声明变量 使用变量var var x;x=prompt(淘宝网竟拍，请出一口价,1) ;document.write(拍卖价格+x+) / +用来连接多个字符串document.write(恭喜您，您以最高价拍卖成功！);alert(欢迎下次光临！);定义变量
4、赋 值输 出prompt(“提示信息”,”默认值”)将弹出提示对话框，接受用户的输入。点击确定返回输入的字符串，点击取消反馈空字符串。2021/3/99变量 a、b 和 c 只能在其各自的函数中被访问 变量的作用域脚本脚本函数function1局部变量a函数function2局部变量b函数function3局部变量c可由函数 1、函数 2 和函数 3 访问全局变量 gg全局变量不需要以 var 关键字进行声明，但局部变量则必须以此关键字来声明2021/3/910浮点型浮点型字面量至少必须含有一个数字。此数字可包含小数点或采用科学记数法表示的数字。科学记数法中的整数可以是正整数(+) 或负整数(
5、-)，指数(e) 表示“十次幂”。例如 10.24、1.20e+22、4E-8、.1815 等。常量整型整型浮点型浮点型字符串型字符串型字字 符符说 明明示示 例例b退格符alert(“这是第一句 b 这是第二句”)f换页符alert(“这是第一局 f 这是第二句”)n换行符alert(“这是第一局 n 这是第二句”)r回车符alert(“这是第一局 r 这是第二句”)t制表符 alert(“这是第一局 t 这是第二句”)和C语言一样，js也有转义字符，常用的就是： “ n ”2021/3/911数据类型数据数据类型型说 明明示示 例例数字型整数或实数487, 25.95逻辑型或布尔型执行逻辑
6、运算tru或 false 字符串型一组字符“Hello”空特殊关键字，表示不存在的值。 null2021/3/912 var x=100;var y;var z;document.write(竞拍SONY数码相机 600万像素 +x+$起价);y=prompt(加多少银子？,1); z=x+y; alert(您最终的出价n+z+$); /”n”用于换行显示 Prompt函数返回输入的字符串“+”号的用法-1 10020 ? bug2002021/3/913 var x=100;var y;var z;document.write(竞拍SONY数码相机 600万像素 +x+$起价);y=prom
7、pt(加多少银子？,1); z=x+parseFloat( y ); alert(您最终的出价n+z+$); /”n”用于换行显示 parseFloat( )函数将字符串转换为float数据 parseInt( )函数将字符串转换为int数据如果转换失败，返回NaN值(not a number)“+”号的用法-22021/3/914运算符 运算符对一个或多个变量或值（操作数）进行运算，并返 回一个新值根据所执行的运算，运算符可分为以下类别：算术运算符比较运算符逻辑运算符2021/3/915运算符运算符说 明示 例+加a = 5 + 8-减a = 8 - 5/除a = 20 / 5*乘a = 5
8、*19%取模两个数相除的余数10 % 3 = 1+一元自加。该运算符带一个操作数，将操作数的值加 1。返回的值取决于 + 运算符位于操作数的前面或是后面将返回 x 自加运算后的值。x+ 将返回 x 自加运算前的值- -一元自减。该运算符只带一个操作数。返回的值取决于 - 运算符位于操作数的前面或是后面-x 将返回 x 自减运算后的值。x- 将返回 x 自减运算前的值2021/3/916算术运算符-1num1num2result2021/3/917function calcu( )var numb1= document.calc.num1.value;var numb2= document.ca
9、lc.num2.value;var total=parseFloat(numb1)*parseFloat(numb2);document.calc.result.value=total; 计算总价并显示添加单击事件，单击按钮时调用“calcu()” 函数算术运算符-2获取表单中输入的数据：document.表单名.表单元素名.value定义calcu( )计算函数,实现两个数相乘的功能.定义函数的语法： function 函数名(参数列表) /JavaScript语句； 2021/3/918比较运算符比较运算符 2-1 运算符运算符说 明明示示 例例= = 等于。如果两个操作数相等，则返回真。
10、a = = b!=不等于。如果两个操作数不相等，则返回真。Var2 != 5大于。如果左边的操作数大于右边的操作数，则返回真。Var1 var2小于。如果左边的操作数小于右边的操作数，则返回真。Var2 var1=小于等于。如果左边的操作数小于或等于右边的操作数，则返回真。Var2 = 4Var2 =大于等于。如果左边的操作数大于或等于右边的操作数，则返回真。Var1 = 5Var1 = var22021/3/919function calcu()var numb1= document.calc.num1.value;var numb2= document.calc.num2.value;va
11、r total= parseFloat(numb1)*parseFloat(numb2);document.calc.result.value=total; if (total500) alert(购买总价超过500n支付时将赠送超级Q币2枚！);.其他代码略，同上例比较运算符购买总价超过500，赠送超级Q币2枚！ 2021/3/920运算符逻辑运算符运算符运算符值说 明明与 ( &)expr1 & expr2只有当 expr1 和 expr2 同为真时，才返回真。否则，返回假。或 ( | )expr1 | expr2如果其中一个表达式为真，或两个表达式同为真，则返回真。否则，返回假。非 (!
12、)!expr如果表达式为真，则返回假。如果为假，则返回真。2021/3/921function calcu()var numb1= document.calc.num1.value;var numb2= document.calc.num2.value;var total= parseFloat(numb1)*parseFloat(numb2);document.calc.result.value=total; if (total500) &(total1000) &(total2000) alert(购买总价超过2000n请直接与贵宾台联系！);.其他代码略，同上例逻辑运算符5001000
13、之间，赠送超级Q币两枚；10002000之间，赠送IBM智能鼠标一只；2000以上，直接与贵宾台联系。2021/3/922条件语句用于测试条件。if(条件) JavaScript代码; 语法：语法：if 语句 2-1如果要执行多个语句，必须将这些语句放在一对大括号 ( ) 内。但如果只要执行一个语句，则可以省略大括号2021/3/923function calcu()var numb1= document.calc.num1.value;var numb2= document.calc.num2.value;if (numb1!=) & (numb2!=) var total= parseFl
14、oat(numb1)*parseFloat(numb2); document.calc.result.value=total; if (total500) &(total1000) &(total2000) alert(购买总价超过2000n请直接与贵宾台联系！); .其他代码略，同上例If语句 2-2如果输入框中的数据用户漏填了，出现NaN的 bug 为什么呢?2021/3/924if else 语句 2-1if(条件) /JavaScript代码;else /JavaScript代码;语法：语法：2021/3/925function calcu()var numb1= document.c
15、alc.num1.value;var numb2= document.calc.num2.value;if (numb1!=) & (numb2!=) var total= parseFloat(numb1)*parseFloat(numb2); document.calc.result.value=total; if (total500) &(total1000) &(total2000) alert(购买总价超过2000n请直接与贵宾台联系！); else alert(购买数量或竞拍价格没有填写n请重新输入！);If-else语句 2-2提示没有填写购买数量或者竞拍价格?2021/3/92
16、6if (条件1) if (条件2) /JavaScript代码; 语法：语法：嵌套 if 语句 2-12021/3/927function calcu()var numb1= document.calc.num1.value;var numb2= document.calc.num2.value;if (numb1!=) & (numb2!=) if (parseFloat(numb1)0) alert(竞拍价格不能小于零！n请重填); return; /函数返回，不再执行后面的代码 if (parseFloat(numb2)0) alert(购买数量不能小于零！n请重填); return;
17、 var total= parseFloat(numb1)*parseFloat(numb2); document.calc.result.value=total; .嵌套If语句 2-2购买数量无意中输入负数，出现 bug 怎么办?2021/3/928switch 语句 2-1switch (表达式) case 常量1 : JavaScript语句; break; case 常量2 : JavaScript语句; break; . default : JavaScript语句;语法：语法：2021/3/929练 习银行转帐 打6折电话支付 打7折邮政汇款 打8折Q币支付 打9折2021/3/
18、930 . var f=document.calc.pay.value; /支付方式代号 var grade; /折扣率 var total= parseFloat(numb1)*parseFloat(numb2); switch(parseInt(f) case 1: grade=0.6 ; /打6折优惠 break; case 2: .同理其他方式打7折、八折 case 4: grade=0.9 ; /打9折优惠 break;default: alert(请重新选择支付方式！); return; var money=total*grade; /根据折扣率，计算实际总价 document.c
19、alc.result.value=money; alert(您享受了+grade*10+折优惠！); .2021/3/931数组 4-1声明数组 var var 数组名数组名 = = new Arraynew Array( (数组大小数组大小);); 例：例： varvar emp = emp = new Array(3)new Array(3)添加元素 emp0 = “AA;emp0 = “AA; emp1 = “BB; emp1 = “BB; emp2 = “CC; emp2 = “CC;AABBCCemp 也可以声明数组并赋初值： 例：例： var emp=new Array(“AA”，
20、“BB”，“CC”)；2021/3/932使用数组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+);数组 4-2 2021/3/933数组 4-3 常用属性 length ：返回数组中元素的个数常用方法方方 法法说 明明join将数组中的元素组合成字符串reverse颠倒数组元素的顺序，使第一个元素
21、成为最后一个，而最后一个元素成为第一个sort对数组元素进行排序2021/3/934var 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+);数组排序 4-2 2021/3/935循环 for循环do-whilewhile 2021/3/936q for循环例：var i;for (i=0;
22、 i10; i+) / 语句; for 循环如何实现？2021/3/937for 循环For 循环演示document.write(打印金字塔直线);for (var i= 0; i100; i=i+5) document.write();2021/3/938qwhile循环 while(循环条件) /语句； qdowhile循环 do /语句； while(循环条件);while和dowhile循环先执行，后判断循环条件先执行，后判断循环条件2021/3/939输入一个字符，直到N停止，用哪个循环2021/3/940while和dowhile循环 .myfont font-size:150;
23、 color:#c99c96; font-family:Webdings /产生埃及图像的特殊字体 document.write(每个字符都对应一个漂亮的埃及图像);do var c = prompt(输入一个字符，输入N 或n停止,A) ; document.write (+c+); while (c !=N & c !=n);2021/3/941JavaScript 函数内置函数 eval 函数： 用于计算字符串表达式的值 isNaN 函数：用于验证参数是否为 NaN（非数字）2021/3/942JavaScript 函数JavaScript 代码var str1=prompt(“输入一个
24、表达式，我给您计算,1+1);var result=eval(str1);document.write(str1+=+result);var x = prompt(输入一些数据,0);if (isNaN(x) alert (x + 不是一个数字);else alert (x + 是一个数字);2021/3/943自定义函数定义函数：function 函数名( 参数1,参数2， ) 语句; 调用函数：函数调用一般和表单元素的事件一起使用，调用格式为：事件名“函数名” ;function sum ( one, two) var result = one + two; return result;表
25、示单击此按钮时，调用函数sum( )执行2021/3/944函数的应用 num1num2result2021/3/945定义函数 JavaScript 代码 function compute(op) var num1,num2; num1=parseFloat(document.myform.num1.value); num2=parseFloat(document.myform.num2.value); if (op=+)document.myform.result.value=num1+num2 ; if (op=-)document.myform.result.value=num1-nu
26、m2 ; if (op=*)document.myform.result.value=num1*num2 ; if (op=/ & num2!=0)document.myform.result.value=num1/num2 ; 定义函数compute( )，完成计算的功能。op参数代表运算符号 2021/3/946调用函数 第一个数 第二个数 计算结果 2021/3/947JavaScript 对象简介 2-1对象是属性和/方法的组合属性是对象所拥有的一组外观特征，一般为名词 方法是对象可以执行的功能，一般为动词 例如：汽车Ferrari对象：汽车属性：型号：法拉利颜色：绿色方法：前进、刹车
27、、倒车2021/3/948JavaScript 对象简介2-2q三类对象三类对象 浏览器对象浏览器对象浏览器对象浏览器对象 脚本对象脚本对象脚本对象脚本对象 HTML HTML 对象对象对象对象 l浏览器窗口windowl文档 documentlurl地址等lString字符串对象lDate日期对象lMath数学对象等 各种HTML标签:l段落l图片l超链接等2021/3/949String 对象 3-1创建字符串有两种不同方法 ：使用 var 语句 varvar newstr = “ newstr = “这是我的字符串这是我的字符串 创建 String 对象varvar newstr = n
28、ewstr = new Stringnew String (“ (“这是我的字符串这是我的字符串) 2021/3/950String 对象 3-2名名 称称说 明明属性length返回字符串的长度 方法big( )增大字符串文本 blink( )使字符串文本闪烁（IE 浏览器不支持）bold( )加粗字符串文本 fontcolor( )确定字体颜色 italics( )用斜体显示字符串 indexOf(“子字符串”，起始位置 ) 查找子字符串的位置strike( )显示加删除线的文本 sub( )将文本显示为下标 toLowerCase( )将字符串转换成小写 toUpperCase( )将字
29、符串转换成大写 语法：indexOf(“查找的子字符串”，查找的起始位置)返回子字符串所在的位置，如果没找到，返回 1例如：var xvar y=“abcdefg”;x=y.indexOf(“c” , 0 ); /返回结果为2，起始位置是02021/3/951 function checkEmail( ) var e=document.myform.email.value; if (e.length=0) /检测长度是否为0，即是否为空 alert(电子邮件不能为空!); return ; if (e.indexOf(,0)=-1) /检测是否包含”符号 alert(电子邮件格式不正确n必须包
30、含符号！); return ; if (e.indexOf(.,0)=-1) /检测是否包含”.”符号 alert(电子邮件格式不正确n必须包含.符号！); return ; document.write(恭喜您！，注册成功！欢迎进入古城热线！); 检查电子邮件emailemail是否包含“”和”.”String 对象 3-3返回结果-1表示没找到“”字符2021/3/952Math 对象 2-1名称名称 说 明明属性PI 的值， 约等于 3.1415LN1010 的自然对数的值，约等于 2.302EEuler 的常量的值，约等于 2.718。Euler 的常量用作自然对数的底数abs(y)返
31、回 y 的绝对值sin (y) 返回 y 的正弦，返回值以弧度为单位。cos (y)返回 y 的余弦，返回值以弧度为单位tan (y)返回 y 的正切，返回值以弧度为单位 min (x, y)返回 x 和 y 两个数中较小的数 max (x, y)返回 x 和 y 两个数中较大的数 random返回0-1的随机数方法round (y)四舍五入取整sqrt (y)返回 y 的平方根Math.random( ) ：产生：产生01的随机小数的随机小数Math.round( )：四舍五入取整，如：四舍五入取整，如9.34 取整为取整为92021/3/953Math 对象 2-2假定随机产生的数字i=3
32、，上述代码即为：显示第三幅图片（3.jpg） 如何实现？每隔2秒刷新网页2021/3/954Math 对象自动刷新 document.write(2秒自动刷新，随机显示图片); var i=0; i=Math.round(Math.random( )*8+1); document.write(); 2021/3/955Date 对象10-1 Date 对象存储的日期为自 1970 年 1 月 1 日 00:00:00 以来的毫秒数var 日期对象 = new Date (年、月、日等参数)例：var mydate=new Date( “July 29, 1998,10:30:00 ”) 如果没
33、有参数，表示当前日期和时间例：var today = new Date( ) 2021/3/956Date 对象10-2Data 方法的分组： 方法分方法分组说 明明 setxxx这些方法用于设置时间和日期值getxxx 这些方法用于获取时间和日期值Toxxx这些方法用于从 Date 对象返回字符串值parsexxx & UTCxx这些方法用于解析字符串2021/3/957Date 对象10-3用作 Date 方法的参数的整数： 值整整 数数 Seconds 和和 minutes0 至至 59 Hours0 至至 23 Day0 至至 6（星期几）（星期几） Date1 至至 31（月份中的天
34、数）（月份中的天数） Months0 至至 11（一月至十二月）（一月至十二月） 2021/3/958Date 对象10-4Set 方法：方法方法说明明setDate设置 Date 对象中月份中的天数，其值介于 1 至 31 之间。setHours设置 Date 对象中的小时数，其值介于 0 至 23 之间。setMinutes设置 Date 对象中的分钟数，其值介于 0 至 59 之间。 setSeconds设置 Date 对象中的秒数，其值介于 0 至 59 之间。 setTime设置 Date 对象中的时间值。 setMonth设置 Date 对象中的月份，其值介于 1 至 12 之间。
35、2021/3/959Date 对象10-5Get 方法：方法方法说明明getDate返回 Date 对象中月份中的天数，其值介于 1 至 31 之间getDay返回 Date 对象中的星期几，其值介于 0 至 6 之间getHours返回 Date 对象中的小时数，其值介于 0 至 23 之间getMinutes返回 Date 对象中的分钟数，其值介于 0 至 59 之间getSeconds返回 Date 对象中的秒数，其值介于 0 至 59 之间getMonth返回 Date 对象中的月份，其值介于 0 至11 之间getFullYear返回 Date 对象中的年份，其值为四位数getTim
36、e返回自某一时刻（1970 年 1 月 1 日）以来的毫秒数2021/3/960Date 对象10-6方方 法法说 明明 ToGMTString使用格林尼治标准时间 (GMT) 数据格式将 Date 对象转换成字符串表示ToLocaleString使用当地时间格式将 Date 对象转换成字符串表示To 方法：Parse 方法和 UTC 方法 方方 法法说 明明Date.parse (date string )用日期字符串表示自 1970 年 1 月 1 日以来的毫秒数 Date.UTC (year, month, day, hours, min., secs. )Date 对象中自 1970
37、年 1 月 1 日以来的毫秒数 2021/3/961var now= new Date( );var hour = now.getHours( );if (hour=0 & hour 12 & hour18 & hour 24) document.write(晚上好!);document.write(今天日期:+now.getYear()+年“ +(now.getMonth( )+1)+月+now.getDate()+日);document.write(现在时间:+now.getHours()+点+now.getMinutes( )+分); Date对象 10-7获得当前日期和时间获得小时，即
38、当前是几点判断上午、下午还是晚上月份数字011，注意12021/3/962Date对象 10-8setTimeout的用法： setTimeout（“调用的函数”,”定时的时间”） 例： var myTimesetTimeout（”disptime( )”,1000）; clearTimeout（myTime）;本例的时间可以采用定时显示，使用定时器函数，每隔1秒调用disptime( )函数显示时间每隔1000毫秒调用函数disptime( )执行关闭定时器2021/3/963Date 对象10-8JavaScript 代码function disptime( ) var time = ne
39、w Date( ); /获得当前时间 var hour = time.getHours( ); /获得小时、分钟、秒 var minute = time.getMinutes( ); var second = time.getSeconds( ); var apm=AM; /默认显示上午: AM if (hour12) /按12小时制显示 hour=hour-12; apm=PM ; if (minute 10) /如果分钟只有1位，补0显示 minute=0+minute; if (second 10) /如果秒数只有1位，补0显示 second=0+second;document.myfo
40、rm.myclock.value= hour+:+minute+:+ second+ +apm;var myTime = setTimeout(disptime( ),1000);无边框的文本框myclock使用定时器函数，每隔1秒调用disptime( )函数刷新显示获得小时、分钟、秒根据12小时制调整时间和AM/PM标志确保分钟和秒显示位数为 2 位var myTime = setTimeout(disptime( ),1000);设置定时器每隔1秒（1000毫秒），调用函数disptime( )执行，刷新时钟显示 2021/3/964Date对象 10-10设置样式：无边框的文本框Onload ( ) 事件，页面加载就调用函数：disptime（显示时间）2021/3/965放映结束 感谢各位的批评指导！ 谢谢 谢！谢！让我们共同进步2021/3/966
