✨우당탕탕 개발일지-3

21497 단어 htmlJavaScriptCSSCSS

📆 2022-3-25

-학습내용-

배열

   <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>

for반복문

 <script>
            console.log(1);
            for(let i=0; i<2 ;i=i+1){
                console.log(2);
                console.log(3);
            }
            console.log(4);            
        </script>

        <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>

        <script>
            let topics2 = ['html', 'css', 'js']
            for(let i=0;i<topics2.length;i=i+1){
                // document.write('<li>'+topics2[i]+'</li>');
                document.write(`<li>${topics2[i]}</li>`);
            }
        </script>

으아아

함수

<html>
    <body>
        <h1>function</h1>
        <script>
            function abc(){
                console.log('a');
                console.log('b');
                console.log('c');
                }
                abc();
            console.log(1);
            console.log(2);
            console.log('a');
            console.log('b');
            console.log('c');
            console.log(3);
            console.log('b');
            console.log('c');
            console.log('a');
            console.log(4);
            console.log('c');
            console.log('a');
            console.log('b');
            console.log('c');
            console.log(5);
            console.log(7);
        
            
            
        </script>
        <h1>vat</h1>
        <script>
            function 부가세계산(가격, 부가세율){              
                let 부가세 = 가격 * 부가세율;
                return 부가세;
            }
            
            console.log(부가세계산(4000, 0.1));
        </script>
        <h1>sum</h1>
        <script>
          function 가격계산(가격1,가격2){
            let 가격=가격1 +가격2;
            return 가격;
        
          }
          console.log(가격계산);
      

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

가독성을 올려주고 유지보수를 편하게 해준다!

링크텍스트

중간에 반복문 활용하는 법을 보여주기위해 2000개의 버튼을 눌러준느 코드를 짰다.

let inputs = document.querySelectorAll('input');
for(let i=0; i<inputs.length; i=i+1){
if(inputs[i].value>100){
if(inputs[i].value<200){inputs[i].click();}
}
}

버튼 2000개를 한꺼번에 눌러야 할때 필요한 것
:반복문

-문제사항-

점점 더 이해하기가 어려워짐과 동시에 승부욕이 생긴다. 타자연습에 대한 필요성을 절실히 느낀다. 오타하나로 해매는 경우가 너무 많다.

-해결방법-

심심할때 타자연습하기!, 웹페이지 새로 만들어보기!(오늘 배운 간단한 함수와 for문으로 위스키 관세 계산 사이트 만들어보기!)

-학습소감-

어려운데 재밌다! input,output이 바로바로 나온다는 건 참 행복한 일이구나 라는걸 세삼 느낀다. 간만에 창조욕구 해소대상을 찾았다. 재밌는게 자꾸 떠오른다🤩

좋은 웹페이지 즐겨찾기