디자인

생활코딩 자바스크립트 배열 함수 초반

바다를바라보다 2021. 1. 3. 23:23

검색하는 습관을 길들여라!

콘솔창에서 줄바꿈은 shift + 엔터 그냥 엔터하면 실행됨 그리고 위쪽 화살표를 누르면 직전의 명령이 그대로 작성된다

 

/-- 배열 --/

 <script>

      document.write(coworkers[0]);

      document.write(coworkers[1]);

    </script>

    <h2>add</h2>

    <script>

      coworkers.push("duru");

      coworkers.push("taeho"); //array에 요소 추가하기(맨뒤)

    </script>

    <h2>count</h2>

    <script>

      document.write(coworkers.length); // array에 몇개의 요소가 있나

    </script>


/-- 반복문--/

<ul>

      <script>

        document.write("<Li>1</Li>");

        let i = 0//i 값은 현재 0

        while (i < 3) {

          //반복문의 기본문법 while{}

          document.write("<Li>2</Li>"); //true가 false될때 까지 반복

          document.write("<Li>3</Li>");

          i = i + 1//2,3 세번씩 등장 1,2,3 세번

        }

        document.write("<Li>4</Li>");

      </script>

    </ul>


/-- 배열과 반복문 --/

 

     <script>

        var i = 0;

        while (i < coworkers.length) {

          // 숫자대신 어레이.length 이용해 로직에 변화를 안줘도 된다

          document.write(

            '<li><a href="http://a.com/' +

              coworkers[i] +

              '">' +

              coworkers[i] +

              "</a></li>" // 반복문 안에 링크 걸기

          );

          i = i + 1//반복문 안에 +어레이 값[i]+

        }

      </script>


색바꾸기 밤 낯.

 

var alist = document.querySelectorAll('a');//a 리스트는 모든 a태그

      var i = 0

      while(i < alist.length){  // 0 < 에이리스트 랭쓰(4) 작을때까지

        alist[i].style.color = 'powderblue';  or blue// 

        i = i + 1// 0,1,2,3 > 3이 될때까지 실행 4번


function을 이용해야 웹페이지 크기와 정리 그리고 수많은 정보들이 나열 되었을 때 수정이 용이하다

전에 말했듯이 코딩을 잘하는 방법이란 최소한의 코드로 최대의 효율을 나타내는 것이다

 

함수는 수납공간 엄청난 효율성을 가져다 준다!

 

 

'디자인' 카테고리의 다른 글

애니메이션 실제로 적용해보기!  (0) 2021.01.06
GNB 만들어보자!  (0) 2021.01.05
css로 그리드 속성 살펴보기!  (0) 2020.12.31
노마드 코더 크롬 앱 만들기  (0) 2020.12.27
Flex로 다양한 레이아웃 만들기  (0) 2020.12.10