Notice
Recent Posts
Recent Comments
Link
«   2025/05   »
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
Archives
Today
Total
관리 메뉴

비전공 프론트엔드 개발자

21-11-25 자바스크립트 본문

카테고리 없음

21-11-25 자바스크립트

JJ_hyun 2021. 11. 26. 19:33

조건문 

1. if ( Boolean ) { 내용 } -> true면 실행, false면 넘어감

2. else -> 앞의 if 가 실행이 안됫을 경우 실행

3. else if ( boolean ) { 내용 } -> 앞의 내용이 실행 안됫을 경우 boolean을 통해 실행여부 확인

 

아이디 실행 코드

        var id = prompt('아이디를 입력해 주세요');
        if (id == 'hyun') {
            alert('이름이 일치합니다.');
        }else {
            alert('이름이 일치하지 않습니다.');
        }

alert 는 그냥 알림창을 띄우지만 prompt 는 사용자에게 입력값을 받음. 

코드 내용이 간단해 자세한 설명은 생략. 이것도 모르면  공부 다시해라,,

 

 

비밀번호 까지 확인 하는 코드

        var id = prompt('아이디를 입력해 주세요');
        if ( id == 'hyun') {
            let pw = prompt('비밀번호를 입력해 주세요.');
            if (pw == '111111') {
                alert('로그인 되었습니다. '+ id+' 님 반갑습니다.');
            }else {
                alert('비밀번호를 잘못 입력하셨습니다.');
            }
        } else {
             alert('아이디를 확인해 주세요.');
        };

 해당 코드에서 궁금증이 생겼다. 

1. if 함수 안에 있는 pw 변수를 if문 밖에서 선언을 하면 아이디 값이 달라도 비밀번호 입력 창으로 넘어간다. 

-> 마지막에 아이디를 확인해 주세요 창이 뜬다.

--> 코드를 가만히 보니 if문 시작전 prompt로 인해 입력값을 다 받은 후 if문이 시작된다. 

결국 사용자는 if문 밖에 있는 prompt로 인해 아이디와 비밀번호를 다 입력한 후 if문을 통해 값을 확인하게 된다.

고로 비밀번호는 if문 안에 있어야 원하는 기능이 실행된다. ( 해결 )

 

        // &&(엔퍼센트 , 논리 연산자)
        var id = prompt('아이디를 입력해 주세요');
        var pw = prompt('비밀번호를 입력해 주세요');
        if ( id == 'hyun' && pw === '111111') {
                alert('로그인 되었습니다. '+ id+' 님 반갑습니다.');
        } else {
             alert('아이디를 확인해 주세요.');
        };
논리 연산자 && (  and , 엔퍼센트 ) - A && B 형식의 &&기준 좌항과 우항 모두 참이여야 실행된다. 
->해당 코드에도 첫번째 코드와 똑같은 이슈가 있음.
코드를 자세히 분석해 보니 이 로직은 그럴 수 밖에 없는 로직임을 이해함 ( 거의 30분을 고민하다 이해했다는.. )
 
 
        // ||(파이프, 논리연산자)
        var id = prompt('아이디를 입력해 주세요');
        var pw = prompt('비밀번호를 입력해 주세요');
        if ( (id == 'hyun'|| id == 'jun' || id == 'yang' ) && pw === '111111') {
                alert('로그인 되었습니다. '+ id+' 님 반갑습니다.');
        } else {
             alert('아이디를 확인해 주세요.');
        };
논리 연산자 ||( or , 파이프 ) - 참||참 = 참, 참 ||거짓 = 참,  거짓||참 = 참,  거짓||거짓 = 거짓 
id값을 여러개 받을 수 있음.

 

 

반복문 ( while , for )

while ( 조건=Boolean ) { 반복을 실행 할 코드 }

 

        var i = 0;
        while ( i<10) {
            document.write('hyunjun'+i+'<br/>');
            i = i+1;
        }
 

while 

3가지 부분이 있어야 한다. 

1. 변수 선언 과 동시에 초기화 하는 부분 ( var i = 0; )

2. 반복을 언제까지 진행할것 이냐는 반복의 조건 ( while ( i <10 ) )

3. 실행이 될 때 마다 i의 값을 갱신해 주는 식 ( i = i + 1 )

 

- while 을 잘 안쓰는 이유 

= 3가지를 충족 해야 하는데 코드들 사이에 다른 코드가 입력되고, 조건들 사이에 다른 코드들이 많이 가독성이 떨어지고, 실수할 확률이 높아짐. 

 

for 

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

 for ( 초기화부분; 반복조건; 반복실행 ) 

이 한 코드안에 다 입력하여 while의 단점을 완전히 보안한다. 

반복실행 뒤에 ; 하지 말것. < 은근히 헷갈림. 

i++ 는 i값을 먼저 출력하고 값을 더함

++i 는 먼저 더하고 i값을 출력함. 

 

.

.

.

.

.

.

느낀점. 

조건문과 반복문을 알아봤는데 이해는 했지만 솔직히 실무에서 어떻게 쓰이는지, 어떤식으로 써야할지 감이 전혀 없음.

약간.. 내 머리속에 반복문과 조건문이라는 지식만 갖고있는, 즉 html로만 짜여진 페이지를 보고있는 느낌이다. 

실무에선 어떤식으로 쓰이는지, 이게 왜 중요한지 피부로 느끼기 전까지는 잘 모를것같은 느낌이 든다.