[JS] 숫자와 문자/변수/비교/조건문

day024·2024년 10월 17일

HTML&CSS&JS

목록 보기

6/15

1. 숫자와 문자

1.1 수의 표현/연산

자바스크립트에서는 큰따옴표나 작은따옴표가 붙지 않은 숫자는 숫자로 인식한다.

alert(1+1);

결과 2

alert(1.2 + 1.3);

결과 2.5

Math.pow(3,2);       // 9,   3의 2승 
Math.round(10.6);    // 11,  10.6을 반올림
Math.ceil(10.2);     // 11,  10.2를 올림
Math.floor(10.6);    // 10,  10.6을 내림
Math.sqrt(9);        // 3,   3의 제곱근
Math.random();       // 0부터 1.0 사이의 랜덤한 숫자

1.2 문자

문자(String)는 "(큰 따옴표) 혹은 '(작은 따옴표) 중의 하나로 감싸야 한다.

alert("coding everybody");

alert('coding everybody');

alert(typeof "1") //타입을 알려줌

결과 : string

alert(typeof 1)
결과 : number

작은따옴표를 문자열 안에 포함 하는 방법 : 이스케이프()를 사용한다.

alert('egoing\'s javascript')

'\n' : 여러줄을 표시하는 줄바꿈 기호

alert("안녕하세요.\n생활코딩의 세계에 오신 것을 환영합니다");

문자연산
문자를 더하는 방법

alert("coding"+" everybody");

결과 : coding everybody

문자의 길이를 구하는 법: .length

alert("coding everybody".length)

결과 : 16

2. 변수

변수(Variable) : (문자나 숫자 같은) 값을 담는 컨테이너로 값을 유지할 필요가 있을 때 사용, 변수는 변경이 가능하다.
변수는 코드의 재활용성을 높여준다(유지보수의 용이)

var : 자바스크립트에서 변수 선언하는 방법

var a = 1;
alert(a+1);  //2

var a = 2;
alert(a+1);  //3
var first = "coding";
alert(first+" everybody");

//변수 a에 coding ,변수 b에 everybody를 활당하는 방법은 아래와 같다.
var a = 'coding', b = 'everybody';
alert(a);
alert(b);

3. 비교

비교 : 주어진 값들이 같은지, 다른지, 큰지, 작은지를 구분하는 것을 의미

비교 연산자의 결과 : boolean 형식으로 true나 false 중의 하나다

==
동등 연산자로 좌항과 우항을 비교해서 서로 값이 같다면 true 다르다면 false

alert(1==2)             //false
alert(1==1)             //true
alert("one"=="two")     //false 
alert("one"=="one")     //true

=== : 일치 연산자로 === 좌항과 우항이 '정확'하게 같을 때 true 다르면 false가 된다.

alert(1=='1');              //true
alert(1==='1');             //false

== 연산자 대신 === 연산자를 쓰는 것을 추천

!= : '!'는 부정을 의미한다.

alert(1!=2);            //true
alert(1!=1);            //false
alert("one"!="two");    //true
alert("one"!="one");    //false

!== : '!=='는 '!='와 '=='의 관계와 같다. 정확하게 같지 않다는 의미다.

>, < : 좌항이 우항보다 크다면 참, 그렇지 않다면 거짓임을 알려주는 연산자다.

alert(10>20);   //false
alert(10>1);    //true
alert(10>10);   //false

>=, <= : 크거나 같다.

alert(10>=20);      //false
alert(10>=1);       //true
alert(10>=10);      //true

4. 조건문

Boolean
'비교 수업'에서 비교 연산의 결과로 참(true)이나 거짓(false), 불린은 조건문에서 핵심적인 역할을 담당

조건문 : 조건문이란 주어진 조건에 따라서 에플리케이션을 다르게 동작하도록 하는 것이다.

4.1 if & else & else if

if
조건문은 if로 시작한다. if 뒤의 괄호에 조건이 오고, 조건이 될 수 있는 값는 Boolean이다. Boolean의 값이 true라면 조건이 담겨진 괄호 다음의 중괄호 구문이 실행된다.

아래 예제의 실행결과는 'result : true'다. if 뒤에 true가 왔기 때문이다.

if(true){
    alert('result : true');
}

if(false){
    alert('result : true');
}

결과는 12345를 출력

if(true){
    alert(1);
    alert(2);
    alert(3);
    alert(4);
}
alert(5);

결과는 5만 출력

if(false){
    alert(1);
    alert(2);
    alert(3);
    alert(4);
}
alert(5);

else

if(true){
    alert(1);
} else {
    alert(2);
}

다음 예제의 결과는 2다.

if(false){
    alert(1);
} else {
    alert(2);
}

else if
if나 else와는 다르게 여러개가 올 수 있음.
else if의 모든 조건이 false라면 else가 실행된다. else는 생략 가능하다.

if(false){
    alert(1);
} else if(true){
    alert(2);
} else if(true){
    alert(3);
} else {
    alert(4);
}

다음 예제의 결과는 3이다.

if(false){
    alert(1);
} else if(false){
    alert(2);
} else if(true){
    alert(3);
} else {
    alert(4);
}

다음 예제의 결과는 4다.

if(false){
    alert(1);
} else if(false){
    alert(2);
} else if(false){
    alert(3);
} else {
    alert(4);
}

4.2 조건문의 중첩

위의 예제에서 아이디와 비밀번호를 모두 검증해야 한다면 어떻게 하면 될까? 다음 예제를 보자.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
    <script>
        id = prompt('아이디를 입력해주세요.');
        if(id=='egoing'){
            password = prompt('비밀번호를 입력해주세요.');
            if(password==='111111'){
                alert('인증 했습니다.');
            } else {
                alert('인증에 실패 했습니다.');
            }
        } else {
            alert('인증에 실패 했습니다.');
        }
    </script>
</body>
</html>

4.2.1 논리 연산자

1. &&(and 연산자)
&&는 좌항과 우항이 모두 참(true)일 때 참이된다.
예제의 결과는 1이다. &&의 좌우항이 모두 true인 것은 첫번째 조건문 밖에 없기 때문이다.
이러한 논리 연산자를 and 연산자 라고 함

if(true && true){
    alert(1);
}
if(true && false){
    alert(2);
}
if(false && true){
    alert(3);
}
if(false && false){
    alert(4);
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
    <script>
        id = prompt('아이디를 입력해주세요.');
        password = prompt('비밀번호를 입력해주세요.');
        if(id=='egoing' && password=='111111'){
            alert('인증 했습니다.');
        } else {
            alert('인증에 실패 했습니다.');
        }
    </script>
</body>
</html>

2. ||(or 연산자)
'||'는 '||'의 좌우항 중에 하나라도 true라면 true가 되는 논리 연산자다.
부른다.
다음 예를 보자. 결과는 1,2,3이 출력된다. 마지막 조건문의 '||'는 좌항과 우항이 모두 false이기 때문에 false가 된다.

if(true || true){
    alert(1);
}
if(true || false){
    alert(2);
}
if(false || true){
    alert(3);
}
if(false || false){
    alert(4);
}

id = prompt('아이디를 입력해주세요.');
if(id==='egoing' || id==='k8805' || id==='sorialgi'){
    alert('인증 했습니다.');
} else {
    alert('인증에 실패 했습니다.');
}

위의 예제에서는 논리 연산자를 3개 사용했다. 2개만 사용하는 것이 아니라는 것을 보여주기 위한 예제다.

다음 예제는 id 값으로 egoing, k8805, sorialgi 중의 하나를 사용하고 비밀번호는 111111을 입력하면 right 외의 경우에는 wrong를 출력하는 예다.

id = prompt('아이디를 입력해주세요.');
password = prompt('비밀번호를 입력해주세요.');
if((id==='egoing' || id==='k8805' || id==='sorialgi') && password==='111111'){
    alert('인증 했습니다.');
} else {
    alert('인증에 실패 했습니다.');
}

id의 값으로 egoing 비밀번호를 111111을 입력시 연산순서

(id=="egoing" or id=="k8805" or id=="sorialgi") : true가 된다.
password=='111111' : true가 된다.
true(1항) and true(2항) : true가 된다.

3. !(not 연산자)
'!'는 부정의 의미로, Boolean의 값을 역전시킨다.
true를 false로 false를 true로 만든다. not 연산자라고 부른다.

if(!true && !true){
    alert(1);
}
if(!false && !true){
    alert(2);
}
if(!true && !false){
    alert(3);
}
if(!false && !false){
    alert(4);
}

조건문에 사용될 수 있는 데이터 형이 꼭 불린만 되는 것은 아니다. 관습적인 이유로 0는 false 0이 아닌 값은 true로 간주된다. 아래의 예제는 2를 출력한다.

if(0){
    alert(1)
}
if(1){
    alert(2)
}

4. 기타 false로 간주되는 데이터 형
다음은 false와 0 외에 false로 간주되는 데이터형의 리스트다.
if문의 조건으로 !(부정) 연산자를 사용했기 때문에 각 조건문의 첫번째 블록이 실행되는 것은 주어진 값이 false이기 때문이다.

if(!''){
    alert('빈 문자열')
}
if(!undefined){
    alert('undefined');
}
var a;
if(!a){
    alert('값이 할당되지 않은 변수'); 
}
if(!null){
    alert('null');
}
if(!NaN){
    alert('NaN');
}