본문 바로가기

블록체인_9기/💛 JAVASCRIPT

10강_230313_Javascript(컴파일러 언어, 인터프리터 언어, 논리 연산자( ||, &&), 삼항연산자, switch, while, prompt, parseInt, Math.random)

728x90

 

 

 

 


컴파일러 언어와 인터프리터 언어

 

✏️ 컴파일러(compiler) 언어

  • 프로그램 코드를 컴파일해서 컴퓨터가 알아들을 수 있는 기계어로 번역해준다.
  • 소스코드 전체를 한 번에 번역하고 실행파일을 만들어서 실행해준다.
  • 특징
    • 파일의 크기가 크지만 실행속도가 빠르다.
    • 실행하기 전, 전체코드를 번역해서 오류를 미리 알 수 있다. 따라서 컴파일 시 오류를 잡을 수 있는 것이다.
    • 대신 번역 과정 시간이 좀 걸린다.
  • 언어의 종류: C, C++,C#, Java 등

 

✏️ 인터프리터(interpreter) 언어

  • 프로그램 코드를 한 줄씩 읽으면서 번역과 실행을 한다.
  • 특징
    • 프로그램 실행 도중에 동적으로 소스코드 수정이 가능하다.
    • 실행하는 크기가 작고 소스 코드의 수정이 용이하다. 디버깅 하기가 편하다.
    • 소스코드가 실행될 때마다 번역과 실행을 반복해서 속도가 느리다.
    • 실행하기 전 오류를 발견하는 컴파일러 언어와 달리, 실행하는 중에 오류를 발견할 수 있다.
  • 언어의 종류: Javascript 등

 

 

 

 


논리연산자 ||, &&

 

a || b : 논리 합(OR). a나 b 둘 중 하나라도 참이라면 참.

0 || 0 ---> false

1 || 0 ---> true

0 || 1 ---> true

1 || 1 ---> true

let a = true;
let b = false;
console.log(a || b);    // a가 true이기 때문에 결과가 true로 나온 것.

console.log(false || false);        //flase
console.log(true || false);         //true
console.log(false || true);         //true
console.log(true || true);          //true

 

a && b : 논리 곱(AND). a나 b 둘 다 참이어야 참.

0 && 0 ---> false

1 && 0 ---> false

0 && 1 ---> false

1 && 1 ---> true

let c = true;
let d = false;
console.log(c && d);
console.log(false && false);        //false
console.log(true && false);        //false
console.log(false && true);        //false
console.log(true && true);        //true
let text = "집에 가고싶다";
let age = 20;

//true && false
if(text === "집에 가고싶다" || age === 20){         // 텍스트의 조건과 나이의 조건이 둘 다 맞을 경우 if문 실행
        console.log("집에도가고 나이도 20이야.");
 }

 

 

 

 


삼항 연산자

 

  • 한 줄로 코드들을 표현할 수 있고 잘 쓰면 편하지만 가독성이 떨어질 수 있다.
  • 형식: ( 조건 ? 앞의 조건이 참일 때 수행 : 앞의 조건이 거짓일 때 수행 )
console.log(1 > 2? "이건 참이야" : "이건 거짓이야");
 
 console.log(1 < 2? 3 < 4? "이건 두번째 참이야" : "이건 틀렸어" : "이건 거짓이야");
 /* 삼항 연산자를 여러번 겹쳐서 쓰게되면 보는 사람으로 하여금 
 해당 코드를 이해하기 힘드므로 여러번 겹쳐서 쓰지 않도록 한다.*/

 

 

 

 


switch문

 

  • 특정 변수를 다양한 상황에서 비교할 수 있게 해준다.
  • 하나 이상의 case문으로 구성되며 default문도 있지만, 필수는 아니다.
  • case문에 break가 없을 경우 조건을 따지지 않고 그 다음 case로 이동한다.
 switch ("조건 값") {
    case 1:                 //조건 값과 'case 1'을 비교. 일치할 경우 해당 구문의 작업을 진행하고 break로 빠져나온다.
        
        break;

    case 2:                 //'case 1'과 일치하지 않았을 경우 비교.일치할 경우 해당 구문의 작업을 진행하고 break로 빠져나온다.
        
        break;

    case 3:                 //'case 2'과 일치하지 않았을 경우 비교.
        
        break;
    case 4:                 //'case 3'과 일치하지 않았을 경우 비교.
        break;
    default:                //모든 case문의 조건과 일치하지 않았을 경우 실행한다.
        break;
 }
let month = 10;
let monthName = "";


switch (month) {
    case 1:
        
        break;
    case 2:
        
        break;
    case 3:
        
        break;
    case 4:
        
        break;
    case 5:
        
        break;
    case 6:
        
        break;
    case 7:
        
        break;
    case 8:
        
        break;
    case 9:
        
        break;
    case 10:
        monthName = "October"       // 해당 구문이 동작되는 이유는 변수month의 값과 case10의 값이 일치했기 때문이다.
        break;                      // break문이 있기 때문에 더 실행을 하지 않고 switch문을 빠져 나가는 것이다.
                                    // break문이 없으면 case11로 들어가서 다음 break가 나올 때 까지 실행하거나 switch문이 끝날 때 까지 실행한다.
    case 11:
        monthName = "Novenber"      //month의 값이 11이므로 해당 구문을 실행.
        break;
    case 12:
        
        break;

    default:
        break;
}
console.log(monthName);


switch (1) {
    case 1:
        console.log("첫 번째 case문");
        // break;
    case 2:
        console.log("두 번째 case문");
        // break;
    case 3:
        console.log("세 번째 case문");
        // break;                           개발자가 원하는 작업에 따라 break를 넣고 빼면 된다.

    default:
        console.log("마지막");
        break;
}

 

 

 

 


while문

 

  • 조건문이 참일 때 실행되는 반복문이다. 조건은 문장안이 실행되기 전에 참, 거짓을 판단한다.
    • 조건이 참일 경우, while문을 실행하게 되며, 거짓일 경우 while문을 지나간다.
  • break로 반복을 종료해 줄 수 있다.
let num = 1;
while (num !== 5) {         // 변수num의 값이 5가 아닐 때 까지 (멈추는조건 제시)
    console.log(num);       // 변수 num의 값 노출
    num++;                  // 변수 num의 값을 1씩 증가. num의 값이 5가 되는 순간 while문 종료.
}


let num2 = 1;
while (true) {         // while의 조건은 무조건 참
    console.log(num2);       // 변수 num2의 값 노출
    num2++;                  // 변수 num2의 값을 1씩 증가.
    if(num2 === 5){          // 변수 num2의 값이 5와 같다면
        break;               // while문을 빠져나온다.
    }

}

 

 

 

 


prompt

 

  • 사용자가 브라우저에 값을 간단히 입력할 수 있는 상태창을 띄워준다.
  • 두 개의 인수를 받는다.
    • 텍스트 메시지와 입력 필드
    • 확인 및 취소 버튼
result = prompt(title, [default]); //[default]는 필수가 아닌 선택값이다.

let value = prompt("사용자에게 노출될 문자열", [입력 필드의 초깃값]);

 

 

 

 


parseInt / Number

 

parseInt

  • 문자열 인자를 파싱하여 특정 진수의 정수를 반환한다.

Number

  • 문자열을 숫자로 변환하는 함수
Number( object )		// object: 문자열, 문자열을 값으로 하는 변수를 입력
				// 숫자로 변환할 수 없는 값인 경우 NaN을 반환
let value = prompt("값을 입력하시오.")  // 값을 받을 수 있는 상태창에 메세지 입력
console.log("vlaue : ", value);

let inputnum = prompt("첫 번째 숫자 입력");
let inputnum1 = prompt("두 번째 숫자 입력");

let result = inputnum + inputnum1;              // prompt에 입력받은 내용은 문자열이므로 숫자가 나열되는 형식으로 값이 노출된다.
										//예를들어 첫번째:2/두번째:3 입력 -> 23 노출
console.log("결과는 두구두구두구~(문자열) : ", result);

// 숫자 형태가 필요하므로 형태를 변환시켜주는 항수를 사용해야 한다.  => 형변환 진행이 필요

let result2 = parseInt(inputnum)+ Number(inputnum1);	//다른 형태의 type을 number type으로 형변환 시켜준다.

console.log("결과는 두구두구두구~(숫자) : ", result2);

while, swich, prompt를 사용한 코드_예시

let vlaue = prompt("너는 1~5 사이의 숫자를 입력해야해");
let play = true;
while (play) {
    switch(vlaue){
        case "1":
            console.log("1번");
            play = false;
            break;
        case "2":
            console.log("2번");
            play = false;
            break;
        case "3":
            console.log("3번");
            play = false;
            break;
        case "4":
            console.log("4번");
            play = false;
            break;
        case "5":
            console.log("5번");
            play = false;
            break;
        default:
            console.log("1~5번 눌러");
            vlaue = prompt("1~5를 누르라고 했지? ");            // 정확한 값을 누를 때까지 반복하게 된다. 계속 play 값이 ture가 되므로
            break;
    }
    
}

 

 

 

 


Math.random( );

 

  • 0 이상 1 미만의 구간에서 근사적으로 균일한(approximately uniform) 부동소숫점 의사난수를 반환한다.
    • 0 ~ 1까지의 소숫점 수가 랜덤으로 선택된다는 것이다.
  • 이 값은 사용자가 원하는 범위로 변경할 수 있다.
    • parseInt() 를 활용하여 정수로 변환하고 값이 필요한 만큼 곱해주어야 한다.
    • 예를들어 0~2가 필요하다면 parseInt(Math.random() * 3);로 진행한다.

 

 


👩‍💻 중간실습_가위바위보

 

실습내용

  • while 문, switch문을 활용하여 가위바위보 만들기
  • prompt로 사용자에게 값을 입력받기
  • Math.random으로 컴퓨터에 랜덤 값 주기
/*
만들 순서
1. 사용자 입력값, 컴퓨터 랜덤 값, while문 진행 변수 선언
2. 컴퓨터 랜덤 값, 가위바위보로 변환
3. 가위바위보 식 만들기
*/



let value;          // 사용자에게 값을 받을 변수
let computer;       // 컴퓨터에게 값을 받을 변수
let play = true;           // 게임 진행

// 0 = 가위     1 = 바위    2 = 보

let win = true;
let luse = false;




value = prompt("가위 바위 보")              // 컴퓨터의 랜덤 값에 결과 대입
computer = parseInt(Math.random() * 3);

if(computer == 0){
    computer = "가위";
}
else if(computer == 1){
    computer = "바위";
}
else{
    computer = "보";
}

while(play){                 // play가 ture 상태면 계속 진행
    switch (value) {
        case "가위":         //value 값이 "가위"일 경우
            console.log("나: ",value," vs  컴퓨터: ",computer);     // 사용자 입력값과 컴퓨터 랜덤 값 노출
            if(computer === "가위"){                                //컴퓨터 랜덤 값이 "가위"일 경우 
                console.log("무승부입니다.");
            }
            else if(computer === "바위"){                           //컴퓨터 랜덤 값이 "바위"일 경우
                console.log("패배");
            }
            else{                                                   //컴퓨터 랜덤 값이 "보"일 경우
                console.log("승리");                            
            }
            play = false;                                           //while문이 끝나게 한다.
            break;
        case "바위":        //value 값이 "바위"일 경우
            console.log("나: ",value," vs  컴퓨터: ",computer);
            if(computer === "가위"){
                console.log("승리");
            }
            else if(computer === "바위"){
                console.log("무승부입니다.");
            }
            else{
                console.log("패배");
            }
            play = false;
            break;
        case "보":      //value 값이 "보"일 경우
            console.log("나: ",value," vs  컴퓨터: ",computer);
            if(computer === "가위"){
                console.log("패배");
            }
            else if(computer === "바위"){
                console.log("승리");
            }
            else{
                console.log("무승부입니다.");
            }
            play = false;
            break;
        case null:                  // prompt에 입력받을 시 취소를 누를 경우 닫히게 하는 명령
            break;
    
        default:
            value = prompt("가위 바위 보 중 선택하시오.")       // value에 가위 바위 보를 제외한 다른 값을 입력했을 경우
            break;
    }
}

 

 

 

 


👩‍🏫 예시코드_업 다운 게임

 

실행내용

  • 플레이어가 있고, 컴퓨터가 있다.
  • 플레이어는 선택을 할 수 있게하고, 컴퓨터는 랜덤값을 가진다.
  • 플레이어가 선택할 수 있는 제어문
  • 게임의 종료 시점을 정한다.

완벽하게 작성되진 않은 코드이므로 감안하고 보도록하자.

let playerSelect;
// 1~100까지의 랜덤숫자
let comSelect = Math.random() * 99 + 1;

let count = 0;      //게임을 시도한 횟수

let max = 100;      //플레이어가 선택이 가능한 최대의 숫자.
let min = 0;        //플레이어가 선택이 가능한 최소의 숫자. 처음 선택한 숫자가 작을 경우 그 이하의 수는 입력하지 못하도록 할 것이기 때문


let subText = "";   //컴퓨터가 알려줄 문구
let maxCount = parseInt(prompt("게임 몇 번 할래?"));    // 게임을 할 횟수

//반복되어야 한다.

while(playerSelect !== comSelect && count < maxCount){
    // ES6에서 문자열을 사용할 때 편하게 사용할 수 있는 기법
    // 템플릿 리터럴 문자를 다룰 때 줄바꿈같은 것을 편하게 사용할 수 있게 해준다.
    // ` 백틱(키보드 상의 ~ 버튼)
    // `${변수}문자열`
    // \n: 문자를 작성할 때 줄내림을 해준다.
    playerSelect = prompt(`${subText}\n숫자를 입력하세요\n 최소 : ${min} | 최대 : ${max} | 남은 횟수 : ${maxCount - count}`);

    //입력된 값이 숫자인지 확인을 해야한다. 문자 등을 쓸 수도 있기 때문

    //숫자로 변환
    // playerSelect = perseInt(playerSelect);
    //isNaN: 숫자가 아닌 값을 입력했는지? 숫자가 아닌 값이 입력될 경우 ture가 된다.
    if(isNaN(playerSelect)){
        subText = "숫자를 입력 하세요!"
        // 다시 게임을 시작 해야하는데 밑에 작성된 코드를 읽지 않게 할 수 없을까?
        continue;   //다시 시작. continue 구문 부터 밑으로 읽지 않고 다시 반복문 시작점으로 돌아간다.
    }
   
    //최소와 최대 사이의 값인지 확인. 범위의 값이 맞는지 확인
    if(min >= playerSelect || max <= playerSelect) {
        subText = `너 입력값 확인해 최소 : ${min} | 최대 : ${max}`
        continue;   //다시 입력하세요.
    }

    //게임의 로직 시작

    if (playerSelect > comSelect) {
        //max최대값을 다시 겹치지 않게 입력 해준다.
        max = playerSelect;
        subText = "다운!";
    }
    else if(playerSelect < comSelect){
        //min 최소 값을 다시 겹치지 않게 입력 해준다.
        min = playerSelect;
        subText = "업!";
    }
    else{
        count = count +1;
        console.log(`${count}번 시도해서 맞췄습니다.`);
        //게임 끝났음
        break;
    }
    //게임 횟수 증가해야 함
    count++;
    if(count >= maxCount){
        //실패! 게임 오버
        console.log("게임 오버");
    }
}
728x90