《（中职）JavaScript项目式实例教程项目二ppt课件.pptx》由会员分享，可在线阅读，更多相关《（中职）JavaScript项目式实例教程项目二ppt课件.pptx（39页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、（中职）JavaScript项目式实例教程项目二电子课件工信版 JavaScriptJavaScript项目式实例教程项目式实例教程项目二简单计算器简单计算器 判断结构判断结构 JavaScriptJavaScript项目式实例教程项目式实例教程设计一个简单的计算器，能进行加、减、乘、除四则运算。当用户运行网页时，依次弹出三个输入对话框，分别要求输入两个数和一个运算符号（+、-、）。输入无误时，在页面上打印计算算式。在进行除法运算时，除数不能为0，否则打印错误信息。如果输入数字格式错误或者输入的运算符号错误都提示相应的不能运算信息。项目情境 JavaScriptJavaScript项目式实例教
2、程项目式实例教程熟悉变量和常量的概念和使用方法。熟悉基本数据类型的概念熟悉数据类型的转换。熟悉关系运算符、逻辑运算符、算术运算符的使用方法。熟悉判断结构的使用方法。熟悉几个内置函数的使用方法。学习目标 JavaScriptJavaScript项目式实例教程项目式实例教程打开页面，打印程序中指定的姓名和性别。任务1 认识变量和字符串 JavaScriptJavaScript项目式实例教程项目式实例教程1、变量的定义定义一个变量用关键字var，例如：var x;var y;一个var也可以同时定义多个变量，这些变量间用逗号隔开，例如：var x,y,z;【相关知识】JavaScriptJavaSc
3、ript项目式实例教程项目式实例教程2、变量的赋值变量的赋值就是把值存储在变量所在的内存单元中,方法是用“=”运算符。赋值可以是在定义变量时，例如：var x=0;var y=1,z=2;也可以是在变量定义后使用时才赋值，例如：var x;x=0;【相关知识】JavaScriptJavaScript项目式实例教程项目式实例教程3、变量的命名变量的名称必须是由ASCII字符或者下划线（_）开头，第一个字符不能是数字，但其后可以是数字或者其他字母。例如如下变量的命名是合法的：aA_aa_1注意：JavaScript语言对大小写是敏感的，所以变量a和变量A是两个不同的变量。变量名不能定义为JavaS
4、cript的保留字。例如不能定义一个变量的名称为var或者function。【相关知识】JavaScriptJavaScript项目式实例教程项目式实例教程4、变量的类型【相关知识】数据数据类型型具体具体类型型基本基本数据类型数据类型 字符串型、数字型、布尔型复合数据复合数据类型型 对象、数组其他数据其他数据类型型 函数、null（空）、undefined（未定义）JavaScriptJavaScript项目式实例教程项目式实例教程5、常量与变量对应的是常量。常量用来表示一个固定不变的值。比如下面这些这些都是常量：12325.78张三true【相关知识】JavaScriptJavaScript
5、项目式实例教程项目式实例教程6、字符串型、字符串型6.1、字符串的定义字符串必须用双引号或者单引号包括起来。6.2、转义符转义符“”6.3、连接运算符连接运算符”+”【相关知识】JavaScriptJavaScript项目式实例教程项目式实例教程在标签内部输入以下代码：var name=张三;var sex=男;document.write(姓名：+name+性别：+sex);【任务实现】JavaScriptJavaScript项目式实例教程项目式实例教程打开页面，弹出一个输入对话框，要求输入姓名。输入确定后再次弹出输入对话框，要求输入性别。输入确定后，在页面打印刚刚输入的信息。任务2 输入对
6、话框 JavaScriptJavaScript项目式实例教程项目式实例教程1、Window对象对象window对象表示浏览器窗口。任何一个全局函数或变量都是windowd对象的属性，所以使用时，该对象常常省略不写。【相关知识】JavaScriptJavaScript项目式实例教程项目式实例教程2、prompt方法方法prompt方法的功能是弹出一个输入对话框，格式是：prompt(,默认值)其返回的值就是用户在对话框中输入的值,返回值的类型是字符串型。【相关知识】JavaScriptJavaScript项目式实例教程项目式实例教程在标签内部输入以下代码：var name=window.prom
7、pt(请输入您的姓名：,);var sex=window.prompt(请输入您的性别：,男);document.write(姓名：+name+性别：+sex);【任务实现】JavaScriptJavaScript项目式实例教程项目式实例教程打开页面，弹出一个输入对话框，要求输入一个整数。如果输入的不是一个整数，则给出错误提示。任务3 判断是否为整数 JavaScriptJavaScript项目式实例教程项目式实例教程1、表达式、表达式表达式可以是常量或者变量，也可以是由常量、变量和运算符号组成的语句。比如下面这些都是合法的表达式：4.56trueaba+b。【相关知识】JavaScriptJ
8、avaScript项目式实例教程项目式实例教程2、布尔数据类型、布尔数据类型布尔（boolean）是一种基本数据类型，表示真或者假，通俗的理解为是或者非，对或者错等。它常常用于判断一个结果的是非性。它的值只有两个：true（真）和false（假）。例如：84其结果就是false。再如：a大于ab小于a=大于或等于a=b=小于或等于a=b JavaScriptJavaScript项目式实例教程项目式实例教程4、判断语句4.1、if语句 if语句if()语句块语句块 if.else语句if()语句块语句块1else语句块语句块2【相关知识】JavaScriptJavaScript项目式实例教程项目
9、式实例教程 if.else if.else语句if()语句块1else if(条件2)语句块2else if()语句块nelse语句块n+1【相关知识】JavaScriptJavaScript项目式实例教程项目式实例教程 if语句的嵌套if语句允许嵌套，嵌套时注意if与else的匹配，不要出现交叉嵌套的现象。【相关知识】JavaScriptJavaScript项目式实例教程项目式实例教程4.2、switch语句switch()case：语句块1case：语句块2case：语句块ndefault:语句块n+1【相关知识】JavaScriptJavaScript项目式实例教程项目式实例教程5、三目
10、运算、三目运算三目运算是根据条件执行两个语句中的其中一个，格式如下：布尔表达式?语句1:语句2当“布尔表达式”值为真时，执行“语句1”；当“布尔表达式”值为假时，执行“语句2”。【相关知识】JavaScriptJavaScript项目式实例教程项目式实例教程在标签内部输入以下代码：var num=window.prompt(请输一个整数：,);if(parseInt(num)=num)document.write(num+是整数);elsedocument.write(num+不是整数);【任务实现】JavaScriptJavaScript项目式实例教程项目式实例教程打开页面，弹出一个输入对话
11、框，要求输入一个整数。如果输入的为奇数，确认后打印信息，提示该数为奇数。如果输入的为偶数，确认后打印信息，提示该数为偶数。如果输入的信息为以下情况中的一种，就视为不合法输入，提示错误。输入的不是数字。输入的是数字，但不是整数。未做任何输入。任务4 判断奇偶数 JavaScriptJavaScript项目式实例教程项目式实例教程1、逻辑运算符【相关知识】运算符运算符名称名称举例例备注注&逻辑与true&false(结果为false)98&78(结果为false)二元运算符。只有两个操作数的值都为true，结果才是true。|逻辑或true|false(结果为false)98|78(结果为fals
12、e)二元运算符。操作数中只要有一个值为true，结果就是true。只有两个操作数的值都为false，结果才是false。!逻辑非!true(结果为false)!98(结果为false)一元运算符。true的非是false,false的非是true。JavaScriptJavaScript项目式实例教程项目式实例教程2、算术运算符、算术运算符【相关知识】运算符运算符名称名称举例例备注注+加a+b二元运算符。加法运算，运算结果为数字型。-减a-b二元运算符。减法运算，运算结果为数字型。*乘a*b二元运算符。乘法运算，运算结果为数字型。/除a/b二元运算符。除法运算，运算结果为数字型。%模a%b二元
13、运算符。取余数运算，运算结果为数字型。+递增a+a一元运算符。相当于加1。要求操作数必须是变量。运算结果为数字型。-递减a-a一元运算符。相当于减1。要求操作数必须是变量。运算结果为数字型。JavaScriptJavaScript项目式实例教程项目式实例教程在标签输入下列代码：var num=window.prompt(请输一个整数：,0);if(!isNaN(num)&num!=&parseInt(num)=num)var res=num%2;if(res=0)document.write(num+是偶数);elsedocument.write(num+是奇数);elsedocument.w
14、rite(输入的数字格式不对，不能判断奇偶数);【任务实现】JavaScriptJavaScript项目式实例教程项目式实例教程打开页面，弹出输入对话框，要求输入一个被加数。输入确定后，再次弹出输入对话框，要求输入一个加数。输入确定后，打印这两个数的和。如果这两个数中只要有一个输入格式不正确，或者未输入任何值，都给出错误信息。任务5 加法加法运算器运算器 JavaScriptJavaScript项目式实例教程项目式实例教程1、数字型【相关知识】表表现形式形式举例例涵涵义整数整数198、234072、0650 xAF9、0 x56E十进制八进制（0开头）十六进制（0 x开头）浮点数浮点数1.0、
15、3.489有小数点科学科学计数法数法2.45E72.45107特殊数字特殊数字InfinityNaN无限大不是一个数字 JavaScriptJavaScript项目式实例教程项目式实例教程2、数据类型的转换2.1、隐式类型转换【相关知识】数据数据类型型在数字在数字环境下境下转换在字符串在字符串环境下境下转换在布在布尔环境下境下转换数字数字无转换为内容为数字的字符串NaN转换为NaN非0转换为true,0转换为falseNaN转换为false字符串字符串空字符串转换为0非空字符串转换为数字(字符内容为 数 字 时)或 者NaN(字符内容不是数字时)true转换为1false转换为0无空字符串转换
16、为false非空字符串转换为truetrue转换为truefalse转换为false布布尔true转换为1false转换为0转换为true转换为false无 JavaScriptJavaScript项目式实例教程项目式实例教程2.2、显示类型转换【相关知识】函数函数功能功能举例例结果果Number(字符串字符串)将字符串整体转换为数字。Number(4.56)Number(1.23.56)4.56NaNparseInt(字符串字符串)将字符串中第一个非数字字符前的字符转换为整型数字。parseInt(12abc)parseInt(abc12)parseInt(1.8)12NaN1parseFl
17、oat(字字符符串串)将字符串中第一个非数字字符前的字符转换为浮点型数字。parseFloat(1.2abc)parseFloat(abc1.2)parseFloat(1.2e3abc)1.2NaN1200 JavaScriptJavaScript项目式实例教程项目式实例教程在标签对中输入如下代码：var num1=window.prompt(请输入被加数：,0);var num2=window.prompt(请输入加数：,0);if(!isNaN(num1)&num1!=&!isNaN(num2)&num2!=)var res=parseFloat(num1)+parseFloat(num2
18、);document.write(num1+num2+=+res);elsedocument.write(输入的数格式不正确！);【任务实现】JavaScriptJavaScript项目式实例教程项目式实例教程任务6“项目项目二二”的实现的实现 JavaScriptJavaScript项目式实例教程项目式实例教程在标签对中输入以下代码：var num1=window.prompt(请输入第一个数：,0);var num2=window.prompt(请输入第二个数：,0);var op=window.prompt(请输入一个运算符号（+、-、）：,+);if(!isNaN(num1)&!isN
19、aN(num2)&num1!=&num2!=)var n1=parseFloat(num1);var n2=parseFloat(num2);var flag=0;var res=0;switch(op)case+:res=n1+n2;break;case-:res=n1-n2;break;【任务实现】JavaScriptJavaScript项目式实例教程项目式实例教程case:res=n1*n2;break;case:if(n2!=0)/如果除数为0res=n1/n2;elseflag=1;res=除数不能为0！;break;default:/如果输入的运算符不是+、-、中的任何一个flag=1;res=输入的运算符号错误！不能计算！;【任务实现】JavaScriptJavaScript项目式实例教程项目式实例教程if(flag=0)document.write(n1+op+n2+=+res);elsedocument.write(res);elsedocument.write(输入数字格式错误！不能计算！);【任务实现】