태터데스크 관리자

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

태터데스크 메시지

저장하였습니다.

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

  1. 2019.04.28 Javascript로 그림판 만들기 (자바스크립트로 그림판 만들기)
  2. 2018.07.04 REST (REpresentational State Transfer)
  3. 2018.04.02 공백을 제거해주는 스크립트
  4. 2017.03.31 Chobocho Calc 2
  5. 2017.02.05 Sam Loyd's unsolvable 15-puzzle
  6. 2017.01.22 Puzzle game
  7. 2016.10.28 Simple calculator
  8. 2016.10.25 Clock
  9. 2016.10.25 Puzzle
  10. 2016.09.29 Timer

자바스크립트를 공부하면서, Canvas를 이용하여그림판을 만들어 보기로 했다.

완성된 그림판은 아래와 같다.

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

실행하기: http://www.chobocho.com/javascript/painter.html

소스코드 위치: https://github.com/chobocho/painter


1. 구현목표

a. 기본 그림판 기능

b. 이미지 저장 기능

c. 이미지를 Text로 저장하기

d. Text로 저장된 이미지를 불러오기

 

 

Posted by chobocho

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


참고 : 

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