[개발일지2일차] JavaScrpit2/3

학습한 내용

1) 제어문

제어문은 프로그램의 흐름을 제어 할 수 있도록 도와주는 실행문을 말함.
조건문과 반복문은 둘다 프로그램이 실행되는 순서를 제어하고 있음.
따라, 조건문과 반목문을 합쳐서 제어문이라고 함.

1-1) 제어문의 종류
: 조건문, 선택문, 반복문

<참고1>
조건문과 반복문을 선행하기 위해서는 선행되어야 하는 부분에서 '분리언'이 필요함.
분리언(Boolean)? 구체적인 data 2개를 말하며 true, false
즉, 참이냐 거짓이냐를 판단하는 값

<참고2>
분리언을 만들어내는 2개의 연산자
' 비교연산자'/ '분리연산자'

비교연산자

동등 비교 연산자, 일치 연산자(strict equality operator)
'===' 인 경우에는 [동등 비교 연산자, 일치연산자]라고 하며 왼쪽의 값(좌항)과 오른쪽 값(우항)이 같은지를 물음.

<참고 2-1>
'===' 와 '==' 의 차이
간략적으로 '==='의 경우는 완전하게 동등한지를 표현한다면,
'==' 의 경우 대충 비슷하게 동등한지를 표현한다.
동등한지를 표현하기 위해서는 '==='를 사용하는 편이 좋음.

2) 조건문(conditional statements)

프로그램이 조건에 따라 다른 기능들이 다른 순서에 따라 실행되도록 만들어 주는 것
조건문은 조건식의 값이 참(true)인지 아니면 거짓(false)인지에 따라 실행문의 제어가 결정됨.
조건문의 종류: if 문, else문, else if 문

2-1) if문

불 표현식의 값이 true 이면 중괄호 안의 문장을 시행하고, false이면 문장을 무시한다.

if (불 값이 나오는 표현식){
	불 값이 참일때 실행할 문장
    }

예시-1)

<!DOCTYPE html>
<html>
    <title>if</title>
    <head>
    <body>
    <script>
        if(300<100){
            alert('300<100=>true')
        }
        alert('종료')
    </script>
    </head>
    </body>
</html>

결과-1)

if 조건문의 불 값이 false이므로, 중괄호 안의 문장을 실행하지 않게 되며, 예시를 실행하게 되면 '종료'가 출력된다.

예시-2)

<!DOCTYPE html>
<html>
    <title>if</title>
    <head>
    <body>
    <script>
        if(300>100){
            alert('true')
        }
        alert('종료')
    </script>
    </head>
    </body>
</html>

결과-2)

2-2) if~else 문

if else구문은 하나의 조건으로 2가지의 실행문을 표현 할 수 있다.

if(조건식){
	참일 때 실행할 구문
 } else{
     거짓일 때 실행할 구문
 }

예시)

<html>
    <body>
        <script>
           let input_id= prompt('너의 이름은?');
        if(input_id==='random'){
                alert(input_id+'님 안녕하세요^^');
        }else{
            alert("누구세요");
        }
        </script>
    </body>
</html>

결과-1)

결과-2) if~else 문에서 참일 때 (결과1에서 'random' 입력)

결과-3) if~else 문에서 거짓일 때 (결과 1에서 'random' 이외 입력)

if 조건식에서 거짓(random 이외)으로 성립되자 참인 구문이 아닌 else 뒤로 오는 구문이 실행되는 것을 알 수 있다.

3) 반복문(loop statements)
반복문(for 문)

반복문을 사용하는 이유
:0,1,2,3,4....1000까지의 수를 코드로 작성할려면 console.log(1).....console.log(1000)까지 모두 타이핑을 해야하는데 이 경우 반복문을 사용한다.

for(시작조건, 반복조건, 매 반복 후 할 일){
	매 반복마다 실행될 명령어}

<script>// 반복문
for(let i=0 ; i<5 ; i++){
	console.log(i)
    // 현재 반복 작업을 중지하고 다음 반복작업을 continue
    alert(i)
    }
    </script>

예시)

<!doctype html>
<html>
    <head></head>
        <body></body>

            <h1>반복문(Loop)</h1>
            <script>
                console.log(1);
                for( let i=0;i<2;i=i+1 ){
                    console.log(2);
                    console.log(3);
        
                }
                console.log(4);
            </script>
            
        </body>
</html>

<참고1>
배열(array) [인덱스, index]
배열[배열.length-1]

배열의 기본적인 조작은 문자열과 비슷하며, 각각의 요소에 접근하려면 배열 바로 뒤에 대괄호[]를 입력하고 그 안에 숫자를 넣는다.
요소의 순서를 인덱스(index)라고 부른다
-JavaScrpit의 경우 가장 앞에 있는 요소를 0번째로 표현한다.
예시에서 for(let i=0; i<2; i=i+1}
에서 i=0 이 된다.
요소의 순서(가장 앞의 요소는 0번째)

예시)

<!doctype html>
<html>
    <head></head>
        <body>
            <h1>배열(Array)</h1>
            <script>
               let topic1= 'html';
               let member1='egoing'
               let topic2='css';
               let member2='leezche';
               let topic3='js';
               let member3='duru';


               let topics= ['html','css','js'];
               let members=['egoing','leezche','duru'];
                console.log(topics.length);
                console.log(topics[0]);
            </script>

        </body>
</html>

결과)

학습한 내용 중 어려웠던 점 또는 해결못한 것들

for 문 상의 오류
수업 도중 반복문(for 문)에서 오류가 지속적으로 생기게 되었다.

<!doctype html>
<html>
    <head></head>
        <body>
            <h1>Array+Loop</h1>
            <script>
                 topics=['html','css','js'];
                for [let i=0; i<topics.length; i=i+1]{
                   document.write('<li>'+topics[i]+'</li>');

                }
            </script>
        </body>
</html>

콘솔에서의 화면

해결방법 작성

콘솔에서 힌트를 얻게 됨.
1) html: 8 즉, 8번째 열에서 오류 발생
2) 4번째 열에서 '[' 라는 부분

따라, 반복문(for문)에서 구조 상 오류가 있음을 발견 할 수 있었다.

3) 수정한 코드

<!doctype html>
<html>
    <head></head>
        <body>
            <h1>Array+Loop</h1>
            <script>
                 topics=['html','css','js'];
                for (let i=0; i<topics.length; i=i+1){
                   document.write('<li>'+topics[i]+'</li>');

                }
            </script>
        </body>
</html>

코드를 수정하였을 때 콘솔 상의 화면

학습 소감

오늘은 강사님께서 작성하신 코드르 보지 않고 스스로 콘솔을 이용하여 본인의 반복문 오류를 발견해냈는데 어제만 해도 콘솔을 봐도 어느 부분을 어떻게 수정해야할 지 감이 없었는데 콘솔에서 어떤 부분이 잘못되었고를 판단 할 수 있는 능력이 조금씩 생기는 것 같았고, 수업시간에 강사님께서 개발자들도 콘솔을 이용하여 오류를 발견해 낸다. 라는 말씀을 하셨는데 그 의미가 무엇인지 정확히 파악 할 수 있게 되었습니다.

또한, velog도 어제 처음 사용해봐서 velog 상에서 코드를 어떻게 작성하는지에 대해 잘 알지 못하였는데 그 부분도 적응을 할 수 있었고, velog를 작성하면서 수업시간에 메모한 부분과 본인이 코딩한 부분, 수업동영상을 다시보고 인터넷도 찾아보면서 JavaScript에 대한 이해가 조금 더 폭 넓게 되었습니다.

Author And Source

이 문제에 관하여([개발일지2일차] JavaScrpit2/3), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@joseojin/개발일지2일차-JavaScrpit23

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

[개발일지2일차] JavaScrpit2/3

Author And Source

좋은 웹페이지 즐겨찾기