JavaScript+Vue.jsWeb开发实战教程课件 第三章 JavaScript程序控制和函数_第1页
JavaScript+Vue.jsWeb开发实战教程课件 第三章 JavaScript程序控制和函数_第2页
JavaScript+Vue.jsWeb开发实战教程课件 第三章 JavaScript程序控制和函数_第3页
JavaScript+Vue.jsWeb开发实战教程课件 第三章 JavaScript程序控制和函数_第4页
JavaScript+Vue.jsWeb开发实战教程课件 第三章 JavaScript程序控制和函数_第5页
已阅读5页,还剩39页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

JavaScript程序控制和函数演讲人:XXXXXXJavaScript+Vue.jsWeb开发实战教程03学习目标理解JavaScript程序控制流理解JavaScript的函数能够编写程序控制流语句能够编写各种函数并调用函数思维导图3.1程序控制流程序控制流指的是代码执行的顺序和路径。默认情况下,JavaScript代码按照从上到下、从左到右的顺序依次执行(称为顺序执行)。但是,通过特定的语句,如if条件语句、for循环语句、for...in循环语句、while循环语句、do...while循环语句、Switch语句等,开发者可以改变这种默认流程,实现代码的分支执行、重复执行或跳转执行。3.1.1if条件语句JavaScript是动态的,其可以直接对用户输入做出响应,而无须经过Web服务程序。JavaScript对用户输入的响应是以事件(event)驱动的方式进行的。if(condition){

statement1 //如果条件表达式的计算结果为真(true),则执行这里的代码块

}else{

statement2 //如果条件表达式的计算结果为假(false),则执行这里的代码块(可选)}如果判断条件大于一个,则可以使用elseif关键字进行多次条件判断,使用方法如下所示。if(condition1)statement1elseif(condition2)statement2elsestatement33.1.2for循环语句for循环语句是编程中的一种基本迭代结构,用于按照指定条件重复执行一个代码块(循环体)。在for循环语句中需要指定3个表达式:初始化表达式、条件表达式和迭代表达式。for循环语句的语法如下所示。for(initialization;expression;post-loop-expression){

statement;}当条件表达式成立时,执行代码块statement,否则退出循环。初始化表达式(initialization)用于表示循环的开始位置;条件表达式(expression)用于判断循环何时停止,若条件满足,则执行代码块;迭代表达式(post-loop-expression)用于定义循环控制变量在每次循环时按什么方式变化。示例如下。varcount=10;for(vari=0;i<count;i++){

alert(i);}3.1.3for...in循环语句for...in循环语句是用于遍历对象属性或数组元素的循环结构。for...in循环语句可以用来遍历一个对象的所有可枚举属性(包括其继承的可枚举属性),或者遍历一个数组的所有元素。for...in循环语句的语法如下所示。for(属性in表达式){

statement;}例如,遍历window对象中的所有属性,代码如下所示。for(varpropNameinwindow){

document.write(propName);}与for循环语句类似,for...in循环语句中的var关键字也不是必需的。如果要迭代的对象的属性值为null或undefined,则for...in循环语句会抛出错误。因此,建议在使用for...in循环语句之前,检查并确认该对象的属性值不是null或undefined。3.1.4while循环语句while循环语句是一种基本的程序控制流语句,其允许代码块在给定条件为true时重复执行。只要条件表达式的结果为true,while循环就会继续执行其内部的代码块;一旦条件表达式的结果变为false,while循环就会终止,程序将继续执行while循环之后的下一条语句。while循环语句的语法如下所示。while(expression){statement}例如,输出10以内的偶数,代码如下所示。vari=0;while(i<10){

alert(i);

i+=2;}3.1.5break和continue语句break和continue语句是编程中常用的两种程序控制流语句,它们用于在循环结构中改变程序的正常执行流程。break

语句用于立即退出循环,阻止再次反复执行任何代码;同时,break

是JavaScript中的关键字。continue语句则只用于退出当前循环,根据条件表达式还允许继续进行下一次循环。break语句的使用示例如下(位置:单元3/3-1.html)。varm=0;for(vari=1;i<10;i++){

if(i%5==0){

break;}m++;}alert(m);3.1.5break和continue语句如果用continue语句代替上述代码中的break语句,则结果大不相同。continue语句的使用示例如下(位置:单元3/3-2.html)。varm=0;for(vari=1;i<10;i++){

if(i%5==0){

continue;}m++;}alert(m);break和continue语句都可以与有标签的语句联合使用,用于返回代码中的特定位置。break语句的使用示例如下(位置:单元3/3-3.html)。varm=0;outermost:for(vari=0;i<10;i++){

for(varj=0;j<10;j++){

if(i==5&&j==5){breakoutermost;}m++;}}alert(m);3.1.6do...while循环语句do…while循环语句是while循环语句的变体。该循环语句会在检查条件是否为true之前执行一次代码块,如果条件为true,就会重复该循环。do…while循环语句的语法如下所示。do{

statement;}while(condition)示例如下。do{x=x+"Thenumberis"+i+"<br>";

i++;}while(i<5)3.1.7switch语句switch语句是一种在多种编程语言中广泛使用的条件语句,也称为开关语句。switch语句允许程序根据一个变量或表达式的值来决定执行某一个代码块。switch语句是if条件语句的兄弟语句。可以在switch语句中为表达式提供一系列情况(case),用于执行不同的代码块。switch语句的语法如下所示。switch(expression)

casevalue1:statement1;

break;

casevalue2:statement2;

break;

casevalue3:statement3;

break;

casevalue4:statement4;

break;

...

casevaluen:statementn;

break;

default:statementn+1;3.1.7switch语句switch语句可以优化if条件语句结构,如将存在多个条件判断的if条件语句改写成switch语句,使得代码结构更加清晰。示例如下。if(i==10)

alert("10");elseif(i==20)

alert("20");elseif(i==30)

alert("30");else

alert("other");与左侧代码等价的switch语句如下。switch(i){

case10:alert("10");

break;

case20:alert("20");

break;

case30:alert("30");

break;

default:alert("other");}3.2.1函数定义

JavaScript中有两种常用的函数定义方式:使用函数声明语法和使用函数表达式。函数声明语法如下。functionsum(num1,num2){

//函数体}使用函数声明语法方式的一个重要特征是函数声明提升,即在执行代码之前JavaScript会读取函数声明。这意味着可以把函数声明放在调用该函数的语句后面。示例如下。sum(1,2);functionsum(num1,num2){

//函数体}使用函数表达式的语法如下。varsum=function(num1,num2){

//函数体};这种方式看起来像常规的变量赋值语句,即创建一个函数并将其赋值给变量sum。这种方式创建的函数也称为匿名函数,其特点是函数关键字function后面没有标注函数名。这种方式创建的函数不同于使用函数声明语法创建的,其不具有函数声明提升特征。示例如下。sum(1,2);varsum=function(num1,num2){

//函数体};3.2.2函数参数JavaScript函数可以接收参数,这些参数在函数被调用时提供。函数参数分为形参(parameters)和实参(arguments)。形参是函数定义时在括号中声明的变量,用于接收函数调用时传入的数据,定义方法如下。function函数名(形参1,形参2,...,形参N){

//函数体(使用形参处理逻辑)}实参是函数调用时传入括号中的具体值(可以是字面量、变量、表达式等),用于为形参赋值,定义方法:函数名(实参1,实参2,...,实参N);例如,定义一个函数,并传入参数,代码如下所示(位置:单元3/3-5.html)。<!DOCTYPEhtml><html><head><title>JavaScript函数参数</title></head><body><script>

functionsum(x){

returnx+1;

}

console.log(sum(1));

console.log(sum("1"));

console.log(sum());

console.log(sum(1,2));</script></body></html>3.2.2函数参数JavaScript中的函数定义并未指定函数形参的类型,函数调用也未对传入的实参值做任何类型检查,甚至不检查传入的实参个数。一般情况下,JavaScript函数在调用时可以接收的参数个数最多为25。当实参个数比函数声明指定的形参个数少时,剩下的形参都将设置为undefined。示例如下(位置:单元3/3-6.html)functionsum(x,y){

console.log(x,y);}sum(1);当实参个数比形参个数多时,程序无法直接访问多余的实参,此时可以使用函数的arguments对象获取实参。在JavaScript中,函数参数在内部用一个数组来表示。函数接收的始终都是该数组,而不关心数组中包含哪些参数。在函数体内可以通过arguments对象访问参数数组,从而获取传递给函数的每一个参数及传入参数的个数。示例如下(位置:单元3/3-7.html)。functionsum(x){

console.log(arguments[0],arguments[1],arguments[2]);

console.log(arguments.length);}sum(1,2,3);3.2.2函数参数arguments对象的length属性表示实参个数,而函数的length属性表示形参个数,示例如下(位置:单元3/3-8.html)。functionsum(x){

console.log(arguments.length);}sum(1,2,3);console.log(sum.length);当实参个数与形参个数相同时,arguments对象的值和对应形参的值保持同步。示例如下(位置:单元3/3-9.html)。functionsum(x){

console.log(x,arguments[0]);

arguments[0]=2;

console.log(x,arguments[0]);

x=10;

console.log(x,arguments[0]);}sum(1);3.2.2函数参数严格模式下arguments对象的值和形参的值独立,示例如下(位置:单元3/3-10.html)。functionsum(x,y){

'usestrict';

console.log(x,arguments[0]);//输出:11

arguments[0]=2;

console.log(x,arguments[0]);//输出:12

x=10;

console.log(x,arguments[0]);//输出:102}sum(1);arguments对象的另一个常用属性是callee,该属性是一个指针,指向拥有该arguments对象的函数。下面是经典的阶乘函数的实现。functionfactorial(num){

if(num<=1){

return1;

}else{

returnnum*factorial(num-1);

}}console.log(factorial(5));该函数的执行与函数名紧紧耦合在一起,使用arguments.callee可以实现解耦,如下所示(位置:单元3/3-11.html)。functionfactorial(num){

if(num<=1){

return1;

}else{

returnnum*arguments.callee(num-1);

}}console.log(factorial(5));3.2.2函数参数但在严格模式下,访问该属性会抛出TypeError错误。这时可以使用如下函数表达式解决该问题。varfactorial=functionfn(num){

if(num<=1){

return1;

}else{

returnnum*fn(num-1);

}}console.log(factorial(5));//输出:120在向参数传递基本数据类型的值时,被传递的值会被复制给一个局部变量。示例如下。functionsum(num){

num+=10;

returnnum;}varcount=20;varresult=sum(count);console.log(count); //输出:20console.log(result); //输出:303.2.2函数参数在向参数传递引用数据类型的值时,会把该值在内存中的地址复制给一个局部变量,因此这个局部变量的变化会反映在函数的外部。示例如下。functionsetName(obj){

='test';}varperson=newObject();setName(person);console.log();//输出:'test'当在函数内部重写引用数据类型的形参时,该形参引用的就是一个局部对象,而这个局部对象会在函数执行完毕后立即被销毁。示例如下。functionsetName(obj){

='test';

console.log(); //输出:'test'

obj=newObject();

='white';

console.log(); //输出:'test'}varperson=newObject();setName(person);3.2.3函数返回值JavaScript函数使用关键字return返回值。函数内部处理结果可以通过return返回,这样在调用函数的位置就可以用变量接收返回的处理结果。可以使用return关键字返回任何类型的数据或表达式,但也可以什么都不返回(不使用return)。3-12.html和3-13.html的实例比较了不使用与使用return的区别。3-12.html代码如下所示(位置:单元3/3-12.html)。运行3-12.html,不输入用户名和密码,直接单击“登录”按钮,将弹出3个对话框,分别如下面几个图所示。<html><head><title>不使用return的验证测试</title><scriptlanguage="javascript">functionLogin_Click(){

if(document.form1.UsName.value==""){

alert('用户名为空');

}

if(document.form1.UsPwd.value==""){

alert('密码为空');

}

alert('登录成功');}</script></head><body><formname="form1"><inputtype="text"name="UsName">用户名<inputtype="password"name="UsPwd">密码<inputtype="button"name="Login"onClick="Login_Click();">登录</form></body></html>3.2.3函数返回值图

不使用return的验证测试结果1图

不使用return的验证测试结果2图

不使用return的验证测试结果33.2.3函数返回值3-13.html代码如下所示(位置:单元3/3-13.html)。<html><head><title>使用return的验证测试</title><scriptlanguage="javascript">functionLogin_Click(){

if(document.form1.UsName.value==""){

alert('用户名为空');

return;

}

if(document.form1.UsPwd.value==""){

alert('密码为空');

return;

}

alert('登录成功');}</script></head><body><formname="form1"><inputtype="text"name="UsName">用户名<inputtype="password"name="UsPwd">密码<inputtype="button"name="Login"onClick="Login_Click();">登录</form></body></html>而运行3-13.html,不输入用户名和密码,直接单击“登录”按钮,将只弹出1个对话框,如图所示。3.2.4函数调用模式1.函数调用模式函数调用模式是最常见也是最好理解的调用模式,是指在声明函数后直接调用函数。示例如下。functionfunc(){

alert("HelloWorld!");}func();上述代码声明一个函数func()并调用它。也可以用如下函数表达式定义函数,并调用函数。varfunc=function(){

alert("HelloWorld!");}func();这两段代码运行后都会弹出一个对话框,其中会显示字符串中的文字,这就实现了函数调用。由此可见,函数调用非常简单。这里的关键是,在函数调用模式中,函数里的this关键字指代的是全局对象。如果在浏览器中,则调用的就是window对象。示例如下。varfunc=function(){

alert(this);}func();运行上述代码,会弹出对话框,显示“[objectWindow]”。3.2.4函数调用模式2.方法调用模式如果将一个函数赋值给对象的成员,那么这里不再称其为函数,而应该称为方法。示例如下。varfunc=function(){ //定义一个函数func

alert("HelloWorld!");}varobj={};obj.fn=func; //将函数func赋值给一个对象成员,注意这里不加“()”obj.fn(); //调用varfunc=function(){

alert(this);}varobj={};obj.fn=func;alert(obj.fn===func);func();obj.fn();此时,obj.fn是方法而不是函数。实际上obj.fn的方法体与func的函数体是一样的,但二者有微妙的不同之处。示例如下:alert(obj.fn===func);输出结果为true,表明obj.fn和func是一样的。但是,下面修改func的代码。3.2.4函数调用模式3.构造器调用模式使用构造器调用模式调用函数时,在函数调用前面加上一个new关键字即可。示例如下。varPerson=function(){ //定义一个构造函数

="World";

this.sayHello=function(){

alert("Hello"+);

}}varp=newPerson(); //调用构造函数,创建对象p.sayHello(); //使用对象分析如下:首先定义函数Person,程序执行到这里时并不会执行函数体,因此JavaScript解释器并未解析该函数的内容;接下来使用new关键字创建对象,JavaScript解释器分配内存空间并得到对象的引用,将该引用传入函数;紧接着执行函数,将传递过来的对象引用交给this(这意味着在构造函数中,this就是刚刚被new创建出来的对象);然后为this添加成员,即为对象添加成员;最后函数执行完毕,返回this,将this交给左边的变量。所以,构造函数中的this指的就是当前对象本身。3.2.4函数调用模式4.Apply调用模式Apply调用模式既可以像函数调用模式一样使用,也可以像方法调用模式一样使用,其语法如下所示。函数名.apply(对象,参数数组);apply()方法接收两个参数,其中第1个参数是将被绑定给this的值,第2个参数是一个参数数组。示例如下。varfun1=function(){

="Hello";}fun1.apply(null);alert(name);varfun2=function(){

="World";}varobj={};fun2.apply(obj);alert();3.2.5递归调用递归调用即调用递归函数,递归函数就是在函数体内包含函数本身的函数。JavaScript递归函数最常用的实例是阶乘函数,示例如下。functionfactorial(num){

if(num<=1){

return1;

}else{

returnnum*factorial(num-1);

}}3.2.6作用域程序设计语言大多有作用域的概念。作用域是指变量和函数的可访问范围,控制着变量与函数的可见性和周期性。在JavaScript中,变量在声明它们的函数体及该函数体嵌套的任意函数体内都具有可见性。先来看下面一段代码(位置:单元3/3-14.html)。varscope="global";functionfun(){

console.log(scope);

varscope="local";

console.log(scope);}fun();根据函数作用域的含义,可以重写上述代码,如下所示。varscope="global";functionfun(){

varscope;

console.log(scope);

varscope="local";

console.log(scope);}fun();3.2.6作用域由于函数作用域的特性,局部变量在整个函数体内是有定义的,可以将变量声明提升到函数体顶部,同时变量初始化语句还在原来的位置,代码如下所示(位置:单元3/3-15.html)。varname="global";if(true){

varname="local";

console.log(name);}console.log(name);上述代码的输出全是local。如果有块级作用域,那么if条件语句内部将创建局部变量name,这并不会修改全局变量name的值,但实际情况相反,这说明JavaScript没有块级作用域。同理,在3-14.html中,变量scope覆盖了全局变量scope,但没有被赋值,所以第1个consloe.log()语句输出undefined。3.2.7异常处理

JavaScript异常是指在JavaScript引擎执行JavaScript代码时发生错误,这会导致程序立即停止执行。JavaScript引入了try…catch语句,作为处理异常的一种标准方式try…catch语句的语法如下所示。try{//可能发生错误的代码}catch(error){//发生错误时的处理方式}在发生错误时,可以通过以下方式显示浏览器给出的信息。try{window.someNonexistentFunction();}catch(error){alert(error.message);}finally子句也是JavaScript异常处理中常用的。finally子句一经使用,其代码无论如何都会执行。functiontestFinally(){

try{

return2;

}catch(error){

return1

}finally{

return0;

}}3.2.8闭包2.1.2小节已经介绍了JavaScript变量有全局变量和局部变量两种,在函数内部可以直接读取全局变量,而在函数外部无法读取函数内的局部变量。然而,在实际中,有时需要得到函数内的局部变量。通常情况下这无法办到,因此只能变通处理,即在函数内部定义一个函数。示例右侧所示下。functionfun1(){

varn=999;

functionfun2(){

alert(n);//输出:999

}}在上述代码中,fun2()函数被包括在fun1()函数内部,这时fun1()函数内部的所有局部变量对fun2()函数都是可见的。但是反过来,fun2()函数内部的局部变量对fun1()函数是不可见的。这就是JavaScript特有的“链式作用域”(chainscope)结构,子对象会一级一级地向上寻找父对象的变量,所以父对象的所有变量对子对象都是可见的,反之则不成立。既然fun2()函数可以读取fun1()函数中的局部变量,那么只要把fun2()函数作为返回值,就可以在fun1()函数外部读取其内部变量。示例如下(位置:单元3/3-16.html)。functionfun1(){

varn=999;

functionfun2(){

alert(n);

}

returnfun2;}varresult=fun1();result();由于在JavaScript中只有函数内部的函数才能读取局部变量,因此可以把闭包简单理解成“定义在一个函数内部的函数”。所以,闭包可以看作将函数内部和函数外部连接起来的一座“桥梁”。3.2.8闭包闭包可以用在许多地方,最常用的是读取函数内部的变量,而且可以让这些变量的值始终保存在内存中。示例如下(位置:单元3/3-17.html)。functionfun1(){

varn=999;

nAdd=function(){n+=1}

functionfun2(){

console.log(n);

}

returnfun2;}varresult=fun1();result();nAdd();result();3.2.9箭头函数创建函数有一种非常简单的方法,即箭头函数,其通常比使用函数表达式更好。箭头函数的语法如下所示。letfunc=(arg1,arg2,...,argN)=>expression;这里创建了一个函数func,其接收参数arg1,arg2,…,argN,使用参数对右侧的expression求值并返回结果。换句话说,箭头函数是下述代码的简短版本。letfunc=function(arg1,arg2,...,argN){

returnexpression;};如果只有一个参数,还可以省略参数外的圆括号,使代码更短。示例如下。letdouble=n=>n*2;//近似于letdouble=function(n){returnn*2}alert(double(3));//输出:6如果没有参数,圆括号中则没有内容(但圆括号必须保留)。示例如下。letsayHi=()=>alert("Hello!");sayHi();3.2.9箭头函数箭头函数可以像函数表达式一样使用。例如,使用箭头函数动态创建一个函数,代码如下所示。letage=prompt("Whatisyourage?",18);letwelcome=(age<18)?

()=>alert('Hello!'):

()=>alert("Greetings!");welcome();有时需要创建更复杂的函数,如函数体包含多行的表达式或语句。在这种情况下,可以使用花括号对表达式或语句进行标识。注意,用花括号进行标识之后,需要使用显式的return语句才能返回值(就像常规函数一样)。示例如下。letsum=(a,b)=>{//花括号表示开始一个多行函数

letresult=a+b;

returnresult;//如果使用了花括号,那么需要使用显式的return语句};alert(sum(1,2));//输出:3【商业案例】

学生信息管理系统——添加分页功能任务1实现分页统计及开发页面切换按钮观察图2.20,可以发现页面左下角显示了当前页面的页码和数据总条数。右下角是“上一页”按钮和“下一页”按钮,在非首页单击“上一页”按钮会展示前10条数据,单击“下一页”按钮会展示后10条数据;在首页单击“上一页”按钮时出现“已经是第一页了”的弹窗提示;在尾页单击“下一页”按钮时会出现“已经是最后一页了”的弹窗提示。用<div>标签作为底部分页部分的容器,左边部分只有页码和总条数是动态展示的,用<span>标签进行标识,同时分别添加不同的id属性,用来获取当前的元素节点并修改内容;右边部分用两个<button>标签实现分页按钮,同时分别添加不同的id属性,用来绑定不同的click事件。结构分析01使用HTML的标签实现页面的大致布局并搭建网页结构,同时给标签加上不同的类名和id属性,方便添加样式代码和绑定不同事件,代码如下所示(位置:学生信息管理系统-JavaScript版/index.html)。页面布局与结构搭建02【商业案例】

学生信息管理系统——添加分页功能<divclass="footer">

<divclass="pageInformation">

第<spanid="curPage"></span>页,

共<spanid="countPage"></span>条(每页显示10条)

</div>

<divclass="pageButton">

<buttonid="prePageButton">上一页</button>

<buttonid="nextPageButton">下一页</button>

</div></div>任务2开发页面切换功能【商业案例】

学生信息管理系统——添加分页功能1.结构分析定义一个index.js文件,将JavaScript代码写到该文件中,并在index.html中引入该文件。这里需要定义几个变量,分别表示每页显示的记录条数、当前页面的页码、数据的总行数和总页数。定义两个函数,一个用于展示当前页码,另一个用于实现页码切换。2.添加函数首先定义一个展示当前分页数据的函数displayPage,用于获取当前数据的总行数作为数据总数,从而计算当前页面应显示的数据记录;同时,将当前页面的页码和数据总条数的内容更新为计算出来的数据。然后定义一个实现页码切换的函数switchPage,通过id属性获取两个按钮的元素节点并添加click事件,将当前页码加1或减1,如果小于第一页的页码或者大于最后一页的页码则弹出提示,并重新调用displayPage函数渲染新的数据,代码如下所示(位置:学生信息管理系统-JavaScript版/index.js)。【商业案例】

学生信息管理系统——添加分页功能//分页constpageSize=10; //每页显示的记录条数letcurPage=0; //当前页面的页码letlen; //总行数letpage; //总页数constdisplayPage=()=>{

constbegin=(cur1)*pageSize;//起始记录号

letend=begin+pageSize;

if(end>len)end=len;

consttrList=document.querySelectorAll('#tdatatr');

trList.forEach((tr,i)=>{

if(i>=begin&&i<end){

tr.style.display='';}else{

tr.style.display='none';}

});

//显示第page页的记录

document.

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论