网页设计与制作案例教程（HTML5 CSS3 JavaScript）（微课版）（第2版） 教案 案例22简单计算器

教案22案例22简单计算器计划学时2学时知识目标掌握JavaScript的分支语句的使用语法掌握JavaScript中数据类型转换的方法熟悉JavaScript的事件及事件调用方法能力目标能使用JavaScript编写代码实现简单计算器会使用开发者工具调试JavaScript的程序素质目标在编写代码中遵循正确的编写代码规范在编写代码中培养认真细致、精益求精的工匠精神教学重点JavaScript的分支语句数据类型转换教学难点事件及事件调用教学模式教学做一体化线上+线下混合式教学教学活动及主要环节素质培养第1学时（案例分析实现）=1\*ROMANI.问题讨论：（5分钟）对同学们课前观看微课过程中的疑难问题展开讨论。=2\*ROMANII.案例分析与实现：（40分钟）一、案例描述创建简单计算器，编写JavaScript代码，实现四则运算，当输入数据不合法时（输入非数值型数据或除数为0）进行提示，运行效果如图22-1所示。具体要求如下。（1）添加3个文本框，用于输入两个数和显示计算结果。（2）添加下拉列表框，用于选择运算符。（3）添加“计算”按钮，单击该按钮时进行计算，将结果显示到“结果”文本框中。（4）输入非数值型数据或者除数为0时，出现警示对话框，给予操作提示。图22-1简单计算器案例分析在页面上添加盒子，在盒子中添加标题<h2>标记和四对<p>标记，在<p>标记中放入提示信息和相应控件，输入数据和显示结果的控件使用<input>标记定义，下拉列表框使用<select>标记定义，“计算”按钮使用<input>标记定义，定义盒子和控件的样式。创建脚本文件，编写JavaScript代码，使用document对象的getElementById()方法获取输入的数据和运算符，通过多分支语句完成运算。案例实现学生同步操作，做学教一体1．创建表单：<div

id="box">

<h2>简单计算器</h2>

<p>请输入第一个数：<input

id="num1"

type="text"></p>

<p>请输入第二个数：<input

id="num2"

type="text"></p>

<p>运算符：

<select

id="opt">

<option

value="+"

selected>+</option>

<option

value="-">-</option>

<option

value="*">*</option>

<option

value="/">/</option>

</select>

<input

type="button"

value="计算"

onclick="calc()">

</p>

<p>结果：<input

id="result"

type="text"></p>

</div>2．定义表单的CSS样式3．创建JavaScript脚本文件<script

type="text/javascript">

function

calc()

{

//定义函数

var

num1

=

document.getElementById('num1').value; //获取第一个数

var

num2

=

document.getElementById('num2').value;

//获取第二个数

num1

=

parseFloat(num1)

&&

Number(num1);

//

num2

=

parseFloat(num2)

&&

Number(num2);

//

var

result;

//定义存放结果的变量

if

(isNaN(num1)

||

isNaN(num2))

{

//如果输入数据不是数值型

alert('请输入数字');

//显示提示信息

return

false;

//返回

}

else

{

var

opt

=

document.getElementById('opt').value

//获取运算符

switch

(opt)

{

//根据运算符选择不同的分支进行计算

case

'+':

result

=

num1

+

num2;

break;

case

'-':

result

=

num1

-

num2;

break;

case

'*':

result

=

num1

*

num2;

break;

case

'/':

if

(num2

==

0)

{

//除数如果为0，则显示提示信息，不计算

alert("除数不能为0");

return;

}

else

{

result

=

num1

/

num2;

}

break;

}

d

}

}</script>第2学时（相关知识点）一、分支语句1．单分支<script

type="text/javascript">

var

score=prompt("请输入你的考试成绩："); //定义变量接收输入的数值

if(score>=90){

//如果条件成立，则弹出“你真棒！”

alert("你真棒！");

}

</script>2.双分支

<script

type="text/javascript">

var

score=prompt("请输入你的考试成绩：");

//定义变量接收输入的数值

if(score>=60){

alert("恭喜你，顺利通过！");

//条件成立，弹出“恭喜你，顺利通过！”

}

else{

alert("很不幸，你没通过！");

//条件不成立，弹出“很不幸，你没通过！”

}

</script>3．多分支<script

type="text/javascript">

var

score=prompt("请输入你的考试成绩：");

//定义变量接收输入的数值

if(score>=90){

//如果条件成立，则弹出“优秀！”

alert("优秀！");

}

else

if(score>=80){

alert("良好！");

}

else

if(score>=70){

alert("一般！");

}

else

if(score>=60){

alert("及格！");

}

else{

alert("不及格！");

}</script>4．多分支语句（switch语句）<script

type="text/javascript">

var

score=prompt("请输入你的考试成绩：");

//定义变量接收输入的数值

var

n=

Math.floor(score/10);

//向下取整

switch(n){

case

10:case

9:

alert("优秀！");break;

case

8:

alert("良好！");break;

case

7:

alert("一般！");break;

case

6:

alert("及格！");break;

default:

alert("不及格！");

}</script>二、数据类型转换1．隐式类型转换2．显式类型转换方法说明示例parseInt()将数据转换成整型parseInt("123.567")//返回123parseInt("123abc")//返回123parseInt("abc123")//返回NaNparseFloat()将数据转换为浮点型parseFloat("123.567")//返回123.567parseFloat("123abc")//返回123parseFloat("abc123")//返回NaNNumber()将数据转换成数字Number("3.14")

//返回3.14

Number("99a88")

//返回NaNNumber(false)

//返回0

Number(true)

//返回1Boolean()将数据转换成布尔型Boolean(undefined)//falseBoolean(1)//trueBoolean(0)//falseBoolean(NaN)//falseString()将数据转换成字符串型String(123)

//返回"123"toString()将数据转换成字符串型123.toString()//返回"123"例22-5：输入两个数，计算两数之和。略。三、事件与事件调用1．事件事件事件触发时机onclick单击时触发ondblclick双击时触发onmousedown按下任意鼠标按键时触发onmouseover鼠标指针进入时触发onmouseup释放任意鼠标按键