58일차 JavaScript - 숫자 연산, 조건문, 배열, 난수

21.06.02

 JavaScript 

 

@JS 조건문 실습 - 숫자연산 

• 그림과 같이 "prompt"창을 통해 각 과목의 점수를 입력 받고 , Console창에 학점 및 평균을 출력 한다.
• 풀다보면 알겠지만 각 변수 및 평균 값을 형변환하지 않으면 원하는 값이 이상하게 나온다. 아래처럼

---

• 57일차에도 언급했지만 JS는 문자가 숫자라면 자기 알아서 그냥 연산해버린다.
• 즉, 위의 경우는 405060을 3으로 나눈 결과를 출력하였다.
• 때문에, 내가 원하는 값을 얻기 위해서는 각 변수를 숫자로 형변환  해줘야 한다.

---

아래는 해당 실습에 대한 코드 및 결과 이다.

<script>
  var java = Number(prompt("Java 점수를 입력하세요."));
  var Python = Number(prompt("Python 점수를 입력하세요."));
  var R = Number(prompt("R 점수를 입력하세요."));
  let resul = parseInt((java + Python + R) / 3);
  let resul2;
  if(resul>=90){
  	resul2 = "A"
  }else if(resul>=80){
  	resul2 = "B"
  }else if(resul>=70){
  	resul2 = "C"
  }else{
  	resul2 = "F"
  }

  console.log("당신의 평균은 ",resul,"이고 "+resul2+"입니다.")

</script>

---

@JS 조건문 실습 - 배경 색 변경

• 57일차에서 배경화면을 바꾸는 법을 배웠는데, 해당 실습은 조건문을 적용한 실습이다.
• 아래는 진행한 실습의 코드이다.

---

    <script>
        let color = prompt("색깔을 적어주세요(빨강, 초록, 파랑");
        if(color=="빨강"){
            document.querySelector('body').style.backgroundColor = 'red';
        }else if(color="초록"){
            document.querySelector('body').style.backgroundColor = 'green';
        }else if(color="파랑"){
            document.querySelector('body').style.backgroundColor = 'blue';
        }
    </script>

• "document"는 파일(문서) 전체에 접근 , "querySelector"는 특정 Tag / Class / ID를 선택 할 수 있다.
• 선택한 Tag( "body" )에 어떤 기능을 적용할지(배경색)를 작성하였다. -> "style.backgroundColor='colorName'"

---

---

@JS 조건문 실습3 - 삼육구 

• 보는것과 같이 삼육구 게임을 만드는데, (3,6,9)가 하나만 있다면 파란머리, 2개면 검은머리 IU를 출력한다.
• JS에서의 반복문은 자바와 거의 유사하다는것만 기억하면 어렵지 않게 풀 수 있다.

---

    <script>
        for(let i=1;i<51;i++){
            if((i%10 ==3 || i%10 ==6 ||i%10 ==9) && 
            (parseInt(i/10) ==3 || parseInt(i/10) ==6 
            || parseInt(i/10) ==9)){
                document.write('<img src="img/iu2.jpg" '
                +"style='width:100px;height=100px;'><br>");
            }
            else if((i%10 ==3 || i%10 ==6 ||i%10 ==9) ||
            (parseInt(i/10) ==3 || parseInt(i/10) ==6 
            || parseInt(i/10) ==9)){
                document.write("<img src='img/iu.jpg' "
                +"style='width:100px;height=100px;'><br>");
            }else{
                document.write(i+"<br>");}}
    </script>

• 잠시 헷갈렸었는데, 조건문과 "in"의 조합은 파이썬에서 가능했다 . 자바는 안된다.
• 코드를 보면 알겠지만... 반복은 50까지지만 십의자리까지는 가능하다 -> 백의자리부턴 사진도 없구... 설정안해따..

---

@JS에서의 배열 

   => 인덱스와 인덱스에 대응하는 데이터들로 이루어진 자료 구조.

---

• JS에서의 배열은 Python과 거의 유사 하다고 생각하면 된다.
• 크기를 사전에 할당하지 않으며 , 어떤 데이터를 넣어도 자동으로 값이 형변환 된다.
• 당연하지만 인덱스는 0부터 시작 하며, 다른 언어들과 같이 사용한다.

---

% 배열 선언 및 생성 방식 

• 선언 방법은 위와 같이 "new Array( )"라는 명령어를 사용하거나, Python에서와 같이 대괄호로 가능하다.
• 생성 방식은 기존의 Python과 같이 대괄호 안에 바로 값을 넣거나, "Array( )"의 소괄호 안에 값을 넣어 선언 가능.

---

@JS 실습 - 난수 

  => 사진과 같이 창을 통해 값을 입력 받고, 사전에 만든 난수를 맞추는 실습.

---

    <script>
        let num = prompt("숫자를 입력해주세요!!")
        let num2 = Math.floor(Math.random()*101);
        while(true){
            if(num>num2){
                num = prompt("입력한 숫자보다 작습니다.")
            }else if(num<num2){
                num = prompt("입력한 숫자보다 큽니다.")
            }else{
                alert("정답입니다 축하합니다!!🎉")
                break
            }
        }
    </script>

• 값을 입력 받은 변수 "num"은 Prompt 창을 통해 입력 받는 다.
• 난수를 생성하는 "Math.random( )"은 무조건 0.~ 인 소수를 반환 한다.
• 생성한 난수에 "Math.floor( )"를 사용하여 소수점 이하의 값들을 모두 날릴 수 있다 .
• 생성한 난수가 소수점 이하의 값으로 반환되기 때문에 100만 곱해서는 절대 100을 얻을 수가 없다.
  • 0 ≦ Random ≦ 100을 얻으려면 100보다 큰 수를 입력 하란것. -> 0.9999~ 에다 암만 100곱해도 99가 최대
  • 생성된 값이 0.991이라 가정했을 때, 101을 곱하면 100.091이 나온다 . 이해 안되면 직접 해보자.
• 반복문은 무한 반복문으로 진행했으며, 만일 입력한 값이 난수보다 크지도 작지도 않은 상황이 오면 종료하도록 만들었다.

---