[Front-end] JavaScript 발톱부터 담가보자...😂🤣

LucasRan 2023. 5. 23. 18:17

1. 숫자 맞히기 게임

참조한 url에서는 10번의 기회를 주지만 난 5번의 기회를 줄 것이다...

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">

    <title>숫자 맞추기 게임</title>

    <style>
      html {
        font-family: sans-serif;
      }

      body {
        width: 50%;
        max-width: 800px;
        min-width: 480px;
        margin: 0 auto;
      }
      
      .form input[type="number"] {
        width: 200px;
      }

      .lastResult {
        color: white;
        padding: 3px;
      }
    </style>
  </head>

  <body>
    <h1>숫자 맞추기 게임</h1>

    <p>1 ~ 100 사이의 임의의 숫자를 입력하세요!! 말씀하신 숫자가 크거나 작은경우 알려 드리겠습니다.</p> 
    <p>5턴 이내에 맞추면... 추카추카!! :) </p>

    <div class="form">
      <label for="guessField">숫자 입력: </label>
      <input type="number" min="1" max="100" required id="guessField" class="guessField">
      <input type="submit" value="받아라!" class="guessSubmit">
    </div>

    <div class="resultParas">
      <p class="guesses"></p>
      <p class="lastResult"></p>
      <p class="lowOrHi"></p>
    </div>

    <script>
        let randomNumber = Math.floor(Math.random() * 100) + 1;
        const guesses = document.querySelector('.guesses');
        const lastResult = document.querySelector('.lastResult');
        const lowOrHi = document.querySelector('.lowOrHi');
        const guessSubmit = document.querySelector('.guessSubmit');
        const guessField = document.querySelector('.guessField');
        let guessCount = 1;
        let resetButton;

        function checkGuess() {
            const userGuess = Number(guessField.value);
            if (guessCount === 1) {
                guesses.textContent = '추측한 숫자: ';
            }

            guesses.textContent += userGuess + ' ';

            if (userGuess === randomNumber) {
                lastResult.textContent = '와우!! 정답! ㅊㅋㅊㅋ~ ^^';
                lastResult.style.backgroundColor = 'green';
                lowOrHi.textContent = '';
                setGameOver();
            } else if (guessCount === 5) {
                lastResult.textContent = '!!!GAME OVER!!! 겜 오버!! ㅉㅉㅉ...';
                lowOrHi.textContent = '';
                setGameOver();
            } else {
                lastResult.textContent = '땡!';
                lastResult.style.backgroundColor = 'red';
            if(userGuess < randomNumber) {
                lowOrHi.textContent = '높게 생각해 보세요~ Up!' ;
                } else if(userGuess > randomNumber) {
                    lowOrHi.textContent = '낮게 생각해 보세요~ Down!';
                }
            }

            guessCount++;
            guessField.value = '';
            guessField.focus();
        }

        guessSubmit.addEventListener('click', checkGuess);

        function setGameOver() {
            guessField.disabled = true;
            guessSubmit.disabled = true;
            resetButton = document.createElement('button');
            resetButton.textContent = '새 게임 시작!!';
            document.body.appendChild(resetButton);
            resetButton.addEventListener('click', resetGame);
        }

        function resetGame() {
            guessCount = 1;
            const resetParas = document.querySelectorAll('.resultParas p');
            for (const resetPara of resetParas) {
                resetPara.textContent = '';
            }

            resetButton.parentNode.removeChild(resetButton);
            guessField.disabled = false;
            guessSubmit.disabled = false;
            guessField.value = '';
            guessField.focus();
            lastResult.style.backgroundColor = 'white';
            randomNumber = Math.floor(Math.random() * 100) + 1;
        }
    </script>
  </body>
</html>

https://jsbin.com/?html,output

JS Bin

Sample of the bin:

jsbin.com

👆👆👆👆👆👆👆👆👆

이제 설명을 시작 해 보자... 흠..🤔🤔

먼저 중요하다고 느껴진 부분은 이러한 게임 만들기 프로젝트가 진행한다고 가정했을 때 계획을 세우는 일❗❗

하기와 같이 글로 풀어서 진행할 수도 있지만 플로우 차트로도 나타낼 수 있다.

1과 100 사이의 무작위 숫자를 생성하기.
플레이어의 현재 턴을 기록하기. 1부터 시작.
플레이어가 정답을 추측할 수 있는 방법을 제공.
플레이어가 자신의 추측 기록을 확인할 수 있도록, 제출하는 수를 먼저 어딘가에 기록하기.
그 후, 제출한 수가 정답인지 확인.
만약 정답이라면...
1. 축하 메시지 보여주기.
2. 이후에 플레이어가 다른 숫자를 제출하면 게임이 망가질 수 있으므로 제출을 막기.
3. 게임을 다시 시작할 수 있는 컨트롤 보여주기.
만약 오답이고 아직 플레이어 턴이 남아있다면...
1. 오답임을 알려주고 제출한 숫자가 너무 높았는지 아니면 너무 낮았는지 보여주기.
2. 다른 숫자의 제출을 허용하기.
3. 턴 숫자를 1 늘리기.
만약 오답인데 플레이어 턴이 남아있지 않다면...
1. 플레이어에게 게임이 끝났음을 알려주기.
2. 이후에 플레이어가 다른 숫자를 제출하면 게임이 망가질 수 있으므로 제출을 막기.
3. 게임을 다시 시작할 수 있는 컨트롤 보여주기.
게임을 다시 시작하면 게임 로직과 UI를 완전히 초기화하고 1번으로 돌아가기.

개인적으로 중요하다고 생각 되어져서 빠르게 넘어 가도록 하고...😅

본론으로 들어가 보자 📙📙

1.1 변수 추가

let randomNumber = Math.floor(Math.random() * 100) + 1;

const guesses = document.querySelector('.guesses');
const lastResult = document.querySelector('.lastResult');
const lowOrHi = document.querySelector('.lowOrHi');

const guessSubmit = document.querySelector('.guessSubmit');
const guessField = document.querySelector('.guessField');

let guessCount = 1;
let resetButton;

해당 부분은 게임 프로그램에서 사용하는 변수와 상수를 설정하는 부분이다.

변수는 숫자나 텍스트 등에 이름을 부여하는 것이라고 생각 하면 되며 다른 값으로 변경이 가능하다.

즉, 값이 변경되면, 이전 데이터는 변수에서 제거 된다. (let 키워드 사용)

상수는 변수처럼 이름을 붙인 값이지만, 변수와 달리 상수의 값은 바꿀 수 없다. 변경하려고 하면 Error 발생❗❗❗
즉, 상수는 항상 맨 처음 설정한 요소를 가리키게 된다. (const 키워드 사용)

1.2 함수

함수는 한 번 작성한 후 몇 번이든 실행할 수 있고, 재사용 가능한 코드 블록이다.

즉, 같은 코드를 계속 작성할 필요 없이 이 함수만 호출해 주면 된다.

function sum(x, y) {
    return x+y;
}

https://velog.io/@miogy/Justcode-Replit-01

상기 함수는 두 숫자의 덧셈이 필요한 경우 어느 곳이던 sum() 함수를 호출하여 사용하면된다. 참 쉽죠❓❓😉

1.3 연산자

JavaScript에서는 연산자로 참/거짓 판별, 수학 계산, 문자열 연결 등등 다양한 작업을 수행할 수 있다.

(다른 언어도 할 수는 있습니다..)

1.3.1 산술 연산자

산술연산자들의 기본적인 용도는 사칙연산 할 때 사용 한다.

연산자	이름	목적	예시
+	더하기	두 개의 숫자를 더합니다.	6 + 9
-	빼기	왼쪽에 있는 수를 오른쪽 수로 뺍니다.	20 - 15
*	곱하기	두 개의 숫자를 곱합니다.	3 * 7
/	나누기	왼쪽의 숫자를 오른쪽 숫자로 나눠서 몫을 구합니다.	10 / 5
%	나머지 (또는 모듈로)	왼쪽의 숫자를 오른쪽 숫자로 나눠서 나머지를 구합니다.	8 % 3 ( 2를 반환합니다, 8을 3으로 나눴을 때 몫이 2이기 때문입니다.)
**	지수	왼쪽의 숫자를 오른쪽 숫자만큼 제곱합니다.	5 ** 2 ( 5의 제곱이기 때문에 25를 반환합니다.)

지금 당장 F12 버튼 누르면 개발자 콘솔창을 열어 해 보자❗❗ 이 정도는 간단 하니까~~
※ 참고 : 연산자 우선순위는 학교 수학 수업에서 배웠던 것처럼 곱하기와 나누기는 먼저 계산되고, 더하기와 빼기는 나중에 계산된다. (합은 항상 왼쪽에서 오른쪽으로 계산)

1.3.2 증감 연산자

숫자 변수의 값을 1씩 더하거나 빼고 싶을 때는 증가(++) 연산자와 감소(--) 연산자를 사용하면 편리함

var num1 = 4;
num1++; // 4
num1; // 5

var num2 = 6;
num2--; // 6
num2; // 5

처음 num1++;, num2--;에는 값이 변환 되지 않고 다시 반환할 때 변환 되는 것을 알 수 있다. 브라우저는 현재 값을 반환한 뒤에 변수를 증가시키기 때문에 변수 값을 다시 반환하면 증가했음을 알 수 있다. (당황 하지 말고 다시 반환 하자...😁)

1.3.3 대입 연산자

말 그대로 변수에 값을 대입하는 연산자이며 기본적인 "=" 연산자를 많이 사용했다.

이 연산자는 변수 오른쪽에 있는 값을 대입 한다.

var x = 3; // x의 값은 3입니다.
var y = 4; // y의 값은 4입니다.
x = y;     // 이제 x의 값은 y와 같은 4입니다.

"=" 외에도 하기와 같은 연산자들도 있으니 기억해 두자❗❗❗❗

연산자	이름	목적	예시	의미
+=	더하기 대입	오른쪽의 값을 왼쪽 변수 값에 더하고 새 변수 값을 반환합니다.	x += 4;	x = x + 4;
-=	빼기 대입	오른쪽의 값을 왼쪽 변수 값에서 빼고 새 변수 값을 반환합니다.	x -= 3;	x = x - 3;
*=	곱하기 대입	오른쪽의 값을 왼쪽 변수 값에 곱하고 새 변수 값을 반환합니다.	x *= 3;	x = x * 3;
/=	나누기 대입	오른쪽의 값을 왼쪽 변수 값에 나누고 새 변수 값을 반환합니다.	x /= 5;	x = x / 5;

1.3.4 비교 연산자

참/거짓 테스트를 실행한 결과에 따라 다르게 처리하고 싶을 때 비교 연산자를 사용한다. (값이 True / False 값으로 나옴)

하기 표를 참조하여 기억해 두자❗❗ (IF문 등 많이 사용)

연산자	이름	목적	예시
===	일치 연산자	왼쪽과 오른쪽의 값이 완전히 동일한지 테스트합니다.	5 === 2 + 4
!==	불일치 연산자	왼쪽과 오른쪽 값이 서로 동일하지 않은지 테스트합니다.	5 !== 2 + 3
<	~보다 작음	왼쪽 값이 오른쪽 값보다 작은지 테스트합니다.	10 < 6
>	~보다 큼	왼쪽 값이 오른쪽 값보다 큰지 테스트합니다.	10 > 20
<=	~보다 작거나 같음	왼쪽 값이 오른쪽 값보다 작거나 같은지 여부를 테스트합니다.	3 <= 2
>=	~보다 크거나 같음	왼쪽 값이 오른쪽 값보다 크거나 같은지 여부를 테스트합니다.	5 >= 4

1.4 그 외 부분

document.querySelector()와 document.querySelectorAll()에 대하여 말해보려 한다.

JavaScript에서는 CSS 선택자를 넘겨서 원하는 HTML 요소를 찾을 수 있도록 querySelector()와 querySelectorAll() 함수를 제공하고 있다.

querySelector() 함수는 선택자에 부합하는 요소 중에서 첫 번째 요소만을 반환 한다.

querySelectorAll() 함수는 선택자에 부합하는 모든 요소를 반환 한다.

먼저 querySelector()에 대한 예제를 보자

<h1 id="title">제목 미정</h1>

const headingEl = document.querySelector("h1#title");
headingEl.textContent = "안녕하세요!";

제목 미정인 타이틀을 해당 부분을 통하여 "안녕하세요!"로 반환해 준다.

https://jsbin.com/?html,output

JS Bin

Sample of the bin:

jsbin.com

👆👆👆👆👆👆👆👆👆

다음으로는 querySelectorAll()에 대한 예제를 보자

<div class="fruit">딸기</div>
<div class="fruit">바나나</div>
<div class="fruit">수박</div>

const fruitEls = document.querySelectorAll("div.fruit");
fruitEls.forEach((el) => {
  el.style.border = "1px solid blue";
  el.style.padding = "24px";
  el.style.width = "48px";
});

해당되는 모든 부분에 1px 두께 파란색 박스를 씌어준다.

https://jsbin.com/?html,output

JS Bin

Sample of the bin:

jsbin.com

👆👆👆👆👆👆👆👆👆

2. 이야기 만들기

한글로 대충 이야기를 만들었다.. 이야기라기 보다.. 그냥.. 문장❓😁😁

HTML과 JavaScript를 확인해 보면 여기에도 몇 가지 설명이 필요하다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />

    <title>이야기 만들기</title>

    <style>
      body {
        font-family: helvetica, sans-serif;
        width: 350px;
      }

      label {
        font-weight: bold;
      }

      div {
        padding-bottom: 20px;
      }

      input[type="text"] {
        padding: 5px;
        width: 150px;
      }

      p {
        background: #ffc125;
        color: #5e2612;
        padding: 10px;
        visibility: hidden;
      }
    </style>
  </head>

  <body>
    <div>
      <label for="customname">주인공 이름을 입력해 주세요:</label>
      <input id="customname" type="text" placeholder="" />
    </div>
    <div>
        <label for="ko">KO</label>
        <input id="ko" type="radio" name="ukus" value="ko" checked/>

    </div>
    <div>
      <button class="randomize">랜덤 이야기 만들기!!</button>
    </div>
    <!-- Thanks a lot to Willy Aguirre for his help with the code for this assessment -->
    <p class="story"></p>
    
  </body>
</html>

const customName = document.getElementById('customname');
const randomize = document.querySelector('.randomize');
const story = document.querySelector('.story');

let storyText = '밖은 24도였기 때문에 :insertx:은/는 산책하러 갔습니다. 그들이 :inserty:에 도착했을 때, 맑은 하늘을 바라보았고, 그리고 나서 :insertz: 행동을 하였습니다. 뒤에서 철수은/는 바라만 보며 :insertx:에게 말했습니다. 너 남은 연차는 0개야..';
let insertX = ['김가네','김영희','김철수'];
let insertY = ['식물원','마곡역','강남역'];
let insertZ = ['반차 쓰는','멍 때리는','집에 가고 싶다는'];

function randomValueFromArray(array){
  const random = Math.floor(Math.random()*array.length);
  return array[random];
}


function result() {
  let newStory = storyText;
  let xItem = randomValueFromArray(insertX);
  let yItem = randomValueFromArray(insertY);
  let zItem = randomValueFromArray(insertZ);
  newStory = newStory.replace(':insertx:',xItem).replace(':insertx:',xItem).replace(':inserty:',yItem).replace(':insertz:',zItem);

  if(customName.value !== '') {
    let name = customName.value;
    newStory =  newStory.replace('철수',name);
  }

  if(document.getElementById("ko").checked) {
    let weight = Math.floor(Math.random() * 2).toString() + '개';
    let temperature =  Math.round((80-30)/1.8).toString() + '도';
    newStory =  newStory.replace('24도',temperature).replace('0개',weight);
  }

  story.textContent = newStory;
  story.style.visibility = 'visible';
}

randomize.addEventListener('click', result);

https://jsbin.com/?html,output

JS Bin

Sample of the bin:

jsbin.com

👆👆👆👆👆👆👆👆👆

자 시작 해 보자❗❗

상기에 작성한 이야기 만들기 프로그램(❓)에서 짚고 넘어가야 할 부분은 문자열과 배열이다.

2.1 문자열

var string = '홍길동 귀는 당나귀 귀';
string; // '홍길동 귀는 당나귀 귀'

숫자에서 했던 것과 같은 방법으로 변수를 선언 > 문자열을 초기화 > 값 반환을 한다.

차이점은 오직 숫자 대신 문자열을 넣었고 문자열 값을 따옴표로 감싸주면 된다. 여기서 따옴표는 " " 또는 ' '를 사용하는데 교차로 사용이 되지 않고 짝을 잘 맞춰서 사용한다. (개발 하다가 따옴표 때문에 Error가 발생하면 허무하다...😥😥)

여기서 이 부분이 궁금할 수 있다..

큰 따옴표와 작은 따옴표의 차이점❗❓ → 없다.. 맘에 드는걸로 쓰시라... 대신 짝 잘 맞춰서...

필자는.. 작은 따옴표 (' ')를 많이 사용하는데 가끔 따옴표 안에 따옴표가 필요할 경우는 큰 따옴표(" ")를 먼저 사용한다.

2.1.1 문자열 연결

var one = '안녕, ';
var two = '밥은 먹고 다니니?';
var joined = one + two;
joined; // '안녕, 밥은 먹고 다니니?'

var multiple = one + one + one + one + two;
multiple; // '안녕, 안녕, 안녕, 안녕, 밥은 먹고 다니니?'

var response = one + '왜 이렇게 살이 빠쪘어... ' + two;
response; // '안녕, 왜 이렇게 살이 빠쪘어... 밥은 먹고 다니니?'

상기 예제와 같이 문자열을 +로 연결이 가능하다.

하나의 예제를 더 확인해 보자

<button>날 눌러줘</button>

var button = document.querySelector('button');

button.onclick = function() {
  var name = prompt('니 이름이 뭐니?');
  alert('안녕 ' + name + ', 반가워!');
}

https://jsbin.com/?html,output

JS Bin

Sample of the bin:

jsbin.com

👆👆👆👆👆👆👆👆

버튼을 누르면 이름을 물어보는 prompt가 뜨고 거기에 입력한 값을 name이란 변수에 넣어 문자열을 연결하여 보여주는 것을 확인할 수 있다.

2.1.2 문자와 숫자 연결

문자와 숫자는 +로 연결이 될까❓❓

'Front ' + 242; // Front 242

네.. 됩니다..👌👌

그렇다면 아래 예제는 어떨지 확인해 보자

var myDate = '19' + '67';
myDate; // 1967

86이 될까❓❓ 아니죠~ 현재 19와 67에 작은 따옴표가 있어 문자로 인식함

문자를 +로 연결하였으니 1967이 된다. 👍👍

문자를 숫자로 변경해야 될때가 있다....

(프로젝트를 하다보면 별별 사건들이 많으니까요.. 이 부분은 새발의 피입니다...또르르.. 😥😥😂)

할튼 문자를 숫자로 변경해 보자

var myString = '123';
typeof myString; // string

var myNum = Number(myString);
typeof myNum; // number

여기서 typeof는 현재 이 변수가 어떤 데이터 타입인지 반환해 준다.

myString 변수는 string으로 반환이 되었고 myNum 변수는 number로 타입이 반환된 것을 확인할 수 있다.

그렇다면 숫자를 문자로는 어떻게 데이터 타입을 바꿀까❓ 요로케~

var myNum = 123;
typeof myNum; // number

var myString = myNum.toString();
typeof myString; // string

위에서 잠깐 언급했지만 만약 어떤 사용자가 숫자를 텍스트 필드 폼에 입력하면 그 입력 값은 문자 타입으로 갖고 있을텐데 이 숫자를 어떤 값에 더하거나 사칙연산을 하고 싶다면 이 입력 값을 숫자로 변환해야 된다.

그럴 때 자신있게❗❗❗❗ 변환하여 사용하자❗❗

2.1.3 문자열 길이 및 위치 값 찾기

변수 문자열의 길이를 파악해야 할 때 사용한다.

var browserType = '웹프론트엔드';
browserType.length; // 6

문자열의 첫번째와 마지막 음절을 알고 싶을 때 하기처럼 사용한다.

// browserType = 웹프론트엔드
browserType[0]; // 웹
browserType[browserType.length - 1]; // 드

여기서 궁금증 발동❗❗ 왜 마지막 음절은 -1을 해줄까❓

컴퓨터 언어는 일반적으로 0부터 시작함으로 길이는 6개의 음절이지만 0~5까지 즉, 마지막 음절의 위치값은 5이다.

웹프론트엔드
1 2 3 4 5 6 // 음절 수

웹프론트엔드
0 1 2 3 4 5 // 음절 순서

2.1.4 문자열 내용 변경

위에 이야기 만드는 프로그램에서도 사용 했는데 좀 더 설명을 하자면...

잠깐 알기 쉽게 코드를 변경했다.

newStory = '뒤에서 철수은/는 바라만 보며...'
let name = '주인공';
newStory =  newStory.replace('철수',name);
newStory; // 뒤에서 주인공은/는 바라만 보며...

뒤에서 철수은/는 바라만 보며에서 replace로 인하여 철수 부분이 주인공으로 변경되는 부분을 볼 수 있다.

문자열 내부의 하위 문자열 찾기 및 추출, 대/소문자 변경, 인사말 필터링 하기, 대/소문자 맞게 수정하기 부분은 스킵하고 넘어 가자.. (어려워서 그런거 아님.. 이야기 만들기 프로그램 관점으로 진행 하기 위한 것임..😉)

2.2 배열

배열은 일반적으로 "리스트같은 객체(list-like objects)"라고 기술한다.

보통 리스트에 저장된 다수의 값들을 포함하고 있는 하나의 객체라 보면 된다.

배열 객체는 변수에 저장될 수 있고 다른 종류의 값들처럼 같은 방법으로 다뤄질 수 있지만 차이는 배열 안의 각 값들에 개별적으로 접근할 수 있고, 리스트를 통해 반복(loop)하고 모든 값에 동일한 것을 할 수 있는 것과 같이 리스트와 함께 엄청 유용하고 효율적이라 할 수 있다.
만약 배열이 없다면 모든 원소를 별도의 변수에 저장해야 되고 각 원소에 대해 개별적으로 출력해야 한다.

이런 방식은 작성하기에 훨씬 오래 걸리고 덜 효율적이며 오류가 나기 쉽다.

설명이 길어 졌는데 정리하자면

배열을 이용하면 하나의 변수에 여러 정보를 담을 수 있고 반복문과 결합하면 많은 정보도 효율적으로 처리할 수 있다.

2.2.1 배열 생성

리스트를 한 번 만들어 보자

var shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles'];
shopping; 
//  ['bread', 'milk', 'cheese', 'hummus', 'noodles']
//  0 : "bread"
//  1 : "milk"
//  2 : "cheese"
//  3 : "hummus"
//  4 : "noodles"
//  length : 5

var sequence = [1, 1, 2, 3, 5, 8, 13];
sequence; 
//  [1, 1, 2, 3, 5, 8, 13]
//  0 : 1
//  1 : 1
//  2 : 2
//  3 : 3
//  4 : 5
//  5 : 8
//  6 : 13
//  length : 7 

var random = ['tree', 795, [0, 1, 2]];
random;
//  ['tree', 795, Array(3)]
//  0 : "tree"
//  1 : 795
//  2 : Array(3)
//      0 : 0
//      1 : 1
//      2 : 2
//  length : 3

2.2.2 배열 반복문

이야기 만들기 프로그램에는 없지만 자주 사용하는 부분이기에 넣었다.

일단 for문(반복문)을 사용해 보자

var insertY = ['식물원','마곡역','강남역'];
for (var i = 0; i < insertY.length; i++) {
  console.log(insertY[i]);
}
// 식물원
// 마곡역
// 강남역

예제에서는 각각의 값을 출력하는 부분으로 진행하였지만 반복문을 통하여 각 변수에 값을 할당할 수 있다.

만약 배열이 존재 하지 않았다면.. 하나씩 하나씩 한땀 한땀 변수를 선언해 줘야 한다...😮😩

그 값이 1,000개면... 끔찍..😱😱😱😱

2.3 그 외 부분

document.getElementById()에 대하여 말해 보고자 한다.

document.getElementById()는 id 속성을 사용하여 해당 태그에 접근하여 하고 싶은 작업을 할 때 쓰는 함수다.

<button id="jsmode">안 바뀜</button>

const mode = document.getElementById("jsmode");
mode.addEventListener("click", function() {
  if (mode.innerText === "안 바뀜") {
    mode.innerText = "바뀜";
  } else {
    mode.innerText = "안 바뀜";
  }
});

버튼을 누를때마다 jsmode id 값 태그에 접근하여 해당 작업을 진행하는 모습을 볼 수 있다.

https://jsbin.com/?html,output

JS Bin

Sample of the bin:

jsbin.com

👆👆👆👆👆👆👆👆

이상으로 재밌는(❓) 두 프로그램에 대한 설명을 마친다.

야호~ 😋

※ 참조 url :

하기 url에서 보고 해보고 느끼고 한 것들을 정리하였습니다.

- https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps/A_first_splash

JavaScript에 발 담그기 - Web 개발 학습하기 | MDN

JavaScript에 관한 약간의 이론과, JavaScript가 할 수 있는 일을 알아봤으니 이제 간단한 JavaScript 프로그램을 만들어보면서 개발 과정이 어떤 느낌인지 알아보겠습니다. "숫자 알아맞히기" 게임을 차

developer.mozilla.org