javascript语法基础教学PPT

本书编委会编著第17章JavaScript基本语法17.1基本数据类型17.2运算符17.3程序结构17.4函数17.5小实例——修改密码17.6习题HTML/CSS/JavaScript标准教程实例版（第2版）HTML/CSS/JavaScript标准教程实例版（第2版）第章1717.1基本数据类型•数值•字符•布尔•空值HTML/CSS/JavaScript标准教程实例版（第2版）第章1717.2运算符17.2.1算术运算符17.2.2逻辑运算符17.2.3比较运算符HTML/CSS/JavaScript标准教程实例版（第2版）第章1717.2.1算术运算符•表17-1具体算术运算符HTML/CSS/JavaScript标准教程实例版（第2版）第章1717.2.1算术运算符•实例代码HTML/CSS/JavaScript标准教程实例版（第2版）第章1717.2.1算术运算符•接上页HTML/CSS/JavaScript标准教程实例版（第2版）第章1717.2.1算术运算符•网页效果HTML/CSS/JavaScript标准教程实例版（第2版）第章1717.2.2逻辑运算符•表17-2具体运算符HTML/CSS/JavaScript标准教程实例版（第2版）第章1717.2.2逻辑运算符•实例代码HTML/CSS/JavaScript标准教程实例版（第2版）第章1717.2.2逻辑运算符•接上页HTML/CSS/JavaScript标准教程实例版（第2版）第章1717.2.3比较运算符•表17-3具体运算符HTML/CSS/JavaScript标准教程实例版（第2版）第章1717.2.3比较运算符•实例代码HTML/CSS/JavaScript标准教程实例版（第2版）第章1717.2.3比较运算符•接上页HTML/CSS/JavaScript标准教程实例版（第2版）第章1717.2.3比较运算符•网页效果HTML/CSS/JavaScript标准教程实例版（第2版）第章1717.3程序结构17.3.1If语句17.3.2For语句17.3.3Switch语句17.3.4While与Do…WhileHTML/CSS/JavaScript标准教程实例版（第2版）第章1717.3.1If语句•If语句是一种条件结构，它可以根据表达式的逻辑值改变程序执行的顺序，如果判断的值为真，则执行该条件下的程序块；如果为假，则跳过该程序段，执行另外的语句或程序段。HTML/CSS/JavaScript标准教程实例版（第2版）第章1717.3.1If语句•基本语法if条件{…}或者if条件{执行语句1}Else条件{执行语句2}HTML/CSS/JavaScript标准教程实例版（第2版）第章1717.3.1If语句•语法说明•If语句后面的条件可以是表达式也可以是一个其他值，但条件返回的结果的数据类型只能是布尔型，要么为真，要么为假。•当表达式的值为true，则执行语句1，否则执行语句2.若if后的语句有多行，则必须使用大括号{}将其括起来。HTML/CSS/JavaScript标准教程实例版（第2版）第章1717.3.1If语句•实例•1、准备两张图片01.jpg和02.jpg。新建网页文档将其保存在与图片同一个文件内。•2、打开代码视图，在body正文中输入if语句，保存并预览效果。•body•scriptlanguage=javascript•for(x=70;x=73;x++)•if(x%2==0)//使用if语句来控制图像的交叉显示•document.write(imgsrc=01.JPGwidth=,x,%height=,3*x,%);•else•document.write(imgsrc=02.JPGwidth=,x,%height=,2*x,%);•/script•/bodyHTML/CSS/JavaScript标准教程实例版（第2版）第章1717.3.1If语句•网页效果HTML/CSS/JavaScript标准教程实例版（第2版）第章1717.3.2For语句•For语句在编程语言中使用广泛，主要用在循环语句中。使用很简单，但程序员必须计算出要循环的次数才能方便的使用for循环语句。HTML/CSS/JavaScript标准教程实例版（第2版）第章1717.3.2For语句•基本语法for(初始化值;条件;求新值){语句块；…}HTML/CSS/JavaScript标准教程实例版（第2版）第章1717.3.2For语句•语法说明•For后面的条件一个都不能省略，同时初始化值、条件、求新值三者之间必须使用分号（；）隔开。只有当For语句中的条件部分为真时，才执行后面的程序部分，否则不执行。HTML/CSS/JavaScript标准教程实例版（第2版）第章1717.3.2For语句•“初始化”参数定义循环的开始位置，必须赋予变量初值；“条件”用于判断循环停止时的条件，若条件满足，则执行循环体，否则跳出循环；“求新值（增量）”主要定义循环，控制变量在每次循环时按什么方式变化。在三个主要语句之间，必须使用；进行分隔。•Eg.for（i=0;i10;i++）•{X{i}=I;}•说明：初始值i=0；条件i10（也就是从0-9）；i++表示i=i+1,也就是递增值为1.这段代码表示从0开始每次递增1给数组X{i}赋值，直到i为10时才能跳出循环。HTML/CSS/JavaScript标准教程实例版（第2版）第章1717.3.2For语句•实例：•1、打开原始文件，11.4.2\index.htm•2、在代码中将插入点置于正文，在插入点所处的位置输入以下for循环代码，用于循环显示文字•scriptlanguage=javascript•for(a=1;a=8;a++)•document.write(h+a+质量第一，信誉第一，用户至上br/h+a+);•/scriptHTML/CSS/JavaScript标准教程实例版（第2版）第章1717.3.2For语句•网页效果HTML/CSS/JavaScript标准教程实例版（第2版）第章1717.3.3Switch语句•Switch语句是作为一种分值选择的结构语句，它可以在多条语句中进行判断，符合条件就执行条件后面的语句。否则，程序会继续往下执行。•当判断条件比较多时，为了使程序显示的更加清晰，可以使用switch语句。使用switch语句时，表达式的值将与每个case语句中的常量进行比较。如果相匹配，则执行case语句后的代码；如果没有一个case的常量与表达式的值相匹配，则执行default语句。当然，default语句是可选的。如果没有相匹配的case语句，也没有default语句，则什么也不执行。HTML/CSS/JavaScript标准教程实例版（第2版）第章1717.3.3Switch语句•基本语法switch(表达式){Case条件1:语句块1Case条件2:语句块2…Default:语句n}HTML/CSS/JavaScript标准教程实例版（第2版）第章1717.3.3Switch语句•语法说明•使用Switch语句时，必须赋初始条件，程序将根据给出的初始条件，在Switch语句中进行判断，如果Case条件符合初始条件，则执行该Case后面的语句，否则向下继续判断，继续执行。•Switch语句通常使用在有多种出口选择的分支结构上，就好像信号处理中心可以对多个信号进行响应，针对不同的信号均有相应的处理一样。HTML/CSS/JavaScript标准教程实例版（第2版）第章1717.3.3Switch语句•实例•1、打开原始文档，11.4.3\index.htm•2、将插入点放置在适当位置，输入代码•inputname=“score”id=“score”type=“text”/，即可插入文本框•3、插入“点击提交”buttonvalue=点击提交onClick=judge()点击提交/button•5、将插入点置于head与/head之间，输入代码HTML/CSS/JavaScript标准教程实例版（第2版）第章17•scripttype=text/JavaScript•functionjudge(){•varscore;//分数•vardegree;//分数等级•score=document.getElementById(score).value;•if(score100){•degree='耍我？100分满！';•}•else{•switch(parseInt(score/10)){•case0:•case1:•case2:•case3:•case4:•case5:degree=:-(没有通过，有机会下次再来！;•break;•case6:•degree=:-)运气很好哦，刚刚通过！;•break;•case7:•degree=:-)还行，顺利通过！•break;•case8:•degree=^_^不错，不错！顺利通过！;•break;•case9:•case10:•degree=*^_^*高手高手，不要骄傲哦，还有下一关呐！;•}//endofswitch•}//endofelse•alert(degree);•}•/scriptHTML/CSS/JavaScript标准教程实例版（第2版）第章1717.3.3Switch语句•网页效果HTML/CSS/JavaScript标准教程实例版（第2版）第章1717.3.4While与Do…While•当重复执行动作的情形比较简单时，就不需要用for循环，可以使用while循环代替。While循环在执行循环体前先测试一个条件，如果条件成立则进入循环体，否则跳出循环体。•While与do……while中，两者都是用于循环语句，但前者是先进行判断，后执行；后者是执行，后判断。因此在while条件相同的情况下，前者比后者要少执行一次。HTML/CSS/JavaScript标准教程实例版（第2版）第章1717.3.4While与Do…While•基本语法While语法：While（条件）｛程序段…｝Do..While语法：Do｛程序段…｝While（）HTML/CSS/JavaScript标准教程实例版（第2版）第章1717.3.4While与Do…While•语法说明•While与Do…While都是用于循环结构的，但两者的明显区别是：前者必须在满足条件的情况下才执行该条件下的程序段，后者是不管条件是否满足While语句后面的条件，都至少会执行一次。•在while循环体中处理while的条件表达式，使循环到该结束时就结束。HTML/CSS/JavaScript标准教程实例版（第2版）第章1717.3.4While与Do…While•实例•1、打开原始文档11.4.4\index.htm，将插入点置于代码正文中，输入代码•2、保存并预览效果，会出现freeze按钮。•3、单击freeze按钮将会弹出消息对话框。•functionfreeze()•{•alert('对不起，死机了!!!');//首先提示已经完成效果•while(true){//进入循环•window.history.back(-1)//后退一格•}•}•/script•FORM•INPUTTYPE=BUTTONVALUE=FreezeonClick=freeze()•/FORMHTML/CSS/JavaScript标准教程实例版（第2版）第章1717.3.4While与Do…While•网页效果HTML/CSS/JavaScript标准教程实例版（第2版）第章1717.4函数1．有参函数•基本语法“Function函数名（参数1参数2…参数n）”HTML/CSS/JavaScript标准教程实例版（第2版）第章1717.4函数1．有参函数•语法说明•前面讲解程