'JavaScript'에 해당되는 글 10건

2018.04.02 공백을 제거해주는 스크립트
2017.03.31 Chobocho Calc 2
2016.10.28 Simple calculator
2016.10.25 Clock
2016.09.29 Timer
2016.09.12 Samll lisp by Javascript
2016.04.23 Chobocho Calc 1 (1)
2011.11.15 글자수 세는 자바 스크립트
2010.11.30 Google chart API를 이용한 QR CODE 생성기 (3)
2010.06.15 Hex2Ascii Javascript code

공백을 제거해주는 스크립트

Coding/JavsScript 삽질기 2018.04.02 23:53

http://www.chobocho.com/javascript/remove_space.html

공감

sns신고

'Coding > JavsScript 삽질기' 카테고리의 다른 글

REST (REpresentational State Transfer) (0)	2018.07.04
공백을 제거해주는 스크립트 (0)	2018.04.02
Chobocho Calc 2 (0)	2017.03.31
Sam Loyd's unsolvable 15-puzzle (0)	2017.02.05

Posted by chobocho

TAG JavaScript

트랙백 0개, 댓글 0개가 달렸습니다

Chobocho Calc 2

Coding/JavsScript 삽질기 2017.03.31 00:45

* Javascript로 만든 계산기

http://www.chobocho.com/javascript/calc.html

* 문법

# : 주석

변수 수식 ::= 변수에 수식을 대입한다

= 수식 ::= 수식을 계산한다

* Source : https://github.com/chobocho/Calc

공감

sns신고

저작자표시

'Coding > JavsScript 삽질기' 카테고리의 다른 글

공백을 제거해주는 스크립트 (0)	2018.04.02
Chobocho Calc 2 (0)	2017.03.31
Sam Loyd's unsolvable 15-puzzle (0)	2017.02.05
Puzzle game (0)	2017.01.22

Posted by chobocho

TAG Calculator, JavaScript, 계산기

트랙백 0개, 댓글 0개가 달렸습니다

Simple calculator

Coding/JavsScript 삽질기 2016.10.28 01:28

<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>

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>

<tr>

</td>

</tr>

</table>

</body>

</HTML>

공감

sns신고

저작자표시

'Coding > JavsScript 삽질기' 카테고리의 다른 글

Puzzle game (0)	2017.01.22
Simple calculator (0)	2016.10.28
Clock (0)	2016.10.25
Puzzle (0)	2016.10.25

Posted by chobocho

TAG JavaScript, 계산기

트랙백 0개, 댓글 0개가 달렸습니다

Clock

Coding/JavsScript 삽질기 2016.10.25 23:23

<html>

<head>

<title> My Clock </title>

// 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>

<tr>

<td>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</body>

</html>

공감

sns신고

저작자표시

'Coding > JavsScript 삽질기' 카테고리의 다른 글

Simple calculator (0)	2016.10.28
Clock (0)	2016.10.25
Puzzle (0)	2016.10.25
Timer (0)	2016.09.29

Posted by chobocho

TAG clock, JavaScript

트랙백 0개, 댓글 0개가 달렸습니다

Timer

Coding/JavsScript 삽질기 2016.09.29 00:04

<html>

<head>

<title> Timer </title>

// 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>

<tr>

<td>

<button onClick="startTimer()" id="start" >Start</button>

<button onClick="resetTimer()" id="reset" disabled=true >Reset</button>

</td>

</tr>

<tr>

<td>

</td>

</tr>

</table>

</body>

</html>

공감

sns신고

저작자표시

'Coding > JavsScript 삽질기' 카테고리의 다른 글

Puzzle (0)	2016.10.25
Timer (0)	2016.09.29
Samll lisp by Javascript (0)	2016.09.12
Chobocho Calc 1 (1)	2016.04.23

Posted by chobocho

TAG JavaScript, Timer

트랙백 0개, 댓글 0개가 달렸습니다

Samll lisp by Javascript

Coding/JavsScript 삽질기 2016.09.12 22:39

Test : http://www.chobocho.com/javascript/lisp.html

Github : https://github.com/chobocho/SmallLisp

Javascript 로 만든 Small LIsp

Small Lisp 만들기

자바스크립트를 공부하면서 간단한 lisp interpreter를 만들어 보기로 하고,
구글링을 통해서 찾은 사이트 http://norvig.com/lispy.html를 참고하여서 만들어 보았다.

Test site : http://www.chobocho.com/javascript/lisp.html

1. 목 표

아래 코드를 실행 하여 결과를 출력

(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))

2. lisp test를 위한 입력용 list.html 제작

<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>

3. Small Lisp 제작

3.1 지원 할 명령어 리스트

Javascript 학습을 목적으로 만든 것이이서 최소한의 명령어만을 지원한다.

1)　+, -. *, /
2) <. >. =. <=. >=
3) define, if
4) lambda (* 쉬운 구현을 위하여 lambda의 인자로 lamdba 함수는 올 수 없도록 제한 함)

3.2 제작 순서

1)　+, -. *, /
2) <. >. =. <=. >=
3) define, if
4) lambda

3.3 사칙 연산 계산 ( +. -. *. / )

먼저 (+ 5 5)를 처리하는 코드를 만들어 보자.
먼저 (+ 5 5)를 파싱을 해주어야 한다. 이때, 파서를 따로 제작하지 않고,
javascript string 객체에서 지원하는 메소드를 이용한다.

3.3.1 space 기준으로 자르기 위하여, ( )를 ‘ ( ’ 와 ‘ ) ’ 로 앞뒤에 space를 붙여준다.

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,)

3.3.2 소스를 읽어서 ( ) 로 분리한다.

( ) 를 기준으로 파싱을 하기 위한 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

공감

sns신고

저작자표시

'Coding > JavsScript 삽질기' 카테고리의 다른 글

Timer (0)	2016.09.29
Samll lisp by Javascript (0)	2016.09.12
Chobocho Calc 1 (1)	2016.04.23
글자수 세는 자바 스크립트 (0)	2011.11.15

Posted by chobocho

TAG JavaScript, LISP

트랙백 0개, 댓글 0개가 달렸습니다

Chobocho Calc 1

Coding/JavsScript 삽질기 2016.04.23 00:41

2016년 목표 중 하나인 Javascript 계산기를 만들기 시작했다

Chrome의 디버깅 기능을 첨 써보고 감동 받았다. ^^;

공감

sns신고

저작자표시

'Coding > JavsScript 삽질기' 카테고리의 다른 글

Samll lisp by Javascript (0)	2016.09.12
Chobocho Calc 1 (1)	2016.04.23
글자수 세는 자바 스크립트 (0)	2011.11.15
Google chart API를 이용한 QR CODE 생성기 (3)	2010.11.30

Posted by chobocho

TAG Calculator, JavaScript, 계산기

트랙백 0개, 댓글 1개가 달렸습니다

글자수 세는 자바 스크립트

Coding/JavsScript 삽질기 2011.11.15 00:35

ChoboMemo!

[ 글자수 세기 ]

공감

sns신고

'Coding > JavsScript 삽질기' 카테고리의 다른 글

Chobocho Calc 1 (1)	2016.04.23
글자수 세는 자바 스크립트 (0)	2011.11.15
Google chart API를 이용한 QR CODE 생성기 (3)	2010.11.30
Hex2Ascii Javascript code (0)	2010.06.15

Posted by chobocho

TAG JavaScript, 글자수 세기, 자바스크립트

트랙백 0개, 댓글 0개가 달렸습니다

Google chart API를 이용한 QR CODE 생성기

Coding/JavsScript 삽질기 2010.11.30 00:54

http://chobocho.com/javascript/qrcode.html

공감

sns신고

'Coding > JavsScript 삽질기' 카테고리의 다른 글

글자수 세는 자바 스크립트 (0)	2011.11.15
Google chart API를 이용한 QR CODE 생성기 (3)	2010.11.30
Hex2Ascii Javascript code (0)	2010.06.15
[Flex] HEXA v0.1 (0)	2009.08.15

Posted by chobocho

TAG google api, JavaScript, QR code

트랙백 0개, 댓글 3개가 달렸습니다

Hex2Ascii Javascript code

Coding/JavsScript 삽질기 2010.06.15 23:54

Hex값을 Ascii로 바꿔주는 자바스크립트

h2a.zip

공감

sns신고

'Coding > JavsScript 삽질기' 카테고리의 다른 글

Google chart API를 이용한 QR CODE 생성기 (3)	2010.11.30
Hex2Ascii Javascript code (0)	2010.06.15
[Flex] HEXA v0.1 (0)	2009.08.15
[Flex] 계산기 (0)	2009.07.25