2022.3.25 개발일지 javascript

1.학습한 내용

함수 function

<script>
function name (parameter){
실행할내용;
return 리턴값(필수적이지않음);
}

</script>

객체지향 object

<script>
let member={developer:'a',developer:'b'};

let mymath={}
mymath.pi=3.14;
mymath.sum=function(x,y){
	return x+y;
}
// object안에 함수넣기
</script>

 <script>
        function night(){
            document.querySelector('body').style.backgroundColor='black';
            document.querySelector('body').style.color='white';
            this.value='day';
            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';
            this.value='night';
            let as=document.querySelectorAll('a');
            for(let i=0;i<as.length;i=i+1){
                as[i].style.color='black';           
        }
    }
    </script>

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

배경, 글씨컬러, 하이퍼링크컬러(for문 이용) 를 바꿔주는 night 와 day 함수를 만들고
클릭이 있을때 조건문을 실행하는 버튼을 만들어서 토글키를 만듬

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

input 태그를 가진 전부를 선택해서 btn이라는 변수에 할당
i가 0부터 1씩 더해가면서 btn의길이보다 작을때까지 btn[i]를 클릭 반복

실행결과

학습한 내용 중 해결못한 것
여전히 function 내부에 if문을 넣어서 만들면 배경화면색상은 바뀌는데 버튼의 day night 글이 바뀌지않는다.

해결방법
모르겠다.

학습 소감
key-value로 값을 저장하는걸 새로배웠고 함수를 지정하는 다른방법도배웠다.
복습을 하면서 확실히 어제보다 익숙해졌고 짧은코드가 좋다고 생각했는데 가독성이좋고 변경이 편한코드가 좋다는게 어떤느낌인지 약간 알것 같다.