[개발일지3일차]JavaScript3/3

1. 학습한 내용

1) 조건문 (if문)
1-1) 중첩if문

if(   ){
	if(   ){   
    }
    else{
    }
    }else

즉, 첫번째 if()빈칸에서 조건부의 내용이 참이면 {}안에 있는 두번째 if를 실행하고 두번째의 if의 ()빈칸 조건부 내용이 참이면 {}안에 있는 내용을 실행한다.
다만, {}안의 내용이 거짓이면 else2로 표시하게 된다.

예시)

코드 적용 시

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();
    }
}
}

결과)

2) 반복문(for문)

for(초기변수 ; 조건식; 변수증감식){
	//code
}

초기변수: 처음에 지정한 변수의 값을 넣게 된다.
ex)let i=0; , num 등
조건식: 변수와 어떠한 조건을 비교하는 곳으로써 결과값이 참(true)일때 안의 코드를 반복하며 결과값이 거짓(false)일 경우 for문이 끝이 나게 된다.
-변수 증감식: 변수의 증가오 감소에 대한 식을 작성하게 된다.

예시)

코드적용 시

let inputs= document.querySelectorAll('input');
for(let i=101; i<inputs.length; i=i+1){
    inputs[i].click()
}

결과) 101을 포함한 숫자 이후 부터 표시가 나타나게 된다.

3) 함수(function)
함수는 서로 연관된 코드를 그룹핑해서 이름을 붙인 것이다..
특정 작업을 여러번 반복해야하는 경우 함수로 구현된 코드는 해당 함수를 호출함으로써 반복된 기능을 쉽게 처리 할 수 있게 된다.

function functionName(Parameter1,parameter2,...){
	//code to be executed
    }
  
function sum(p1, p2){
	let sum=p1+p2;
    return sum;
    }

3-1) 함수의 특징

재사용성 높일 수 있음
코드가 간결해 진다.
가독성이 좋아진다

3-2) 함수 용어
"함수 호출": 함수를 사용하는 것
"매개변수": 함수를 호출할 때 괄호 내부에 넣는 여러가지 자료
"리턴값": 함수를 호출해서 최종적으로 나오는 결과

예시-1)

<html>
    <body>
        <h1>function</h1>
        <script>
           function abc(){
               console.log('a');
               console.log('b');
               console.log('c')
           }
           console.log(1);
           console.log(2);
           abc();
           console.log(4);
           abc();
           console.log(5);
           abc();
           console.log(6);
           abc();
           console.log(7);
           console.log(8);
        </script>
    </body>
</html>

결과-1)

예시-2)

<html>
    <body>
        <h1>VAT</h1>
        <script>
            function 부가세계산(가격,부가세율){
                let 부가세=가격*부가세율;
                console.log(부가세);
                return 부가세;
            }

            console.log(부가세계산(2000, 0.1));//인자, argument, 입력값
            
        

        </script>
        <h1>SUM</h1>
        <script>
            function sum(val1, val2){
                return val1+val2
            }
          alert(sum(100,200)*10)
        </script>
    </body>
</html>

결과-2)

콘솔 상 화면

<참고>
JavaScript의 경우 함수를 Function이 아닌 function 으로 'f' 소문자를 사용하게 된다.

예시-3) 조건문+반복문+함수
(if문+for문+function)

<!doctype html>
<html>
<head>
    <title>WEB</title>
    <meta charset="utf=8">
</head>
<body >
    <script>
    function night()   {
   document.querySelector('body').style.backgroundColor='black';
   document.querySelector('body').style.Color='white';
   let as = document.querySelectorAll('a');
   for(let i=0;i<as.length;i=i+1){
       as[i].style.color='white';
   }
        }
        function day(){
        document.querySelector('body').style.backgroundColor='white';
        document.querySelector('body').style.Color='black';
        let as = document.querySelectorAll('a');
        for(let i=0;i<as.length;i=i+1){
        as[i].style.color='black';
    }

        }
    </script>
    <input type="button" id='dnbtn' value="night" onclick="
    let button= this;
    if(button. value==='night'){
   night();
   button. value='day';
 
    }else{
    day();  
    button.value='night';
}
">


     <h1><a href="index.html">WEB</a></h1>

    <div id="container">
        </ol>
        <li><a href="1.html">HTML</a></li>
        <li><a href="2.html">CSS</a></li>
        <li><a href="3.html">JavaScript</a></li><br>
        
        </ol>
    </div>
    </script>
    <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

</body>
</html>

결과-3)

처음 화면
night 버튼 눌렀을 때
day 버튼 눌렀을 때

4) 객체(object)
객체는 서로 연관된 변수와 함수를 그루핑해서 이름을 붙인 것이다.
객체란? '실제로 존재하는 사물'을 의미하고' 이름(name)과 값(value)으로 구성된 속성(property)을 가진 JavaScript의 기본 데이터이다.

<참고>
객체는 중괄호{}로 표시한다.

예시1)

<html>
    <body>
        <h1>Object</h1>
        <script>
            let student=['egoing','duru' ]
            console.log(student[0], student[1]);

            let member={developer:'egoing',designer:'duru' };//0:developer, 1:designer
            console.log(member.developer, member.designer);

            let person={name:'egoing', city:'seoul',job:'developer'};
            console.log(person.name, person.city, person.job);

            let MyMath={}
            MyMath.PI=3.14;
            MyMath.sum=function(val1,val2){
                return val1+val2;

            }
            console.log(MyMath.PI);
            console.log(MyMath.sum(10,20));
        </script>
    </body>
</html>

결과1)

4) 수업 중 유용한 사이트
4-1) compare online

두개의 코드에서 어느쪽이 틀렸는지 등 표시하여 비교 할 수 있는 사이트
https://text-compare.com/

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

2-1) 반복문(for문) 작성 상 오류

let inputs= document.querySelectorAll('input');


for(let i=0; i=inputs.length; i=i+1){
    inputs[i].click()
}

3. 해결방법 작성

let inputs= document.querySelectorAll('input');


for(let i=0; i<inputs.length; i=i+1){
    inputs[i].click()
}

반복문의 기본 구조인

for(초기변수; 조건식; 변수증감식){
	//code
	}

에서 조건식의 오류가 있는것을 발견하게 되었다.
조건식에서는 앞서와 같이 변수와 어떠한 조건을 비교하는 곳으로써 결과갑이 참(true)일때 안의 코드를 반복하여 결과값이 거짓(false)일 경우 for문이 끝나게 되는데 이때 i<10 ,,, i===0 등의 예시가 있다.
JavaScript에서는 '='이라는 것은 없고 동등 연산자 중 == 또는 === 가 존재한다.
연산자관련 수업과 관련하여
부호 연산자(+,-)/ 증감 연산자(++,--), 논리부정연산자(!, not이라는 의미),비교연산자(<,<=,>=,==,!=), 논리 연산자(&&(and라는 의미로서 , 와 같음), &,!) 등이 존재한다.

<참고>
상기 코드의 조건식에서는 단순히 i<inputs; 이 아닌

i<inputs.length;

로 뒤에 . length; 가 붙어야 정상적으로 실행 된다.

4.학습 소감

어제 조건문과 반복문 관련하여 오후에 기본 구조 등 공부를 해서 본인이 어느정도 이해하고 있지 않았을까? 라는 생각과 함께 코딩되어 있는 부분을 해석하는것은 어느정도 가능하다고 생각하였는데 막상 오늘 수업을 통해 이해하는 것과 실제 본인이 코딩하는 부분은 다르다는 것을 느끼게 되었고 스스로 계속 조건문, 반목문 그리고 이번에 배운 함수를 적용하면서 공부해야겠다.라고 생각이 들었습니다.

Author And Source

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