JS第01章 JavaScript基本语法

《JavaScript及网页特效制作》第一章JavaScript基本语法2预习检查•大家已学HTML，为什么要学习JavaScript？•如何编写JavaScript程序？•JavaScript与Java基本语法的异同？3本章任务制作淘宝网购物简易计算器页面4•掌握脚本的基本结构(Script标签)•简单记忆基本语法–变量的定义与赋值–数据类型与转换parseFloat等–运算符和控制语句同Java•灵活运用高级语法－自定义函数function本章目标5请说说input元素的TYPE属性有哪些值回顾HTML与CSS-1常用的HTML标签有哪些？文档结构htmlhead/headbody/body/html页头headtitle/titlemeta/base/style/style/headbody正文中常见标记aimgh1phrbrulolli表格tabletrtd/td/tr/table表单forminput/select/selecttextarea/textarea/form框架集与框架framesetframeframe/framesetinputtype=“?”name=“”id=“”size=“”maxlength=“”value=“”checked=“”src=“”onclick=“”Type=“”textpasswordradiocheckboxsubmitresetbuttonimagefilehidden6回顾HTML与CSS-2请简述样式规则的构成与几种选择器的作用.请列举常用的CSS属性样式规则:选择器名称{CSS属性名称:属性值;名:值;……}选择器:标记选择器类选择器ID选择器锚伪类选择器上下文选择器CSS属性font-sizefont-weightfont-stylecolortext-alignline-heightborder-styleborder-widthborder-colorbackground-colorbackground-imagemarginpadding7为什么要学JavaScript表单验证页面动态效果演示示例2：层的切换和树形菜单等演示示例1：注册表单验证8什么是JavaScriptHTMLHEADTITLE脚本的基本结构/TITLESCRIPTlanguage=javascriptvarcount=0;document.write(淘宝网欢迎您！);for(i=0;i5;i++)document.write(H2淘宝网欢迎您！/H2);/SCRIPT/HEADBODYH1BODY部分的内容/H1/BODY/HTML如何使用JavaScript实现此部分内容？查看完整源代码9什么是JavaScript•脚本的执行原理应用服务器IEIE解析HTML标签和JavaScript脚本从服务器端下载含JavaScript的页面返回响应客户端请求含JS的页面发送请求1用户输入2310JavaScript的基本语法HTMLHEADTITLE脚本的基本结构/TITLESCRIPTlanguage=javascriptvarcount=0;document.write(淘宝网欢迎您！);for(i=0;i5;i++)document.write(H2淘宝网欢迎您！/H2);/SCRIPT/HEADBODYH1BODY部分的内容/H1/BODY/HTML大家想想上面JavaScript代码与我们学过的Java、C#语言有相似的地方吗？11JavaScript的基本语法类型转换注释流程控制语句运算符与表达式数据类型与变量基本语法12变量的声明和赋值varcount;count=5;定义变量赋值“var”－用于声明变量的关键字“count”－变量名[命名规则]varx,y,z=10;varcount=10;同时声明和赋值变量声明多个变量13运算符号•运算符对一个或多个变量或值（操作数）进行运算，并返回一个新值•根据所执行的运算，运算符可分为以下类别：–算术运算符+、-、*、/、%、++、--、-(求反)–比较运算符==、!=、、=、、=–逻辑运算符&&、||、！运算符示例14HTMLHEADTITLE脚本的基本结构/TITLESCRIPTlanguage=javascriptvarcount=0;document.write(count++);document.write(br/);document.write(15%6);document.write(p+15%6+/p);/SCRIPT/HEADBODYH1BODY部分的内容/H1/BODY/HTML15逻辑控制语句•if条件语句if(条件){//JavaScript代码;}elseif(条件){//JavaScript代码;}Else{//JavaScript代码;}If示例16HTMLHEADTITLE脚本的基本结构/TITLESCRIPTlanguage=javascriptvarcount=4;if(count==1){document.write(fontcolor=\#FF0000\变量为1，红色显示/font);}elseif(count==2){document.write(fontcolor=\#00FF00\变量为2，绿色显示/font);}else{document.write(fontcolor=\#0000FF\变量为其他，蓝色显示/font);}/SCRIPT/HEADBODYH1BODY部分的内容/H1/BODY/HTML17逻辑控制语句•switch多分支语句switch(表达式){case常量1:JavaScript语句1;break;case常量2:JavaScript语句2;break;...default:JavaScript语句3;}switch示例18HTMLHEADTITLE脚本的基本结构/TITLESCRIPTlanguage=javascriptvarcount=2;switch(count){case1:document.write(fontcolor=\#FF0000\变量为1，红色显示/font);break;case2:document.write(fontcolor=\#00FF00\变量为2，绿色显示/font);break;default:document.write(fontcolor=\#0000FF\变量为其他，蓝色显示/font);}/SCRIPT/HEADBODYH1BODY部分的内容/H1/BODY/HTML19逻辑控制语句•for、while循环语句for(初始化;条件;增量){语句集;}while(条件){语句集;}Do{语句集;}}while(条件);while示例20HTMLHEADTITLE脚本的基本结构/TITLESCRIPTlanguage=javascriptvarcount=1;while(count7){document.write(h+count+湖南外贸职业学院/h+count+);count++;}/SCRIPT/HEADBODYH1BODY部分的内容/H1/BODY/HTMLfor示例21HTMLHEADTITLE脚本的基本结构/TITLESCRIPTlanguage=javascriptfor(count=1;count7;count++){document.write(h+count+湖南外贸职业学院/h+count+);}/SCRIPT/HEADBODYH1BODY部分的内容/H1/BODY/HTML22注释单行注释以//开始，以行末结束例如：SCRIPTlanguage=“javascript”//表示JavaScript代码的开始多行注释以/*开始，以*/结束，符号/*……*/指示中间的语句是该程序中的注释。例如：/*helloWorld.html2007-9-29第一个JavaScript程序*/练习231、用一个变量表示月份（取值1-12），判断该月份的天数（分别用if语句和switch语句实现，不考虑闰年）。2.利用循环输出h1——h6六种样式的“湖南外贸职业学院”。（分别用while和for实现）3、利用JS输出9*9乘法表。24类型转换•parseInt(String)将字符串转换为整型数字如:parseInt(“86”)将字符串“86”转换为整型值86•parseFloat(String)将字符串转换为浮点型数字如:parseInt(“34.45”)将字符串“34.45”转换为浮点值34.4525什么是函数•函数的含义：类似于C#或Java中的方法，是执行特定任务的语句块。如何希望点击某个按钮后才显示“HelloWorld”，并能输入显示的次数，怎么办？演示示例3：调用函数输出“HelloWorld”26什么是函数1、在页面中放置一个文本框和一个按钮，让用户输入次数后点击按钮才显示2、把循环显示的代码放置到函数中，当点击按钮时，才调用函数显示HelloWorld经过分析，该如何解决上面问题？使用自定义函数27如何使用函数functionshowHello(){varcount=document.myForm.txtCount.value;for(i=0;icount;i++)document.write(H2HelloWorld/H2);}INPUTtype=submitname=Submitvalue=显示HelloWorldonClick=showHello()表示单击此按钮时，调用函数showHello()执行•创建函数function函数名(参数1,参数2，…){语句;}•调用函数函数调用一般和页面元素的事件一起使用，调用格式为：标记事件名＝“函数名();”……28小结1•编写如左图所示，具有能对两个操作数进行加、减、乘、除运算的简易计算器。名为myform的表单名为divButton2的普通按钮名为txtNum1的文本框练习答案练习代码提示：加、减、乘、除四个按钮分别调用四个函数实现两个数相加、相减、相乘和相除29如何使用函数•在小结1中，4个按钮调用的函数的代码很类似，怎么优化代码？查看小结1练习答案代码•比较4个函数，只有运算符号不一样，将运算符号作为函数的参数即可。怎么用一个函数来代替4个结构相似的函数？使用有参函数30定义有参函数JavaScript代码HEADSCRIPTlanguage=JavaScriptfunctioncompute(op){varnum1,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;}/SCRI