태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

'Coding/JavsScript 삽질기'에 해당되는 글 18건

  1. 2018.04.02 공백을 제거해주는 스크립트
  2. 2017.03.31 Chobocho Calc 2
  3. 2017.02.05 Sam Loyd's unsolvable 15-puzzle
  4. 2017.01.22 Puzzle game
  5. 2016.10.28 Simple calculator
  6. 2016.10.25 Clock
  7. 2016.10.25 Puzzle
  8. 2016.09.29 Timer
  9. 2016.09.12 Samll lisp by Javascript
  10. 2016.04.23 Chobocho Calc 1 (1)

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

 

 

 

 

'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

* Javascript로 만든 계산기

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


* 문법

   # : 주석

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

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


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

'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



[ http://www.chobocho.com/javascript/puzzle_4x4_impossible.html ]

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

Chobocho Calc 2  (0) 2017.03.31
Sam Loyd's unsolvable 15-puzzle  (0) 2017.02.05
Puzzle game  (0) 2017.01.22
Simple calculator  (0) 2016.10.28
Posted by chobocho
TAG puzzle, 퍼즐


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



Javascript로 만든 puzzle 게임을 업데이트 했다. 


1) 타일이 올바른 위치에 오면 녹색으로 배경화면이 바뀌도록 개선

2) 타일을 다 맞추었을 때 화면 업데이트 오류 수정

 

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

Sam Loyd's unsolvable 15-puzzle  (0) 2017.02.05
Puzzle game  (0) 2017.01.22
Simple calculator  (0) 2016.10.28
Clock  (0) 2016.10.25
Posted by chobocho
TAG puzzle



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

'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



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

'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



<html>

    <head>

        <title> My Puzzle </title>

        <style>

            .tile {

              text-align:center;

              width:60px;

              height:60px;

              font-size:32px;

              background-color:"white";

              border:1px solid black;

              box-shadow:black 2px 2px;

            }

        </style> 

        <script language="JavaScript">

          // 2016.10.10

          

          var tile = [];

          var isPlay = false;

          var emptyTile = 0;

          

          function init() {

              var table = document.getElementById("puzzle");

          

              window.onkeydown = onKeyDown;

              window.onkeyup   = onKeyUp;

          

              for (var i = 0; i < 5; i++) {

                  var tr = document.createElement("tr");

                  for (var j = 0; j < 5; j++) {

                      var td = document.createElement("td");

                      td.className="tile";

                      var idx = i*5 + j;

                   

                      td.value = idx;

                      td.index = idx;

                      td.textContent = (idx === 0) ? "" : idx;

                      td.onclick = onClick;

                      tile.push(td);

                      tr.appendChild(td);

                  }

                  table.appendChild(tr);

              }

             

              alert("Click to Start!");             

              for (var i = 0; i < 1000; i++) {

                  onClick( {srcElement: {index : Math.floor(Math.random() * 25)}})

              }

              isPlay = true;

          }


          function onKeyDown(e) {

              if (!isPlay) return;

              var key = e.keyCode;

              var emTile = emptyTile;

              console.log("Key : " + key);

              console.log("Empty Tile : " + emptyTile);

              var x = emTile % 5;

              var y = emTile / 5;              

               

              switch(key) {

                  case 37: // LEFT

                      if (x+1 < 5) {

                           moveTile(emptyTile+1);

                      }                

                      break;

                  case 38: // UP

                      if (y+1 < 5) {

                           moveTile(emptyTile+5);

                      }

                      break;

                  case 39: // RIGHT

                      if (x-1 >= 0) {

                           moveTile(emptyTile-1);

                      }                

                      break;

                  case 40: // DOWN

                      if (y-1 >= 0) {

                           moveTile(emptyTile-5);

                      }

                      break;                      

                  default:

                      console.log("Error : Never come to here!");

                      break;

              }   

          }

          

          function onKeyUp(e) {

          }

          

          function onClick(e) {

              var clkTile = e.srcElement.index;

              moveTile(clkTile);

          }

          

          function moveTile(clkTile) { 

              var x = clkTile % 5;

              var y = clkTile / 5;


              if (x-1 >= 0 && tile[clkTile-1].value == 0) {

                  swap(clkTile-1, clkTile);

                  emptyTile = clkTile;

              }

              else if (x+1 <  5 && tile[clkTile+1].value == 0) {

                  swap(clkTile+1, clkTile);

                  emptyTile = clkTile;

              }

              else if (y-1 >=0 && tile[clkTile-5].value == 0 ) {

                  swap(clkTile-5, clkTile);

                  emptyTile = clkTile;

              }

              else if (y+1 < 5 && tile[clkTile+5].value == 0) {

                  swap(clkTile+5, clkTile);

                  emptyTile = clkTile;

              }

          }


          function swap(i, j) {

              var tmpValue = tile[i].value;

              var tmpContent = tile[i].textContent;

              tile[i].value = tile[j].value;

              tile[i].textContent = tile[j].textContent;

              tile[j].value = tmpValue;

              tile[j].textContent = tmpContent;

              

              if (isFinish()) {

                  alert("Success");

              }

          }

          

          function isFinish() {

              for (var i = 0; i < 5; i++) {

                  for (var j = 0; j < 5; j++) {

                      var idx = i*5 + j;

                      if (idx == 24) {

                          return true;

                      }

                      else if (tile[idx].value != (idx+1)) {

                          return false;

                      } 


                  }

              }

              return true;

          }          

        

        </script>

    </head>

    

    <body onload="init()">

         <table id="puzzle" align="center">

         </table>

    </body>

</html>

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

Clock  (0) 2016.10.25
Puzzle  (0) 2016.10.25
Timer  (0) 2016.09.29
Samll lisp by Javascript  (0) 2016.09.12
Posted by chobocho


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


'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

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를 참고하여서 만들어 보았다.

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


'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

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


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



'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