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) 编译器 是一种接收一段代码,然后把它转成一些其他一种机制.我们现在来做一个在一张纸上画出一条线,那么我们画出一条线需要定义的条件如下: ...
随机推荐
- linux用户（组）及文件权限说明
写在前面: 在liunx系统中一切都是文件(文件夹和外设是特殊的文件),如果有可能尽量使用文本文件,文本文件是人.机都能够理解的文件.linux的用户(组)和权限完美的解决了linux系统的安全问题. ...
- String 是一个奇怪的引用类型
开局两张图,内容全靠刷! 马甲哥看到这样的现象,一开始还是有点懵逼. 这个例子,string是纯粹的引用类型,但是在函数传值时类似于值传递: 我之前给前后示例的内存变化图吧: 根因就是大多数高级语言都 ...
- 关于lua闭包导致引用无法释放内存泄露
最近项目存在严重的内存泄漏问题,每次切level 会增加20M无法释放的内存,翻遍了项目用了多个工具,查询资料等 发现项目中两种存在内存泄露的情况 1.lua闭包的不当使用,对比包的引用要及时 释放. ...
- Linux(CentOS7)下rpm安装MySQL8.0.16
记录一下自己在 CentOS7 下 rpm 安装 MySQL8.0.16 的过程. 一.准备工作 1. 下载MySQL所需要的安装包 从 MySQL官网 下载,上传至 CentOS 系统 /usr/l ...
- 上传靶机实战之upload-labs解题
前言 我们知道对靶机的渗透可以提高自己对知识的掌握能力,这篇文章就对上传靶机upload-labs做一个全面的思路分析,一共21个关卡.让我们开始吧,之前也写过关于上传的专题,分别为浅谈文件上传漏洞( ...
- [leetcode] (周赛)869. 重新排序得到 2 的幂
869. 重新排序得到 2 的幂 枚举排列,然后验证.比较暴力. 其实好一点的做法应该反过来,先把int范围下的2的N幂算出来,然后一个一个验证给出的数能不能拼成. class Solution { ...
- django2中namespace和name的使用
django2中namespace和name的使用 一.在Django <= 1.11 我们通过关键词namespace参数定义名称空间 1.projects/urls.py from ...
- springboot 非端口模式启动
@SpringBootApplication @ComponentScan(basePackages = {"demo.test"}) public class ReportApp ...
- 情景剧：C/C++中的未定义行为（undefined behavior）
写在前面 本文尝试以情景剧的方式,轻松.直观地解释C/C++中未定义行为(undefined behavior)的概念.设计动机.优缺点等内容1,希望读者能够通过阅读本文,对undefined beh ...
- 5G通讯与芯片
5G通讯与芯片 美国商务部可能接近达成一项新的规则,允许美国公司与华为重启谈判,在共同制定下一代通信技术5G标准方面进行合作. 华为美国首席安全官安迪·珀迪(Andy Purdy)向第一财经记者独家回 ...