JavaScript基础知识PPT演示课件

JavaScript语法基础陕西国际商贸学院任明2目标•理解什么是JavaScript•理解JavaScript的语法基础陕西国际商贸学院任明3什么是JavaScript•JavaScript是一种基于对象的脚本语言，用于开发基于客户端和基于服务器的Internet应用程序•可用于创建客户端脚本和服务器端脚本•由SunMicrosystems和Netscape开发，是从Netscapes的Livescript发展而来的陕西国际商贸学院任明4JavaScript的作用和基本语法规则•使用JavaScript的各种功能，可以增强站点的动态性和交互性。–提供用户交互–动态更改内容–验证数据•与其他任何语言一样，JavaScript也遵循一些基本的语法规则，如：–区分大小写–使用成对的符号–使用空格–使用注释陕西国际商贸学院任明5JavaScript工具和运行时环境•JavaScript代码生成工具和IDE有助于创建功能强大的JavaScript代码。以下是其中一些工具：–对话框–弹出菜单生成器–远程控件•运行时环境–客户端脚本编写–Web服务器上的JavaScript陕西国际商贸学院任明6JavaScript作为客户端程序嵌入网页•使用Script标记•使用外部文件•在事件处理程序中使用JavaScript陕西国际商贸学院任明7使用Script标记示例HTMLHEADscriptlanguage=JavaScript!--对较早的浏览器隐藏脚本document.write(欢迎使用JavaScript);//脚本隐藏在此处结束--/script/headbodyP祝学有所成!!!/P/body/HTML陕西国际商贸学院任明8使用外部文件示例HTMLHEADscriptsrc=test.js/script/headbodyP祝学有所成!!!/body/htmldocument.write(嗨！你好吗？)test.js陕西国际商贸学院任明9在事件处理程序中使用JavaScript示例HTMLHEADTITLEJavaScript示例/TITLE/HEADBODYFORMINPUTTYPE=buttonVALUE=你好onClick='alert(你好！！);'/FORM/BODY/HTML陕西国际商贸学院任明10使用Alert/Confirm/Write方法•使用窗口的Alert方法，可以生成一个对话框•使用窗口的Confirm方法，可以生成一个确认对话框•使用document的Write方法可以创建页面内容HTMLHEADSCRIPTLANGUAGE=JavaScript!--alert(确定);document.write(谢谢!);if(confirm(是否要关闭当前窗口？)){window.close();}--/SCRIPT/HEAD/HTML陕西国际商贸学院任明11变量•变量是一种引用内存位置的容器，用于保存在执行脚本时可以更改的值•变量的命令约定–变量名必须以字母或下划线(_)开头–变量名可以包含数字–由于JavaScript区分大小写，所以可用的字母包括A到Z（大写）和a到z（小写）的字符陕西国际商贸学院任明12声明变量varnew_amount;varanswer=null;varold_cost=12.50;varresult=Unknownresult;vara,b,c;result=true;陕西国际商贸学院任明13变量的作用域Function1、Function2和Function3都可以访问脚本全局变量Function1局部变量aFunction2局部变量bFunction3局部变量c陕西国际商贸学院任明14数据类型•在JavaScript中有四种基本的数据类型•基本类型属于弱类型数据类型描述数字型(Number)整数或实数逻辑型或布尔型(Boolean)True或False字符串型(String)如“HelloWorld”，“123.4”空型(null)表示空值的特殊关键字陕西国际商贸学院任明15运算符•算术运算符•比较运算符•逻辑运算符•字符串运算符•求值运算符陕西国际商贸学院任明16算术运算符运算符说明示例+如果操作数都是数字时执行加法运算，如果其中的操作数有字符串时，会执行连接字符串的作用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=-5陕西国际商贸学院任明17比较运算符运算符说明示例==等于。如果两个操作数相等，则返回Truea==b!=不等于。如果两个操作数不等，则返回TrueVar2!=5大于。如果左操作数大于右操作数，则返回TrueVar1var2=大于或等于。如果左操作数大于或等于右操作数，则返回TrueVar1=5Var1=var2小于。如果左操作数小于右操作数，则返回TrueVar2var1=小于或等于。如果左操作数小于或等于右操作数，则返TrueVar2=4Var2=var1陕西国际商贸学院任明18逻辑运算符运算符例子说明And(&&)expr1&&expr2逻辑与Or(||)expr1||expr2逻辑或Not(!)!expr逻辑非陕西国际商贸学院任明19字符串运算符x=yellow;y=green;z=x+y+white;则z为yellowgreenwhitew=y+9;则w为green9陕西国际商贸学院任明20求值运算符•通常这些运算符包括：–条件运算符：(condition)?trueVal:falseVal–typeof运算符typeof运算符返回字符串，该字符串代表操作数的类型varx=5;document.write(typeof(x));status=(age=18)?adult:minor陕西国际商贸学院任明21表达式•表达式用于在不同上下文中操作和计算变量。•表达式是任意一组有效的文字、变量和运算符，其计算结果为一个值。•表达式类型–算术：计算结果为一个数字–逻辑：计算结果为一个布尔值–字符串：计算结果为一个字符串•表达式通过运算符组合变量和文字陕西国际商贸学院任明22数组•数组用于存储具有相同数据类型的一组值，使用下标（索引）来区分各个值。•在JavaScript中，数组的下标以零开始。•JavaScript没有明确的数组数据类型，但却有内置的数组对象。要在程序中使用数组，必须使用数组对象及其相关联的方法。陕西国际商贸学院任明23创建数组•语法：arrayObjectName=newArray([element0,element1,...,elementN])•初始化–1.将指定的值作为其元素–2.使用arrayName=newArray(N)对象名元素值列表元素个数陕西国际商贸学院任明24数组赋值•在创建数组时将元素的值直接赋给数组。•对数组的元素赋值。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/html陕西国际商贸学院任明25访问数组元素•指定元素名•指定元素的索引号emp[RyanDias]emp[0]陕西国际商贸学院任明26数组对象的元素和方法•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/html陕西国际商贸学院任明27多维数组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/HTML陕西国际商贸学院任明28条件语句•if…else语句•switch语句if(condition){statements;}else{statements2;}switch(expression){casevalue1:statements;break;casevalue2:statements;break;...default:statements;}陕西国际商贸学院任明29循环语句•for•do…while•while•break•continue陕西国际商贸学院任明30函数•预定义函数–eval函数(计算字符串表达式的值)–parseFloat()将字符串开头的整数或浮点数分解出来，转换为浮点数。如，parseFloat(“123.45”)、parseFloat(“123.45abc”)返回浮点数123.45，而parseFloat(“abc123.45”)和parseFloat(true)返回NaN。•用户自定义函数–创建用户定义的函数–调用函数•return语句functionfuncName(argument1,argument2,etc){statements;}陕西国际商贸学院任明31函数示例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/html陕西国际商贸学院任明32总结•JavaScript是一种脚本语言，使用它可以创建客户端脚本和服务器