태터데스크 관리자

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

태터데스크 메시지

저장하였습니다.

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

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

REST (REpresentational State Transfer) 

HTTP Method
CRUD
POST
Create
Get
Read
PUT
Update
DELETE
Delete

Resource-based architecture
  • 관용적으로 API 이름에 동사 보다는 명사를 사용 함

6가지 제한 조건

  • Unifrom interface
    • HTTP 표준만 따르면 어떤 플랫폼에서도 사용 가능 ( HTTP+JSON / HTTP+XML )
  • Stateless
    • API 서버는 상태 정보를 저장 하지 않음
  • Client-server
  • Cacheable
  • Layered system
  • Code on demand


참고 : 

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

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

 

 

 

 

'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

* 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