생각기록

생활 코딩 WEB2 JavaScript 3 본문

강의 정리/생활 코딩 강의 정리

생활 코딩 WEB2 JavaScript 3

끼록관 2022. 11. 9. 18:38

반복문

링크가

밝을 경우에는 어두운 컬러로

어두운 경우엔 밝게

 

var links =

document.querySelectorAll('a');

이 웹페이지. 모든 <a>태그 선택

 

var i = 0;
            while( i < links.length ){
                links[i].style.color='powderblue';
                i = i+1 ;
            }

이것을 이해하기 위한, 배열을 공부해야 함

 

배열과 반복문

집의 사물들을 정리정돈 할 수납공간이 필요하다.

프로그래밍도 많은 데이터를 다루고, 데이터의 성격도 다르다.

 

사물은 수납상자에

음식은 냉장고에

분류를 해두면, 우리는 단순하게 생각 할 수 있다.

 

마찬가지로 데이터 중 서로 연관된 데이터를 잘 정리정돈해서

담아 두는 수납 상자

 =  배열, Array

배열의 문법

배열은 [  "값1", "값2 ", "값3" ] ;

대괄호로 시작, 끝

그 안에 값

 

 

수납상자에 물건을 담았다.

var fruits = [ "apple", "banana"];

fruits 라는 변수에 배열이라는 새로운 데이터 타입을 담음

 

 

그럼 가져오는 방법은?

document.write( fruits [ 0 ] );

과일 상자에서 첫번 째 물건을 가져와!

> apple

 

index라고 함

*0부터 시작 / 첫 번째는 0임!

index 0번은 사과

index 1번은 바나나

 

 

또 들어있는 물건은 몇개인가?

document.write( fruits. length );

. length  갯수

값이 2개 라면, 2

 

데이터를 추가하는 방법은?

document.write(fruits.push( " kiwi " ));

.push 추가

데이터를 끝에 추가

 

javascript array 검색해서

여러 기능을 이용해 배열 수납상자 데이터를 넣고 빼고 몇개인지, 어떤 작업을 할지

정교한 기능들이 마련되어 있으니 참고하자!

 

<body>
    <h1>Array</h1>
    <h2>Syntax(문법)</h2>
    <script>
        var fruits = [ "apple", "banana"];
    </script>

    <h2>get</h2>
    <script>
        document.write(fruits[0]);
    </script>

    <h2>add</h2>
    <script>
        document.write(fruits.push("kiwi"));
        document.write(fruits.push("grape"));
    </script>

    <h2>count</h2>
    <script>
        document.write(fruits.length);
    </script>
</body>

 

배열과 환상의 콤비!

반복문

프로그램의 기본순서는 순차적이다. 1 - 2 - 3 - 4

 

2,3을 1억개를 카피하려면.. 힘들다 반복문을 사용해보자

 

 

반복문의 기본문법

while ( true, false ) {    }

  • true일경우 2,3 계속 반복
  • flase가 되어야 4로 이어진다.
  • 항상 종료 지정하는 것이 중요!(false)

순서대로 실행되는 프로그램 실행 순서를 제어하는 제어문이다.

if와 조건문과 함께 ^^

 

while ( 조건식 ) { 만족하면, 이걸 실행해! }

1. 변수 만들기

     var i = 0;

 

2.  조건식 ( i < 3 )

    현재 i 값이 0 이니 true  = 실행 됨

     i가 2까지만 실행 될 것! => i변수값이 0,1,2  총 세번 실행

 

3.  i = i + 1; 내려오면서 i의 값은 1이 됨 (후위 증가)

 

4. 다시 while문으로 반복해서 위로 

    {document.write('<li>2</li>');
      document.write('<li>3</li>'); 이부분을 반복!

     조건이 false가 될 때 까지 

    <h1>반복문</h1>
    <ul>
        <script>
            document.write('<li>1</li>');
            var i = 0;
            while( i < 3 ){
            document.write('<li>2</li>');
            document.write('<li>3</li>');
            i = i + 1;
            // 실행될때마다 i값이 1씩 증가한다.
        }
            document.write('<li>4</li>');
        </script>
    </ul>
</body>

배열과 반복문을 합성 =  환상의 콤비!!

 

개발자들은 데이터가 바뀌었다고해서 로직을 바꾸는걸 챙피해한다...

유연한 로직을 만들어보자!

 

while ( i < 4 )로 한다면

텔레토비의 4명만 반복해서 표기 될 것이다.

 

이것을 배열을 이용해서 요소들이 빠지고 더해도 추가 되도록 해보자!

1. while ( i < tel.length ) {    ...    }

tel이란 변수 속 요소들의 갯수만큼 반복하겠다!

 

2. '<li>'  '</li>' 태그 안에 요소들을 넣으려면

('<li>' + tel [i] + '</li>');

i값은 0부터 시작하니까 ( 배열도 0부터 시작)

<li>태그 속에서  배열의 첫번째부터 같이 시작된다.

 

 document.write('<li><a href="http://a.com/'+ tel[i] + ' ">' + tel [i] + '</a></li>');

이런식으로 응용이 가능하다.

<body>
    <h1>반복문과 배열</h1>
    <script>
        var tel = ['나나', '뽀', '뚜비', '보라돌이','신입1','신입2'];
    </script>
    <h2>텔레토비</h2>
    <ul>
        <script>
            // 땡땡이가 4개 반복
            var i = 0;
            while( i < tel.length ){
                // 우연이지만, i와 tel배열의 엘리먼트요소들의 순서가 동일하다 그것을 응용
                document.write('<li><a href="http://a.com/'+ tel[i] +'">' + tel [i] + '</a></li>');
                i = i + 1 ; 
            }
        </script>
    </ul>
</body>

23부터 강의 들어라

 

'강의 정리 > 생활 코딩 강의 정리' 카테고리의 다른 글

생활 코딩 WEB2 파일 쪼개서 정리 정돈  (0) 2022.11.12
생활 코딩 WEB2 JavaScript 5  (0) 2022.11.11
생활 코딩 WEB2 JavaScript 4  (0) 2022.11.11
생활 코딩 WEB2 JavaScript 2  (0) 2022.11.09
생활 코딩 WEB2 JavaScript 1  (0) 2022.11.09
'강의 정리/생활 코딩 강의 정리' Related Articles more