Javascript入门与语法(精品)

标题,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,T01,入门与语法基础,JavaScript,的地位,目标,什么是,JavaScript,JavaScript,与,Java,的区别,如何调用,JavaScript,JavaScript,的语法基础,常用函数与方法,Eval/isNaN/parseInt,自定义函数,为什么要学,JavaScript,表单验证,演示案例,登录验证,页面动态效果,演示案例,层的切换,滤镜进的使用,其他动态网页的功能实现,什么是,JavaScript,JavaScript,是一种基于对象,(Object),和事件驱动,(Event Driven),并具有安全性能的脚本语言。,用于创建客户端脚本和服务器端脚本,与,HTML,超文本标记语言、,Java,脚本语言（,Java,小程序）一起实现在一个,Web,页面中链接多个对象，与,Web,客户交互作用,它是通过嵌入或调入在标准的,HTML,语言中实现的,由Sun,Microsystems 和 Netscape,开发，是,从,Netscapes,的,Livescript,发展而来的,什么是,JavaScript,如何使用,JavaScript,实现此部分内容？,什么是,JavaScript,脚本的执行原理,应用,服务器,IE,IE,解析,HTML,标签和,JavaScript,脚本,从服务器端下载含,JavaScript,的页面,返回响应,客户端请求含,JS,的页面,发送请求,1,用户输入,2,3,JavaScript,和,Java,的区别,与其他任何语言一样，,JavaScript,也遵循一些基本的语法规则如：,区分大小写,使用成对的符号,使用空格,使用注释,网页中调用,JavaScript,的方式,三种方式调用,JS,文件,使用,Script,标记,使用外部文件,在事件处理程序中使用,JavaScript,使用,Script,标记示例,祝学有所成,!,说明：通过标识,.,指明,JavaScript,脚本源代码将放入其间。通过属性,Language=“JavaScript”,说明标识中是使用的何种语言，,这里是,JavaScript,语言,表示在,JavaScript,中使用的语言。,使用外部文件示例,祝学有所成,!,document.write,(,嗨！你好吗？,),test.js,说明,:,Document.write(),是文档对象的输出函数，其功能是将括号中的字符,或变量值输出到窗口；,document.close(),是将输出关闭。,在事件处理程序中使用,JavaScript,JavaScript,示例,通过给控件添加相应的事件来实现,例如,onclick,onchange,等,JavaScript,的基本语法,变量的声明和赋值,-1,v,ar,count,;,count,=,5,;,定义变量,赋值,“var”,用于声明变量的关键字,“,count,”,变量名,v,ar x,y,z=10;,v,ar,count,=10;,同时声明和赋值变量,声明多个变量,变量的声明和赋值,-2,变量的命令约定,变量名必须以字母或下划线,(_),开头,变量名可以包含数字,由于,JavaScript,区分大小写，所以可用的字母包括,A,到,Z,（大写）和,a,到,z,（小写）的字符,变量还可以不作声明，而在使用时再根据数据的类型来确其变量的类型,x=100;,y=125;,xy=True;,在,JavaScript,中同样有全局变量和局部变量,:,全局变量是定义在所有函数体之外，其作用范围是整个函数；,局部变量是定义在函数体之内，只对其该函数是可见的，而对其它函数则是不可见的。,运算符号,运算符对一个或多个变量或值（操作数）进行运算，并返回一个新值,根据所执行的运算，运算符可分为以下类别：,算术运算符,+,、,-,、*、,/,、,%,、,+,、,-,、,-(,求反,),比较运算符,=,、,!=,、,、,=,、,、,=18)?adult:minor,x=yellow;y=green;,z=x+y+white;,则,z,为,yellowgreenwhite,w=y+9;,则,w,为,green9,逻辑控制语句,if,条件语句,switch,多分支语句,for,、,while,循环语句,if(,条件,),statements;,else,statements;,switch,(expression),case value1:,statements;,break;,case value2:,statements;,break;,.,default:statements;,for(,初始化,;,条件,;,增量,),statements;,while(,条件,),statements;,阶段案例,1,使用,JavaScript,写一个,9 9,乘法表,注释,单行注释以,/,开始，以行末结束,例如：,/,表示,JavaScript,代码的开始,多行注释以,/*,开始，以*,/,结束，符号,/*/,指示中间的语句是该程序中的注释。,例如：,/*,helloWorld.html,2007-9-29,第一个,JavaScript,程序,*,/,类型转换,parseInt(String),将字符串转换为整型数字,parseInt,(“86”),将字符串,“,86”,转换为整型值,86,p,arseFloat,(String,),将字符串转换为浮点型数字,parseInt,(“34.45”),将字符串,“,34.45”,转换为浮点值,34.45,eval(str,):,返回字符串表达式中的值,isNaN(str,):,判断制定的内容是否为数字,什么是函数,函数的含义：类似于,Java,中的方法，是执行特定任务的语句块。,如何希望点击某个按钮后才显示“,HelloWorld”,，,并能输入显示的次数，怎么办？,演示示例,3,：,调用函数输出“,HelloWorld,”,什么是函数,1,、在页面中放置一个文本框和一个按钮，让用户输入次数后点击按钮才显示,2,、把循环显示的代码放置到函数中，当点击按钮时，才调用函数显示,HelloWorld,经过分析，该如何解决上面问题？,使用自定义函数,如何使用函数,创建函数,function,函数名,(,参数,1,参数,2,，,),语句,;,调用函数,函数调用一般和表单元素的事件一起使用，调用格式为：,事件名“函数名”,;,function,showHello,(),var count=,document.myForm.txtCount.value,;,for(i,=0;icount;i+),document.write(HelloWorld);,表示单击此按钮时，调用函数,showHello,(),执行,自定义函数案例,1,编写如左图所示，具有能对两个操作数进行加、减、乘、除运算的简易计算器。,名为,myform,的表单,名为,divButton2,的普通按钮,名为,txtNum1,的文本框,提示：加、减、乘、除四个按钮分别调用四,个函数实现两个数相加、相减、相乘和相除,界面代码,计算器功能实现,如何使用函数,在,案例,1,的功能实现代码,中，,4,个按钮调用的函数的代码很类似，怎么优化代码？,比较,4,个函数，只有运算符号不一样，将运算符号作为函数的参数即可。怎么用一个函数来代替,4,个结构相似的函数？,使用有参函数,定义有参函数,JavaScript,代码,function,compute(op,),var num1,num2;,num1=parseFloat(document.myform.txtNum1.value);,num2=parseFloat(document.myform.txtNum2.value);,if(op=+),document.myform.txtResult.value,=num1+num2 ;,if(op=-),document.myform.txtResult.value,=num1-num2 ;,if(op=*),document.myform.txtResult.value,=num1*num2 ;,if(op=/&num2!=0),document.myform.txtResult.value,=num1/num2 ;,定义有参函数,compute(),，完成计算功能，,op,参数代表运算符号。,调用有参函数,JavaScript,代码,调用有参函数,查看完整代码,总结,什么是,JavaScript,JavaScript,与,Java,的区别,如何调用,JavaScript,JavaScript,的语法基础,常用函数与方法,Eval/isNaN/parseInt,自定义函数,