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

  1. 2016.10.25 Clock
  2. 2016.10.25 Puzzle
  3. 2016.09.29 Timer
  4. 2016.09.12 Samll lisp by Javascript
  5. 2016.04.23 Chobocho Calc 1 1
  6. 2011.11.15 글자수 세는 자바 스크립트 2
  7. 2010.11.30 Google chart API를 이용한 QR CODE 생성기 3
  8. 2010.06.15 Hex2Ascii Javascript code
  9. 2009.08.15 [Flex] HEXA v0.1
  10. 2009.07.25 [Flex] 계산기
Coding/JavsScript 삽질기2016. 10. 25. 23:23

Clock



<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
Puzzle  (0) 2016.10.25
Timer  (0) 2016.09.29
Posted by chobocho
Coding/JavsScript 삽질기2016. 10. 25. 23:21

Puzzle



<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
Timer  (0) 2016.09.29
Samll lisp by Javascript  (0) 2016.09.12
Posted by chobocho
Coding/JavsScript 삽질기2016. 9. 29. 00:04

Timer


<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
Samll lisp by Javascript  (0) 2016.09.12
Chobocho Calc 1  (1) 2016.04.23
Posted by chobocho
Coding/JavsScript 삽질기2016. 9. 12. 22:39

Samll lisp by Javascript

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
Chobocho Calc 1  (1) 2016.04.23
글자수 세는 자바 스크립트  (2) 2011.11.15
Posted by chobocho
Coding/JavsScript 삽질기2016. 4. 23. 00:41

Chobocho Calc 1

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


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



저작자표시

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

Samll lisp by Javascript  (0) 2016.09.12
글자수 세는 자바 스크립트  (2) 2011.11.15
Google chart API를 이용한 QR CODE 생성기  (3) 2010.11.30
Posted by chobocho
Coding/JavsScript 삽질기2011. 11. 15. 00:35

글자수 세는 자바 스크립트

ChoboMemo!

[ 글자수 세기 ]

Count
0 / 0

Text

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

Chobocho Calc 1  (1) 2016.04.23
Google chart API를 이용한 QR CODE 생성기  (3) 2010.11.30
Hex2Ascii Javascript code  (0) 2010.06.15
Posted by chobocho
Coding/JavsScript 삽질기2010. 11. 30. 00:54

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


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

글자수 세는 자바 스크립트  (2) 2011.11.15
Hex2Ascii Javascript code  (0) 2010.06.15
[Flex] HEXA v0.1  (0) 2009.08.15
Posted by chobocho
Coding/JavsScript 삽질기2010. 6. 15. 23:54

Hex2Ascii Javascript code

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

h2a.zip

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

Google chart API를 이용한 QR CODE 생성기  (3) 2010.11.30
[Flex] HEXA v0.1  (0) 2009.08.15
[Flex] 계산기  (0) 2009.07.25
Posted by chobocho
Coding/JavsScript 삽질기2009. 8. 15. 04:41

[Flex] HEXA v0.1

http://www.chobocho.com/flash/Hexa/index.html


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

Hex2Ascii Javascript code  (0) 2010.06.15
[Flex] 계산기  (0) 2009.07.25
[Flex] Hello, World!  (0) 2009.07.25
Posted by chobocho
Coding/JavsScript 삽질기2009. 7. 25. 09:48

[Flex] 계산기

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

[Flex] HEXA v0.1  (0) 2009.08.15
[Flex] Hello, World!  (0) 2009.07.25
Javascript로 만든 BASIC 에뮬레이터  (0) 2008.08.20
Posted by chobocho

티스토리툴바