JavaScirpt 공부 - 2

예흠·2020년 6월 25일
0

안녕하세요 자바스크립트 공부 2번째 입니다~~

시작해 볼까요!!

* 조건문 (if, else)

" if "

조건 문은 ' if ' 로 시작합니다.

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

이 결과는 result : true 가 뜨겠죠? 왜냐면 true 가 조건으로 왔기 때문입니다.

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

이 결과는 false 기 때문에 아무것도 실행되지 않습니다.

" else "

다음은 else의 예시 입니다.

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

이 결과는 true기 때문에 1이 됩니다.

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

이 결과는 false기 때문에 2가 되겠죠??

" else if "

다음은 else if 의 예시 입니다.

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

결과 값은 2 입니다. 뒤에 3도 true 지만 앞에 2가 먼저 트루기 때문에 2가 나온답니다.

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

결과 값은 4입니다! 말 안해도 알죠?ㅋㅋㅋ

* 조건문의 응용!

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

이런식으로 if문 안에 또 if문을 넣어서 여러가지의 길을 넓힐수 있습니다!
위에 예시는 아이디값을 확인후 비밀번호 값을 확인하는 것입니다.


* 논리 연산자

- &&

이 연산자는 두개 모두가 true여야지 true인 연산자 입니다. and연산자 라고 합니다.

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

위의 결과는 1입니다. 두번째 if문은 하나만 true기 때문에 false가 됩니다.

- ||

||연산자는 좌우항 둘 중 하나만 true라면 true가 되는 연산자 입니다. or 연산자 라고 합니다.

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

이 경우 값은 1,2,3 이 출력 됩니다. 마지막은 둘다 false기 때문에 false가 됩니다.

- !

이 연산자는 부정의 의미로 Boolean의 값을 역전 시킵니다. not연산자 라고 부릅니다.

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

이 예제의 결과는 4입니다. !연산자 때문에 true&&true가 되고 이것은 true기 때문입니다.1

* 논리연산자와 조건문의 응용

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

위의 예제에서는 or와 and를 혼합해서 사용하는 방법을 보여줍니다. id 값을 테스트 하는 구간을 괄호()로 묶었습니다. 사용자가 id의 값으로 egoing 비밀번호를 111111을 입력했다면 연산의 순서는 아래와 같이 됩니다.

  1. (id=="cyheum" or id=="yeheum" or id=="heum") : true가 된다.
  2. password=='1118' : true가 된다.
  3. true(1항) and true(2항) : true가 된다.

여기서 한가지 더 알아야 할 것은 C언어와는 다르게 논리연산자를 3개 사용한다는 것입니다!!!
C언어는 2개만 됐는데... 편하네여 ㅋㅋㅋ




* 반복문!!

- while

while 반복문의 형식은 아래와 같습니다.

while (조건){
    //반복해서 실행할 코드
}

이런식으로 사용을 한답니다.

while(true){
    document.write('yeheum<br />');
}

이 코드를 보면 조건문이 계속 true기 때문에 무한반복을 합니다.
브라우저는 무한 반복을 허용하지 않기 때문에 어느정도 시간이 지나면 스크립트를 종료할 것인지 물어볼 것 입니다.

var i = 0;
// 종료조건으로 i의 값이 10보다 작다면 true, 같거나 크다면 false가 된다.
while(i < 10){
    // 반복이 실행될 때마다 yeheum <br />이 출력된다. <br /> 줄바꿈을 의미하는 HTML 태그
    document.write('yeheum <br />');
    // i의 값이 1씩 증가한다.
    i++
}

이런식으로 i 라는 변수를 만들어서 조건문에 사용해서 반복을 원하는 만큼 할 수 있답니다.

- for

for문의 형식은 아래와 같습니다.

for(초기화; 반복조건; 반복이 될 때마다 실행되는 코드){
    반복해서 실행될 코드
}

예제를 하나 봅시다

for(var i = 0; i < 10; i++){
    document.write('yeheum'+i+'<br />');
}

위의 예제처럼 변수 i를 선언 하고 초기화, 반복조건, 증가값 이런식으로 반복문을 만듭니다.
결과는 yeheum0, yeheum1,..2,...3 이런식으로 9까지 나오겠죠?
왜냐면 10이 된 순간 반복조건을 충족하지 못해 document.write를 실행하지 않고 탈출하기 때문입니다!!

* 반복문의 제어

- break

예제로 살펴 봅시다!

for(var i = 0; i < 10; i++){
    if(i === 5) {
        break;
    }
    document.write('yeheum'+i+'<br />');
}

이 결과는 어떻게 나올까요?
yeheum4 까지 나오는게 맞습니다.
i가 5가 되면서 if문에 걸리면서 빠져 나오게 되는거죠!

- continue

예제로 바로 살펴보겠습니다.

for(var i = 0; i < 10; i++){
    if(i === 5) {
        continue;
    }
    document.write('yeheum'+i+'<br />');
}

이 예제의 결과는??

yeheum 0
yeheum 1
yeheum 2
yeheum 3
yeheum 4
yeheum 6
yeheum 7
yeheum 8
yeheum 9

이렇게 5만 빼고 모두 출력이 되는 것입니다.
continue는 이렇게 그 조건에 맞는 경우 중단하고 반복문은 중단되지 않고 계속 진행 하게 하는 것입니다.

* 반복문의 중첩!

예제로 바로 살펴봅시다!

다들 눈치 채셨겠지만~~

// 0부터 9까지 변수 i에 순차적으로 값을 할당        
for(var i = 0; i < 10; i++){
    // 0부터 9까지의 변수를 j의 값에 순차적으로 할당
    for(var j = 0; j < 10; j++){    
        // i와 j의 값을 더한 후에 출력
        // String은 숫자인 i와 j의 데이터 타입을 문자로 형태를 변환하는 명령이다. 
        // String()을 제거하고 실행해보면 의미가 좀 더 분명하게 드러날 것이다.
        document.write(String(i)+String(j)+'<br />');
    }
}

네 이렇게 반복문안에 또 반복문을 넣어서 반복을 시킬수가 있답니다!~~

오늘은 포스팅 여기까지 하겠습니다~!

profile
노래하는 개발자입니다.

0개의 댓글