Today Topic : Javascript 예제 풀기

🗝 Keywords

✅ 가위바위보 게임만들기

✅ 계산기만들기

✅ 별찍기

1. 가위바위보 게임만들기

1-1) 컴퓨터에서 랜덤한 숫자 뽑기

var user = prompt("가위,바위,보 중에 한 개를 입력하세요","")
alert(`당신은 ${user} 를 입력했습니다`);

// 컴퓨터
var nums = (Math.random()*9)/3;
var randomNum = Math.floor(nums);
var computer

switch (randomNum) {
  case 0:
    computer = '가위';
    break;
  case 1:
    computer = '바위';
    break;
  case 2:
    computer = '보';
    break;
}


console.log(computer);
var justify = '가위' || '바위' || '보';

if (user == justify) {
    game(user);
  } else {
    alert(`1번 다시입력하세요`);
  }

랜덤 숫자 뽑아내기

🚀 Math 함수

• 랜덤한 숫자를 뽑을 때는 math.random으로 0~1까지 무작위 숫자를 꼽아서 내가 원하는 숫자범위를 곱하거나 더해서 지정해주고, math.floor로 소수점 이하를 내려서 만들어줄 수 있음.
• 그밖에 ceil(소수점 이하를 올림), trunc(소수를 제외하고 정수만 반환)를 이용해도 됨.

switch를 이용해 랜덤 숫자를 '가위,바위,보'로 변환하기

🚀 switch

• 스위치는 함수가 반복적으로 실행될 때 보다 간단하게 사용할 수 있음.
• switch(변수){}로 선언하고 case0 : 결과, case1: 결과로 사용할 수 있음.

웹에서 사용자와 상호작용하기

let hi = [Number((prompt('입력해라', '')))]
console.log(hi) // [12] 출력
hi.push(38)
console.log(hi) // [12,38] 출력
alert(`당신이 입력한 것은 ${hi[1]}이다 이것아`)

🚀 prompt

• prompt는 사용자에게 값을 입력받을 수 있음. prompt로 받은 값은 무조건 문자열로 출력이된다. 따라서 숫자로 바꾸고 싶다면 prompt 바깥으로 Number를 씌어주거나, 배열로 출력하고 싶다면 겉은 배열 표현식을 씌워주면 된다.

🚀 alert

• alert은 사용자에게 공지를 할 때 사용할 수 있음. 만약 사용자에게 특정 결과값을 보여주고 싶다면 백틱 활용해서 할 것.

function isStart() {
  if (confirm("시작하시겠습니까?") == true) {
    user
  } 
  else{
    return;
  }
}
isStart()

🚀 confirm

• confirm은 사용자에게 값을 입력받아, 예/아니오로 출력함. 예일 경우에는 true, 아니오일 경우에는 false로 값을 반환함.

1-2) 입력한 값으로 가위바위보 결과 출력하기

function game(user)

function game (user) {
  console.log("1:");
  console.log("2:"+computer);
  console.log("3:"+user)
  
  if (user == '가위') {
    if (computer == '가위') {
      console.log(computer);
      alert(`user:${user} computer:${computer}의 결과로 비겼습니다`);
      return;
    }
    else if (computer === '바위') {
      alert(`user:${user} computer:${computer}의 결과로 졌습니다`);
      return;
    }
    else if (computer === '보') {
      alert(`user:${user} computer:${computer}의 결과로 이겼습니다`);
      return;
    }
    else {
      alert("다시 입력하세요");
      user;
    }
  }

  if (user === '바위') {
    if (computer === '가위') {
      alert(`user:${user} computer:${computer}의 결과로 이겼습니다`);
      return;
    }
    else if (computer === '바위') {
      alert(`user:${user} computer:${computer}의 결과로 비겼습니다`);
      return;
    }
    else if (computer === '보') {
      alert(`user:${user} computer:${computer}의 결과로 졌습니다`);
      return;
    }
    else {
      alert("다시 입력하세요");
      user;
    }
  }

  if (user === '보') {
    if (computer === '가위') {
      alert(`user:${user} computer:${computer}의 결과로 졌습니다`);
      return;
    }
    else if (computer === '바위') {
      alert(`user:${user} computer:${computer}의 결과로 이겼습니다`);
      return;
    }
    else if (computer === '보') {
      alert(`user:${user} computer:${computer}의 결과로 비겼습니다`);
      return;
    }
    else {
      alert("다시 입력하세요");
      user;
    }
  }

  else { 
      prompt("가위,바위,보 중에 한 개를 입력하세요","");
      game(user);
  }
}

1-3) 리팩토링

🚀 리팩토링
1) switch 활용해서 가위바위보 결과 계산 줄이기

• switch는 단순 입력값으로 결과를 단순하게 표현할 때 유용하지. 가위바위보 처럼 각각의 경우의수 자체가 복잡한 경우에는 사용이 어려워짐
• 따라서 switch는 적합하지 않다고 생각됨

2) if 조건을 가위,바위,보의 경우가 아니라 결과값 비김,이김,지김으로 나누기

• 오히려 이렇게 만드는 것이 코드를 효율적으로 쓸 수 있음. 왜냐면 비기는 경우에는 조건이 같은 경우 한 개 밖에 없기 때문!
  
• 제로초님 같은 경우에는 각각의 케이스를 숫자로 변환해서 규칙성을 찾아냈음. 예를 들어, 가위0 바위1 보2로 치환해서 사용자 숫자와 컴퓨터숫자를 뺐을 때 값이 0이면 비긴 것. 이긴 경우/ 진경우 숫자 결과값이 겹치지 않으면 좀 더 단축해서 사용할 수 있음

---

2. 계산기 만들기

let num1 = prompt("숫자1를 입력하세요", "")
let num2 = prompt("숫자2를 입력하세요", "")


function Calculator(num1,num2) {
  this.read = function() {
    this.num1 = num1
    this.num2 = num2
    alert(`첫 번째 숫자는 ${parseInt(this.num1)}입니다`)
    alert(`두 번째 숫자는 ${parseInt(this.num2)}입니다`)
  }
  this.sum = function() {
    this.num1 + this.num2
    alert(`두 숫자의 합은 ${parseInt(this.num1) + parseInt(this.num2)}입니다`)
  },
  this.mul = function() {
    this.num1 * this.num2
    alert(`두 숫자의 합은 ${parseInt(this.num1) * parseInt(this.num2)}입니다`)
  }
}

let calculator = new Calculator(num1,num2);
calculator.read();
calculator.sum();
calculator.mul();

생성자함수

• 생성자함수를 통해서 위와 같이 특정 조건의 함수들을 연속해서 만들어낼 수 있음.

---

3. 삼각형 만들기

3-1) for문만을 이용해 만들기

let num = 5
let star = ''


for (i=0; i<=num; i++) {
  for (j=0; j<=num-i; j++){
    star + ' '
  }
  console.log(star += '*')
}

결과값

3-2) .repeat 문자열메서드 이용하기

let stars = '*'
let empty = ' '

function triangle(n) {
  for (i=0 ; i<=n ; i++) {
    console.log(stars.repeat(n-i));
  } 
}
triangle(5);

결과값

3-3) 정삼각형 만들어보기

function equalTriangle (n) {
  for (i=0; i<=n ; i++) {
    console.log(empty.repeat(n+i)+stars.repeat(n-i)+stars.repeat(n-i));
  }
}

equalTriangle(5)

결과값