JavaScript编写计算器的发展史
JavaScript编写计算器的发展史：
编写一个普通的四则运算：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>四则运算</title>
</head>
<body>
<input type="text" id="x"/>
<select name="" id="opt">
<option value="0">+</option>
<option value="1">-</option>
<option value="2">*</option>
<option value="3">/</option>
</select>
<input type="text" id="y"/>
<button id="cal" onclick= "fn()">=</button>
<input type="text" id="result"/>
<script>
// add subtract multiply divide 用于计算的函数名
function add(leftnum,rightnum){
var res = leftnum+rightnum;
document.getElementById('result').value = res;
}
function subtract(leftnum,rightnum){
var res = leftnum-rightnum;
document.getElementById('result').value = res;
}
function multiply(leftnum,rightnum){
var res = leftnum*rightnum;
document.getElementById('result').value = res;
}
function divide(leftnum,rightnum){
if(rightnum == 0){
alert("除数不能为0");
return;
}
var res = leftnum/rightnum;
document.getElementById('result').value = res;
}
function fn(){
var str1=Number(document.getElementById('x').value);
var str2=Number(document.getElementById('y').value);
comp=document.getElementById('opt').value;
var result;
switch(comp) {
case '0':
add(str1,str2);
break;
case '1':
subtract(str1,str2);
break;
case '2':
multiply(str1,str2);
break;
case '3':
divide(str1,str2);
break;
}
}
</script>
</body>
</html>
实现效果：
缺点：
该代码的所有的方法以及变量都在全局环境中，有污染全局环境的问题；
使用对象来封装方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>四则运算</title>
</head>
<body>
<input type="text" id="x"/>
<select name="" id="opt">
<option value="0">+</option>
<option value="1">-</option>
<option value="2">*</option>
<option value="3">/</option>
</select>
<input type="text" id="y"/>
<button id="cal" onclick= "fn()">=</button>
<input type="text" id="result"/>
<script>
// add subtract multiply divide 用于计算的函数名
var calculator = {}; //放入其中
calculator.add = function(leftnum,rightnum){
var res = leftnum+rightnum;
document.getElementById('result').value = res;
}
calculator.subtract = function (leftnum,rightnum){
var res = leftnum-rightnum;
document.getElementById('result').value = res;
}
calculator.multiply = function (leftnum,rightnum){
var res = leftnum*rightnum;
document.getElementById('result').value = res;
}
calculator.divide = function (leftnum,rightnum){
if(rightnum == 0){
alert("除数不能为0");
return;
}
var res = leftnum/rightnum;
document.getElementById('result').value = res;
}
function fn(){
var str1=Number(document.getElementById('x').value);
var str2=Number(document.getElementById('y').value);
comp=document.getElementById('opt').value;
switch(comp) {
case '0':
calculator.add(str1,str2);
break;
case '1':
calculator.subtract(str1,str2);
break;
case '2':
calculator.multiply(str1,str2);
break;
case '3':
calculator.divide(str1,str2);
break;
}
}
</script>
</body>
</html>
实现效果：
缺点：
依旧存在属性在全局环境的问题；
使用闭包以及自执行函数实现计算器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="x" />
<select name="" id="opt">
<option value="0">+</option>
<option value="1">-</option>
<option value="2">*</option>
<option value="3">/</option>
</select>
<input type="text" id="y"/>
<button id="cal">=</button>
<input type="text" id="result" />
<script>
// 方法不会污染全局作用域
var calculator = (function(){
function add(x,y){
return parseInt(x)+parseInt(y);
}
function subtract(x,y){
return parseInt(x)-parseInt(y);
}
function multiply(x,y){
return parseInt(x)*parseInt(y);
}
function divide(x,y){
if(y == 0){
alert('除数不能为零');
return;
}
return parseInt(x)/parseInt(y);
}
return {
add:add,
subtract:subtract,
multiply:multiply,
divide:divide
}
})();
var oX = document.getElementById('x');
var oY = document.getElementById('y');
var oOpt = document.getElementById('opt');
var oCal = document.getElementById('cal');
var oResult = document.getElementById('result');
//事件监听
oCal.addEventListener('click',function(){
var x = oX.value.trim();
var y = oY.value.trim();
var opt = oOpt.value;
var result = 0;
switch(opt){
case '0':
result = calculator.add(x,y);
break;
case '1':
result = calculator.subtract(x,y);
break;
case '2':
result = calculator.multiply(x,y);
break;
case '3':
result = calculator.divide(x,y);
}
oResult.value = result;
})
</script>
</body>
</html>
使用监听器来实现click后的发生事件：
oCal.addEventListener('click',function(){
})
使用自执行函数与闭包缩小了方法的作用域，只在calculator对象调用方法后起作用。
var calculator = (function(){
function add(x,y){
}
function subtract(x,y){
}
function multiply(x,y){
}
function divide(x,y){
}
//返回的是一个对象
return {
add:add,
subtract:subtract,
multiply:multiply,
divide:divide
}
})();
最终版：实现不改变原代码的结构，增加功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="x" />
<select name="" id="opt">
<option value="0">+</option>
<option value="1">-</option>
<option value="2">*</option>
<option value="3">/</option>
<option value="4">%</option>
</select>
<input type="text" id="y"/>
<button id="cal">=</button>
<input type="text" id="result" />
<script>
// 方法不会污染全局作用域
var calculator = (function(cal){
function add(x,y){
return parseInt(x)+parseInt(y);
}
function subtract(x,y){
return parseInt(x)-parseInt(y);
}
function multiply(x,y){
return parseInt(x)*parseInt(y);
}
function divide(x,y){
if(y == 0){
alert('除数不能为零');
return;
}
return parseInt(x)/parseInt(y);
}
cal.add = add;
cal.subtract = subtract;
cal.multiply = multiply;
cal.divide = divide;
return cal;
})(calculator || {}); // 采用自执行函数，如果没有传参的话则对象为空，有的话则正常传参
var calculator = (function(cal){
cal.mod = function(x,y){
return x%y;
}
return cal;
})(calculator || {});
var oX = document.getElementById('x');
var oY = document.getElementById('y');
var oOpt = document.getElementById('opt');
var oCal = document.getElementById('cal');
var oResult = document.getElementById('result');
//事件监听
oCal.addEventListener('click',function(){
var x = oX.value.trim();
var y = oY.value.trim();
var opt = oOpt.value;
var result = 0;
switch(opt){
case '0':
result = calculator.add(x,y);
break;
case '1':
result = calculator.subtract(x,y);
break;
case '2':
result = calculator.multiply(x,y);
break;
case '3':
result = calculator.divide(x,y);
case '4':
result = calculator.mod(x,y);
}
oResult.value = result;
})
</script>
</body>
</html>
运行效果：
我们采用下面的这种格式实现所有方法以及属性都不在全局环境中：
var calculator = (function(cal){
cal.mod = function(x,y){
return x%y;
}
return cal;
})(calculator || {});
好处：可以灵活的增加功能并且增加功能与原来的功能的代码顺序无所谓，
Node.js的前置知识：
全局对象的使用：
// 全局对象
global.foo = 'var';
console.log(global.foo);
简单的http服务器：
// 导入http包
//require 是导包
var http = require('http');
// 创建服务器
http.createServer(function(req,res)
{
//有请求的话，响应返回：hello world
res.end('hello world');
}).listen(3000,'127.0.0.1'); //监听地址以及端口
使用方式：
打开浏览器：
输入：http://127.0.0.1:3000或者localhost:3000
结束方式：Ctrl-C
利用上述知识，实现模块之间的数据共享：
info.js
//node中一个js就是一个模块
//向外公开age变量
module.exports.age = '10';
// 公开一个函数
module.exports.sayHello = function(){
console.log('hello');
}
var name = 'tom';
test.js
// 加载模块
var myModule = require('./info');
console.log(myModule);
myModule.sayHello();
console.log(myModule.name); //访问不到
nodeJs实现计算器：
文件目录：
add.js
module.exports = function add(x,y){
return parseInt(x)+parseInt(y);
}
divide.js
module.exports = function divide(x,y){
if(y == 0){
alert('除数不能为零');
return;
}
return parseInt(x)/parseInt(y);
}
multiply.js
module.exports = function multiply(x,y){
return parseInt(x)*parseInt(y);
}
subtract.js
module.exports = function subtract(x,y){
return parseInt(x)-parseInt(y);
}
index.js
module.exports = {
add:require('./add'),
subtract:require('./subtract'),
multiply:require('./multiply'),
divide:require('./divide')
};
我们访问的就是index.js一个文件即可
var cal = require('./index');
console.log(cal.add(1,2));
console.log(cal.subtract(1,2));
console.log(cal.multiply(1,2));
console.log(cal.divide(1,2));
实现效果：
结束：
今天的知识点到这里结束了，通过这些前置知识点，下一次将进行模块化的演变过程等；
如果你看到这里或者正好对你有所帮助，希望能点个关注或者推荐，感谢；
有错误的地方，欢迎在评论指出，作者看到会进行修改。
JavaScript编写计算器的发展史的更多相关文章
- 纯javascript代码编写计算器程序
今天来分享一下用纯javascript代码编写的一个计算器程序,很多行业都能用到这个程序,例如做装修预算.贷款利率等等. 首先来看一下完成后的效果: 具体代码如下:(关注我的博客,及时获取最新WEB前 ...
- JavaScript 如何编写计算器
1.JavaScript制作计算器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- 学习笔记之javascript编写简单计算器
感觉自己的的实力真的是有待提高,在编写计算器的过程中,出现了各种各样的问题,暴露了自己的基础不扎实,逻辑思维能力不够,学得知识不能运用到自己的demo中区.先介绍一些这个这个计算器的整体思路.大致 ...
- artDialog是一个基于javascript编写的对话框组件，它拥有精致的界面与友好的接口
artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口 自适应内容 artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应 ...
- 用Javascript编写Chrome浏览器插件
原文:http://homepage.yesky.com/62/11206062.shtml 用Javascript编写Chrome浏览器插件 2010-04-12 07:30 来源:天极网软件频道 ...
- javascript 编写的贪吃蛇
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- three.js是JavaScript编写的WebGL第 三方库
three.js是JavaScript编写的WebGL第 三方库.提供了非常多的3D显示功能.Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机.光影.材质 ...
- JavaScript编写了一个计时器
初学JavaScript,用JavaScript编写了一个计时器. 设计思想: 1.借助于Date()对象,来不断获取时间点: 2.然后用两次时间点的毫秒数相减,算出时间差: 3.累加时间差,这样就能 ...
- javascript编写一个简单的编译器(理解抽象语法树AST)
javascript编写一个简单的编译器(理解抽象语法树AST) 编译器 是一种接收一段代码,然后把它转成一些其他一种机制.我们现在来做一个在一张纸上画出一条线,那么我们画出一条线需要定义的条件如下: ...
随机推荐
- 多条件分页 （Day_31）
接我的上篇博客 EasyUI_使用datagrid分页 (Day_28) . 按惯例,我们先看效果图 EasyUI 实现多条件分页很简单. 我们先来通过官网了解下这两个属性: 显然,有了load 方 ...
- GO学习-(38) Go语言结构体转map[string]interface{}的若干方法
结构体转map[string]interface{}的若干方法 本文介绍了Go语言中将结构体转成map[string]interface{}时你需要了解的"坑",也有你需要知道的若 ...
- RMAN-06172: no AUTOBACKUP found or specified handle is not a valid copy or piece
问题描述:将备份集从一台主机拷贝到另外一台主机后,在通过RMAN将数据库恢复到同类机异机的时候,restore spfile一直报RMAN-06172: no AUTOBACKUP found or ...
- 字符识别OCR原理及应用实现
字符识别OCR原理及应用实现 文本是人类最重要的信息来源之一,自然场景中充满了形形色色的文字符号.光学字符识别(OCR)相信大家都不陌生,就是指电子设备(例如扫描仪或数码相机)检查纸上打印的字符,通过 ...
- 国内操作系统OS分析（上）
国内操作系统OS分析(上) 一．操作系统(OS)概述 操作系统(OS,Operating System),是管理.控制计算机软硬件资源的计算机程序,并为用户提供一个与系统交互的操作界面.OS是配置在计 ...
- Yolov3&Yolov4网络结构与源码分析
Yolov3&Yolov4网络结构与源码分析 从2018年Yolov3年提出的两年后,在原作者声名放弃更新Yolo算法后,俄罗斯的Alexey大神扛起了Yolov4的大旗. 文章目录 1. 论 ...
- 前台JS遍历Table的所有单元格数据内容
在日常开发过程中为了减少与后台服务器的交互次数,大部分的功能都会放到前台使用JS来完成. 例如:一个表中有ID(FOCUS_SEQ)和Name(COLUMNCTRL)两个字段,其中ID是自定义连续增长 ...
- 二、部署监控服务器-Zabbix Server
二.部署监控服务器-Zabbix Server 1)源码安装Zabbix Server 多数源码包都是需要依赖包的,zabbix也- 样,源码编译前需要先安装相关依赖包. [root@zabbixse ...
- 四、SSL虚拟证书
沿用练习三,配置基于加密网站的虚拟主机,实现以下目标: 域名为www.c.com 该站点通过https访问 通过私钥.证书对该站点所有数据加密 4.2 方案 源码安装Nginx时必须使用--with- ...
- linux远程和软件包的管理
远程管理 ssh 用户名@对方IP地址 -X 在本地可以运行对方的图形程序 端口 22 [root@room9pc01 ~]# ssh root@172.25.0.11 [root@serve ...