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로 값을 저장하는걸 새로배웠고 함수를 지정하는 다른방법도배웠다.
복습을 하면서 확실히 어제보다 익숙해졌고 짧은코드가 좋다고 생각했는데 가독성이좋고 변경이 편한코드가 좋다는게 어떤느낌인지 약간 알것 같다.
Author And Source
이 문제에 관하여(2022.3.25 개발일지 javascript), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@periachronicle/2022.3.25-개발일지-javascript저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)