01 JavaScript基本语法(精品).ppt

《01 JavaScript基本语法(精品).ppt》由会员分享，可在线阅读，更多相关《01 JavaScript基本语法(精品).ppt（43页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、JavaScriptJavaScript基本语法基本语法本章目标本章目标p什么是什么是 JavaScriptJavaScriptp如何将如何将 JavaScript JavaScript 嵌入到嵌入到 HTML HTML 中中p理解变量、数据类型和运算符理解变量、数据类型和运算符p分支结构分支结构p数组数组p循环结构循环结构什么是什么是JavaScript pJavaScript 是一种脚本是一种脚本语言语言p提供用户交互提供用户交互 p动态更改内容动态更改内容 p数据验证数据验证 如何将如何将JavaScript嵌入网页嵌入网页 p可以将可以将 JavaScript 语句插入语句插入 HTM

2、L 文档，文档，方式如下：方式如下：n使用使用 标签将语句嵌入文档标签将语句嵌入文档n将将 JavaScript 源文件链接到源文件链接到 HTML 文档中文档中使用使用 Script 标签标签 script Language /JavaScript Appears here./JavaScript Appears here.alert(alert(这是第一个这是第一个JavaScriptJavaScript例子例子!);!);alert(alert(欢迎你进入欢迎你进入JavaScriptJavaScript世界世界!);!);alert(alert(今后我们将共同学习今后我们将共同学习Ja

3、vaScriptJavaScript知识！知识！););脚本代码脚本代码设置语言设置语言scriptscript标签标签使用外部使用外部 JS 文件文件 p外部外部 JavaScript 文件可以链接到文件可以链接到 HTML 文文档中档中pscript标签的标签的 src（源文件）属性（源文件）属性可用于链接可用于链接外部外部js文件文件 使用外部 JS 文件 使用外部文件使用外部文件SCRIPT SRC=以上文本是通过访问外部以上文本是通过访问外部 JavaScript JavaScript 文件显示的文件显示的 document.writedocument.write(喂！你好吗喂！你好

4、吗?);?);JavaScript JavaScript 代码代码 (test.htmtest.htm)JavaScript JavaScript 代码代码 (test.jstest.js)变量 p变量名必须以字母或下划线（变量名必须以字母或下划线（_）开头）开头p变量可以包含数字、从变量可以包含数字、从 A 至至 Z 的大小写字母的大小写字母pJavaScript 区分大小写，即变量区分大小写，即变量 myVar、myVAR 和和 myvar 是不同的变量是不同的变量回顾：变量的主要作用是存取数据、提供存放信息回顾：变量的主要作用是存取数据、提供存放信息的容器。对于变量必须明确变量的命名、变

5、量的类的容器。对于变量必须明确变量的命名、变量的类型、变量的声明及其变量的作用域。型、变量的声明及其变量的作用域。声明变量声明变量varvar a;a;varvar x,y,z=10;x,y,z=10;varvar a=10;a=10;a=10;a=10;p声明变量声明变量p声明多个变量声明多个变量p赋值赋值p同时声明和初始化变量同时声明和初始化变量 varvar 用于声明变量的关键字用于声明变量的关键字用于声明变量的关键字用于声明变量的关键字 a a 变量名变量名变量名变量名声明变量声明变量 使用变量使用变量SCRIPT LANGUAGE=varvar x;x;x=promptx=promp

6、t(淘宝网竟拍，请出一口价淘宝网竟拍，请出一口价,1);,1);/+/+用来连接多个字符串用来连接多个字符串document.writedocument.write(拍卖价格拍卖价格+x+);+x+);document.writedocument.write(恭喜您，您以最高价拍卖成功！恭喜您，您以最高价拍卖成功！););alert(alert(欢迎下次光临！欢迎下次光临！););定义变量定义变量变量赋值变量赋值可由函数可由函数 1 1、函数、函数 2 2 和函数和函数 3 3 访问访问变量变量 a a、b b 和和 c c 只能只能在其各自的函数中在其各自的函数中被访问被访问 变量的作用域变

7、量的作用域函数函数function1function1局部变量局部变量a a函数函数function2function2局部变量局部变量b b脚本脚本函数函数function3function3局部变量局部变量c c全局变量全局变量 gggg 全局变量不需要以全局变量不需要以 varvar 关键字进行声明，但局部变量则必须关键字进行声明，但局部变量则必须以此关键字来声明。以此关键字来声明。ScriptScript区域区域 浮点型浮点型字面量至少必须含有一个数字。此数字可包含小数点或浮点型浮点型字面量至少必须含有一个数字。此数字可包含小数点或采用科学记数法表示的数字。科学记数法中的整数可以是正整

8、数采用科学记数法表示的数字。科学记数法中的整数可以是正整数(+)(+)或负整或负整数数(-)(-)，指数，指数(e)(e)表示表示 十次幂十次幂。例如。例如 10.2410.24、1.20e+221.20e+22、4E-84E-8、.1815 .1815 等。等。常量 p整型整型p浮点型浮点型p字符串型字符串型和和C C语言一样，语言一样，jsjs也有转义字符，常用的就是：也有转义字符，常用的就是：n n 常量 字字 符符 说说 明明 示示 例例 b 退格符退格符 alert(这这是第一句是第一句 b b 这这是第二句是第二句)f 换页换页符符 alert(这这是第一句是第一句f f 这这是第

9、二句是第二句)n 换换行符行符 alert(这这是第一句是第一句n n 这这是第二句是第二句)r 回回车车符符 alert(这这是第一句是第一句r r 这这是第二句是第二句)t 制表符制表符 alert(这这是第一句是第一句t t 这这是第二句是第二句)数据类型数据类型数据类型说 明示 例数字型数字型整数或整数或实实数数487,25.95487,25.95逻辑逻辑型或布型或布尔尔型型执执行行逻辑逻辑运算运算truetrue或或 false false 字符串型字符串型一一组组字符字符HelloHello空空特殊关特殊关键键字，表示不存在的字，表示不存在的值值。 varvar x=100;x=1

10、00;varvar y;y;varvar z;z;document.writedocument.write(竞拍竞拍SONYSONY数码相机数码相机 600600万像素万像素+x+$+x+$起价起价););y=prompty=prompt(加多少银子？加多少银子？,1);,1);z=x+yz=x+y;alert(alert(您最终的出价您最终的出价n+z+$n+z+$);/n);/n用于换行显示用于换行显示 PromptPrompt函数返回输入的字符串函数返回输入的字符串+号的用法号的用法-1-1+字符串相连：字符串相连：100+200100+200整数和字符串的连整数和字符串的连接操作接操作

11、 varvar x=100;x=100;varvar y;y;varvar z;z;document.writedocument.write(竞拍竞拍SONYSONY数码相机数码相机 600600万像素万像素+x+$+x+$起价起价););y=prompty=prompt(加多少银子？加多少银子？,1);,1);z=x+parseFloatz=x+parseFloat(y);(y);alert(alert(您最终的出价您最终的出价n+z+$n+z+$);/n);/n用于换行显示用于换行显示 parseFloatparseFloat()()函数将字符串转换为函数将字符串转换为floatfloat

12、数据数据 parseIntparseInt()()函数将字符串转换为函数将字符串转换为intint数据数据如果转换失败，返回如果转换失败，返回NaNNaN值值(not a number)(not a number)+号的用法号的用法-2-2整数间的算数运算整数间的算数运算运算符运算符 p运算符对一个或多个变量或值（操作数）进行运算，并返运算符对一个或多个变量或值（操作数）进行运算，并返 回一个新值回一个新值p根据所执行的运算，运算符可分为以下类别：根据所执行的运算，运算符可分为以下类别：n算术运算符算术运算符n比较运算符比较运算符n逻辑运算符逻辑运算符算术运算符算术运算符运算符说 明示 例备

13、注+加加a=5+8a=5+8-减减a=8-5a=8-5/除除a=20/5a=20/5*乘乘a=5*19a=5*19%取模两个数相除的余数取模两个数相除的余数10%3=110%3=1+一一元元自自加加。该该运运算算符符带带一一个个操操作作数数，将将操操作作数数的的值值加加 1 1。返返回回的的值值取取决决于于 +运运算算符符位位于于操操作作数数的的前前面面或或是是后后面面+x+x，x+x+x+x将将返返回回 x x 自自加加运运算算后的后的值值。x+x+将将返返回回 x x 自自加加运运算前的算前的值值-一一元元自自减减。该该运运算算符符只只带带一一个个操操作作数数。返返回回的的值值取取决决于于

14、 -运运算算符符位位于于操操作作数数的的前前面面或或是后面是后面-x-x，x-x-x-x 将将返返回回 x x 自自减减运运算后的算后的值值。x-x-将将返返回回 x x 自自减减运运算前的算前的值值算术运算符算术运算符num1num1num2num2resultresult实现步骤：实现步骤：1.1.编写编写htmlhtml页面代码页面代码2.2.指定各个文本框的名称指定各个文本框的名称3.3.编写脚本代码编写脚本代码4.4.浏览并调试浏览并调试function function calcucalcu()()varvar numb1=document.calc.num1.value;numb

15、1=document.calc.num1.value;varvar numb2=document.calc.num2.value;numb2=document.calc.num2.value;varvar total=parseFloat(numb1)*parseFloat(numb2);total=parseFloat(numb1)*parseFloat(numb2);document.calc.result.value=totaldocument.calc.result.value=total;计算总价并显示计算总价并显示INPUT 添加单击事件，单击按钮时调用添加单击事件，单击按钮时调用

16、 calcucalcu()()函数函数算术运算符算术运算符获取表单中输入的数据：获取表单中输入的数据：document.document.表单名表单名.表单元素名表单元素名.value.value定义定义calcucalcu()()计算函数计算函数,实现两个数相实现两个数相乘的功能乘的功能.定义函数的语法：定义函数的语法：function function 函数名函数名(参数列表参数列表)/JavaScript /JavaScript语句；语句；比较运算符比较运算符运算符说 明示 例=等于。等于。如果两个操作数相等，如果两个操作数相等，则则返回真。返回真。a=ba=b!=!=不等于。不等于。如

17、果两个操作数不相等，如果两个操作数不相等，则则返回真。返回真。Var2!=5Var2!=5 大于。大于。如如果果左左边边的的操操作作数数大大于于右右边边的的操操作作数数，则则返回真。返回真。Var1 var2Var1 var2 小于。小于。如如果果左左边边的的操操作作数数小小于于右右边边的的操操作作数数，则则返回真。返回真。Var2 var1Var2 var1=小于等于。小于等于。如如果果左左边边的的操操作作数数小小于于或或等等于于右右边边的的操操作作数，数，则则返回真。返回真。Var2=4Var2=4Var2=var1Var2=大大于于等等于于。如如果果左左边边的的操操作作数数大大于于或或等

18、等于于右右边边的操作数，的操作数，则则返回真。返回真。Var1=5Var1=5Var1=var2Var1=function function calcucalcu()()varvar numb1=document.calc.num1.value;numb1=document.calc.num1.value;varvar numb2=document.calc.num2.value;numb2=document.calc.num2.value;varvar total=parseFloat(numb1)*parseFloat(numb2);total=parseFloat(numb1)*pars

19、eFloat(numb2);document.calc.result.value=totaldocument.calc.result.value=total;if(total500)if(total500)alert(alert(购买总价超过购买总价超过500n500n支付时将赠送超级支付时将赠送超级Q Q币币2 2枚！枚！););.其他代码略，同上例其他代码略，同上例比较运算符比较运算符条件成立时执行条件成立时执行逻辑运算符逻辑运算符p逻辑运算符逻辑运算符运算符值说 明与与(&)expr1&expr2只只有有当当 expr1 和和 expr2 同同为为真真时时，才才返返回真回真(true)(

20、true)。否。否则则，返回假，返回假(false)(false)。或或(|)expr1|expr2如如果果其其中中一一个个表表达达式式为为真真，或或两两个个表表达达式式同同为为真真，则则返返回回真真(true)(true)。否否则则，返返回回假假(false)(false)。非非(!)!expr如如果果表表达达式式为为真真，则则返返回回假假(false)(false)。如如果果为为假，假，则则返回真返回真(true)(true)。function function calcucalcu()()varvar numb1=document.calc.num1.value;numb1=docume

21、nt.calc.num1.value;varvar numb2=document.calc.num2.value;numb2=document.calc.num2.value;varvar total=parseFloat(numb1)*parseFloat(numb2);total=parseFloat(numb1)*parseFloat(numb2);document.calc.result.value=totaldocument.calc.result.value=total;if(total500)&(total500)&(total1000)&(total1000)&(total20

22、00)if(total2000)alert(alert(购买总价超过购买总价超过2000n2000n请直接与贵宾台联系！请直接与贵宾台联系！););.其他代码略，同上例其他代码略，同上例逻辑运算符逻辑运算符5005001000 1000 之间，赠送超级之间，赠送超级Q Q币两枚；币两枚；1000100020002000之间，赠送之间，赠送IBMIBM智能鼠标一只；智能鼠标一只；20002000以上，直接与贵宾台联系。以上，直接与贵宾台联系。p条件语句用于测试条件。条件语句用于测试条件。if(if(条件条件)JavaScriptJavaScript代码代码;语法：语法：if if 语句语句 2-

23、12-1 如果要执行多个语句，必须将这些语句放在一对大括号如果要执行多个语句，必须将这些语句放在一对大括号 ()内。但如果只要执行一个语句，则可以省略大括号内。但如果只要执行一个语句，则可以省略大括号function function calcucalcu()()varvar numb1=document.calc.num1.value;numb1=document.calc.num1.value;varvar numb2=document.calc.num2.value;numb2=document.calc.num2.value;if(numb1!=)&(numb2!=)if(numb1!

24、=)&(numb2!=)varvar total=parseFloat(numb1)*parseFloat(numb2);total=parseFloat(numb1)*parseFloat(numb2);document.calc.result.value=totaldocument.calc.result.value=total;if(total500)&(total500)&(total1000)&(total1000)&(total2000)if(total2000)alert(alert(购买总价超过购买总价超过2000n2000n请直接与贵宾台联系！请直接与贵宾台联系！););.其

25、他代码略，同上例其他代码略，同上例IfIf语句语句 2-22-2如果输入框中的数据用户漏填了，如果输入框中的数据用户漏填了，出现出现NaNNaN的的 bug bug 为什么呢为什么呢?if else if else 语句语句 2-12-1if(if(条件条件)/JavaScript /JavaScript代码代码;elseelse /JavaScript /JavaScript代码代码;语法：语法：function function calcucalcu()()varvar numb1=document.calc.num1.value;numb1=document.calc.num1.valu

26、e;varvar numb2=document.calc.num2.value;numb2=document.calc.num2.value;if(numb1!=)&(numb2!=)if(numb1!=)&(numb2!=)varvar total=parseFloat(numb1)*parseFloat(numb2);total=parseFloat(numb1)*parseFloat(numb2);document.calc.result.value=totaldocument.calc.result.value=total;if(total500)&(total500)&(total1

27、000)&(total1000)&(total2000)if(total2000)alert(alert(购买总价超过购买总价超过2000n2000n请直接与贵宾台联系！请直接与贵宾台联系！););ElseElse alert(alert(购买数量或竞拍价格没有填写购买数量或竞拍价格没有填写nn请重新输入！请重新输入！););If-elseIf-else语句语句 2-22-if(if(条件条件1)1)if(if(条件条件2)2)/JavaScript /JavaScript代码代码;语法语法：嵌套嵌套 if if 语句语句 2-12-function function calcucalcu()

28、()varvar numb1=document.calc.num1.value;numb1=document.calc.num1.value;varvar numb2=document.calc.num2.value;numb2=document.calc.num2.value;if(numb1!=)&(numb2!=)if(numb1!=)&(numb2!=)if(parseFloat(numb1)0)if(parseFloat(numb1)0)alert(alert(竞拍价格不能小于零！竞拍价格不能小于零！nn请重填请重填););return;/return;/函数返回，不再执行后面的代码

29、函数返回，不再执行后面的代码 if(parseFloat(numb2)0)if(parseFloat(numb2)0)alert(alert(购买数量不能小于零！购买数量不能小于零！nn请重填请重填););return;return;varvar total=parseFloat(numb1)*parseFloat(numb2);total=parseFloat(numb1)*parseFloat(numb2);document.calc.result.value=totaldocument.calc.result.value=total;.嵌套嵌套IfIf语句语句 2-22-2购买数量无意中

30、输购买数量无意中输入负数，出现入负数，出现 bug bug 怎么办怎么办?switch switch 语句语句 2-12-1switch(switch(表达式表达式)case case 常量常量1:1:JavaScriptJavaScript语句语句;break;break;case case 常量常量2:2:JavaScriptJavaScript语句语句;break;break;.default:default:JavaScript JavaScript语句语句;语法：语法：switchswitch语句语句 2-22-2 .varvar f=document.calc.pay.valuef

31、=document.calc.pay.value;/;/支付方式代号支付方式代号 varvar grade;/grade;/折扣率折扣率 varvar total=parseFloat(numb1)*parseFloat(numb2);total=parseFloat(numb1)*parseFloat(numb2);switch(switch(parseIntparseInt(f)(f)case 1:grade=0.6;/case 1:grade=0.6;/打打6 6折优惠折优惠 break;break;case 2:.case 2:.同理其他方式打同理其他方式打7 7折、八折折、八折cas

32、e 4:grade=0.9;/case 4:grade=0.9;/打打9 9折优惠折优惠 break;break;default:alertdefault:alert(请重新选择支付方式！请重新选择支付方式！););return;return;varvar money=total*grade;/money=total*grade;/根据折扣率，计算实际总价根据折扣率，计算实际总价 document.calc.result.value=moneydocument.calc.result.value=money;alert(alert(您享受了您享受了+grade*10+grade*10+折优惠！

33、折优惠！););.银行转帐银行转帐 打打6 6折折电话支付电话支付 打打7 7折折邮政汇款邮政汇款 打打8 8折折Q Q币支付币支付 打打9 9折折数组（数组（arrayarray对象）对象）arrayarray提供对创建任何数据类型的数组的支持提供对创建任何数据类型的数组的支持arrayObjarrayObj=new Array()=new Array()arrayObjarrayObj=new Array(=new Array(sizesize)arrayObjarrayObj=new Array(=new Array(element0element0,element1element1,.

34、,.,elementNelementN)arrayObjarrayObj :必选项。要赋值为必选项。要赋值为 Array Array 对象的变量名。对象的变量名。Size Size :可选项。数组的大小。由于数组的下标是从零开始，可选项。数组的大小。由于数组的下标是从零开始，创建的元素的下标将从零到创建的元素的下标将从零到 sizesize-1-1。element0,.,element0,.,elementNelementN :可选项。要放到数组中的元素。这将创建可选项。要放到数组中的元素。这将创建 具有具有n n+1 +1 个元素的长度为个元素的长度为 n+1 n+1 的数组。使用该语法时的

35、数组。使用该语法时 必须有一个以上元素。必须有一个以上元素。数组数组p声明数组声明数组 var 数组名数组名 =new Array(数组大小数组大小););例：例：var emp=new Array(3)p添加元素添加元素 emp0=AA;emp1=BB;emp2=CC;AABBCC 也可以声明数组并赋初值：也可以声明数组并赋初值：例：例：var emp=new Array(AA，BB，CC)；使用数组使用数组varvar empemp=new Array(3);=new Array(3);emp0=Ryan emp0=Ryan DiasDias;emp1=Graham Browne;emp1

36、=Graham Browne;emp2=David Greene;emp2=David Greene;document.writedocument.write(数组数组empemp中的数据为中的数据为:);:);document.writedocument.write(empemp0+);0+);document.writedocument.write(empemp1+);1+);document.writedocument.write(empemp2+);2+);数组数组数组数组p常用属性常用属性 length ：返回数组中元素的个数：返回数组中元素的个数p常用方法常用方法方 法说 明joi

37、n将数将数组组中的元素中的元素组组合成字符串合成字符串reverse颠颠倒数倒数组组元素的元素的顺顺序，使第一个元素成序，使第一个元素成为为最后一个，而最最后一个，而最后一个元素成后一个元素成为为第一个第一个sort对对数数组组元素元素进进行排序行排序varvar empemp=new Array(3);=new Array(3);emp0=Ryan emp0=Ryan DiasDias;emp1=Graham Browne;emp1=Graham Browne;emp2=David Greene;emp2=David Greene;emp.sortemp.sort();();document

38、.writedocument.write(排序结果是：排序结果是：););document.writedocument.write(empemp0+);0+);document.writedocument.write(empemp1+);1+);document.writedocument.write(empemp2+);2+);数组排序数组排序循环循环 pfor循环循环pdo-whilepwhile ForFor循环循环 forfor循环循环 语法结构语法结构for(for(表达式表达式;表达式表达式;表达式表达式)/语句语句;示例：示例：varvar i;i;for(i=0;i10;i+)

39、for(i=0;i10;i+)/语句语句;For For 循环演示循环演示document.writedocument.write(打印金字塔直线打印金字塔直线););for(for(varvar i=0;i100;i=i+5)i=0;i100;i=i+5)document.writedocument.write(HR align=center();+i+%);for for 循环循环 示例示例 当i=5 时，WhileWhile和和do-whiledo-whilewhilewhile循环循环 语法结构语法结构 while(while(循环条件循环条件)/语句；语句；dodowhilewhil

40、e循环循环 语法结构语法结构 dodo /语句；语句；while(while(循环条件循环条件););STYLE .myfontmyfont font-size:150;font-size:150;color:#c99c96;color:#c99c96;font-font-family:Webdingsfamily:Webdings;/;/产生埃及图像的特殊字体产生埃及图像的特殊字体 script document.writedocument.write(每个字符都对应一个漂亮的埃及图像每个字符都对应一个漂亮的埃及图像););dodo varvar c=prompt(c=prompt(输入一个

41、字符，输入输入一个字符，输入N N 或或n n停止停止,A,A););document.writedocument.write(font (+c+);+c+);while(c!=N&c!=n);while(c!=N&c!=n);whilewhile和和dodowhilewhile循环循环总结总结p什么是什么是 JavaScriptJavaScriptp如何将如何将 JavaScript JavaScript 嵌入到嵌入到 HTML HTML 中中n网页中嵌入脚本有两种方式：使用网页中嵌入脚本有两种方式：使用标签或外部标签或外部*.js文件文件p理解变量、数据类型和运算符理解变量、数据类型和运算

42、符nJavaScript 中声明变量：中声明变量：var 变量名变量名n+可以用于两个数相加，还可以用于连接字符串可以用于两个数相加，还可以用于连接字符串nparseInt()和和 parseFloat()函数将字符串分别转换为整型和小数函数将字符串分别转换为整型和小数n运算符号分为算术运算符、比较运算符、逻辑运算符运算符号分为算术运算符、比较运算符、逻辑运算符p分支结构分支结构n条件语句分为条件语句分为if语句，语句，if-else语句、语句、if的嵌套的嵌套n多分支语句多分支语句switch根据表达式的值，进入不同的分支执行根据表达式的值，进入不同的分支执行n多分支语句多分支语句switch根据表达式的值，进入不同的分支执行根据表达式的值，进入不同的分支执行p数组数组nArray对象常用的属性是对象常用的属性是length，排序方法：，排序方法：sortp循环结构：循环结构：for 循环、循环、while循环、循环、do-while循环循环