AR삽질러

유수봉 교수의 WEB-14주차 - JavaScript 본문

WEB/유수봉교수의 WEB

유수봉 교수의 WEB-14주차 - JavaScript

아랑팡팡 2023. 6. 7. 16:23
728x90

기존 페이지 내용 수정하는 js 실습

유수봉 교수의 - JSEx

유수봉 교수의 js_Ex01

​

▶ 작업

유수봉 교수의 js_Ex01

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>유수봉(202301001) : 기존 페이지에 내용 변경/추가하기</title>
</head>

<body>
    <h3>js_001 : 기존 페이지에 내용 변경/추가하기</h3>
    <hr>
    ▶데이터1 : <input id="data1" type="text" size="10"><br>
    ▶데이터2 : <input id="data2" type="text" size="10">
    <hr>
    <button type="button" onclick="F1()">작업1</button>
    <button type="button" onclick="F2()">작업2</button>
    <button type="button" onclick="F3()">작업3</button>
    <button type="button" onclick="F4()">작업4</button>
    <hr>
    <p id="result1">result1</p>
    <hr>
    <p id="result2">result2</p>
    <hr>
    <p id="result3">result3</p>
    <hr>

    <script>
        let data1 = document.getElementById("data1");
        let data2 = document.getElementById("data2");
        let result1 = document.getElementById("result1");
        let result2 = document.getElementById("result2");
        let result3 = document.getElementById("result3");

        function F1() {
            var X = "";
            X += "유수봉 만세<br>";
            X += "데이터1 = " + data1.value;
            result1.innerHTML = X;
        }
        function F2() {
            var X = "";
            if (data2.value.length > 0) {
                X += "유수봉 만만세<br>";
                X += "데이터2 * 2 = " + (data2.value * 2);
            }
            else {
                X += "(확인) 입력값이 없습니다.";
            }
            result2.innerHTML = X;
        }
        function F3() {
            var X = "";
            X += "입력 자료 확인\n---------------"
            X += "\n데이터1 = " + data1.value;
            X += "\n데이터2 = " + data2.value;
            confirm(X);
        }
        function F4() {
            var X = "";
            X += "<table border=1>";
            X += "<tr>";
            X += "<td>입력값</td>";
            X += "<td>";
            X += prompt("데이터를 입력하시오.")
            X += "</td>";
            X += "</tr>";
            X += "</table>";
            result3.innerHTML = X;
        }
    </script>
</body>

</html>

 

jsEx_03 : localStorage

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>유수봉(202301001) - 로컬 스토리지 사용하기</title>
</head>

<body>
    <h3>jsEx_03 : 로컬 스토리지 사용하기</h3>
    <hr>
    ▶학번 : <input id="sid" type="text" size="10">
    ▶이름 : <input id="name" type="text" size="10"><br>
    ▶전공 : <input id="major" type="text" size="10">
    ▶교양 : <input id="culture" type="text" size="10"><br>
    ▷합계 : <input id="total" type="text" style="background-color: lightgray; text-align:center;" size="10">
    ▷평균 : <input id="average" type="text" style="background-color: lightgray; text-align:center;" size="10"><br>
    <hr>
    <button type="button" id="save" style="background-color: lightgreen; height: 50px; width: 111px"
        onclick="store()">저장</button>
    <button type="button" id="retrieve" style="background-color: lightgreen; height: 50px; width: 111px"
        onclick="retrieve()">검색</button>
    <button type="button" id="listAll" style="background-color: lightgreen; height: 50px; width: 111px"
        onclick="listAll()">전체보기</button>
    <hr>
    <p id="result"></p>
    <hr>

    <script>
        let sid = document.getElementById("sid");
        let name = document.getElementById("name");
        let major = document.getElementById("major");
        let culture = document.getElementById("culture");
        let total = document.getElementById("total");
        let average = document.getElementById("average");

        function store() {
            if (sid.value.length > 0) {
                localStorage.setItem(sid.value, name.value + "," + major.value + "," + culture.value);
            }
            else {
                alert("<확인> 입력값이 없습니다");
            }
        }
        function retrieve() {
            var val = localStorage.getItem(sid.value);
            if (val == null)
                alert(sid.value + " 는 등록되어있지 않습니다.");
            else {
                name.value = val.split(',')[0];
                major.value = val.split(',')[1];
                culture.value = val.split(',')[2];
                total.value = parseInt(val.split(',')[1]) + parseInt(val.split(',')[2]);
                average.value = parseFloat(parseInt(total.value) / 2).toFixed(2);
            }
        }
        function listAll() {
            var str = "<table border=1>";
            for (N = 0; N < localStorage.length; N++) {
                str += "<tr>";
                str += "<td>" + localStorage.key(N) + "</td>";

                item = localStorage.getItem(localStorage.key(N));
                for (L = 0; L < item.split(',').length; L++) {
                    str += "<td>" + item.split(',')[L] + "</td>";
                }
                str += "<tr>";
            }
            str += "</table>";
            result.innerHTML = str;
        }
    </script>
</body>

</html>

 

jsEx_04 : localStorage

localStorage

​

< localStorage 를 이용한 성적처리 js 프로그램 >

​

jsEx_04 : localStorage(성적처리 JS)

 
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>유수봉(202301001) - 로컬 스토리지 사용하기</title>
</head>

<body>
    <h3>jsEx_04 : 로컬 스토리지 사용하기-2</h3>
    <hr>
    ▶학번 : <input id="sid" type="text" size="10">
    ▶이름 : <input id="name" type="text" size="10"><br>
    ▶전공 : <input id="major" type="text" size="10">
    ▶교양 : <input id="culture" type="text" size="10"><br>
    ▷합계 : <input id="total" type="text" style="background-color: lightgray; text-align:center;" size="10">
    ▷평균 : <input id="average" type="text" style="background-color: lightgray; text-align:center;" size="10"><br>
    <hr>
    <button type="button" id="save" style="background-color: lightgreen; height: 50px; width: 80px"
        onclick="store()">저장</button>
    <button type="button" id="retrieve" style="background-color: yellow; height: 50px; width: 80px"
        onclick="retrieve()">조회</button>
    <button type="button" id="update" style="background-color:yellow; height: 50px; width: 80px"
        onclick="update()">수정</button>
    <button type="button" id="remove" style="background-color: yellow; height: 50px; width: 80px"
        onclick="remove()">삭제</button>
    <button type="button" id="init" style="background-color: lightgreen; height: 50px; width: 80px"
        onclick="init()">초기화</button>
    <hr>
    <button type="button" id="listAll" style="background-color: lightgreen; height: 50px; width: 80px"
        onclick="listAll()">전체보기</button>
    <button type="button" id="listSort" style="background-color: lightgreen; height: 50px; width: 80px"
        onclick="listSort()">이름순</button>
    <button type="button" id="listRank" style="background-color: yellow; height: 50px; width: 80px"
        onclick="listRank()">성적순</button>
    <button type="button" id="listGraph1" style="background-color: lightgreen; height: 50px; width: 80px"
        onclick="listGraph1()">그래프-1</button>
    <button type="button" id="listGraph2" style="background-color: yellow; height: 50px; width: 80px"
        onclick="listGraph2()">그래프-2</button>
    <hr>
    <p id="result1"></p>
    <p id="result2"></p>
    <canvas id='graph' width='0' height='0' style='background-color:lightblue'>
    </canvas>
    <hr>

    <script>
        let sid = document.getElementById("sid");
        let name = document.getElementById("name");
        let major = document.getElementById("major");
        let culture = document.getElementById("culture");
        let total = document.getElementById("total");
        let average = document.getElementById("average");

        function store() { ... }
        function retrieve() { ... }
        function update() { ... }
        function remove() { ... }
        function init() { ... }
        function listAll() { ... }
        function listSort() { ... }
        function listRank() { ... }
        function listGraph1() { ... }
        function listGraph2() { ... }
    </script>

    <script>
        let sid = document.getElementById("sid");
        let name = document.getElementById("name");
        let major = document.getElementById("major");
        let culture = document.getElementById("culture");
        let total = document.getElementById("total");
        let average = document.getElementById("average");

        function store() {
            if (sid.value.length > 0) {
                localStorage.setItem(sid.value, name.value + "," + major.value + "," + culture.value);
            }
            else {
                alert("<확인> 입력값이 없습니다");
            }
        }
        function retrieve() {
            var val = localStorage.getItem(sid.value);
            if (val == null)
                alert(sid.value + " 는 등록되어있지 않습니다.");
            else {
                name.value = val.split(',')[0];
                major.value = val.split(',')[1];
                culture.value = val.split(',')[2];
                total.value = parseInt(val.split(',')[1]) + parseInt(val.split(',')[2]);
                average.value = parseFloat(parseInt(total.value) / 2).toFixed(2);
            }
        }
        function listAll() {
            var str = "<table border=1>";
            for (N = 0; N < localStorage.length; N++) {
                str += "<tr>";
                str += "<td>" + localStorage.key(N) + "</td>";

                item = localStorage.getItem(localStorage.key(N));
                for (L = 0; L < item.split(',').length; L++) {
                    str += "<td>" + item.split(',')[L] + "</td>";
                }
                str += "<tr>";
            }
            str += "</table>";
            result.innerHTML = str;
        }
    </script>
</body>

</html>

 

 

<!DOCTYPE html>
<html>
<head>
  <title>블록깨기 게임</title>
  <style>
    #gameCanvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <h1>블록깨기 게임</h1>
  <canvas id="gameCanvas" width="480" height="320"></canvas>

  <script>
    // 캔버스 요소와 2D 컨텍스트 가져오기
    var canvas = document.getElementById('gameCanvas');
    var ctx = canvas.getContext('2d');

    // 공의 초기 위치 및 속도 설정
    var ballX = canvas.width / 2;
    var ballY = canvas.height - 30;
    var ballRadius = 10;
    var dx = 2;
    var dy = -2;

    // 패들 설정
    var paddleHeight = 10;
    var paddleWidth = 75;
    var paddleX = (canvas.width - paddleWidth) / 2;
    var rightPressed = false;
    var leftPressed = false;

    // 벽돌 설정
    var brickRowCount = 3;
    var brickColumnCount = 5;
    var brickWidth = 75;
    var brickHeight = 20;
    var brickPadding = 10;
    var brickOffsetTop = 30;
    var brickOffsetLeft = 30;
    var bricks = [];
    for (var c = 0; c < brickColumnCount; c++) {
      bricks[c] = [];
      for (var r = 0; r < brickRowCount; r++) {
        bricks[c][r] = { x: 0, y: 0, status: 1 };
      }
    }

    // 점수 및 생명 설정
    var score = 0;
    var lives = 3;

    // 키 입력 처리
    document.addEventListener('keydown', keyDownHandler);
    document.addEventListener('keyup', keyUpHandler);

    function keyDownHandler(e) {
      if (e.key === 'Right' || e.key === 'ArrowRight') {
        rightPressed = true;
      } else if (e.key === 'Left' || e.key === 'ArrowLeft') {
        leftPressed = true;
      }
    }

    function keyUpHandler(e) {
      if (e.key === 'Right' || e.key === 'ArrowRight') {
        rightPressed = false;
      } else if (e.key === 'Left' || e.key === 'ArrowLeft') {
        leftPressed = false;
      }
    }

    // 충돌 감지
    function collisionDetection() {
      for (var c = 0; c < brickColumnCount; c++) {
        for (var r = 0; r < brickRowCount; r++) {
          var b = bricks[c][r];
          if (b.status === 1) {
            if (
              ballX > b.x &&
              ballX < b.x + brickWidth &&
              ballY > b.y &&
              ballY < b.y + brickHeight
            ) {
              dy = -dy;
              b.status = 0;
              score++;
              if (score === brickRowCount * brickColumnCount) {
                alert('축하합니다! 모든 벽돌을 깼습니다!');
                document.location.reload();
              }
            }
          }
        }
      }
    }

    // 그리기 함수
    function draw() {
      // 캔버스 지우기
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // 벽돌 그리기
      for (var c = 0; c < brickColumnCount; c++) {
        for (var r = 0; r < brickRowCount; r++) {
          if (bricks[c][r].status === 1) {
            var brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
            var brickY = r * (brickHeight + brickPadding) + brickOffsetTop;
            bricks[c][r].x = brickX;
            bricks[c][r].y = brickY;
            ctx.beginPath();
            ctx.rect(brickX, brickY, brickWidth, brickHeight);
            ctx.fillStyle = '#0095DD';
            ctx.fill();
            ctx.closePath();
          }
        }
      }

      // 공 그리기
      ctx.beginPath();
      ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
      ctx.fillStyle = '#0095DD';
      ctx.fill();
      ctx.closePath();

      // 패들 그리기
      ctx.beginPath();
      ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
      ctx.fillStyle = '#0095DD';
      ctx.fill();
      ctx.closePath();

      // 점수 표시
      ctx.font = '16px Arial';
      ctx.fillStyle = '#0095DD';
      ctx.fillText('점수: ' + score, 8, 20);

      // 생명 표시
      ctx.font = '16px Arial';
      ctx.fillStyle = '#0095DD';
      ctx.fillText('생명: ' + lives, canvas.width - 65, 20);

      // 충돌 감지
      collisionDetection();

      // 공의 경계 처리
      if (ballX + dx > canvas.width - ballRadius || ballX + dx < ballRadius) {
        dx = -dx;
      }
      if (ballY + dy < ballRadius) {
        dy = -dy;
      } else if (ballY + dy > canvas.height - ballRadius) {
        if (ballX > paddleX && ballX < paddleX + paddleWidth) {
          dy = -dy;
        } else {
          lives--;
          if (!lives) {
            alert('게임 오버');
            document.location.reload();
          } else {
            ballX = canvas.width / 2;
            ballY = canvas.height - 30;
            dx = 2;
            dy = -2;
            paddleX = (canvas.width - paddleWidth) / 2;
          }
        }
      }

      // 패들 이동
      if (rightPressed && paddleX < canvas.width - paddleWidth) {
        paddleX += 7;
      } else if (leftPressed && paddleX > 0) {
        paddleX -= 7;
      }

      ballX += dx;
      ballY += dy;

      requestAnimationFrame(draw);
    }

    draw();
  </script>
</body>
</html>

 

 

Web 기말보고서 안내

Web 기말보고서

1. 보고서는 작성 후 “web본인학번_이름_기말평가” 로 저장하고,

2. 메일제목은 “web본인학번_이름_기말평가”,

메일주소는 newbongman@naver.com 로 제출해야합니다.

3. 본 보고서 파일은 작성 후 메일로 제출하고,

또 !! 출력하여 6월 23일(금)까지

대신관 304호로 제출해야 성적에 반영됩니다.

​

Web 기말보고서 양식

Web 기말보고서 양식

 

728x90
반응형
LIST
저작자표시 비영리 동일조건

'WEB > 유수봉교수의 WEB' 카테고리의 다른 글

유수봉 교수의 WEB-15주차 - JavaScript  (0) 2023.06.16
유수봉 교수의 WEB-12주차  (0) 2023.05.31
유수봉 교수의 WEB-13주차  (0) 2023.05.31
유수봉 교수의 WEB-11주차  (0) 2023.05.17
유수봉 교수의 WEB-10주차  (0) 2023.05.10
'WEB/유수봉교수의 WEB' Related Articles more