Web前端技术(JavaScript+jQuery) 课件 任务5 制作简单运算器

Web前端技术主讲人：XXX

XXX学院任务5制作简单运算器【知识目标】

掌握算术运算符的应用；

掌握比较运算符的应用；

掌握逻辑运算符的应用；

掌握赋值运算符的应用；

掌握条件运算符的应用；

了解运算符优先级。【技能目标】

能够运用算术运算符进行算术运算；

能够运用比较运算符进行比较运算；

能够运用逻辑运算符对多条件进行运算；

能够根据需求运用赋值运算符进行赋值；

能够根据需求运用条件运算符实现不同的业务逻辑。【素质目标】

培养学生科学严谨的态度；

培养学生勇于探索的精神。教学目标知识导图

算术运算符算术运算符算术运算符是一种在程序设计语言中用于对数值作算术运算的符号，它用于对两个变量或值进行算术运算。（1）+

，加法运算符，主要用于加法运算。算术运算符（2）-

，减法运算符，主要用于减法运算。算术运算符（3）*

，乘法运算符，主要用于乘法运算。算术运算符（4）/

，除法运算符，主要用于除法运算。算术运算符（5）%

，求余运算符，主要用于求余数。【案例】通过输入框输入数字，并判断该数字是奇数还是偶数，然后通过弹窗的方式输出判断结果。算术运算符（6）++

，递增运算符，每执行一次增加1，通常与变量结合使用。①前置递增，如++i。②后置递增，如i++。算术运算符（7）--，递减运算符，每执行一次减少1，通常与变量结合使用。①前置递减，如--i。②后置递减，如i--。

比较运算符比较运算符比较运算符也称关系运算符，主要用于对两个数据进行比较，其结果是一个布尔值。运算符说明示例>大于leta=8,b=5;console.log(a>b);//输出结果：trueconsole.log(a>10);//输出结果：false<小于leta=5,b=10;console.log(a<b);//输出结果：trueconsole.log(b<a);//输出结果：false>=大于等于leta=5,b=2;console.log(a>=b);//输出结果：trueconsole.log(5>=6);//输出结果：false<=小于等于leta=7,b=3;console.log(a<=b);//输出结果：falseconsole.log(a<=7);//输出结果：true比较运算符比较运算符也称关系运算符，主要用于对两个数据进行比较，其结果是一个布尔值。运算符说明示例==等于leta=2,b=2;console.log(a==b);//输出结果：trueconsole.log(5==4);//输出结果：false!=不等于console.log(3!=2);//输出结果：trueconsole.log(3!=3);//输出结果：false===全等（要同时比较值和数据类型）leta=3,b=3;console.log(a===b);//输出结果：trueleti=6,j='6';console.log(i===j);//输出结果：false!==不全等（要同时比较值和数据类型）leta=3,b=3;console.log(a!==b);//输出结果：falseleti=6,j='6';console.log(i!==j);//输出结果：true

逻辑运算符逻辑运算符逻辑运算符用于对布尔值进行运算，其返回值也是布尔值，通常用于条件判断。运算符说明示例&&与（可以理解为而且、并且），其运算规则是：当条件表达式中所有条件为true时，运算的结果为true;当条件表达式中有一个条件为false时，运算结果为false。console.log(3>2&&5<7);//结果：trueletuser=”test”,pwd=”123”;console.log(user==”test”&&pwd==”1234”);//结果：false||或（可以理解为或者），其运算规则是：当条件表达式中只要有一个条件为true，运算结果为true；当条件表达式中所有条件为false时，运算结果为false。letage=18;letheight=160;console.log(age>=18||height>=170);

//结果：true。！非（可以理解为取反。leta=true;console.log(!a);//结果：false逻辑运算符【案例】验证用用户输入的账号、密码是否正确。

具体实施步骤参考如下。

（1）通过输入框获取账号

（2）通过输入框获取密码

（3）使用条件语句对账号和密码的正确性进行验证，如果正确弹出输出“登录成功！”，否则弹

窗输出“你输入的账号或密码不正确！”。

赋值运算符赋值运算符赋值运算符用于将右边的值赋给左边的变量。运算符说明示例=赋值leta=8;//把数字8赋给变量aconsole.log(a);//输出结果：8+=加并赋值（连接并赋值）leta=5;a+=2;//相当于a=a+2console.log(a);//输出结果：7-=减并赋值leta=5;a-=2;//相当于a=a-2console.log(a);//输出结果：3*=乘并赋值leta=5;a*=2;//相当于a=a*2console.log(a);//输出结果：10/=除并赋值leta=5;a/=2;//相当于a=a/2console.log(a);//输出结果：2.5%=求余并赋值leta=5;a%=2;//相当于a=a%2console.log(a);//输出结果：1

条件运算符Eval()函数条件运算符也称三元运算符，根据给定的条件来判断返回运算结果。语法格式如下。条件表达式?表达式1:表达式2说明：（1）如果条件表达式为true，则返回表达式1的执行结果；（2）如果条件表达式为false，则返回表达式2执行的结果。【案例】根据输入的年龄判断是否成年。具体的业务逻辑为：如果年龄大于等于18，则弹窗输出“已成年！”，否则弹窗输出“未成年！”。条件运算符嵌套语法通过条件运算符的嵌套，可以对多个条件进行判断，从而返回更加多样的运算结果。语法格式如下。条件表达式1?表达式1:条件表达式2?表达式2:表达式3说明：

如果条件表达式1为true，则返回表达式1的执行结果；否则判断条件表达式2，如果条件表达式2为true，则返回表达式2执行的结果，否则返回表达式3执行的结果。【案例】根据输入的年龄判断是否成年。具体的业务逻辑如下。（1）如果输入的数字小于0或大于120，则弹窗输出“你输入的年龄不合法！”（2）如果年龄大于等于18，则弹窗输出“已成年！”，否则弹窗输出“未成年！”。eval()函数条件运算符基本语法e