독학
♧9/22 생활코딩 [자바스크립트] 나이트데이토글 여러개넣기/this/리팩토링/반복문/배열/개수세기/데이터추가/반복문문법/
피자돈가스
2022. 9. 22. 23:22
<input id="night_day" type="button" value="night" onclick="
if (document.querySelector('#night_day').value === 'night'){
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';
document.querySelector('#night_day').value = 'day';
} else {
document.querySelector('body').style.backgroundColor='white';
document.querySelector('body').style.color='black';
document.querySelector('#night_day').value = 'night';
}
">
이 코드를 페이지 맨 밑에도 넣어서 버튼 두개를 작동시키고 싶은데 이걸 그대로 복붙애서 넣으니 버튼이 night 로만 작동하고 day 버튼은 작동이 안됨. (그러나 위에꺼때문에 까매졌다가 밝아졌다가는 함 )
-해결방법
<input id="night_day2" type="button" value="night" onclick="
if (document.querySelector('#night_day2').value === 'night'){
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';
document.querySelector('#night_day2').value = 'day';
} else {
document.querySelector('body').style.backgroundColor='white';
document.querySelector('body').style.color='black';
document.querySelector('#night_day2').value = 'night';
}
">
이렇게 해주면 밑에서도 night day 하며 누를때마다 바뀜.
그런데, 저 인덱스 태그를 가르키도록 약속하는 특수한 태그가 있다.
<input type="button" value="night" onclick="
if (this.value === 'night'){
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';
this.value = 'day';
} else {
document.querySelector('body').style.backgroundColor='white';
document.querySelector('body').style.color='black';
this.value = 'night';
}
">
이렇게 this 로 바꾸어주고 인풋 타입 뭐시기뭐시기..이름안짓고 똑같이 저거랑 돌아간다.
이건 위아래 복사해도 둘다 잘 움직인다.
-그런데
document.querySelector('body')
이거 중복이자나 네개나 돼.
->
if (this.value === 'night'){
var target = document.querySelector('body');
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';
this.value = 'day';
} else {
document.querySelector('body').style.backgroundColor='white';
document.querySelector('body').style.color='black';
this.value = 'night';
}
.
<input type="button" value="night" onclick="
if (this.value === 'night'){
var target = document.querySelector('body');
target.style.backgroundColor='black';
target.style.color='white';
this.value = 'day';
} else {
target.style.backgroundColor='white';
target.style.color='black';
this.value = 'night';
}
">
한번더 중복제거한거다,
document.querySelector('body').style
얘를
->
target.style.
요렇게.
코드가 훨씬 간결해졌다.
이러면 이름 변수를 타겟으로 쓰는것들이 한꺼번에 바뀐다.!!
'음.. 나이트 테마 참 좋은데 링크 달린 글씨가 너무 어두워서 잘 안보이는걸?
->
버튼 클릭했을때 웹페이지에 있는 모든 링크를 스타일 속성을 밝게 해서 바꿀 수 도 있다.
그러나 링크가 1억개라면 매우 힘들겠지? 그럴 때 쓰는게 바로
반복문.
반복문을 쓰기 위해 필요한 배열을 공부해보자.
<배열>
-배열은 수납상자이다.
-배열의 문법과 성격을 살펴보자.
=>
var coworers = ["egoing", "leeche"];
코 워커스 라는 변수에 [ ] 안에 든 배열이라는 데이터 타입이 담긴 모양이다. 데이터 타입에 코워커스라는 이름을 붙인 것.
-가져오는 법
<h2>get</h2>
<script>
document.write(coworers[0]);
</script>
=첫번째 자리에 있는 값은 0번째 라는 뜻이다.
(인덱스 0번은 이고잉이고, 1번은 리체)
=
-개수 세기.
<h2>count</h2>
<script>document.write(coworers.length)
</script>
-데이터 추가하기
데이터 추가하기
<script>
coworers.push('두루');
coworers.push('태호');
</script>
결과
총 4명이 됐으니까 4 가 뜨는것이당~
<반복문의 문법>
<h1>loop (반복문을 영어로 루프라고 한다)</h1>
<ul>
<script>
document.write('<li>1</li>')
document.write('<li>2</li>')
document.write('<li>3</li>')
document.write('<li>4</li>')
</script>
</ul>
여기서 2, 3 을 반복해서 나타내고 싶을 때! (3번 반복해보려면 어띃게 할까?.)
반복문에 쓰이는 문법인데
while(){}
이프 문법과 비슷하다.
() 괄호 안의 정보가 true 라면 {} 이 안에 있는 정보를 계속계속 반복하고, false가 뜨면 반복이 끝나면서 while 다음의 정보가 실행된다. 이것이 반복문의 이론이당.
<body>
<h1>loop (반복문을 영어로 루프라고 한다)</h1>
<ul>
<script>
document.write('<li>1</li>');
var i = 0;
while(i <3){
document.write('<li>2</li>');
document.write('<li>3</li>');
i=i+1;
}
document.write('<li>4</li>');
</script>
</ul>
</body>
= 2 랑 3을 3번 반복하고싶어서 만든 코드.
한번 돌때마다 i가 1씩 더해져서 i가 3보다 작을때까지만 반복하도록 만든 코드다.
결과
후.. 내가 또 i 를 1로 오타쳐놔서
무한 로딩에 빠졌는데 뭘 잘못쳤는지 도저히 못찾겠어서 울 애기한테 물어봤더니
힌트를 알려주면서
이렇게 말해줬다.. 학원에서도 오타때문에 질문 한번 했었는데
앞으론 머리를 쫌 써야겠다. 바보니?
근데 첨엔 다 이렇대.. 위안을 얻고 앞으로 잘해야지
안녕
