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) 编译器 是一种接收一段代码,然后把它转成一些其他一种机制.我们现在来做一个在一张纸上画出一条线,那么我们画出一条线需要定义的条件如下: ...
随机推荐
- ELK学习实验019：ELK使用redis缓存
1 安装一个redis服务 [root@node4 ~]# yum -y install redis 直接启动 [root@node4 ~]# systemctl restart redis [roo ...
- JVM-运行时数据区之PC寄存器
1.运行时数据区图 运行时数据区是在类加载完成后所经历的阶段,当我们通过前面的:类的加载 --> 验证 --> 准备 --> 解析 --> 初始化,这几个阶段完成后,执行引擎就 ...
- vue相关面试知识点总结
vue v-for循环中为什么要用key?为什么index不能作为key? key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes.如 ...
- openresty 学习笔记番外篇:python的一些扩展库
openresty 学习笔记番外篇:python的一些扩展库 要写一个可以使用的python程序还需要比如日志输出,读取配置文件,作为守护进程运行等 读取配置文件 使用自带的ConfigParser模 ...
- NVIDIA CUDA-X AI
NVIDIA CUDA-X AI 面向数据科学和 AI 的 NVIDIA GPU 加速库 数据科学是推动 AI 发展的关键力量之一,而 AI 能够改变各行各业. 但是,驾驭 AI 的力量是一个复杂挑战 ...
- TensorFlow多元线性回归实现
多元线性回归的具体实现 导入需要的所有软件包: 因为各特征的数据范围不同,需要归一化特征数据.为此定义一个归一化函数.另外,这里添加一个额外的固定输入值将权重和偏置结合起来.为此定义函数 appe ...
- CUDA功能和通用功能
CUDA功能和通用功能 本文描述了类似于CUDA ufunc的对象. 为了支持CUDA程序的编程模式,CUDA Vectorize和GUVectorize无法产生常规的ufunc.而是返回类似ufun ...
- GitHub上YOLOv5开源代码的训练数据定义
GitHub上YOLOv5开源代码的训练数据定义 代码地址:https://github.com/ultralytics/YOLOv5 训练数据定义地址:https://github.com/ultr ...
- 神经网络AI加速器技术
神经网络AI加速器技术 能够直接加速卷积神经网络,还能够直接运行常见的网络框架,如TensorFlow.Caffe.PyTorch,DarkNet等,支持用户定制化的网络和计算类型. 功能特点: ● ...
- Mac设置charles证书信任