Version3.0JavaScript语法基础第七章2回顾•了解DHTML•样式表–什么是样式表–为什么要使用样式表–样式表的语法规则–创建并使用样式表3目标•理解什么是JavaScript•理解JavaScript的语法基础4什么是JavaScript•JavaScript是一种基于对象的脚本语言,用于开发基于客户端和基于服务器的Internet应用程序•可用于创建客户端脚本和服务器端脚本•由SunMicrosystems和Netscape开发,是从Netscapes的Livescript发展而来的5JavaScript的作用和基本语法规则•使用JavaScript的各种功能,可以增强站点的动态性和交互性。–提供用户交互–动态更改内容–验证数据•与其他任何语言一样,JavaScript也遵循一些基本的语法规则,如:–区分大小写–使用成对的符号–使用空格–使用注释6JavaScript工具和运行时环境•JavaScript代码生成工具和IDE有助于创建功能强大的JavaScript代码。以下是其中一些工具:–对话框–弹出菜单生成器–远程控件•运行时环境–客户端脚本编写–Web服务器上的JavaScript7JavaScript作为客户端程序嵌入网页•使用Script标记•使用外部文件•在事件处理程序中使用JavaScript8使用Script标记示例HTMLHEADscriptlanguage=JavaScript!--对较早的浏览器隐藏脚本document.write(欢迎使用JavaScript);//脚本隐藏在此处结束--/script/headbodyP祝学有所成!!!/P/body/HTML9使用外部文件示例HTMLHEADscriptsrc=test.js/script/headbodyP祝学有所成!!!/body/htmldocument.write(嗨!你好吗?)test.js10在事件处理程序中使用JavaScript示例HTMLHEADTITLEJavaScript示例/TITLE/HEADBODYFORMINPUTTYPE=buttonVALUE=你好onClick='alert(你好!!);'/FORM/BODY/HTML11使用Alert/Confirm/Write方法•使用窗口的Alert方法,可以生成一个对话框•使用窗口的Confirm方法,可以生成一个确认对话框•使用document的Write方法可以创建页面内容HTMLHEADSCRIPTLANGUAGE=JavaScript!--alert(确定);document.write(谢谢!);if(confirm(是否要关闭当前窗口?)){window.close();}--/SCRIPT/HEAD/HTML12变量•变量是一种引用内存位置的容器,用于保存在执行脚本时可以更改的值•变量的命令约定–变量名必须以字母或下划线(_)开头–变量名可以包含数字–由于JavaScript区分大小写,所以可用的字母包括A到Z(大写)和a到z(小写)的字符13声明变量varnew_amount;varanswer=null;varold_cost=12.50;varresult=Unknownresult;vara,b,c;result=true;14变量的作用域Function1、Function2和Function3都可以访问脚本全局变量Function1局部变量aFunction2局部变量bFunction3局部变量c15数据类型•在JavaScript中有四种基本的数据类型•基本类型属于弱类型数据类型描述数字型(Number)整数或实数逻辑型或布尔型(Boolean)True或False字符串型(String)如“HelloWorld”,“123.4”空型(null)表示空值的特殊关键字16运算符•算术运算符•比较运算符•逻辑运算符•字符串运算符•求值运算符17算术运算符运算符说明示例+如果操作数都是数字时执行加法运算,如果其中的操作数有字符串时,会执行连接字符串的作用A=5+8//结果是13A=5+8//结果是58-减法A=8–5*乘法A=8*5/除法A=20/5%取余-相除之后的余数10%3=1++一元递增。此运算符只计算一个操作数,将操作数的值加1。返回的值取决于++运算符是位于操作数之前还是位于操作数之后。++x返回递增后的x值x++返回递增前的x值--一元递减。此运算符只计算一个操作数。返回的值取决于--运算符是位于操作数之前还是位于操作数之后--x返回递减后的x值x--返回递减前的x值-一元求反。此运算符返回操作数的相反数如果a等于5,则-a=-518比较运算符运算符说明示例==等于。如果两个操作数相等,则返回Truea==b!=不等于。如果两个操作数不等,则返回TrueVar2!=5大于。如果左操作数大于右操作数,则返回TrueVar1var2=大于或等于。如果左操作数大于或等于右操作数,则返回TrueVar1=5Var1=var2小于。如果左操作数小于右操作数,则返回TrueVar2var1=小于或等于。如果左操作数小于或等于右操作数,则返TrueVar2=4Var2=var119逻辑运算符运算符例子说明And(&&)expr1&&expr2逻辑与Or(||)expr1||expr2逻辑或Not(!)!expr逻辑非20字符串运算符x=yellow;y=green;z=x+y+white;则z为yellowgreenwhitew=y+9;则w为green921求值运算符•通常这些运算符包括:–条件运算符:(condition)?trueVal:falseVal–typeof运算符typeof运算符返回字符串,该字符串代表操作数的类型varx=5;document.write(typeof(x));status=(age=18)?adult:minor22表达式•表达式用于在不同上下文中操作和计算变量。•表达式是任意一组有效的文字、变量和运算符,其计算结果为一个值。•表达式类型–算术:计算结果为一个数字–逻辑:计算结果为一个布尔值–字符串:计算结果为一个字符串•表达式通过运算符组合变量和文字23数组•数组用于存储具有相同数据类型的一组值,使用下标(索引)来区分各个值。•在JavaScript中,数组的下标以零开始。•JavaScript没有明确的数组数据类型,但却有内置的数组对象。要在程序中使用数组,必须使用数组对象及其相关联的方法。24创建数组•语法:arrayObjectName=newArray([element0,element1,...,elementN])•初始化–1.将指定的值作为其元素–2.使用arrayName=newArray(N)对象名元素值列表元素个数25数组赋值•在创建数组时将元素的值直接赋给数组。•对数组的元素赋值。htmlheadscriptlanguage=JavaScript!--emp=newArray(3);emp[0]=RyanDias;emp[1]=GrahamBrowne;emp[2]=DavidGreene;document.writeln(emp[0]);document.writeln(emp[1]);document.writeln(emp[2]);//--/script/head/html26访问数组元素•指定元素名•指定元素的索引号emp[RyanDias]emp[0]27数组对象的元素和方法•length属性•sort方法•join方法•reverse方法htmlheadscriptlanguage=JavaScript!--emp=newArray(3);emp[0]=RyanDias;emp[1]=GrahamBrowne;emp[2]=DavidGreene;emp.sort();document.writelen(emp.length);document.writeln(emp[0]);document.writeln(emp[1]);document.writeln(emp[2]);//--/script/head/html28多维数组HTMLHEADSCRIPTLANGUAGE=JavaScript!--MyArray=newArray(5,5);MyArray[0,0]=RyanDias;MyArray[0,1]=1;MyArray[1,0]=MikeDonne;MyArray[1,1]=2;MyArray[2,0]=JoeDean;MyArray[2,1]=3;MyArray[3,0]=RobertMatey;MyArray[3,1]=4;document.write(姓名是+MyArray[3,0]);document.write(编号是+MyArray[3,1]);--/SCRIPT/HEAD/HTML29条件语句•if…else语句•switch语句if(condition){statements;}else{statements2;}switch(expression){casevalue1:statements;break;casevalue2:statements;break;...default:statements;}30循环语句•for•do…while•while•break•continue31函数•预定义函数–eval函数–isNaN函数•用户自定义函数–创建用户定义的函数–调用函数•return语句functionfuncName(argument1,argument2,etc){statements;}32函数示例htmlheadscriptlanguage=JavaScriptfunctionhello(){document.write('你好!');document.write('欢迎使用hello()函数');return;}functionsum_up(one,two){varresult=one+two;returnresult;}functionsum_all(){varloop=0,sum=0;for(loop=arguments.length-1;loop=0;loop--)sum+=arguments[loop];returnsum;}hello();vartotal=sum_up(7,9);document.write(total+''+sum_up(8,15));document.write(''+sum_all(1,5,8,7,6));/script/head/html33总结•JavaScript是一种脚本语言,使用它可以创建客户端脚本和服务器端脚本。•可以使用不同的方法将JavaScript语句插入到HTML文档中。•JavaScript支持的基本数据类型有数字型、逻辑型或布尔型、字符串型和空型。•JavaScript支持的运算符包括:算术运算符、比较运算符、逻辑运算符、字符串运算符和求值运算符。•数组用于存储具有相同数据类型的一组值变量•条件语句包括:if...else和分支语句switch。•循环语句包括for循环、do…while、while、break&continue语句。•JavaScript具有一些预定义函数,也可以创建自定义函数。