Javascript로 만든 계산기 입니다.
|
||||
|
'Coding > JavsScript 삽질기' 카테고리의 다른 글
[Javascript] Floppy Bird 게임 만들기 (0) | 2022.09.19 |
---|---|
JsCalculator 개인정보처리방침 / JsCalculator Privacy Policy (0) | 2022.08.24 |
만델브로트 집합 그리기2 (0) | 2022.02.03 |
Javascript로 만든 계산기 입니다.
|
||||
|
[Javascript] Floppy Bird 게임 만들기 (0) | 2022.09.19 |
---|---|
JsCalculator 개인정보처리방침 / JsCalculator Privacy Policy (0) | 2022.08.24 |
만델브로트 집합 그리기2 (0) | 2022.02.03 |
자바스크립트로 만델브로트 집합을 구현해 보았다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mandelbrot</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<style>
canvas {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div align='center'>
<canvas id="canvas"></canvas>
</div>
<script language="JavaScript">
// Start: 2022.02.02
// Update: 2022.02.02
let cvs;
let canvas;
let bufCanvas;
let bufCtx;
function InitCanvas() {
height = window.innerHeight;
width = window.innerWidth;
canvas = document.getElementById("canvas");
canvas.width = width;
canvas.height = height;
cvs = canvas.getContext("2d");
bufCanvas = document.createElement("canvas");
bufCanvas.width = canvas.width;
bufCanvas.height = canvas.height;
bufCtx = bufCanvas.getContext("2d");
}
function _draw() {
let imageData = bufCtx.createImageData(canvas.width, canvas.height);
const MAX_COUNT = 255;
// X = -3.0 ~ 3.0
// Y = -2.0 ~ 2.0
// Z = X + Yi
let mx = -3.0;
let my = -2.0;
let mw = 6.0;
let mh = 4.0;
let scaleX = mw / imageData.width;
let scaleY = mh / imageData.height;
for (let i = 0; i < imageData.height; i++) {
for (let j = 0; j < imageData.width; j++) {
let c = 0;
let x = mx + j * scaleX;
let y = my + i * scaleY;
let sx = x;
let sy = y;
for (c = 0; c < MAX_COUNT; c++) {
if (x**2 + y**2 > 4) {
break;
}
let nx = x**2 - y**2;
let ny = 2 * x * y;
x = nx + sx;
y = ny + sy;
}
let pos = 4 * (i * imageData.width + j);
imageData.data[pos+0] = c;
imageData.data[pos+1] = c;
imageData.data[pos+2] = c;
imageData.data[pos+3] = 255;
}
}
bufCtx.putImageData(imageData, 0, 0);
}
function OnDraw() {
_draw();
cvs.beginPath();
cvs.clearRect(0, 0, canvas.width, canvas.height);
cvs.drawImage(bufCanvas, 0, 0);
}
function onLoadPage() {
InitCanvas();
OnDraw();
}
window.onload = onLoadPage();
</script>
</body>
</html>
만델브로트 집합 그리기2 (0) | 2022.02.03 |
---|---|
[JavaScript] 회전하는 도넛과 구 그리기 (0) | 2022.01.20 |
[JavaScript] 회전하는 도넛 그리기 (0) | 2022.01.19 |
소개 (https://chobocho.tistory.com/2461396)
실행하기 http://www.chobocho.com/javascript/painter.html
전체 소스코드 https://github.com/chobocho/painter
chobocho/painter
Painter written html5. Contribute to chobocho/painter development by creating an account on GitHub.
github.com
원을 그리는 함수를 추가합니다.
circle = new Shape("Circle");
circle.mouseAction = new MouseAction(circleMouseUp, circleMouseDown, circleMouseMove);
function circleMouseDown(event) {
console.log("circleMouseDown");
if (painter.isDraw()) {
return;
}
bufCtx.drawImage(canvas, 0, 0);
var startPos = getMousePosition(event);
painter.shape.point.x = startPos.X;
painter.shape.point.y = startPos.Y;
painter.setDrawMode(true);
}
function circleMouseMove(event) {
if (!painter.isDraw()) {
return;
}
var currentPos = getMousePosition(event);
cvs.beginPath();
// Need a delay
cvs.clearRect(0, 0, canvas.width, canvas.height);
cvs.drawImage(bufCanvas, 0, 0);
cvs.strokeStyle = painter.getColor();
var circle = {
X: Math.round((painter.shape.point.x + currentPos.X) / 2),
Y: Math.round((painter.shape.point.y + currentPos.Y) / 2),
R: Math.round(Math.abs(currentPos.Y - painter.shape.point.y) / 2)
};
cvs.arc(circle.X, circle.Y, circle.R, 0, Math.PI * 2);
cvs.closePath();
cvs.stroke();
}
function circleMouseUp(event) {
if (!painter.isDraw()) {
return;
}
var currentPos = getMousePosition(event);
bufCtx.beginPath();
bufCtx.strokeStyle = painter.getColor();
var circle = {
X: Math.round((painter.shape.point.x + currentPos.X) / 2),
Y: Math.round((painter.shape.point.y + currentPos.Y) / 2),
R: Math.round(Math.abs(currentPos.Y - painter.shape.point.y) / 2)
};
bufCtx.arc(circle.X, circle.Y, circle.R, 0, Math.PI * 2);
bufCtx.closePath();
bufCtx.stroke();
cvs.clearRect(0, 0, canvas.width, canvas.height);
cvs.drawImage(bufCanvas, 0, 0);
painter.setDrawMode(false);
}
원과 선을 선택 할 수 있도록 html 파일에 함수를 연결 합니다.
[paint.js]
function selectShape(choosedShape) {
console.log("selectShape:" + choosedShape);
painter.setShape(choosedShape);
}
Painter 객체에 선, 원을 tools라는 자료형에 추가를 합니다.
Painter.prototype.init = function () {
line = new Shape("Line");
line.mouseAction = new MouseAction(lineMouseUp, lineMouseDown, lineMouseMove);
this.tools[line.name] = line;
circle = new Shape("Circle");
circle.mouseAction = new MouseAction(circleMouseUp, circleMouseDown, circleMouseMove);
this.tools[circle.name] = circle;
this.shape = this.tools["Line"];
this.color = "black";
}
function onLoadPage() {
// ...
painter = new Painter();
painter.init();
}
color 값은 모든 도형이 공통적으로 사용하므로,
shape 에서 painter 객체로 이동을 합니다.
Painter.prototype.init = function () {
// ...
this.color = "black";
}
여기까지 소스코드:
https://github.com/chobocho/painter/tree/master/doc/tutorial/006/src
chobocho/painter
Painter written html5. Contribute to chobocho/painter development by creating an account on GitHub.
github.com
공감과 댓글은 큰 도움이 됩니다.
Javascript로 그림판 만들기 (자바스크립트로 그림판 만들기) - 007 (0) | 2019.12.25 |
---|---|
Javascript로 그림판 만들기 (자바스크립트로 그림판 만들기) - 005 (0) | 2019.12.10 |
Javascript로 그림판 만들기 (자바스크립트로 그림판 만들기) - 004 (2) | 2019.11.26 |
REST (REpresentational State Transfer) (0) | 2018.07.04 |
---|---|
Chobocho Calc 2 (0) | 2017.03.31 |
Sam Loyd's unsolvable 15-puzzle (0) | 2017.02.05 |
* Javascript로 만든 계산기
http://www.chobocho.com/javascript/calc.html
* 문법
# : 주석
변수 수식 ::= 변수에 수식을 대입한다
= 수식 ::= 수식을 계산한다
* Source : https://github.com/chobocho/Calc
공백을 제거해주는 스크립트 (0) | 2018.04.02 |
---|---|
Sam Loyd's unsolvable 15-puzzle (0) | 2017.02.05 |
Puzzle game (0) | 2017.01.22 |
<HTML>
<head>
<title>Chobocho's Simple Calculator</title>
<style>
.tile {
text-align:center;
width:40px;
height:40px;
font-size:24px;
background-color:"white";
border:1px solid black;
box-shadow:black 1px 1px;
}
textarea {
height:100px;
width:200px;
text-align:right;
font-size:24px;
border:1px solid black;
box-shadow:black 1px 1px;
padding:2px;
}
</style>
<script language="JavaScript">
var sum = 0;
var ret = "";
var keypadValue = [ "AC", "←", "(", ")", "7", "8", "9", "÷", "4", "5", "6", "×", "1", "2", "3", "-", "0", ".", "=", "+" ];
function init() {
var table = document.getElementById("keypad");
window.onkeydown = onKeyDown;
window.onkeyup = onKeyUp;
for (var i = 0; i < 5; i++) {
var tr = document.createElement("tr");
for (var j = 0; j < 4; j++) {
var td = document.createElement("td");
td.className="tile";
var idx = i*4 + j;
td.value = idx;
td.index = idx;
td.textContent = keypadValue[idx];
td.onclick = onClick;
tr.appendChild(td);
}
table.appendChild(tr);
}
}
function onKeyUp(e) {
}
function onKeyDown(e) {
}
function onClick(e) {
var clkTile = e.srcElement.index;
var isClickEqual = false;
switch(clkTile) {
case 0 : // AC
sum = 0;
ret = "";
break;
case 1 : // <-
ret = ret.slice(0,-1);
break;
case 2 : // (
case 3 : // )
case 4 : // 7
case 5 : // 8
case 6 : // 9
case 7 : // ÷
case 8 : // 4
case 9 :
case 10 :
case 11 : // x
case 12 :
case 13 :
case 14 :
case 16 : // 0
case 19 : // +
ret = ret + keypadValue[clkTile];
break;
case 15 : // -
if (ret == "") {
ret = "-";
} else {
ret = ret + "-";
}
break;
case 17 : // .
if (ret == "") {
ret = "0.";
} else {
ret = ret + ".";
}
break;
case 18 : // =
if (ret == "" && sum != 0) {
ret = sum;
} else {
ret = ret.replace(/×/g, "*").replace(/÷/g, "/");
try {
sum = eval(ret);
} catch(e) {
sum = "Error";
}
ret = "";
}
isClickEqual = true;
break;
default:
break;
}
console.log("Exp : " + ret + " Sum : " + sum);
document.getElementById("result").value = isClickEqual ? sum : ret;
}
</script>
</head>
<body onload="init()">
<table id="keypad" align="center">
<tr>
<td colspan=4>
<textarea id="result" disabled=true cols="35" rows="1"></textarea>
</td>
</tr>
</table>
</body>
</HTML>
Puzzle game (0) | 2017.01.22 |
---|---|
Clock (0) | 2016.10.25 |
Puzzle (0) | 2016.10.25 |
<html>
<head>
<title> My Clock </title>
<script language="JavaScript">
// 2016.10.10
var cvs;
var clockWidth = 200;
function init() {
var canvas = document.getElementById("canvas")
cvs = canvas.getContext("2d");
drawPanel();
tick();
setInterval(tick, 1000);
}
function drawPanel() {
// Draw panel
cvs.strokeStyle = "black";
var width = clockWidth/2;
for (var i = 0; i < 12; i++) {
cvs.beginPath();
var r = Math.PI / 6 * i;
var size = 0.9;
cvs.moveTo(width + width * size * Math.sin(r), width + width * size * Math.cos(r));
cvs.lineTo(width + width * Math.sin(r), width + width * Math.cos(r));
cvs.closePath();
cvs.stroke();
}
}
function drawClock() {
var width = clockWidth/2;
cvs.strokeStyle = "black";
var currentTime = new Date();
var h = currentTime.getHours() % 12;
var m = currentTime.getMinutes();
var s = currentTime.getSeconds();
if ( s === 0 ) {
cvs.fillStyle = "white";
cvs.fillRect(0, 0, clockWidth, clockWidth);
drawPanel();
}
cvs.beginPath();
var rh = Math.PI / 6 * h + Math.PI / 6 * ( m / 60 );
var sizeh = 0.6;
cvs.moveTo(width, width);
cvs.lineTo(width + width * sizeh * Math.sin(rh), width - width * sizeh * Math.cos(rh));
cvs.closePath();
cvs.stroke();
cvs.beginPath();
var rm = Math.PI / 30 * m;
var sizeM = 0.7;
cvs.moveTo(width, width);
cvs.lineTo(width + width * sizeM * Math.sin(rm), width - width * sizeM * Math.cos(rm));
cvs.closePath();
cvs.stroke();
cvs.beginPath();
var rs = Math.PI / 30 * s;
var sizeS = 0.9;
var sizeS2 = 0.95;
cvs.strokeStyle = "red";
cvs.moveTo(width + width * sizeS * Math.sin(rs), width - width * sizeS * Math.cos(rs));
cvs.lineTo(width + width * sizeS2 * Math.sin(rs), width - width * sizeS2 * Math.cos(rs));
cvs.closePath();
cvs.stroke();
document.getElementById("time").textContent = ((h < 10) ? "0":"") + h + ":" + ((m < 10) ? "0":"") + m + ":" + ((s < 10) ? "0":"") + s;
}
function tick() {
drawClock();
}
</script>
</head>
<body onload="init()">
<table border="0" align="center">
<tr>
<td>
<canvas id="canvas" width="200" height="200"> </canvas>
</td>
</tr>
<tr>
<td align="center">
<span id="time"></span>
</td>
</tr>
</table>
</body>
</html>
Simple calculator (0) | 2016.10.28 |
---|---|
Puzzle (0) | 2016.10.25 |
Timer (0) | 2016.09.29 |
<html>
<head>
<title> Timer </title>
<script language="JavaScript">
// 2016. 9. 28
var timerId = NaN, mTime = 0;
function startTimer() {
mTime = document.getElementById("timer").value;
timerId = setInterval(tick, 1000);
document.getElementById("reset").disabled = true;
document.getElementById("start").disabled = true;
document.getElementById("stop" ).disabled = false;
document.getElementById("timer").disabled = true;
}
function stopTimer() {
clearInterval(timerId);
document.getElementById("reset").disabled = false;
document.getElementById("start").disabled = false;
document.getElementById("stop" ).disabled = true;
document.getElementById("timer").disabled = false;
}
function resetTimer() {
mTime = 0;
document.getElementById("timer").value = mTime;
}
function tick() {
mTime--;
document.getElementById("timer").value = mTime;
if (parseInt(mTime) <= 0) {
stopTimer();
alert("Time over!");
}
}
</script>
</head>
<body>
<table border=0 align="center">
<tr>
<td>
<button onClick="startTimer()" id="start" >Start</button>
<button onClick="stopTimer()" id="stop" disabled=true >Stop</button>
<button onClick="resetTimer()" id="reset" disabled=true >Reset</button>
</td>
</tr>
<tr>
<td>
<input id="timer"></input>
</td>
</tr>
</table>
</body>
</html>
Puzzle (0) | 2016.10.25 |
---|---|
Samll lisp by Javascript (0) | 2016.09.12 |
Chobocho Calc 1 (1) | 2016.04.23 |
Test : http://www.chobocho.com/javascript/lisp.html
Github : https://github.com/chobocho/SmallLisp
Javascript 로 만든 Small LIsp
자바스크립트를 공부하면서 간단한 lisp interpreter를 만들어 보기로 하고,
구글링을 통해서 찾은 사이트 http://norvig.com/lispy.html를 참고하여서 만들어 보았다.
아래 코드를 실행 하여 결과를 출력
(define pi 3)
(if (= pi 3) (+ 4 5) (* 4 5 ))
(define twice (lambda (x) (* 2 x)))
(twice 2)
(define forth (lambda (x) (* (twice x) (twice x))))
(forth 2)
(define fact (lambda (n) (if (<= n 1) 1 (* n (fact (- n 1))))))
(fact 16)
(fact (forth 2))
<HTML>
<head>
<title>Small lisp</title>
<script language="JavaScript" src="lisp.js"></script>
<script language="JavaScript">
function Run(form) {
form.result_view.value = main(form.source_view.value);
}
function ClearForm(form) {
form.result_view.value = "";
form.source_view.value = "";
}
</script>
</head>
<body>
<!------------------------------------------------------------------
// 입력양식
------------------------------------------------------------------->
<FORM name=source_code>
<TABLE cellSpacing=0 borderColorDark=white align=center borderColorLight=black border=1>
<TR>
<TD align="center">
[ Lisp source ]
</TD>
<TD align="center">
[ 결과 (Result) ]
</TD>
</TR>
<TR>
<TD width=160 height=40>
<SPAN style="FONT-SIZE: 9pt"><TextArea name="source_view" cols="50" rows="20"></textArea> </SPAN>
</TD>
<TD width=80 height=40>
<SPAN style="FONT-SIZE: 9pt"><TextArea name="result_view" cols="20" rows="20"></textArea> </SPAN>
</TD>
</TR>
<TR>
<TD align="center" width=246 colSpan=2 height=25>
<SPAN style="FONT-SIZE: 9pt"><INPUT type="button" value="Run", onClick="Run(this.form)"> </SPAN>
<SPAN style="FONT-SIZE: 9pt"><INPUT type="button" value="Clear", onClick="ClearForm(this.form)"> </SPAN>
</TD>
</TR>
<TR>
<TD width=240 colSpan=2>
Example<br>
(+ 1 2 3)<br>
</TD>
</TR>
</TABLE>
</FORM>
</body>
</HTML>
Javascript 학습을 목적으로 만든 것이이서 최소한의 명령어만을 지원한다.
먼저 (+ 5 5)를 처리하는 코드를 만들어 보자.
먼저 (+ 5 5)를 파싱을 해주어야 한다. 이때, 파서를 따로 제작하지 않고,
javascript string 객체에서 지원하는 메소드를 이용한다.
replace( /(/g, " ( " );
replace( /)/g, " ) " );
그러나, 구문 제일 앞의 ‘ (’ 와 ‘) ’의 스페이스는 trim()을 이용해 제거를 해주어야 한다.
그렇지 않으면, 파싱된 Token에 “ ”가 구문의 제일 앞과 뒤에 추가 된다.
이걸 정리하면 아래와 같은 코드가 나오고,
function main(args) {
//Tokenize
source_code = args.replace(/\(/g, " ( ").replace(/\)/g, " ) ").trim().split(/\s+/);
return source_code;
}
list.html 에서 아래와 같이 입력시에 ( + 1 2 3 )
아래와 같은 결과를 얻을 수 있다.
(,+,1,2,3,)
( ) 를 기준으로 파싱을 하기 위한 read_from_tokens() 함수를 만든다.
'(' 를 만나면, ')'를 만날 때 까지 값을 읽어서 그 값을 하나의 리스트에 저장한다.
')'를 만나면 리스트를 통째로 하나의 인자로 input 리스트에 인자로 넣는다.
function main(args) {
var Result = "";
//Tokenize
source_code = args.replace(/\(/g, " ( ").replace(/\)/g, " ) ").trim().split(/\s+/);
tokens = [];
read_from_tokens(source_code, tokens);
return tokens;
}
function read_from_tokens(input, output) {
token = input.shift();
switch(token) {
case undefined:
output.pop();
break;
case '(':
var list = [];
while (input[0] != ')') {
read_from_tokens(input, list);
}
input.shift(); // Remove ')'
output.push(list);
break;
case ')':
console.log("Error : Start with ')'!");
break;
default:
if ( isDigit(token.charAt(0))) {
output.push(parseInt(token));
} else {
output.push(token);
}
break;
}
}
function isDigit ( ch )
{
if ("0123456789".indexOf(ch) != -1)
return true;
return false;
}
list.html 에서 아래와 같이 입력시에
( + 1 2 3 )
아래와 같은 결과를 얻을 수 있다.
+,1,2,3
Timer (0) | 2016.09.29 |
---|---|
Chobocho Calc 1 (1) | 2016.04.23 |
글자수 세는 자바 스크립트 (2) | 2011.11.15 |
2016년 목표 중 하나인 Javascript 계산기를 만들기 시작했다
Chrome의 디버깅 기능을 첨 써보고 감동 받았다. ^^;
Samll lisp by Javascript (0) | 2016.09.12 |
---|---|
글자수 세는 자바 스크립트 (2) | 2011.11.15 |
Google chart API를 이용한 QR CODE 생성기 (3) | 2010.11.30 |
댓글을 달아 주세요