2024. 01. 15

오늘 공부한 것(feat. 생활코딩 JavaScript)

이번 과제를 통해 너무 부족함을 많이 느껴서 기본적인 것 부터 다시 복습하기로 했다...

- 배열에 있는 요소를 불러오는 방법 -

<script>

        let borrachos = ['김삿갓', '김춘자'];

        document.write(borrachos[0]);

        document.write(borrachos[1]);

    </script>

1. 배열을 선언한다.
2. document.write를 사용하고 '부르고 싶은 배열[배열의 순서]'

- 이미 만들어진 배열에 요소를 추가하는 방법 -
(기본적인 2가지 방법)
1. borrachos.push(넣고 싶은 것)
push()는 배열의 가장 마지막 자리에 요소를 추가시켜준다.
내가 알아낸 것: 요소를 하나만 넣을 수 있는 줄 알았는데 두개를 넣으면 그대로 추가가 된다.

<h2>Add(첨가)</h2>

    <script>

        borrachos.push('아무개','푸찌');

        document.write(borrachos);

    </script>

- 배열의 길이를 구하는 방법 -
brrachos.length

내가 시도해본 것
배열의 길이를 구해서 화면에 띄우고 싶다.

1. <p>태그를 만들고 id 값을 부여했다.
2. length값을 넣을 boralength 변수를 선언했다.
3. document.querySelctor를 사용하여 <p>태그에 부여한 id 값을 넣어주고 위치를 지정한다.
4. .innerHTML = borrachos 를 입력하여 borrachos 배열값을 문자열로 나타나었다.
숫자형으로 시도를 해본 후 typeOf로 확인해본 결과 string을 출력함을 볼 수 있었다.
* innerHTML은 문자열로 바꿔서 화면에 나타내줌

<h2>Count(배열에 몇개의 값이 있는가?)</h2>

    <p id="Count"></p>

    <p id="length"></p>

    <script>

        // 쿼리 셀렉터로 위치를 지정, innerHTML로 borrachos 배열을 넣겠다고 얘기한거임

        // (innerHTML은 넣고자 하는 것을 문자열로 바꿔서 넣음.)

        let boralength = document.write(borrachos.length);

        document.querySelector('#Count').innerHTML = borrachos

        boralength = Number(document.querySelector('#length').innerHTML);

    </script>

마지막 줄의 boralength의 Number를 사용하기 전에는 페이지에 undefined가 같이 나타났었는데, 사용하니까 undefined가 사라졌다. 하지만 typeOf로 찍어보면 그대로 문자형이었다... 왜일까...?
이건 나중에 시간 되면 해봐야겠다.

항상 헷갈리는 반복문... 아직도 오락가락

크게 공부한 것은 없다. 하지만 내가 얻은 것은 있는 것 같음.

 <h1>Loop</h1>

    <ul style="list-style: none;">

        <script>

            let i = 0;

            document.write(i);

            document.write('<li>1</li>');

            while (i < 3) {

                document.write(i + '번 째 반복했습니다-----------');

                document.write('<li>2</li>');

                document.write('<li>3</li>');

                i += 1;

            }

            document.write('<li>4</li>');

        </script>

항상 이해가 안됐던 것은 i의 존재이다....
위에서 아래로 내리갈굼 하면서 동작을 하기 때문에 천천히 읽어봤다.

i변수에 0을 선언한 후  i 값을 페이지에 적으시고, 1을 적어라.
반복문 시작
조건은 i가 3보다 작을 때 까지가 ture이니까 3번 까지는 반복하고 false를 만나면 반복은 중지되고 다음 줄의 코드로 간다.

내가 얻은 것
카운터 변수 i는 반복문 밖에서 선언된 전역 변수임.
반복문 마지막에 i = i + 1을 하면서 반복문을 실행시키는데,
전역변수 i의 값을 하나 늘려준 상태로 다시 반복을 돈다(false가 될때 까지)
console.log로 i를 찍어보니 기본 값을 0으로 줬지만 3이 된 것을 알 수 있었음.. 

아주 약간은 이해했지만 사실 큰 차이는 없다.
제일 헷갈리는 것은 for문인데 영상에서는 while문을 사용했다.

while은 case, break가 기억이 나는데 이게 아닌가..?