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) 编译器 是一种接收一段代码,然后把它转成一些其他一种机制.我们现在来做一个在一张纸上画出一条线,那么我们画出一条线需要定义的条件如下: ...
随机推荐
- IDEA 自定义文件头注释
什么是 IDEA 自定义文件头注释 IDEA 自定义文件头注释指的是创建 Java 类文件时,IDEA 可以自动设置文件头的注释信息,如下: 如何设置 IDEA 自定义文件头注释 打开 File-&g ...
- GO学习-(30) Go语言操作kafka
go操作kafka Kafka是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据,具有高性能.持久化.多副本备份.横向扩展等特点.本文介绍了如何使用Go语言发送和接收 ...
- Jmeter 录制 https协议是出现“您访问的不是安全链接”提示时
解决方法参考: https://blog.csdn.net/test_leader/article/details/112274549
- 如何保证mq不丢消息
1.消息的发送流程 一条消息从生产到被消费,将会经历3个阶段 生产阶段,Producer 新建消息,然后通过网络将消息投递给MQ Broker 存储阶段,消息将会存储在Broker端磁盘中 消费阶段, ...
- CUDA C++程序设计模型
CUDA C++程序设计模型 本章介绍了CUDA编程模型背后的主要概念,概述了它们在C++中的暴露方式.在编程接口中给出了CUDA C++的广泛描述. 使用的矢量加法示例的完整代码可以在矢量加法CUD ...
- 稀疏性如何为AI推理增加难度
稀疏性如何为AI推理增加难度 NVIDIA Ampere架构使数学运算加倍,以加速对各种神经网络的处理. 如果曾经玩过游戏Jenga,那么将有一些AI稀疏感. 玩家将木制积木交叉成一列.然后,每个玩家 ...
- Vue packages version mismatch的解决方法 初来乍到，踩坑日常
初来乍到,踩坑日常 这个问题也是我也是接受别人项目,出现的问题,在下载好依赖后运行的时候报这样的错误 它上面显示两个版本一个vue的版本,一个vue-template-compiler版本,我这边忘了 ...
- python常识系列14-->正则表达式基础之re模块
前言 勤奋的含义是今天的热血,而不是明天的决心,后天的保证. 一.正则表达式是什么? 描述了一种字符串匹配的模式(pattern) 功能一:用来检查一个字符串串是否含有某种子字符串 功能二:将匹配的子 ...
- Django工作流
1.Django的处理流程(没有涉及到数据库层的操作) 1-1:URL组成 http://127.0.0.1:8000/index/(协议:/ip地址:端口/主机上的目录或文件地址) 1-2:URLc ...
- Fedora 34成哑巴了？
原由 前几天刚更新了Fedora34,完全沉浸在Gnome40的喜悦中.但是今天用耳机听Apple Music的时候完全傻了,音量控制旋钮调了半天也没有声音,难道声卡坏了?于是,我试探性的用Parro ...