2022.3.24 개발일지 javascript

학습한 내용
boolean
true false
값이 참이면 true
값이 거짓이면 false

comparison operator
"> < === !=="
크다 작다 같다 같지않다

conditional statements
"if (조건){실행할문장1;}
else{실행할문장2;}
만약 조건에 해당하면 문장1을실행 아니라면 문장2를 실행

사용자입력
prompt("출력할문장");

array
let topics=['html','css','js']
topics라는 변수를 선언함과 동시에 3가지 값을 갖고있는 배열

topics.length
배열의 길이

loop
for(let i=0;조건;변화){실행할문장}
i라는 변수를 선언함과 동시에 0을 할당
실행할문장을 조건을 만족하지않을때까지 반복
한번의 반복마다 i의 변화

style.css

<link rel="stylesheet" href="style.css"> 

head태그안에 있는 스타일을 css파일로 저장하고
대신 링크를 참조하여 css파일의 수정을 통해 참조하고있는 모든 html의 스타일을 수정할 수 있다.

background-image:url("");
배경이미지 넣기
background-size:cover;
배경이미지가 화면에 꽉차게

this
태그내에서 자기자신을 가리킴

<input id="bttt" type="button" value="night" onclick="
let but=this
if(but.value==='night'){
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';
but.value='day';
}
else{
document.querySelector('body').style.backgroundColor='white';
document.querySelector('body').style.color='black';
but.value='night';
}
">코드를 입력하세요

자체공부내용
onclick안에 들어갈 조건문 자체를 함수로 만듬
function button_click(){실행할문장}

  <input type="button" value="night" onclick="button_click(this.value)">
      
            
        <script>
            function button_click(v){
            if(v==='night'){
            document.querySelector('body').style.backgroundColor='black';
            document.querySelector('body').style.color='white';
            v='day';
            }
            else{
            document.querySelector('body').style.backgroundColor='white';
            document.querySelector('body').style.color='black';
            v='night';
            }
            }
        </script>

소스파일을 실행한 결과 첨부

학습한 내용 중 해결못한 것
function으로 만들었더니 배경화면색상은 바뀌는데 버튼의 day night 글이 바뀌지않는다.
function의 파라미터에 값을 넣고 this.value를 파라미터로 바꿨더니 검정색으로 한번만 바뀌고 동작하지않는다.

해결방법
모르겠다. 구글링 해보는 수밖에

학습 소감
어제 만들고싶었던 토글키를 만들어서 재미있었다.